豆瓣影片詳情頁臨摹

與其說“臨摹”,不如說是“默畫”,百度對默畫的描述是“憑記憶作畫,是熟練掌握繪畫技巧,加深結構理解的一種很好的手段。一般要求先對形象有較深入的理解,對形象的特徵結構及運動規律胸有成竹,然後再憑記憶畫出來”,道理都一樣,繪畫能如此,做產品當然也適用。

不是每個人都是喬布斯,對於我來說,產品之路是先臨摹,再默畫,然後重設計,最後才創造。

1、某一個空間下內容元素多但又都不可缺少(比如短評裏頭像、暱稱、評分、點贊數、時間等),此時各元素位置該如何放置?

解決方案:

有幾個元素的位置可以直接確定,優先展示頭像(識別度高),然後是暱稱(唯一識別),接下來纔是評分(主體進的動作)。

點贊數我放在了頭像和暱稱下面,時間則很自然的放在頭像、暱稱、評分這一行的最右側。豆瓣的做法是將點贊數放在短評的下方左側,這裏我忽略了一點,用戶在這個地方其實是可以點讚的,而我僅僅把它當做數量上的展示用,忘記了它還是一個按鈕。豆瓣做法的優點有兩處,一是邏輯上的正確,先看短評,再決定是否點贊,二是行動上的簡便,因爲短評與短評之間間距較大(下面會談到),放在兩條短評中間比放在頭像和短評中間更方便用戶操作。

定好了點贊數(按鈕)的放置位置,爲了平衡視覺上的差異,於是將時間也移到了下方右側,同時點贊數(按鈕)、時間都用了灰白色顯示,推測是爲了弱化這些元素,從而引導用戶更關注評論內容本身。

爲每一個設計行爲找到迴應“WHY”的依據,儘量少的拍腦袋決定。

2、單個頁面內欄目太多,要下滑許多屏才能瀏覽完,如何做好各個內容之間的區分?

解決方案:

我首先想到的是用細橫線或者卡片來做分割,但是實際操作中都否定了,豆瓣的影片詳情頁有六屏之多,而且每個欄目裏面的內容也需要區分開來,畫了一下簡略的原型,滿眼的橫線實在受不了;另外就是用卡片,但豆瓣的原設計就沒有用到卡片,有很多欄目也不適合用卡片。

那麼看豆瓣是怎麼做的,細橫向、留白和配色混合解決。豆瓣也用了細橫線,都是用的很剋制,這裏說剋制是因爲不僅用的少(總共三條,分別在“我的評分”、“即時討論”,“短評”下),而且這些線既細又淺,難以覺察但又的確存在。留白主要用在五條短評和五條影評中間,因爲留的多(已經六屏,不在乎多少了),第一眼看上去還是很好區分的,感受也不錯。配色分割有兩處,一處是更多,“更多”用了綠色的主色調,提醒用戶有更多內容的同時很巧妙區分開了各個欄目;另一處是這部片子被收集的豆列,這裏整個背景色都用了灰色,很好區分,邏輯上也透露出和影片的關係不是特別緊密。

3、豆瓣電影的每部電影頁面裏,影評默認只顯示前六條(網頁版)熱門影評,那如何避免出現馬太效應?(來自知乎)

解決方案:

這裏可以直接去知乎看哦

http://www.zhihu.com/question/20327678

http://www.zhihu.com/question/19588679

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章