? ? Material Design（以下簡稱MD）是Google在Android 5.0發(fā)布后主推的ue設(shè)計(jì)規(guī)范，旨在解決Android平臺(tái)設(shè)計(jì)風(fēng)格不統(tǒng)一的問題，其核心理念“材質(zhì)化”是基于擬物與扁平之間的設(shè)計(jì)，強(qiáng)調(diào)真實(shí)世界元素的物理規(guī)律與空間關(guān)系，既避免了擬物設(shè)計(jì)的低效問題，又解決了太“扁平”帶來的交互層級(jí)困惑，個(gè)人很認(rèn)同這種設(shè)計(jì)理念。本次我們在進(jìn)行一款孵化型產(chǎn)品－明星App的設(shè)計(jì)時(shí)，也采用了這種設(shè)計(jì)理念，與大家分享一下實(shí)戰(zhàn)經(jīng)驗(yàn)（由于是設(shè)計(jì)討論，本次關(guān)于這款產(chǎn)品的來龍去脈就先不細(xì)表咯）。
? ? 首先說下產(chǎn)品定位，這一款以明星為主題的社交App，核心用戶是粉絲群，核心場景是明星to粉絲、粉絲to粉絲間的互動(dòng)，輔以明星周邊商品售賣，并通過游戲化設(shè)計(jì)拉動(dòng)用戶行為。基于這個(gè)定位，我們切割了幾個(gè)主模塊：明星微博，粉絲社區(qū)，商城，基礎(chǔ)IM，及游戲化系統(tǒng)。
? ? 首先來看下明星微博：
1、MD的核心設(shè)計(jì)元素是“卡片”，通過不同卡片層級(jí)，來體現(xiàn)信息重要度和交互層級(jí)。所以我們使用了卡片作為微博容器，很方便的把多類元素聚合；
2、MD強(qiáng)調(diào)圖片應(yīng)“使用能夠喚起回憶的影像來建立用戶與應(yīng)用程序的情感聯(lián)系”，因此我們設(shè)計(jì)了頭圖，并非為了美化頁面，而是希望以有意義的圖喚起用戶的情感－對明星（杰倫）的愛，帶著這種情感開始App體驗(yàn)；
3、對于微博列表圖片尺寸，小圖（微信、微博）可以弱化圖片，避免多種用戶信息混合時(shí)，圖片質(zhì)量不一的問題，大圖則對圖片品質(zhì)要求較高；分析需求后，我們決定使用類似Tumblr的滿寬大圖設(shè)計(jì)，因?yàn)槊餍前l(fā)的圖片相對品質(zhì)較高，大圖布局更有表現(xiàn)力。
4、對于“明星發(fā)微博”這個(gè)行為，我們非常鼓勵(lì)，因此我們把他定義為核心操作，使用了fab按鈕。
? ? 第二，粉絲社區(qū)模塊，帖子列表頁：
1、在布局上，與之前的思路一致，我們使用卡片聚合元素，卡片很適合容納對同一內(nèi)容的多種操作，包括點(diǎn)贊、評(píng)論、查看詳情、查看發(fā)帖者等；
2、同樣，我們保留了頭圖設(shè)計(jì)，以帶動(dòng)用戶情感，例如我們在近期加入與杰倫結(jié)婚相關(guān)的圖片，期望引發(fā)粉絲對青春落幕的追憶，受到這種情感渲染的用戶更有意愿參與話題討論；
3、當(dāng)多圖橫排預(yù)覽時(shí)，我們選擇了小圖，以降低圖片品質(zhì)不一可能造成的干擾，同時(shí)我們特別在右側(cè)留出空白空間，方便用戶學(xué)習(xí)、理解“點(diǎn)擊卡片查看詳情”的操作（操作熱區(qū)不被最右側(cè)圖片遮擋）；
4、發(fā)帖按鈕，在社區(qū)首頁的定位同樣是“唯一主要操作”，所以我們選擇了fab按鈕；同時(shí)，為了降低瀏覽時(shí)的干擾，我們會(huì)做一個(gè)類似Evernote滑動(dòng)瀏覽時(shí)按鈕漸隱的效果。
? ? 在帖子詳情頁，由于此場景下主要需求為瀏覽，所以我們沒有使用卡片，而使用干擾性較低的平鋪設(shè)計(jì)：
1、我們使用了MD規(guī)范中很弱的內(nèi)凹分隔線（Inset dividers）來分割樓層：弱分隔線可以盡量不打擾到用戶對內(nèi)容的關(guān)注，同時(shí)對于有錨點(diǎn)的頁面，用內(nèi)凹線更有利于用戶通過錨點(diǎn)進(jìn)行垂直掃描（用戶可通過掃描頭像定位感興趣的用戶及內(nèi)容）。
2、將分隔線置于子標(biāo)題（跟貼）之上，可以加強(qiáng)子標(biāo)題與內(nèi)容關(guān)聯(lián)度
3、對于點(diǎn)贊和評(píng)論按鈕，由于這里的核心需求為瀏覽，所以我們將這兩個(gè)按鈕定義為MD中“非主要、但是能快速定位到的按鈕”，選擇使用底部固定按鈕。
? ? 第三，IM模塊，為用戶提供消息、會(huì)話功能，是社交系統(tǒng)的基礎(chǔ)：
1、由于會(huì)話瓦片沒有多項(xiàng)聚合操作，同時(shí)文本只有兩行，所以我們選擇了平鋪列表設(shè)計(jì)（卡片容易造成快速scan時(shí)的視覺卡頓）；同時(shí)我們沿用左對齊的頭像和內(nèi)凹分割線來滿足快速scan需求。
2、聊天界面，由于可參考的設(shè)計(jì)相對成熟，所以我們沒有做太多創(chuàng)新，照搬常用布局，滿足需求即可。
? ? 商城模塊及個(gè)人頁，我們也按照MD規(guī)范進(jìn)行了標(biāo)準(zhǔn)卡片、列表設(shè)計(jì)：
? ? 此外，在各種組件細(xì)節(jié)上，我們也盡量使用MD標(biāo)準(zhǔn)組件，如以上組圖中出現(xiàn)的帶陰影的title bar；單條橫線，無邊框的文本框；懸浮按鈕、底部固定按鈕等。
? ? 以上便是這次我們結(jié)合Material Design做的產(chǎn)品UE框架。當(dāng)然，對于明星社交產(chǎn)品，我們的最終目標(biāo)是提供更情感化、體現(xiàn)明星氣質(zhì)的個(gè)性設(shè)計(jì)，但MD關(guān)于空間關(guān)系、物理運(yùn)動(dòng)規(guī)律、響應(yīng)的定義，為UE設(shè)計(jì)提供了一種穩(wěn)定、統(tǒng)一的核心規(guī)范，是一種優(yōu)雅、高效的設(shè)計(jì)。希望MD能被廣泛應(yīng)用。
（感謝ND UEDC設(shè)計(jì)師潘樹彬、阮航凱、程華明）
