? ? 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ì)理念。本次我們?cè)谶M(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，核心用戶是粉絲群，核心場(chǎng)景是明星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)系”囊蓝，因此我們?cè)O(shè)計(jì)了頭圖饿悬，并非為了美化頁面令蛉，而是希望以有意義的圖喚起用戶的情感－對(duì)明星（杰倫）的愛聚霜，帶著這種情感開始App體驗(yàn)；
3珠叔、對(duì)于微博列表圖片尺寸蝎宇，小圖（微信、微博）可以弱化圖片祷安，避免多種用戶信息混合時(shí)姥芥，圖片質(zhì)量不一的問題，大圖則對(duì)圖片品質(zhì)要求較高汇鞭；分析需求后凉唐，我們決定使用類似Tumblr的滿寬大圖設(shè)計(jì)，因?yàn)槊餍前l(fā)的圖片相對(duì)品質(zhì)較高霍骄，大圖布局更有表現(xiàn)力台囱。
4、對(duì)于“明星發(fā)微博”這個(gè)行為读整，我們非常鼓勵(lì)簿训，因此我們把他定義為核心操作，使用了fab按鈕。
? ? 第二强品，粉絲社區(qū)模塊膘侮，帖子列表頁：
1、在布局上的榛，與之前的思路一致琼了，我們使用卡片聚合元素，卡片很適合容納對(duì)同一內(nèi)容的多種操作夫晌，包括點(diǎn)贊表伦、評(píng)論、查看詳情慷丽、查看發(fā)帖者等蹦哼；
2、同樣要糊，我們保留了頭圖設(shè)計(jì)纲熏，以帶動(dòng)用戶情感，例如我們?cè)诮诩尤肱c杰倫結(jié)婚相關(guān)的圖片锄俄，期望引發(fā)粉絲對(duì)青春落幕的追憶局劲，受到這種情感渲染的用戶更有意愿參與話題討論；
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í)按鈕漸隱的效果施流。
? ? 在帖子詳情頁，由于此場(chǎng)景下主要需求為瀏覽鄙信，所以我們沒有使用卡片瞪醋，而使用干擾性較低的平鋪設(shè)計(jì)：
1、我們使用了MD規(guī)范中很弱的內(nèi)凹分隔線（Inset dividers）來分割樓層：弱分隔線可以盡量不打擾到用戶對(duì)內(nèi)容的關(guān)注扮碧，同時(shí)對(duì)于有錨點(diǎn)的頁面趟章，用內(nèi)凹線更有利于用戶通過錨點(diǎn)進(jìn)行垂直掃描（用戶可通過掃描頭像定位感興趣的用戶及內(nèi)容）杏糙。
2、將分隔線置于子標(biāo)題（跟貼）之上蚓土，可以加強(qiáng)子標(biāo)題與內(nèi)容關(guān)聯(lián)度
3宏侍、對(duì)于點(diǎn)贊和評(píng)論按鈕，由于這里的核心需求為瀏覽蜀漆，所以我們將這兩個(gè)按鈕定義為MD中“非主要谅河、但是能快速定位到的按鈕”，選擇使用底部固定按鈕确丢。
? ? 第三绷耍，IM模塊，為用戶提供消息鲜侥、會(huì)話功能褂始，是社交系統(tǒng)的基礎(chǔ)：
1、由于會(huì)話瓦片沒有多項(xiàng)聚合操作描函，同時(shí)文本只有兩行崎苗，所以我們選擇了平鋪列表設(shè)計(jì)（卡片容易造成快速scan時(shí)的視覺卡頓）；同時(shí)我們沿用左對(duì)齊的頭像和內(nèi)凹分割線來滿足快速scan需求舀寓。
2胆数、聊天界面，由于可參考的設(shè)計(jì)相對(duì)成熟互墓，所以我們沒有做太多創(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)然僵缺，對(duì)于明星社交產(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ì)師潘樹彬焕参、阮航凱轻纪、程華明）
