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

在做UI設(shè)計之初，我就有跟蹤一些app版本和更新的習(xí)慣。在互聯(lián)網(wǎng)行業(yè)工作久了，我總是會從他們每一個版本的產(chǎn)品形態(tài)去揣測這個公司的動態(tài)?？吹揭恍┕δ芎徒换c，我會設(shè)身處地地思考如果我是他們的產(chǎn)品設(shè)計師應(yīng)該如何處理；遇見一些深得我心的功能點，我也總是有一種和他們的產(chǎn)品設(shè)計師惺惺相惜的江湖感情。反正久而久之，我邊猜測邊總結(jié)，也是養(yǎng)成了自己的一套“歪門邪道”的方法論。

言歸正傳，我們來看這一篇文章的內(nèi)容。

時間來到了2017年，手機空間越來越大，大家的手機中也裝了越來越多的app。很多時候，當(dāng)拿起一個朋友的手機，看他手機里都有哪些應(yīng)用，這些應(yīng)用的優(yōu)先級是如何排布的，我經(jīng)常會從中得出關(guān)于這個人的另一層線索。

比如一個人手機里優(yōu)先位置上有脈脈、知乎、豆瓣、一個ONE、單讀這幾個app，那我可以推測這個人一定是具備文藝屬性的互聯(lián)網(wǎng)從業(yè)者。

比如一個人手機封面是吳亦凡或者鹿晗，手機里優(yōu)先位置上有優(yōu)酷、愛奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆app，就可以看出這是一位愛綜藝、愛追星、愛剁手的小姑娘。

……

 1. 意識是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一

如果說2013~2015年app的 UI設(shè)計上充斥了很多同質(zhì)化產(chǎn)品的話，到了2017年，UI設(shè)計師們在dribbble和behance的風(fēng)格影響下，產(chǎn)品的設(shè)計有了更多的發(fā)展空間。我們不得不說的是，現(xiàn)在的app比之前越來越好看和越來越好用了。

如下圖所示我隨意截取了九個我自己覺得UI很棒的產(chǎn)品和大家分享，他們分別是Enjoy、單讀、Artand、Airbnb、一個ONE、Gilt、良倉、Zeen、和氧氣。

那這里有一個關(guān)鍵的問題就出現(xiàn)了，為什么有些app，普通用戶一打開就自然而然地覺得它很美？用戶這種“覺得它很美”的意識到底是從哪兒來的？

在此之前，我先來說兩組哲學(xué)概念。

意識是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一。（馬克思主義哲學(xué)）

內(nèi)容決定形式，形式反作用于內(nèi)容。（黑格爾唯心主義哲學(xué)）

為了闡述用戶這種“覺得它很美”的意識到底是從哪兒來的，就必須要了解app中“內(nèi)容”和“形式”之間的關(guān)系。那我們不妨來看一下什么叫內(nèi)容，什么叫形式。

2.內(nèi)容

如果斗膽給app設(shè)計工作中的“內(nèi)容”下一個定義的話，我大概會說：內(nèi)容是集成在app中，所有可被感知的圖片、文字、聲音的合集。這里之所以說是可被感知的，主要是從用戶層面上看，忽略了用戶不可感知的“代碼”層面。

那么我們有必要搞清楚的是，一個app的內(nèi)容到底是如何產(chǎn)生的？也就是一個app到底是如何產(chǎn)生的？

那這里我不妨展開一下，假設(shè)我是一個產(chǎn)品設(shè)計師，有一天CEO告訴我最近想做一個電商app。（這里我假設(shè)我們公司很有實力，忽略了市場和運營、渠道和資金上的問題，只考慮產(chǎn)品設(shè)計方面。）

那這個時候我會問老板：“老板，你做電商類app，是想做平臺類的呢還是做垂直的呢？你可想好了啊，你做平臺類的想要從淘寶、京東分份額的話，那你必須要有自己的特色。比如國內(nèi)app‘xx’、‘xx’和‘xx’、他們都有自己的特色?；蛘哒f你是想做垂直一些的么？比如‘xx’是專門做化妝品領(lǐng)域的，比如‘xx’是專門做美食的?！比缓罄习灞晃乙环榜Z化”之后得出的結(jié)論是我們來做一個美食電商，但是這個美食電商不會對標(biāo)Enjoy那樣的高檔人群，而是做成類似于“什么值得吃”這樣的大眾場景。

好，故事講完了，現(xiàn)在我化身為這個產(chǎn)品設(shè)計師，簡短片面地闡述我的思考過程：首先我拿到的目標(biāo)是做一款“什么值得吃”app，它的目標(biāo)人群是全中國吃貨，且要滿足吃貨推薦、評價和在線下單支付（前期無法做渠道的話需要跳轉(zhuǎn)淘寶京東鏈接）等功能。

經(jīng)過一番思考，我認為這款app的MVP狀態(tài)應(yīng)該需要如下圖所示的功能。

這里簡單說一下MVP是啥意思?！癕VP=Minimum Viable product（最小可行產(chǎn)品）”是《精益創(chuàng)業(yè)》的作者埃里克·萊斯提出提出的一個概念，字面意思就是可保證產(chǎn)品正常使用（主邏輯閉環(huán)）的最小產(chǎn)品單元。MVP又分為Validating MVP和Invalidating MVP，在這里就不展開了。《精益創(chuàng)業(yè)》是一本特別贊的書，推薦大家閱讀。

我設(shè)計的這個其實是Invalidating MVP，大概需要四個部分。

“推薦”是核心，以帖子形式或者別的什么形式推薦一些東西并附上鏈接?！皩ｎ}”方面做一些可供運營和推廣的專題，比如“情人節(jié)送什么巧克力”、“最適合食辣族的幾款辣醬”之類。“商城”里面會放一些自營的物品。“我的”里面會有我的推薦、我的收藏、我的訂單之類的一堆東西。

你們發(fā)現(xiàn)了嗎，其實這個時候，產(chǎn)品設(shè)計師就已經(jīng)在定義產(chǎn)品的信息架構(gòu)了。

第一，因為這個app叫”什么值得吃”，那我們是不是還需要推薦一些線下值得吃的店呢？如果做了是不是就和Enjoy同質(zhì)化太嚴重了？那最好就是先不做。

第二，在推薦這一頁里面我大概需要什么功能，因為面向的對象不太像Enjoy那種偏一線城市的人群，那我應(yīng)該用戶群體同類對標(biāo)到今日頭條這種level的感覺。

第三，這個首頁我是按照各種食品屬性的分類來建立推薦列表呢，還是說我按照人的屬性來建立推薦列表呢？如果是按照食物的分類的話，給別人的感覺可能和淘寶很像，比如我在列表里面看到“巧克力”再點進去看巧克力的推薦，和我在“甜品族”這個人群標(biāo)簽里看到某巧克力好吃，這兩種行為邏輯給用戶的感覺完全不同。大家體會一下，作為“什么值得吃”這款app來說，肯定是后者更適合，所以得出結(jié)論是以人的屬性建立推薦列表。（我甚至考慮到了以后迭代未來功能版本的可能性，比如到時候每個人可以有多種身份標(biāo)簽，再去做匹配社交之類的。）

好，那我現(xiàn)在關(guān)于產(chǎn)品首頁大概得出了以下幾點感覺。

（1）首頁推薦按照人的屬性標(biāo)簽去區(qū)分推薦列表。

（2）產(chǎn)品風(fēng)格不宜太洋氣（尤其是一定不能像Enjoy那樣使用黑白配色），最好是產(chǎn)品對標(biāo)今日頭條和微博的感覺，受眾偏向二三四線城市。

（3）每一個推薦應(yīng)該有收藏、購買鏈接等部件，在首頁上應(yīng)該有專門為運營活動或者市場換量設(shè)置的入口（可能是banner形式）。

（4）為了不使推薦屬性具有傾向性，每一個推薦都應(yīng)該盡量層級平行。（比如“吃辣黨”和“甜品族”就應(yīng)該入口平行。）

（5）一定要保證一個完整且通順的支付邏輯和用戶推薦邏輯，這是最基本的兩個功能。中間可能涉及到推薦里面要有商城鏈接（如果商城沒有的要跳轉(zhuǎn)淘寶），自己的商城要支持支付寶、微信等支付方式，要有訂單狀態(tài)和退單等一系列功能，余額功能或退款自動退回功能二選一（看公司需不需要資金池）。

....（此處省略N條）

其實，app“內(nèi)容”的產(chǎn)生，就是我上述這些奇怪東西的綜合（當(dāng)然其實并沒有上述這么簡單，這個以后有機會細講），比如我們從上面的論述當(dāng)中，可以歸納出這款“什么值得吃”app的首頁“推薦”應(yīng)該具有如下信息。

我寫這么多字其實就是想告訴大家一個app的“內(nèi)容”是如何產(chǎn)生的，當(dāng)然我這里說得十分簡單，真實情況可能比這個復(fù)雜百倍，大家意會就是了。

好了說完了內(nèi)容，我們來看所謂app中的“形式”又是什么。

3.形式

如果說我們把所有集成在app中可感知的圖片、文字、聲音的集合稱作app的內(nèi)容的話，那么app的形式就是“承載這些內(nèi)容，使內(nèi)容更好被感知的方式”。

人有五感，包括視覺、聽覺、嗅覺、味覺和觸覺。而人去和一款手機應(yīng)用進行交互的時候只會從視覺、聽覺、觸覺（反饋）三個方面去感知，而觸覺涉及到交互層面，以后我寫到app的交互架構(gòu)的時候會詳細說。 聽覺其實也不是本文重點，我舉個例子一筆帶過就好了。比如大家都用過滴滴，滴滴有一個“內(nèi)容（功能）”是司機送一個乘客的過程中，當(dāng)判斷距離目的地很近的時候會默認進行一個“下一單的匹配”的功能。我們用滴滴的這個功能來對比手機游戲里面的“匹配下一局”，我們會發(fā)現(xiàn)這是幾乎相同的“內(nèi)容”，但是承載形式不一樣。手游是視覺展現(xiàn)，你必須點擊手機上的“匹配”按鈕，而滴滴因為考慮到司機在開車很難解放雙手去點擊匹配，所以從產(chǎn)品邏輯上設(shè)計的是“語音提示+主動匹配+手動接單”的方式，所以我們總能在快下出租車的時候聽到司機手機上傳出響亮的“開始接單啦”語音提示。

本文的重點是視覺。

可能在大家以往的工作當(dāng)中并不會關(guān)注一款app原型是怎么樣設(shè)計出來的，大家可能只會關(guān)心我拿到原型以后應(yīng)該如何轉(zhuǎn)化為驚艷的高保真頁面。

把一個內(nèi)容整理、排列成一個app頁面，就是大家更關(guān)心的“形式”的部分。還是回到上文“什么值得吃”這款虛構(gòu)的app上，綜合上面的觀點，我大致能畫出原型如下圖所示兩種。

當(dāng)然這個是最粗糙的原型。（如果各位UI設(shè)計師在工作中接到了類似于這樣的原型那只能說心疼你們一秒。）那么問題來了，大家在生活中一定見到過這兩種原型的app。左邊這個很常見，比如斗魚tv這些直播平臺，早期閑魚、網(wǎng)易嚴選和今日頭條等都是用的這種感覺；右邊這個就更常見了，不論是點餐平臺（美團、百度、餓了嗎），還是大型電商（京東、淘寶）你都可以看到它。

那么問題來了，嘗試分析一下，上面這兩種形式到底有什么優(yōu)劣呢？

第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制標(biāo)簽（tag）的字數(shù)，你懂我是什么意思吧？比如今天有個運營跳出來說我們做一個新的標(biāo)簽把名字叫“酸酸甜甜就是我”。產(chǎn)品一定特別崩潰，原因如下圖所示。

第二，由于右邊的標(biāo)簽占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對的，右邊的優(yōu)勢在于，由于豎向排列可以讓一個屏幕顯示更多的標(biāo)簽，這一點就需要取舍，比如一個產(chǎn)品的初期沒準(zhǔn)備放這么多切換標(biāo)簽的話，還是建議用左邊那種。

更深層次的，外賣產(chǎn)品之所以用右邊這種形式是因為力求一屏展示更多的菜，而且外賣產(chǎn)品的左側(cè)標(biāo)簽一般是一家店鋪的菜的品類，用戶下滑菜品配合點擊品類，點完即走，很方便（京東和淘寶電商類平臺也是類似的）。但是比如早期的今日頭條只能采用左邊的這種形式，因為頭條是需要用戶長時間沉浸的，比如用戶選中一個“體育”的標(biāo)簽一般要看好久好久，用戶需要沉浸在這個標(biāo)簽下的內(nèi)容中，那這個時候顯然用右邊這種設(shè)計方式讓標(biāo)簽常駐屏幕左側(cè)是不合適的。

基于以上分析，作為內(nèi)容+電商平臺的“什么值得吃”應(yīng)該選用左邊這種設(shè)計形式。

好，“什么值得吃”這個虛擬的例子就說到這里，主要是讓大家明白內(nèi)容和形式之間的關(guān)系，只有你們明白了這個，才可以正式進入本章的主題——app的視覺美成因分析。

4.app的視覺美成因分析

首先來看結(jié)論。一款app讓你感覺到長得美，一定是團隊在兩個方面下功夫了——第一是內(nèi)容的視覺優(yōu)化，第二是形式的視覺優(yōu)化。

我先來給你們看兩張圖，讓你們感受一下什么叫內(nèi)容的視覺優(yōu)化。

你們可以看到左右兩張圖，左邊是Enjoy的精選頁，右邊是我隨手糟蹋的，大家會發(fā)現(xiàn)其實信息內(nèi)容一模一樣，但是左邊的和右邊的視覺設(shè)計差距大家一眼就能看出來吧。如果出現(xiàn)右邊這樣的UI稿，那只能說明這個團隊在內(nèi)容的視覺優(yōu)化上面不用心！以上就是內(nèi)容的視覺優(yōu)化的作用。關(guān)于內(nèi)容當(dāng)中的圖片，其實大家都有直觀感受：一款app允許用戶自定義的圖片越多，這款app視覺就一定越難把控。原因很簡單，因為用戶自定義的信息里面，文字信息我們是可以通過限制字段和select（選擇）去控制的，但是對于圖片來說，哪怕控制了用戶自定義圖片的尺寸，我們也無法控制這些圖片的質(zhì)量。大家去看一下秒拍這款app，它的框架設(shè)計做得很棒，包括一些empty status（無內(nèi)容狀態(tài)頁）的小圖標(biāo)繪制都很棒，但是我們打開app的時候，首頁的內(nèi)容總是參差不齊，差強人意。同理還有閑魚這款app， UI框架做得很漂亮，但是內(nèi)容頁面總會顯得沒那么“高大上”。

Enjoy，自如、氧氣、想去以及Gilt、美團等這些輕量電商或者租房app都選擇花一大筆成本自己聘請一批或全職或兼職的攝影師的原因，就是為了得到符合自己規(guī)范的優(yōu)質(zhì)內(nèi)容圖片（比如你們?nèi)タ醋匀绲姆吭葱畔⒄掌揪褪悄欠N樣子，氧氣的內(nèi)衣樣片背景永遠是白色）。

我之前做過一款旅行游學(xué)類app，在立項之初我們的圖庫里面就已經(jīng)有了幾萬張高質(zhì)量有版權(quán)的攝影師作品，然后在設(shè)計的過程中大膽采用流式布局（類似于今天開眼app），大量展示優(yōu)質(zhì)圖片，才使得在2015年初那個時期我們的UI風(fēng)格比較具有鮮明的特色。

其實這也是一個產(chǎn)品團隊需要深思熟慮的點：

·比如旅行app，一定要有大量優(yōu)質(zhì)的圖片作為依托才可能美。

·比如淘寶這種體量的大型電商，那除了盡可能控制圖片質(zhì)量以外，更多的應(yīng)該在優(yōu)化專題和banner上，并且告訴入駐商家（用戶）上傳優(yōu)質(zhì)的圖片更容易獲取用戶流量從而轉(zhuǎn)化為成訂單。

·比如知乎、貼吧之類這樣的問答和社區(qū)，用戶上傳的圖片五花八門千奇百怪，那我們可以考慮在首頁列表展示的時候就壓根不要展示圖片……

那是不是內(nèi)容的視覺優(yōu)化只包含圖片的優(yōu)化呢？其實不是的，除了圖片的視覺優(yōu)化以外，icon的優(yōu)化、文字的視覺優(yōu)化這些都是很重要的。

關(guān)于icon的優(yōu)化大家應(yīng)該已經(jīng)看過足夠多的文章在這里我就不贅述了，比如線性icon里面不能摻入塊狀icon，負空間icon里面不應(yīng)突然出現(xiàn)一個奇怪的漸變icon。我有一點心得可以分享，比如大家畫了一個2px的線性圖標(biāo)用于@2x，那在plus iPhone 的plus機型，6p 7p 8p都叫plus上面應(yīng)該要手動調(diào)整一下圖標(biāo)變成3px而不是用png自動生成，否則會有虛邊（除非你們的工程師使用的是svg的iconfont）。

關(guān)于文字的視覺優(yōu)化，幾乎市面上的所有app，只要涉及文字內(nèi)容的排版，毫無例外都做得很好了。從根源上出發(fā)，為什么一個設(shè)計師需要去不厭其煩像個工匠一樣折磨開發(fā)調(diào)整字體大小間距粗細什么亂七八糟的東西？其實，字體視覺優(yōu)化去達到的目的主要有兩點：

（1）輔助視覺對焦

（2）減輕視覺壓力

第二點沒什么好說的了，大家應(yīng)該都明白，主要說第一點，視覺對焦這個事情是這樣的，我們在一個界面中，如果不出現(xiàn)特別突兀的信息，正常人眼一般是從左到右，從上到下的順序閱讀。

比如上圖是一個閱讀界面，所有問題都沒有特別突兀的地方。我們把界面做一個高斯模糊去分析視覺焦點，會發(fā)現(xiàn)整個頁面呈現(xiàn)很平和，所以，這個頁面的閱讀順序應(yīng)該是一行一行地閱讀文字，也就是從上到下，從左到右。

但是，這只是頁面形式很平的情況，舉個沒那么平的例子。

上圖是知乎的一個頁面，我們把它去色并且高斯模糊去分析它的視覺焦點。大家會發(fā)現(xiàn)其實視覺焦點是加粗加大的標(biāo)題字體和上面的小頭像構(gòu)成的。

這就是使用文字優(yōu)化去輔助視覺對焦。我不妨再舉一例，大家來看下面的2016年5月左右的氧氣app截圖。

左邊是氧氣的原UI，右邊是我做的對比圖。顯然，關(guān)于文字優(yōu)化輔助視覺對焦這一點，氧氣的設(shè)計師深諳此道。他們沒有按照右邊那種傳統(tǒng)辦法設(shè)計這個頁面，而是把每一個深夜話題的題目都變成了一張圖，變成一張圖還不算，還在這張圖上面用淺綠色“劃了重點”。這樣雖然加大了設(shè)計師的工作量，但是這個頁面正是因為這樣的處理，能讓用戶第一眼聚焦到標(biāo)題上。

關(guān)于內(nèi)容的視覺優(yōu)化，我來總結(jié)一下吧。

app內(nèi)容是集成在app中，所有可被感知圖片、文字、聲音合集。那么內(nèi)容的視覺優(yōu)化主旨在于通過圖片，文字，圖形（icon）等的優(yōu)化，去使得app更加易讀、易用和美觀。

說完了內(nèi)容的視覺優(yōu)化，我們再看一下形式的視覺優(yōu)化案例。按說只要內(nèi)容都已經(jīng)優(yōu)化好了，表現(xiàn)內(nèi)容的形式不是排得特別爛，視覺效果展現(xiàn)出來應(yīng)該都不錯。我們再重復(fù)一遍app形式的定義——能更好地承載內(nèi)容，使內(nèi)容更好地被感知的方式。

我們該如何去排列不同的內(nèi)容讓它們更好地被感知呢？

這里面最常見的方法就是UI組件化設(shè)計，關(guān)于UI組件化設(shè)計我個人的定義是一款app里面同樣形式排列但是不同內(nèi)容的單元。這樣的例子不勝枚舉，我們每天都見到的最常見的一個組件化設(shè)計是微信里的每一個table view （表格視圖）。

大家打開你們的微信，可以看到其實微信的聊天列表的每一個單元都是由固定的內(nèi)容組成的。內(nèi)容包含一張圖（頭像），兩段文字（名字和信息），一段時間組成。

再看以下兩個頁面。

先看左面這個頁面，雖然第二個品牌故事被遮擋了很多，但是由于我們看到了第一個GUCCI的banner之后，用戶心理預(yù)期就有了，用戶左滑一下屏幕大概率出現(xiàn)的也是這樣形式的不同內(nèi)容。

再看右邊這張圖，一個app的每一個專題都是以一本雜志的形式呈現(xiàn)的，所以當(dāng)你看到這個頁面的時候，用戶心里會有“我左滑右滑都是一本專題書”的預(yù)期。

在設(shè)計過程中，我們往往會把相同屬性的內(nèi)容設(shè)計成同一形式。這樣做有什么優(yōu)點呢？最大的優(yōu)點是減少用戶認知負擔(dān)，使得內(nèi)容更好地被感知。

舉個大家都懂的格式塔的例子。

看上圖A，大家都知道接下來一個一定是正方形，但看上圖B，下一個別說你們不知道是什么，我也不知道。格式塔相似律告訴我們，人們在知覺時，對刺激要素相似的項目，只要不被接近因素干擾，會傾向于把它們聯(lián)合在一起。

那么我們就很容易解釋下圖。

大家看到這里是不是很熟悉？聯(lián)系上下文，現(xiàn)在應(yīng)該知道為什么市面上的app都這么設(shè)計了吧？還不就是為了讓用戶更好地接受信息。

5.總結(jié)

一切UI設(shè)計本質(zhì)上是為了更好地展現(xiàn)信息。

更好地展現(xiàn)信息是為了更好地指引用戶完成交互操作，從而讓用戶更好地去接收信息并完成一定功能目的。

本章一直在講述app信息呈現(xiàn)上的視覺優(yōu)化。其實視覺優(yōu)化也好，邏輯優(yōu)化、交互優(yōu)化也罷，都是為了使得app更加好用、易用、有效。

在我剛開始接觸UI設(shè)計的時候，也曾經(jīng)沉迷dribbble，不斷模仿那些大師們的驚艷界面。在長達一兩年的學(xué)習(xí)和工作中，我一直認為UI設(shè)計師的本職工作就是畫一個漂亮的殼子，把信息裝進去然后能讓app變得更好看而已。

但是后來我完全不這樣想，如果現(xiàn)在讓我評價一款app的UI，我可能真正最看重的那個維度已經(jīng)不是“視覺感覺”上的好看，而是“視覺邏輯”上的嚴謹和“視覺風(fēng)格”上的一體化，比如分割線，比如icon的樣式，比如tableview（表格視圖）的設(shè)計，比如字體的主次對比等。

當(dāng)我沒有理由的畫一條分割線，只為了分割兩個也不知道是啥的元素時，當(dāng)我沒有理由地就是想要為卡片化組件加上一個box-shadow（陰影）時，當(dāng)我沒有理由的設(shè)計一個奇怪的交互方式還硬說它特別好用時，我都在警醒自己一句話：每一個UI界面的設(shè)計都應(yīng)該被賦予應(yīng)有的理由。希望以此共勉。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

背景

前陣子正好做到了一個類似“申請通知“的功能，因為涉及到列表，所以要考慮列表的排序規(guī)則，那么問題來了，要用哪種排序規(guī)則（拼音、時間…）？

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

產(chǎn)品分析

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

1. 消息通知頁面

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

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

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

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

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

微信和釘釘邏輯分析

1.微信

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

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

1. 首先新的訂閱號類似新聞資訊一樣（可能微信就是想把它打造成這樣，這點我們不展開），所以按照倒序排列也講得通；
2. 具體訂閱號中按照正序排列是因為頁面下面有操作，可以進行文字的輸入，所以這個頁面很像聊天頁面，按照正序也有道理；
3. 騰訊新聞這個功能模塊的排序有點不太理解，明明是新聞類，排序是按照正序，和訂閱號很像，這里我也分析了兩點原因：

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

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

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

2.釘釘

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

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

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

思考

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

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

一、設(shè)計中的重復(fù)是什么？

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

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

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

1. 重復(fù)

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

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

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

重復(fù)配色

在 app store 的頁面中使用了相同的顏色進行提醒，方便用戶快速查找和點擊，整體的藍色又給人理性的感覺，看到付費app 的好評數(shù)可以看出是因為產(chǎn)品好才推薦你進行理性消費。

重復(fù)大小

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

重復(fù)間距

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

重復(fù)組件

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

2. 突變

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

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

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

banner輪播

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

導(dǎo)航欄分類

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

按鈕

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

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

feed流

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

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

3. 節(jié)奏感

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

左右滑動

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

列表頁

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

4. 韻律

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

最美有物

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

圖表

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

配色

△ 來自Prakhar Neel Sharma和crisssamson

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

重復(fù)在動效中如何運用才會有韻律感？

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

二、總結(jié)

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

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

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

一、設(shè)計師的現(xiàn)狀

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

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

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

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

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

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

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

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

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

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

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

如果要解決這個「歷史難題」：

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

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

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

美團點評是一個高管層很重視用戶體驗的公司。在美團點評，用戶體驗部的價值是可以得到足夠認可的。

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

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

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

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

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

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

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

古語說：

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

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

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

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

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

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

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

只有擺正了這個認識，在職場中就更容易獲得成功。

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

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

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

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

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

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

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

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

除此之外，崔校長還說：

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

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

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

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

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

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

崔校長說：

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

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

4. 注重自身和團隊的共同成長

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

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

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

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

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

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

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

5. 優(yōu)秀的設(shè)計團隊不能沒有管理者

設(shè)計不是單打獨斗。

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

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

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

作為 Leader ：

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

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

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

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

6. 保持溝通

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

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

對此，美團點評崔校長很有發(fā)言權(quán)。

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

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

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

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

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

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

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

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

總結(jié)

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

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

一、字體

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

輔助信息傳遞

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

表達情感體驗

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

塑造品牌形象

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

2. 界面常用字體推薦

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

中文字體推薦

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

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

英文字體推薦

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

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

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

數(shù)字字體推薦

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

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

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

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

二、字號

1. 關(guān)于字號

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

2. 字號的選擇

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

iOS 字號規(guī)則

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

• 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，文本模式適用于字號小于 20pt 的文字，展示模式適用于字號大于等于 20pt 的文字。

Material Design 字號規(guī)則

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

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

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

Ant Design 字號規(guī)則

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

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

Kiwi 字號規(guī)則

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

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

三、行高

1. 關(guān)于行高

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

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

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

2. 行高的設(shè)置

iOS 行高設(shè)置

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

Fluent Design 行高設(shè)置

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

Ant Design 行高設(shè)置

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

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

四、字重

1. 關(guān)于字重

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

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

2. 字重的設(shè)置

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

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

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

一、團隊工作，妥協(xié)是一門學(xué)問

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

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

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

△ 圖源：Nick Taylor

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

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

其實不僅僅是因為每個崗位的職能不同會導(dǎo)致很多不同的意見，有時候也可能是因為每個人的審美或者是性格的問題，也會產(chǎn)生不少的摩擦，所以，學(xué)會妥協(xié)，在妥協(xié)中堅持是團隊合作中的一門大學(xué)問。

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

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

△ 圖源：Nick Taylor

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

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

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

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

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

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

三、牢記UCD，但別太天真

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

△ 圖源：Nick Taylor

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

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

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

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

△ 圖源：Nick Taylor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

想一個問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？

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

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

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

一、什么是行為模型？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為什么我會提到「痛點」、「癢點」、「爽點」？是因為我覺得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動。

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

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

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

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

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

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

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

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

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

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

四、關(guān)于Motive——動機

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

  藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

想一個問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？