如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
這篇文章我們來談?wù)?strong>移動(dòng)端和PC端交互設(shè)計(jì)上的區(qū)別。
經(jīng)常遇到一些設(shè)計(jì)師，他們之前負(fù)責(zé)的都是pc端產(chǎn)品，突然改做移動(dòng)端，會(huì)不自覺的把pc端的一些設(shè)計(jì)理念“移植”到移動(dòng)端，出現(xiàn)了水土不服。有經(jīng)驗(yàn)的設(shè)計(jì)師一看你設(shè)計(jì)的移動(dòng)端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么移動(dòng)端和pc端交互設(shè)計(jì)上的區(qū)別究竟在哪呢？
大屏到小屏
開門見山，移動(dòng)端和pc端最根本的區(qū)別就是屏幕的大小。屏幕的大小直接決定了界面信息量，pc端一個(gè)頁面可以展示完全的信息可能需要移動(dòng)端好幾個(gè)頁面來承載。
可能有的設(shè)計(jì)師覺得，屏幕尺寸不一樣做自適應(yīng)不就行了，移動(dòng)端頁面做長一點(diǎn)，讓用戶滑動(dòng)就可以了。這是一個(gè)非常簡單的處理方案，但是忽略了一個(gè)重要前提：用戶愿不愿意滑動(dòng)？根據(jù)埋點(diǎn)數(shù)據(jù)顯示，多數(shù)移動(dòng)端頁面超過一屏的內(nèi)容的曝光與點(diǎn)擊量會(huì)急劇下滑，說明用戶很少主動(dòng)滑動(dòng)去查看一屏以外的內(nèi)容。對(duì)于移動(dòng)端產(chǎn)品來說，一些重要的內(nèi)容必須保證用戶在一屏內(nèi)可以看到。
1）信息架構(gòu)重構(gòu)
因此，如果你要為一個(gè)pc端網(wǎng)站做一個(gè)移動(dòng)端app，首先要做的就是信息架構(gòu)的重構(gòu)。pc端有足夠的空間可以把所有的功能直接展示給用戶，而移動(dòng)端只能展示一些主要的功能，一些次要的功能需要放在下一層級(jí)。
例如，appstore中用戶是可以評(píng)價(jià)這條評(píng)論對(duì)自己是否有幫助的。PC端的處理方式很簡單，直接展示給用戶。而移動(dòng)端是需要用戶長按這條評(píng)論才可以彈出評(píng)價(jià)列表的，可能很多用戶今天看了這篇文章才發(fā)現(xiàn)原來還有這個(gè)功能。沒關(guān)系，之前雖然不知道，但是并沒有影響你正常使用啊。對(duì)次要功能進(jìn)行適當(dāng)?shù)慕档托畔蛹?jí)是移動(dòng)端設(shè)計(jì)師必須要考慮的。
2）一個(gè)頁面，一個(gè)任務(wù)
對(duì)于上面信息架構(gòu)重構(gòu)的觀點(diǎn)可能會(huì)有人存在異議，對(duì)于一些表單類頁面來說，例如用戶要借錢、轉(zhuǎn)賬，有些信息是用戶必須要填的。在這些場景中，我們不擔(dān)心用戶不滑動(dòng)，因?yàn)橛脩舨换瑒?dòng)就無法完成操作。那么在這種情況下，是否可以繼續(xù)延續(xù)pc端的布局樣式？
以上面的轉(zhuǎn)賬流程為例，pc端是直接在一個(gè)頁面展示，而移動(dòng)端是分成了兩個(gè)頁面。為什么這樣？把備注/付款說明也放在第一個(gè)頁面不行嗎？
因?yàn)橐苿?dòng)端用戶使用環(huán)境更加的復(fù)雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個(gè)頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對(duì)信息量，更準(zhǔn)確的說法應(yīng)該是用戶主觀感受上的信息量。同樣的幾個(gè)輸入框，可能在pc端只占了頁面的1/4，而移動(dòng)端占了一整個(gè)頁面，給用戶的感觀是完全不一樣的。頁面塞的滿滿當(dāng)當(dāng)，容易讓用戶焦慮。
一個(gè)頁面可以完成的任務(wù)現(xiàn)在要跳轉(zhuǎn)好幾個(gè)頁面，增加了操作步驟。用戶害怕“內(nèi)容多”，難道不害怕“步驟多”嗎？不害怕，因?yàn)轫撁鎯?nèi)容量是用戶一眼就可以看出來的，用戶無法立刻感知這個(gè)任務(wù)有多少步驟。因?yàn)闊o知，所以無畏。等到用戶知道這個(gè)任務(wù)步驟數(shù)的時(shí)候，整個(gè)任務(wù)都已經(jīng)完成了。
借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會(huì)展示給用戶。這些信息都是跟用戶借款金額相關(guān)的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。
沒有一個(gè)放之四海而皆準(zhǔn)的設(shè)計(jì)原則，所有的設(shè)計(jì)理論都不能罔顧實(shí)際的應(yīng)用場景而機(jī)械的套用。如果前后步驟關(guān)聯(lián)性比較強(qiáng)，我建議不要分頁展示。例如，目前很多的短信驗(yàn)證碼都選擇把“輸入手機(jī)號(hào)”和“輸入短信驗(yàn)證碼”放到兩個(gè)頁面，我個(gè)人對(duì)此持保留意見。設(shè)想一個(gè)場景，如果用戶遲遲沒有收到短信驗(yàn)證碼，那么他需要確定是手機(jī)號(hào)輸錯(cuò)了、網(wǎng)絡(luò)故障還是其他什么原因。用戶需要返回到上一個(gè)頁面查看，如果手機(jī)號(hào)和短信驗(yàn)證碼放在同一個(gè)頁面就簡單多了。
3）突出重要信息
前面我們提到的主要是控制移動(dòng)端頁面的信息量。頁面信息量少就可以了？當(dāng)然不是，我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達(dá)的車次，只能從西安換乘。我們來看看下面兩款產(chǎn)品的處理方式，左邊是12306，右邊是飛豬。12306還是一股pc端風(fēng)格迎面撲來，問題出現(xiàn)在哪？12306跟飛豬展示信息量差不多，唯一的區(qū)別在于12306展示了兩趟車次各自的起止時(shí)間，而飛豬只告訴用戶整趟旅程的起止時(shí)間。
顯然問題不是出現(xiàn)在信息量上，而是對(duì)信息的展示形式上。用戶更關(guān)注的信息，應(yīng)該讓用戶更容易發(fā)現(xiàn)。對(duì)于一趟車次來說，用戶更加關(guān)注出發(fā)/到達(dá)站、出發(fā)/到達(dá)時(shí)間和票價(jià)。對(duì)飛豬界面進(jìn)行高斯模糊處理，發(fā)現(xiàn)用戶的視覺焦點(diǎn)正好落在這些重點(diǎn)信息上。
12306所有的信息都屬于同一層級(jí)，讓人抓不到主次。而且界面中出現(xiàn)了過多的配色，更增加用戶的信息獲取成本。
鼠標(biāo)到手指
pc端用戶與界面進(jìn)行交互靠的是鼠標(biāo)，移動(dòng)端用戶靠的是手指。鼠標(biāo)的操作更加精準(zhǔn)，因此移動(dòng)端界面中元素的尺寸和間距比pc端的大。以下圖為例，左邊是pc端，右邊是移動(dòng)端。移動(dòng)端的輸入框沿用的還是pc端樣式，而且關(guān)于利率和手續(xù)費(fèi)的詳情icon過小，用戶的手指點(diǎn)擊的時(shí)候容易誤操作。
給你的界面做減法
前面我們主要強(qiáng)調(diào)了移動(dòng)端產(chǎn)品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a(chǎn)品信息架構(gòu)的前提下，通過交互設(shè)計(jì)上的改動(dòng)來完成目標(biāo)呢？我給大家介紹兩個(gè)方法：場景化和關(guān)聯(lián)化。
1）場景化
在一個(gè)頁面中，雖然內(nèi)容很多，但是用戶真正感興趣并且會(huì)與之交互的內(nèi)容很少。如果我們可以獲知用戶在特定的場景下對(duì)于某個(gè)內(nèi)容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。
舉一個(gè)之前說過的例子，知乎中，用戶在搜索結(jié)果頁滑動(dòng)大概3屏后，會(huì)出現(xiàn)“向知友提問”按鈕。因?yàn)橛脩艋瑒?dòng)了3屏，說明用戶可能對(duì)當(dāng)前的搜索結(jié)果不滿意，這時(shí)引導(dǎo)用戶去提問，用戶的意愿更高。如果我們?nèi)陶故具@個(gè)去提問按鈕，反而會(huì)減少用戶的實(shí)際瀏覽區(qū)域，造成干擾。
上面主要提到了，同一個(gè)流程，需要根據(jù)用戶不同的使用場景提供不同的功能。其實(shí)即使是同一個(gè)功能，我們也要根據(jù)用戶不同的使用場景選擇不同的展示形式。
還是知乎，為了方便用戶可以快速的查看下一個(gè)回答，給用戶提供了一個(gè)浮動(dòng)按鈕。但是這個(gè)浮動(dòng)按鈕，當(dāng)用戶開始滑動(dòng)頁面時(shí)候就會(huì)改變樣式。這個(gè)很容易理解，當(dāng)用戶剛進(jìn)入這個(gè)頁面，為了降低用戶的學(xué)習(xí)成本，我們需要直接告訴用戶這個(gè)按鈕是干什么的。當(dāng)用戶開始滑動(dòng)進(jìn)入閱讀答案的狀態(tài)，縮小按鈕的形態(tài)避免對(duì)界面信息造成遮擋。
2）關(guān)聯(lián)化
我們需要梳理信息之間的關(guān)聯(lián)性，將相互關(guān)聯(lián)的信息整合在一起，進(jìn)而減少頁面中信息量。支付寶賬單的月份篩選功能，對(duì)入口進(jìn)行了修改。之前用戶需要點(diǎn)擊日歷圖標(biāo)，現(xiàn)在用戶直接點(diǎn)擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。
總結(jié)
以上就是我對(duì)移動(dòng)端和pc端交互設(shè)計(jì)上區(qū)別的簡單分析和總結(jié)，如果你有不同的建議和看法歡迎留言討論。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
項(xiàng)目概述QQ 20周年，是互聯(lián)網(wǎng)產(chǎn)品長青的一個(gè)傳說，就在 20 周年的時(shí)間節(jié)點(diǎn)，QQ 向用戶提供一份關(guān)于他自己的、真誠熱切的 QQ 數(shù)據(jù)總結(jié)。通過數(shù)字，匯集出每個(gè)人自己的 QQ 時(shí)光歷程，從而牽引出每個(gè)人對(duì)于成長、青春、溝通、時(shí)代流動(dòng)的感知與回憶，引發(fā) 2019 年一場集體的情感共鳴。
△ QQ 20年來的一路變遷
項(xiàng)目歷時(shí)兩個(gè)月，從項(xiàng)目初期，視覺和產(chǎn)品密集溝通，了解需求，進(jìn)行頭腦風(fēng)暴，輸出多個(gè)視覺方案縱向?qū)Ρ?，最后確定視覺風(fēng)格，分配視覺工作（插畫，動(dòng)畫，3D）。項(xiàng)目后期，包括開發(fā)還原，數(shù)據(jù)調(diào)配等眾多環(huán)節(jié)，環(huán)環(huán)相扣，缺一不可，一路過關(guān)斬將，整個(gè) H5 需要不同崗位的高度配合和各專業(yè)的高度默契。
△ H5的項(xiàng)目流程圖
1. 異地合作
本次 H5 聯(lián)動(dòng)了動(dòng)效，3D，插畫設(shè)計(jì)師的共同合作，由于支持 3D 的設(shè)計(jì)師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項(xiàng)目進(jìn)度同步，還有后期的模型調(diào)整等環(huán)節(jié)都能及時(shí)反饋，快速反應(yīng)，最后如期打磨出五款 spaceQQ。算是一次順利的異地合作。
△ 五款3D spaceQQ最終效果
2. 3D spaceQQ視覺還原
3D 鵝從設(shè)計(jì)軟件轉(zhuǎn)化為 H5 展示過程中，存在模型文件過大、材質(zhì)缺失等問題，直接影響用戶體驗(yàn)。在開發(fā)的過程中同學(xué)通過模型減面、重新選擇材質(zhì)，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實(shí)現(xiàn)了 15 個(gè) SPACE QQ 的視覺還原。
△ 五款3D spaceQQ最終視覺還原效果
3. 視覺工作的同步進(jìn)行
由于項(xiàng)目時(shí)間比較緊迫，而且 H5 加入了 3D 模型，還有需要大量的動(dòng)效，所以需要在同一時(shí)間線上，同步進(jìn)行，視覺稿輸出，動(dòng)畫制作和 3D 模型打磨?？简?yàn)設(shè)計(jì)師的溝通和執(zhí)行能力。與此同時(shí)，需要隨時(shí)和開發(fā)同步動(dòng)畫 demo 以確保動(dòng)畫可實(shí)現(xiàn)。和產(chǎn)品密集溝通，及時(shí)根據(jù)文案調(diào)整畫面。
因?yàn)?QQ 是陪伴了大多數(shù)用戶的一個(gè)產(chǎn)品，見證了整個(gè)互聯(lián)網(wǎng)社交的演變過程，容易引起用戶的情感共鳴。設(shè)計(jì)的初期，圍繞「個(gè)人軌跡」的主題發(fā)散了不同方向的視覺概念，在引起客戶共鳴感的復(fù)古元素和傳遞不斷「探索」未來的概念間尋找平衡點(diǎn)。最后沿用了 20 周年的太空概念貼合「探索」的主題，結(jié)合有年代特征的代表性視覺符號(hào)來引起「個(gè)人軌跡」的這一概念的用戶情感共鳴。另外，H5 運(yùn)用了 3D 打造了 15 只太空鵝，打造「個(gè)人軌跡」的專屬感，既聯(lián)動(dòng)用戶溫暖的回憶之余，也增添了一些小驚喜。
1. H5整體視覺風(fēng)格
QQ，是陪伴了大多數(shù)人成長的一個(gè)互聯(lián)網(wǎng)產(chǎn)品，其本身帶有很多高辨識(shí)度的視覺元素，例如對(duì)話框，提醒上線的音效等。因?yàn)?H5 本身是一個(gè)大數(shù)據(jù)總結(jié)，專屬感非常強(qiáng)的一個(gè)產(chǎn)物，所以希望是喚醒用戶一些封塵已久的記憶，就像打開時(shí)間膠囊般的期待和感動(dòng)。同時(shí)也象征著 QQ 一直陪伴在身邊，從而引起用戶的共鳴。
設(shè)計(jì)方面，除了通過一些標(biāo)志性的視覺元素喚醒用戶的回憶之外，也加入 QQ 20周年的太空「探索」主題的元素，響應(yīng) 20 周年的主題之余，也寓意 QQ 不斷地對(duì)外探索，從多個(gè)維度來看世界，尋找有趣的內(nèi)容。
對(duì)話框，是承載數(shù)據(jù)的視覺符號(hào)，也是貫穿整個(gè) H5 的重要視覺符號(hào)之一。寓意著 QQ 一直致力于「溝通」，而且不同時(shí)代的 QQ 對(duì)話框都各有特點(diǎn)，也是見證 QQ 時(shí)代變遷的重要元素，所以提取了三個(gè)階段代表性的對(duì)話框樣式來承載數(shù)據(jù)，并且加入有時(shí)代特征的視覺元素（如bb機(jī)，像素化的小箭頭等）作為輔助，增加 H5 的氛圍感，也算是視覺上的「小彩蛋」。
△ QQ原始對(duì)話框
H5 加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動(dòng)的彩色不規(guī)則圖案，來增加對(duì)話框的玩味。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時(shí)代印記。
△ 重繪對(duì)話框
H5 中也加入了很多好玩的元素，不同時(shí)代所用的移動(dòng)設(shè)備，融合貼近太空「探索」主題的背景；利用帶手套的手和不同的元素進(jìn)行互動(dòng)；增加重繪經(jīng)典頭像的互動(dòng)動(dòng)畫，加入 QQ 空間的植物等懷舊元素，增加 H5 的可玩性和驚喜感。
△ 經(jīng)典頭像的重繪
△ 經(jīng)典頭像穿插在H5中的小彩蛋
△ 帶手套的手和有時(shí)代標(biāo)簽的元素互動(dòng)
1. 視覺動(dòng)態(tài)化方案
在動(dòng)畫制作前期會(huì)出一份詳細(xì)的動(dòng)態(tài)化分頁策劃，以及一份盡可能表達(dá)完整的動(dòng)畫 demo，能便于設(shè)計(jì)與開發(fā)能準(zhǔn)確的估算出制作周期。在開發(fā)完成預(yù)研測試后，基于動(dòng)畫 demo 共同制定一個(gè)大致的動(dòng)態(tài)化方案──對(duì)話框等大面積使用代碼實(shí)現(xiàn)，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發(fā)當(dāng)前頁的動(dòng)畫，且能保證大體動(dòng)畫的流暢度。
2. 動(dòng)畫制作
為了盡可能減少 H5 的運(yùn)算體積，又保證畫面動(dòng)態(tài)的流暢程度，導(dǎo)出的序列必須滿足以下所有條件：
△ 設(shè)計(jì)了4個(gè)不同的色塊流動(dòng)loop，方便開發(fā)安插在每頁合適的位置
3. 導(dǎo)出與同步
在配合開發(fā)導(dǎo)出的階段，為了能明確序列的標(biāo)記，所有序列文件命名為 xx-in/xx-loop/xx-out。使用同步工具以實(shí)現(xiàn) AE 動(dòng)畫序列導(dǎo)出和開發(fā)提取素材能同步進(jìn)行，并保持實(shí)時(shí)更新和迭代。
△ 第6頁動(dòng)畫導(dǎo)出序列
創(chuàng)建了四款全新的 spaceQQ，根據(jù)用戶的 QQ 年齡而設(shè)計(jì)。根據(jù)用戶的 QQ 年齡，分了四個(gè)款式的鵝：奢華，智能，閃亮和神秘四個(gè)概念，一個(gè)遞進(jìn)的尊貴程度，刺激用戶分享欲。包括基礎(chǔ)款的 QQ 在內(nèi)，共創(chuàng)造了 5 個(gè)類型的 spaceQQ。每個(gè)設(shè)計(jì)都基于基本 spaceQQ 的形式，但是套裝的顏色和細(xì)節(jié)根據(jù)各自的概念各有特色。
△ spaceQQ總覽圖
用戶可以根據(jù)自己的喜好更改這 5 款 spaceQQ 的裝扮顏色。
1. 專屬感
整個(gè) H5 始終緊扣 QQ 20周年的太空「探索」主題，整個(gè) H5，除了用數(shù)據(jù)喚醒用戶和 QQ 多年的點(diǎn)點(diǎn)滴滴之外，5 個(gè) spaceQQ 概念設(shè)定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D 建立的 3D 形象豐富了整個(gè) H5 的視覺層次，深化了 QQ 品牌的影響力，寓意鵝廠一直與時(shí)俱進(jìn)，緊貼潮流。
2. 情緒調(diào)動(dòng)
對(duì)于當(dāng)下的運(yùn)營活動(dòng)來說，趣味性是引爆轉(zhuǎn)發(fā)量的重要元素，H5 結(jié)合 QQ 用戶創(chuàng)作的背景音樂和能夠調(diào)動(dòng)用戶情感的設(shè)計(jì)語言來釋放用戶的情緒，比如驚喜感（用戶結(jié)合 QQ 的標(biāo)志性音效創(chuàng)作的背景音樂），榮譽(yù)感（不同 Q 齡獲取相應(yīng)的 spaceQQ）等，讓用戶產(chǎn)生持續(xù)的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。
QQ 20周年 H5 設(shè)計(jì)，嘗試結(jié)合了 3D，動(dòng)畫，插畫等設(shè)計(jì)形態(tài)，為每一位用戶打造專屬的「個(gè)人軌跡」，通過數(shù)字，拼湊出和 QQ 的過往朝夕，引起用戶共鳴。鵝廠不斷創(chuàng)新探索的同時(shí)，也為用戶溫存屬于用戶自己的專屬回憶，深化 QQ 的品牌價(jià)值。
福利
考慮到部分同學(xué)想更仔細(xì)地查看、保存或收藏高清大圖的需求，我們?cè)O(shè)置了關(guān)鍵詞，微信公眾號(hào)后臺(tái)以「spaceQQ+序號(hào)」的方式回復(fù)，例如「spaceQQ1」，即可逐一獲取對(duì)應(yīng)的高清頭像和壁紙。
掃碼領(lǐng)取專屬「個(gè)人軌跡」：
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
阿里巴巴副總裁、中國內(nèi)貿(mào)事業(yè)部總經(jīng)理汪海在對(duì)外分享時(shí)提出 1688 已經(jīng)從信息平臺(tái)時(shí)代進(jìn)入數(shù)字化營銷平臺(tái)時(shí)代，讓 1688 用戶在平臺(tái)內(nèi)完成營銷和銷售一體化的整個(gè)商業(yè)閉環(huán)。1688 的使命也升級(jí)成「在數(shù)字化經(jīng)濟(jì)時(shí)代，讓天下沒有難做的生意！」在全新的業(yè)務(wù)態(tài)勢下，為了更好的滿足用戶需求，阿里巴巴（1688）主客升級(jí)勢在必行。
首頁既是業(yè)務(wù)分流的中心場景，也是平臺(tái)賣家判斷平臺(tái)打法，買賣家感知平臺(tái)價(jià)值的重要「門面」。從 UED 專業(yè)視角來看，首頁是定義 APP 內(nèi)體驗(yàn)范式及視覺風(fēng)格的核心場景。
1. 盤點(diǎn)現(xiàn)象，定義問題
滿足業(yè)務(wù)新的訴求：平臺(tái)階段性戰(zhàn)略不同，1688 從曾經(jīng)的信息平臺(tái)過渡到交易平臺(tái)，如今向數(shù)字營銷平臺(tái)轉(zhuǎn)型，舊的內(nèi)容框架難以承載業(yè)務(wù)的新發(fā)展。
提升分流質(zhì)量：從過去的數(shù)據(jù)效果來看，需重新判斷，在 For 特色采購需求和服務(wù)大面采購需求之前，如何平衡調(diào)優(yōu)，提升首頁的流量轉(zhuǎn)化效能。
體驗(yàn)升級(jí)：移動(dòng)端 APP 天然生長在手機(jī)系統(tǒng)上，系統(tǒng)的風(fēng)格更迭也牽動(dòng)著 APP 的變化和升級(jí)。在 8.0 升級(jí)前，1688APP 存在著 5.0、6.0、7.0 多個(gè)由不同設(shè)計(jì)師在不同時(shí)間點(diǎn)所設(shè)計(jì)的場景，到8.0，APP 趨待從框架層、表現(xiàn)層以及品牌等方面進(jìn)行統(tǒng)一及升級(jí)。
APP 升級(jí)前與業(yè)務(wù)對(duì)焦，我們收到三點(diǎn)訴求：
在內(nèi)容框架制定上，我們聚焦用戶價(jià)值，舍掉 7.0 時(shí)的內(nèi)容版塊個(gè)性化，聚焦做商品的個(gè)性化，僅保留For大面用戶的營銷、內(nèi)容場景，提升算法推薦區(qū)的曝光率，以此區(qū)域的商品做首頁的直接轉(zhuǎn)化。
視覺容器升級(jí)
做平視覺框架，選擇「大間距分隔」，為內(nèi)容留出干凈、簡潔的視覺空間。
精簡內(nèi)容柵格，避免形式給用戶閱讀帶來的負(fù)擔(dān)。
提高留白率，提升頁面整體的透氣性，為內(nèi)容留出更清爽、輕松的閱讀空間。
拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。
強(qiáng)調(diào)版塊特性，塑造買家心智感知，達(dá)成業(yè)務(wù)目標(biāo)
強(qiáng)化搜索：7.0時(shí)，曾上線過將搜索做到「主觀上覺得顯眼」的測試方案，但相較于之前沉浸式搜索，數(shù)據(jù)幾乎沒變化。
8.0 階段，從視覺表現(xiàn)層跳出看：「強(qiáng)化搜索」并不意味把搜索設(shè)計(jì)得更「顯眼」，而是達(dá)成「讓更多用戶更高頻地使用搜索」這一目標(biāo)。如提升搜索底紋詞、熱搜詞精準(zhǔn)度和吸引力、增加搜索布點(diǎn)等，都可能助力達(dá)成業(yè)務(wù)目標(biāo)。
基于用戶單手操作時(shí)，拇指在屏幕不同區(qū)域的點(diǎn)擊體驗(yàn)，選擇將搜索組件移到更易于點(diǎn)擊、視線更聚焦的屏幕位置，上線后數(shù)據(jù)提升非常明顯。
Banner 升級(jí)：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內(nèi)掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會(huì)更偏理性，我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對(duì)話，而非渲染氛圍引導(dǎo)點(diǎn)擊。（上線后，同樣的活動(dòng)內(nèi)容，按新、老兩版規(guī)范設(shè)計(jì)投放兩套 Banner，新版較老版 UV CTR 約高出 48%）
For 新人：以差異化的利益、個(gè)性化秒殺、新人攻略做用戶的承接。
營銷場景心智差異化表達(dá)：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時(shí)限量搶便宜」，選擇將兩個(gè)區(qū)塊最關(guān)鍵的特質(zhì)做強(qiáng)化表達(dá)。
內(nèi)容場景（直播）動(dòng)態(tài)化、互動(dòng)感、實(shí)時(shí)性傳遞：抽象出直播間的方形版面+內(nèi)容疊加形式來設(shè)計(jì)，大坑位以動(dòng)圖傳遞給用戶直播的動(dòng)態(tài)感，以紅包、個(gè)性化商品的多維實(shí)時(shí)輪播氣泡傳達(dá)直播的互動(dòng)感、實(shí)時(shí)性。
為什么要做APP應(yīng)用內(nèi)的品牌設(shè)計(jì)？
品牌設(shè)計(jì)是將內(nèi)容層（平臺(tái)價(jià)值）與接收層（用戶）做柔性鏈接的一環(huán)，譬如在 APP 場景中，由于有商品、商家、商機(jī)等「干貨」，即使不特意做品牌設(shè)計(jì)，用戶也能與平臺(tái)保持剛性、穩(wěn)定的連接。而反過來看，品牌做得很好，但平臺(tái)沒有「干貨」，用戶也不會(huì)單奔著品牌設(shè)計(jì)來平臺(tái)。我們認(rèn)為，做 APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)，核心價(jià)值在于助力用戶認(rèn)知到平臺(tái)特性，感知平臺(tái)價(jià)值。從設(shè)計(jì)專業(yè)視角來看，APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)，有利于定義并統(tǒng)一 APP 內(nèi)體驗(yàn)范式及視覺風(fēng)格，保障用戶的體驗(yàn)。
每位設(shè)計(jì)師所處的業(yè)務(wù)環(huán)境不一樣，解決問題策略和方式也千差萬別，在 APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)中，個(gè)人選擇是通過厘清內(nèi)容層（平臺(tái)）多層次訴求及 For 用戶的價(jià)值點(diǎn)，認(rèn)知、感知接收層（用戶）特質(zhì)及內(nèi)容傾向，基于內(nèi)容層底料+接收層用戶特質(zhì)確定設(shè)計(jì)底層范式，塑造用戶感知。
在阿里巴巴商業(yè)操作系統(tǒng)中，1688 聚焦做 B 類業(yè)務(wù)，直接服務(wù)對(duì)象是 B 類買賣家，業(yè)務(wù)細(xì)分出檔口尖貨、淘工廠、企業(yè)采購、淘貨源、微商代發(fā)、工業(yè)品超級(jí)店、跨境專供等，這些都是具有一定 B 類特質(zhì)及體量感的場景，故在 APP 業(yè)務(wù)門洞及常規(guī)圖標(biāo)的表達(dá)上，基于扁平 vs 寫實(shí)、輕盈 vs 厚重、活潑 vs 穩(wěn)重的維度，圖形選定輕擬物、弱對(duì)比的設(shè)計(jì)范式，塑造 B 類場景 For 買家的沉穩(wěn)、份量感。
此外，異常/空白場景也是平臺(tái)與用戶互動(dòng)，塑造用戶感知品牌的機(jī)會(huì)。在空態(tài)情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對(duì)應(yīng)空態(tài)，并佐以輕微動(dòng)效，增強(qiáng)空態(tài)的互動(dòng)感。（在收藏夾、我的供應(yīng)商等工具型場景，基于空態(tài)信息的價(jià)值考慮，將空態(tài)與工具新手引導(dǎo)相結(jié)合，并未做常規(guī)的插圖。）
標(biāo)準(zhǔn)色
隨著業(yè)務(wù)的發(fā)展，我們基于新的業(yè)務(wù)態(tài)勢，豐富了 1688 品牌色，以橙紅色作營銷、利益屬性的表達(dá)，以商務(wù)藍(lán)作服務(wù)、數(shù)字化屬性的表達(dá)，以金色作權(quán)益屬性的表達(dá)。
輔助色
在實(shí)際產(chǎn)品設(shè)計(jì)中，品牌色并不足以表達(dá)各類業(yè)務(wù)場景中的多層次的內(nèi)容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。
場景用色規(guī)則
基于買家角色及場景特征定義用色規(guī)則。
1688色域及選色示意
以 HSB 模式劃定出偏沉穩(wěn)的 1688 色域，在日常 banner 及業(yè)務(wù)場景中可靈活取用。
動(dòng)效是設(shè)計(jì)的重要手段，良好的動(dòng)效表達(dá)能增強(qiáng)信息表達(dá)強(qiáng)度，清晰信息層級(jí)關(guān)系，提升用戶體驗(yàn)的舒適度。做動(dòng)效之前，將 APP 信息結(jié)構(gòu)平整到三層，保障內(nèi)容在頁面簡潔明暢地呈現(xiàn)。
在實(shí)際落地中，動(dòng)效實(shí)現(xiàn)非常依賴技術(shù)資源，故動(dòng)效設(shè)計(jì)之前，應(yīng)考慮一個(gè)前提：動(dòng)效設(shè)計(jì)增益內(nèi)容表達(dá)，價(jià)值可論證，效果可衡量；同時(shí)，考慮接收層用戶的商人特質(zhì)，我們期望動(dòng)效表達(dá)給用戶以穩(wěn)定感，并且在設(shè)計(jì)表達(dá)上能兼顧效率。
在動(dòng)效呈現(xiàn)部分，主要以緩入、緩出、緩動(dòng)結(jié)合曲線來調(diào)節(jié)，總的來說，內(nèi)容入場時(shí)節(jié)奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關(guān)系，內(nèi)容出場時(shí)節(jié)奏快，速度快，內(nèi)容層級(jí)不用再做分層消失。
APP 內(nèi)典型場景的動(dòng)效案例及演示：
此外，除以上在圖形、色彩、動(dòng)效等基礎(chǔ)維度收口外，我們也需要將業(yè)務(wù)品牌放聲給買賣家，以達(dá)成業(yè)務(wù)品牌的價(jià)值傳遞。在 1688 向數(shù)字營銷平臺(tái)轉(zhuǎn)型的階段，業(yè)務(wù)提出了「源頭廠貨通天下」的口號(hào)，我們通過設(shè)計(jì)手段，利用 APP 開機(jī)啟動(dòng)頁及下拉刷新的空間，將「貨通天下」的概念強(qiáng)化表達(dá)。
以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內(nèi)容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語氣」與 B 類商人對(duì)話。當(dāng)然，這是設(shè)計(jì)師和業(yè)務(wù)同學(xué)階段性的選擇。后續(xù)品牌的完善及產(chǎn)品的優(yōu)化，仍需結(jié)合數(shù)據(jù)持續(xù)打磨。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
最近設(shè)計(jì)群里經(jīng)常有人問起小程序設(shè)計(jì)規(guī)范的問題，雖然官方有提供樣式庫的下載，但是停留在 16 年版，不是的。而設(shè)計(jì)經(jīng)驗(yàn)這部分網(wǎng)絡(luò)上也沒有比較全面的分享，這促使我停下手上的計(jì)劃，加快輸出本篇文章。正好近期剛結(jié)束幾個(gè)小程序項(xiàng)目，總結(jié)下經(jīng)驗(yàn)，并結(jié)合微信小程序的官方設(shè)計(jì)指南，一起分享給大家，希望幫助大家更快速地上手。
隨著 2018 年小程序的迅猛發(fā)展，小程序現(xiàn)已被各大企業(yè)廣泛采用，「觸手可及、用完即走」的用戶體驗(yàn)備受青睞，隨之小程序設(shè)計(jì)也成為設(shè)計(jì)師的必備技能，那在進(jìn)行小程序界面設(shè)計(jì)時(shí)，應(yīng)該如何快速做設(shè)計(jì)？過程中又要注意哪些問題呢？
對(duì)于已經(jīng)開發(fā)了 App 的產(chǎn)品，在進(jìn)行小程序設(shè)計(jì)時(shí)需遵守小程序的規(guī)范，同時(shí)要保持小程序界面設(shè)計(jì)與 App 的風(fēng)格統(tǒng)一性。
小程序的「所有頁面」右上角位置，都固定放置了小程序的菜單，在設(shè)計(jì)界面時(shí)需預(yù)留出該區(qū)域空間。
1. 小程序菜單固定樣式
微信提供了深淺兩種配色樣式，以便更好地融合到各種風(fēng)格的頁面中，需注意保持小程序菜單清晰的辨識(shí)度。
線上案例：
2. 交互注意事項(xiàng)
如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應(yīng)盡量避免誤觸的可能。
建議開發(fā)者設(shè)計(jì)的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。
如上圖，小紅書的自有導(dǎo)航樣式個(gè)人不推崇，理由如下：
微信讀書既有微信線條外框的 DNA，又區(qū)別于官方樣式，是不錯(cuò)的綜合。以上僅限個(gè)人觀點(diǎn)，還需用戶數(shù)據(jù)來客觀驗(yàn)證。
3. 搜索框常見的幾種表現(xiàn)形式
1. 小程序設(shè)計(jì)規(guī)范
頂部標(biāo)簽分頁欄顏色可自定義，一般會(huì)沿用 App 的設(shè)計(jì)風(fēng)格，以保證兩個(gè)平臺(tái)的視覺統(tǒng)一性。
2. 常見的幾種表現(xiàn)形式
1. 小程序設(shè)計(jì)規(guī)范
微信有提供小程序的底部標(biāo)簽樣式，建議標(biāo)簽數(shù)量在 2-4 個(gè)適宜。
也可根據(jù)產(chǎn)品需要選擇或者去掉底部標(biāo)簽欄功能。
2. 常見的幾種表現(xiàn)形式
啟動(dòng)頁除品牌 Logo 外，其他元素都由微信統(tǒng)一提供，且不能更改，設(shè)計(jì)師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序設(shè)計(jì)規(guī)范
全局加載是小程序名稱左側(cè)的加載圖標(biāo)。模態(tài)的加載樣式將覆蓋整個(gè)頁面，由于無法明確告知具體加載的位置或內(nèi)容，可能會(huì)引起用戶的焦慮感，建議謹(jǐn)慎使用。
2. 常用的加載樣式
需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。
對(duì)于沒有開發(fā)App來說，可依據(jù)官方推出的《微信小程序設(shè)計(jì)指南》來設(shè)計(jì)，以確?？焖僭O(shè)計(jì)出符合規(guī)范的小程序。
小程序設(shè)計(jì)應(yīng)遵循友好、、一致的設(shè)計(jì)原則，每個(gè)頁面都應(yīng)有明確的重點(diǎn)，清晰明確地告知用戶身在何處，又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。
最后，推薦幾個(gè)常用的平臺(tái)設(shè)計(jì)網(wǎng)站。
1. BAT各平臺(tái)小程序設(shè)計(jì)規(guī)范網(wǎng)站
微信小程序設(shè)計(jì)指南：https://developers.weixin.qq.com/miniprogram/design/
支付寶小程序設(shè)計(jì)規(guī)范：https://docs.alipay.com/mini/design
百度-智能小程序設(shè)計(jì)規(guī)范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的設(shè)計(jì)規(guī)范網(wǎng)站
蘋果-人機(jī)界面指南：https://developer.apple.com/design/human-interface-guidelines/
詳細(xì)介紹了 iOS 設(shè)計(jì)規(guī)范，同時(shí)還提供了 UI 設(shè)計(jì)資源下載。
安卓-MD設(shè)計(jì)指南：https://material.io/design/
螞蟻設(shè)計(jì)：https://design.alipay.com/#ds
提供移動(dòng)和 Web 端的設(shè)計(jì)組件，還有設(shè)計(jì)案例和心得的文章供學(xué)習(xí)。
微信樣式庫：https://weui.io/
提供微信內(nèi)的網(wǎng)頁和小程序設(shè)計(jì)規(guī)范。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
為什么要構(gòu)建 MIZ Design？隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們?cè)谠O(shè)計(jì)上積累了越來越多的債務(wù)。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設(shè)計(jì)師來設(shè)計(jì)，前端也是由不同的開發(fā)來實(shí)現(xiàn)，這直接導(dǎo)致了整個(gè) APP 越來越臃腫無序，視覺和交互體驗(yàn)不一致，且團(tuán)隊(duì)溝通成本高，重復(fù)勞動(dòng)力大，輸出效率低，迭代速度慢。
開發(fā)層面
場景：
設(shè)計(jì)師：涉及到這個(gè)組件的頁面都改一下吧。
開發(fā)：改不了，每個(gè)頁面都是單獨(dú)寫的，改起來非常麻煩，耗時(shí)間耗資源耗人力。
設(shè)計(jì)師：為什么同樣的組件要單獨(dú)寫？
開發(fā)：我怎么知道，這是以前的開發(fā)寫的，而且寫的亂七八糟。
設(shè)計(jì)師：……
那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會(huì)越來越嚴(yán)重。
代碼混亂，遺留了非常多的開發(fā)層面代碼不一致的問題，后期迭代的過程中如果不統(tǒng)一，也會(huì)使整個(gè)系統(tǒng)失去可控性。
設(shè)計(jì)師層面
場景 1：
設(shè)計(jì)師 A：這個(gè)頁面是誰做的？源文件有嗎？
設(shè)計(jì)師 B：不知道哎。以前的設(shè)計(jì)師做的。去庫里找一下吧。
30 分鐘以后，依然沒有找到源文件。
場景 2：
開會(huì)：為什么這個(gè)項(xiàng)目的頁面和以前的風(fēng)格差很多？
設(shè)計(jì)師 A：現(xiàn)在流行的就是這個(gè)風(fēng)格呀，多好看。
設(shè)計(jì)師 B：雖然設(shè)計(jì)每年都有流行趨勢，但還是要和產(chǎn)品品牌風(fēng)格相結(jié)合。
一個(gè)項(xiàng)目兩個(gè)設(shè)計(jì)師負(fù)責(zé)，設(shè)計(jì)出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風(fēng)格完全不一致。在 2 個(gè)設(shè)計(jì)師完成設(shè)計(jì)以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發(fā)需要根據(jù)不同業(yè)務(wù)中的不同設(shè)計(jì)師的「創(chuàng)意」來進(jìn)行人肉修改。
當(dāng)我們開始設(shè)計(jì)新的頁面，功能需求點(diǎn)優(yōu)化的時(shí)候，這個(gè)問題變得更加嚴(yán)重。同時(shí)，因?yàn)闆]有一個(gè)統(tǒng)一的基礎(chǔ)設(shè)計(jì)規(guī)范原則，設(shè)計(jì)師在設(shè)計(jì)項(xiàng)目的時(shí)候，在設(shè)計(jì)決策和討論中花費(fèi)了大量時(shí)間，會(huì)存在大量的重復(fù)勞動(dòng)。同時(shí)由于產(chǎn)品的界面和交互缺乏一致性和可預(yù)測性，用戶體驗(yàn)也受到了影響。整個(gè)產(chǎn)品也會(huì)在風(fēng)格定位上不統(tǒng)一，沒有確定產(chǎn)品風(fēng)格特質(zhì)的情況下越來越模糊，失去自身品牌該有的特性。
產(chǎn)品迭代，基本上是基于新功能的開發(fā)設(shè)計(jì)迭代，新的功能、新的頁面不斷的增加，對(duì)于設(shè)計(jì)師而言，有設(shè)計(jì)規(guī)范的原則做基礎(chǔ)設(shè)計(jì)框架，更容易延續(xù) APP 統(tǒng)一的設(shè)計(jì)風(fēng)格，不至于被不同的需求，不同的設(shè)計(jì)趨勢以及蠢蠢欲動(dòng)的新的設(shè)計(jì)靈感牽著鼻子走，導(dǎo)致越做越亂，無章可循。
一個(gè) APP 就像自己的孩子一樣，從一個(gè)嗷嗷待哺的嬰兒逐漸長大成人。設(shè)計(jì)系統(tǒng)就好比一個(gè)人的生物系統(tǒng)，是整個(gè)生物體的基礎(chǔ)。如果對(duì)此系統(tǒng)不維護(hù)，那么此系統(tǒng)將會(huì)隨著時(shí)間的增長越來越脆弱以及呈現(xiàn)不可逆的現(xiàn)象。那么如果維護(hù)好一個(gè)設(shè)計(jì)系統(tǒng)，骨骼會(huì)在成長中呈現(xiàn)規(guī)律清晰的生長模式，會(huì)隨著業(yè)務(wù)的生長而生長，可控制、可更新，使生物體健康的發(fā)展然后去完成它的使命。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺指引手冊(cè)，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對(duì)外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。
最近幾年，「Design System」這個(gè)詞非?；?。下面介紹紅遍全球設(shè)計(jì)界的兩大設(shè)計(jì)規(guī)范網(wǎng)紅。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語音、鼠標(biāo)、鍵盤等輸入方式。
一經(jīng)發(fā)布就紅遍了全球設(shè)計(jì)界。新穎的設(shè)計(jì)理念，清晰明確的設(shè)計(jì)原則，詳細(xì)的設(shè)計(jì)規(guī)范，使之成為完美的安卓端標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范。也給設(shè)計(jì)界的設(shè)計(jì)師們提供了非常好的參考，很多設(shè)計(jì)師也根據(jù) Material Design 設(shè)計(jì)原則延展出更多的創(chuàng)新設(shè)計(jì)可能性，制作了各家的設(shè)計(jì)規(guī)范。
出了官方的 Sketch 組件庫以后，谷歌團(tuán)隊(duì)還開發(fā)了基于此設(shè)計(jì)規(guī)范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會(huì)上，Google 設(shè)計(jì)團(tuán)隊(duì)開發(fā)了一款叫做 Material Theme Editor 工具，可以幫助設(shè)計(jì)師輕松且快速創(chuàng)建符合自身品牌又符合 Material Design 風(fēng)格的應(yīng)用。
設(shè)計(jì)價(jià)值觀
設(shè)計(jì)原則
材質(zhì)是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質(zhì)，包含了材質(zhì)如何接受光的影響以及所形成的光影效果，并且對(duì)紙張的質(zhì)感和墨水的介質(zhì)重新進(jìn)行了構(gòu)想。
大膽，圖形，鮮明：Material Design 基于印刷設(shè)計(jì)的指導(dǎo)原則，字體、柵格、留白、顏色等元素都以創(chuàng)造層次、意義和焦點(diǎn)為基礎(chǔ)來讓用戶沉浸在設(shè)計(jì)體驗(yàn)中。
動(dòng)效賦予意義：微妙順暢地反饋和過渡性的動(dòng)作效果，引起用戶的注意力并使之保持持續(xù)關(guān)注。當(dāng)元素出現(xiàn)在一個(gè)界面中的時(shí)候，元素之間的互動(dòng)重塑了環(huán)境。
基礎(chǔ)靈活：Material Design 同樣旨在實(shí)現(xiàn)品牌價(jià)值的傳遞。結(jié)合了基礎(chǔ)的代碼、組件和元素，可表達(dá)不同的品牌需求。
跨平臺(tái)：Material Design 的 UI 組件庫可在不同的平臺(tái)共用，不論在安卓平臺(tái)、iOS、Flutter，還是 Web 都可保持一致的組件元素。
iOS 的人機(jī)規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。
iOS 設(shè)計(jì)價(jià)值觀
iOS 設(shè)計(jì)原則
Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗(yàn)，產(chǎn)品功能和用戶行為的有效結(jié)合。比如當(dāng)一款工具類 APP 主要是幫助用戶完成一項(xiàng)任務(wù)時(shí)，設(shè)計(jì)師應(yīng)關(guān)注于用戶操作本身的行為路徑，和產(chǎn)品功能相結(jié)合來幫助用戶完成目標(biāo)，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵(lì)引導(dǎo)用戶探索的同時(shí)也有非常棒的操作體驗(yàn)。
Consistency 一致性：一個(gè)保持了一致性原則的 APP，通過使用標(biāo)準(zhǔn)的控件、熟悉的 icon、標(biāo)準(zhǔn)的文字規(guī)范、統(tǒng)一的組件俗語來實(shí)現(xiàn)一個(gè)擁有標(biāo)準(zhǔn)化范例的系統(tǒng)。這個(gè)系統(tǒng)提供的特性和交互行為也符合用戶的心智模型和預(yù)期。
Direct Manipulation 直接操作：讓用戶在屏幕上直接對(duì)內(nèi)容進(jìn)行操作的交互行為，可以鼓勵(lì)用戶和系統(tǒng)進(jìn)行交互并且更易于理解。當(dāng)用戶翻轉(zhuǎn)屏幕或者使用手勢直接與屏幕交互時(shí)，他們會(huì)感知到直接操作的行為，并且能立即得到操作結(jié)果。
Feedback 反饋：反饋能夠響應(yīng)操作，呈現(xiàn)結(jié)果，使用戶獲得信息。手機(jī)中內(nèi)置的 iOS 應(yīng)用程序?yàn)橛脩舻拿恳粋€(gè)動(dòng)作提供可感知的反饋。交互元素在點(diǎn)擊時(shí)會(huì)凸顯被高亮顯示，進(jìn)度指示器顯示了需要長時(shí)間運(yùn)行的操作進(jìn)度、動(dòng)效和聲音，使用戶能夠更清晰地感知交互行為的結(jié)果并作出響應(yīng)。
Metaphors 隱喻：當(dāng)一個(gè) APP 的虛擬對(duì)象和操作路徑與用戶本身所熟悉的心智模型一致時(shí)，不管它是來自于真實(shí)世界還是數(shù)字世界，用戶都能很快上手。隱喻之所以有效果，是因?yàn)橛脩艉推聊淮嬖谖锢砩系慕换?。用戶可以通過移動(dòng)分層視圖來顯示手機(jī)上被遮擋的內(nèi)容；拽拖并且滑動(dòng)對(duì)象，切換開關(guān)，移動(dòng)滑塊，滾動(dòng)數(shù)值選擇器，用戶甚至可以通過翻轉(zhuǎn)手勢來翻閱手機(jī)上的雜志和文章。
User Control 用戶控制：在 iOS 系統(tǒng)中，用戶是主導(dǎo)者，而不是 APP。APP 可以提供行動(dòng)建議，給予警告提示，但是不應(yīng)該替用戶做選擇。優(yōu)秀的 APP 始終會(huì)在用戶主導(dǎo)和用戶不想要出現(xiàn)的結(jié)果中保持平衡。一個(gè) APP 應(yīng)該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預(yù)期；對(duì)有破壞性的操作可確認(rèn)；對(duì)錯(cuò)誤操作可取消，即使是在進(jìn)行中的行為也可中斷。
在 Sketch 工具中可直接下載 iOS 的組件庫使用。
在 2016 年，由工程師和設(shè)計(jì)師組成的團(tuán)隊(duì)創(chuàng)建了 Airbnb 的設(shè)計(jì)語言系統(tǒng) （DLS）的第一個(gè)版本，其目標(biāo)是創(chuàng)建一致的體驗(yàn)和跨平臺(tái)的統(tǒng)一。DLS 包含了一套內(nèi)部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設(shè)計(jì)、工程和其他學(xué)科的共享詞匯表進(jìn)行快速迭代。DLS 的結(jié)構(gòu)簡單而連貫，簡化了團(tuán)隊(duì)之間的溝通。并制定了以下幾條原則來指導(dǎo) DLS 的設(shè)計(jì)：
ADS 開源庫
Airbnb 設(shè)計(jì)副總裁 Alex Schleifer 在 IXDC 2017 國際體驗(yàn)設(shè)計(jì)大會(huì)上分享了這一創(chuàng)新的 React Sketch APP 管理設(shè)計(jì)系統(tǒng)，這是為 Airbnb 的設(shè)計(jì)系統(tǒng)而設(shè)計(jì)的，其實(shí)就是個(gè)實(shí)時(shí)更新的代碼數(shù)據(jù)庫，可以實(shí)時(shí)查詢 Sketch 數(shù)據(jù)和代碼，也可以下載圖標(biāo)、設(shè)計(jì)模塊，所有工程師和設(shè)計(jì)師都可以免費(fèi)下載?？吹竭@個(gè)，我想完美共享庫也許并不是那么的遙遠(yuǎn)。
Airbnb 團(tuán)隊(duì)在設(shè)計(jì) DLS 過程中，也是通過原子組件的方式來構(gòu)建整個(gè)框架，我覺得他們對(duì)于設(shè)計(jì)系統(tǒng)的理解非常對(duì)：「一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該只是一組靜態(tài)的規(guī)則和原子組件構(gòu)成，它應(yīng)該是一個(gè)可持續(xù)發(fā)展的系統(tǒng)?！顾栽跇?gòu)建好底層的設(shè)計(jì)語言之后，可持續(xù)性、可發(fā)展性，是維護(hù)并讓設(shè)計(jì)系統(tǒng)產(chǎn)生價(jià)值的重點(diǎn)。
隨著商業(yè)化的趨勢，越來越多的企業(yè)級(jí)產(chǎn)品對(duì)擁有更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個(gè)終極目標(biāo)，螞蟻金服體驗(yàn)技術(shù)部經(jīng)過大量的項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系 Ant Design?；凇复_定」和「自然」的設(shè)計(jì)價(jià)值觀，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。
設(shè)計(jì)價(jià)值觀
自然，讓人機(jī)交互行為更自然。
自然規(guī)律運(yùn)用到設(shè)計(jì)中，自然界的方方面面都會(huì)對(duì)用戶行為產(chǎn)生深遠(yuǎn)影響，設(shè)計(jì)者應(yīng)該從其中汲取靈感，并運(yùn)用到當(dāng)下的設(shè)計(jì)工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。
自然的人機(jī)交互核心：節(jié)能。既要節(jié)省身體運(yùn)動(dòng)的體力，更要節(jié)省大腦思考的腦力。
那么如何在設(shè)計(jì)中體現(xiàn)呢？
確定，保持克制、對(duì)象設(shè)計(jì)方法、模塊化。
設(shè)計(jì)者需要做出更好的設(shè)計(jì)決策，給予研發(fā)團(tuán)隊(duì)一種高確定性、低熵值的研發(fā)狀態(tài)。同時(shí)，不同設(shè)計(jì)者在充分理解業(yè)務(wù)訴求后，基于 Ant Design 體系都會(huì)有相同且符合當(dāng)前業(yè)務(wù)特性的設(shè)計(jì)產(chǎn)出。
給予用戶確定感，結(jié)合 Ant Design 的三個(gè)關(guān)鍵點(diǎn)，可以總結(jié)為邊界和規(guī)則 2 個(gè)方面：
構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？
意義
有了規(guī)范和控件庫，設(shè)計(jì)師在接受需求的時(shí)候，可以減少設(shè)計(jì)成本，提高設(shè)計(jì)效率，尤其是在用于快速迭代產(chǎn)品的階段，通過大量的標(biāo)準(zhǔn)化組件即可實(shí)現(xiàn)縮短設(shè)計(jì)周期的效果，并且設(shè)計(jì)師可以更專注于深耕體驗(yàn)和細(xì)節(jié)，同時(shí)能保證高質(zhì)量的輸出。
構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)來支撐產(chǎn)品的所有業(yè)務(wù)線，解決團(tuán)隊(duì)協(xié)作一致性問題，產(chǎn)品的周期性更新問題，解決不同的設(shè)計(jì)師和工程師規(guī)范性輸出 UI 的問題，最終從設(shè)計(jì)驅(qū)動(dòng)商業(yè)的層面上，解決用戶體驗(yàn)一致性，迭代開發(fā)的問題。
時(shí)間
APP 進(jìn)入穩(wěn)定發(fā)展階段，也完成了基礎(chǔ)功能的開發(fā)，在業(yè)務(wù)穩(wěn)定發(fā)展的前提下，構(gòu)建已有 APP 的整體框架，規(guī)范前端開發(fā)和設(shè)計(jì)流程是個(gè)好時(shí)機(jī)。在產(chǎn)品發(fā)展到穩(wěn)定階段、參與的人越來越多時(shí)，對(duì)整個(gè) APP 的頁面整理是非常有必要的。也為了后續(xù)快速發(fā)展的業(yè)務(wù)起到完整系統(tǒng)地支撐能力。
人力
相信幾乎在所有的公司和團(tuán)隊(duì)，規(guī)范建立都是非常有價(jià)值，也非常耗費(fèi)資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統(tǒng)。沒有上線落地的視覺規(guī)范只是耍流氓。所以項(xiàng)目啟動(dòng)的時(shí)候，團(tuán)隊(duì)分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。
場景
所以在項(xiàng)目開始之前，便需要和整個(gè)團(tuán)隊(duì)統(tǒng)一目標(biāo)意義：視覺規(guī)范的建立，除了保障統(tǒng)一的用戶體驗(yàn)和認(rèn)知，還能夠通過工程師代碼層面的組件化提高開發(fā)、設(shè)計(jì)效率。整個(gè)設(shè)計(jì)系統(tǒng)的開發(fā)，從設(shè)計(jì)到落地，需要產(chǎn)品、設(shè)計(jì)和前端的全力支持。
雞生蛋問題
即使我們看了很多設(shè)計(jì)系統(tǒng)范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當(dāng)我們還沒有組建一個(gè) UI kits 組件庫的時(shí)候是如何來搭建一個(gè)頁面的呢？是先有了組件，然后創(chuàng)造了模塊頁面；還是先設(shè)計(jì)了頁面，然后再來歸納總結(jié)出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。
原子理論
在學(xué)習(xí)其他公司如何搭建設(shè)計(jì)系統(tǒng)的時(shí)候，我們了解到了 Brad Frost 的原子設(shè)計(jì)理論。他提出了原子設(shè)計(jì)原則，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年網(wǎng)頁設(shè)計(jì)師 Brad Frost 從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成了生物體（Organisms）。于是提出了原子設(shè)計(jì)方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。
原子設(shè)計(jì)的五個(gè)階段
原子（Atoms）：符號(hào)，為頁面構(gòu)成的基本元素。例如顏色、字體，或是一個(gè)圖標(biāo)等。
分子（Molecules）：組件，由原子構(gòu)成的簡單 UI 組件。例如，一個(gè)表單標(biāo)簽，搜索框和按鈕共同打造了一個(gè)搜索表單分子。
組織（Organisms）：模塊，由原子及分子組成的相對(duì)復(fù)雜的組織，在 UI 頁面中可視為模塊/樣式層級(jí)。
模板（Templates）：原型，將以上元素進(jìn)行排版，顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)，在 UI 設(shè)計(jì)中對(duì)應(yīng)的是原型圖層級(jí)。
頁面（Pages），將實(shí)際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實(shí)例。
特點(diǎn)：
從 Brad Frost 的原子設(shè)計(jì)理論得到啟發(fā)，將我們 APP 產(chǎn)品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個(gè)詳盡的庫幫助我們以一種更合理的方式構(gòu)建了一個(gè)設(shè)計(jì)系統(tǒng)的底層框架。
這個(gè)理論提出來以后就產(chǎn)生了非常大的轟動(dòng)。并且至此以后 Atomic Design（原子設(shè)計(jì)）成為了構(gòu)建 Design System 的核心指導(dǎo)理論。
Sketch工具
Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產(chǎn)品設(shè)計(jì)的未來。」我們可以使用 Sketch Library 功能實(shí)現(xiàn)組件庫的創(chuàng)建。而組件庫的底層邏輯就是原子設(shè)計(jì)理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構(gòu)建組件和樣式。
Text style：Text Style 用于設(shè)置文字規(guī)范，在一個(gè)系統(tǒng)中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個(gè)系統(tǒng)中的字體樣式，可使之便于管理和修改，保持系統(tǒng)的可持續(xù)性和可用性。并且可單獨(dú)輸出字體樣式系統(tǒng)進(jìn)行團(tuán)隊(duì)之間，不同項(xiàng)目之間的共享。
Layer Style：可編輯元素的各種樣式，比如用于制作顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等內(nèi)容?？墒乖乇３忠恢碌膱D層樣式。
symbols：設(shè)計(jì)系統(tǒng)中的任何元素都使用 symbols 來形成符號(hào)，可復(fù)用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號(hào)進(jìn)行嵌套組合，可形成符號(hào)嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會(huì)形成符號(hào)嵌套層，作為不同符號(hào)組件的分層。同樣的對(duì)于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。
Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個(gè)組件庫，可通過共享形式，來使它成為團(tuán)隊(duì)的設(shè)計(jì)工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態(tài)。
在確定了原則和工具之后，我們?yōu)樵O(shè)計(jì)系統(tǒng)項(xiàng)目制定了完整的項(xiàng)目計(jì)劃，因?yàn)樯婕暗缴暇€和設(shè)計(jì)兩大塊，所以項(xiàng)目也是分設(shè)計(jì)線和落地線，兩條線既有關(guān)聯(lián)性，又是相對(duì)獨(dú)立和分離的。組件設(shè)計(jì)完成以后才可上線落地，因推動(dòng)落地的過程是需要整個(gè)設(shè)計(jì)開發(fā)團(tuán)隊(duì)的，不管是從時(shí)間還是人力上的資源協(xié)調(diào)和配合，所以落地線需要更加靈活。
設(shè)計(jì)階段 – 設(shè)計(jì)線
目標(biāo)結(jié)果 – 設(shè)計(jì)資產(chǎn)
設(shè)計(jì)階段，我們所產(chǎn)出的設(shè)計(jì)資產(chǎn)包括設(shè)計(jì)價(jià)值觀，設(shè)計(jì)指導(dǎo)原則，以及設(shè)計(jì)模式（解決方案）。
展開實(shí)施 – 任務(wù)細(xì)分
確定了設(shè)計(jì)資產(chǎn)以后，我們將設(shè)計(jì)資產(chǎn)進(jìn)行細(xì)分。整理規(guī)范的內(nèi)容并對(duì)每個(gè)組件進(jìn)行優(yōu)先級(jí)的確定。整理規(guī)范內(nèi)容的過程也是一個(gè)逐漸完善的過程，第一次整理可能并不完善，但是沒有關(guān)系，先把基礎(chǔ)框架和內(nèi)容整理好，后續(xù)在設(shè)計(jì)過程中有遺漏的再進(jìn)行添加。
內(nèi)容整理好以后，我們會(huì)發(fā)現(xiàn)一套規(guī)范里內(nèi)容非常多，所以需要根據(jù)項(xiàng)目時(shí)間來安排所有內(nèi)容的優(yōu)先級(jí)和分工。根據(jù)我們的設(shè)計(jì)系統(tǒng)的底層邏輯，所以我們將核心組件建設(shè)放在第一階段，比如字體、顏色、icon 等。構(gòu)建了基礎(chǔ)元件以后再來搭建模塊，最后再根據(jù)不同場景來確定樣式。至于分工，最好整個(gè)設(shè)計(jì)團(tuán)隊(duì)的人員都可參與，互相分擔(dān)工作量以達(dá)到工作效率最大化。
整體內(nèi)容確定以后，因每個(gè)組件的整理有規(guī)范可循，所以我們針對(duì)每個(gè)組件的設(shè)計(jì)過程也確定了單個(gè)組件的設(shè)計(jì)流程。
過程跟進(jìn) – 關(guān)鍵節(jié)點(diǎn)
在設(shè)計(jì)過程中，我們也需要對(duì)關(guān)鍵時(shí)間節(jié)點(diǎn)的項(xiàng)目整體進(jìn)程和結(jié)果輸出總結(jié)。此階段是和上線的項(xiàng)目節(jié)點(diǎn)重合的關(guān)鍵點(diǎn)，設(shè)計(jì)輸出的內(nèi)容會(huì)和上線過程有非常多的磨合，一個(gè)組件的落地還需要不停的和開發(fā)溝通，收集反饋意見，并且進(jìn)行調(diào)整修改，記錄解決問題。
執(zhí)行復(fù)盤 – 結(jié)果驗(yàn)證
在每個(gè)組件的設(shè)計(jì)過程中，我們都會(huì)反復(fù)完善每個(gè)組件的內(nèi)容，包括設(shè)計(jì)原則、交互細(xì)節(jié)以及應(yīng)用場景等。反復(fù)去驗(yàn)證組件的可行性。并且對(duì)階段性完成的設(shè)計(jì)結(jié)果進(jìn)行復(fù)盤和分享，進(jìn)一步來驗(yàn)證設(shè)計(jì)方案的可行性。規(guī)范需要不停地優(yōu)化創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。
上線階段 – 落地線
沒有上線落地的視覺規(guī)范只是耍流氓。
設(shè)計(jì)師自嗨并無意義。推進(jìn)的過程，最重要的還是溝通。溝通的內(nèi)容包括組件輸出的合理性、開發(fā)工作量、產(chǎn)品版本迭代需求計(jì)劃等。
愿望如此之美好，現(xiàn)實(shí)如此之貧瘠。
設(shè)計(jì)從落地到上線的過程想必每個(gè)設(shè)計(jì)師都有大把心得。在公司中實(shí)際的推進(jìn)是非常難的，因?yàn)楫a(chǎn)品需求永遠(yuǎn)都做不完，開發(fā)永遠(yuǎn)在寫代碼，設(shè)計(jì)永遠(yuǎn)需要將先完成業(yè)務(wù)需求設(shè)計(jì)為前提。所以如何將設(shè)計(jì)規(guī)范的內(nèi)容插進(jìn)項(xiàng)目中是個(gè)最關(guān)鍵的點(diǎn)。
存在問題，根據(jù)項(xiàng)目的時(shí)間安排和產(chǎn)品迭代安排，我們?cè)噲D將不同優(yōu)先級(jí)組件的內(nèi)容分配到不同的產(chǎn)品迭代中。實(shí)際卻證明這非常的理想化。在這個(gè)過程中我們遇到非常多的問題：
解決方案：
APP 在建立的時(shí)候沒有規(guī)范性，所以現(xiàn)在想要規(guī)范所有的內(nèi)容就是一個(gè)非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。
我們的核心組件在產(chǎn)品迭代中完成上線以后，將剩余的組件規(guī)劃至開發(fā)的重構(gòu)版本中進(jìn)行開發(fā)。減少資源的重復(fù)使用，以及最大化降低對(duì) APP 的影響。我們衡量了利弊之后，決定此次規(guī)范的設(shè)計(jì)對(duì)于樣式的修改減少到最少，保持和線上內(nèi)容的一致性。很多時(shí)候我們?cè)O(shè)計(jì)師對(duì)于設(shè)計(jì)趨勢是很敏感以及非常想要去創(chuàng)新的，但是基于現(xiàn)狀下保持對(duì)樣式的克制完成基礎(chǔ)體系的搭建這個(gè)核心目的，是最重要的事。
MIZ Design 的設(shè)計(jì)資產(chǎn)中設(shè)計(jì)價(jià)值觀是貫徹整個(gè)產(chǎn)品的迭代發(fā)展，是產(chǎn)品持續(xù)迭代的指明燈。設(shè)計(jì)原則是團(tuán)隊(duì)成員建立設(shè)計(jì)的標(biāo)準(zhǔn)指導(dǎo)規(guī)范；設(shè)計(jì)資源庫貫徹設(shè)計(jì)師、開發(fā)和產(chǎn)品，實(shí)現(xiàn)產(chǎn)品迭代。我們也非常愿意分享這個(gè)過程，希望對(duì)大家建立設(shè)計(jì)規(guī)范整個(gè)流程有所幫助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
當(dāng)你認(rèn)清自己的價(jià)值觀和行為準(zhǔn)則后，決策就輕而易舉了。價(jià)值觀是指明燈，貫徹整個(gè)產(chǎn)品系統(tǒng)。我們根據(jù)米莊品牌的特性，以及業(yè)務(wù)場景的需求來定義 APP 的設(shè)計(jì)價(jià)值觀，指導(dǎo) MIZ Design 的設(shè)計(jì)語言的建立。
品牌特性
米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價(jià)值觀來驅(qū)動(dòng)業(yè)務(wù)增長。
業(yè)務(wù)場景
米莊作為金融工具類產(chǎn)品，功能操作場景不算復(fù)雜，強(qiáng)調(diào)一致性的用戶體驗(yàn)和安全規(guī)律的操作路徑。這也體現(xiàn)了產(chǎn)品對(duì)于不同頁面元素之間的相互關(guān)聯(lián)性和一致專業(yè)性的要求。
用戶調(diào)研
結(jié)合我們進(jìn)行的用戶調(diào)研報(bào)告，米莊產(chǎn)品的核心用戶對(duì)我們產(chǎn)品的需求是賺取零花錢居多，也就是利益的獲取。所以針對(duì)明確的用戶目標(biāo)，我們對(duì)于整個(gè)產(chǎn)品的設(shè)計(jì)需要以產(chǎn)品可操作性、性為第一原則，呈現(xiàn)的視覺層以安全可靠，清晰明確為風(fēng)格導(dǎo)向。
從以上三個(gè)方向，我們概括了設(shè)計(jì)價(jià)值觀核心的三點(diǎn)：
格式塔心理學(xué)
心理學(xué)的完形法則：相似、相近、封閉、簡單。
MIZ Design 的設(shè)計(jì)原則參考了格式塔心理學(xué)，取人和萬物交流的過程中，大腦最基礎(chǔ)的一些精神反射和行為操作，格式塔心理學(xué)的理論主張研究意識(shí)和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，這也符合了米莊的設(shè)計(jì)價(jià)值觀里關(guān)于效率和自然的定義。所以我們參考此心理學(xué)來幫助團(tuán)隊(duì)順暢地溝通，減少信息不對(duì)稱以及學(xué)習(xí)成本，作為協(xié)作的基礎(chǔ)。
第一性原理
埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結(jié)果出發(fā)，把事物分解成最基本的組成，看透事物的本質(zhì)，從源頭解決問題。這和原子設(shè)計(jì)理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實(shí)踐者，他將此原理視為科學(xué)界和商界非常古老的一條守則。
奧卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如無必要，勿增實(shí)體。
奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費(fèi)較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速?zèng)Q策和判斷認(rèn)知行之有效的工具之一?？梢院唵卫斫鉃楸３质挛锏暮唵涡?。在各個(gè)學(xué)科，各個(gè)研究領(lǐng)域都有發(fā)展。這個(gè)原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個(gè)穩(wěn)定的，持續(xù)自我生長的系統(tǒng)，發(fā)展原則是盡量保持簡約之道。
設(shè)計(jì)資產(chǎn)層面，我們輸出的內(nèi)容包含了以下兩大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 說明文檔：
開發(fā)層面 – 溝通，減少重復(fù)
基于 UI kit 創(chuàng)建的組件庫，幫助他們?cè)谧罱K產(chǎn)品中保持代碼的一致性和復(fù)用性。并且設(shè)計(jì)語言作為一種工具，是整個(gè)團(tuán)隊(duì)順暢溝通的最重要的語言。所以我們確保我們的設(shè)計(jì)語言，是能夠讓開發(fā)，產(chǎn)品都懂，并在第一時(shí)間執(zhí)行的。既然是語言，那么每個(gè)元素都會(huì)有自己的名字。每個(gè)組件，甚至每個(gè)組件中不同屬性的元素我們也賦予它名字。
無名萬物之始，有名萬物之母。──《道德經(jīng)》
我們的祖先發(fā)明語言文字的過程，其實(shí)就是一個(gè)給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會(huì)有文化偏見和個(gè)人信息資產(chǎn)的反應(yīng)。所以我們需要給設(shè)計(jì)系統(tǒng)中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產(chǎn)品的特殊語言。
場景：
開發(fā)：#000和#00000000分別替換成什么顏色？
設(shè)計(jì)師：#000，替換成 black-1
開發(fā)：那#00000000呢？
設(shè)計(jì)師：一臉茫然，這 2 個(gè)不是一個(gè)顏色嗎？
慣性思維，色值在設(shè)計(jì)師眼中，對(duì)應(yīng)的是一種色彩，而在開發(fā)眼中只是一堆數(shù)字。將心比心，當(dāng)你扔給開發(fā)一個(gè)色值的時(shí)候他們只是一個(gè)難過的問號(hào)；而當(dāng)你給他們具體的一個(gè)顏色的名字，他們能馬上對(duì)應(yīng)到這個(gè)名字，那么就是順暢的。
所以當(dāng)我們給顏色命名以后，溝通就變成了以下這樣：
設(shè)計(jì)師：#ff5600 換成 orange-2。
開發(fā)：好的。修改完成。
設(shè)計(jì)師：#ff3450 全部替換成 blue-2。
開發(fā)：好的，替換完成。
設(shè)計(jì)師：這次我們品牌升級(jí)，orange-2 的色值更改為 #ff5666。
開發(fā)：好的。全局修改完成。
雖然修改的過程比較辛苦，但是結(jié)果是好的。從此設(shè)計(jì)師掌握了話語權(quán)。當(dāng)然，開發(fā)也很高興。
不單單是色彩，我們對(duì)字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產(chǎn)生價(jià)值。
設(shè)計(jì)層面 – 輸出，快樂傳承
設(shè)計(jì)師們可以更加便捷地創(chuàng)建、分享、定義設(shè)計(jì)界面的內(nèi)容。此外，在設(shè)計(jì)傳承方面，也能讓我們更好地將設(shè)計(jì)原則傳遞給新人。
場景：
設(shè)計(jì)師 a：此次版本迭代涉及到優(yōu)惠券頁面的優(yōu)惠，這個(gè)頁面的字體和顏色有規(guī)范嗎？
設(shè)計(jì)師 b：有的。請(qǐng)參照設(shè)計(jì)規(guī)范。
不同設(shè)計(jì)師在接到需求開始設(shè)計(jì)以后會(huì)擔(dān)心：怕風(fēng)格有差別，怕頁面不統(tǒng)一。辛苦做好頁面以后發(fā)現(xiàn)和別的設(shè)計(jì)師同時(shí)做的差別很大，也不符合產(chǎn)品整體品牌調(diào)性，陷入循環(huán)改稿中。此時(shí)設(shè)計(jì)規(guī)范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點(diǎn)。
同步更新：設(shè)計(jì)資產(chǎn)的目標(biāo)用戶，除了團(tuán)隊(duì)中的前端開發(fā)，那么最大受益者其實(shí)就是設(shè)計(jì)師們。設(shè)計(jì)系統(tǒng)的一大優(yōu)點(diǎn)便是修改設(shè)計(jì)系統(tǒng)中任何一個(gè)原子，整個(gè)系統(tǒng)所有這個(gè)原子都能感知到。這便是設(shè)計(jì)系統(tǒng)的可持續(xù)性、統(tǒng)一性，也是設(shè)計(jì)系統(tǒng)的基礎(chǔ)。
△ 組件庫中的任何修改，會(huì)同步到所有使用該庫的文檔中
自定義內(nèi)容：組件中的內(nèi)容都可自定義進(jìn)行修改。
解放重復(fù)生產(chǎn)力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
這句話的道理和我們的設(shè)計(jì)原則中第一性原理相通，從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。這和在構(gòu)建設(shè)計(jì)系統(tǒng)的時(shí)候是一個(gè)道理。學(xué)習(xí)從元認(rèn)知能力開始，而組件一個(gè)系統(tǒng)，從元件開始。埃隆·馬斯克從組成汽車的發(fā)電機(jī)開始思考，創(chuàng)辦了特斯拉；從底層元素的創(chuàng)新開始，才會(huì)有產(chǎn)品整體性的創(chuàng)新。
最后補(bǔ)充一下結(jié)構(gòu)圖：
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
響應(yīng)式已經(jīng)成為網(wǎng)頁設(shè)計(jì)的主流，目前已很多網(wǎng)站能兼容手機(jī)端 ，但是唯有 dashboard 的界面是相當(dāng)難在移動(dòng)端顯示，特別是數(shù)據(jù)復(fù)雜、內(nèi)容較多的后臺(tái)數(shù)據(jù)，是很難直接展示到移動(dòng)端的。
今天我們分享一系列 dashboard UI 設(shè)計(jì)作品，主要展示一些用戶數(shù)據(jù)、圖表的可視化組合設(shè)計(jì)。這些作品界面布局合理，層級(jí)分明，設(shè)計(jì)美觀，對(duì)要做這類 UI 的同學(xué)有很好的參考價(jià)值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟蹤器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活動(dòng)追蹤 by Cuberto
– 04 –
醫(yī)院 APP 設(shè)計(jì) by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Ka?aska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移動(dòng)端后臺(tái) by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
電子單車 APP 后臺(tái)設(shè)計(jì) by Arnar ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易證券數(shù)據(jù)界面設(shè)計(jì) by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
記帳應(yīng)用統(tǒng)計(jì)界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
銀行 APP 數(shù)據(jù)界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特幣交易界面設(shè)計(jì) by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
醫(yī)療護(hù)理app用戶后臺(tái) by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
這個(gè)展開菜單很好看呢 by Martin Mro?
dribbble.com/martinmroc
從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區(qū)別，移動(dòng)端的后臺(tái)只能顯示少量或簡化版的數(shù)據(jù)。比如 PC 一個(gè)頁面的功能，在移動(dòng)端可以分開1-2個(gè)頁面來區(qū)分，或者使用類似 Tab 的形式來展現(xiàn)。
如果是手機(jī) WEB 端可以用響應(yīng)式來解決，以節(jié)省成本，但這樣通常交互并不十分友好，如果時(shí)間和成本允許的話，建議產(chǎn)品和交互人員策劃新的后臺(tái)版本。
藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
排行榜干貨集合。
藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在整體設(shè)計(jì)流程中，用戶故事可以說是點(diǎn)亮應(yīng)用絕對(duì)目標(biāo)的那一點(diǎn)星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶故事也能給整體UI設(shè)計(jì)流程帶來巨大的好處。
一支設(shè)計(jì)團(tuán)隊(duì)坐下來討論為一家新客戶所設(shè)計(jì)的應(yīng)用的第一輪模型情況。隨著團(tuán)隊(duì)成員不斷提出想法，我們發(fā)現(xiàn)大家對(duì)于這個(gè)應(yīng)用是什么？其功能應(yīng)該是什么樣有著截然不同的看法。后來，會(huì)議迅速變成了“誰對(duì)誰錯(cuò)”而不是“什么對(duì)什么錯(cuò)”的爭論。大家紛紛為自己的設(shè)計(jì)辯護(hù)，但沒有一個(gè)人站在用戶角度說話。聽著耳熟嗎？正是在這種時(shí)刻，我們迫切需要描繪用戶故事。
今時(shí)今日，很多UI/UX專業(yè)人士都開始意識(shí)到自己工作的環(huán)境進(jìn)入了Agile狀態(tài)。Agile開發(fā)（和設(shè)計(jì)）流程需要快速推進(jìn)，相應(yīng)地，我們也需要能夠?qū)崿F(xiàn)快速、協(xié)作的工具。這個(gè)聽起來像是個(gè)矛盾，但實(shí)際上確實(shí)有很多工具能夠幫助我們?cè)诓辉黾禹?xiàng)目時(shí)間的情況下有效合作。用戶故事就是針對(duì)“Agile法”的工具，在運(yùn)用到UI設(shè)計(jì)流程時(shí)，其能夠?yàn)楹罄m(xù)的設(shè)計(jì)階段提供堅(jiān)定的基石。簡約版的用戶故事操作起來幾乎不用時(shí)間，但卻能對(duì)保證項(xiàng)目按軌道運(yùn)行帶來奇跡般的效果。
我們的UI設(shè)計(jì)團(tuán)隊(duì)會(huì)在流程中運(yùn)用用戶故事，而在運(yùn)用過程中我們發(fā)現(xiàn)，用戶故事幫我們做到了三件事。
1. 用戶故事可以讓產(chǎn)品以用戶為核心。
2. 用戶故事可以促進(jìn)團(tuán)隊(duì)成員之間的合作。
3. 用戶故事可以防止出現(xiàn)功能蔓延以及設(shè)計(jì)死胡同。
從根本上說，用戶故事的用途是描述用戶通過使用軟件產(chǎn)品想要實(shí)現(xiàn)的任務(wù)。用戶故事起源于Agile和Scrum開發(fā)策略，但是對(duì)于設(shè)計(jì)師來說，用戶故事主要用來提醒用戶目標(biāo)以及對(duì)各個(gè)界面設(shè)計(jì)進(jìn)行整理和排序。
一個(gè)用戶故事就是簡單的一句話?？梢杂眠@句作為模板：“作為用戶我需要（基本用戶目標(biāo)）”。因?yàn)楣适露己芎喍潭矣嗅槍?duì)性，所以需要多個(gè)不同的故事來覆蓋所有可能的用戶案例。事實(shí)上，我們會(huì)想辦法把每個(gè)故事進(jìn)行細(xì)化。
舉個(gè)例子，一個(gè)用戶故事剛開始時(shí)是：
“作為用戶我需要?jiǎng)?chuàng)建一個(gè)新帳戶。”
但是新建帳戶的過程中又涉及到哪些步驟呢？用戶需要提供用戶名、密碼以及其他相關(guān)信息。其中每個(gè)操作都需要有相對(duì)應(yīng)的用戶故事，故事越具體，到后期對(duì)設(shè)計(jì)師和開發(fā)來說就會(huì)越方便。那么，“創(chuàng)建新帳戶”就可以進(jìn)一步細(xì)化為：
“作為用戶我需要輸入一個(gè)新用戶名?！?br data-filtered="filtered" /> “作為用戶我需要輸入密碼?！?br data-filtered="filtered" /> “作為用戶我需要再次輸入密碼進(jìn)行確認(rèn)?！?br data-filtered="filtered" /> “作為用戶我需要提交信息，創(chuàng)建帳戶?！?
這樣繼續(xù)下去，最后就會(huì)得到一大長串用戶故事，其中大部分都需要加入到最終產(chǎn)品內(nèi)。
我們最近為Quiksilver服裝設(shè)計(jì)了一款iPad應(yīng)用，可以讓銷售其貨物的店鋪跟蹤當(dāng)前存活狀態(tài)，以便輕松下單訂新貨。就是這么一款看似非常簡單明了的應(yīng)用，我們想出了266個(gè)用戶故事（剛開始時(shí)）。你們都沒想到細(xì)節(jié)能夠細(xì)到這種程度吧！
作為設(shè)計(jì)師，我在第一次和項(xiàng)目相關(guān)人員開會(huì)的時(shí)候就會(huì)開始考慮布局和配色方案。在聽他們說目標(biāo)以及了解終端用戶情況的同時(shí)，我就能想象出這款應(yīng)用應(yīng)該是什么樣的。但關(guān)鍵在于不能本末倒置——我們要先確定用戶故事，讓用戶故事道出設(shè)計(jì)，而不能倒過來搞。
在對(duì)應(yīng)用的所有用戶故事做完腦暴之后，我們會(huì)把故事放到Google的合作電子表格上，以便客戶在想到有其他用戶故事時(shí)隨時(shí)添加。在客戶和團(tuán)隊(duì)感覺已經(jīng)窮盡所有內(nèi)容之后，我們會(huì)給每個(gè)故事一個(gè)編號(hào)。這些編號(hào)到項(xiàng)目后期會(huì)派上大用場，我們會(huì)用編號(hào)作為一個(gè)簡明的標(biāo)簽來表示哪些故事需要在哪個(gè)時(shí)間段處理。
這個(gè)表格的功能不僅是提醒我們應(yīng)用的功能，還能讓我們?cè)谡麄€(gè)流程中與用戶緊密相聯(lián)。每個(gè)用戶故事都是針對(duì)于我們終端用戶的，以便保證始終照顧到他們的需求。這一點(diǎn)在一個(gè)有關(guān)約會(huì)應(yīng)用的項(xiàng)目中表現(xiàn)的尤其明顯。
關(guān)于這個(gè)應(yīng)用，我在給“用戶資料”頁面做線框圖的時(shí)候，最開始以為需要添加一個(gè)“保存用戶”功能按鈕。但是，我不經(jīng)意瞟了一眼“用戶資料”部分，突然想起來用戶故事中的一個(gè)細(xì)節(jié)：“作為用戶我需要收藏其他用戶?！?
把“保存”一詞改成“收藏”這個(gè)決定雖小但很關(guān)鍵，因?yàn)椤氨４妗庇脩袈犉饋砝浔?，而“收藏”則契合了用戶有關(guān)約會(huì)的心態(tài)。設(shè)計(jì)師容易陷入到技術(shù)的陷阱中，特別是在對(duì)功能投入了大量時(shí)間之后。而用戶故事可以提醒我們時(shí)刻以用戶體驗(yàn)為核心，因?yàn)橛脩趔w驗(yàn)是最終決定應(yīng)用性格的東西。
UI設(shè)計(jì)通常涉及到的人不止一個(gè)。其中還可能包括客戶、設(shè)計(jì)師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規(guī)模大小。從很多方面說，這就類似于一隊(duì)人劃船。要贏得比賽，團(tuán)隊(duì)的每個(gè)成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說所有人的意見都要始終統(tǒng)一，而是說所有人都要有統(tǒng)一的目標(biāo)并且清楚自己在團(tuán)隊(duì)中的角色。
雖然我們?cè)贑itrusBits所采用的流程遠(yuǎn)算不上完美，但是我們卻發(fā)現(xiàn)用戶故事能夠保證船上的人勁都往一處使。以用戶故事為基準(zhǔn)做出決策讓我們得以明確定義出應(yīng)用的目標(biāo)。這樣一來就大大降低了團(tuán)隊(duì)合作時(shí)的障礙，因?yàn)槲覀冇煤喍?、有針?duì)性的詞句明確定義出了共同的目標(biāo)。
另外，用戶故事還能讓身處不同地理位置的團(tuán)隊(duì)更加輕松的合作。我們?cè)跒橐患遗f金山客戶開發(fā)一款問答類應(yīng)用時(shí)，我們?cè)诤车貐^(qū)的團(tuán)隊(duì)會(huì)時(shí)不常的和客戶碰面討論應(yīng)用要求。他們寫出了用戶故事（但并沒有在項(xiàng)目期間進(jìn)行其他修改）然后放到了Google Drive。而我們身處洛杉磯的團(tuán)隊(duì)則可以在畫線框圖的同時(shí)隨時(shí)參考用戶故事，并進(jìn)行必要的改動(dòng)。要不是有了這個(gè)步驟，這個(gè)項(xiàng)目所花費(fèi)的時(shí)間會(huì)長的很多，而且還會(huì)需要通過大量漫長的解釋工作來解決這些簡短用戶故事幾分鐘就能解決的問題。
“功能蔓延”是一個(gè)UI設(shè)計(jì)中常見的詞。它是指相關(guān)人員會(huì)不自覺地不斷增加新功能，擴(kuò)展項(xiàng)目范圍，這既包括硬件也包括軟件方面。
這幅漫畫完美地詮釋了功能蔓延。
當(dāng)然，在項(xiàng)目進(jìn)展期間我們是不反對(duì)更改要求的。但是，除非有明確的用戶故事告訴我們?cè)?，我們?huì)拒絕哪怕添加一個(gè)簡單的文本框。我們之所以在這方面這么強(qiáng)硬，是因?yàn)橹翱吹竭^有的項(xiàng)目超出控制、丟掉中心最后無法實(shí)現(xiàn)最初設(shè)定的目標(biāo)。
舉個(gè)例子，不久之前，我們有個(gè)客戶忽略了用戶故事這回事。當(dāng)時(shí)我們正在給一家處理保密資產(chǎn)的公司搭建應(yīng)用，客戶想要做一款能夠管理員工之間通訊的應(yīng)用。主要的通訊手段是一個(gè)使用文字信息和圖片的公司內(nèi)部對(duì)話平臺(tái)（這一點(diǎn)我們都認(rèn)可了），這個(gè)我們記錄到了用戶故事里。后來，客戶又要求增加視頻、語音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內(nèi)容加入了新的通訊系統(tǒng)，也因此擴(kuò)大了項(xiàng)目范圍，推遲了時(shí)限，在做完了全部工作之后我們卻發(fā)現(xiàn)添加的內(nèi)容其實(shí)對(duì)終端用戶沒用。
盡管新增的功能也很屌，但我們最開始的初衷是做一款盡量簡化通訊的應(yīng)用以便促進(jìn)團(tuán)隊(duì)建設(shè)和協(xié)作，不讓他變成一個(gè)公司內(nèi)部的Facebook。于是，我們又回到了用戶故事并重新提醒了客戶做應(yīng)用的初衷，最后成功組織了功能蔓延，回到了正軌。多方面的實(shí)驗(yàn)盡管能帶來很多很棒的成果，但是如果產(chǎn)品無法滿足根本要求，再精巧也沒意義。
通過這次教訓(xùn)，我們?cè)陂_發(fā)Quicksilver這個(gè)針對(duì)B2B公司的銷售類應(yīng)用時(shí)嚴(yán)格遵照用戶故事開展流程。最后，最終產(chǎn)品一絲不茍地遵守了最初設(shè)計(jì)，這主要?dú)w功于我們?cè)谇捌诜e累了一套全面的用戶故事。以用戶故事為基石為后期節(jié)省了大量工作，同時(shí)也讓我們的工作更加有序、更加以用戶為中心。盡管產(chǎn)品的每次迭代都帶來了更多的用戶和客戶反饋，但產(chǎn)品理念的核心一直屹立不倒。
每個(gè)用戶故事對(duì)于設(shè)計(jì)團(tuán)隊(duì)和開發(fā)團(tuán)隊(duì)來說都有自己的一套意義。時(shí)刻思考技術(shù)限制雖然說是好的，但是畢竟我們說的是“用戶故事”，不是“開發(fā)的故事”也不是“設(shè)計(jì)師的故事”。正因?yàn)槲覀兺ㄟ^用戶故事對(duì)用戶的觀點(diǎn)進(jìn)行了排序整理，我們才能更輕松地了解所面臨的問題進(jìn)而創(chuàng)造出一款真正有用的最終產(chǎn)品。
藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
不要小看一個(gè)登錄界面，它內(nèi)里包含很多細(xì)微的東西，除去外觀視覺，更多要注意的是交互的操作體驗(yàn)，比如一些動(dòng)畫、一些文案提示等細(xì)節(jié)都要注意，如果你是UI設(shè)計(jì)師，建議看看這次經(jīng)驗(yàn)文章，附上了大量案例，也許能助你未來更好的去設(shè)計(jì)一個(gè)用戶體驗(yàn)友好的APP登錄界面。
下面通過幾個(gè)關(guān)于登錄界面的UX策略指南，讓你更好的應(yīng)用和實(shí)踐。
如果用戶使用你的服務(wù)必須登錄，那么信息字段是你必須要做的主要功能（即輸入框中的提示語，如：輸入手機(jī)號(hào)碼，輸入驗(yàn)證碼。）
使這些字段清楚可視，并且不要強(qiáng)迫用戶到處尋找，或花更多的步驟進(jìn)到App. 一旦他們進(jìn)到App, 登錄界面是他們所應(yīng)當(dāng)見到的第一個(gè)事情。
獎(jiǎng)勵(lì)提示：相比于使用常見的“登錄”“登陸”的按鈕，可以更富有創(chuàng)造性，并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù)，這樣他們就不需要每次輸入信息。
更多地時(shí)候，我們看到注冊(cè)和登陸按鈕被放置的靠近彼此，但是這會(huì)對(duì)用戶產(chǎn)生反作用。
這兩個(gè)動(dòng)作都包含了相同的動(dòng)詞，并且看起來也很相似，所以他們會(huì)混淆用戶的選擇。在有限的時(shí)間內(nèi)進(jìn)入問題，他們可能會(huì)感到沮喪并且離開。
基本上，任何界面上不應(yīng)該有使用戶“暫?！焙汀八伎肌钡脑亍?
如果你想讓他們的體驗(yàn)完美無瑕，分開這注冊(cè)和登陸兩個(gè)區(qū)域，并且使差別清晰可見。另外，你可以使用不同的動(dòng)詞或者簡單解釋不同的字段是什么。
在登錄和注冊(cè)部分，增加不同的輸入字段。
除了動(dòng)詞“Sign”是事實(shí)之外，另一個(gè)另用戶感到困惑的是，登錄和注冊(cè)部分通常有相同數(shù)量的輸入框（用戶名，密碼，和郵箱）。
為了完全地區(qū)分，最小化新用戶嘗試直接登錄的機(jī)會(huì)。用不同的輸入字段。
當(dāng)大多數(shù)用戶的密碼由于安保原因被打了馬賽克，用戶頻繁遇見的另一個(gè)問題是打錯(cuò)他們的密碼。
這甚至?xí)l(fā)生在很有經(jīng)驗(yàn)的打字員身上，特別是當(dāng)他們?cè)谝苿?dòng)設(shè)備上登錄的時(shí)候。
防止這種情況發(fā)生的做法是：在密碼字符旁邊包含一個(gè)“顯示密碼”的單選框或圖標(biāo)。
如果應(yīng)用監(jiān)測到一個(gè)錯(cuò)誤的密碼組合，和用戶名，但是沒有明確的報(bào)告給用戶問題是什么，用戶可能會(huì)多次嘗試后，很生氣的退出應(yīng)用。
這是為什么你應(yīng)該考慮通用的回復(fù)（例如“你的密碼或郵箱不符合”），并且給他們立馬回復(fù)怎么解決這個(gè)問題。
問下郵箱地址或電話號(hào)碼，而不是唯一的用戶名
為什么人們登錄時(shí)人們很少記住“用戶名”？如果使用用戶名登錄，你會(huì)面對(duì)很多可避免的困難：用戶名必須是一個(gè)唯一的，這意味著人們會(huì)重復(fù)嘗試輸入一個(gè)系統(tǒng)里目前還沒有的用戶名，或者最終使用其真實(shí)姓名。
過了一會(huì)兒，用戶想出了一個(gè)唯一的登錄名，但是只過了一小會(huì)兒就忘記了，因?yàn)檫@個(gè)用戶名對(duì)他沒有任何的意義。
另一個(gè)事情可以促進(jìn)登錄，是提供給用戶幾個(gè)登錄選項(xiàng)，并且給他們機(jī)會(huì)來選擇和嘗試用戶名而不會(huì)沮喪。在這過程中強(qiáng)迫的一部分是允許他們使用郵箱地址和密碼來注冊(cè)。
忘記密碼發(fā)生在所有人身上，這也是為什么，你急迫的給到用戶一個(gè)機(jī)會(huì)來恢復(fù)密碼，那么就直接在登錄界面這么做吧。
所要做的就是，在輸入框下增加一個(gè)“忘記你的密碼”的鏈接，并讓系統(tǒng)能給用戶的郵箱或電話號(hào)碼發(fā)送驗(yàn)證碼。
為了避免強(qiáng)迫進(jìn)入和暴力攻擊，許多網(wǎng)頁和應(yīng)用在一系列的錯(cuò)誤嘗試之后關(guān)閉賬戶。
安全第一，但是你至少要嘗試告訴用戶，在多少次嘗試后，在關(guān)閉賬戶前，他們必須離開。你也可以分享更多的細(xì)節(jié)，例如，在試錯(cuò)后的十分鐘才可以再次嘗試的事實(shí)。
如果在過去，都是在用相同的無風(fēng)格和定制化的登錄頁?，F(xiàn)如今，給你的應(yīng)用，創(chuàng)造一個(gè)獨(dú)特的登錄頁設(shè)計(jì)是非常重要的事情，尤其是你想要圍繞你的應(yīng)用和服務(wù)來創(chuàng)造品牌。
設(shè)計(jì)師和開發(fā)人員也有承認(rèn)意識(shí)到登錄表單的重要性。這是事實(shí)，特別對(duì)于移動(dòng)環(huán)境下，用戶界面相比于“桌面”網(wǎng)站，扮演了更重要的角色。
當(dāng)為一個(gè)應(yīng)用和移動(dòng)站設(shè)計(jì)這個(gè)元素的時(shí)候，設(shè)計(jì)師花很多的精力，使它既好用又美觀。
在這篇文章里，你會(huì)看到很多移動(dòng)端用戶界面設(shè)計(jì)的案例靈感，關(guān)于一個(gè)移動(dòng)端登陸頁面應(yīng)被設(shè)計(jì)成什么樣，給你一些線索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login & Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
對(duì)用戶來說，登陸已經(jīng)很困難了，所以，使之變得更復(fù)雜，對(duì)你的產(chǎn)品來說并不是一個(gè)很聰明的決定。避免更大的和不熟悉的形式，并且讓輸入字符簡單可視。這些只是一些為了節(jié)省用戶時(shí)間可以考慮的技巧，并且?guī)椭麄兿硎苣闼峁┑姆?wù)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn