收藏

收藏

收藏

收藏

收藏

收藏

轉自：站酷

作者：火龍果_pitaya

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

移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。

接下來為大家分享精美的app UI設計案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。

--手機appUI設計--

嗨，朋友們，不知你是否曾遇到這樣的處境，聽到需求，大家再熟悉不過了，在產品設計的時候，什么是產品需求？什么是用戶需求？什么是商業需求？到底怎么進行產品需求分析？

看到這一系列的問題是否一臉懵，一臉茫然，對需求分析和理解不夠的透徹。今天，我為大家分享的是關于產品設計需求分析研究，希望可以對大家有所幫助，更好做好需求分析，理解需求分析。

需求到底是什么？

在工作中我們經常提及需求，談及需求分析，但就一個簡單的需求，我們真的了解嗎？真的知道什么是真正的需求嗎？天天被客戶說你沒有理解我的意思，你沒有了解我的需求。那么什么是需求？百度百科中解釋需求指人們在某一特定的時期內在各種可能的價格下愿意并且能夠購買某個具體商品的需要。而關于需求也有人解釋為需求是由個體在生理上或心理上感到某種欠缺而力求獲得滿足的一種內心狀態，它是個體進行各種活動的基本動力。而產品是為了滿足人們的需求而被生產出來的，因為需求的驅動，才會使得用戶需要產品。因此需求，既不是功能，也不是產品，不能把功能和需求混為一談。需求是用戶面臨的某一個問題，產品或者產品功能只是為了解決用戶的需求的解決方案。

1. 需求類型介紹

那么產品的需求都有那些類型呢？

需求按照產品屬性可以劃分為：idea、新增、優化、Bugfix；按照產品職能可以劃分為：功能類需求、運營類需求、數據類需求、設計類需求；按照產品價值劃分為用戶需求和商業需求；按照產品性質劃分為顯性需求和隱性需求。

2. 需求相關理論在產品設計中的應用

馬斯洛需求層次理論（hierarchical theory of needs），馬斯洛，可以說是我們需求理論界的祖師爺，他認為，人的需要由生理的需要、安全的需要、歸屬與愛的需要、尊重的需要、自我實現的需要五個等級構成。下面我們看看產品設計中的應用：生理需求方面應用、安全需求方面應用、社交需求方面應用、尊重需求方面應用和自我實現需求方面應用。

生理需求方面應用

生理需求即滿足人類的最底層，最基本的生活需求，包括衣、食、住、行、用等。生理需求是推動人類生存的動力，只有生理需求得到滿足，人們才會追求更高層次的需求。

比如：唯品會、餓了么、美團、百度地圖、Wi-Fi 萬能鑰匙。

安全需求方面應用

安全需求即在滿足人類的生理需求的情況下，滿足人類的安全和社會保障，包括健康、社會秩序、法律、和平、醫療、教育等，人類需要安全感。

比如：支付寶、360、全民反詐、查悅社保、優健康。

社交需求方面應用

社交需求即歸屬與愛的需求，體現在個人渴望得到家庭、團體、朋友、同事的關懷愛護理解，包括友情、愛情、熟人社交和陌生人社交等的社交需要。

比如：微信、Soul、珍愛網、探探、陌陌。

尊重需求方面應用

尊重需求即較高級別的需求，滿足前幾種需求的前提下，用戶開始關注高級需求，包括內部尊重和外部尊重。自尊和希望受到別人的尊重。

比如：朋友圈和抖音的點贊、評論，電腦開機助手

自我實現方面應用

自我實現需求即最高級別的需求，實現自己的理想抱負，實現自己的追求，成為偉大的或具有影響力的人物。在人生道路上自我實現的形式是不一樣的，每個人都要創造機會去完善自己的能力，滿足自我實現的需要。

比如：微博認證、知乎認證、網易云音樂會員、QQ 會員、抖音認證

圣經人性七宗罪（seven deadly sins），天主教稱七罪宗，或稱七大罪或七原罪，屬于天主教教義中對人類惡行的分類。

最本質的需求是人類原始的本能欲望，在《圣經》中，人類有七宗罪：色欲（lust）、暴食（gluttony）、貪婪（greed）、懶惰（sloth）、憤怒（wrath）、嫉妒（envy）和傲慢（pride）。

一款好的產品，需要對人性做透徹的分析，才能完成其設計。

比如：快播、王者榮耀、拼多多、狼人殺、大眾點評。

3. 需求層次的規律

需求是不變的，變得是滿足需求的產品。從古至今，人類的需求幾乎沒有發生改變，如為了滿足人類移動的更快的需求，歷史上有馬車、自行車、汽車、火車、飛機，互聯網的產品則是，摩拜單車、哈羅單車、滴滴出行。

傳統產品

互聯網產品

因此，在進行產品設計中一定要：

• 把控需求來源
• 提高需求質量

需求如何進行獲取？

聊了這么長的需求，那么需求到底如何進行獲取？都有哪些渠道和方法呢？小浪郎看了相關的視頻和書籍進行了一定的了解，只要路子野，就不會有悲傷！關于需求也有相關的獲取渠道和方式。

1. 需求獲取渠道

需求的獲取渠道，包括內部渠道和外部渠道，通過多種渠道來獲取用戶需求。內部渠道包括產品、老板、同事和自己，外部渠道包括市場、用戶、競品和合作伙伴。

外部獲取渠道

1.市場

產品設計需求會受到行業政策的調整而變化，如政策對順風車業務的需求影響。

2. 用戶

產品就是為了滿足用戶的需求而服務的，需要及時的了解我們的用戶，了解我們的目標用戶。

3. 競品

知己知彼，方能百戰百勝。在同領域的競爭對手，通常來說兩者之間是相愛相殺的關系。我們既要了解直接競品，又要了解間接競品。如碎片化時間、場景相同、用戶也相同、但需求不同的抖音與快手、微信讀書與網易云音樂。

4. 合作伙伴

合作伙伴能夠給企業帶來資金資源、先進技術、管理經驗，提升企業技術進步的核心競爭力和拓展國內外市場的能力，推動企業技術進步和產業升級的國內外先進企業之間的合作。

內部獲取渠道

1.產品

通過用戶使用產品時所產生的行為數據，來進行產品戰略規劃和設計，因為用戶的行為即是用戶的需求。

2.老板

產品設計在滿足用戶需求的同時必須兼顧企業的戰略需求。而這方面需求通常是由老板或公司的高層來進行掌舵的。

3.同事

產品的開發流程，從產品規劃到需求分析，從需求分析到產品設計，從產品設計到產品開發，從產品開發到產品測試運維等，涉及了很多的同事，他們對用戶也有所理解，間接了解用戶的需求。

4.自己

作為產品人，我們也應該成為產品的用戶，成為產品的目標用戶，這樣才能不斷為用戶思考，為用戶解決需求。

2. 需求獲取方式

需求的獲取方式，包括內部方式和外部方式，通過多種方式來獲取用戶需求。內部方式也同樣包括產品、老板、同事和自己，外部方式包括市場、用戶和競品。

外部獲取方式

1.市場

通過了解國家的法律法規、政策方針、了解市場的行業動態和數據報告。

2.用戶

通過用戶調研和用戶反饋來進行了解用戶的需求，從而為用戶進行服務。常見的用戶調研包括有：觀察法、單人訪談法、焦點小組、問卷法、頭腦風暴法、自我陳述法和實驗法。常見的用戶反饋包括有：論壇、貼吧、微博話題、Appstore 的產品評價等。

3.競品

需要持續性的進行相關競品分析，了解優勢與劣勢，了解相同與不同。查閱相關的競品分析報告，進行快速了解。

內部獲取方式

1.產品

通過一次次的數據埋點產生的用戶行為數據，有效的用戶行為數據分析，出具有業務價值的數據分析結論。

2.老板

及時與老板進行高效溝通，結合企業的戰略定位與戰略規劃，明確產品的戰略規劃。

3.同事

與同事進行產品頭腦風暴，打破常規，積極思考，暢所欲言，充分發表看法。

4.自己

作為產品人，我們要用心觀察生活，使用更多的產品，體驗更多的產品，總結產品經驗與規律。

3. 需求記錄

不僅我們需要了解需求，同時各種各樣的需求也要規范的進行記錄，我們通過需求卡片來進行需求記錄，包括需求編號、需求類型、需求來源、需求內容、需求場景、記錄時間、記錄人員等。

需求分析怎么進行？

需求也有真偽，獲取了需求，接下來我們需要進行需求分析，分析那些需求是真需求，那些需求是偽需求；哪些需要是必須要做的，哪些需求可以不用做；哪些需求先做，哪些需求后做；如何進行篩選需求等，常見的需求分析包括：需求篩選、需求透視、需求排序。

1. 需求篩選

初步進行需求篩選，包含有 4 個分析緯度，真實性、一致性、價值性和可行性。

真實性

需求是否是目標用戶的真實需求，自己不要 YY 需求，同時也要對用戶嘴上說的需求進行斟酌，需求是否真的存在。如用戶說星巴克不好喝，但實際是因為太貴了，沒錢。

一致性

是否符合產品定位？需求分覆蓋面有多大？有多少目標用戶有這種需求？這個需求有多大程度上的代表性？

價值性

需求能帶來多少價值？（用戶價值、企業價值）需求實現要多少成本？（人力、金錢、時間） 需求投入產出比如何？

可行性

需求按照目前現有的人力物力和財力能夠實現，過濾掉企業能力范圍以外的產品需求，但是我們可以和別的企業達成戰略合作，求同存異，互利共贏。

2. 需求透視

需求透視就是從獲取的表面需求中提煉出用戶的本質需求。理解用戶的本質需求，則有利于我們更好地提出產品需求。分析表面需求，本質需求和產品需求。

再來一個小案例。

有一天小浪郎和朋友去看電影，走在了街上突然發現沒吃飯餓了，小浪郎想吃火鍋，但由于要和他的朋友一起看電影，時間來不及，于是它們一起吃了山西刀削面，解決了吃飯問題，然后兩人一起去看電影了。

那么上面小浪郎的用戶描述需求是想吃火鍋，但用戶實際想要的只是沒有吃飯，只要吃飯了就行，而他們的潛在需求有飲料、啤酒和水果等。

3. 需求排序

根據企業的戰略定位、產品規劃和用戶需求，我們需要對記錄的產品需求重要性進行優先級排序。具體而言，通過需求類型、需求頻率、需求強度和需求邏輯來進行需求的優先級排序。

需求類型

依據 KANO 模型對需求做出的分類，考察需求的類型，包括基本型需求（痛點）、期望型需求（癢點）、興奮型需求（興奮點）。

如微信產品，用戶的基本需求（痛點）是聊天，微信表情則為用戶的癢點（期望型需求），沒有表情包也照樣聊天撕逼，而微信紅包則是用戶的興奮點（興奮型需求）

用戶在單位時間內使用產品的次數即為需求的頻率，頻率越高，需求對用戶越重要。如產品設計時，把高頻率的功能放在一級，把低頻率的產品功能放在二級甚至于三級等。

需求強度

需求的強度可以參考馬斯洛需求層次理論，包括必要性、高頻次和持續性。

需求邏輯

需求之間也存在著一定的邏輯關系，需求也有先后，先完成第一步需求，才能完成第二步需求。如微信視頻，必須先有微信好友，才可進行微信好友視頻。

需求不變，變得是適應需求的產品，把控需求來源，提高需求質量。

本篇文章為大家介紹了產品與需求、需求理論知識和應用、需求獲取和分析研究，相信基于以上需求分析理論和方式方法，在以后大家對需求分析的處理能夠有新思路，高效打造出一個有價值的優秀產品。希望能給到小伙伴建立自己的產品需求分析體系一些啟發。

重要的事情說三遍：把控需求來源，提高需求質量；把控需求來源，提高需求質量；把控需求來源，提高需求質量。

文章來源：優設   作者：Hello_姚冰 

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

迪士尼的12條動畫基本原則是傳統動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統動畫（例如角色動畫）設計的，但在本文中，我們將探討如何將其中的一些原理應用于UI動效上。

01-擠壓和拉伸

在動畫中，擠壓和拉伸表示對象的重力，質量，彈性。當場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結合。

例如，按鈕的按下狀態為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態。除此之外，它還可以應用于界面上的所有的交互式元素。

應用于按鈕上的擠壓和拉伸

應用于側邊欄的擠壓和拉伸

02-預備動作

預備動作為用戶展示了即將發生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預備動作。在UI動效中，懸停狀態就是很好的例子。每當我們將鼠標懸停在元素上時，某些元素都會做出反應，表明它是可單擊的，并且當您單擊它時會發生某些事情。

懸?；油ǔ嬖V我們接下來有一個動作發生 

涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現在滾動/滑動中

03-時間節奏

在傳統動畫中，時間由繪制的幀動畫來控制。幀數越多，動畫將越流暢和越慢。時間還可以表現對象的情緒和性格。

時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續時間都有很好的解釋。

右側的過渡會使用戶等待太久

04-動畫的緩入緩出

現實世界中的大多數對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。

向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節奏和緩動標準可以讓你建立一個高效的動效庫。

右側添加了緩動效果，所以看起來更自然

05-轉場

轉場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。

對于UI界面，轉場決定了元素的放置位置以及在發生交互時如何對元素進行排版。它將用戶的注意力引向最關鍵的元素。

這是一個音樂類的APP，轉場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現，讓用戶一目了然

06-弧線運動

從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。

弧線運動更加生動自然

07-輔助動畫

在動畫中，輔助動畫用于強調場景中發生主要動作。例如，角色的頭發在行走時的微妙移動，或者是面部表情的微妙變化。

在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。

輔助的例子動畫讓點贊效果更飽滿

08-夸張

場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關注。

在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設計就是一個很好的例子，懸浮的按鈕在靜態狀態很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當發生任何交互時，夸張的動畫讓它可以占據整個屏幕，使其吸引力更上一層樓。

占滿全屏的夸張動畫

夸張的支付按鈕更吸引人的眼球

09-慣性與延時

試想，如果你坐在三輪車上，當車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。

在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~

窗口放大時添加了慣性效果

圖像和文本添加了短暫的延時效果

文章來源：UI中國   作者：設計師深海

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

接下來為大家分享一下我收集到的案例：

--網站界面UI設計--

       數字信息時代,互聯網和智能手機快速發展,促使界面設計成為熱門行業。中國傳統文化博大精深,蘊含多種多樣的中國元素。本文立足中國傳統文化和界面設計,從視覺和交互角度著手進行分析,通過論證中國元素在界面設計中的優秀表現,探討如何使中國界面設計走在時代的前沿。

下面給大家分享一些“國潮”界面

--bs界面UI設計--

2015年之后的中國互聯網，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創業”、“精益數據分析”、“增長黑客”等一系列數據思潮開始流行。而UX設計師作為半個產品經理，我們很容易將這股“數據熱”遷移到自己身上：每個UX設計師都要學數據分析了嗎？數據和設計是什么關系？天天盯數據會限制設計師的想象力嗎？數據到底要怎么用？……

Preview

——————————

數據熱

過往，設計師一般不會把“數據”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗”，較少考慮成本和商業效益。

通俗來說，就是產品經理負責“生意”，設計師負責“體驗”。以“造鞋”為例子，產品經理做了市場調研，決定要生產兒童運動鞋，設計師負責設計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設計師不需要擔心運動鞋的銷量，產品經理則要跟老板匯報銷量業績。

在紅利消退、產品同質化嚴重和快速迭代的多重壓力下，UX設計迎來了更高的挑戰：僅憑主觀判斷“好不好用、好不好看”來打磨產品內在體驗，不考慮產品的生存、增長和盈利，很難在行業立足。與此同時，隨著數據采集工具的日漸成熟，數據以“客觀”和“便捷”兩大特點，幫助我們更快獲得“設計的依據”。精益化設計是必然趨勢，而“數據分析”是精益化設計的手段之一。

沿用“設計鞋”的案例，UX設計師要在自己所在領域思考：在設計調研的過程中，我們用什么數據指標來衡量這個兒童鞋好穿、好賣？在鞋進行批量生產前，我們有沒有數據資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等？如果有條件進行小范圍的數據實驗，我們如何設計數據實驗來評估好穿好賣？

PART 01

——————————

數據的定義

“理解任何事物都需要先對它進行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個東西，而不是其他東西?！狈浅Ｏ矚g美國經濟學家Thomas Sowell在《經濟學的思維方式》里說的這句話。

如果我們對“數據”下定義，那么產品設計語境中的“數據”具體是什么？數據是怎么產生的？

從數據采集手段來看，互聯網產品的數據來源主要有3個：二手資料數據、問卷調研數據和應用埋點數據。

1/ 二手資料數據

行業數據和競品數據一般通過二手資料獲得，包括商業交易數據、用戶群的態度和意愿、用戶輿論指數、競品的用戶規模和盈利狀況等宏觀數據。常用的搜索渠道有：百度指數、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。

我們可以將這些理解為“市場數據”，在立項期對產品方向有一定指導意義，能快速了解市場概況，也能幫助產品思考差異化定位的問題。

以“騰訊文檔為”項目為例，我們想提高騰訊文檔用戶創建文檔的成功率，通過模板創建文檔是關鍵路徑之一。研究用戶通過模板創建的路徑時，想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”，從搜索量得知：PPT模板搜索量最高，符合我們的推測；Word模板內容中，簡歷、合同需求量較大，而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多，但我們能夠通過二手資料的方式，快速了解用戶需求的基本面。

2/ 問卷調研數據

問卷調研數據是通過向目標用戶發放問卷獲得的，側重于收集人口學信息、用戶自述的歷史行為、主觀態度或意愿，比如用戶滿意度調查、流失用戶原因調查等。本質上是通過建立假設、再進行抽樣統計的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴謹的問卷分析也會比對后臺數據，校驗用戶說的和做的是否一致，以清洗無效數據。

3/ 應用埋點數據

較之于問卷調研數據，我們想看“用戶做了什么”，則通過分析應用埋點數據獲得。

“應用埋點數據”也叫“埋點數據”、“前端頁面數據”，我們可以簡單理解為“通過技術手段獲得用戶在應用內（網站、客戶端、小程序等）的操作行為數據”。其背后原理是：用戶和界面發生交互，系統需要向服務器發送請求和返回請求，把這些請求預埋一段計數代碼，就能得到頁面的曝光數據和用戶的操作數據。

埋點需要產品經理或設計師做好數據指標的定義，跟開發工程師提前溝通，讓開發工程師在代碼中嵌入埋點。一個埋點由多個字段組成，規范地定義字段，有利于我們在數據平臺搜索埋點更方便。當我們懷疑數據有效性時，也更方便排查埋點問題。

埋點類型可分為曝光埋點、操作埋點和時長埋點：

1. 曝光埋點可以捕捉頁面被展示的次數，可以是針對整個頁面，也可以是頁面中的某個區域。即我們常說的PV、UV。

2. 操作埋點則是在用戶對頁面某個區域（按鈕、卡片、提示條等）進行手勢操作（點擊、雙擊、長按、滑動等）時，進行打點記錄。對應的，也稱之為某個操作的PV、UV。

3. 時長埋點是通過標記以上兩類埋點、并計算時間差獲得的。比如，我們記錄用戶選取模板耗費的時長，可以通過離開頁面的時間（t2）-進入頁面的時間（t1）計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。

基于以上3種原始數據，我們可以運算得出點擊率、功能滲透率、人均點擊次數、人均使用時長等具有對比價值的數據。

較之于二手資料和調研數據，埋點數據更加貼近用戶的真實表現，作為反饋指標的靈敏度更高，可挖掘性更強，也能作為客觀衡量指標引入到每一次產品迭代中。

設計師理解埋點的原理，有助于在數據采集環節跟數據開發更好地溝通，并提出合理的數據需求。另外，當我們拿到一組數據，也需要從根本原理上去判斷數據的信度和效度，確保數據沒有質量問題再進行下一步分析。

PART 02

——————————

數據之于設計

數據分析能力會在UX設計師的崗位招聘要求中被提及，但除了電商和廣告行業的數據化設計知識體系較為成熟，其他領域還在探索。另外，相比于市場營銷、產品經理、產品運營等職能，設計師的分析框架是相對晚熟的。

實際上，我們很難從招聘廣告中歸納“具備數據分析能力的設計師”長什么樣，但我們期望這樣的設計師對數據的感知力強、分析邏輯清晰、數據經驗豐富，對某個垂直領域的數據儀表盤了如指掌等等。

數據對UX設計有什么用？或者說，在設計鏈路的哪一個環節，數據和設計才能發生化學反應？

UX設計日常流程為：得到一個需求（需求評審/需求挖掘）——輸出設計方案（設計決策）——驗證設計方案（設計實驗）。順著這個流程，我們來看看數據在UX設計各階段的作用。

1/ 需求評審：以提升最終業務數據為目標，評估需求的價值貢獻和優先級

肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念：職能組織有各自的KPI，但未必對最終的業務目標都有利。比如開發人力有限的情況下，產品經理想上線新功能，市場運營想搞推廣活動，設計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向，馬車跑不快。

尤其是當產品進入成長期，我們會發現“能做的事情真的太多了”！不僅僅是來自老板和產品經理的需求，每天都有用戶想教你做產品，剛剛競爭對手又上線了N個新功能等等。另外，當多個產品經理分管不同業務線，每個產品經理都會認為自己提的需求優先級最高。那么，ABCD這幾個需求，哪個更值得即刻實現？

有目標導向和成本意識的設計師，不會拿到PRD就開始畫稿，而是做需求評審。下次產品經理給你提需求，或者自己想要主動提案，不妨從下面幾個問題開始思考效益。

如果這個新功能上線或對已有功能做這些優化點：

｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會因此使用、消費、甚至推薦我們的產品嗎？

｜負向評估：如果不做，是否會造成用戶口碑變差，甚至棄用我們的產品？

｜數據導向：預估這個需求對大盤數據（AARRR）有何貢獻？如果無法在短期看到對大盤數據的直接提升，應該取什么樣的數據指標來評估其價值（GSM模型）？

｜比對優先級：目前有ABCD四個需求，而人力資源有限，當下最應該解決哪個數據環節的問題？

我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數據效益。

一開始，我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾：協作人之間容易竄行誤刪誤改別人填寫的行，甚至把創建人輸入的表頭信息都給刪掉了。

我們模擬信息收集場景，摘出Excel移動端輸入的體驗節點，發現“在有限的屏幕內去處理表格信息，需要來回滾動/縮放表格，再回到自己的行再輸入”這一點最容易發生錯誤，尤其在沒有凍結首行的情況下。

我們有收集表功能，也支持表格轉收集表，但是都依賴創建人主動去使用這個品類/這個功能。我們是否可以在創建人不干預的情況下，直接把來回滾動的表格輸入變成縱向的表單輸入？

以上都是從“感知”角度發現和分析問題，確認了“存在這么一個問題”，然后提出了一個可行的想法。往往這個時候，我們容易為之興奮。

但是如果我們堅持更精益的投入產出比，我們應當評估“這是不是一個要優先解決的問題”，即評估收益：改變Excel移動端的輸入體驗，能帶來什么收益？

首先，我們做正負向評估。

｜正向評估：如果做，用戶可以在手機端更順暢地錄入信息，避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產品，但這個體驗未在競品實現，能形成差異化的記憶點，也許能帶來好的口碑。

｜負向評估：如果不做，手機端的Excel輸入體驗跟其他競品無差，用戶倒不會因此流失，但是創建人會因為協作者的犯錯苦惱，也許會因此轉為采用“IM一對一溝通”來避免出錯。

然后是設定數據目標：如果這個功能落到數據板上，能作何貢獻？

｜數據導向：我們預期這個功能能夠通過提升手機端的輸入體驗，來避免用戶出錯，降低創建人整理數據的負擔，以提高用戶留存（而非預期這是一個拉新功能）。并且，設計假設正確，應該能通過一些數據指標看到用戶的行為變化。

最后，對比同期提出的幾個產品需求，評估優先級。

｜比對優先級：假設Excel按行填寫的需求是A（圖中黃色點），同期有一個影響文檔安全分享的需求B。如果我們按照正負向評估去考量優先級，將AB兩個需求都放在象限圖里，越外層越應該優先處理，那么我們就應該優先處理需求B。

以上是為了將思維可視化呈現給讀者，實操時更重要的是數據意識和敏感度。圖示僅供參考，用何種形式表達不重要。

掌握一套清晰的需求評審思路，才有話語權去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設計師需要具備的目標導向思維和需求分析能力，而是整個團隊都應該建立的數據意識和工作流。這也適用于對設計師提案的自我審查，避免自娛自樂。

2/ 需求挖掘：數據作為產品健康度的體檢指標，為設計圈定問題域

產品在不同的成長階段關注的短期效益會有所不同。初創期，產品先要驗證其假設的需求是不是用戶真實需求、商業模式是否可行。當產品發展到一定的用戶規模，我們可以通過對比關鍵數據指標，去判斷現階段是否符合預期。這就像我們去醫院抽血做體檢，血樣指標可以反映我們當前是否健康。

如何檢驗產品健康度呢？我們首先關注宏觀的數據轉化是否符合預期，即AARRR。海盜指標這一套，想必大家耳熟能詳。但對設計師來說，難點在于如何將宏觀數據轉化與具體的用戶使用場景進行關聯，進而落實到具體的設計任務。

以騰訊文檔為例，在線文檔的核心用戶價值是“從創作到協作的多人多端無縫同步”，因此我們定義用戶的關鍵路徑是“創作→分享→協作”，即：

基于關鍵路徑，我們繼續下鉆分析每一個環節，建立用于監控“轉化質量”的行為漏斗。比如在“分享”這一步，落到APP里，這個行為漏斗是：

我們發現僅30%的創建人在分享文檔前設置了非私密權限——這個數據并不符合我們的預期，因為這會導致創建人分享文檔后，協作人無法直接查看或編輯文檔。協作人需要進行權限申請，創建人則需要處理相應的權限申請通知或更改權限，從“申請權限”到“審批通過”的時間差降低了協作效率。

我們進一步去找關聯的數據指標，來確認“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設置權限”‘、“一個創建者平均要處理多少次權限申請”等等。

通過小范圍的用戶測試，我們了解到“權限設置”是一個視覺盲區。于是，我們優化分享頁的信息展示，來改善“用戶看不見權限設置”這個問題。另外，當創建人在處理權限申請的通知時，提供修改權限的入口，以避免重復處理同一個文檔的申請消息。

最終，我們將“分享前進行權限設置”的轉化提高到80%——吹牛的，業務數據太敏感，無法以真實數據跟大家分享，本文的數字皆為脫敏數據。

這就像一個剝洋蔥的過程。先找到產品的核心價值和對應的主路徑，再拆解到對應的多個用戶任務流，關注微觀的某個環節轉化是否有問題。利用數據診斷產品健康度，然后繼續用數據或其他研究方法下鉆，下鉆到可以落地到設計點的層面。

3/ 設計決策：借鑒用戶行為數據，對方案進行快速決策

2016年聽了白木彰老師在杭州的一次現場分享，他對“Design”的理解非常透徹。“Sign”是“標志”，應該是大家最共通的常識，就像國旗是這個國家的sign。那“De”是什么？臺下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個否定詞”。

對于UX來說，同理。每一次的設計都是一次否定，否定現有體驗的合理性，否定現有的產品、服務或某一功能完全滿足需求。反過來想，則是審問自己的設計方案：每一次的“否定”，真的更好嗎？

這里舉一個“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優化。筆者目前負責騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優化”，其實這更加考驗數據敏感度和對“嚴謹”的堅持。

需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內容”。

“展示問題”的解法有很多：

解法1/ 用UI手段，降低單個menu item的高度。

解法2/ 重新歸類，通過折疊來縮短菜單。

解法3/ 當菜單無法完整展示，重新錨定其在屏幕的坐標。

對比競品，確實有表格產品通過（2）去解決這個問題，但是我們撈數據發現：右鍵菜單中，插入行列是高頻操作（紅色部分），點擊次數比其他功能高5～130倍，且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊，因為這樣做雖然我們解決了“菜單太高”的問題，但降低了點擊效率。

接到某個需求的“A問題”，我們容易一葉障目。但是，會不會因為我們解決了A問題而引發B問題呢？數據幫助我們快速決策，避免B問題的出現。謹慎對待每一次小設計，因為每一次小設計都是一次否定。

4/ 設計實驗：采用數據實驗對設計方案進行擇優或改進

大家對數據實驗應該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實驗方法。

AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設計方案的投放，對比兩組數據，進行方案擇優。這兩個方案的差異要嚴格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經歷相同的時間后對比生長的平均高度差。水、空氣、養分等其他條件要嚴格一致。因此大改版等“多變量”的設計并不適用于AB測試去印證。

大改版則通過灰度測試或拆分變量去做AB測試來確保效果?；叶葴y試是指如果軟件要在不久的將來推出一個全新的功能，或者做一次比較重大的改版的話，要先進行一個小范圍的嘗試工作，然后再慢慢放量，直到這個全新的功能覆蓋到所有用戶。也就是說在全量發布的黑白之間有一個灰，所以這種方法也通常被稱為灰度測試。

設計師需要觀察綜合的數據指標，以騰訊文檔為例常規的指標有：PV、UV、人均點擊次數、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個槽”社區、微博搜索關鍵詞、隨訪身邊的用戶朋友等。

Conclusion

——————————

結語

數據化設計不是對“精心打磨體驗”的否定。恰恰相反，對設計工匠來說，數據分析能力是一種新的“打磨工具”，提倡在設計實施和決策過程中更科學和客觀。UX和數據的關系，就像我們期望鞋子被量產之前能夠有數據佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。

文章來源：站酷   作者：騰訊ISUX

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

編輯導語：在一個團隊里，成員之間“協同合作”是非常有必要的，比如一些崗位沒辦法完全理解設計師的想法，多溝通可以避免一些不必要的摩擦；在出現問題時，現在自己的環節找找問題，再進行溝通；本文作者分享了關于精準還原設計稿的環節，我們一起來看一下。

UI設計師作為展示產品形態的執行層，產品上線前走查視覺與交互還原是必經環節。

設計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結好幾次，但是開發完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。

我們經常會聽到身邊的設計師與開發哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結？

01 了解設計還原

1.1 設計還原到底是什么

「還原」是指事物恢復到原來的狀況或形狀，互聯網中的「設計還原」是說開發后實際界面和設計稿效果有偏差，進行設計校對。

1.2 設計還原的現狀

一直以來，設計驗收都不太受重視：

1. 設計師習慣于把時間用在雕琢設計稿上，而忽略掉后期的設計驗收；
2. 對自己和合作的程序員極其自信，認為對方能知道到自己所有的點，會完全按照設計稿來。

不同的項目類型還原度也不同：用戶產品>B端產品>后臺；對于用戶產品最好是能做到像素級還原。

1.3 設計還原的意義

在這個快速發展、迭代、更新的時代，互聯網產品的用戶體驗重視度越來越高，而其中的產品設計還原也成為了工作流中重要的一環。

我相信每一名UI設計師，心里應該都有一個前端能100%還原設計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。

而視覺還原的高低與否，則直接取決于設計——開發——測試這些環節的協作質量；不僅僅影響上線產品的用戶體驗，還影響著作為產品設計最后一環的工作質量。

02 影響設計還原的因素

經過走訪UI/UX設計師、前端工程師和測試工程師的還原設計圖的工作場景。

深究原因后，線上效果的失真率其實涉及到設計、前端開發、測試這三個環節，分析造成這種現象出現的原因大概有以下幾點：

2.1 從UI設計上來說：視覺處理不規范

• 自由發揮，把界面UI設計當作畫布任意揮灑，完全不考慮實現的難度；
• 標注圖不全，沒有詳盡的對接文檔和設計規范；
• 溝通不到位，評審時沒有將設計思路和易錯點交代清楚
• 沒有考慮設計稿擴展性和前端代碼的邏輯，反復修改，增加FE工作量。

2.2 從前端開發來說：沒有理解設計邏輯

• 時間緊任務重，沒辦法一張一張看標注圖；
• 直男思維，想怎么寫就怎么寫，反正最后要上線，細不細致都一樣；
• 不知道如何解決，內向不肯和UI溝通找到解決方案。

2.3 從測試走查來說：交付走查不細致

• 測試混亂，測功能時提UIbug；
• 測試頁面還原時，提UIbug不細致，用“請參照UI設計稿”概括一切問題。

03 精準還原的前提

了解開發依據哪些規則還原設計稿，前期的準備工作是重中之重，設定好每一個細節規則，后期落地還原時才會將頁面的失真率降到最低。

3.1 視覺規范

UI 設計中，設計規范是設計還原一個關鍵步驟；一個好的規范應該是高效的、簡單易懂的。

設計規范通?？梢园杨伾?、字體、組件等內容制定成規范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復用，后期的維護和開發；在規范的輔助下，開發在搭建全局共用控件時規則更加清晰明了，如按鈕、行間距、字體大小、色值等等。

3.1.1 色彩規范

顏色是設計中最重要的元素，顏色的運用與搭配決定設計的品質感；在 UI 設計中，顏色的使用規范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。

3.1.2 字體規范

文字是APP主要信息的表現，尤其是新聞閱讀、社區APP等制定標準的設計規范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。

不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣；所以需要在設計的時候考慮到字體的設計效果，然后在設計規范中注明；主要規范標準字的大小，標準字要注意跟上文的標準色進行組合，突出APP重要的信息和弱化次要的信息。

3.1.3 圖標規范

在 UI 界面中，具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計模塊，產品的每個頁面中都有可能存在圖標。

設計規范中，圖標一般按照用途分為兩類：應用圖標、功能圖標。

圖標還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。

應用圖標：各種應用程序的識別標志，在應用商店里下載的一些應用程序的標志。

功能圖標：規范中最好標明圖標格式與使用方式。比如 Web 設計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發；如果是原生 APP，那么需要標注圖標導出格式與尺寸。

3.1.4 圖片規范

圖片作為界面設計的重要組成部分，需要標明尺寸規范，分為不同用途的種類。

3.1.5 控件規范

控件是指產品界面中可操作的部件，與組件是有一些區別的：控件翻譯為 Control，組件翻譯為 Component。

通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。

常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。

3.1.5.1 按鈕

按鈕有 5 個狀態：正常、點擊、懸停、加載、禁用。

需要在規范中分別羅列出這五個狀態，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標按鈕的話，除了上述參數值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。

3.1.5.2 輸入框

用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。

3.1.5.3 選擇

選擇可分為單選與多選，并且也有五種不同狀態：未選擇、已選中、未選懸停、已選失效、未選失效項，規范中需展示出所有效果狀態。

3.1.5.4 進度條

用于向用戶展示步驟的步數以及當前所處的進程。

3.1.6 缺省頁

• 空狀態頁面：顯示對應的頁面空狀態的圖標，增加相應的引導按鈕。
• 無網絡狀態：在沒有連接到網絡時的提示頁面。
• 404&505頁面：發生未知錯誤時的頁面。

3.2 組件規范

常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。

如果UI忽略規范，前端在不知道有可復用組件的情況下，很可能每一次都要手動書寫代碼；寫的代碼越多，遺漏掉細節和犯錯的可能性越大，導致效率降低。

最關鍵的是——對于今后的迭代，前端又得一個頁面一個頁面修改。

3.2.1 組件的好處

統一性：

• 整個產品不同模塊的業務按照統一規范使用，提升整個產品的視覺交互統一性，減少開發樣式，提升開發效率。
• 避免設計師自由發揮新的組件控件樣式。
• 統一交互設計規則，減少用戶操作的迷惑感，提升產品的體驗。

高效性：

• 一套組件可以幫助設計師簡單處理產品經理的初步需求，設計師通過拖動組件搭建界面來跟產品經理對需求，確認完善需求后再進一步推進需求——節約時間，提升工作效率。
• 減少制作組件控件的時間，不需要對組件重新下定義，提升設計效率，可將更多時間放在流程體驗和設計推動上。

延續性：

• 通過設計規范，在以后更新中可以連續迭代，避免斷層。
• 團隊即使有成員離開或者加入，通過設計規范和組件庫可以快速的接手和進行正常工作。

3.2.2 組件化的特點

• 通用性：意味著足夠基礎和常見且不帶業務屬性，參與設計每秒的每個人都應該知道這個組件的功能及目的，同時一定一定擴展性。
• 靈活性：是要求元件的組合需要靈活，可以在不同場景下可以通過相互組合來快速構建交互框架原型圖，并根據不同頁面結構的變化來適應新的業務需求。
• 選擇性性：指的是適用于多個業務或產品，在設計過程和研發過程中都可以高頻轉換。

3.2.3 組件化分類

我們根據當下現有的業務場景和對往后一段時期的業務發展方向進行規劃，將組件庫的組件類型分為通用組件和業務組件；一般業務組件庫是不對外的，所以在Ant Design官網只能看到通用組件部分。

3.2.3.1 通用組件

指適用范圍廣，擴大頻次高，可重復使用多個業務且不包含業務邏輯。某些導航欄，按鈕，吐司，彈窗等。我們將通用組件細分為五個子類別：基礎組件，導航，數據錄入，數據展示，操作反饋。

2.3.2 業務組件

這類組件對比通用組件而言最大的特點就是包含了一系列業務屬性，跟產品功能有重疊的關聯性，因此影響到適用范圍可能僅限于于1?2個業務系統或特殊場景，且復使用頻次不高。畢竟使用場景特殊也有限，放出參考意義不大。

2.3.3 組件化搭建流程場景

組件化的搭建在兩種場景下進行：

1）產品立項前就開始組件化，在產品0到1之前，擁有一套組件和設計規范。設計師可以從以前項目的組件庫和設計規范直接套用并修改，這樣項目前期設計做起來更加方便且省時省力少挖坑。

2）產品經歷過0到1后，產品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設計、生成插件庫、驗證開發。

具體的組件化設計升級流程我總結成了下圖：

當團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。

組件庫重建之初無法一應俱全，是需要后續設計師不斷的維護與迭代的。

3.3 詳盡標注

關于設計輸出，現在很多像藍湖、zeplin、Pxcooker這種標注軟件把設計師從手動標注解救出來，往往把視覺稿在藍湖一扔就完事，前端開發完界面視覺還原度還是不高。

因為標注軟件只能負責生成元素的尺寸、樣式，遇到復雜樣式即使你反復衡量的一些像素，開發還是會漏掉——這樣很有可能出現視覺災難。

所以，一些復雜而又關鍵的頁面我建議可以貼心的做些手動標注，主動告訴開發重要性和注意點。

我們現在工作中會有兩種標注情景：

3.3.1 運營標注

因為很多數據是后臺傳輸到前端，有圖片、有文字，每個內容都需要給運營設置一個上傳標準。

3.3.2 開發標注

開發標注是從設計稿落地成代碼的主要參考，除了藍湖提供的標注，我們還需要寫一些重要部分設計說明，例如：模塊區分、局部特殊設計（該內容根據自身產品而確定）。

3.3.2.1 常規手動標注

3.3.2.2 特殊模塊/頁面劃分說明

復雜的表單設計，是很具有代表性的復雜頁面，根據頁面的布局進行原型化示例，幫助前端更好的搭建代碼框架。

3.4 同步切圖邏輯

關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。

如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應該提前跟開發溝通好。

3.5 了解開發思維

設計-開發這個環節的協作質量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質，我們和開發之間溝通是個棘手又麻煩的歷史遺留難題；設計師與開發雞同鴨講從而導致視覺還原度低下的局面，幾乎每天都在上演。

俗話說“知己知彼百戰百勝”，如果設計師能夠了解一些基本的開發術語以及開發流程，就可以更好的打破溝通隔閡。

那網頁設計稿的實現具體是怎樣操作的呢？

步驟可以概括如下：

3.5.1 設計師的要了解的「盒子模型」

3.5.1.1 什么是盒子模型

在開發的工作流當中反復提到的盒子模型。雖然不需要完全了解前端是怎么通過代碼來落地你的設計稿的，但你一定要知道什么是「盒子模型」。

「盒子模型」是前端的基礎知識，在「盒子模型」理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。

3.5.1.2 盒子模型的組成

每個元素都看成一個盒子，盒子模型是由 content（內容）、padding（內邊距）、margin（外邊距）和 border（邊框）這 4 個屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。

舉一個真實界面示例，我們在瀏覽器中打開「開發者模式」可以看到網頁的樣式代碼以及當前界面是如何通過「盒子模型」來布局的。

前端并不能簡單的像UI畫圖時一樣，隨意地拖放一個可見元素到某一個位置；他們要通過把每一個元素裝進一個「盒子」中，再去界面中定位它所處的位置。

3.5.1.3 了解盒子模型對于UI的好處

當你摸清了前端是如何布局實現你的設計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題，善用「盒子」，將界面中每一塊布局「盒子化」。

我舉一個示例，如果我們不使用「盒子」，當我們在做一個卡片時，前端并不知道UI是如何定義每一個元素的間距；比如，然后將這一個間距套用在他也不知道應該設置為多高的「盒子」當中。

所以UI在出稿時就帶入「盒子模型」思維，合理地構思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。

04 精準還原的落地方法

優秀的設計離不開開發人員的落地支持，作為設計師，協同開發人員完成設計落地也是工作中重要的一環。

做好以下幾點，站在開發人員的角度為他們“多想一步”，高質量的設計還原指日可待。

4.1 設計宣講

在進行設計還原的時候我更希望大家把設計評審的環節重視起來，之前也有詳細的講到過《如何進行設計評審》的，因為我認為評審對于設計還原的意義是把問題前置化。

通過設計評審可以把改版視覺變化最大的地方和開發說明清楚，這些改版布局框架改變都會增加開發工作量；這個環節把握好了，那基本都能實現出來，特殊情況除外，比如前期忽略了一些后臺數據的問題。

有些細微的地方需要我們特別像開發說明，也加深他們的印象，在實現時候就減少出錯；像開發走讀的時候，只把關鍵核心點，規則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發也輕松一些，就比如前期基礎沒打好，后面深入很難。

設計師做好會議記錄（記錄問題及解決方案，以及達成的共識），并且在會議結束后以郵件形式發送前端們，抄送產品和運營，確保會議內容的傳達到位；讓設計師與前端工程師相關問題達成一致，提升工作效率。

在開發緊張環節中，即使我們前面所有工作都準備好了，也很難避免開發不找我溝通；這時候我們要積極回應他們，并且和他們一起處理問題。

比如某些難度大一點的頁面，開發實現效果和設計稿差異不?。荒敲催@時候，開發會截一張他們實現的效果圖給你看，這時你就要仔細去找問題，不要一口咬定就是開發的原因；先溝通具體原因，然后找出解決辦法，如果是標注出現問題，比如標注標死了，頁面不靈活，適配局限性很大。

4.2 視覺走查

在視覺走查的時候我們可以把test環境下的頁面和設計稿拿出來對比，走查頭部、尾部等位置是否完整統一，按鈕樣式、反饋狀態、報錯等樣式是否統一；是否有缺少的場景和狀態，根據任務流程對場景和狀態進行排查，保證設計的完整性。

這里給大家推薦兩個視覺走查方法：

1）大家來找茬法

驗收的時候，我們需要把開發實現后的效果截圖，然后再去和設計稿做對比。

我們可以直接把截圖放在設計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需要修改地方的參數。

2）頁面重構走查

走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。

有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再給到具體的數值給開發；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾

4.3 交互反饋

4.3.1 確?？捎眯?/span>

設計任務流程，進行設計走查，在移動App端，我們所設計的應用是建立在手指點擊操作的基礎上進行使用的。

我們的手指不像鼠標一樣能夠精確定位和響應，所以我們需要在設計的過程中確?？牲c擊的區域能夠較為明顯的識別。

4.3.2 確保易讀性

文本內容是大部分產品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。

在眾多設計原理中，格式塔原理一直被廣泛應用，它可以很好的梳理界面信息結構、層級關系，從而提升設計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。

4.3.3 反饋機制

當用戶和產品需要交互時，會使用不同的模式反饋信息或結果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。

常見的三種反饋信息如下，大家可以在此基礎上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應等細節

• 提示信息：如警告、通知，常見形式 Alert、Badge、Popover；
• 過程反饋：加載狀態、錄入反饋、確認彈窗；
• 結果反饋：全局提示、對話框反饋；

4.3.4 動效還原

動效這塊是產品中比較高規格的一個存在，所以在使用的過程中一定要謹慎，不能隨意加入多余的動效，導致在使用產品的過程中出現問題。

4.4 觀察敏感點

在我走查的經驗多了以后，發現 最容易造成落地頁面與設計稿視覺差異的，其實就是顏色與間距還有圖標的視覺錯覺。不要小看這兩個細節元素，把控不好它們會讓落地頁面效果大打折扣。所以在進行頁面還原的可以著重對比一下幾點:

4.4.1 分割線

在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設計師在開發前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。

所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。

下面主要以3個主要場景來分點解釋分割線的標注：

• 列表流；
• feed流；
• 內容塊之間。

4.4.2 投影

陰影作為一個重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現給用戶。

常規投影與彌散陰影推薦使用css代碼完美實現；特殊情況下還需提前與開發人員溝通權衡各種方式的利弊，選擇適合項目產品的實現方式。

結合自己實際的工作經驗和與開發人員溝通的心得，實現彌散投影的方法，可以通過兩個方法實現：

1）切圖對接開發人員

雖然切圖可以解決這個問題，但是切圖也有一些弊端，因為每個卡片都使用切圖的話，會使開發的包變大，可能會出現加載慢、閃退等情況，這些體驗也是很糟糕了；所以在這個過程中的一些問題務必要提前與開發人員及項目人員溝通好。

2）CSS代碼實現

常規情況下，效果都比較好，但是也會遇到一些遇到異常情況，比如不規則形狀，通常用代碼也比較復雜，這個時候需要提前與開發人員溝通切圖情況，避免后期一些問題。

在做設計的過程中，我們需要更好地理解下游的工作，達到一個高效的溝通。

不管是哪一種方法，沒有對錯之分，關鍵是要懂得“權衡利弊”，提前與開發人員溝通到位；只要是適合自己公司項目且能夠高效還原設計稿的方法，都是值得一用的。

4.4.3 文字行高

文本間距也是影響落地效果的關鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。

UI出稿時應該注意 文本行高可能導致前端的測量誤差，文本間距主要的原因是 sketch 與 ios 系統中字體的行高不同；最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。

首先我們要理解什么是行高（line-height）。

我以 Sketch 為例，當我們設置了一個70px的文本，Sketch 會默認給我們設置文本為98px行高，文本的上下會包含一定的空白像素。

如果UI不設定行高規范，落地過程中就會出現以下問題：

行高的解決辦法：

面對行高的問題，我一般會在設計的過程中，輸出規范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進行對接落地。

最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。

最近看到了一個新的公式可以同步開發根據字號設置行高。

設字號為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數 L（行高） 比如：12 + 2 * ceil(12/10) = 16。

注意這里適用于單行行高，由于多行涉及到的排版問題不僅僅是行高帶來的，有機會的話可以單獨聊一下。

推薦DoraemonKit 是一個功能平臺，能夠讓每一個 App 快速接入一些常用的或者你沒有實現的一些輔助開發工具、測試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經實現的與業務緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺，讓功能得到延伸，接入方便，便于擴展。

4.4.4 視覺重心修正

在設計上為了保證界面的視覺平衡，往往不是設計軟件直接精準對齊，我們總是會通過調整間距、大小或者角度補齊一些負空間，讓畫面保持視覺平衡。

還有設計中通常向右箭頭來表示模塊入口，當我們把箭頭和文字右對齊，箭頭視覺上會更外突；這時候我們會往里面縮進1至2像素，但是切圖完給完全不知情的前端后，設計師要主動講解一下，或者寫進規范里。

項目會有些需要展示logo的地方， 有的圓形、有的長方形、有的純文字，尺寸差距比較懸殊。

這種情況下，我們需要給他限制一個高度，在這個高度以內，再根據logo本身的體量來調整圖形的大小，處理好logo的視覺平衡。

4.5 考慮特殊場景

特殊場景在設計過程中常常會被忽略，等到在現實中碰到才會意識到缺失異常狀態會非常尷尬，所以大家在完成主流程設計后，一定也要考慮到特殊場景。

大家可以參照以下幾種場景對設計進行自查優化調整：

1）網絡異常

考慮到網絡異常情況時，通常產品會通過異常狀態頁面或者交互反饋來告知用戶當前的異常狀態和如何解決問題（解決方案引導、刷新、toast）。

2）服務器異常

服務器異常狀況較少出現，時間也較短，通常不提示具體原因，設計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導。

3）空狀態

空狀態指的是頁面中無內容，主要的幾個情況，設計師需要根據不同的場景給出文案+插畫的表現形式引導用戶：

• 無權限，針對的是某些需要權限開啟后才能獲取內容的頁面；
• 搜索無結果，對應搜索無相應結果的空狀態提示；
• 內容為空，如初始狀態、內容被清空后的狀態。

4）內容缺失

內容缺失展示效果的考慮，設定頁面圖片缺失的占位圖。

5）加載頁面的表達方

考慮網絡加載或者數據加載的時候會等待幾秒鐘，通常產品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。

4.6 關注機型適配問題

設計還原的時候最后還還看一下不同機型適配的問題。保證不同機型的界面呈現效果一致。

4.6.1 動態眼光

手機適配的時候很多設計師會遇到一個問題，就是在750*1335的屏幕上做的設計圖；但是適配到640*1136的屏幕上就有元素放不下，所以設計師在出圖時需要用動態的眼光去考慮問題。

知識點：在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。

4.6.2 固定適配內容

在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。

4.6.2.1 圖標或按鈕

4.6.2.2 搜索框

4.6.2.3 Y軸間距

一般來說，Y軸的間如果在相近的組件里，都會是固定的，不會有變化。

4.6.2.4 圖片

像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會是間距或者數量，如下圖所示：

對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。

4.6.3 自適配內容

自適配內容也給大家梳理出來。

4.6.3.1 文字彈性適配

文字流指在多行文字的情況下，文字數量變化會影像頁面布局和元素大小，如下圖所示：

文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。

當文字左右兩邊有內容的時候，我們需要標明文字可顯示的范圍，也就是說它最多能顯示幾個字——這種方式可以做到較好的適配，也是做快速常用的適配方法。

4.6.3.2 banner

這里說的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應，界面中的元素間距和數量不變，元素尺寸進行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：

對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。

05 設計還原的思考

假設視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方沒理解你的想法？

我感覺可以按照以下幾個方法去做：

5.1 提升設計輸出質量

設計團隊內部先弄明白改版的意義，畫好標注色值、像素的示意圖和文檔，做好產品原型等任何能讓對方不需糾結，直接可以上手的工作。

做好前期的準備工作，盡可能的多做思考，完善設計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產生的設計還原問題就會大幅減少。

多向開發同學請教，即便遇到技術確實難以實現的情況，不要逃避或者過于固執，了解具體原因，不斷累積自己的技術知識；自己的專業、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。

5.2 提高設計師話語權

這是一個比較復雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團隊越大，情況越復雜。

設計師團隊或者個人的話語權如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權是贏得的，而不是賦予的；想要改善被動的局面，要認清所處的環境，問題的癥結，調整定位，并付出努力；只有證明了設計確實能夠解決問題，甚至驅動商業價值，才會逐步提升話語權。

5.3 灌輸用戶體驗的重要性

完成一項任務時最重要的是團隊的思維模式是否統一，設計師在乎用戶體驗，工程師只在乎開發成本，那問題沒辦法達成一致是很正常的。

想要讓大家認同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。

只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團隊的思路就會有所轉變。

5.4 按照進度和優先級優化

設計師自己可以先按優先級去排布還原順序，看這1像素是否對當前產品重要性。

在搞清楚產品進度、優先級的情況下，記錄所有還原問題，自己標記優先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發同學共同摸索一套雙方都能接受的清單模式，標明問題，修改建議，重要層級，根據實際情況詳細說明或者簡要說明，能夠當面溝通更佳。

5.5 加強團隊建設

良好的團隊合作氛圍是有效的潤滑劑；好的合作關系如同一條戰壕里的戰友，哪怕多年后回想起來，也應該是一起沖鋒陷陣的光輝歲月。

設計師應該認識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責任或者互相推諉，逐步打造自己的聲譽和氣場。

06 結語

一個優質的項目落地是各部門協同合作的成果，就像我們玩游戲，后期高質量的輸出也需要前期優秀的輔助來打鋪墊。

在“協同作戰”的基礎上，靈活運用規范、標注和走查的方法來主動推動項目的進行；不僅可以讓設計稿得到最大程度的還原，也可以提升我們協作能力和對環節的把控能力。

任何問題只要多交流，會避免很多阻塞情況；出于設計師的角度當然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內做到最好。

在后期視覺驗收的時候，我們可以換位思考，把自己當做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發修改，減少重復返工的次數，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發節省時間，反過來也幫我們自己減少了二次驗收的成本。

文章來源：人人都是產品經理     作者：郝小七

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

什么是分類

簡單地講，分類就是按照種類、等級或性質分別歸類。

分類的特點

1、共同性：

某種事物無論是按什么分類，只要是屬于同一種分類，就一定有一個共同的屬性，而這個屬性就是分類的依據。

假如手機是指“移動便攜性的通訊設備”，那么小米手機、華為手機、蘋果手機等，雖然系統不同、性能配置不同、外觀設計不同，但是都可以歸類到手機，因為它們都具備“移動便攜性的通訊設備”這一共同屬性。

再舉個很簡單的例子，蘋果、梨子、芒果都可以劃分為水果，因為他們具備“多汁且主要味覺為甜味和酸味，可食用”的屬性（定義來自百度百科），這些屬性是歸屬于這個分類的必要條件?；谶@個分類，我們比較容易判斷得出，生菜不是水果，因為雖然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。

2、組織性：

分類可以把雜亂的事物變得規整，把凌亂的信息按照某些維度劃分，使事物更加清晰。

前兩年風風火火的垃圾分類，就是一個例子。生活中所有物品廢棄后都可以成為垃圾，如果不進行垃圾分類，處理成本高且污染環境。而垃圾分類，就是將垃圾按一定規定或標準將垃圾分類儲存、投放和搬運。

既然分類是按照某種方式進行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。

“簡單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問他們的分類標準。如果眾口不一，或者根本就難以回答，你就有麻煩了。”

垃圾分類很火還有一個原因，因為用戶經常不知道什么物品屬于什么垃圾，這就對垃圾分類產生很大的阻力，網上一時間有了很多識別物品垃圾分類的產品功能。

我之前使用三星手機，每次想要在設置里面尋找某功能，都很讓人煩躁，因為手機設置里定義的某功能的分類方式，與我們的認知并不一致，這就會造成尋找時及其低效的情況，同時也會引起強烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認知的分類方式不一致，你就極難找到。（不過三星很有意思的一點是，盡管在設置的分類項里找不到，但是往往能在設置項下方的推薦查找處找到相應功能，這就很魔幻。）

3、高效性：

分類本身就是將混亂的事物進行歸類，這帶來一個很明顯優點，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對輕松地找到。

比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應用商店的眾多應用里，尋找某款應用，比較常用的方式就是搜索或者分類。

分類可以將應用按不同用途進行劃分，比如視頻、拍攝、工具、社交等。通過這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。

4、對比性：

分類還有隱藏屬性，就是對比性。許多用戶使用分類時，也會喜歡進行對比。

還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進行對比，正好可以讓你更輕松地對比哪款軟件更適合你。

5、全面性：

分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物，就會造成用戶尋找時的盲區，證明這種分類方式本身不合理。

假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時大概率就不會再通過分類進行尋找了，而這種糟糕的體驗，也會讓用戶對這個產品的分類變得很失望。

6、多樣性：

剛才說到，同一分類是圍繞同一個屬性的。但是，同一個事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。

一首歌，如果按照語言體系維度進行劃分，一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分，一般可以劃分為電子、輕音樂、搖滾、說唱等。

我們對事物的認識方式是立體的，事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物，甚至同一個人，是可以有多種分類方式的。

設計分類功能

說完分類的許多屬性，我們聊聊在互聯網產品中，用戶會在什么場景下使用分類？我們又該如何設計分類功能？

1、分類的使用場景

首先，用戶會在什么場景下使用分類？從產品層面，分類是便于人們查找某事物的一種方式，因為相對比較清晰、高效。

這里有個很關鍵的點，就是“查找”。也就是說，分類的使用場景，偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。

互聯網產品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點，分類側重于“屬性”區分。

大部分用戶使用分類時，行為特點是相對主動的。此時用戶未必有十分明確的目標，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時候你打開了大眾點評，你只知道要吃中餐，這時你可以在中餐的分類里去找適合你的店。

用戶的目標如果十分清晰，則更適合直接搜索，因為這比起分類查找的路徑更短也更高效。

總結一下，我們要設計分類功能，需要從用戶的角度來觀察分類這件事情。：

· 用戶主要的行為模式：人找內容。

· 有目標但不夠明確。

2、如何設計分類功能

a、分類的層級

我們需要先了解分類的細分層級，分類的層級大部分不超過 4 層，但會因不同產品的定義不同而有所區別。

一般來說，第一層是顆粒度相對較大的，接下來會層層在上一層的基礎上細化。

以京東的分類為例：

第一層：奢侈品，箱包，手機等；

第二層：手機包含：熱門品牌、手機類型、運營商、手機配件；

第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；

第四層：蘋果手機包含：iPhone 12、iPhone 11等；

最少的層級是兩層，比如垃圾分類：

第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；

第二層：具體的垃圾物品。

就體驗層面而言，建議分類層級避免超過 3、4 層，盡管本身可能會提升細分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標內容在哪一分類。經過幾層判斷后，才能找到目標內容，這對于用戶的理解成本是比較高的。

此外，太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤，就需要返回繼續查找，效率低、使用門檻高。

當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求，因為內容量龐大，所以還需要更多的過濾，需要依據產品類型而定。

由于目前許多產品都發展到相對成熟的狀態，所以設計分類功能時，一般不需要對分類方式再進行劃分，主要原因是相同類型的產品，分類方式大同小異。用戶的理解習慣上，對于某事物的分類也有基本的認知?，F在設計分類功能，主要是對頁面交互及視覺層級進行重新設計和調整。

b、如何根據產品設計分類

我們會梳理常見的分類交互框架，從分類入口、頁面布局等層面可以看到產品中分類功能的定位強弱。這里列舉的分類形式，會根據產品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。

• 側邊導航型分類

以京東 App 為例，京東把分類功能作為一個主要的頁面模塊。分類 tab 占據了 App 的第 2 個底部 tab。

使用京東的用戶，購買的目的性相對較強，京東主打的就是自營正品和快遞速度，商品與淘寶相比會少很多，但依然很全。用戶習慣上，“逛”的屬性沒有淘寶那么強。首頁以功能區+信息流為主，偏向于商品分發+逛信息流，而分類功能則主要滿足相對明確目的用戶需求。

京東分類頁左側為一級分類，右側為二、三級分類。側邊導航將分類豎排的最大優點是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高，可以配置運營位，如放置運營 Banner ，且支持左右滑動 Banner 。下方一般放置二、三級分類。

右側頁面滑動時，頂部有輔助查找二、三級分類的導航分類標簽，便于用戶快速查找：

切換一級分類：這種框架切換分類的方式主要有兩種：1、點擊左側導航欄進行切換；2、向上滑動右側頁面進行切換。用戶習慣上，第 1 種方式會更高效，而第 2 種切換方式會更自然，更符合手勢操作。

以【推薦分類】為例，右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區分頁面分類層級，頁面向上滑動時，通常會設計繼續上拉切換的提示。目的是提醒用戶，該部分已經滑動到底了，繼續上滑會切換到下一部分，明確區分不同分類。

上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】，右側分類標題與左側導航一一對應，并且分類之間無明確的頁面分隔區分，所以滑動時無需設計切換到下一部分的提示。

以上講的，右側頁面均是二、三級分類入口，并不是具體的。分類層級或類型少的情況下，右側可以嘗試放置具體內容，比如華為應用市場的處理形式。

需要注意：

1、左側導航占據了屏幕縱向的固定位置，從而縮減了頁面寬度。

2、由于層級多，左右側均是分類入口，用戶無法在頁面直接看到具體商品/內容。在電商產品上，用戶容易區分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內容在哪一分類類目下，可能造成用戶流失。

3、如果沒有具體的內容呈現，對于內容、商品等分發效率也存在影響。

• 頂部 Tab 型分類

頂部導航型的優點是將多級分類與具體內容結合在一個頁面，可通過點擊或者滑動切換不同分類，將觸達具體內容的路徑盡可能減少，提升具體內容的曝光。

以掌閱 App 為例：最高層為一級分類，可滑動。第二層是二級分類，更精準分類挑選。第三層導航偏向于篩選。第四層為具體內容，用戶無需通過頁面跳轉就能查看。這種設計特點很明顯：內容曝光 > 分類效率。由于一級分類不多，可以通過左右滑動查看，避免浪費頁面空間。二級分類類型多，采用折疊的形式將分類收起，點擊可以展開更多二級分類。

顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認狀態下，占用頁面頂部的空間。這種結構，在設計時為了能夠節省頁面空間，二、三級導航會伴隨用戶向上滑動的手勢折疊，提升內容的曝光效率。用戶在滑動場景下，會更聚焦于頁面具體內容而非導航，所以折疊的設計比較巧妙。

這種設計由于具體內容曝光的效率高，受到許多產品的青睞，適合于資訊類、內容類等產品。比如微博首頁，微博側重于內容的主動推薦，所以將分類弱化為一行導航欄，頁面主體為具體內容推薦。用戶瀏覽的內容有相對固定的傾向，比如會喜歡看綜藝、社會、美妝等內容，并沒有很強的尋找不同分類的訴求。

若用戶想要設置常用的分類頻道，可點擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。

知乎的處理邏輯與微博一致：

淘寶的分類相比于一般電商類的產品，會比較特別，常見的電商類產品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經往全面信息流化的方向發展，為了推動用戶在淘寶中“逛街”，甚至連分類都已經往信息流化的方向發展。

淘寶的分類功能正在弱化，不像京東、蘇寧占據著底部第 2 個 tab 的位置，而是在首屏功能區的最后一位。點擊后，也不再是常規的側邊導航，而是強化商品外顯。

淘寶分類頁除了上方的一、二級分類，下方都是商品推薦，向上滑動就是瀑布流，增強商品而弱化分類效率。

如果用戶想看其他分類，可以通過左右滑動切換。如果希望查看更多分類，需點開旁邊的”更多“按鈕，通過”更多“按鈕進入的頁面，側重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對算法推薦的信心，我發現不同手機看到的分類順序并不一致。

• 聚焦型分類

以 B 站為例，B 站的分區頁面的設計形式為展示番劇、國劇、放映等所有一級導航，而將細分層級隱藏到下一級頁面。

這種設計方式適合一級分類類型很多，且重點在于高效呈現這些分類類型的場景。二級頁面聚焦于具體的內容，可以避免將一、二級分類堆疊在一個頁面，滿足用戶對查找分類的效率的要求，避免過載的信息量使頁面變得復雜。但顯而易見的，這種結構不利于用戶在當前頁面直接看到下一層級內容。

App store 整體邏輯與 B 站一致，區別在于排列方式為列表型排列。

vivo 應用商店也是聚焦型分類，但是會把二級分類呈現出來，與側邊導航型分類很相似，區別在于這里是整列表滑動。

• 篩選型分類

前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風格、預算、特色等維度。

上面“好好住”的幾個維度之間，沒有上下層級之分，均屬于同一層級，所以層級是并列而非遞進的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據過多的頁面空間，當頁面上滑后，篩選可折疊以節省頁面空間，同時更聚焦與具體內容。

結語

設計分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認知習慣相沖突從而影響功能使用的情況。

整體上，通過分類功能找目標內容的路徑應該避免太長，因為這會影響到內容曝光效率及用戶對分類之下的具體內容的感知。

分類本身是一種信息組織與呈現方式，設計時需要對產品信息本身有足夠理解，才能有針對性地思考交互框架。分類功能的交互框架多樣，每種都有優點和缺點，需要根據產品定位及訴求（優先展示分類，還是優先展示具體內容）采用適合的交互形式。

需要注意的是，有的產品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強的時效性，能不能看到電影幾乎完全取決于電影何時上映，重點更側重于向用戶推薦最近的電影。

以上分析了分類功能、羅列了比較常見的分類功能設計形式，希望能幫助到各位。

文章來源：站酷   作者：熱風_

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