如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

列表時(shí)間排序到底應(yīng)該正序還是倒序？哪種體驗(yàn)會(huì)更好？各大知名產(chǎn)品都是如何做的？

背景

前陣子正好做到了一個(gè)類似“申請(qǐng)通知“的功能，因?yàn)樯婕暗搅斜?，所以要考慮列表的排序規(guī)則，那么問題來了，要用哪種排序規(guī)則（拼音、時(shí)間…）？

當(dāng)然，這里肯定會(huì)用時(shí)間排序，那么按照時(shí)間的正序（新的通知在下面）還是倒序（新的通知在上面）？以下將進(jìn)行一個(gè)系統(tǒng)的分析，列表時(shí)間排序到底要正序還是倒序？

產(chǎn)品分析

我們可以先看下市場上的產(chǎn)品都是怎么做的，在這里我將這些產(chǎn)品分成了兩類（可能不全，這里不談評(píng)論頁面哈）：

1. 消息通知頁面

一般由產(chǎn)品推給用戶，可能是產(chǎn)品運(yùn)營通知，也可能是其他用戶發(fā)生了一些操作等。

看了很多產(chǎn)品的例子，這里就不全部列出了，幾乎大部分的通知列表都是按照時(shí)間倒序，只有網(wǎng)易馬上辦和拼多多是正序。

2.內(nèi)容信息流頁面

內(nèi)容更新相對(duì)比較頻繁：

幾乎所有新聞資訊類都是這種類型的列表，采用的都是時(shí)間倒序。

微信和釘釘邏輯分析

1.微信

提及微信大家對(duì)微信新版本的一大改動(dòng)肯定非常熟悉了，那就是訂閱號(hào)的變化，微信把用戶關(guān)注的所有訂閱號(hào)的新消息拿出來放到一個(gè)頁面——訂閱號(hào)消息，它的排序是倒序，而其他具體的訂閱號(hào)內(nèi)部歷史消息是正序，另外新的好友申請(qǐng)消息頁面是倒序。

那么微信的這些模塊為什么排序規(guī)則不一樣呢？背后的原因是什么呢？我個(gè)人認(rèn)為有幾點(diǎn)原因：

1. 首先新的訂閱號(hào)類似新聞資訊一樣（可能微信就是想把它打造成這樣，這點(diǎn)我們不展開），所以按照倒序排列也講得通；
2. 具體訂閱號(hào)中按照正序排列是因?yàn)轫撁嫦旅嬗胁僮鳎梢赃M(jìn)行文字的輸入，所以這個(gè)頁面很像聊天頁面，按照正序也有道理；
3. 騰訊新聞這個(gè)功能模塊的排序有點(diǎn)不太理解，明明是新聞?lì)?，排序是按照正序，和訂閱?hào)很像，這里我也分析了兩點(diǎn)原因：

1）畢竟微信主體功能是IM，那么其他的模塊都是附屬，不是主要功能，可能騰訊新聞的根本目的就是為了給騰訊新聞APP導(dǎo)流。

2）將其他的模塊做成訂閱號(hào)模式在產(chǎn)品層面一致性和復(fù)用性很高，既保證了體驗(yàn)一致性，又減少了開發(fā)成本。

綜上所述，微信內(nèi)部列表排序規(guī)則是根據(jù)具體場景和功能決定的，其實(shí)都可以講得通，不過單純就某些模塊的體驗(yàn)來講卻是有些勉強(qiáng)。感興趣的話，大家可以看看支付寶，它的內(nèi)部所有的列表高度一致，都是按照倒序，包括它的生活號(hào)（和微信的訂閱號(hào)很像），這里就不講了。

2.釘釘

釘釘作為一款企業(yè)級(jí)IM產(chǎn)品，大家也許并不陌生，它的功能可謂相當(dāng)復(fù)雜，涵蓋了很多模塊，已然做成了一個(gè)大的平臺(tái)生態(tài)系統(tǒng)，那么是不是因?yàn)楣δ艿膹?fù)雜導(dǎo)致了內(nèi)部一些列表的排序規(guī)則各不相同呢？

說實(shí)話我是有些懵的，比如其他大部分產(chǎn)品的通知都是倒序排列，而釘釘就是正序，那如果說釘釘有自己的產(chǎn)品規(guī)則和邏輯的話，為啥有些類似通知的頁面排序又是倒序？

這個(gè)實(shí)在講不通，而且場景和功能層面這些列表其實(shí)還是比較相近的，那唯一能解釋的可能就是互聯(lián)網(wǎng)界經(jīng)常說的——“這些模塊不是一個(gè)團(tuán)隊(duì)做的”。

思考

綜上，大家可以看到，基本大部分產(chǎn)品都是采用時(shí)間倒序，也就是的內(nèi)容在上面，也有小部分采用正序，那么為什么會(huì)按照這樣的邏輯呢？我進(jìn)行了幾點(diǎn)分析猜測：

1. 用戶視覺流習(xí)慣從上到下，產(chǎn)品希望用戶能及時(shí)關(guān)注新的內(nèi)容，所以按照正序
2. 列表可能有一些操作，如下拉刷新、篩選，的內(nèi)容靠近操作會(huì)更自然
3. 列表中若有回復(fù)的功能（微信公眾號(hào)），更類似IM聊天頁面，所以正序新的內(nèi)容在下，比較合理
4. 產(chǎn)品內(nèi)部體驗(yàn)一致性，大部分產(chǎn)品內(nèi)部只采用了一種排序規(guī)則（除釘釘和微信新公眾號(hào)），這讓用戶在使用同一款產(chǎn)品時(shí)，體驗(yàn)是一致的，有預(yù)期的。
5. 技術(shù)實(shí)現(xiàn)，技術(shù)實(shí)現(xiàn)的框架可能產(chǎn)品內(nèi)部采用了同一套方案，所以如果是正序都是正序，是倒序都是倒序。

藍(lán)藍(lán)設(shè)計(jì)( bouu.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ì)中的重復(fù)是什么？

在平面設(shè)計(jì)中，重復(fù)構(gòu)成是常用的一種構(gòu)成方法，通過重復(fù)可以使畫面達(dá)到和諧、統(tǒng)一的視覺效果，并能加強(qiáng)給人的印象，也可以達(dá)到一種有規(guī)律的節(jié)奏感和形式美感。

排版的四大原則：對(duì)比、對(duì)齊、親密性、重復(fù)，重復(fù)在排版中也占據(jù)了一席之地，可見它在設(shè)計(jì)中分量是不可小覷的。

格式塔原理：接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同運(yùn)動(dòng)，格式塔原理中的對(duì)稱性就是重復(fù)的一種表現(xiàn)方式；格式塔原理中的相似性算是重復(fù)中自帶的一種突變。

1. 重復(fù)

重復(fù)是設(shè)計(jì)中最基本的形式。在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。

在產(chǎn)品設(shè)計(jì)中重復(fù)的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復(fù)的元素有位移（方向）、旋轉(zhuǎn)、縮放、不透明度、相同屬性交互要一致。

在產(chǎn)品設(shè)計(jì)的前期設(shè)計(jì)師需要輸出界面設(shè)計(jì)，為了方便下游前端工程師更好的規(guī)范和適配，也要保證產(chǎn)品后期上線產(chǎn)品視覺稿的高度還原，這就要求設(shè)計(jì)師輸出一整套產(chǎn)品的視覺和交互規(guī)范。

重復(fù)配色

在 app store 的頁面中使用了相同的顏色進(jìn)行提醒，方便用戶快速查找和點(diǎn)擊，整體的藍(lán)色又給人理性的感覺，看到付費(fèi)app 的好評(píng)數(shù)可以看出是因?yàn)楫a(chǎn)品好才推薦你進(jìn)行理性消費(fèi)。

重復(fù)大小

INS 主頁第一排頭像相同大小進(jìn)行重復(fù)排列，與內(nèi)容的人物頭像有大小對(duì)比之分；INS 搜索頁采用了九宮格布局，為了重復(fù)中有變化它把右邊的四個(gè)方格合并成一個(gè)內(nèi)容展示區(qū)域，推薦好的熱門視頻。

重復(fù)間距

Airbnb 界面中的間距非常規(guī)范，首頁大體采用了谷歌里面的8px 原則，每個(gè)間距之間的規(guī)范很多1:2的比例關(guān)系。好的比例規(guī)范會(huì)給界面帶來簡潔大氣的感覺。

重復(fù)組件

（如圖標(biāo)注）INS 界面中用了統(tǒng)一組件，相同的圓角和高度規(guī)范又給畫面增加了統(tǒng)一性和連貫性。

2. 突變

在相同的形象重復(fù)出現(xiàn)時(shí)，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時(shí)我們稱之為突變。

格式塔原理中的相似性也是重復(fù)中突變的一種形式。

在產(chǎn)品設(shè)計(jì)中我們運(yùn)用的突變的目的很簡單就是為了讓其更加突出，多用于區(qū)分當(dāng)前狀態(tài)、選中狀態(tài)和默認(rèn)狀態(tài)。

banner輪播

banner輪播圖上面的提示狀態(tài)會(huì)根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。

導(dǎo)航欄分類

導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。

按鈕

在登錄注冊(cè)頁面中，我們會(huì)通過大的色塊凸顯登錄按鈕，引導(dǎo)用戶快速登錄進(jìn)入到 app 里面。也減少了用戶的思考過程，符合大腦的惰性。

但是在很多 windows系統(tǒng)中，卸載軟件時(shí)會(huì)跟你玩文字游戲，會(huì)用非、否、不是等誘導(dǎo)你作出錯(cuò)誤的判斷。

feed流

feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品展現(xiàn)形式有列表、瀑布流、卡片形式。

站酷首頁 feed流里面會(huì)把內(nèi)容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點(diǎn)是推作品，當(dāng)文章出現(xiàn)時(shí)通過改變文章的排版進(jìn)行區(qū)分，重復(fù)里面又帶有變化。

3. 節(jié)奏感

多少元素排列可以形成節(jié)奏感，一般來說是3個(gè)或3個(gè)以上，兩個(gè)你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個(gè)或3個(gè)以上整齊的排列就會(huì)形成一種節(jié)奏感。

左右滑動(dòng)

（如圖來自u(píng)istar）界面中三個(gè)書籍整齊的排列在一起，可以通過左右滑動(dòng)來獲取更多的書籍。在使用左右滑動(dòng)效果時(shí)，應(yīng)考慮元素的數(shù)量，盡量不要超過10個(gè)以上。

列表頁

（如圖來自u(píng)istar）列表頁面整齊的排列在一起有一定的節(jié)奏感，通過改變 icon 的配色來豐富畫面。

4. 韻律

元素在排列的過程中有形狀、顏色、大小、不透明度等有規(guī)律的變化就形成了一種韻律感。在動(dòng)效上主要還是通過位移、放大縮小、旋轉(zhuǎn)、不透明等變化來制作界面動(dòng)畫。

最美有物

最美有物app 的畫報(bào)界面中，通過改變每個(gè)界面的大小比例有序的排列在一起，通過上下滑動(dòng)可以快速瀏覽標(biāo)題，進(jìn)行查找翻閱，整個(gè)過程很流暢，整個(gè)界面有流動(dòng)性和韻律感。

圖表

圖表在設(shè)計(jì)的時(shí)候通過不同顏色來區(qū)分不同的時(shí)間段，線條錯(cuò)落有致的排列增加了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個(gè)作品都是通過色彩按照紅橙黃綠青藍(lán)紫規(guī)律運(yùn)用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。

重復(fù)在動(dòng)效中如何運(yùn)用才會(huì)有韻律感？

界面動(dòng)效中主要分成當(dāng)前狀態(tài)動(dòng)效變化和轉(zhuǎn)場動(dòng)效變化，界面中的元素a1對(duì)b1、a2對(duì)b2、a3對(duì)b3信息對(duì)等，能幫助界面做出很有韻律感的動(dòng)效。

二、總結(jié)

重復(fù)可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強(qiáng)對(duì)畫面的記憶。

重復(fù)、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當(dāng)中的，幾種不同的美感可以同時(shí)存在的，只不過它適應(yīng)不同人群的審美能力，審美能力高一點(diǎn)的更喜歡一些變化，審美能力相對(duì)基礎(chǔ)更喜歡簡單的重復(fù)。

所以畫面中不斷出現(xiàn)同樣的元素這叫重復(fù)，而在很多重復(fù)里面突然出現(xiàn)一個(gè)變化這叫突變，相同元素整齊的排列在一起這叫節(jié)奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。

藍(lán)藍(lán)設(shè)計(jì)( bouu.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ì)師的現(xiàn)狀

1. 設(shè)計(jì)師已經(jīng)開始被人工智能取代

2018年緊跟2017，是人工智能重點(diǎn)發(fā)力的一年，關(guān)于「人工智能會(huì)完全取代設(shè)計(jì)師」的話語層出不窮，很多從業(yè)者倍感危機(jī)。

崔校長表示，AI 時(shí)代是真的來了，設(shè)計(jì)師也開始被人工智能所取代。

現(xiàn)在，很多負(fù)責(zé)垂直業(yè)務(wù)的運(yùn)營設(shè)計(jì)師已經(jīng)參與到智能體系建設(shè)中，建設(shè)素材庫、設(shè)定配色、排版規(guī)則和標(biāo)準(zhǔn)，幫助訓(xùn)練 AI 等。

甚至美團(tuán)點(diǎn)評(píng)也開發(fā)了可以做 Banner 的智能設(shè)計(jì)系統(tǒng)，不光可以做 Banner，今年內(nèi)還可以自動(dòng)生成活動(dòng)主頁和簡單 H5 頁面，而且是多品類覆蓋，包括餐飲、休娛、麗人等。

相應(yīng)的，設(shè)計(jì)部門原先計(jì)劃申請(qǐng)的運(yùn)營設(shè)計(jì)師人數(shù)就減少，甚至不新增了。

盡管 AI 的強(qiáng)勢沖擊很嚇人，但是設(shè)計(jì)師工作中，例如設(shè)計(jì)師對(duì)目標(biāo)受眾的理解，現(xiàn)階段是沒有機(jī)器可以替代的，頂尖設(shè)計(jì)師的專業(yè)技能在沖擊之下，反而會(huì)更加突出、顯眼。

2. 國內(nèi)設(shè)計(jì)師普遍話語權(quán)不高

在國外，很多優(yōu)秀的公司都是設(shè)計(jì)驅(qū)動(dòng)，而國內(nèi)設(shè)計(jì)師普遍話語權(quán)不高。

針對(duì)這個(gè)現(xiàn)象，崔校長認(rèn)為，實(shí)際上國外很多「設(shè)計(jì)驅(qū)動(dòng)」的公司，本質(zhì)上是 CEO 驅(qū)動(dòng)，有一個(gè)重視用戶體驗(yàn)的 CEO，那么全公司做事都會(huì)重視用戶體驗(yàn)。實(shí)質(zhì)上是 CEO 在驅(qū)動(dòng)，設(shè)計(jì)僅僅是執(zhí)行。

而在國內(nèi)，行業(yè)環(huán)境沒有那么舒服，特別是偏傳統(tǒng)的公司，高管層對(duì)用戶體驗(yàn)的價(jià)值認(rèn)知非常弱，所以才會(huì)有設(shè)計(jì)師話語權(quán)低的問題。

如果要解決這個(gè)「歷史難題」：

• 首先，設(shè)計(jì)團(tuán)隊(duì)本身要對(duì)用戶體驗(yàn)有清晰正確的認(rèn)識(shí)，不能唯設(shè)計(jì)、唯用戶體驗(yàn)論；
• 然后，通過專業(yè)手段，既保障了用戶體驗(yàn)，又良好的解決了商業(yè)問題，

那么一定是可以在業(yè)務(wù)團(tuán)隊(duì)那邊贏得認(rèn)可的。

有了實(shí)際案例證明價(jià)值，下一步就可以做一些跨團(tuán)隊(duì)的用戶體驗(yàn)概念普及，去提供相關(guān)的認(rèn)知度。

美團(tuán)點(diǎn)評(píng)是一個(gè)高管層很重視用戶體驗(yàn)的公司。在美團(tuán)點(diǎn)評(píng)，用戶體驗(yàn)部的價(jià)值是可以得到足夠認(rèn)可的。

在這樣的情況下，大家依然會(huì)努力拓展自己的價(jià)值空間，會(huì)突破邊界，比如說交互設(shè)計(jì)師會(huì)做一些用戶研究和產(chǎn)品分析相關(guān)的事情。

項(xiàng)目產(chǎn)品 Leader 只需提供一個(gè)產(chǎn)品目標(biāo)，而在「戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層」五個(gè)層面的分析研究和輸出工作，交互設(shè)計(jì)師都可以完成，產(chǎn)出一個(gè)完整的項(xiàng)目提案報(bào)告。

由此可見，設(shè)計(jì)工作者只要有實(shí)際案例證明價(jià)值，得到 Leader 的認(rèn)可，加上持之以恒的拓展自身價(jià)值，提高自身話語權(quán)不是問題。

3. 對(duì)產(chǎn)品設(shè)計(jì)的認(rèn)識(shí)還停留在圖形界面

很多剛工作的設(shè)計(jì)師擺脫不了專業(yè)的束縛，認(rèn)為設(shè)計(jì)只是圖形的搭建，沒有更多思考。

對(duì)此，工作經(jīng)驗(yàn)豐富，且閱人無數(shù)的崔校長表示，這是一個(gè)普遍現(xiàn)象，也是一個(gè)正常的現(xiàn)象。

在社會(huì)化精細(xì)分工的時(shí)代，設(shè)計(jì)師從專業(yè)入手，自然而然地，一開始認(rèn)知會(huì)局限在圖形界面上。隨著專業(yè)級(jí)別的提升，會(huì)擴(kuò)大認(rèn)知范疇，看到界面之外的東西。這是基本規(guī)律，沒有捷徑。

古語說：

不謀全局者，不足謀一域。

設(shè)計(jì)師應(yīng)該有意識(shí)去突破邊界，這是正確的方向?，F(xiàn)實(shí)中有很多人無法突破瓶頸，往往是拒絕突破邊界，思維的局限導(dǎo)致了個(gè)人價(jià)值的局限。

4. 設(shè)計(jì)的好壞沒有絕對(duì)的評(píng)判標(biāo)準(zhǔn)

大家都知道，設(shè)計(jì)是有好壞之分的，但卻不一定清楚這個(gè)評(píng)判好壞的標(biāo)準(zhǔn)。

崔校長認(rèn)為，設(shè)計(jì)師沒有一個(gè)絕對(duì)標(biāo)準(zhǔn)來評(píng)判好壞的。

在商業(yè)團(tuán)體中，一切資源投入都是為了達(dá)成商業(yè)目的，所以能幫助達(dá)成這個(gè)目的的設(shè)計(jì)就是好設(shè)計(jì)，這是一個(gè)評(píng)判標(biāo)準(zhǔn)。而具體的標(biāo)準(zhǔn)，根據(jù)團(tuán)隊(duì)的商業(yè)目的差異，有很大區(qū)別。

在商業(yè)團(tuán)體中，用戶體驗(yàn)是實(shí)現(xiàn)商業(yè)目的的一種手段，脫離商業(yè)目的，講純粹的用戶體驗(yàn)就是耍流氓。

只有擺正了這個(gè)認(rèn)識(shí)，在職場中就更容易獲得成功。

二、設(shè)計(jì)師的突破

1. 保障用戶體驗(yàn)是第一標(biāo)準(zhǔn)

現(xiàn)在，很多人都在倡導(dǎo)，設(shè)計(jì)規(guī)范化、組件化，這種趨勢是有利有弊的。

針對(duì)這個(gè)趨勢，崔校長建議，不能唯規(guī)范唯組件論。雖然規(guī)范化、組件化這類比較基本的設(shè)計(jì)增效手段，可以明顯提升基層效率和基礎(chǔ)質(zhì)量，但是規(guī)范和組件只能保障底線，無法拉高設(shè)計(jì)質(zhì)量的上限。

比如有的設(shè)計(jì)師會(huì)跟產(chǎn)品說，我們的規(guī)范如此，所以只能這么設(shè)計(jì)，這是錯(cuò)的，規(guī)范不是一刀切的標(biāo)準(zhǔn)，保障用戶體驗(yàn)才是第一標(biāo)準(zhǔn)。

該用規(guī)范組件的時(shí)候就用，如果場景上不適用也不能硬用。

2. 用戶體驗(yàn)設(shè)計(jì)，不僅僅要把界面做好看

作為用戶體驗(yàn)設(shè)計(jì)師，要有把界面做美觀的能力。

除此之外，崔校長還說：

界面好看是最表層的設(shè)計(jì)體現(xiàn)，真正的用戶體驗(yàn)遠(yuǎn)不止于此。

《用戶體驗(yàn)的要素》所描述的「戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層」五個(gè)要素，要做到都充分、專業(yè)、邏輯連貫，最終才能獲得一個(gè)在線產(chǎn)品的良好用戶體驗(yàn)。

在構(gòu)建一個(gè)良好的用戶體驗(yàn)時(shí)，更重要的是表現(xiàn)層背后的商業(yè)體系、產(chǎn)品目標(biāo)、用戶心智模型，對(duì)設(shè)計(jì)依據(jù)做充分的研究和挖掘才是根本。

3. 方法論為主導(dǎo)，找靈感

遭遇設(shè)計(jì)瓶頸時(shí)，找靈感也是有技巧的，有一部分設(shè)計(jì)師，憑空想靈感，這是低效的。

崔校長建議，以方法論為主導(dǎo)，找靈感。

崔校長說：

設(shè)計(jì)的目的是為了解決問題，應(yīng)該以理性思維為主導(dǎo)，去定義問題，分析問題，解決問題。如果以 Idea 導(dǎo)向，也就是通過試錯(cuò)來驗(yàn)證有效 Idea，這跟碰運(yùn)氣差不多，效率非常低下。

在美團(tuán)點(diǎn)評(píng)上海用戶體驗(yàn)部的設(shè)計(jì)路徑中，總體是以方法論來主導(dǎo)，僅在方案的表現(xiàn)層，會(huì)運(yùn)用頭腦風(fēng)暴和素材搜集的方式幫助激發(fā)靈感、發(fā)散方案。

4. 注重自身和團(tuán)隊(duì)的共同成長

在學(xué)習(xí)、成長上，每個(gè)工作者都更注重自我的成長，這是必然的，設(shè)計(jì)師也不例外。

但工作究其根本，是自我成長、團(tuán)隊(duì)成長、產(chǎn)品成長的結(jié)合，優(yōu)秀的團(tuán)隊(duì)一定都是非常注重這三方面成長的，美團(tuán)點(diǎn)評(píng)也是如此。

崔校長說，美團(tuán)點(diǎn)評(píng)有涵蓋各個(gè)專業(yè)的互聯(lián)網(wǎng)+大學(xué)，在設(shè)計(jì)方面設(shè)有設(shè)計(jì)學(xué)院，沉淀了很全很豐富的方法論和案例，同時(shí)公司還有復(fù)盤文化，大家會(huì)從每次的項(xiàng)目實(shí)踐中，總結(jié)經(jīng)驗(yàn)、獲得知識(shí)。

崔校長建議，設(shè)計(jì)師應(yīng)該嘗試「跨界」，個(gè)人能在其中飛速成長，這是經(jīng)驗(yàn)之談。

校長本人是學(xué)計(jì)算機(jī)專業(yè)的，做過產(chǎn)品經(jīng)理，最后在設(shè)計(jì)領(lǐng)域深耕。

這樣的綜合角色幫助他更宏觀、更完整地去看產(chǎn)品體驗(yàn)搭建的過程；能夠更好的理解上游產(chǎn)品角色到底關(guān)心什么，下游開發(fā)角色需要什么；能夠更好的跟相關(guān)角色溝通，并讓設(shè)計(jì)發(fā)揮更大的價(jià)值。

所以設(shè)計(jì)師不僅要注重外部學(xué)習(xí)環(huán)境，還要注重自身的跨界、不斷拓寬邊界，自身和團(tuán)隊(duì)共同成長，這對(duì)你職業(yè)生涯的發(fā)展產(chǎn)生不可估量的價(jià)值。

5. 優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)不能沒有管理者

設(shè)計(jì)不是單打獨(dú)斗。

一個(gè)優(yōu)秀的團(tuán)隊(duì)?wèi)?yīng)該注意哪些問題呢 ?

對(duì)團(tuán)隊(duì)進(jìn)步起著關(guān)鍵性作用的管理者應(yīng)該是怎樣的呢？

對(duì)此，崔校長認(rèn)為，優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)在團(tuán)隊(duì)建設(shè)上，要有完善的管理制度、完善的專業(yè)體系、扎實(shí)的人才梯隊(duì)，在結(jié)果上要有優(yōu)秀的產(chǎn)品案例。

作為 Leader ：

• 首先，要專業(yè)過硬、學(xué)習(xí)能力強(qiáng)、格局大；
• 然后，要賦能團(tuán)隊(duì)，用你的決策力賦能，給團(tuán)隊(duì)判斷正確的方向，不走錯(cuò)路；
• 用專業(yè)能力賦能，指導(dǎo)團(tuán)隊(duì)提升專業(yè)高度；
• 用協(xié)調(diào)能力賦能，讓團(tuán)隊(duì)運(yùn)作更。

剛剛成為 leader 的同學(xué)，可能會(huì)不適應(yīng)與設(shè)計(jì)師完全不同的工作模式。

對(duì)此，崔校長建議，此時(shí)你最需要注意的是思維轉(zhuǎn)換。思維轉(zhuǎn)換首先需要明確三個(gè)角色，崔校長總結(jié)為「三位一體管理模型」，分別是教練、裁判、經(jīng)理，這三者缺一不可。

• 在項(xiàng)目過程中，要發(fā)揮教練角色，進(jìn)行專業(yè)指導(dǎo)，保障設(shè)計(jì)輸出質(zhì)量，如果教練角色缺失，設(shè)計(jì)質(zhì)量難以提高，設(shè)計(jì)師成長難。
• 在評(píng)審和決策的時(shí)候，要發(fā)揮裁判角色，給出明確的結(jié)論，承擔(dān)決策責(zé)任，如果裁判角色缺失，容易變成甩鍋俠，把自己的責(zé)任丟給基層設(shè)計(jì)師，設(shè)計(jì)質(zhì)量容易失控，也會(huì)導(dǎo)致設(shè)計(jì)師壓力過大，產(chǎn)生流失。
• 最后是經(jīng)理角色，去思考團(tuán)隊(duì)建設(shè)，去選擇團(tuán)隊(duì)需要的設(shè)計(jì)師，對(duì)設(shè)計(jì)師的績效進(jìn)行判斷，識(shí)別出哪些應(yīng)該重點(diǎn)培養(yǎng)，哪些應(yīng)該淘汰換血。經(jīng)理角色缺失會(huì)導(dǎo)致吃大鍋飯的局面，團(tuán)隊(duì)能力止步不前，陷于平庸化。

6. 保持溝通

溝通，在設(shè)計(jì)師的工作內(nèi)容中占了不小的比例。

跟團(tuán)隊(duì)同事進(jìn)行合理的溝通，在一定程度上，能提高工作效率，專注設(shè)計(jì)質(zhì)量，將更多的時(shí)間放在設(shè)計(jì)本身。

對(duì)此，美團(tuán)點(diǎn)評(píng)崔校長很有發(fā)言權(quán)。

美團(tuán)點(diǎn)評(píng)上海用戶體驗(yàn)部現(xiàn)在有100多位設(shè)計(jì)師，對(duì)接的產(chǎn)品經(jīng)理在500人以上，對(duì)接的程序員在1000人以上，而且上下游部門都是分散的。

產(chǎn)品部門和研發(fā)部門都是多個(gè)的，不像 UED ，只有一個(gè)部門統(tǒng)一管理，那么溝通方面確實(shí)有很大的難度。

崔校長表示，為了團(tuán)隊(duì)溝通更，美團(tuán)點(diǎn)評(píng)內(nèi)部要求 Leader 跟相關(guān)部門的 Leader 建立良好的溝通機(jī)制，保障信息通暢；然后，用設(shè)計(jì)流程規(guī)范，來要求設(shè)計(jì)師跟自己的上下游對(duì)接方充分溝通；最后，團(tuán)隊(duì)風(fēng)格上推動(dòng)設(shè)計(jì)師走出去，深入上下游討論和協(xié)作，跟進(jìn)產(chǎn)品討論會(huì)，多到開發(fā)位置上確認(rèn)實(shí)現(xiàn)的細(xì)節(jié)。

崔校長還分享了一個(gè)關(guān)于溝通的小故事：

在搬了辦公區(qū)之后，產(chǎn)品的座位離設(shè)計(jì)師只有一個(gè)過道之隔，于是設(shè)計(jì)師開始有了一些「小煩惱」。產(chǎn)品經(jīng)理一有問題就隨時(shí)找設(shè)計(jì)師討論，設(shè)計(jì)師的工作總被打斷，卻不太好意思拒絕產(chǎn)品。

這是一個(gè)比較有趣的現(xiàn)象，說明產(chǎn)品跟設(shè)計(jì)師之間溝通非常緊密，而且很信任設(shè)計(jì)師的專業(yè)度，能夠一起有效地解決問題。

這個(gè)場景在團(tuán)隊(duì)內(nèi)部時(shí)有發(fā)生，這個(gè)「煩惱」對(duì)設(shè)計(jì)師而言，可以說是不可避免的。

對(duì)此，崔校長建議設(shè)計(jì)師要做好時(shí)間管理，掌握好溝通的時(shí)間安排，不能影響了總體的設(shè)計(jì)效率。

總結(jié)

設(shè)計(jì)不設(shè)限，是每一個(gè)設(shè)計(jì)師都應(yīng)該思考的方向。

只有自己不甘現(xiàn)狀，勇敢突破，才能以更高的速度進(jìn)步，才能在互聯(lián)網(wǎng)高速發(fā)展的現(xiàn)在，甚至未來，成為最后的贏家。

藍(lán)藍(lán)設(shè)計(jì)( bouu.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)這里

本文總結(jié)了字體設(shè)計(jì)的重要性、界面常用字體推薦以及國內(nèi)外權(quán)威設(shè)計(jì)體系中對(duì)字號(hào)、行高、字重的選擇和設(shè)置。如果你想對(duì)界面字體設(shè)計(jì)有更深一步地了解和運(yùn)用，本文將會(huì)提供一些幫助。

一、字體

1. 字體設(shè)計(jì)的重要性

輔助信息傳遞

文字是信息內(nèi)容的載體，是記錄思想、交流思想、承載語言的圖像或符號(hào)，而字體則是文字的外在形式特征，是文字的視覺風(fēng)格表現(xiàn)。合適的字體可以輔助文字，將信息清晰、準(zhǔn)確地傳遞給用戶。

表達(dá)情感體驗(yàn)

字體的藝術(shù)性體現(xiàn)在其完美的外在形式與豐富的內(nèi)涵之中。在文字信息傳遞給用戶之前，人們首先感受到的是字體帶來的視覺魅力以及情感表達(dá)。

塑造品牌形象

不同字體有著不同的風(fēng)格特征: 有的字體優(yōu)美清新、線條流暢；有的字體造型規(guī)整、充滿張力；還有的字體生動(dòng)活潑、色彩明快……根據(jù)產(chǎn)品的屬性選擇正確的字體，便能有效地塑造品牌形象。

2. 界面常用字體推薦

字體的選擇是由產(chǎn)品屬性或品牌特性的關(guān)鍵詞而決定。一般中文字體種類分為：黑體、宋體、仿宋、楷體等；英文字體種類分為：無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦

線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統(tǒng)默認(rèn)中文字體是「蘋方PingFang」，Android 系統(tǒng)中文字體使用「思源黑體Noto Sans CJK」。

介紹下「思源黑體」這款字體，它是由 Google 和 Adobe 合作開發(fā)出來的，風(fēng)格介于現(xiàn)代和傳統(tǒng)之間，可以廣泛用于多種途徑，比如手機(jī)、平板、桌面的用戶界面、網(wǎng)頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和的信息閱讀體驗(yàn)，并且是免費(fèi)的。

英文字體推薦

線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統(tǒng)默認(rèn)英文字體為「San Francisco」，Android 系統(tǒng)默認(rèn)英文字體為「Roboto」。

Helvetica 是一種被廣泛使用的西文字體，1957年由瑞士字體設(shè)計(jì)師設(shè)計(jì)，微軟常用的 Arial 字體也來自于它。

作為一款經(jīng)典的無襯線字體，Helvetica 在平面設(shè)計(jì)和商業(yè)上非常普及和成功，被認(rèn)為是現(xiàn)代主義設(shè)計(jì)理念的典范，其簡潔樸素的線條風(fēng)格非常受追捧。

數(shù)字字體推薦

線上數(shù)字字體推薦使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于1995年的德國，無襯線字體，易用耐看、字形開放，是設(shè)計(jì)師最愛的幾類字體之一，適合顯示比較長的大號(hào)數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。

Core Sans D 是由韓國設(shè)計(jì)師設(shè)計(jì)的一款無襯線字體，支持 Thin、Light、Regular、Medium、Bold 等類型字重，對(duì)大號(hào)數(shù)字的顯示效果不錯(cuò)，不過它是收費(fèi)字體。

Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴(yán)謹(jǐn)、沒有多余的修飾外，還是 Helvetica 的升級(jí)版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺(tái)數(shù)字字體使用。

二、字號(hào)

1. 關(guān)于字號(hào)

字號(hào)是界面設(shè)計(jì)中另一個(gè)重要的元素，字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。

2. 字號(hào)的選擇

字號(hào)的選擇，可以遵循 iOS 、Material Design、Ant Design 等國內(nèi)外權(quán)威設(shè)計(jì)體系中的字號(hào)規(guī)則，也可以根據(jù)產(chǎn)品的特點(diǎn)自行定義。

iOS 字號(hào)規(guī)則

在 iOS11 系統(tǒng)中，使用 San Francisco 作為系統(tǒng)英文字體，包含了以下幾種字號(hào)的文本樣式：

• 11pt / 12pt Caption 說明文字
• 13pt Footnote 腳注
• 15pt Subhead 副標(biāo)題
• 16pt Callout 標(biāo)注
• 17pt Body / Headline 正文 / 模塊標(biāo)題
• 20pt / 22pt / 28pt Title 頁面標(biāo)題
• 34pt Large Title 頁面大標(biāo)題

需要注意的是，San Francisco 字體有兩種模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號(hào)小于 20pt 的文字，展示模式適用于字號(hào)大于等于 20pt 的文字。

Material Design 字號(hào)規(guī)則

在 Material Design 設(shè)計(jì)體系中，使用 Roboto 作為英文字體，規(guī)定了以下文字排版的常用字號(hào)：

• 12sp 小字提示
• 14sp（桌面端 13sp）正文 / 按鈕文字
• 16sp（桌面端 15sp）小標(biāo)題
• 20sp Appbar 文字
• 24sp 大標(biāo)題
• 34sp / 45sp / 56sp / 112sp 超大號(hào)文字

長篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。

Ant Design 字號(hào)規(guī)則

Ant Design 受到5音階以及自然律的啟發(fā)定義了10種不同的字號(hào)，從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號(hào)為 14px，其余字號(hào)的選擇可根據(jù)具體情況進(jìn)行自由的定義，盡量控制在3-5種之間，保持克制的原則。

Kiwi 字號(hào)規(guī)則

Kiwi 是餓了么的中后臺(tái)設(shè)計(jì)語言，致力于打造出能夠「了解、洞察、溫暖、激勵(lì)用戶」的產(chǎn)品。

在 Kiwi Web 中，規(guī)定最小字號(hào)為 12px，主要文本字號(hào)為 14px，最大字號(hào)為 46px。

三、行高

1. 關(guān)于行高

行高可以理解為一個(gè)包裹在字體外面的無形的框，字體距框的上下空隙為半行距。

參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。

西文的基本行高通常是字號(hào)的 1.2 倍左右。而中文因?yàn)樽址軐?shí)且高度一致，沒有西文的上伸部和下延部來創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5至2倍甚至更大。

2. 行高的設(shè)置

iOS 行高設(shè)置

Apple 官方的 iOS 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（@1x倍率）：

Fluent Design 行高設(shè)置

Microsoft 官方的 Fluent Design 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（使用字體 Segoe UI）：

Ant Design 行高設(shè)置

螞蟻金服的 Ant Design 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（優(yōu)先使用系統(tǒng)默認(rèn)字體）：

行高計(jì)算公式：L = F + 8。其中 L 是行高（Line Height），F(xiàn) 是字號(hào)（Font Size），F(xiàn) ≥ 12。

四、字重

1. 關(guān)于字重

字重是指字體的粗細(xì)，一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來越多的產(chǎn)品界面需要通過字重來拉開信息層次，當(dāng)下主流趨勢 iOS11 大標(biāo)題風(fēng)格就是通過字重來拉開信息層級(jí)的。

不同的字重體現(xiàn)不同的層級(jí)關(guān)系和情緒感受，細(xì)的字體給人以細(xì)膩、輕盈的感覺，而粗體則給人莊重和嚴(yán)肅的感受，所以在定義字體規(guī)范時(shí)候需要考慮什么場景用什么字重，從而保持良好閱讀體驗(yàn)。

2. 字重的設(shè)置

字重的設(shè)置同樣基于秩序、穩(wěn)定、克制的原則。為了統(tǒng)一整體效果，一般情況下使用兩種字重為佳，例如只出現(xiàn) Regular 以及 Medium 這兩種字體粗細(xì)，特殊情況下可以使用更粗或更細(xì)的字重進(jìn)一步拉開信息層級(jí)。

當(dāng)字號(hào)大小為 12-18pt 時(shí)，使用 Regular；20-26pt 時(shí)，使用 Light；28-34pt 時(shí)，使用 Thin；當(dāng)字號(hào)大小超過 34pt 時(shí)，建議使用 Ultralight。

以上是按字號(hào)與字重反比的規(guī)則設(shè)置，即字號(hào)越大，字重越輕。當(dāng)然也可以按正比的規(guī)則或者自定義規(guī)則，具體還是要根據(jù)產(chǎn)品的定位和用戶的特點(diǎn)來設(shè)置，以保證信息層級(jí)清晰明了為準(zhǔn)。

藍(lán)藍(lán)設(shè)計(jì)( bouu.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)這里

一、團(tuán)隊(duì)工作，妥協(xié)是一門學(xué)問

一個(gè)產(chǎn)品最后出來的樣子，是各種妥協(xié)的結(jié)果。

互聯(lián)網(wǎng)產(chǎn)品和平面類型的設(shè)計(jì)工作最大的區(qū)別，可能是在于工種的細(xì)分上。之前做平面相關(guān)的工作（品牌，視覺，電商），自己一個(gè)人可能就充當(dāng)了基本上除了印刷以外的所有主要工作，既要和客戶溝通，了解用戶需求和想法以及存在的問題，又要思考和制定設(shè)計(jì)方案，向客戶展示設(shè)計(jì)提案，又要執(zhí)行獲得認(rèn)可的設(shè)計(jì)提案，保證設(shè)計(jì)成果符合客戶預(yù)期并落地，如果是最后要交付印刷品，可能還要跟進(jìn)印刷的過程，保證印刷物料的質(zhì)量。好像一個(gè)人把所有的活都要干了。

但是互聯(lián)網(wǎng)產(chǎn)品不太一樣，首先最大的問題是如何讓方案落地的過程，這個(gè)工作一般來說沒有辦法一個(gè)人干（除非是牛到精通前端后端和客戶端的各種開發(fā)語言的全棧設(shè)計(jì)師），因?yàn)闀?huì)涉及到程序開發(fā)，有一些設(shè)計(jì)師，就算你厲害了，你能把產(chǎn)品交互和 UI 都搞定，然后你還會(huì)（web端）前端開發(fā)語言或者客戶端開發(fā)語言，但是你還是需要一個(gè)能寫后臺(tái)的工程師，所以，正常情況下，互聯(lián)網(wǎng)產(chǎn)品的開發(fā)，是環(huán)環(huán)相扣的，至少都需要兩到三個(gè)人來配合工作。這還是比較小型的產(chǎn)品，如果是復(fù)雜的產(chǎn)品，那每個(gè)環(huán)節(jié)都必須細(xì)分出來，而且可能每個(gè)環(huán)節(jié)都不止一個(gè)人，產(chǎn)品，交互，UI，前端，客戶端，后臺(tái)，因?yàn)槊總€(gè)環(huán)節(jié)的工作量都太大了！

△ 圖源：Nick Taylor

既然有這么多的分工，那必然會(huì)導(dǎo)致不同的工作崗位看問題的點(diǎn)都是不一樣的。舉個(gè)例子：經(jīng)常會(huì)聽到開發(fā)說，明明用 A 就可以，為什么非要用 B？一開始的時(shí)候，其實(shí)我真的不太理解，但是后來慢慢熟悉了開發(fā)的工作之后（尤其是自己開始學(xué)習(xí)一些代碼知識(shí)之后）慢慢理解了，其實(shí)開發(fā)在實(shí)現(xiàn)我們的設(shè)計(jì)的時(shí)候，最關(guān)注的是功能的實(shí)現(xiàn)，而功能就是各種交互的集合，一個(gè)頁面上，如果交互不變，功能不變，只是改一些視覺上的樣式，這是相對(duì)來說簡單的，如果牽扯到交互的調(diào)整和修改，那個(gè)工作量可能就成倍增加，所謂牽一發(fā)而動(dòng)全身。所以我們?cè)谠O(shè)計(jì)的時(shí)候，更要注意模塊和組件的一致性和可復(fù)用性，這樣不僅可以提高我們的設(shè)計(jì)質(zhì)量，也可以有效的減少開發(fā)的工作量，提高開發(fā)的效率。

同時(shí)，開發(fā)在實(shí)現(xiàn)的第一個(gè)版本的產(chǎn)品中一般很多時(shí)候視覺上會(huì)有各種各樣的問題，開發(fā)人員在開發(fā)過程中，為了提率，不太在意還原 UI 的細(xì)節(jié)，比如這個(gè)間距是多少，那個(gè)間隔是幾個(gè)像素，所以最后產(chǎn)品上線前都會(huì)有 UI走查的環(huán)節(jié)，在這個(gè)過程中就是要一點(diǎn)一點(diǎn)地改進(jìn)產(chǎn)品UI 實(shí)現(xiàn)中不符合設(shè)計(jì)稿的地方，這個(gè)時(shí)候才是我們?cè)O(shè)計(jì)師關(guān)注所謂的每一個(gè)像素的時(shí)候，在那之前，還是先關(guān)注功能和流程的實(shí)現(xiàn)吧。

其實(shí)不僅僅是因?yàn)槊總€(gè)崗位的職能不同會(huì)導(dǎo)致很多不同的意見，有時(shí)候也可能是因?yàn)槊總€(gè)人的審美或者是性格的問題，也會(huì)產(chǎn)生不少的摩擦，所以，學(xué)會(huì)妥協(xié)，在妥協(xié)中堅(jiān)持是團(tuán)隊(duì)合作中的一門大學(xué)問。

二、把自己定位為產(chǎn)品設(shè)計(jì)師

以攻為守，讓自己從更全面的視角去思考 UI 的工作。

△ 圖源：Nick Taylor

一個(gè) UI設(shè)計(jì)師的未來在哪里？有時(shí)候我會(huì)思考這樣的問題，有可能是因?yàn)槲乙呀?jīng)30了。這一兩年，危機(jī)感很重，每次看到非科班群里各種90后、95后的年輕設(shè)計(jì)師，心生羨慕的同時(shí)也充滿了莫名的壓力。

這半年多因?yàn)樽约簣F(tuán)隊(duì)中沒有專門的交互設(shè)計(jì)師，所以我就同時(shí)肩負(fù)了大部分交互設(shè)計(jì)的工作。一開始做交互設(shè)計(jì)的東西，其實(shí)自己的認(rèn)識(shí)還是很淺薄的，雖然平時(shí)自己也看很多用戶體驗(yàn)，設(shè)計(jì)心理學(xué)、交互設(shè)計(jì)等等的書籍，但是真的上手干活，還是會(huì)經(jīng)常一頭霧水，因?yàn)榻换ピO(shè)計(jì)太需要縝密的邏輯思維了。市場上常見的 app 的標(biāo)準(zhǔn)化的交互設(shè)計(jì)因?yàn)槎加懈偲穮⒖?，還是相對(duì)來說簡單的，在我看來比較難的是工具型的產(chǎn)品和 CMS（內(nèi)容管理系統(tǒng)后臺(tái)），尤其是 CMS 的交互設(shè)計(jì)，如果設(shè)計(jì)不好，分分鐘讓用的人感覺要崩潰。交互設(shè)計(jì)是一門很深的學(xué)問，也是 UI設(shè)計(jì)師必須去了解和熟知的，它絕不是簡單的頁面之間的跳轉(zhuǎn)，也不僅是酷炫的動(dòng)效，它是能讓產(chǎn)品的使用體驗(yàn)得到質(zhì)的飛躍的關(guān)鍵。

如果把一個(gè)產(chǎn)品比作一個(gè)人，那產(chǎn)品本身的方向是這個(gè)人的靈魂和思想，交互是這個(gè)人的舉止和修養(yǎng)，而 UI 是一個(gè)人外形和穿衣品味以及整體氣質(zhì)，優(yōu)秀的人，三者缺一不可，三者是共生的關(guān)系。

在我看來。成為一個(gè)產(chǎn)品設(shè)計(jì)師，了解產(chǎn)品思維，熟悉交互設(shè)計(jì)，精通視覺設(shè)計(jì)，這樣的設(shè)計(jì)師覺得才是以后互聯(lián)網(wǎng)設(shè)計(jì)師的標(biāo)配。高配是什么？我覺得至少是全棧設(shè)計(jì)師吧。這就像平面設(shè)計(jì)領(lǐng)域，不懂印刷各種工藝和材質(zhì)的，都稱不上好的平面設(shè)計(jì)師。好的建筑設(shè)計(jì)師，也得懂很多建筑學(xué)和建筑材料的知識(shí)。

我在這半年的實(shí)際工作中，雖然第一個(gè)產(chǎn)品的概念定義和原型我沒有參加討論（我去的時(shí)候已經(jīng)定下來了），但是我還是嘗試去思考這個(gè)產(chǎn)品到底意義在哪里，目標(biāo)用戶是哪些人，解決了目標(biāo)用戶的什么需求，他們的使用場景有哪些。我一直都認(rèn)為互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)工作始終更是貫穿著設(shè)計(jì)思維，只是每個(gè)具體的分工的側(cè)重點(diǎn)不同，你可以不精于產(chǎn)品需求的整理和篩選，但你是得明白你你所設(shè)計(jì)的是為了滿足什么需求，有目標(biāo)和方向才能做出更好的設(shè)計(jì)，你連問題都不知道，怎么去解決問題。設(shè)計(jì)的工作，終究都是為了解決問題，不了解問題的來龍去脈，便不能梳理出問題的本質(zhì)，更無法做出好的設(shè)計(jì)去解決問題。

把自己定位為產(chǎn)品設(shè)計(jì)師，稍微多花點(diǎn)心思去思考產(chǎn)品，去學(xué)習(xí)交互，別讓自己的眼界停留在只畫幾個(gè)好看界面，畫幾套特別的圖標(biāo)，不然你早晚要被這個(gè)行業(yè)淘汰，不對(duì)，是被其他更優(yōu)秀的設(shè)計(jì)師淘汰。

三、牢記UCD，但別太天真

很多公司并不真的在意所謂的 UCD。

△ 圖源：Nick Taylor

我相信大部分的設(shè)計(jì)師還是在中小型的企業(yè)里工作，這樣的企業(yè)的設(shè)計(jì)工作有一個(gè)很明顯的特征，就是以主管或者老板的喜好為第一滿足目標(biāo)，所有的設(shè)計(jì)方案都會(huì)以老板的喜好為基準(zhǔn)參考，只有老板說 ok 才算是 ok。當(dāng)然，我們公司也是，畢竟我們也是一個(gè)小型公司，而且老板的個(gè)人風(fēng)格特別強(qiáng)烈。所以在做第一款 app 時(shí)，僅僅是首屏的視覺方案，都出了不止七八個(gè)版本。在進(jìn)入更加深入的其他頁面的設(shè)計(jì)環(huán)節(jié)時(shí)，我們也沒有去做什么用戶場景分析或者用戶需求分析之類的工作，都是依照著老板的一些想法去一步一步的實(shí)現(xiàn)，當(dāng)然，這并不是一定是錯(cuò)的，只是大部分公司的設(shè)計(jì)工作的現(xiàn)狀，這樣也可能會(huì)有好的產(chǎn)品，只是可能性更低而已。很多公司沒有很專業(yè)的設(shè)計(jì)團(tuán)隊(duì)，也沒有很專業(yè)的產(chǎn)品經(jīng)理，更沒有很專業(yè)的產(chǎn)品設(shè)計(jì)師，做很多設(shè)計(jì)決策的時(shí)候基本上都是靠拍腦袋，或者依靠個(gè)人的生活或者設(shè)計(jì)經(jīng)驗(yàn)，在不知不覺中，就把 UCD 的設(shè)計(jì)方法忘在腦后了，UI設(shè)計(jì)師只是負(fù)責(zé)機(jī)械式美化下每一個(gè)元素，做一下視覺風(fēng)格的統(tǒng)一，變成了一個(gè)不折不扣的界面美化師。

但我們 UI設(shè)計(jì)師不能只是美化一下界面，雖然我們可以沒有專業(yè)的設(shè)計(jì)團(tuán)隊(duì)，沒有很厲害的產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師，但是我們也要在設(shè)計(jì)過程中不斷地提醒自己，要以用戶體驗(yàn)為中心，用戶在這個(gè)界面需要的是什么，什么信息對(duì)他來說是最重要的，怎么樣設(shè)計(jì)可以減少用戶的瀏覽負(fù)擔(dān)，提高用戶的使用效率，雖然可能我們思考的方向和結(jié)果的不一定對(duì)，但是只要去想，才能不斷強(qiáng)化我們自己的這個(gè)設(shè)計(jì)思維，避免自己產(chǎn)出千篇一律的設(shè)計(jì)方案，提高自己的設(shè)計(jì)能力。如果能把每一項(xiàng)工作都盡百分之120的努力去完成，那就算你現(xiàn)在是在一個(gè)微不足道的小公司，你也一定能成長為一個(gè)設(shè)計(jì)大牛。

四、堅(jiān)持學(xué)習(xí)，不斷提高審美和眼界

現(xiàn)在作品不好，沒問題，如果一直都不好，那就是你自己真的出了問題。

△ 圖源：Nick Taylor

我以前很羨慕那種設(shè)計(jì)師，年紀(jì)輕輕就進(jìn)大公司，或者20歲不到作品就讓人感覺眼前一亮。對(duì)于我這種非科班的，大學(xué)畢業(yè)7年了，認(rèn)真靜下心來干設(shè)計(jì)才3年多，似乎還沒開始跑，就已經(jīng)被人甩開一大截了。

看起來似乎很糟糕，但其實(shí)真不是，你所經(jīng)歷的一切艱難，如果挺過去了，那就是你人生寶貴的財(cái)富。那應(yīng)該怎么做呢？只能不斷努力地去縮小和別人的差距，不對(duì)，不是和別人的差距，是和自己對(duì)自己期望值的差距。

那么提高審美和眼界就是最基本要做的事情，同時(shí)我也認(rèn)為這是作為一個(gè)設(shè)計(jì)師需要持續(xù)不斷提高的最基本的能力。審美和眼界的提高是需要日積月累的，軟件操作和技法可以短時(shí)間內(nèi)突擊學(xué)習(xí)，也可以臨時(shí)偷師，但是如果你審美不行，你永遠(yuǎn)都不可能做出好的設(shè)計(jì)，因?yàn)樵谀愕难劾锏母呒?jí)和在高水平設(shè)計(jì)師眼里的高級(jí)，可能是天差地別。審美和眼界就像是一種設(shè)計(jì)師的隱藏屬性，會(huì)在你日常的設(shè)計(jì)當(dāng)中不自然的流露出來，你不需要去調(diào)動(dòng)它，它自然而然的就會(huì)在你的工作中不斷地幫助你。

但是往往很多設(shè)計(jì)師不把這個(gè)當(dāng)一回事。其實(shí)你只要每天堅(jiān)持不停地看優(yōu)秀的作品，堅(jiān)持幾個(gè)月或者半年一年的，你的審美肯定都會(huì)有質(zhì)的飛躍。以前你覺得設(shè)計(jì)很棒的作品，可能你以后看起來就會(huì)嗤之以鼻了。

看作品這件事其實(shí)很簡單，你只要每天打開 behance，打開首頁推薦的十個(gè)作品，花個(gè)十幾二十分鐘細(xì)細(xì)看下來，覺得好的就分類收藏一下，以備以后可以用來做設(shè)計(jì)的參考。

但是，關(guān)鍵是堅(jiān)持。

五、重拾英語，不讓自己做井底之蛙

別總看國內(nèi)的設(shè)計(jì)網(wǎng)站了，外面的世界更精彩。

為什么要重新學(xué)習(xí)英語？（我就是想萬一以后牛X了，可以混到國際舞臺(tái)上，嗯，這個(gè)可以有）

一開始決定重拾英語的契機(jī)，這還要感謝砂姐組織的翻譯小組。我也只是想試試看，能不能把英語重新?lián)炱饋?。于是?7年2月份開始我給自己定了個(gè)目標(biāo)，每個(gè)月翻一篇英語的設(shè)計(jì)類文章，很慶幸自己堅(jiān)持下來了。同時(shí)在工作中遇到的不少問題，會(huì)逼著我去看一些外文的資料，讓我覺得我必須得更努力地把英語撿起來，于是最近幾個(gè)月同時(shí)也開始背單詞，每天堅(jiān)持讀英語的設(shè)計(jì)文章，跟一開始比，感覺還是很有收獲的，看文章的速度越來越快，閱讀時(shí)的語感也越來越好（這個(gè)越來越好是相對(duì)于自己很糟糕時(shí)候的狀態(tài)）。

慢慢地，我感覺，學(xué)好英語，對(duì)于一個(gè)設(shè)計(jì)師的長遠(yuǎn)發(fā)展是很有幫助的。

如果你想去了解世界上更多優(yōu)秀設(shè)計(jì)師的想法，學(xué)習(xí)他們的經(jīng)驗(yàn)，那么就得親自去獲取第一手的信息，而不是等著其他人的翻譯，而且很多各種設(shè)計(jì)領(lǐng)域的優(yōu)秀的教材和資料都只有英文版本，如果不把英語學(xué)好，自己學(xué)到的不僅僅是很多殘缺不全的二手資料，甚至連學(xué)習(xí)的機(jī)會(huì)都沒有。把英語學(xué)好，是給自己打開通往更廣闊領(lǐng)域的鑰匙。你的眼界，決定了你成就的上限。

六、接觸代碼，發(fā)現(xiàn)一個(gè)新世界

學(xué)習(xí)從來都不是件輕松愉快的事情。

做界面的同學(xué)有沒有遇到過這樣的情況：我明明是設(shè)計(jì)成這樣的，為什么開發(fā)出來之后就變成那樣了？

這就是我下定決心想學(xué)習(xí)代碼的導(dǎo)火索。我就想，為什么我不能自己學(xué)習(xí)代碼自己實(shí)現(xiàn)自己的設(shè)計(jì)么？這不是很厲害么？加上我之前也斷斷續(xù)續(xù)地對(duì)前端技術(shù)有過學(xué)習(xí)的念頭，于是一鼓作氣下定決心就開始學(xué)了。

出于想給自己開發(fā)個(gè)人網(wǎng)站的初衷，我就選擇了前端的開發(fā)語言作為我的學(xué)習(xí)內(nèi)容。我目前主要學(xué)習(xí)的是 Javascript（html 和 css 已經(jīng)學(xué)了個(gè)大概）。

一開始學(xué)習(xí)的時(shí)候真的是痛苦不堪，但是在度過了一兩個(gè)月的痛苦的煎熬之后，已經(jīng)慢慢地發(fā)現(xiàn)學(xué)習(xí)代碼的樂趣，但同時(shí)，發(fā)現(xiàn)這個(gè)坑是越來越大，感覺要學(xué)的東西是自己預(yù)想的要多太多了。雖然過程很糾結(jié)也很痛苦（我估計(jì)這種痛苦的感覺還會(huì)持續(xù)好長時(shí)間），學(xué)習(xí)代碼的過程對(duì)于提高設(shè)計(jì)師的邏輯思維確實(shí)很有幫助，因?yàn)榫幊趟季S和設(shè)計(jì)工作的思維相比，更注重邏輯性（設(shè)計(jì)工作也很注重邏輯性）。同時(shí)，多了解一些編程的知識(shí)（編程開發(fā)的語言很多，但是思維方式是類似的）對(duì)于理解開發(fā)人員的工作內(nèi)容和工作方式，也會(huì)有很大的幫助?；ヂ?lián)網(wǎng)的設(shè)計(jì)師，我覺得在學(xué)有余力的情況下，都應(yīng)該多多少少學(xué)習(xí)一些代碼的知識(shí)，因?yàn)檫@畢竟也是產(chǎn)品開發(fā)的其中的一個(gè)重要環(huán)節(jié)，你不需要擅長，但懂一些，可以讓你更好地和開發(fā)人員進(jìn)行有效的溝通，知己知彼，減少撕逼。但是不建議設(shè)計(jì)工作經(jīng)驗(yàn)較少的同學(xué)學(xué)習(xí)代碼，畢竟這需要很多的時(shí)間去學(xué)習(xí)，不要把自己變成什么都是半桶水，在不影響設(shè)計(jì)工作之余可以抽出時(shí)間的話讓自己嘗試一下，說不定你也會(huì)喜歡上編程這件事。

藍(lán)藍(lán)設(shè)計(jì)( bouu.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ì)( bouu.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è)問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？

• 可能是給你發(fā)消息的人對(duì)你來說不重要？或者消息內(nèi)容不重要，不需要立刻回復(fù)？
• 可能是你暫時(shí)特別忙，沒有時(shí)間回復(fù)？
• 也可能是你的微信關(guān)閉了消息提醒，沒有聽到手機(jī)震動(dòng)，不知道有人給你發(fā)了消息……

原因會(huì)有很多種，但是幾乎每一種原因都可以對(duì)應(yīng)到更深的層次。比如給你發(fā)消息的人對(duì)你而言不重要，是因?yàn)槿狈α嘶貜?fù)的動(dòng)機(jī)；沒時(shí)間回復(fù)是因?yàn)槿狈α嘶貜?fù)的能力；關(guān)閉了提醒是缺乏了回復(fù)的觸發(fā)因素……

動(dòng)機(jī)，能力，觸發(fā)三大要素，是讓用戶產(chǎn)生行為必不可少的三大條件，在行為模型里也十分重要。

一、什么是行為模型？

最早在 Norman 的《設(shè)計(jì)心理學(xué)》了解到關(guān)于行動(dòng)的幾個(gè)步驟，他將行動(dòng)拆分為目標(biāo)，執(zhí)行，評(píng)估三大階段，每一階段又分為幾個(gè)步驟，簡單畫了邏輯圖 ：

但是很多時(shí)候會(huì)發(fā)現(xiàn)，用戶不一定會(huì)按我們所設(shè)想的方式去使用我們的產(chǎn)品，特別是注冊(cè)，購買等能提升轉(zhuǎn)化率的行為……我在查詢了一些關(guān)于心理學(xué)方面的內(nèi)容后，發(fā)現(xiàn)了用戶不進(jìn)行這些行為，其實(shí)都是有可以解釋的依據(jù)的，并且我們還可以利用這些依據(jù)來改善我們的產(chǎn)品。

從前面微信的例子，我們可以得知，要想讓用戶產(chǎn)生行為（Behavior），必須具備三個(gè)要素：充分的動(dòng)機(jī)（Motive），完成這一行為的能力（Ability），促使人們付諸行動(dòng)的觸發(fā)（Trigger），這三者缺一不可。

于是我們可以得出一個(gè)行為模型：B=MAT，我們可以從數(shù)學(xué)的角度類比出人們產(chǎn)生行為的「臨界點(diǎn)」，可以稱為「行動(dòng)邊界線」（當(dāng)然這是我自己瞎取的名字，方便理解），只有用戶跨越了「行動(dòng)邊界線」，才能實(shí)施或者產(chǎn)生某種行為。

二、關(guān)于Trigger——觸發(fā)

所謂觸發(fā)，就是促使用戶做出某種舉動(dòng)的誘因，引發(fā)用戶去使用你的產(chǎn)品。

比如通過在其他平臺(tái)廣告推廣等付費(fèi)方式吸引新用戶，這個(gè)可以稱為「付費(fèi)型觸發(fā)」；

還有一些公關(guān)、媒體新聞的正面報(bào)道 ，app store 里面排行榜，AppSo 推薦好用應(yīng)用等不需要付費(fèi)，但是能夠吸引用戶使用你的產(chǎn)品，這個(gè)可以稱為「回饋型觸發(fā)」；

還有熟人之間的相互推薦，親朋好友的口碑相傳，這種方式十分常見，也是能夠讓產(chǎn)品大規(guī)模獲取用戶的一種方式，我們可以稱為「人際型觸發(fā)」。

但是這種方式經(jīng)常會(huì)被惡意利用，比如我們經(jīng)?？吹降模悍窒鞽X到幾個(gè)群即可領(lǐng)取XXX優(yōu)惠，最后卻發(fā)現(xiàn)是騙人的方式，利用這種方式也許可以獲取大批用戶，但是一旦用戶發(fā)現(xiàn)被欺騙后就會(huì)立即停止使用你的產(chǎn)品，你也會(huì)失去用戶的信任。

還有一種是以驅(qū)動(dòng)用戶重復(fù)某種行為的方式，用戶主動(dòng)與產(chǎn)品保持聯(lián)系，比如用戶注冊(cè)了某個(gè)平臺(tái)的賬戶，訂閱了它們的內(nèi)容更新，開啟了消息推送，那么每一次更新推送就很有可能觸發(fā)用戶使用你的產(chǎn)品，這種方式可以稱為「自主型觸發(fā)」。

以上四種觸發(fā)方式，都是來源于外部環(huán)境，那么我們可以將其稱為「外部觸發(fā)」。

昨晚在 PM CIRCLE 里面看到大家在談?wù)撽P(guān)于痛點(diǎn)、癢點(diǎn)、爽點(diǎn)的問題，也出了系列文章，后來在知乎上也搜了相關(guān)大佬的回復(fù)。

小小的總結(jié)一下：

• 「痛點(diǎn)」可以解釋為痛苦的點(diǎn)，用戶在不滿，抱怨，生氣，恐懼等負(fù)面情緒會(huì)產(chǎn)生痛點(diǎn)；
• 「癢點(diǎn)」可以理解為虛擬自我的實(shí)現(xiàn)，比如 B612 的瘦臉大眼，現(xiàn)實(shí)生活中的很難實(shí)現(xiàn)的，在 B612 里面能夠讓用戶得以釋放和解脫，映射出虛擬自我；
• 「爽點(diǎn)」就是老生常談的即時(shí)滿足了，壓抑久了的需求突然被滿足，那就是爽，有需求，還能即時(shí)滿足，那么就是爽。

為什么我會(huì)提到「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」？是因?yàn)槲矣X得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動(dòng)。

Nir Eyal 將情緒觸發(fā)分為兩種，一種為負(fù)面情緒，一種為正面情緒，兩種情緒皆可觸發(fā)用戶采取行動(dòng)，但是我覺得如果利用「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」來分析內(nèi)部觸發(fā)的話會(huì)更好，這三點(diǎn)通過深入挖掘用戶內(nèi)在的情感體驗(yàn)，設(shè)計(jì)出滿足用戶需求的產(chǎn)品，利用這三點(diǎn)也可以觸發(fā)用戶使用你的產(chǎn)品。

可以思考一下，人們?yōu)槭裁匆l(fā)朋友圈，發(fā)微博？為什么要拍照？為什么要刷抖音？為什么朋友圈更新出現(xiàn)小紅點(diǎn)后我就要去點(diǎn)擊看？用戶借助這些產(chǎn)品實(shí)現(xiàn)了怎樣的目的？消除了什么樣的煩惱？使用完這些產(chǎn)品后用戶感受如何？等等問題。

三、關(guān)于Ability——能力

可以把能力解釋為完成該行為的難易程度

Hauptly，Denis J 有一個(gè)觀點(diǎn)就是：當(dāng)你使用某個(gè)產(chǎn)品時(shí)所需花費(fèi)的步驟能被縮減或者是優(yōu)化時(shí)，用戶使用它的頻率就會(huì)增加。他在《Something Really New》一書中，歸納了產(chǎn)品創(chuàng)新的三個(gè)步驟，簡單畫了下步驟圖：

結(jié)合今天的科技變化，我們可以知道，將行為簡單化可以推動(dòng)產(chǎn)品創(chuàng)新，也只有將行為簡單化，用戶才會(huì)具備完成這一行為的能力。

福格總結(jié)了簡潔性包含的6個(gè)元素，也就是影響任務(wù)難易程度的6個(gè)要素，簡單總結(jié)下：

福格建議，為了增加用戶實(shí)施某個(gè)行為的可能性，設(shè)計(jì)人員在設(shè)計(jì)產(chǎn)品時(shí)，應(yīng)該關(guān)注用戶最缺乏什么。

也就是說，要弄清楚是什么原因 阻礙了用戶完成這一活動(dòng)：是時(shí)間不夠嗎？還是缺乏資金？還是完成這一活動(dòng)太耗體力了？或者是用戶不想動(dòng)腦筋？或者是這個(gè)產(chǎn)品與他們所處的社會(huì)環(huán)境格格不入？甚至是它太逾越常規(guī)，以至讓人難以接受？

我記得我第一份實(shí)習(xí)，做的一款新聞app，那個(gè)時(shí)候還不懂交互也不懂產(chǎn)品，我記得在首頁查看新的新聞內(nèi)容的時(shí)候 ，因?yàn)閿?shù)據(jù)加載量的原因，每次只能加載一定數(shù)量的新聞，所以當(dāng)時(shí)設(shè)計(jì)的是一個(gè)「查看更多」的列表?xiàng)l，用戶每次需要加載更多新聞內(nèi)容的時(shí)候，都需要點(diǎn)擊一次「查看更多」加載大約6條新的新聞，其實(shí)現(xiàn)在想想，為什么我們不設(shè)計(jì)一個(gè)自動(dòng)加載呢？每次用戶上拉的時(shí)候，自動(dòng)加載一部分，這樣能夠讓操作更加便捷，節(jié)約時(shí)間。

四、關(guān)于Motive——?jiǎng)訖C(jī)

觸發(fā)是提醒用戶采取行動(dòng)，而動(dòng)機(jī)決定用戶是否愿意采取行動(dòng)，也就是用戶行動(dòng)時(shí)擁有的熱情。在心理學(xué)里面，福格博士歸納了驅(qū)使用戶采取行動(dòng)的三大類核心動(dòng)機(jī)：

能夠成為某些人行為動(dòng)機(jī)的東西，未必適用于另外一些人，所以，我們需要知道自己的目標(biāo)用戶到底需要什么。

舉個(gè)例子：比如抖音的一些視頻封面，是一些漂亮的女生封面，而對(duì)于大都數(shù)男生來說，為了追求快樂，就有了點(diǎn)擊進(jìn)去看的動(dòng)機(jī)，而這種動(dòng)機(jī)對(duì)于另外一些女性用戶就不一定適用。

前幾天在聽 UCDCHINA 上海 大眾點(diǎn)評(píng) DPUX 專場《戰(zhàn)略導(dǎo)向下的設(shè)計(jì)價(jià)值拓展》線下分享會(huì)的時(shí)候，其中也講到了關(guān)于用戶的7大基本心理特征——七宗罪：憤怒，淫欲，貪婪，懶惰，嫉妒，暴食，驕傲。

我覺得這也是能夠讓用戶產(chǎn)生動(dòng)機(jī)的七大因素 ，比如經(jīng)常被廣告商拿來利用的俗稱「性賣點(diǎn)」的廣告設(shè)計(jì)元素 ，利用人性的窺探欲，吸引用戶付諸行動(dòng)……

當(dāng)我們知道了用戶采取行動(dòng)的幾類核心動(dòng)機(jī)后，我們可以通過一些心理學(xué)的方法來刺激用戶的這些動(dòng)機(jī)。

我在 Nir Eyal 的書中了解到一些關(guān)于啟發(fā)法等認(rèn)知偏差對(duì)人類行為的影響，比如稀缺效應(yīng)，首因效應(yīng)，環(huán)境效應(yīng)，投射效應(yīng)，近因效應(yīng)，錨定效應(yīng)，贈(zèng)券效應(yīng)，目標(biāo)漸進(jìn)效應(yīng)等 。

比如很多電商平臺(tái)商家會(huì)故意將商品庫存降低，當(dāng)產(chǎn)品數(shù)量由多變少的時(shí)候，它在用戶心中的價(jià)值就會(huì)提高，那么用戶購買的動(dòng)機(jī)就會(huì)增強(qiáng)，這就是利用了稀缺效應(yīng) ；

再比如目標(biāo)漸進(jìn)效應(yīng)，大意是講當(dāng)用戶認(rèn)為自己距離目標(biāo)越來越近時(shí)，完成任務(wù)的動(dòng)機(jī)會(huì)更加強(qiáng)烈。

目標(biāo)漸進(jìn)效應(yīng)讓我突然想到長沙的網(wǎng)紅奶茶——茶顏悅色的集點(diǎn)卡，大概就是積滿6點(diǎn)可以送一杯奶茶，我在第一次買第一杯的時(shí)候，他們給了我一張集點(diǎn)卡，上面已集了1個(gè)點(diǎn)，意思就是說我再集5個(gè)點(diǎn)就可以兌換一杯奶茶了，但是如果換一種方式，它把規(guī)則改成集5點(diǎn)可以兌換一杯奶茶，但是我買第一杯的時(shí)候，他們給我的卡上是空白的，沒有點(diǎn)，那么你們覺得這兩種方式，哪種方式更能讓用戶產(chǎn)生集點(diǎn)的動(dòng)機(jī)呢？

總結(jié)

• 要促成某種行為，觸發(fā)，動(dòng)機(jī)，能力這三者缺一不可，B=MAT；
• 觸發(fā)要顯而易見，行為要易于實(shí)施，動(dòng)機(jī)要合乎常理；
• 觸發(fā)分外部觸發(fā)和內(nèi)部觸發(fā)，外部觸發(fā)包括付費(fèi)型觸發(fā)，回饋型觸發(fā)，人際型觸發(fā)，自主型觸發(fā)；內(nèi)部觸發(fā)可以從痛點(diǎn)、癢點(diǎn)、爽點(diǎn)來分析；
• 影響任務(wù)難易程度，也就是能力的6個(gè)要素包括：時(shí)間、金錢、體力、腦力、社會(huì)偏差、非常規(guī)性；
• 動(dòng)機(jī)是行動(dòng)時(shí)擁有的熱情，采取行動(dòng)的核心動(dòng)機(jī)有三大類；
• 可以利用啟發(fā)法來獲取靈感，提高產(chǎn)品吸引力，刺激用戶的動(dòng)機(jī)；
• 因?yàn)樵鰪?qiáng)動(dòng)機(jī)往往耗時(shí)費(fèi)力，所以一般先解決能力問題，再解決動(dòng)機(jī)問題

  藍(lán)藍(lán)設(shè)計(jì)( bouu.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è)問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

最近一段時(shí)間一直在建立APP的設(shè)計(jì)規(guī)范，從一開始的立項(xiàng)到現(xiàn)在落地上線，可以說是從零開始進(jìn)行APP全部細(xì)節(jié)的梳理并且規(guī)定規(guī)范，這一路走過來還是能總結(jié)出很多心得，本文將分為3個(gè)部分，闡述如何從0到1建立設(shè)計(jì)規(guī)范。

目錄：

一、如何確定內(nèi)容，規(guī)范里要寫什么

二、如何寫

三、如何推動(dòng)規(guī)范落地

一、如何確定內(nèi)容？

這里我總結(jié)了三步：

1）確定目標(biāo)用戶、用戶目標(biāo)、設(shè)計(jì)目標(biāo)

根據(jù)不同的用途和目標(biāo)，不同的團(tuán)隊(duì)對(duì)設(shè)計(jì)規(guī)范的制定是不一樣。比如為了指導(dǎo)與規(guī)范全球第三方開發(fā)者進(jìn)行設(shè)計(jì)和開發(fā)，Google建立的Material Design覆蓋面廣，每個(gè)組件細(xì)節(jié)寫得非常細(xì)致。Ant Design則是直接做出了組件，方便直接進(jìn)行調(diào)用。有些國內(nèi)設(shè)計(jì)團(tuán)隊(duì)的規(guī)范則是主要描述常用控件和色值。因此我們需要確立用戶目標(biāo)和設(shè)計(jì)目標(biāo)，這樣才能確定我們的規(guī)范側(cè)重點(diǎn)是什么，需要做成怎么樣的形式。

在這里我列舉了自己撰寫規(guī)范時(shí)的用戶與目標(biāo)：

2）模范大平臺(tái)，先列全

一個(gè)規(guī)范里面的東西是很多的，那么我們究竟需要做什么呢？假如一開始我們沒有方向，找一個(gè)，列一個(gè)，這樣我們很容易疏漏很多情況。在這里我采用的的一個(gè)辦法是：首先熟讀iOS，Material Design規(guī)范，并且模范他們，在腦圖中，把規(guī)范中應(yīng)含有的所有內(nèi)容羅列出來，羅列一個(gè)大綱。

這里我列舉當(dāng)時(shí)自己做的一個(gè)腦圖大綱，覆蓋了主流規(guī)范中的所有細(xì)節(jié)，大家可以進(jìn)行參考并模仿：

3）針對(duì)自己情況進(jìn)行刪減

列完齊全的大綱后，我們需回顧設(shè)計(jì)目標(biāo)，對(duì)大綱里的內(nèi)容進(jìn)行刪減。（比如在組件、模式這些地方，可以對(duì)著自己的APP，進(jìn)行挨個(gè)尋找，看自己的APP當(dāng)前是不是運(yùn)用了這個(gè)組件，沒有的話就進(jìn)行刪減。）

在這里我列舉了針對(duì)自身APP的情況刪減后的大綱圖：

二、如何寫

進(jìn)過了以上的三步，我們基本得出了要寫什么的框架了，接下來就是如何寫規(guī)范的階段。

這里我總結(jié)了3步：

1）確定優(yōu)先級(jí)

我們可以通過版本迭代計(jì)劃+性價(jià)比+重要性（該組件在頁面出現(xiàn)的場景次數(shù)以及當(dāng)前的不統(tǒng)一對(duì)APP體驗(yàn)影響程度）這幾個(gè)維度分別確定每塊內(nèi)容的優(yōu)先級(jí)和分工。基礎(chǔ)的、必要的、高性價(jià)比的放在第一期，復(fù)雜的向后放，隨著產(chǎn)品的迭代，我們的規(guī)范也會(huì)越來越完整。

同時(shí)需要留意版本規(guī)劃，了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內(nèi)容的優(yōu)先級(jí)。龐大復(fù)雜，牽涉到很多頁面的，我們可以先降低其優(yōu)先級(jí)：比如全局提示框的規(guī)范，toast的規(guī)范。

同時(shí)，我們也需常與開發(fā)溝通，爭取把可復(fù)用性高、組件日后變化幅度少的組件做成開發(fā)組件庫。

2）確定規(guī)范書寫格式

我們制定的規(guī)范本身也是設(shè)計(jì)的交付物，假如每個(gè)設(shè)計(jì)師都按照自己的喜好來編寫規(guī)范，那么這個(gè)規(guī)范本身也會(huì)變得不規(guī)范，規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分。

我們可以回歸我們之前制定的用戶目標(biāo)和設(shè)計(jì)目標(biāo)來制定我們規(guī)范的書寫格式。規(guī)范的用戶群是誰，主要想達(dá)到什么作用，是通過文檔展示還是網(wǎng)上展示，確定了這些問題后，就可確定規(guī)范的詳細(xì)程度、主要的展示形式（比如前文說到的Ant Design和Material Design）。

這里我的思考點(diǎn)是：假如規(guī)范寫太多字就會(huì)變得很臃腫，沒有人喜歡慢慢仔細(xì)的閱讀你寫的規(guī)范，所以我們應(yīng)該做到寫得簡明扼要，再輔以例子說明（根據(jù)開發(fā)的習(xí)慣，都是喜歡直接看例子，看標(biāo)注）。

我的書寫格式是：先寫描述這個(gè)組件是什么，再列舉出現(xiàn)的場景，然后編寫交互規(guī)則，最后給出視覺標(biāo)注+例子。

3）逐步對(duì)單個(gè)規(guī)范進(jìn)行整理與書寫

當(dāng)確定了要寫什么東西和格式之后，我們開始進(jìn)入到細(xì)節(jié)，對(duì)每個(gè)內(nèi)容進(jìn)行整理，制定規(guī)范了。

通過對(duì)每個(gè)內(nèi)容制定規(guī)范規(guī)范也是有方法的：

下面我通過整理“列表”這個(gè)規(guī)范來講解：

1.收集出現(xiàn)的所有的場景。

當(dāng)一個(gè)產(chǎn)品已經(jīng)趨于成熟，這個(gè)組件出現(xiàn)的場景就會(huì)非常多，比如對(duì)話框，toast，列表這些組件出現(xiàn)的地方很多，需要我們自己仔細(xì)地體驗(yàn)產(chǎn)品，把所有頁面都找出來。

2.提取共性，歸納分類

我們需要分析每個(gè)頁面的特點(diǎn)并且把相同特點(diǎn)的頁面歸納一起，眾多的頁面場景就能整理成幾個(gè)典型的種類，然后只需對(duì)這幾個(gè)典型的種類進(jìn)行定義和描述即可。

在列表中，我分為了大封面列表、小封面列表、用戶列表、單行列表

3.編寫規(guī)則

在分類好后，我們可以對(duì)每個(gè)種類編寫規(guī)則，在這里我們需要描述好每個(gè)種類有什么特點(diǎn)或?qū)傩?，什么時(shí)候場景下適用，并且給出標(biāo)注和例子，方便閱讀者理解。

4.多與組內(nèi)成員討論修改

在制定好初稿后，我們可以與組內(nèi)成員宣講下自己制定的規(guī)范。多從別人的角度出來，確保你編寫的規(guī)范是否易懂，是否包含了全部的情況，是否容易執(zhí)行落實(shí)。

三、如何推動(dòng)規(guī)范落地

寫完內(nèi)容后，最重要的一步就是推動(dòng)落地，規(guī)范要真正有人用才能體現(xiàn)價(jià)值，在這里我給出幾點(diǎn)幫助推動(dòng)規(guī)范落地的小建議：

1.制定規(guī)范推進(jìn)進(jìn)度表

表格里面應(yīng)該包含規(guī)范制定的優(yōu)先級(jí)，分工進(jìn)度，分工人員，并且確定每一期進(jìn)度的交付時(shí)間，開會(huì)討論的時(shí)間，作為負(fù)責(zé)人，也可以適時(shí)提醒成員每次的開會(huì)時(shí)間（畢竟deadline是第一生產(chǎn)力）。

2.編寫過程中多與其他成員討論，達(dá)成一致性共識(shí)

制定規(guī)范后，與部門其他人員進(jìn)行宣講，灌輸概念，針對(duì)如何更好的落實(shí)進(jìn)行討論調(diào)整。在設(shè)計(jì)中都不可能一次就完美，我們需要不斷的在修改中逐漸完善。

3.規(guī)范建成后放在網(wǎng)上

同步在網(wǎng)上，方便部門內(nèi)的其他成員能隨時(shí)查看和團(tuán)隊(duì)成員對(duì)規(guī)范的更新修改、同步。

4.強(qiáng)制性制定規(guī)則要求團(tuán)隊(duì)成員執(zhí)行。

有明確的懲罰機(jī)制和要求才能更好的執(zhí)行，不然在規(guī)范制定后很容易健忘此事。（我們組的懲罰機(jī)制就是罰錢）。

5.規(guī)范保持持續(xù)的更新迭代。

規(guī)范推動(dòng)落地后并不是完全了事，要根據(jù)產(chǎn)品的迭代，保持規(guī)范的更新。

這整個(gè)制定規(guī)范的項(xiàng)目中，還是有不少反思的地方，值得我們深思和注意：

1.切記不要為設(shè)計(jì)規(guī)范而做規(guī)范

規(guī)范最重要的點(diǎn)是能推動(dòng)落地，能確確實(shí)實(shí)改善產(chǎn)品，達(dá)到統(tǒng)一性。因此我們?cè)谠O(shè)計(jì)規(guī)范時(shí)，并不需要“高大上”術(shù)語，給出一大堆的設(shè)計(jì)理念用來提升設(shè)計(jì)逼格。而是真正的回歸到我們的設(shè)計(jì)目標(biāo)，針對(duì)目標(biāo)用戶制定規(guī)范，做到簡樸、易懂、能落地。

2.沒人愿意閱讀長篇文字

我們應(yīng)該盡量控制文案長度，做到通俗易懂即可。

3.要時(shí)刻圍繞我們的目標(biāo)做規(guī)范

比如，我這次做的規(guī)范中有一項(xiàng)是去工具化，在制定控件中，空白頁面中就會(huì)加入很多趣味化的設(shè)計(jì)。

4.靈活變通

規(guī)范只是適合大多時(shí)候的場景，對(duì)于一些規(guī)范中沒有包含或者不符合規(guī)范的場景，我們可以靈活變通，積極創(chuàng)新或者是補(bǔ)充新的規(guī)范（前提是與組內(nèi)積極溝通，達(dá)成共識(shí)）。

總結(jié)：

再來回顧如何從0到1建立規(guī)范

一、確定內(nèi)容

1.確定用戶目標(biāo)和設(shè)計(jì)目標(biāo)

2.模仿大平臺(tái)，列全

3.針對(duì)自己情況進(jìn)行縮減

二、寫

1.確定優(yōu)先級(jí)

2.確定規(guī)范書寫格式

3.逐步對(duì)單個(gè)內(nèi)容進(jìn)行整理與書寫：a.收集全部情況 b.分類歸納 c.提取共性，編寫規(guī)則

三、推動(dòng)

1.制定規(guī)范推進(jìn)進(jìn)度表

2.編寫過程中多與其他成員討論

3.把規(guī)范建成后放在網(wǎng)上

4.強(qiáng)制性制定規(guī)則要求團(tuán)隊(duì)成員執(zhí)行

5.規(guī)范保持持續(xù)的更新迭代

今天分享的內(nèi)容就是這些了，希望能幫助到大家，感謝閱讀~

藍(lán)藍(lán)設(shè)計(jì)( bouu.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ù)。