中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

Material?Design（以下簡(jiǎn)稱(chēng)MD）是Google在Android 5.0發(fā)布后主推的ue設(shè)計(jì)規(guī)范，旨在解決Android平臺(tái)設(shè)計(jì)風(fēng)格不統(tǒng)一的問(wèn)題，其核心理念“材質(zhì)化”是基于擬物與扁平之間的設(shè)計(jì)，強(qiáng)調(diào)真實(shí)世界元素的物理規(guī)律與空間關(guān)系，既避免了擬物設(shè)計(jì)的低效問(wèn)題，又解決了太“扁平”帶來(lái)的交互層級(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)品的來(lái)龍去脈就先不細(xì)表咯）。

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

首先來(lái)看下明星微博：

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

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

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

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

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

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

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

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

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

以上便是這次我們結(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ì)師潘樹(shù)彬、阮航凱、程華明）

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