地理空間數據可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領域，越來越多的政府、企業青睞于通過這種強視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設計師投身于這個領域。而在這樣一個細分領域，也對設計師的能力提出了全新的要求。在該領域，我們團隊沉淀出一套固定且可復用的設計模式。
2015年之后的中國互聯網，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創業”、“精益數據分析”、“增長黑客”等一系列數據思潮開始流行。而UX設計師作為半個產品經理，我們很容易將這股“數據熱”遷移到自己身上：每個UX設計師都要學數據分析了嗎？數據和設計是什么關系？天天盯數據會限制設計師的想象力嗎？數據到底要怎么用？……
過往，設計師一般不會把“數據”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗”，較少考慮成本和商業效益。
通俗來說，就是產品經理負責“生意”，設計師負責“體驗”。以“造鞋”為例子，產品經理做了市場調研，決定要生產兒童運動鞋，設計師負責設計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設計師不需要擔心運動鞋的銷量，產品經理則要跟老板匯報銷量業績。
在紅利消退、產品同質化嚴重和快速迭代的多重壓力下，UX設計迎來了更高的挑戰：僅憑主觀判斷“好不好用、好不好看”來打磨產品內在體驗，不考慮產品的生存、增長和盈利，很難在行業立足。與此同時，隨著數據采集工具的日漸成熟，數據以“客觀”和“便捷”兩大特點，幫助我們更快獲得“設計的依據”。精益化設計是必然趨勢，而“數據分析”是精益化設計的手段之一。
沿用“設計鞋”的案例，UX設計師要在自己所在領域思考：在設計調研的過程中，我們用什么數據指標來衡量這個兒童鞋好穿、好賣？在鞋進行批量生產前，我們有沒有數據資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等？如果有條件進行小范圍的數據實驗，我們如何設計數據實驗來評估好穿好賣？
“理解任何事物都需要先對它進行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個東西，而不是其他東西?！狈浅Ｏ矚g美國經濟學家Thomas Sowell在《經濟學的思維方式》里說的這句話。
如果我們對“數據”下定義，那么產品設計語境中的“數據”具體是什么？數據是怎么產生的？
從數據采集手段來看，互聯網產品的數據來源主要有3個：二手資料數據、問卷調研數據和應用埋點數據。
行業數據和競品數據一般通過二手資料獲得，包括商業交易數據、用戶群的態度和意愿、用戶輿論指數、競品的用戶規模和盈利狀況等宏觀數據。常用的搜索渠道有：百度指數、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。
我們可以將這些理解為“市場數據”，在立項期對產品方向有一定指導意義，能快速了解市場概況，也能幫助產品思考差異化定位的問題。
以“騰訊文檔為”項目為例，我們想提高騰訊文檔用戶創建文檔的成功率，通過模板創建文檔是關鍵路徑之一。研究用戶通過模板創建的路徑時，想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”，從搜索量得知：PPT模板搜索量最高，符合我們的推測；Word模板內容中，簡歷、合同需求量較大，而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多，但我們能夠通過二手資料的方式，快速了解用戶需求的基本面。
問卷調研數據是通過向目標用戶發放問卷獲得的，側重于收集人口學信息、用戶自述的歷史行為、主觀態度或意愿，比如用戶滿意度調查、流失用戶原因調查等。本質上是通過建立假設、再進行抽樣統計的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴謹的問卷分析也會比對后臺數據，校驗用戶說的和做的是否一致，以清洗無效數據。
較之于問卷調研數據，我們想看“用戶做了什么”，則通過分析應用埋點數據獲得。
“應用埋點數據”也叫“埋點數據”、“前端頁面數據”，我們可以簡單理解為“通過技術手段獲得用戶在應用內（網站、客戶端、小程序等）的操作行為數據”。其背后原理是：用戶和界面發生交互，系統需要向服務器發送請求和返回請求，把這些請求預埋一段計數代碼，就能得到頁面的曝光數據和用戶的操作數據。
埋點需要產品經理或設計師做好數據指標的定義，跟開發工程師提前溝通，讓開發工程師在代碼中嵌入埋點。一個埋點由多個字段組成，規范地定義字段，有利于我們在數據平臺搜索埋點更方便。當我們懷疑數據有效性時，也更方便排查埋點問題。
埋點類型可分為曝光埋點、操作埋點和時長埋點：
1. 曝光埋點可以捕捉頁面被展示的次數，可以是針對整個頁面，也可以是頁面中的某個區域。即我們常說的PV、UV。
2. 操作埋點則是在用戶對頁面某個區域（按鈕、卡片、提示條等）進行手勢操作（點擊、雙擊、長按、滑動等）時，進行打點記錄。對應的，也稱之為某個操作的PV、UV。
3. 時長埋點是通過標記以上兩類埋點、并計算時間差獲得的。比如，我們記錄用戶選取模板耗費的時長，可以通過離開頁面的時間（t2）-進入頁面的時間（t1）計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。
基于以上3種原始數據，我們可以運算得出點擊率、功能滲透率、人均點擊次數、人均使用時長等具有對比價值的數據。
較之于二手資料和調研數據，埋點數據更加貼近用戶的真實表現，作為反饋指標的靈敏度更高，可挖掘性更強，也能作為客觀衡量指標引入到每一次產品迭代中。
設計師理解埋點的原理，有助于在數據采集環節跟數據開發更好地溝通，并提出合理的數據需求。另外，當我們拿到一組數據，也需要從根本原理上去判斷數據的信度和效度，確保數據沒有質量問題再進行下一步分析。
數據分析能力會在UX設計師的崗位招聘要求中被提及，但除了電商和廣告行業的數據化設計知識體系較為成熟，其他領域還在探索。另外，相比于市場營銷、產品經理、產品運營等職能，設計師的分析框架是相對晚熟的。
實際上，我們很難從招聘廣告中歸納“具備數據分析能力的設計師”長什么樣，但我們期望這樣的設計師對數據的感知力強、分析邏輯清晰、數據經驗豐富，對某個垂直領域的數據儀表盤了如指掌等等。
數據對UX設計有什么用？或者說，在設計鏈路的哪一個環節，數據和設計才能發生化學反應？
UX設計日常流程為：得到一個需求（需求評審/需求挖掘）——輸出設計方案（設計決策）——驗證設計方案（設計實驗）。順著這個流程，我們來看看數據在UX設計各階段的作用。
肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念：職能組織有各自的KPI，但未必對最終的業務目標都有利。比如開發人力有限的情況下，產品經理想上線新功能，市場運營想搞推廣活動，設計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向，馬車跑不快。
尤其是當產品進入成長期，我們會發現“能做的事情真的太多了”！不僅僅是來自老板和產品經理的需求，每天都有用戶想教你做產品，剛剛競爭對手又上線了N個新功能等等。另外，當多個產品經理分管不同業務線，每個產品經理都會認為自己提的需求優先級最高。那么，ABCD這幾個需求，哪個更值得即刻實現？
有目標導向和成本意識的設計師，不會拿到PRD就開始畫稿，而是做需求評審。下次產品經理給你提需求，或者自己想要主動提案，不妨從下面幾個問題開始思考效益。
如果這個新功能上線或對已有功能做這些優化點：
｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會因此使用、消費、甚至推薦我們的產品嗎？
｜負向評估：如果不做，是否會造成用戶口碑變差，甚至棄用我們的產品？
｜數據導向：預估這個需求對大盤數據（AARRR）有何貢獻？如果無法在短期看到對大盤數據的直接提升，應該取什么樣的數據指標來評估其價值（GSM模型）？
｜比對優先級：目前有ABCD四個需求，而人力資源有限，當下最應該解決哪個數據環節的問題？
我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數據效益。
一開始，我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾：協作人之間容易竄行誤刪誤改別人填寫的行，甚至把創建人輸入的表頭信息都給刪掉了。
我們模擬信息收集場景，摘出Excel移動端輸入的體驗節點，發現“在有限的屏幕內去處理表格信息，需要來回滾動/縮放表格，再回到自己的行再輸入”這一點最容易發生錯誤，尤其在沒有凍結首行的情況下。
我們有收集表功能，也支持表格轉收集表，但是都依賴創建人主動去使用這個品類/這個功能。我們是否可以在創建人不干預的情況下，直接把來回滾動的表格輸入變成縱向的表單輸入？
以上都是從“感知”角度發現和分析問題，確認了“存在這么一個問題”，然后提出了一個可行的想法。往往這個時候，我們容易為之興奮。
但是如果我們堅持更精益的投入產出比，我們應當評估“這是不是一個要優先解決的問題”，即評估收益：改變Excel移動端的輸入體驗，能帶來什么收益？
首先，我們做正負向評估。
｜正向評估：如果做，用戶可以在手機端更順暢地錄入信息，避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產品，但這個體驗未在競品實現，能形成差異化的記憶點，也許能帶來好的口碑。
｜負向評估：如果不做，手機端的Excel輸入體驗跟其他競品無差，用戶倒不會因此流失，但是創建人會因為協作者的犯錯苦惱，也許會因此轉為采用“IM一對一溝通”來避免出錯。
然后是設定數據目標：如果這個功能落到數據板上，能作何貢獻？
｜數據導向：我們預期這個功能能夠通過提升手機端的輸入體驗，來避免用戶出錯，降低創建人整理數據的負擔，以提高用戶留存（而非預期這是一個拉新功能）。并且，設計假設正確，應該能通過一些數據指標看到用戶的行為變化。
最后，對比同期提出的幾個產品需求，評估優先級。
｜比對優先級：假設Excel按行填寫的需求是A（圖中黃色點），同期有一個影響文檔安全分享的需求B。如果我們按照正負向評估去考量優先級，將AB兩個需求都放在象限圖里，越外層越應該優先處理，那么我們就應該優先處理需求B。
以上是為了將思維可視化呈現給讀者，實操時更重要的是數據意識和敏感度。圖示僅供參考，用何種形式表達不重要。
掌握一套清晰的需求評審思路，才有話語權去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設計師需要具備的目標導向思維和需求分析能力，而是整個團隊都應該建立的數據意識和工作流。這也適用于對設計師提案的自我審查，避免自娛自樂。
產品在不同的成長階段關注的短期效益會有所不同。初創期，產品先要驗證其假設的需求是不是用戶真實需求、商業模式是否可行。當產品發展到一定的用戶規模，我們可以通過對比關鍵數據指標，去判斷現階段是否符合預期。這就像我們去醫院抽血做體檢，血樣指標可以反映我們當前是否健康。
如何檢驗產品健康度呢？我們首先關注宏觀的數據轉化是否符合預期，即AARRR。海盜指標這一套，想必大家耳熟能詳。但對設計師來說，難點在于如何將宏觀數據轉化與具體的用戶使用場景進行關聯，進而落實到具體的設計任務。
以騰訊文檔為例，在線文檔的核心用戶價值是“從創作到協作的多人多端無縫同步”，因此我們定義用戶的關鍵路徑是“創作→分享→協作”，即：
基于關鍵路徑，我們繼續下鉆分析每一個環節，建立用于監控“轉化質量”的行為漏斗。比如在“分享”這一步，落到APP里，這個行為漏斗是：
我們發現僅30%的創建人在分享文檔前設置了非私密權限——這個數據并不符合我們的預期，因為這會導致創建人分享文檔后，協作人無法直接查看或編輯文檔。協作人需要進行權限申請，創建人則需要處理相應的權限申請通知或更改權限，從“申請權限”到“審批通過”的時間差降低了協作效率。
我們進一步去找關聯的數據指標，來確認“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設置權限”‘、“一個創建者平均要處理多少次權限申請”等等。
通過小范圍的用戶測試，我們了解到“權限設置”是一個視覺盲區。于是，我們優化分享頁的信息展示，來改善“用戶看不見權限設置”這個問題。另外，當創建人在處理權限申請的通知時，提供修改權限的入口，以避免重復處理同一個文檔的申請消息。
最終，我們將“分享前進行權限設置”的轉化提高到80%——吹牛的，業務數據太敏感，無法以真實數據跟大家分享，本文的數字皆為脫敏數據。
這就像一個剝洋蔥的過程。先找到產品的核心價值和對應的主路徑，再拆解到對應的多個用戶任務流，關注微觀的某個環節轉化是否有問題。利用數據診斷產品健康度，然后繼續用數據或其他研究方法下鉆，下鉆到可以落地到設計點的層面。
2016年聽了白木彰老師在杭州的一次現場分享，他對“Design”的理解非常透徹?！癝ign”是“標志”，應該是大家最共通的常識，就像國旗是這個國家的sign。那“De”是什么？臺下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個否定詞”。
對于UX來說，同理。每一次的設計都是一次否定，否定現有體驗的合理性，否定現有的產品、服務或某一功能完全滿足需求。反過來想，則是審問自己的設計方案：每一次的“否定”，真的更好嗎？
這里舉一個“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優化。筆者目前負責騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優化”，其實這更加考驗數據敏感度和對“嚴謹”的堅持。
需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內容”。
“展示問題”的解法有很多：
解法1/ 用UI手段，降低單個menu item的高度。
解法2/ 重新歸類，通過折疊來縮短菜單。
解法3/ 當菜單無法完整展示，重新錨定其在屏幕的坐標。
對比競品，確實有表格產品通過（2）去解決這個問題，但是我們撈數據發現：右鍵菜單中，插入行列是高頻操作（紅色部分），點擊次數比其他功能高5～130倍，且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊，因為這樣做雖然我們解決了“菜單太高”的問題，但降低了點擊效率。
接到某個需求的“A問題”，我們容易一葉障目。但是，會不會因為我們解決了A問題而引發B問題呢？數據幫助我們快速決策，避免B問題的出現。謹慎對待每一次小設計，因為每一次小設計都是一次否定。
大家對數據實驗應該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實驗方法。
AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設計方案的投放，對比兩組數據，進行方案擇優。這兩個方案的差異要嚴格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經歷相同的時間后對比生長的平均高度差。水、空氣、養分等其他條件要嚴格一致。因此大改版等“多變量”的設計并不適用于AB測試去印證。
大改版則通過灰度測試或拆分變量去做AB測試來確保效果?；叶葴y試是指如果軟件要在不久的將來推出一個全新的功能，或者做一次比較重大的改版的話，要先進行一個小范圍的嘗試工作，然后再慢慢放量，直到這個全新的功能覆蓋到所有用戶。也就是說在全量發布的黑白之間有一個灰，所以這種方法也通常被稱為灰度測試。
設計師需要觀察綜合的數據指標，以騰訊文檔為例常規的指標有：PV、UV、人均點擊次數、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個槽”社區、微博搜索關鍵詞、隨訪身邊的用戶朋友等。
數據化設計不是對“精心打磨體驗”的否定。恰恰相反，對設計工匠來說，數據分析能力是一種新的“打磨工具”，提倡在設計實施和決策過程中更科學和客觀。UX和數據的關系，就像我們期望鞋子被量產之前能夠有數據佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：在一個團隊里，成員之間“協同合作”是非常有必要的，比如一些崗位沒辦法完全理解設計師的想法，多溝通可以避免一些不必要的摩擦；在出現問題時，現在自己的環節找找問題，再進行溝通；本文作者分享了關于精準還原設計稿的環節，我們一起來看一下。
UI設計師作為展示產品形態的執行層，產品上線前走查視覺與交互還原是必經環節。
設計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結好幾次，但是開發完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。
我們經常會聽到身邊的設計師與開發哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結？
「還原」是指事物恢復到原來的狀況或形狀，互聯網中的「設計還原」是說開發后實際界面和設計稿效果有偏差，進行設計校對。
一直以來，設計驗收都不太受重視：
不同的項目類型還原度也不同：用戶產品>B端產品>后臺；對于用戶產品最好是能做到像素級還原。
在這個快速發展、迭代、更新的時代，互聯網產品的用戶體驗重視度越來越高，而其中的產品設計還原也成為了工作流中重要的一環。
我相信每一名UI設計師，心里應該都有一個前端能100%還原設計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。
而視覺還原的高低與否，則直接取決于設計——開發——測試這些環節的協作質量；不僅僅影響上線產品的用戶體驗，還影響著作為產品設計最后一環的工作質量。
經過走訪UI/UX設計師、前端工程師和測試工程師的還原設計圖的工作場景。
深究原因后，線上效果的失真率其實涉及到設計、前端開發、測試這三個環節，分析造成這種現象出現的原因大概有以下幾點：
了解開發依據哪些規則還原設計稿，前期的準備工作是重中之重，設定好每一個細節規則，后期落地還原時才會將頁面的失真率降到最低。
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 缺省頁
常用的 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后，產品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設計、生成插件庫、驗證開發。
具體的組件化設計升級流程我總結成了下圖：
當團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。
組件庫重建之初無法一應俱全，是需要后續設計師不斷的維護與迭代的。
關于設計輸出，現在很多像藍湖、zeplin、Pxcooker這種標注軟件把設計師從手動標注解救出來，往往把視覺稿在藍湖一扔就完事，前端開發完界面視覺還原度還是不高。
因為標注軟件只能負責生成元素的尺寸、樣式，遇到復雜樣式即使你反復衡量的一些像素，開發還是會漏掉——這樣很有可能出現視覺災難。
所以，一些復雜而又關鍵的頁面我建議可以貼心的做些手動標注，主動告訴開發重要性和注意點。
我們現在工作中會有兩種標注情景：
3.3.1 運營標注
因為很多數據是后臺傳輸到前端，有圖片、有文字，每個內容都需要給運營設置一個上傳標準。
3.3.2 開發標注
開發標注是從設計稿落地成代碼的主要參考，除了藍湖提供的標注，我們還需要寫一些重要部分設計說明，例如：模塊區分、局部特殊設計（該內容根據自身產品而確定）。
3.3.2.1 常規手動標注
3.3.2.2 特殊模塊/頁面劃分說明
復雜的表單設計，是很具有代表性的復雜頁面，根據頁面的布局進行原型化示例，幫助前端更好的搭建代碼框架。
關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應該提前跟開發溝通好。
設計-開發這個環節的協作質量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質，我們和開發之間溝通是個棘手又麻煩的歷史遺留難題；設計師與開發雞同鴨講從而導致視覺還原度低下的局面，幾乎每天都在上演。
俗話說“知己知彼百戰百勝”，如果設計師能夠了解一些基本的開發術語以及開發流程，就可以更好的打破溝通隔閡。
那網頁設計稿的實現具體是怎樣操作的呢？
步驟可以概括如下：
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在出稿時就帶入「盒子模型」思維，合理地構思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。
優秀的設計離不開開發人員的落地支持，作為設計師，協同開發人員完成設計落地也是工作中重要的一環。
做好以下幾點，站在開發人員的角度為他們“多想一步”，高質量的設計還原指日可待。
在進行設計還原的時候我更希望大家把設計評審的環節重視起來，之前也有詳細的講到過《如何進行設計評審》的，因為我認為評審對于設計還原的意義是把問題前置化。
通過設計評審可以把改版視覺變化最大的地方和開發說明清楚，這些改版布局框架改變都會增加開發工作量；這個環節把握好了，那基本都能實現出來，特殊情況除外，比如前期忽略了一些后臺數據的問題。
有些細微的地方需要我們特別像開發說明，也加深他們的印象，在實現時候就減少出錯；像開發走讀的時候，只把關鍵核心點，規則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發也輕松一些，就比如前期基礎沒打好，后面深入很難。
設計師做好會議記錄（記錄問題及解決方案，以及達成的共識），并且在會議結束后以郵件形式發送前端們，抄送產品和運營，確保會議內容的傳達到位；讓設計師與前端工程師相關問題達成一致，提升工作效率。
在開發緊張環節中，即使我們前面所有工作都準備好了，也很難避免開發不找我溝通；這時候我們要積極回應他們，并且和他們一起處理問題。
比如某些難度大一點的頁面，開發實現效果和設計稿差異不小；那么這時候，開發會截一張他們實現的效果圖給你看，這時你就要仔細去找問題，不要一口咬定就是開發的原因；先溝通具體原因，然后找出解決辦法，如果是標注出現問題，比如標注標死了，頁面不靈活，適配局限性很大。
在視覺走查的時候我們可以把test環境下的頁面和設計稿拿出來對比，走查頭部、尾部等位置是否完整統一，按鈕樣式、反饋狀態、報錯等樣式是否統一；是否有缺少的場景和狀態，根據任務流程對場景和狀態進行排查，保證設計的完整性。
這里給大家推薦兩個視覺走查方法：
1）大家來找茬法
驗收的時候，我們需要把開發實現后的效果截圖，然后再去和設計稿做對比。
我們可以直接把截圖放在設計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需要修改地方的參數。
2）頁面重構走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再給到具體的數值給開發；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確保可用性
設計任務流程，進行設計走查，在移動App端，我們所設計的應用是建立在手指點擊操作的基礎上進行使用的。
我們的手指不像鼠標一樣能夠精確定位和響應，所以我們需要在設計的過程中確保可點擊的區域能夠較為明顯的識別。
4.3.2 確保易讀性
文本內容是大部分產品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設計原理中，格式塔原理一直被廣泛應用，它可以很好的梳理界面信息結構、層級關系，從而提升設計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。
4.3.3 反饋機制
當用戶和產品需要交互時，會使用不同的模式反饋信息或結果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應等細節
4.3.4 動效還原
動效這塊是產品中比較高規格的一個存在，所以在使用的過程中一定要謹慎，不能隨意加入多余的動效，導致在使用產品的過程中出現問題。
在我走查的經驗多了以后，發現 最容易造成落地頁面與設計稿視覺差異的，其實就是顏色與間距還有圖標的視覺錯覺。不要小看這兩個細節元素，把控不好它們會讓落地頁面效果大打折扣。所以在進行頁面還原的可以著重對比一下幾點:
4.4.1 分割線
在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設計師在開發前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。
下面主要以3個主要場景來分點解釋分割線的標注：
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的視覺平衡。
特殊場景在設計過程中常常會被忽略，等到在現實中碰到才會意識到缺失異常狀態會非常尷尬，所以大家在完成主流程設計后，一定也要考慮到特殊場景。
大家可以參照以下幾種場景對設計進行自查優化調整：
1）網絡異常
考慮到網絡異常情況時，通常產品會通過異常狀態頁面或者交互反饋來告知用戶當前的異常狀態和如何解決問題（解決方案引導、刷新、toast）。
2）服務器異常
服務器異常狀況較少出現，時間也較短，通常不提示具體原因，設計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導。
3）空狀態
空狀態指的是頁面中無內容，主要的幾個情況，設計師需要根據不同的場景給出文案+插畫的表現形式引導用戶：
4）內容缺失
內容缺失展示效果的考慮，設定頁面圖片缺失的占位圖。
5）加載頁面的表達方
考慮網絡加載或者數據加載的時候會等待幾秒鐘，通常產品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。
設計還原的時候最后還還看一下不同機型適配的問題。保證不同機型的界面呈現效果一致。
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流里的圖片，適配的方法大多都是自適應，界面中的元素間距和數量不變，元素尺寸進行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。
假設視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方沒理解你的想法？
我感覺可以按照以下幾個方法去做：
設計團隊內部先弄明白改版的意義，畫好標注色值、像素的示意圖和文檔，做好產品原型等任何能讓對方不需糾結，直接可以上手的工作。
做好前期的準備工作，盡可能的多做思考，完善設計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產生的設計還原問題就會大幅減少。
多向開發同學請教，即便遇到技術確實難以實現的情況，不要逃避或者過于固執，了解具體原因，不斷累積自己的技術知識；自己的專業、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個比較復雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團隊越大，情況越復雜。
設計師團隊或者個人的話語權如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權是贏得的，而不是賦予的；想要改善被動的局面，要認清所處的環境，問題的癥結，調整定位，并付出努力；只有證明了設計確實能夠解決問題，甚至驅動商業價值，才會逐步提升話語權。
完成一項任務時最重要的是團隊的思維模式是否統一，設計師在乎用戶體驗，工程師只在乎開發成本，那問題沒辦法達成一致是很正常的。
想要讓大家認同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。
只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團隊的思路就會有所轉變。
設計師自己可以先按優先級去排布還原順序，看這1像素是否對當前產品重要性。
在搞清楚產品進度、優先級的情況下，記錄所有還原問題，自己標記優先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發同學共同摸索一套雙方都能接受的清單模式，標明問題，修改建議，重要層級，根據實際情況詳細說明或者簡要說明，能夠當面溝通更佳。
良好的團隊合作氛圍是有效的潤滑劑；好的合作關系如同一條戰壕里的戰友，哪怕多年后回想起來，也應該是一起沖鋒陷陣的光輝歲月。
設計師應該認識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責任或者互相推諉，逐步打造自己的聲譽和氣場。
一個優質的項目落地是各部門協同合作的成果，就像我們玩游戲，后期高質量的輸出也需要前期優秀的輔助來打鋪墊。
在“協同作戰”的基礎上，靈活運用規范、標注和走查的方法來主動推動項目的進行；不僅可以讓設計稿得到最大程度的還原，也可以提升我們協作能力和對環節的把控能力。
任何問題只要多交流，會避免很多阻塞情況；出于設計師的角度當然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內做到最好。
在后期視覺驗收的時候，我們可以換位思考，把自己當做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發修改，減少重復返工的次數，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發節省時間，反過來也幫我們自己減少了二次驗收的成本。
文章來源：人人都是產品經理 作者：郝小七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡單地講，分類就是按照種類、等級或性質分別歸類。
某種事物無論是按什么分類，只要是屬于同一種分類，就一定有一個共同的屬性，而這個屬性就是分類的依據。
假如手機是指“移動便攜性的通訊設備”，那么小米手機、華為手機、蘋果手機等，雖然系統不同、性能配置不同、外觀設計不同，但是都可以歸類到手機，因為它們都具備“移動便攜性的通訊設備”這一共同屬性。
再舉個很簡單的例子，蘋果、梨子、芒果都可以劃分為水果，因為他們具備“多汁且主要味覺為甜味和酸味，可食用”的屬性（定義來自百度百科），這些屬性是歸屬于這個分類的必要條件?；谶@個分類，我們比較容易判斷得出，生菜不是水果，因為雖然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。
分類可以把雜亂的事物變得規整，把凌亂的信息按照某些維度劃分，使事物更加清晰。
前兩年風風火火的垃圾分類，就是一個例子。生活中所有物品廢棄后都可以成為垃圾，如果不進行垃圾分類，處理成本高且污染環境。而垃圾分類，就是將垃圾按一定規定或標準將垃圾分類儲存、投放和搬運。
既然分類是按照某種方式進行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。
“簡單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問他們的分類標準。如果眾口不一，或者根本就難以回答，你就有麻煩了?！?
垃圾分類很火還有一個原因，因為用戶經常不知道什么物品屬于什么垃圾，這就對垃圾分類產生很大的阻力，網上一時間有了很多識別物品垃圾分類的產品功能。
我之前使用三星手機，每次想要在設置里面尋找某功能，都很讓人煩躁，因為手機設置里定義的某功能的分類方式，與我們的認知并不一致，這就會造成尋找時及其低效的情況，同時也會引起強烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認知的分類方式不一致，你就極難找到。（不過三星很有意思的一點是，盡管在設置的分類項里找不到，但是往往能在設置項下方的推薦查找處找到相應功能，這就很魔幻。）
分類本身就是將混亂的事物進行歸類，這帶來一個很明顯優點，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對輕松地找到。
比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應用商店的眾多應用里，尋找某款應用，比較常用的方式就是搜索或者分類。
分類可以將應用按不同用途進行劃分，比如視頻、拍攝、工具、社交等。通過這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。
分類還有隱藏屬性，就是對比性。許多用戶使用分類時，也會喜歡進行對比。
還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進行對比，正好可以讓你更輕松地對比哪款軟件更適合你。
分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物，就會造成用戶尋找時的盲區，證明這種分類方式本身不合理。
假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時大概率就不會再通過分類進行尋找了，而這種糟糕的體驗，也會讓用戶對這個產品的分類變得很失望。
剛才說到，同一分類是圍繞同一個屬性的。但是，同一個事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。
一首歌，如果按照語言體系維度進行劃分，一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分，一般可以劃分為電子、輕音樂、搖滾、說唱等。
我們對事物的認識方式是立體的，事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物，甚至同一個人，是可以有多種分類方式的。
說完分類的許多屬性，我們聊聊在互聯網產品中，用戶會在什么場景下使用分類？我們又該如何設計分類功能？
首先，用戶會在什么場景下使用分類？從產品層面，分類是便于人們查找某事物的一種方式，因為相對比較清晰、高效。
這里有個很關鍵的點，就是“查找”。也就是說，分類的使用場景，偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。
互聯網產品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點，分類側重于“屬性”區分。
大部分用戶使用分類時，行為特點是相對主動的。此時用戶未必有十分明確的目標，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時候你打開了大眾點評，你只知道要吃中餐，這時你可以在中餐的分類里去找適合你的店。
用戶的目標如果十分清晰，則更適合直接搜索，因為這比起分類查找的路徑更短也更高效。
總結一下，我們要設計分類功能，需要從用戶的角度來觀察分類這件事情。：
· 用戶主要的行為模式：人找內容。
· 有目標但不夠明確。
我們需要先了解分類的細分層級，分類的層級大部分不超過 4 層，但會因不同產品的定義不同而有所區別。
一般來說，第一層是顆粒度相對較大的，接下來會層層在上一層的基礎上細化。
以京東的分類為例：
第一層：奢侈品，箱包，手機等；
第二層：手機包含：熱門品牌、手機類型、運營商、手機配件；
第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；
第四層：蘋果手機包含：iPhone 12、iPhone 11等；
最少的層級是兩層，比如垃圾分類：
第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；
第二層：具體的垃圾物品。
就體驗層面而言，建議分類層級避免超過 3、4 層，盡管本身可能會提升細分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標內容在哪一分類。經過幾層判斷后，才能找到目標內容，這對于用戶的理解成本是比較高的。
此外，太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤，就需要返回繼續查找，效率低、使用門檻高。
當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求，因為內容量龐大，所以還需要更多的過濾，需要依據產品類型而定。
由于目前許多產品都發展到相對成熟的狀態，所以設計分類功能時，一般不需要對分類方式再進行劃分，主要原因是相同類型的產品，分類方式大同小異。用戶的理解習慣上，對于某事物的分類也有基本的認知?，F在設計分類功能，主要是對頁面交互及視覺層級進行重新設計和調整。
我們會梳理常見的分類交互框架，從分類入口、頁面布局等層面可以看到產品中分類功能的定位強弱。這里列舉的分類形式，會根據產品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。
以京東 App 為例，京東把分類功能作為一個主要的頁面模塊。分類 tab 占據了 App 的第 2 個底部 tab。
使用京東的用戶，購買的目的性相對較強，京東主打的就是自營正品和快遞速度，商品與淘寶相比會少很多，但依然很全。用戶習慣上，“逛”的屬性沒有淘寶那么強。首頁以功能區+信息流為主，偏向于商品分發+逛信息流，而分類功能則主要滿足相對明確目的用戶需求。
京東分類頁左側為一級分類，右側為二、三級分類。側邊導航將分類豎排的最大優點是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高，可以配置運營位，如放置運營 Banner ，且支持左右滑動 Banner 。下方一般放置二、三級分類。
右側頁面滑動時，頂部有輔助查找二、三級分類的導航分類標簽，便于用戶快速查找：
切換一級分類：這種框架切換分類的方式主要有兩種：1、點擊左側導航欄進行切換；2、向上滑動右側頁面進行切換。用戶習慣上，第 1 種方式會更高效，而第 2 種切換方式會更自然，更符合手勢操作。
以【推薦分類】為例，右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區分頁面分類層級，頁面向上滑動時，通常會設計繼續上拉切換的提示。目的是提醒用戶，該部分已經滑動到底了，繼續上滑會切換到下一部分，明確區分不同分類。
上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】，右側分類標題與左側導航一一對應，并且分類之間無明確的頁面分隔區分，所以滑動時無需設計切換到下一部分的提示。
以上講的，右側頁面均是二、三級分類入口，并不是具體的。分類層級或類型少的情況下，右側可以嘗試放置具體內容，比如華為應用市場的處理形式。
需要注意：
1、左側導航占據了屏幕縱向的固定位置，從而縮減了頁面寬度。
2、由于層級多，左右側均是分類入口，用戶無法在頁面直接看到具體商品/內容。在電商產品上，用戶容易區分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內容在哪一分類類目下，可能造成用戶流失。
3、如果沒有具體的內容呈現，對于內容、商品等分發效率也存在影響。
頂部導航型的優點是將多級分類與具體內容結合在一個頁面，可通過點擊或者滑動切換不同分類，將觸達具體內容的路徑盡可能減少，提升具體內容的曝光。
以掌閱 App 為例：最高層為一級分類，可滑動。第二層是二級分類，更精準分類挑選。第三層導航偏向于篩選。第四層為具體內容，用戶無需通過頁面跳轉就能查看。這種設計特點很明顯：內容曝光 > 分類效率。由于一級分類不多，可以通過左右滑動查看，避免浪費頁面空間。二級分類類型多，采用折疊的形式將分類收起，點擊可以展開更多二級分類。
顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認狀態下，占用頁面頂部的空間。這種結構，在設計時為了能夠節省頁面空間，二、三級導航會伴隨用戶向上滑動的手勢折疊，提升內容的曝光效率。用戶在滑動場景下，會更聚焦于頁面具體內容而非導航，所以折疊的設計比較巧妙。
這種設計由于具體內容曝光的效率高，受到許多產品的青睞，適合于資訊類、內容類等產品。比如微博首頁，微博側重于內容的主動推薦，所以將分類弱化為一行導航欄，頁面主體為具體內容推薦。用戶瀏覽的內容有相對固定的傾向，比如會喜歡看綜藝、社會、美妝等內容，并沒有很強的尋找不同分類的訴求。
若用戶想要設置常用的分類頻道，可點擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。
知乎的處理邏輯與微博一致：
淘寶的分類相比于一般電商類的產品，會比較特別，常見的電商類產品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經往全面信息流化的方向發展，為了推動用戶在淘寶中“逛街”，甚至連分類都已經往信息流化的方向發展。
淘寶的分類功能正在弱化，不像京東、蘇寧占據著底部第 2 個 tab 的位置，而是在首屏功能區的最后一位。點擊后，也不再是常規的側邊導航，而是強化商品外顯。
淘寶分類頁除了上方的一、二級分類，下方都是商品推薦，向上滑動就是瀑布流，增強商品而弱化分類效率。
如果用戶想看其他分類，可以通過左右滑動切換。如果希望查看更多分類，需點開旁邊的”更多“按鈕，通過”更多“按鈕進入的頁面，側重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對算法推薦的信心，我發現不同手機看到的分類順序并不一致。
以 B 站為例，B 站的分區頁面的設計形式為展示番劇、國劇、放映等所有一級導航，而將細分層級隱藏到下一級頁面。
這種設計方式適合一級分類類型很多，且重點在于高效呈現這些分類類型的場景。二級頁面聚焦于具體的內容，可以避免將一、二級分類堆疊在一個頁面，滿足用戶對查找分類的效率的要求，避免過載的信息量使頁面變得復雜。但顯而易見的，這種結構不利于用戶在當前頁面直接看到下一層級內容。
App store 整體邏輯與 B 站一致，區別在于排列方式為列表型排列。
vivo 應用商店也是聚焦型分類，但是會把二級分類呈現出來，與側邊導航型分類很相似，區別在于這里是整列表滑動。
前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風格、預算、特色等維度。
上面“好好住”的幾個維度之間，沒有上下層級之分，均屬于同一層級，所以層級是并列而非遞進的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據過多的頁面空間，當頁面上滑后，篩選可折疊以節省頁面空間，同時更聚焦與具體內容。
設計分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認知習慣相沖突從而影響功能使用的情況。
整體上，通過分類功能找目標內容的路徑應該避免太長，因為這會影響到內容曝光效率及用戶對分類之下的具體內容的感知。
分類本身是一種信息組織與呈現方式，設計時需要對產品信息本身有足夠理解，才能有針對性地思考交互框架。分類功能的交互框架多樣，每種都有優點和缺點，需要根據產品定位及訴求（優先展示分類，還是優先展示具體內容）采用適合的交互形式。
需要注意的是，有的產品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強的時效性，能不能看到電影幾乎完全取決于電影何時上映，重點更側重于向用戶推薦最近的電影。
以上分析了分類功能、羅列了比較常見的分類功能設計形式，希望能幫助到各位。
文章來源：站酷 作者：熱風_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：tob.design 作者：三魚先生
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一個你肯定親身經歷過的場景：白天你在淘寶上面搜了筆記本電腦，然后晚上在刷抖音的時候，就刷到了該筆記本電腦的相關廣告。
你或許會驚訝：WHAT？難道我的手機是被監控了么？當然不是的，因為監控是違法的。這只是一種技術手段，其專業名詞叫做：重定向廣告！今天我們就來探究一下其中的奧秘。
想要研究其神，我們得先了解其形。
其實上面，我們已經見過重定向廣告的廬山真面目了。我們先提一個概念，你品，你細品：重定向廣告又被稱作訪客找回廣告、再營銷廣告、回頭客廣告等。
品完了，我們繼續往下看。重定向廣告的形態分為兩種：
1. 搜過內容 A，廣告繼續推送 A，目標一個字：買！
這是重定向廣告的第一層次。
就是我們上面所說的：你在淘寶搜了筆記本，然后晚上刷抖音的時候，就繼續給你推送該筆記本的廣告。既然你搜索筆記本了，那肯定就是對筆記本有需求的?？赡墚敃r是由于某種原因，比如筆記價格或者樣式什么的，你在猶豫。然后當這個內容再次出現在你面前的時候，你很容易一激動就下了單，一激動就付了錢~
但值得注意的是，廣告一定要克制，最佳的用戶體驗是：用戶感覺不到其存在，對用戶起到的只是一個引導的作用！據 GoogleAdwords 提供的數據，在 30 天內為同一個用戶展示 7~10 次廣告的轉化效果最好，做到這個程度的廣告收益可以達到三倍以上。
2. 搜過內容 a，廣告推送相關 b，目標三個字：買買買！
這是重定向廣告的第二層次。
我手賤，在網上搜了棺材板，之后就收到了骨灰盒的相關廣告推送。之所以是第二層次，就是因為，這里需要算法工程師設計一個算法模型，根據用戶自身的行為數據，以及相關的大數據，推測出來這個相關的 b，到底是什么。
最著名的就是沃爾瑪啤酒與尿不濕的經典營銷理論：
“男性顧客在購買嬰兒尿片時，常常會順便搭配幾瓶啤酒來犒勞自己，于是嘗試推出了將啤酒和尿布擺在一起的促銷手段。沒想到這個舉措居然使尿布和啤酒的銷量都大幅增加了。”其實這個算法的核心原理，也很簡單，我們可以再舉一個互聯網的段子，你一聽就明白咋回事了。
女：“老公，我想買一個包包，才一萬塊錢~”
男：“好的，沒問題！不過我覺得，買個一萬塊的包包不太夠，你還得再買一身三萬塊的衣服，不然凸顯不出來這個包包的氣質，再讓別人以為是山寨的就麻煩了；這樣的話，我們還得買輛車，怎么著也得寶馬奧迪吧，不然你這整個人的氣質就襯托不出來了；嗯，我們還得換個大房子，就整個別墅吧，帶游泳池的那種，不然跟包包、衣服、車子不匹配；這樣算的話，我得先去掙 500W，你先等等，我掙夠了錢，咱們就去買！”
女：“……”
這個段子，體現的是通過經驗主義找到 b，而現在是一個數據主義的時代，一定要有數據的客觀依據，才能客觀準確地找到 b。但殊途同歸，其核心原理是一樣一樣的~
這幾天經過查閱大量的資料，以及跟小伙伴們進行溝通探討，終于對重定向廣告的原理，有了初步認知。這里先感謝給我提供支持的各位老鐵。
首先呢，一個完美的重定向廣告，理論上應該分為三個步驟：
我們還是拿筆記本電腦的場景來舉例子吧~
首先我們要達成一樣共識：我們沒有必要給所有搜索過筆記本的用戶都發廣告。就比如有些用戶只是誤觸點擊了一下筆記本的內容，然后立馬就又關掉了，那么就沒有必要給這類用戶發廣告，因為就算是發了，大概率也是沒有下文的，純粹浪費廣告費。所以說，重定向廣告要做的第一件事，就是判定這個用戶的意向程度，找到那些精準的用戶，再給他們發廣告，以尋求最高的 ROI（投入產出比）。
意向度的判定，就需要依靠埋點技術了：根據埋點，可以追蹤到用戶的行為記錄，然后再設計一個意向度判定的邏輯，就 ok 了。
常見的判定依據如下：
在網頁上停留超過 X 分鐘；
在網頁上訪問超過 X 個頁面；
已訪問結賬頁面，但未進行交易；
與網頁內容互動過，但未消費；
曾多次訪問過網站，但未進行消費；
第一步找到了那些對筆記本感興趣的用戶，然后我們的目的，是給他們發廣告，引導其消費對吧。那么第二步，也是最關鍵的一步，我們得知道，這些感興趣的用戶，到底是“誰”吧！這里需要依靠的是 IP 追蹤技術：只要用戶去淘寶搜索筆記本了，那么他必然會留下一個 IP 地址。我們通過 IP 追蹤技術，首先可以追蹤其使用場景~
To B 場景：
有一定的概率，可以追蹤到這個 IP 地址，是某個企業使用的。為什么說是一定概率呢？因為不可能有一家商業公司，擁有所有的 IP 數據，你們懂得…追蹤到企業之后呢，可以進一步追蹤該企業在網絡上面留下的公開聯系方式，比如公司法人姓名、電話、郵箱等等。這方面可以跟第三方公司合作，例如企查查，付費調取他們的 API 接口進行查詢。
這種具體的聯系方式都有了，那么發廣告自然也就不是問題~
To C 場景：
我們先要明確一點，對于個人來說，無論如何都是追蹤不到其姓名、電話、郵箱這些信息的，因為違反隱私保護法。
但我們可以通過 IP 追蹤技術，追蹤到這個 IP 地址，是屬于某個城市，更精準一些的話，可以追蹤到是某個街道，甚至是某個小區。這樣的話，也是有助于我們做進一步的廣告策略的。
比如我們可以追蹤到，搜索這些筆記本電腦的人，大部分都來自于某幾個城市的某些街道，那我們是不是可以重點向這幾個區域做廣告投放了？
但這些似乎還不足以支撐我們精準地發重定向廣告到個人，達到最大的 RIO。想要精準地找到某個人，還需要借助兩樣東西：
cookie
簡單來說，就是我們在使用瀏覽器時，存儲在我們本地客戶端的文本文件，就是下面這些玩意…
那么 cookie 可以存儲一些什么呢？
首先，用戶的行為記錄是可以存的，就和我們上面埋點所記錄的那些類似；然后還可以記錄一些特征數據，例如使用的 Web 瀏覽器、操作系統、屏幕分辨率、時區、語言、插件、字體等。
有了這兩樣東西，大概率就可以證明，張三是張三了。
imei 值
如果用戶是使用手機來進行搜索的，那么這個時候就需要請出另外一個大咖“imei 值”了。imei 值又是個啥東西呢？簡單來說，就是手機的身份證！有了身份證，那么找到這個手機，并給他發廣告。但值得注意的是，imei 值可沒有那么好獲取。如果用戶只是用手機搜索了瀏覽器，比如你們的官網商城，那么這個時候是獲取不到 imei 值的。必須是用戶在你們的 APP 上面進行操作，并且呢，在使用 APP 的時候，同意了一大堆權限，這個時候才能讀取到用戶的硬件信息，進而獲取到 imei 值。
最后一步，那就是如何發廣告召回啦。這一步就簡單啦，找到那些廣告平臺，例如百度、頭條、騰訊、廣告聯盟等等，跟他們談價錢就完事了。談好了價格，那么在這些平臺上面的廣告位，就能夠變成筆記本電腦的廣告啦。（例如在抖音上面劃拉幾條，就看到筆記本電腦的廣告了）
這里也提醒一下，并不是所有的廣告平臺，都有重定向廣告業務的，想要發重定向廣告，可以搜索“DSP 廣告”幾個關鍵字試試。
最后呢，還有一點點小問題，怎樣能夠使整個過程自動化呢？其實也很簡單，這就需要廣告平臺，在我們的 Web 端的官網商城，或者 APP 上面部署一套 SDK 代碼，意義呢，就是讀取前面我們所說的，判定信息以及識別信息。再直白一點的話，那就是雙方約定一個數據接口，實現這些數據互通，這樣就能夠實現自動發廣告啦。
重定向廣告存在的意義是什么呢？其實上面我們已經提到過了：很簡單，這種廣告的 ROI（投入產出比）最高！
每個公司的數字營銷人員都有著基本的崗位職責：他們必須評估和優化他們的努力（廣告投放費用），以實現增加銷售的目標，他們必須證明他們的投入能夠帶來積極的回報。于是數字營銷人員總在尋求最新的技術來幫助他們達成目標。在經過曲折的廣告投放嘗試后，最終，重定向廣告出現了。讓我們一起來看一個故事：
重定向廣告故事
我在賣 ebay 一種針對新生嬰兒的純天然洗發水，我需要投放廣告來倒流到我的 ebay 商品頁。
yahoo：
最早我的投放策略是把我的廣告放到 yahoo 的首頁上去。然后我發現一天下來，yahoo 花掉了我巨額的廣告預算卻只給我帶來了非常少量的點擊——1000個人看了只有1個人點擊了我的廣告。沒錯，大部分上yahoo首頁的人都不會對一款嬰兒洗發水感興趣的。
Ad-Network：
接下來我要考慮優化我的投放策略，于是我想到了 Ad-Network：他們幫我把廣告投放給了那些和他們有合作的母嬰類網站上去，效果好多了，很顯然上母嬰網站的人們會對我的產品感興趣，1000 個人有 10 個人點擊了我的廣告。
精準定向（targeting）：
但是能不能做到更好呢？接下來一家做精準定向（targeting）廣告的服務商找到了我，告訴我們他們能夠直接把廣告推送給那些剛剛生了北鼻的媽媽們，于是我選了這家 vendor 而他們給我的答卷是 1000 個新媽咪有 100 個對我的天然嬰兒洗發水感興趣（她們點擊了，還有很多最后選擇了購買）。
重定向（retargeting vendor）：
好吧，作為一個挑剔的廣告主我覺得這還不夠，我說，能不能把我所有的媒介預算都花在刀刃上。這時候一家 retargeting vendor 出現了，他們說，交給我們吧，你所有的廣告都只會出現在那些剛剛試圖找過你的新生嬰兒純天然洗發水的用戶——我們不管他是一個人還是一條狗，但cookie顯示那位用戶確實在找類似的產品。那么對我來說，最后一個方案確實非常有吸引力。
我們可以看到重定向廣告能夠更精準，可以實現對目標消費者進行一對一的營銷效果。而傳統的展示廣告只能是粗放型大面積的曝光（如對所有網站訪問者隨機展示廣告）。由于不能對準確的目標消費者進行廣告傳播，可以說在早期的展示廣告中，大量廣告展示都是無價值的，也就是被浪費掉了。
重定向廣告從性質上來說是效果廣告，是要對交易額負責的；那么與之對應的，還有一種廣告叫做定向廣告，其性質是品牌廣告，這類廣告的指標是新用戶數。
重定向廣告，在營銷的環節的里面，是屬于“召回”。
也就是說，這些用戶，必須是通過某些途徑訪問了我們的官網商城或者是 APP。但這個過程只能是被動等待啊，如果訪問我們官網商城或者 APP 的人少得可憐該怎么辦呢？
那么這就涉及到營銷的另外一個環節了，那就是“拓新”。拓新環節通常發的都是定向廣告，這種廣告只是為了拓展品牌的知名度，而對于最終的交易，并不做要求。這種也很常見，就比如我們在看《王牌對王牌》的節目中，天天聽他們介紹“vivo x60”的手機，也沒有任何購買鏈接，但這個手機的品牌，卻被大眾所熟知了。
不管是重定向廣告，還是定向廣告，在整個營銷的過程中，都是獲客環節的重要手段。前段時間我們研究過 B 端企業營銷困局的破解之道——精準營銷。
在這里，我們再來做一下延伸思考，想要解決企業獲客成本高的問題該怎么辦呢？
下面這張圖供參考：
稍微解釋一下：
張三搜索了我們的產品內容，并且留下了聯系方式等信息，那么這種用戶肯定是最精準的用戶啦，讓銷售團隊直接跟進；
既然張三是精準用戶，那么我們能不能找到一群跟張三差不多的人，進行“拓新”的操作呢？于是可以搜集到的張三的特征，給到這些第三方廣告平臺，找到跟張三有著類似特征的李四們，給他們發品牌廣告，進行拓新。
注：我們前面也提了，to c 場景，直接找到聯系方式，是違反隱私保護法的。但巧就巧在，我們雖然不能直接獲取聯系方式，但卻可以間接地利用這些數據，也就是給他們發廣告~
商業創造利潤的秘密，其實很簡單，一言以概之，就是讓我們的產品，有更多的“訪客”，并且將這些“訪客”變成“顧客”，將購買意愿和購買能力變成購買現實。
但紙上得來終覺淺，精準營銷何其難。這條道路，已經走了很久，但也只是邁出了一小步，接下來，依舊有很長的道路要走~
文章來源：優設 作者：曉莊同學產品筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當你拿到一份 PRD 需求文檔 時，你在想什么？
好像所有字都認識，怎么放在一起變成最熟悉的陌生詞？
好像對方在侃侃而談，而你只是用微笑來表達那不知所措的尷尬？
還是，一目十行，了然于心，拿出你的看家本領，迎面而上！
……
看過形形色色的 PRD 文檔，有純文字版的，全篇找不到一張圖片，估計擔心會影響設計師創意無限的大腦發揮；也有看過圖文結合的淋漓盡致的 PRD 文檔，甚至有直接上手 sketch 的，原型都畫好了；當然也有直接丟給你一張圖，讓你照著做的…
所以，面對這些不同特點的 PRD 文檔，設計師該從哪里開始呢？這真是一個好問題，期待這篇分享能助你撥開迷霧。
需求分析，直白的說，就是要找出二個 W 一個 H：
一個需求，從用戶需求到產品需求，再到產品功能，當中會經歷一個可長可短的過程。不管這個時間如何計算，無可避免的是，它一定會消耗資源。而需求分析的進行，可以在一定程度上避免資源的浪費。
1. 識別偽需求，挖掘真需求
分析需求的過程中，需要去了解需求的背景，用戶真實的訴求是什么。很多時候，“所謂需求”，是用戶裝飾后的“解決方案”。大部分的用戶是用他“已知的事物”來闡述“未知或難以描述的事物。
2. 是否符合產品定位？產品目標？目標用戶？
存在即合理，所以并沒有所謂真正“無理的需求”，而是這個需求，是不是和你的產品是對齊的，再好的鍋，它也需要一個合適的蓋。需求也是同理，只有當需求與產品定位、目標以及目標用戶是一致時，才能讓產品發揮最大的價值，比如當初的來往和現在的釘釘。
3. 需求的價值
需求或許不一定有價格，需求必有其價值，不然它就是一個無意義的需求。當用戶提出一個需求時，必有其想要表達或想獲得某種東西，即使它可能很微小。
4. 是否有更好的解決方案
不只是用戶會提出裝飾后的”需求“，PM/PD 同樣也會。這很正常，人都會基于自己的自身環境，受教育程度，對事物提出自己的看法以及他認為好的解決方案。
但對設計師來說 ，需要多走一里，向前一步，看看有沒有更好的解決方案。而更好的方案，需要設計師更透徹的了解需求。當然這不是硬性要求，只是要考慮多種的可能性。
比起要了解你接到的需求，先了解你的產品，是一件很有必要的事情。需求只是產品的某個部分，要先把握全局，才能更好設計。不然，很容易一葉障目，錯誤評估需求。
或者應該說，對產品進行任何改動或優化，都要基于對產品認識上進行的。
需求分析時，設計師要了解到，需求提出者、需求來源、需求背景、目標用戶、解決問題、產品方案、產品目標，以及分析后整體需求的優先級。
1. 需求提出者
PM/PD，偏業務類需求 —— 產品需求
設計師大部分的需求來源，都是來自 PM/PD， 而這類需求基本上經過了 PM/PD 的過濾，并且比較偏向商業業務方向
產品用戶 —— 用戶需求
用戶的吐槽、建議、反饋，用戶從自身出發，提出希望被滿足的功能
設計師，偏體驗交互類需求 —— 設計驅動的需求
設計師通過設計走查，主動與用戶溝通和用戶調研等方式，獲取得到的需求
BOSS 層需求 —— 老板需求
這是特殊的需求，充滿機會與陷阱。
這里是四類比較典型的需求提出者，不同的提出者對需求的著重點會有不同。
2. 需求來源
需求的來源，其實是多面的，和產品的目標用戶息息相關。目標用戶在哪，需求就會在哪產生。了解需求的來源，也有助于需求的評估，后期如果需要做用戶研究，也能對此提供幫助。
3. 需求背景
需求背景，是需求產生的環境，比如用戶是在什么情況下遇到問題，使用場景是什么，用戶路徑是什么
了解用戶碰到的痛點和癢點是什么，如果有可能，可能自己去走一遍用戶的使用路徑，親身體驗用戶碰到的問題。有些時候當你真正痛過了，你才會知道這真的是一個坑。
4. 目標用戶是誰
需求所服務的目標用戶是誰，這很重要。遇到問題是目標用戶，還是邊緣用戶，是大部分用戶的訴求，還是一小部分用戶的訴求
需求的目標用戶需要與產品的目標用戶對齊，不然可能這個需求不錯，但卻是其他產品的需求，與產品不對口
特別是產品本身涉及多角色的用戶，比如 B 端中臺的產品。所以，明確服務的目標用戶是誰，可以更準確去對焦需求，對癥下藥，方可藥到病除，不然可能是藥到命除…
5. 解決問題
需求解決了什么問題，這是一個要問的問題。當你花了時間在討論需求是什么時，但是如果需求并沒有解決用戶的根本問題，其實就是在浪費時間 。
解決什么問題，是需求的價值所在。很多時候，做了很多需求，其實不一定真的了解需求本身是為了解決什么問題，而這種不了解會讓設計師對需求的了解是停在淺水區。
6. 產品方案
當你接到需求的情況下，一般也會接收到提出者的解決方案。這時，要去驗證產品方案能否有效解決用戶的問題，這與上一步「解決問題」是一個相互驗證的關系。
產品的方案，不等于設計方案。不要對產品方案照搬，最后只做了界面的美化者，設計師要更深度去考慮整體產品的交互、體驗以及用戶心智。條條到路通羅馬，天無絕人之路，你要記得轉彎。
7. 產品目標
需求完成后，期待是會達到什么樣的目標呢。這個目標與產品目標是一致的嗎？
解決問題、產品方案、產品目標，這三者是存在強相關的關系，并且互相影響。
需求分析是不可跳過的一環，打開 Sketch 之前，設計師需要的是理清需求，找出疑惑點，你疑惑的地方，用戶可能同樣會遇到，如果設計師不清楚，也請不要將這樣不清不楚的設計呈現給用戶。
文章來源：優設 作者：箴鹽設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在AE的窗口中打開“效果和預設”面板，所有和文字有關的效果都在動畫預設中的Text文件夾內，共十七種動效類型
將動效預設拖動到對象上，即可應用動效。
十七種類型分別為：3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態化動效、路徑動效、旋轉動效、縮放動效以及字間距動效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI設計 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近公司在梳理整個產品在用戶體驗層面上可優化的問題，然后匯總整合。公司的交互專家就提出可以利用尼爾森可用性原則來將所以問題歸類，進行整合。
What？尼爾森可用性原則是什么這么厲害？雖然之前也有聽到過這個原則，但是具體的內容并不是很熟悉，于是打開百度開始搜索……
尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發表了「十大可用性原則」。十大可用性原則分別為：狀態可見、匹配現實、用戶可控、一致性、認知易取、防錯、高效靈活、優美且簡約、容錯、人性化幫助。
十大可用性原則既可以用來指導Web端，也可以指導移動端，當然其他涉及交互的場景也同樣適用。
知道了這些基本信息之后，也看了一些其他大佬對可用性原則的理解和感悟的文章，接下來我自己羅列一些具體案例來幫助理解和記憶這些原則。
系統應該在適當的時間給與合適的反饋，以此讓用戶了解正在發生的事情。
個人理解：產品應該清楚地告訴用戶任務當前的狀態、流程進度。
案例：
「狀態加載」是最簡單的狀態可見的展示，告訴用戶當前是加載狀態，讓用戶在等待過程中不會焦慮
「未讀提示」讓用戶知道有需要了解的信息還是未讀狀態，讓用戶可以及時了解
「更新提示」在視頻、閱讀、電臺等產品中會用的比較多，讓用戶實時了解更新狀態
外賣配送信息、快遞物流信息的顯示也是狀態可見的一種
「操作提示」可以幫助用戶知道自己已經操作成功，并且在有效進行中
系統應該說用戶習慣的語言，比如：用戶熟悉的單詞、短語和概念，而不是系統導向的術語。遵循現實世界的約定，使信息以自然且合乎邏輯的順序出現。
個人理解：產品的文案提示應該是用戶熟悉的語言，設計風格應該符合目標用戶的喜好，信息的呈現盡量貼近真實世界。
案例：
「特有風格」在二次元、金融產品、某類人群專用產品等會表現的更突出，特有的設計風格和專業的術語會讓用戶對產品更有信賴感
「模擬現實」在運動軟件、AR游戲中比較常見，讓用戶更有真實感
當用戶錯誤地選擇了的某個功能后，系統需要提供一個明確的「緊急出口」，來讓用戶離開其不想要的狀態，而且無需額外的對話框，支持撤銷和重做。
個人理解：當用戶誤操作之后，可以有撤銷重做的選擇，可以后悔。
案例：
「返回、關閉」就是最常見的讓用戶可控制的按鈕
「撤回」某些聊天軟件的幾分鐘內信息可撤回并且支持重新編輯
我們不應當讓用戶去懷疑不同的語句、狀態或操作是否在表達同一件事。設計需遵循平臺的慣例。
個人理解：同一個產品需要統一的設計規范，同類型的產品也應該遵循基本的用戶習慣。
案例：
「規范統一」是指風格統一、交互統一、視覺統一
「同類型統一」可以讓用戶在使用過程中更加方便，沒有壓力
PS：網易云音樂和QQ音樂的操作有些不一致，切換使用會稍微不習慣
通過將對象、操作和選項進行可視化，最大限度地減輕用戶的記憶負擔。用戶不需要記住對話框中某一部分到另一部分的信息。系統操作的指示信息需要易于被用戶發現和獲取。
個人理解：就是把需要記憶的信息呈現出來，讓用戶直接確認就行。
案例：
「歷史記錄」保留用戶的查看和搜索信息，方便用戶后續查看
「關鍵信息」在購物車中的顯示非常重要，可以方便用戶直接確認下單
「觀看記錄」在讀書、視頻類的產品中非常重要，不需要用戶去記憶上次看到的節點
文章來源：UI設計 作者：IAM蒼蒼君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
日本屋文具大賞，又被譽為“文具界的奧斯卡”。從2013年開始，文具大賞今年已經有9屆了，每年都在二、三月公布，想在開學季購置文具的小伙伴，千萬別錯過！
據說，今年的大賞由11位評委參與，他們對參選文具的設計、功能和想法等方面進行打分，共選出40個文具，分別有特等獎、設計獎、功能獎、創意獎。
下面，數藝君帶著大家一起來看看吧?。ㄗ⒁馕婧缅X包）
特等獎
吳竹吸墨空筆
今年獲得全場大獎的是吳竹吸墨空筆。這是一支不帶墨水的空筆，被稱作“彩墨神器”！
整套由四個部分組成：空的筆桿，吸墨水的內芯、筆栓、小貼紙（可以把你制作的墨水涂上去，貼在筆桿上用于區分）。
上墨水的操作非常簡單，海綿內芯拆出來，插進墨水里，吸到80%左右再裝回筆殼，搞定！
對，除了墨以外，其他所有的東西都有，你可以用內芯吸附上任何喜歡的顏料、墨水，然后你就有了一支自定義的筆。
功能獎
回轉印章機
回轉印章機也是一個很神奇的產品，可以幫助那些不擅長繪畫的朋友印出可愛的圖案。
有很多個圖案可以選，選完就直接印在紙上，跟手寫的簡直一模一樣，是喜歡做手賬的手殘黨的福音！
印章使用的顏料是油性的，可以拿一支水性筆給圖案上色，不用擔心顏色混在一起。來看看上色的效果吧，反正不會做手賬的數藝君也心動得不行了！
最關鍵是，可愛俏皮的圖案特別多，據說有上百種文字、圖案，應用場景廣，可以左滑下方圖片看看哦~
創意獎
便攜便利貼
這款便攜便利貼從外觀上就擔得起創意獎這個頭銜了！數藝君第一反應還以為是一支筆，沒想到竟然是便利貼！
這款便利貼的創意在于，把一本一本的便利貼變成了卷軸。而且，在硬殼卷軸的保護下，便利貼還不容易破損。
一管里面有兩個卷軸哈，就是說可以裝兩種便利貼，如圖，一種紅的一種白的。
使用起來也很方便，把便利貼卷軸從保護殼里抽出來，拉出一截，撕下來，就可以貼上做筆記了。
還有一個貼心的設計點就是，這個便利貼中間70%的部分是有粘性的，兩邊邊緣沒有粘性。這樣就可以拿著兩邊沒有粘性的地方，對準了位置再貼。
種類也很多，共有12種便利貼，有6種搭配供選擇，看這個效果，還挺實用的~
設計獎
雙層透明筆盒
雖然說透明筆盒已經不是第一次出現，但這款筆盒的特色在于外層是透明，里邊放置了一個布袋，更便于收納了。
相信很多小伙伴，都曾被透明筆袋“一目了然”的功能吸引到，但大部分透明筆袋很難做到分層歸類。而這款透明筆盒就將以上兩點都兼顧到位了。
便簽獎
可剝離熒光貼
這款便利貼從外觀上特別是涂改帶，但功能上完美解決了熒光筆標記筆記時，畫錯的尷尬問題。
半透明的熒光貼紙，可以撕下來貼在書上的重點知識處，覺得不合適，或者復習完畢后，還可以不留痕跡地撕下來，圖書又恢復了嶄新的狀態。
不想在圖書上寫字，也可以寫在這個半透明的便利貼上~再也不用擔心在書上寫錯別字啦！
辦公文具獎
TEAM-DEMI 文具套裝
這套文具包裝沿襲了極簡風，純色的小盒子中，包括剪刀、膠帶、訂書機、美工刀、膠水、直尺、卷尺以及SIM卡取卡針。
配合磁吸設計，包裝盒可以作為收納盒，收納文具時做到完美嵌入，這種設計真讓人難以拒絕，自用和送人都很有檔次。
橡皮獎
多邊形橡皮
本次大賞中，造型最“古怪”的產品莫過于這款多邊形橡皮了。它以折紙藝術為靈感，配合3D技術，造就了多邊形橡皮。
橡皮共有45個尖角，使用完一個角之后，會產生新的一角。一塊橡皮都花了這么新奇的技術，不愧能獲得這一單項獎。
在官方發布的視頻中，這塊橡皮可以擦除單詞中的字母。因此，從功能上來說，這款橡皮更適合那些鉛筆繪畫等精細作業的人使用。
文章來源：UI設計 作者：數藝設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn