Material?Design（以下簡稱MD）是Google在Android 5.0發(fā)布后主推的ue設(shè)計規(guī)范，旨在解決Android平臺設(shè)計風(fēng)格不統(tǒng)一的問題，其核心理念“材質(zhì)化”是基于擬物與扁平之間的設(shè)計，強調(diào)真實世界元素的物理規(guī)律與空間關(guān)系，既避免了擬物設(shè)計的低效問題，又解決了太“扁平”帶來的交互層級困惑，個人很認(rèn)同這種設(shè)計理念。本次我們在進行一款孵化型產(chǎn)品－明星App的設(shè)計時，也采用了這種設(shè)計理念，與大家分享一下實戰(zhàn)經(jīng)驗（由于是設(shè)計討論，本次關(guān)于這款產(chǎn)品的來龍去脈就先不細(xì)表咯）。

首先說下產(chǎn)品定位，這一款以明星為主題的社交App，核心用戶是粉絲群，核心場景是明星to粉絲、粉絲to粉絲間的互動，輔以明星周邊商品售賣，并通過游戲化設(shè)計拉動用戶行為?；谶@個定位，我們切割了幾個主模塊：明星微博，粉絲社區(qū)，商城，基礎(chǔ)IM，及游戲化系統(tǒng)。

首先來看下明星微博：

1. MD的核心設(shè)計元素是“卡片”，通過不同卡片層級，來體現(xiàn)信息重要度和交互層級。所以我們使用了卡片作為微博容器，很方便的把多類元素聚合；
2. MD強調(diào)圖片應(yīng)“使用能夠喚起回憶的影像來建立用戶與應(yīng)用程序的情感聯(lián)系”。因此我們設(shè)計了頭圖，并非為了美化頁面，而是希望以有意義的圖喚起用戶的情感－對明星（杰倫）的愛，帶著這種情感開始App體驗；
3. 對于微博列表圖片尺寸，小圖（微信、微博）可以弱化圖片，避免多種用戶信息混合時，圖片質(zhì)量不一的問題。大圖則對圖片品質(zhì)要求較高；分析需求后，我們決定使用類似Tumblr的滿寬大圖設(shè)計，因為明星發(fā)的圖片相對品質(zhì)較高，大圖布局更有表現(xiàn)力。
4. 對于“明星發(fā)微博”這個行為，我們非常鼓勵，因此我們把他定義為核心操作，使用了fab按鈕。

第二，粉絲社區(qū)模塊，帖子列表頁：

1. 在布局上，與之前的思路一致，我們使用卡片聚合元素?？ㄆ苓m合容納對同一內(nèi)容的多種操作，包括點贊、評論、查看詳情、查看發(fā)帖者等；
2. 同樣，我們保留了頭圖設(shè)計，以帶動用戶情感。例如我們在近期加入與杰倫結(jié)婚相關(guān)的圖片，期望引發(fā)粉絲對青春落幕的追憶，受到這種情感渲染的用戶更有意愿參與話題討論；
3. 當(dāng)多圖橫排預(yù)覽時，我們選擇了小圖，以降低圖片品質(zhì)不一可能造成的干擾。同時我們特別在右側(cè)留出空白空間，方便用戶學(xué)習(xí)、理解“點擊卡片查看詳情”的操作（操作熱區(qū)不被最右側(cè)圖片遮擋）；
4. 發(fā)帖按鈕，在社區(qū)首頁的定位同樣是“唯一主要操作”，所以我們選擇了fab按鈕；同時，為了降低瀏覽時的干擾，我們會做一個類似Evernote滑動瀏覽時按鈕漸隱的效果。

在帖子詳情頁，由于此場景下主要需求為瀏覽，所以我們沒有使用卡片，而使用干擾性較低的平鋪設(shè)計：

1. 我們使用了MD規(guī)范中很弱的內(nèi)凹分隔線（Inset dividers）來分割樓層：弱分隔線可以盡量不打擾到用戶對內(nèi)容的關(guān)注，同時對于有錨點的頁面，用內(nèi)凹線更有利于用戶通過錨點進行垂直掃描（用戶可通過掃描頭像定位感興趣的用戶及內(nèi)容）。
2. 將分隔線置于子標(biāo)題（跟貼）之上，可以加強子標(biāo)題與內(nèi)容關(guān)聯(lián)度
3. 對于點贊和評論按鈕，由于這里的核心需求為瀏覽，所以我們將這兩個按鈕定義為MD中“非主要、但是能快速定位到的按鈕”，選擇使用底部固定按鈕。

第三，IM模塊，為用戶提供消息、會話功能，是社交系統(tǒng)的基礎(chǔ)：

1. 由于會話瓦片沒有多項聚合操作，同時文本只有兩行，所以我們選擇了平鋪列表設(shè)計（卡片容易造成快速scan時的視覺卡頓）；同時我們沿用左對齊的頭像和內(nèi)凹分割線來滿足快速scan需求。
2. 聊天界面，由于可參考的設(shè)計相對成熟，所以我們沒有做太多創(chuàng)新，照搬常用布局，滿足需求即可。

商城模塊及個人頁，我們也按照MD規(guī)范進行了標(biāo)準(zhǔn)卡片、列表設(shè)計：

此外，在各種組件細(xì)節(jié)上，我們也盡量使用MD標(biāo)準(zhǔn)組件，如以上組圖中出現(xiàn)的帶陰影的title bar；單條橫線，無邊框的文本框；懸浮按鈕、底部固定按鈕；標(biāo)準(zhǔn)提示框等。

以上便是這次我們結(jié)合Material Design做的產(chǎn)品UE框架。當(dāng)然，對于明星社交產(chǎn)品，我們的最終目標(biāo)是提供更情感化、體現(xiàn)明星氣質(zhì)的個性設(shè)計，但MD關(guān)于空間關(guān)系、物理運動規(guī)律、響應(yīng)的定義，為UE設(shè)計提供了一種穩(wěn)定、統(tǒng)一的核心規(guī)范，是一種優(yōu)雅、高效的設(shè)計。希望MD能被廣泛應(yīng)用。

（感謝ND UEDC設(shè)計師潘樹彬、阮航凱、程華明）

本文由 @未羽 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。