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

在做UI設(shè)計之初，我就有跟蹤一些app版本和更新的習慣。在互聯(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。很多時候，當拿起一個朋友的手機，看他手機里都有哪些應(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的風格影響下，產(chǎn)品的設(shè)計有了更多的發(fā)展空間。我們不得不說的是，現(xiàn)在的app比之前越來越好看和越來越好用了。

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

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

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

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

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

為了闡述用戶這種“覺得它很美”的意識到底是從哪兒來的，就必須要了解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é)論是我們來做一個美食電商，但是這個美食電商不會對標Enjoy那樣的高檔人群，而是做成類似于“什么值得吃”這樣的大眾場景。

好，故事講完了，現(xiàn)在我化身為這個產(chǎn)品設(shè)計師，簡短片面地闡述我的思考過程：首先我拿到的目標是做一款“什么值得吃”app，它的目標人群是全中國吃貨，且要滿足吃貨推薦、評價和在線下單支付（前期無法做渠道的話需要跳轉(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é)送什么巧克力”、“最適合食辣族的幾款辣醬”之類?！吧坛恰崩锩鏁乓恍┳誀I的物品?！拔业摹崩锩鏁形业耐扑]、我的收藏、我的訂單之類的一堆東西。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.形式

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

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

本文的重點是視覺。

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

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

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

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

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

   

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

更深層次的，外賣產(chǎn)品之所以用右邊這種形式是因為力求一屏展示更多的菜，而且外賣產(chǎn)品的左側(cè)標簽一般是一家店鋪的菜的品類，用戶下滑菜品配合點擊品類，點完即走，很方便（京東和淘寶電商類平臺也是類似的）。但是比如早期的今日頭條只能采用左邊的這種形式，因為頭條是需要用戶長時間沉浸的，比如用戶選中一個“體育”的標簽一般要看好久好久，用戶需要沉浸在這個標簽下的內(nèi)容中，那這個時候顯然用右邊這種設(shè)計方式讓標簽常駐屏幕左側(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)容當中的圖片，其實大家都有直觀感受：一款app允許用戶自定義的圖片越多，這款app視覺就一定越難把控。原因很簡單，因為用戶自定義的信息里面，文字信息我們是可以通過限制字段和select（選擇）去控制的，但是對于圖片來說，哪怕控制了用戶自定義圖片的尺寸，我們也無法控制這些圖片的質(zhì)量。大家去看一下秒拍這款app，它的框架設(shè)計做得很棒，包括一些empty status（無內(nèi)容狀態(tài)頁）的小圖標繪制都很棒，但是我們打開app的時候，首頁的內(nèi)容總是參差不齊，差強人意。同理還有閑魚這款app， UI框架做得很漂亮，但是內(nèi)容頁面總會顯得沒那么“高大上”。

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

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

其實這也是一個產(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的線性圖標用于@2x，那在plus iPhone 的plus機型，6p 7p 8p都叫plus上面應(yīng)該要手動調(dià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)其實視覺焦點是加粗加大的標題字體和上面的小頭像構(gòu)成的。

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

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

關(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)該都不錯。我們再重復一遍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之后，用戶心理預期就有了，用戶左滑一下屏幕大概率出現(xiàn)的也是這樣形式的不同內(nèi)容。

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

在設(shè)計過程中，我們往往會把相同屬性的內(nèi)容設(shè)計成同一形式。這樣做有什么優(yōu)點呢？最大的優(yōu)點是減少用戶認知負擔，使得內(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，不斷模仿那些大師們的驚艷界面。在長達一兩年的學習和工作中，我一直認為UI設(shè)計師的本職工作就是畫一個漂亮的殼子，把信息裝進去然后能讓app變得更好看而已。

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

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

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