在大數據盛行的今天，人們不僅僅講究以事實說話，更愿意以數據講話。數據作為結果的直接衡量指標，更真實、也更具有說服力，那如何直觀的展示數據，幫助決策者做出正確決策或行動，發揮數據最大的價值？可視化數據大屏應運而生，讓我們一起來談談吧
說到數據大屏的時候，我們要先了解一下數據可視化，那什么叫做數據可視化呢？比較專業的解釋是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，并進行交互處理的一種理論、方法和技術，它為我們研究、處理、分析數據提供了理論依據。
我們人的大腦處理視覺信息的速度比文字快幾萬倍，將抽象的數據轉化成圖表、圖形能更快速幫助我們更快理解數據中的含義，趨勢以及相關性。
簡單來說，可視化數據大屏，將我們難以理解的抽象的數據概念以圖形化的形式展現，方便我們快速理解這些數據的含義，也方便這些重要的信息在最短的時間內傳給最重要的人。
數據大屏可分為信息展示類、數據分析類、監控預警類，多展示酷炫的效果，數據之間有層次區分，好的數據大屏是布局、色彩、圖表、動效的綜合運用。
數據可視化，讓很多員工從繁瑣復雜的數據工作中解脫過來，那它到底有什么優點呢？
近幾年來，國家的相關法律政策相繼出臺，大數據企業的技術研發水平不斷提高，促使大數據行業市場規模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數據可視化對于公司發現解鎖數據潛在價值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現大量數據，以前企業員工檢測到數據進行匯總分析需要數小時，可視化通過特定的格式來呈現大量數據幾乎不費時間。
視覺形式的數據更易理解，數據可視化能快速顯示操作、運營與結果之間的關系。企業管理不是憑空作決定，正確的方式應該是，依據所獲得的數據信息來做輔助分析，數據可視化內容能讓管理人員和決策者清楚看清數據趨勢，快速制定及消化關鍵指標。
比如當上圖科學決策平臺的網絡總數特別時多，決策者可以快速調取相關數據找出異常原因 —— 是上次活動運營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數據快速鉆取數據，用來解釋正在發揮作用的運營條件或決策與所遇到的指標之間的關系。
根據Aberdeen報告收集的信息，利用數據可視化的組織能夠及時訪問信息的可能性比其他組織高28％。數據可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對企業內容運作了解甚少的人。
比如上方的區域經濟地圖，通過地圖與定位街道區域內容、顏色結合的展示樣式，很容易看出各街道產值、稅收等，也更有場景感；居民可支配收入版塊，通過顏色區分、大小圓形、時間線來直觀展示居民收入變化內容，形象且清晰。
制作數據可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點也很明顯，沒什么特色，靜態數據展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優點是碼數據速度快，自動獲取，看起來很高端，但缺點也很明顯，如：學習成本高、學習比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡單、動態數據自動獲取、動態效果無敵炫酷，不需要下載安裝，缺點就是部分渲染組件比較耗費電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網易有數大數據是一個企業級的大屏大數據可視化展示系統平臺，具有深度的交互式數據探索。它有豐富的使用場景，支持數據接入、數據導入處理、數據分析生成報告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點是數據探索性分析能力有限。
網易有數可視化實戰案例——業務安全大屏。通過大屏進行業務安全監控，清晰的展示各業務分布要點的數據情況，頂部實時更新各重要區域數據情況，銷量對比、售后情況，產品產比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業智能（BI）軟件，擁有豐富的報表編輯和數據分析功能，同時它也支持可視化大屏的編輯。決策報表采用了畫布式操作界面，通過拖拉拽可以想成一個強大的、全面的可視化大屏，能實現在一個頁面整合不同的數據，完美的展示各類業務指標，實現數據多維度分析。缺點是大屏組件不夠豐富，開發拓展性不強，不支持云端托管等。
帆軟可視化實戰案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數據，業務辦理詳情等，圖表形式展示內部管理、外部管理情況，分行放貸統計情況等，便于數據管理查看及決策制定參考。
Data V是阿里云內部的可視化大屏開發平臺，同時面向開發者和零基礎用戶，支持大屏圖形化編輯和在線編程開發，可幫助非專業的工程師通過圖形化的界面搭建專業水準的可視化應用。
它有海量行業模板，DataV數據可視化設計團隊會定期從大量真實項目中尋找優質場景，制作為模板，涵蓋媒體、零售、工業、電商、金融、防疫、氣象等多個行業，為用戶提供會議展覽、業務監控、風險預警、地理信息分析等各種設計參考。
產品功能方面，它有豐富的可視化編輯工具，提供多種業務模塊級的非圖表組件，只要通過拖拉拽便可創造出專業的可視化應用，另外豐富的組件庫與模板庫包含多種場景模板，簡單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應用時遇到的整體樣式配置困難。專業的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時數據驅動三維世界生成，低代碼交互配置將復雜邏輯可視化呈現，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發布方式，如：鏈接分享、二維碼發布；支持自定義組件接入；支持云上部署，也支持線上開發。
DataV數據可視化實戰案例——智慧工廠生產控制大屏，綜合呈現了每個生產階段的生產狀態參數，將整個車間的情況匯總到一個調度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數據可視化EAsyV，擁有業內領先的數據可視化大屏故事策劃、視覺設計、前端和數據開發技術實力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數據導入，還有動態面板和交互功能，讓大屏看起來更靈動。
EasyV數據可視化實戰案例——寧波圖書館可視化平臺。大屏包含人流分析監測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時把握場館運營效果，為其提供館內建設與活動運營的監控分析服務。
深色的大屏設計能讓其數據顯示更明顯，也方便營造科技感，另外大屏設計圖表文字的顏色要統一，避免出挑的內容分散用戶注意力，使用圖片或者是動態的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質呢？
首先是策劃有故事。從客戶的真實需求去梳理數據可視化內部的視覺傳達，確保內容傳達克制有條理，有重點、有故事。盡可能讓用戶花費更少的時間獲取更多信息，完成數據空間到圖形空間的映射，讓數據的價值被看見。
如上方的品牌銷售數據大屏，銷售額與門店數，數據明顯，與銷售額相關內容有季度線上線下銷售額，會員數、款式數量、爆款排行等，故這塊內容排在左側。右側就是區域訂單、毛利統計。中間放用戶關心的地圖區域分布、爆款分析等內容。
其次是可視化要有效率。通過工具軟件，數據可視化變得更簡單高效，變得靈活易實現，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠程控制，能有效率的實現海量數據實時同步，實現高效率、高質量大屏交付。
最后是大屏要有數據價值。數據可視化最重要的還是要落實到數據上，脫離數據談美觀是不切實際的空想，數據可視化就是要充分利用并方大數據的價值，保證數據實時、全域、精準、讓數據講話。
設計可視化數據大屏時我們設計師要抓住問題的重點，即這樣設計出來的內容能不能真的讓數據產生價值，能否經得起業務部門推敲？是否為企業經營提供了幫助？思考完這些再去做的大屏更有價值，大屏做的酷炫是其次，能夠讓人一目了然的看見關鍵信息，聯想到業務實際，才是我們設計師最需要關注的方向。
文章來源：站酷 作者：知果日記YRrui
費茨定律(Fitts'sLw)是一個描述人類運行學的經驗公式，用于計算人們移動手指或鼠標等設備到某個目標的時間，以考慮目標大小和距離為主。
費茨定律的公式是T=a+blog2(D/S+1)，其中T是時間，a和b是實驗測得的常數，D是目標的距離，S是目標的大小。說明了在給定目標情況下，目標距離越遠，需要的時間越長；在給定距離的情況下，目標越小，需要的時間越長。
費茨定律廣泛地用于人機交互界面設計中，例如在B端常用的設計按鈕上，可根據該定律來選擇適當的目標大小和間距，以使用戶更好地達到業務目標。
比如在B端產品彈窗界面設計中，確定和取消按鈕都會放在右下角，使得用戶更容易點擊。確定按鈕更高頻故放在最右邊，視覺表現更明顯，使其更容易一眼點擊。此外，兩個按鈕之間的距離也很重要，因為它會影響到用戶的點擊時間，為了讓用戶更容易進行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學家喬治·米勒對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯。因此心理學家把這個神奇的記憶容量規律稱為“7±2法則”。 在人機交互設計界面中，如果要引入新的元素或操作，應該盡可能地減少其數量和復雜性，以便用戶更容易理解和記憶。
比如在B端卡片設計中的操作按鈕一般會控制在7-2法則即5個操作按鈕，若有其它操作會隱藏在更多按鈕里面，把頻次較高的按鈕放在一級展示中，頻次較少的按鈕放在二級浮窗展示中。通過分解復雜的任務和信息，減少冗余內容使得用戶更容易理解且更快完成業務過程。
格式塔原理是心理學的一個概念，也廣泛應用于設計領域中。該原理認為人類大腦在處理感知信息時，會自動將信息組織成具有整體性、完整性和結構性的形態，即所謂的“格式塔”。
在設計中，格式塔原理有幾個常見應用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設計師可以使用相似的顏色、形狀、大小等元素來將相關的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠離的事物分離。因此，設計師可以使用空間布局來將相關的信息組織在一起，提高信息的可讀性和易用性。
3.對稱性原則：人類大腦喜歡對稱和平衡的形態。因此，設計師可以使用對稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設計師可以使用封閉的形狀來強調信息，使用戶更容易理解和記憶。
相似性原則的應用比如在B端的卡片設計中，所有的卡片樣式相似在人腦理解中默認會視為相同的一組數據。
接近性原則比如在B端的表單設計中，常常會將一組數據通過接近性原則組織在一起，提高信息易讀性。
對稱性原則常用在大屏與報表設計中，通過對稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續性表格或圖形等設計中，通過不連續性來讓用戶大腦形成封閉路徑強調后續可讀信息。
比如在下面的表格中通過形狀的不連續性反而讓用戶大腦更快感知到還有信息可以滾動查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設計法則，它由美國心理學家Donald Norman提出。該定律指出，人們在使用任何新系統時，都會將他們以前所經驗過的類似系統的知識應用于新系統。
雅各布定律的核心思想是，在設計新系統時，應該考慮到用戶的現有經驗和期望，并盡量避免創造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統，并減少學習成本。
比如在B端設計中常用到的圖表編輯快鍵可以延用用戶在其他系統常用到的快捷鍵，如win或mac系統都常用到的快捷指令可復用到B端產品的快捷操作中。
防錯原則(Principle of Fail--Safe or Fault-Tolerance)是一種設計思想，其目的是減少或避免因錯誤或故障而導致的不良后果。它通常被用于設計高度可靠的系統或設備，以確保在錯誤事故發生時，系統或設備仍然能夠繼續正常運行，或者能夠平穩地停止運行，以避免進一步的損害或危險。
在界面設計中如設計可撤銷操作，通過系統中允許用戶執行可撤銷操作，以避免因誤操作而導致的不良后果。
或在界面設計中常用到的反饋和提醒彈窗等操作，以幫助用戶及時發現錯誤或故障，并采取適當的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復雜性質量守恒」。
該基本定律覺得：該定律認為每一個過程都有其固定的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
可以通過簡約至上的隱藏、轉移、刪除等原則進行用戶體驗的提升。
早在14世紀，哲學家、圣方濟各會修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個原理說的是“切勿浪費較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現象有兩種不同的假說，我們應該采取比較簡單的那一種。對于幾個功能相同的設計，在設計都可用的情況下，則選擇視覺干擾較少的設計。
在設計上則能夠指導我們對產品做減法，去減少不必要的元素，在進行設計的時候，先分析用戶的的主流程是什么，流程內的引導盡量弱化，沒有必要則不增加。
比如在B端產品設計中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設計原則，與以上定律基本一致?？偠灾换ピO計規律的宗旨都是幫助設計師創造易用、高效、愉悅的用戶體驗。在B端產品設計中，將交互定律貫穿于產品設計中可以提升產品易用性，降低學習成本，使產品更規范，對企業用戶的工作效率與商業價值都有積極的影響
文章來源：優設網 作者：麗創輕文
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
六、B端C化未來的設計方向
文章來源：優設網 作者：酷家樂UED
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信很多設計師同學都接觸過B端產品，對于很多設計師而言，遇上B端產品是一件令人又愛又恨的事情，愛是因為目前市場上大多數的公司主要經營的都是B端系統，B端系統相對于C端來說UI界面顯得并沒有那么的重要，所以設計師的責任也相對沒有那么重，而恨是因為目前大多數B端系統頁面都是由前端UI框架搭建的，前端同學很多時候直接套用組件即可，所以UI設計師對于整個系統來講也顯得可有可無，導致設計師話語權也特別的低，甚至有些做B端系統的公司壓根不用UI設計師也能完成項目開發。
但是作為交互設計師(小公司一般是產品經理)在B端卻特別吃香，并且擁有主要的話語權，因為我們主導這整個系統的基礎邏輯與業務邏輯設計，所以無論是前端還是后端同學都需要根據我們的設計進行開發，最終完成整個系統。
因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個），而是從交互上如何去看懂B端后臺的基礎邏輯以及以后自己晉升成產品經理或者交互設計師時，怎樣去設計一個完整閉環的系統。
B端產品和C端不同，C端產品大多數都是針對個人用戶，設計的關系結構相對來說比較簡單，每一個用戶擁有的權限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權限差異問題。
而B端產品的用戶一般都是企業，企業用戶一般會管理著多個角色，也就是角色多元化（例如一些校園系統角色就分為：普通教師、級長、主任等角色），不同的角色對系統的需求和職能也不一樣，我們需要根據角色的需求去劃分不同的權限，讓他們互不干擾但又滿足他們的需求問題，因此B端產品的基礎邏輯比C端產品相對復雜。
看完上面文字的同學可能蒙了，又角色又權限的，能不能說點人話？
行！其實很簡單，B端系統無非三個邏輯（也是三個頁面）：用戶管理、角色管理以及菜單管理。（有些系統因為業務需求可能有部門管理，那么算上部門管理就四個）
為什么我把菜單放到最前面跟大家講？是因為菜單管理比前面兩個相對簡單，而什么是菜單也特別好解釋，大家可以直接認為系統左側的頁面列表就是菜單，系統中擁有多少個頁面那么就有多少個菜單，你的菜單越多就以為著你的權限就越多。
菜單管理的作用就是用于管理員對整個系統頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發工作量會直接不要菜單管理，有多少個頁面都由代碼直接寫死，管理員不能通過頁面進行人工配置，這樣會導致以后擴展會非常麻煩，當然了，有一些系統的菜單幾乎不改的話，代碼寫死也沒問題。
在講解用戶之前我需要提前跟大家講一下什么是權限，準確來講應該是權限分為哪些？
在目前的后臺系統中，權限一共分為三種權限，分別是菜單權限（也就是上面介紹的）、數據權限以及操作權限。
菜單權限決定了用戶有沒有這個頁面，例如學校系統中，主任有看到所有教師的教學數據的界面，而教師卻沒有這個功能，那么在給主任新增賬號的時候就應該把對應菜單賦予進去?？瓷先ズ軓碗s，其實具體操作就是新增的時候把對應的菜單勾選上就可以了。
數據權限則決定用戶能不能看到對應的數據。還是學校系統的例子，初中部主任只能看到初中部所有教師的教學數據，而高中部主任也只能看到高中部教師的教學數據，不同用戶能看到的數據也是不同的，所以在新增的時候需要給用戶配置（一般配置就是勾選）好對應的數據權限。
但是這里有一個問題，配置數據權限時我們如果一個一個人去勾選配置的話會特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號的時候需要一個一個的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗就會變得特別差，因此現在的系統在配置數據權限時都是以部門為單位進行配置，也就是說，直接選擇部門就代表著擁有整個部門的數據權限。
最后操作權限即決定了用戶有沒有對數據進行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數據，那么他能不能對教師們的數據進行增刪改查或者導入導出呢？這就取決于操作權限的配置了。目前很多的后臺系統在配置菜單權限的時候同時需要把操作權限進行配置（因為只能先有頁面才能進行操作），操作權限一般就是增加、刪除、修改以及查詢，當然如果頁面還有導入導出或者其他功能，這些也需要在操作權限中進行配置。
用戶其實也很容易理解，B端系統的用戶其實就是需要登錄進系統的賬號，所以有一些系統的用戶管理也叫賬號管理。
因此用戶管理的作用就是對登錄進系統的賬號進行增刪改查等，當我們需要對別人提供一個賬號時，我們就新增一個用戶的賬號密碼給他們，直到他們用完了再把他們的賬號進行刪除。
那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個用戶給要他們分配不同的菜單去做他們的事情。
例如在學校系統中：普通教師只負責自己班級學生的成績錄入，所以普通教師只有班級成績錄入的菜單，但是學校主任卻不一樣，他不僅僅能看到各班學生成績，還能根據各班成績進行對比分析，年級學生排名等等..
因此在剛開始的傳統權限系統中，我們會直接把相應的菜單權限、數據權限、操作權限賦予給用戶，每新增一個用戶我們就選擇好所有的權限都勾選上賦予給用戶，最后提供給用戶進行操作。
然而這種操作方式有一個弊端，就是如果每新增一個用戶，系統管理員就需要重復進行勾選相同的權限，那么就會耗費大量的精力（一個用戶要配置的權限特別多，如果用這個方式操作的話新增一個用戶可能就需要花費很長時間）。因此，為了解決這個問題，我們在用戶與權限之間建立了角色管理。
系統中角色的定義其實跟生活中是一樣的，我們把固定的權限集合到一起從而形成了角色。例如，生活中UI角色就負責頁面的視覺設計，而交互設計師則負責了產品的邏輯或者用戶體驗設計，這些角色擁有的權限一般很少變化，也幾乎不會進行刪除或者修改，就好像UI設計師或者交互設計師這些角色不會一時半刻就被完全消滅一樣。
有了角色，我們可以先把對應的權限集合賦予給角色，然后新增用戶時，再選擇用戶對應的角色即可。
這樣做的好處是什么呢？好處就是當我們新增用戶的時候，如果是相同角色的用戶，我們不再需要重復去大量勾選相應的權限了，只需選擇好該用戶是那個角色就可以間接對用戶賦予權限，并且后續要對用戶進行權限的修改也十分便捷。因此，在現在的后臺系統中，大多數都是采用權限賦予角色，然后新增用戶時再選擇用戶對應的角色的方式。
如果看完上面的知識點還有點懵的話也沒關系，這部分給大家展示在后臺系統中菜單管理、角色管理與用戶管理的實際應用是怎樣的。
第一步先查看菜單管理有哪些內容，一般情況下，一個成熟系統的菜單頁面幾乎是已經固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數據就代表著系統總體有多少菜單。
第二步進行角色管理，如果是成熟系統的話，角色管理的角色也早已經分配好了，我們并不需要過多的進行操作，但如果是剛研發完成的系統，那么我們就需要根據現實的用戶需求進行角色的設置，具體添加角色的主要參數包括角色名稱、菜單權限、數據權限以及操作權限（其實也就是上文介紹的三種權限），其他的參數都是根據自身業務進行添加。
最后一步就是用戶管理，配置好角色后，我們就可以根據需求進行用戶的新增操作，例如現在我們需要新增一個賬號進行登錄系統，那么在用戶管理頁面中點擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點擊確定按鈕即可完成（因此，新增用戶的三個必要參數是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數根據系統業務進行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺系統，隨后體驗一下作為其他角色是否能完成自身需要的業務。
用戶管理、角色管理以及菜單管理是B端系統最基礎的邏輯，也是同學們將來需要轉崗B端交互設計師或者產品設計師所必須掌握的知識，上面所介紹的僅僅是RBAC模型中最簡單的一種，現實設計中可能出現各種情況，因此關于這次的B端產品設計我想給大家幾點Tips：
1、在現實開發中，后臺系統并不一定像我上面所說的那么完善，有些系統并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統就只有一個角色，那么角色管理也不需要了，這些情況都是有可能發生的，所有我們做設計的時候除了運用自己的知識以外，更多的是工作經驗，知識是死的，人是活的，永遠別忘了設計的本質是解決用戶需求問題。
2、很多時候后臺的邏輯管理會比我上面說的要復雜的多，例如一個用戶可以擁有多個角色嗎？不同角色能不能有相同的權限？如果有角色被刪除了，那么該角色關聯的所有用戶應該怎么處理？可能你認為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會遇到的。
3、上面介紹的管理操作都是基于超級管理員賬號（admin）進行操作的，如果你拿一個普通賬號的話一般是沒有對應的菜單權限，我擔心有同學看完文章后馬上登錄自己的后臺系統進行操作，接著登錄進去找了半天都沒有找到對應的菜單在哪里。
好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。
文章來源：優設網 作者：北沐而川
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計規范是指對設計的具體技術要求，是設計工作的指導規則。一般包括總體目標的技術描述、功能的技術描述、技術指標的技術描述,以及限制條件的技術描述等。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。
設計規范一般會具體到公司級別、某一類產品線、某個產品等。今天主要講具體某個產品的設計規范，主要是為該產品制定統一的用戶體驗、品牌、視覺等方面的規范，當然是在滿足以上公司級別和某一類產品線層次的設計規范的基礎上。
設計規范由設計原則、設計語言和組件庫構成，在設計原則的指導下使用設計語言和組件庫創建體驗一致的用戶界面。
設計原則是指：整個設計體系所要遵循的全局原則，是為我們設計提供方向指導的。
設計語言：是指設計所包含的語言體系。具體包含了：色彩、字體、圖標、布局等。
組件庫：相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個個頁面。下面我會具體說明組件庫。組件庫具體包括：按鈕、導航、表單、數據等等。
B端產品和C端產品制定設計規范差別還是蠻大的，最主要的差異大致是：
C端產品的設計規范：目標幾乎都是為了更好的打磨用戶體驗的一致性和標準化；
B端產品設計規范：由于用戶體驗更復雜，學習成本更高，所以它的目標側重點是：除了布局的不同外， 相同業務場景下，相同產品功能需要有一致的，標準化的體驗，降低學習成本，提高工作效率，即統一體驗。
創建原型時可直接調用組件庫，能搭建出高保真的原型。
與設計師和前端溝通更加順暢，小的修改可以直接和開發溝通不需要通過設計師出圖，極大增加了前期的節奏，提升溝通效率。
對于只有一個設計師的項目：可以讓那個設計更加規范，有些簡單功能迭代可以直接個研發溝通，不用再單獨出圖，減少重復性的工作。
對于同一個項目由多個設計師共同協作時：可保證設計各方面包含體驗、設計、交互等等的統一性。減少設計成本，提升設計及溝通效率。
對于接手新項目，能盡快的了解產品，快速入手。
對于開發完成驗收走查，有了前期的規范及比較詳細的設計尺寸，開發的設計還原度會更高，減少重復及沒必要的設計走查。
開發可以按照設計規范建立好公共組件庫，極大的提升開發效率。
可復用的東西確定了下來不會頻繁改動，設計走查的問題也會逐漸減少。
對于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問設計師。有更多的時間專注于測試功能上的問題了。
通用的組件前期測試后了以后，后續就不需要重復測試，極大的提升工作效率，避免重復工作。
前期制定及評審設計規范以后，有一套筆記明確的規范，可減少各個職位方面的溝通成本，提高溝通效率。
目前市面上有很多多的第三方設計規范，比如：antdesign，element，那有人就會問有必要自己重復造輪子做一遍嗎？
我覺得是非常有必要的，為什么呢？
1、每個產品有各自獨有的品牌調性，如果都用第三方 的設計規范，那同質化會很嚴重，很難做到差異化，也就很難在競爭中脫穎而出。
2、 世上本沒有萬能的設計規范，那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發相差無幾。
3、第三方的的成熟的組件庫，我認為應該把它當成模式，在他們的基礎上去做自己的設計規范。
個人工作中總結出兩個比較建議的規范建立時間點，探索期和成長期。
產品在導入階段，產品還在處于極大變動的時候，這個時候做設計規范，其中就蘊含可極大的風險。但是也不是不做規范，這階段規范主要涉及到色彩，字體，間距，布局，柵格等通用設計原則以及常用業務組件的定制。此階段搭建的規范具備高效性以及靈活性的特點。
不適合搭建特殊的業務組件，比如：當領導想要突然調轉方向也不會很慌，改動較小就可以完成整體的規范轉向）此時搭建規范組件庫需要考慮到預留后續更改的空間。
當產品進入成長期處于較為穩定的版本，整個團隊對業務的理解也都很熟悉了，這個適合創建符合業務場景的組件庫，有了前期的積累這個組件庫會更加符合產品及業務邏輯。
在制定規范前，設計師需要明確產品中主要有哪幾種分類，將最基礎的分類定義好方便后續針對分類內容進行整理。B端產品與C端產品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設計規范。
Ant Design是由螞蟻集團體驗技術部經過大量的項目實踐與總結，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗，是非常完整的一套設計規范。
TDesign是騰訊企業級設計體系，也是去年才發布的。雖然才發布，但是作為一款誕生于騰訊內部開源，卻是經過了超500項內部業務檢驗的企業級設計體系，TDesign 匯集了騰訊眾多優秀組件庫能力和設計研發經驗。
內含豐富可復用的設計組件資源，如色彩體系、文字系統、動效設計等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產品設計軟件?？梢园凑招枨蟛榭磳M件的使用教程和代碼演示，只需簡單的引入操作，即可搭建屬于自己的產品界面。
Element是由餓了么公司前端團隊開源一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發 PC 網站產品，在眾多的的組件庫中，AT-UI 屬于視覺風格比較清新的一款。
是有贊 PC 端 Web UI 規范的 React 實現版本，提供了一整套基礎的 UI 組件以及常用的業務組件。通過 Zent，可以快速搭建出風格統一的頁面，提升開發效率。目前有 50+ 組件，這些組件都已經在有贊的各類 PC 業務中廣泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。
iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。
Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續維護 4 年時間。Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京東物流視覺規范的移動端組件庫，包含了36+高質量組件和詳盡的文檔和實例。
設計師在開始準備設計規范時，首先需要確定設計風格和設計尺寸，頁面布局是做居中固定式，還是全屏響應式。如果是全屏響應式的網頁設計，那要選擇怎么樣的屏幕來做效果？等等這些問題
接下來分別來展開說明。
純白風（網頁大背景是純白色;文字背景是線框，輕淡色（灰）;文字一般用深色）
輕淡風 (網頁大背景是淺灰色;文字背景是白色;文字一般用深色）；
深色風（網頁大背景是深色;文字背景是帶有透明度的純色；文字一般用白色）
我們在開始設計之前，要確定好使用哪種風格，一旦確定下來，后面的所有頁面和元件的設計，都得基于這個風格來設計。
據數據顯示，目前市面上比較流行的是：輕淡色背景風+全屏響應式的設計風格，也是相對比較保守安全的設計。
接下來需要考慮尺寸是做居中固定式，還是全屏響應式。全屏響應式的網頁設計，選擇怎么樣的屏幕來做效果。
設計規范中，分辨率尺寸的問題，一直以來是我們設計師討論最多的。
決定產品設計尺寸分辨率大小的因素大致包含以下兩點：
目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。
做B端產品時，現在市場上的設計師一般都會采用的是1440*900。為什么不用市場占有率最高的1920*1080和1366*768呢？
1、由于B端產品的特殊性，它的尺寸分辨率大小，是取決于用戶使用的電腦設備條件。由于員工電腦顯示屏大部分都是統一采購的，尺寸也就大致統一，所以開發適配的分辨率可以按這個統一尺寸進行設計。
2、因為它的兼容能力會比較強，向上適配或者向下適配誤差會比較小，不管是市場占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。
注意：別忘了設計出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開發實現的效果和高保真設計圖誤差最小。
假如你產品的用戶用的設備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無疑問，在選擇設計尺寸上，直接選擇1920*1080分辨率。
比如我現在做的產品，除了移動辦公，web基本都是固定辦公，管理人員使用的辦公設備（電腦）屏幕一般都是臺式電腦，那這個時候，我們在設計時就會同時考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。
所以設計師們在選擇尺寸上，一定要靈活使用，不能一味的認死理只選擇1920 或1440某一尺寸，而是要對您的產品用戶的具體情況做好分析，從而得出最適合你們產品的設計稿的尺寸。
注意點：
如果希望設計稿完全還原程度高的話，還特別要考慮瀏覽器的適配，比如說它的頂部固定區域（當前網址，書簽欄等的高度）必須排除在外，剩余的部分才是我們設計稿的真實高度。
拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設計實際高度=電腦分辨率 -（網址欄+書簽欄+頁簽高度)
上下布局包括："頂部菜單欄、主體內容"兩大區域。其中頂部菜單欄是固定不變的，主體內容根據不同分辨率進行自適應動態縮放。另外還需要把主體內容左右兩邊空白區域最小值確定好；
優勢：內容區域可操作空間大。
劣勢：導航區域限制數量，如果導航選項內容比較多，用頂部橫向導航的話，就會顯得很擁擠。另外，橫向導航一般有“展開”，“折疊”，和“收起”三種狀態，加上內容很多的情況下，橫向導航就特別難做到尺寸適配。
左右布局包括："左側菜單欄、頂部欄、主體內容"三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進行自適應動態縮放。
左右布局時，左側菜單是支持收縮或展開，收縮狀態下也需要有固定的寬度。
優勢：導航部分可擴展性強，適合導航選項內容都是比較多的情況。且只有“展開“和”收起”兩種狀態，在不同屏幕情況下，寬度的自適應也能更加得心應手。
劣勢：相對內容區域空間變少。
現在很多后臺管理系統采用，"頂部一級導航欄、左側二級菜單欄、主體內容"三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進行自適應動態縮放。
優勢：結構更清晰。可承載更多層級內容。更適用于復雜且層級多的產品。
所以，可以得出結論：設計師在選頁面布局的時候，要全局考慮產品框架及內容。
1、如果導航選項內容比較多的話，或者不確定有多少內容的情況，從美觀和操作難易程度、可用性來評估的話，選擇第二種左側導航是最適合B端產品使用的。
2、如果內容選項確定很少，就沒那么多限制，“左側縱向”"頂部橫向"都好使
特別要注意
1、同一個產品需要考慮它的統一性，不能這里使用頂部橫向，那里用左側縱向。
2、如果是個更新迭代的版本，就還得考慮老用戶之前的使用習慣，避免引起不必要的麻煩。
在確定好導航的布局后，就基本上能確定整個產品的頁面布局了。
B端產品，一般會在整個頁面的左上角放企業的LOGO，頂部欄高度48+8n，側邊欄寬度200+8n。
我常用的是頂部欄高度：56px或80px，側邊欄寬度：200px，側邊欄收縮狀態寬度：56px或80px，右側的側浮窗寬度：400px。（具體高度寬度尺寸，設計師可根據具體情況來定，不需要按部就班這么死板）。
同時需要確定好主體內容的上下左右邊距，以及主體內容區域中各模塊的安全距離，內容超出區域的，通過滾動查閱更多。
Windows系統：中文Microsoft YaHei(微軟雅黑），英文Arial；
Mac字體：中文PingFang SC（平方字體），英文 Helvetica；
常見的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數字號，文字大小12+4n）。
注意：
在設計過程中，設計師對字號應該有一個全局觀，在同一個界面內，盡量少用大小太接近的字號。比如一個頁面中，如果同時用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會比較弱，沒有主次之分，用戶閱讀困難，視覺效果也顯得凌亂。
所以，剛接觸B端產品的小白設計師，如果不知道怎么運用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會層次明晰，能夠有個比較不錯的布局結構。
“行高”根據文字大小和使用場景來定，公式如下，
行高=文字大小+8px（或6px，視情況而定，我常用8）
例如：12號字體的行高=12+8=20px
同一個界面中，一定不要出現多個不同字體。盡量選擇用戶設備里自帶的字體來進行設計，比如說WIN系統默認用系統自帶的“微軟雅黑”，不能使用特殊字體。
如果必須要用特殊字體，建議用圖片替代。如果用戶的設備里沒有你使用的這些字體的話，會默認顯示設備的系統自帶字體，最終效果就會和你的設計稿相差很多。
從視覺方面來講，為了讓整體界面更簡潔具有美感，體驗感更好，在使用字體方面，一般字體種類不超過2種，越少越好。因為頁面的層次感主要是靠字號大小及顏色拉開層次，如果字號在變，字體種類也各種變化，整體就會感覺很凌亂，沒有統一性。
顏色規范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。
品牌色系：即產品主色調，主色調的設定直接影響產品氣質和直觀感受，也是產品的對外的形象。品牌色是根據這個產品的特征和定位、用戶群，以及使用場景等綜合考慮最后確定的。
品牌色的一般用于LOGO 、操作狀態、按鈕顏色、其他一些可操作圖標等。
1、品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調，就得格外注意調節好主色調與錯誤提醒的區別了。
2、注意選的品牌色（主色調）不要太刺眼。要保證用戶長時間使用也不至于顏色太亮太刺眼，而產生的視覺疲勞。
輔助色系：輔助色一般用于“提示”。類似：成功、失敗、警告、無效等內容等。
中性色系：中性色涵蓋黑、白、灰三個不同層級，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現出不同的層級。
B端產品的文字中，一般會有：一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字、說明文字等。
為了區分層級，提升用戶的閱讀體驗感，通常會根據具體需求，把字體顏色的深淺，大致分成3到5個層級。常見的有#333333、#666666、#999999這個組合，這個組合的層級區分比較分明，適應性比較廣，設計師在設計時可以直接作為參考。
圖表色：我們常見的后臺管理類產品， 像數據可視化、統計圖、多個標簽的不同配色方案，所以一般還會設定圖表的顏色。
按鈕是任何用戶界面不可或缺的交互元素，B端產品中用到按鈕的場景特別多，類似：登錄注冊，保存，表單，彈窗，導航，提交，確認等等。
常見的按鈕形式包含這六大類：圖標文字組合的按鈕 ，主按鈕，次按鈕（線性按鈕），按鈕菜單，文字按鈕，圖標按鈕。
常見的按鈕交互狀態包含六種：
正常狀態、聚焦狀態（使用Tab鍵或方向鍵來對網頁進行訪問輸入的聚焦狀態，在設計時很多設計師都會把這一狀態忘記，導致用戶無法用方向鍵控制光標位置，會降低用戶的使用體驗感）
懸停狀態（鼠標正在按鈕上，但不點擊，需要注意的是平板電腦和移動端設備上不會展示懸停狀態，因為手指跟光標不一樣，無法在屏幕上進行懸停 ）
激活狀態（點擊按下狀態）
加載狀態（等待期間不可操作，在B端產品中Loading狀態特別重要，能緩解用戶的焦慮情緒）
禁用狀態（不可操作狀態，置灰顯示和透明度（40%）代表不可操作狀態）
按鈕圓角：在開始設計產品之前，設計師都需要對按鈕圓角有具體的規劃。按鈕四角都是直角會比較有距離感和強烈的引導性，容易分散用戶注意力，所以我們一般會采用視覺上給人比較柔和親近感覺的圓角按鈕。
但按鈕的圓角并不是越大越好，因為在相同尺寸下，按鈕圓角小的，操作熱區會更大，頁面的使用效率也會更高，更容易操作。同時還要特別考慮到下拉菜單的設計，所以圓角大小一般采用偶數：2px,4px,6px,8px,16px為宜，不宜過大（這里的圓角弧度的值有一定的倍數關系或基數關系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圓角大小也會跟著按鈕尺寸的大小有相應的變化。
在B端產品中，當確定好網格基數時（通常網格設定為：4px。按鈕的高度會分兩種情況：
1、一種是寬度為高度的倍數關系。
2、第二種是如果寬度為高度的倍數關系，從視覺上看達不到想要的效果的話，設計師就可以靈活設置。
討論到按鈕的尺寸，我們需要大致知道如何設置網格基數。
在設計中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網格功能，設定好一個數為基數，然后按照這個基數來進行按鈕的繪制，按鈕就相對比較規范了。
那如何用繪圖工具設置網格基數呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫布】-【網格設置】- 彈出網格設置對話框進行設置就好了
把網格基數設置為【4】的原因：它是谷歌Material Design繪制小組件的規范，模塊之間定義的基數就是【8】。
假設我們定這個基數為4，那采用的尺寸數值就需要是基數4的倍數。比如B端產品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數4的值。例如：32/4=8，40/4=10，這里的4為基數。
按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開發會根據文字內容的多少自適應的。
按鈕間距，按鈕之間的間距也遵循基數為4的倍數，比如：16，24，32，40，48等。這里的基數定為偶數（一般為4或8）
從廣義的定義來講，表單是指用于數據錄入的一切形式。從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。表單的本質核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱之為表單。
表單在設計上的結構有：1、標題；2、表單標簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；
表單的設計必須優先考慮為用戶減負，提高效率并簡化填寫流程。另外表單中組件的選擇需要依據具體的數據類型和具體的業務場景進行合理正確的選用，為用戶提供高效的數據錄入表單，降低用戶操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。
可交互輸入域，是構成表單的核心內容，是表單用來采集數據的入口。輸入區是用戶交互最多也是最能影響使用體驗的區域，不同類型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶體驗大有裨益。
表單并不是把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了
其實，表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。
后面我會專門有一篇16000+的文章聊聊這個B端產品中比較核心的表單，有興趣的朋友可以關注一下，大概五月份就會發。
表格在整個B端產品比較常見的，它的地位也是相當重要的，我們在設計表格時需要注意一下幾點：
一般以左對齊為準。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標題和內容需要右對齊）
默認展示的列數為3-8列，如果需要展示更多列數，則需要優先固定展示重要列，其余的列的內容會以滾動條滑動而展展示出來。
寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優先完整顯示。
字符不要多，最多可輸入8個。如果文字太多，就需要做文字信息精簡化。
表格內容超過一屏，就需要顯示豎向滾動條，注意：表頭需要固定，但表格內容可滾動展示。
表格的某些單元格無數據內容時，需要用“—”表示，需要區別于“0”。
標題欄高度（標準高度為56px）；內容欄（標準高度為56px，偏大的標題欄高度為80px），內容區和標題欄水平居中對齊。
列的對齊方式（垂直方向）除了需要始終保持“右對齊”的：金額，最右側操作列內容外，其他的內容可自行左對齊或右對齊。行的對齊方式（水平方向）
當表格欄的高度尺寸小于80px 時，一般只有一排內容，內容水平需要居中對齊。當表格欄的高度尺寸大于80px時，如果是有兩排內容，所有的內容需要頂對齊；但是如果既有一排內容 又有多拍內容的話 ，內容水平則需要居中對齊。
表格中的內容，會根據字段的長短定義所占的百分比，完成表格占比，從而達到希望實現的最佳效果。
滾動條分為橫豎兩種，當表格內容超過一屏時，就需要顯示滾動條。豎向滾動條時， 需要固定表頭標題欄和頁碼。只需滾動表格內容部分即可。橫向滾動條時， 需要固定第一列 和 正在操作的項列。只滾動表格內容部分即可。
僅提示用戶相關內容，不需要用戶做任何交互動作。類似：toast弱提示通知提示等彈窗（（一般3-5秒會自動消失：包含普通信息，成功信息，失敗信息，警告信息）。
另外還有，鼠標經過的時候即可出現而不用點擊的彈窗（這個彈窗通常會設計一個浮動帶有陰影效果的框，不需要遮罩）。比如提示說明，顯示更多信息，鼠標移過后立即消失，它不會影響下一層（當前頁面內容）頁面的視覺效果和操作。弱彈窗尺寸一般根據文字多少自行適配。
第二種是強彈窗。它是一個需要用戶必須對這個對話框進行操作后才可以離開。
例如彈出的列表，詳情，表單等的確認信息彈窗、錯誤提示彈窗。這些強彈窗一般會對下面一層的頁面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁面的內容做模糊濾鏡等等；
在寫彈框規范時，應了解各自項目中需使用彈框的有哪些內容，給出相關大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對于通知提示給出停留多少時間后自動消失，彈窗彈出狀態等等相關的交互規范。
缺省頁是互聯網中常見的場景，當遇到網絡不好、頁面中沒有內容數據、暫無資料等等情況，所導致的空白頁面。
大致分可為：系統類缺省頁，信息類缺省頁，空白類缺省頁。
遇到這些情況時，設計師一般采用一些插畫&文字的組合放置本來空白的頁面中提示或引導用戶進行下一步操作，以緩解用戶的焦慮情緒。（也就是我們常說的情感化設計的一種方式）
設計規范很大一部分是組件庫，所以就把組件庫單獨拎出來聊聊。
做一個比喻，組件庫相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個頁面，而設計規范就相當于搭建的“說明書”。
通常我們將組件庫分為基礎組件和業務組件兩大類，前者是系統通用組件（圖標/按鈕/輸入框等），后者是由業務決定的相對更復雜的組件模塊。
而對于B端產品和C端產品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現、兼容性，另一方面，C端會根據活動、節日切換不同的主題，也要考慮組件視覺上的個性化擴展。對于B端而言，組件庫更看重可復用性和穩定性，保證可以支持業務快速迭代。另外B端會涉及到各種各樣的數據錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。
在業務已經發展到一定體量情況下，需要將項目中具備復用性及拓展性的模塊進行拆解，對于B端產品來說篩選的時候會依據之前迭代的版本內容，把頁面一一羅列出來，將可替換與相似的模塊提取，并利用思維導圖的方式統一歸納，并做成可以被替換的組件。組件的替換建議合成一個大的排期進行替換，避免了線上組件不一致導致體驗問題。
以我們現在的產品為例：依據產品類型將組件拆分為：基礎組件 、業務組件、數據可視化組件、常用模塊。
將產品拆分后，此時得到很多可復用組件。我們再依據原子設計理論針對性進行拆解直至拆分出5個層面：
從原子開始重新依據定好的視覺規范進行更改，再由原子組成新的分子。
在與開發溝通設計規范制定的過程中，常提到他們寫CSS樣式的時候是采用盒子（box）去寫的。通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。
走查時使用瀏覽器我們也可以看到開發寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。
搭建組件庫的步驟
對于新產品來說，業務體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。
對于已經成熟的產品來說，我們可以直接全面體驗查看頁面，找出所有用到的組件，除基礎組件外，提煉出復用率高的業務組件進行結構化和組件制定。
以提示彈窗為例，演示單個組件的建立方法。
1. 定義組件：根據業務定義提示彈窗使用場景，用于重要信息的提醒，且需要用戶自己關閉操作。
2. 拆分組件：這一步是將組件拆分為元件。對提示組件進行拆分后得到如下：
3. 重組輸出根據業務場景，我們把各個元件重組為組件，建成組件集，并定義各種組件的使用規則。
在組件庫建立完成后，只有在日常設計中真正使用組件庫，提高組件庫在設計稿中的覆蓋率，才能真正達到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團隊中進行推廣，加強設計團隊的公用意識。設計團隊內部可以直接維護一套組件庫，設計師設計時直接調用公共組件庫組件使用。
另外，我們還要與開發工程師配合逐步完成現有頁面的組件替換。
組件庫的內容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數據一樣，組件也會有增刪改。我們需要定期對組件庫進行維護。
增加：當有新的組件產生時，我們需要通過判斷它的拓展性和復用率，以確定是否將它入庫。
刪除：隨著產品的不斷升級迭代，如果某個組件已經不用或復用率很低時，我們可以考慮是否要將它刪除。
改：不可避免的，組件會隨著業務而進行升級，我們可以通過數據埋點和A/B test的方式來確定某個組件是否要進行改動。
組件擴展性弱：
有時候設計師做出來的組件雖然看著很好，但是實際上使用時，適配效率很低，用組件去擴展和重新做的效率差不多。
大部分時候設計師手中都有任務，于是這個任務就落在了相對不是那么忙的設計師手里（一般是新設計師），但是新設計了解業務相對來說是不夠的，做出來的東西就像是是空中樓閣，拋開業務談設計規范的都是很難落地的。
設計師不了解開發的實現方式，可能會做出來以后，開發較難實現，然后開發也就不會做。
首先，設計規范的作用是巨大而延遲的，不能即時產出很大的價值，另外一方面，設計規范的落地會增加開發工程師很多的工作量，且無法量化成果。這也導致很多時候設計師無法爭取到足夠的開發資源來做這件事，所以，很難導致達到預期的效果。
設計師需要更加全面的了解產品及業務流程。
前期需要做好用戶畫像，弄明白產品的目標用戶的差異，不同用戶的使用場景。只有弄清楚各個角色的關系以及功能設計的邏輯，具體用戶年齡，解決什么問題，才可以產出更符合用戶需求的設計。
如果是新的產品，那就需要去詳細的看類似的競品的功能及業務流，并且了解公司產品的定位及方向，所以就大致清楚設計的大方向。
系統整理產品情況，最好是做思維導圖形式，可以更好的梳理同類型的產品功能及組件，也就能更好的提高組件的復用性。
在制定規范前，需要明確產品中主要有哪幾種分類，將最基礎的分類定義好方便后續針對分類內容進行整理。
團隊溝通其實是一門藝術，那需要如何做呢？
首先，寫一份設計規范的價值的提案給領導，爭取到足夠的資源，包含設計資源、開發資源。如果領導的主導參與，那這個事情就好推動多了。
然后，把設計規范的設計工作交給熟悉業務的設計師來做，通過業務提煉復用率高的典型元素，優先開發，最大化投入產出比。
搭建設計規范和我們日常處理工作需求類似，并非輸出一份文檔就結束了。我們還需要將做好的設計規范推廣給各個職能部門的同事包括設計小伙伴，PM和開發小伙伴的團隊內外，并且需要得到團隊內的一致認可才算是初步完成。
召開專門的設計規范會議，以清晰明確且有效的方式把詳細的內容傳達給各個相關人員，在一致認可規范的情況下，以達到內容的傳達到位。同時，這個時候，就可以依據開發人員的反饋，做落地的修改規范文檔。
1、如何推廣給PM
利益點：提升協作效率，減少工作成本
在啟動設計規范的整理之前，內部宣講讓PM對于設計規范的搭建已經有了一個基礎的概念。然后爭取到更多的開發資源。否則PM不會分配資源給予時間去搭建整體的設計規范。
可以從提升PM與設計的效率和降低原型搭建成本作為切入點，通過組件庫以及通用模版的搭建，PM只需要極低的成本學習一下組件庫怎么使用，即可搭建高保真的原型界面。甚至完善好組件庫后直接不需要設計的參與，開發通過原型組件庫搭建頁面。
利益點：提升設計效率，減少人力損耗，保持體驗一致性
設計規范一般由團隊內小伙伴共同制定，基本上已經對規范的優勢達成共識。因此主要講講如何更好在團隊內部使用規范。
團隊設定主要負責維護的設計人員，其他人員在設計時候，通過Sketch Library 共享組件庫可以直接調用組件，并建立更新日志規范項目流程提升效率，定期維護的時候其他人員統一告知負責維護的設計人員，統一定期修改更新升級維護。
利益點：封裝組件，更少的更改，提高驗效率，縮短研發流程
需要研發團隊認可設計規范，前期前端的參與是必不可少的。
在制作規范時設計師了解了前端開發的一些簡單原理，前端開發也能及時了解設計師的想法，大家不再是各司其職而是串聯起來共同協作，當規范確認下來前端就不會頻繁改動組件，而且在有限的項目時間中。設計規范的統一極大縮短了設計和前端開發所需的時間，為后面的項目爭取了空間。
一套完整的規范包含內容是非常多的，難以在1個版本迭代里面修改完。
因此可以采用敏捷開發的思想，小步迭代快速推進，將設計規范的覆蓋放在每次迭代過程中。設計師需要將自己作為設計規范這個項目的產品經理，針對現有的需求進行拆分，并排出優先級分版本迭代進產品里面。
可以依據從大到小的原則進行優先級排序。對產品設計風格影響大的先排，影響小的后排。
設計規范的制定不單單是對于設計師，在嵌入版本里面要隨時與產品和開發多溝通，以便達到更好的落地效果。
接近1.5萬的文字梳理，感謝你看到了最后。接近尾聲了，制定及梳理設計規范對于設計師來說個人成長有哪些方面呢？我個人覺得可以從這幾個方面來說；
通過整理規范，需要收集目標用戶，使用場景、前期調研、產品功能梳理等眾多資料，這期間我們需要去發現信息以及整理信息。龐大的信息收集，那對于個人的收集整理信息的能力是一個很好的提升，同時對產品會有更全面的認識。
歸納總結能力
將收集好的信息進行分類整理，這要求需要一定對邏輯性。在設計基礎框架時合理對分類可以協助我們處理好每個控件對層級，這項能力無論實在工作還是日常中都有著巨大對好處，可以幫助我們從一堆繁雜的事物中“提綱挈領”，換言之就是“化整為零”，做減法，提取出最關鍵對因素。
將信息歸納整理好后，需要對全局進行思考，全局的設計及交互都需要考慮到位，比如什么情況下適合跳轉頁面，什么情況下適合給與用戶彈窗。大體符合什么交互原則。
除了對大體交互需要考慮到位，細節上也不可以忽視，比如異常情況，極端情況該如何去處理，組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識去培養此類技能，對項目全局思考的越多，那么對整體項目對把控能力也就越強，與他人合作也會越顯得專業。
在整個推廣設計規范的過程，就是提升溝通表達能力的過程。
另外，整理設計規范時，難免會遇到模凌兩可舉棋不定的時候。此時可以尋求向上或者向下的資源尋求幫助，具備良好的表達能力能迅速幫助我們將問題闡述清楚，表達能力是設計師需要具備的重要技能之一。
我們每次在求助他人或向他人匯報，都需要在全面復盤問題過后做到心里有數，將問題自己復述一次是否有漏洞或者沒考慮清楚的地方。長此以往你表達的事情會更清晰，別人也更容易聽懂你說的事情快速理解內在邏輯，那么說服別人推動工作的難度也會越小。同事對自己的邏輯思維，表達能力都是很好的鍛煉。
這里總結了幾個工作中與上下游溝通的小技巧希望能幫助到小伙伴們：在開始與他人溝通之前我們需要搞清楚我們溝通的原因與對象
原因里面包含：
對象里面包含：
當然在溝通時還需要考慮方式和語氣，這些都需要好后斟酌。如果遇到情緒不太好的開發，這個時候反倒我們更不能將情緒激化，一般這些情緒化對態度過一會都會消散，可以采取冷處理等情緒過后換一種方式溝通看看。
由于產品性質和業務階段，身為B端設計師更加需要貼近一線場景，深入了解業務邏輯和用戶使用場景，在不斷深入的用戶調研中，也收獲了一些心得和經驗，所以和大家分享一下我常見的三種用研方式，相關物料可以通過文章底部的原文鏈接得到獲取方式
1.1設計師為什么需要了解用研
我們對產品進行設計探索的本質是利用已知信息去挖掘未知信息，最終利用獲得的信息進行決策的過程，信息的完整、準確程度與判斷力、等共同決定了決策過程中錯誤決策的概率高低
用研的過程就是一個信息的收集與處理的過程，在信息不足時我們可以通過同理心來“側寫”用戶心智推測信息，這一點從事C端設計的小伙伴應該感同身受，但由于B端用戶畫像與設計師自身往往偏差較遠，單純的通過同理心來感知用戶心智的門檻和難度較大
此時我們就需要通過用戶研究的手段獲取更準確更完善的信息，通過用戶研究，設計師可以貼近一線場景，了解用戶的真實場景和工作訴求，切身感受到產品的業務邏輯和使用鏈路，以便我們進行更準確的設計決策，同樣的，這樣也可以讓我們的設計方案在講述時有理可依，有據可靠，更容易獲得上下游的信任
接下來是我對于可用性測試、用戶訪談、問卷調研的學習總結，簡單與大家分享，大家有什么見解也可以互相交流
1.2用研的緯度
這是《贏在用戶》書中經常被人用到的用戶研究二維分布圖，這幅圖很好的展示了用戶研究的緯度，橫軸是研究用戶的結果；縱軸是理解用戶的方式，行為、態度，即觀察用戶做什么、聽用戶說什么，因此，用研主要通過定性調研和定量調研分別關注用戶的行為或者態度
那么什么是定量，什么是定性，行為和態度之間又有什么樣的關系，在正式進入用研工作之前，有必要對這四個方向進行一個簡單的了解
定性與定量
定性與定量是用戶研究中常用的兩種方法，兩者之間性質和分析方法有一定的差異
定性研究主要回答“是什么”和“為什么”的問題，是對種類或者質的差異的分析，說白了就是通過經驗、邏輯、同理心等非量化的方式去分析【主觀】的信息
定量研究，除了能告訴我們是什么以外，還能告訴我們“是多少”，一般指具體【客觀】的數據信息
通過上述示意可以發現，定量更加在意得出的數據，至于為什么會得出這個結果，就需要通過定性數據去驗證，因此定性分析在一定程度上會更偏向于闡述某件事物的意義
二者是站在不同的角度看待問題——定量關注數，定性關注人，在實際工作中定性與定量往往相互配合，例如通過定量挖掘關鍵數據，再用定性剖析原因，最后定量進行驗證，兩者結合以求得研究效果的最大化
行為和態度
行為主要是指用戶的某種動作，比如操作時的點擊、滑動，以及視覺的關注點、肢體語言等，這些都是下意識，無需思考的行為數據，這些數據可能與信息層級、傳遞效率、操作時長、交互鏈路等息息相關，觀察收集這些行為數據的最終目的是了解用戶為何按照自己的方式進行操作，與我們預期設想的路徑有什么不同之處，進而探究是什么促使用戶做出的行動
態度則是用戶的主觀想法或者情緒，情緒會誘發用戶產生一系列行為，例如操作遇阻時的焦慮，對產品體驗不滿的憤慨或者Aha moment時的驚喜這些都反映出了用戶對于產品當下體驗的一個態度，關注這樣用戶態度就能收集到產品體驗的信息，所以，用戶行為導致了某種結果，態度則揭示了影響行為的根本原因
在了解了定量與定性，行為與態度之后，我根據目前工作中常用到的可用性測試、用戶訪談、問卷調研，并對每個方法的適用場景和進入調研的關鍵動作進行詳細分析
在開始進行用戶調研之前，我們需要根據具體情況確定調研形式，以便實施后續的展開工作，根據用研目的、產品設計階段、頻次、所需樣本量和成本等多方面因素進行考慮，選定適合當下情況的調研方式
1.1明確測試目的
首先應該以目標為導向，確定需要測試的產品是什么，想要驗證什么樣的結論或者達到怎樣的預期，是為了發現產品或原型中可用性的問題，還是借此與競品進行有效性、效率、滿意度的比較，或是對某些功能點進行測試
1.2設計測試任務
在明確測試目的后開始設計測試任務，測試任務是可用性測試的核心內容，需要根據已經確定的測試目的結合用戶在實際使用過程中可能存在的場景和需求，將任務場景化，然后對復雜任務的整體流程進行拆解，列出任務列表，以此來編寫任務提綱
任務包括場景，操作和具體目標，設計的任務要有代表性，對應的功能或模塊必須是功能使用的典型場景、盡量模擬用戶真實的使用場景；在任務描述時做到語言簡潔，避免指定的操作或引導用戶，若任務流程較長，可以進行拆解形成多個用戶觸點，但觸點操作不需要告知用戶，僅在用戶操作時進行觀察即可
1.3 設定衡量指標
在設計好測試任務后，我們需要為任務匹配對應的可用性指標，目的是為了通過指標反應測試內容的可用性問題，幫助實施者有重點的進行觀察和記錄，還可以結合ASQ量表幫助測試者對每個測試任務的完成情況和滿意度進行反饋
可用性指標主要包括有效性、效率性、滿意度；這三者構成了衡量指標的一級指標，而每個一級指標下還包括更加細分的二級指標及衡量方式和標準，這就構成了可用性指標對照表；我們依照可用性指標對照表對每個任務的重點有了基本的概念，并且可以根據具體任務描述和衡量指標得到測試記錄表
現在我們對每個任務的可用性指標有了基本的概念，但是可用性問題除了從實施者角度去觀察用戶行為和結果，還需要幫助測試者結合任務進行自評和反饋
而在幫助測試者進行任務反饋時，需要將有效性、效率性、滿意度站在測試者的角度進行更加通俗易懂的拆分和信息傳遞，并且能夠做到量化分析，這也就是ASQ評估量表的作用和目的
有效性可以理解為任務的完成情況，即成功完成、求助后完成，未能完成
效率性則是針對特定任務，觀察其完成時間是否在正常范圍內，其任務完成路徑是否符合標準路徑，是否存在偏離和猶豫的地方，在進行定量研究時常用指標有任務完成效率、理想路徑偏移率等
滿意度則是用戶自我報告數據，包括任務完成難易度評價、任務完成滿意度評價、及評價原因
根據場景描述、測試任務、節點反饋和ASQ評估量表，我們可以得到“任務卡片”，“任務卡片”可以幫助用戶快速進入角色，明確內容，量化反饋，在每次任務完成后，將測試者所勾選的ASQ選項對應的分值相加，便可以得到任務評估分值
1.4準備測試腳本
可用性測試一般情況下需要兩人協同配合進行，通常一人安排任務鼓勵用戶發聲，一人觀察記錄，由于涉及內容較多，成本高樣本含量低，對被試用戶進行的活動任務也比較復雜且環環相扣，所以為了保障測試任務更好的實施，一般情況下會準備一份較為完整的測試腳本以供團隊更好的配合
一般測試腳本包括自我介紹、訪談預熱、測試規劃、測試任務、量表問卷（可選）、結束語、記錄文檔、相關文檔
1.5準備測試原型
1.6招募用戶
用戶可以大概分為新手用戶和專家用戶兩種類型，當然也可以進行更精細的劃分，例如（萌新、高淺、活躍、專業）在招募時為了結果可靠，應避免產品設計相關人員的參與，選擇有代表性的用戶，其中真實的產品目標用戶為最佳，測試者不宜過多，一般5名左右就夠了
例如調研XX產品的直播教室的可用性問題，就需要招募已在平臺入駐且售賣直播課的老師，在招募時還需要進一步的篩選，如果招募的5名老師都是長期使用平臺產品進行直播上課，用戶對于產品功能足夠了解，關注點會與新手用戶會產生較大的差異
1.7準備場地
包括預約測試場地、記錄設備、分配主測員和觀察記錄員、準備相關話術及活動禮物
測試場地：一般選擇安靜明亮的房間/會議室進行，訪談者和用戶最好呈90度的座位
記錄設備：安裝測試產品的電腦、手機；記錄設備可以使用錄音筆、相機或DV。設備要穩定，電量充足
2.1暖場
在了解用戶情況和布置任務前，不要太直接的進入測試氛圍，營造一個相對輕松的交流環境。先聊點輕松的話題，“您從哪里過來的呀”“平常工作忙不忙”等問題，緩解氣氛，把用戶帶入測試場景?？珊陀脩袅牧谋粶y產品相關的小問題，平時怎么用的？一般什么時候用？感受怎么樣等等
2.2布置任務
向測試者發放任務卡，結合任務卡中的角色和使用環境對任務進行簡單的介紹，如果是專家用戶任務就不用過多描繪場景，可以具象更具體的任務——“上傳一門新的課程、將課程分成基礎班和進階版分別售賣”等等
2.3觀察并記錄用戶使用過程
這個過程觀察記錄和引動測試者隨時的發聲很重要，與其他用研方式不同的地方在于可用性測試可以了解到用戶在操作時的想法和行為，用戶的發聲思考可直接影響可用性測試的效果和結論
我們可以適當引導用戶進行思考發聲，甚至可以為用戶做一些簡單的示范，例如 在新建時，可以說“我準備新建一門課程”，“我正在尋找建班功能，我現在遇到一些問題”等等，將自己操作時的想法表達出來，不需要刻意去思考，這有助于主測員去了解測試者的想法和感受
每個任務完成后，通過“任務卡片”重點回答測試者任務的完成情況，遇到的問題，詢問測試者的態度和感受，還需記錄任務完成的時間；與任務不相關的反饋可以記錄在備注中，而在記錄時盡量采用詞組、短句的快速記錄方式記錄核心內容，整理后作為優化任務幫助產品進一步提升可用性和易用性
2.4進行量表問卷
ASQ量表
上面在介紹可用性指標及任務卡片時我們有提到ASQ量表，其主要涉及有效性、效率性、滿意度3個方面，安排在用戶完成單個情景任務之后，這時用戶對于任務流程的操作感受是最明確和清晰的
SUS量表（可選）
SUS量表一般在相對完整產品整體的大型可用性測試后才會使用，因為一般的中小型測試任務比較集中和針對，用戶無法感知整個系統，量表針對測試設置10個問題（有效性、效率、滿意度），包含5個選項：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）
在布置問題時，奇數問題采用正面闡述，偶數問題采用反面闡述，以此來確保用戶評價的可靠性
單個測試者提交量表后，我們需要計算量表分值，奇數項計分采用“用戶打分”-1，偶數項計分采用“5-用戶打分”，由于是5點量表，每個題目的得分范圍為0-4，共10題，所以最大值為40，而SUS的范圍在0-100，所以需要將所有轉換分相加后乘以2.5，即可獲得SUS分數
3.1問題歸類分析
簡單測試直接根據發現的問題優化設計即可；如果目的是用于討論和匯報，需要對記錄內容進行整理和輸出，這時需關注問題的出現頻次、優先級和用戶反饋，按照問題維度分類，將不同用戶暴露的相應問題進行合并，羅列問題所對應的功能點、可用性指標、用戶比例、用戶反饋及相關現場記錄文件，之后基于問題對業務和體驗的影響劃分優先級并且標出對應的PM同學，最后針對這些問題給出優化建議
問題優先級的劃分方式
通過前期記錄觀察以及錄音錄屏我們可以發現用戶在任務測試中遇到的問題，根據問題對任務完成度的影響，我們可以劃分為P0（緊急問題）、P1（重要問題）、P2（次要問題）的方式對問題進行優化和排期
P0：用戶遇到阻力且無法解決，未能完成任務的問題
P1：用戶遇到阻力且反饋頻次較高，在求助后完成任務的問題
P2：用戶遇到阻力但可以自行解決，完成任務但感到不順利的問題
3.2輸出測試報告
較大的可用性測試在得出結果后需要向團隊內的成員分享，所以需要進行一次報告輸出做到內容對齊，一般包含整體概括、重點發現、項目背景、測試過程、測試結論、優化方案幾個模塊，具體匯報形式是不受限制的，一般文檔形式輸出較為高效，keynote匯報從內容和形式上會更加豐富
整體概括可以將測試背景及測試結論簡單的闡述，其中測試背景包括（項目背景、測試內容、施測情況），測試結論包括（測試結論、優化建議）
項目背景就不必多說了，將業務背景和測試目的進行簡單概括即可
測試過程包括準備階段（如何招募用戶、招募了多少名、用戶的基本信息和類型；有哪些測試任務、如何進行測試和記錄形式）及測試階段（本次測試安排的任務、設計的量表問卷、現場的錄像照片）兩個環節進行展示
測試結論需要將暴露的問題進行問題描述，結合整理的文檔表格詳述問題未讀和用戶反饋
最后，結合問題提出完整深入的優化建議和解決方案
3.3后續跟進方案
探討解決方案：協調產品、設計等多個角色來探討合適的解決方案，要注意，設計時要思考新方案是否會帶來新問題，并再次通過可用性測試來驗證新的方案。
持續跟進：了解項目結果的落地情況；已改進的問題或遺留的問題可在下個版本的測試中繼續跟進
在進行問卷調研之前，我們需要認識到問卷調研包括兩種調研類型，定量調研與定型調研，實際上大部分的問卷都是定量調研，需要大量的用戶樣本，在收集問卷后需要分析數據占比來驗證用戶想法，另外小部分就是定型研究，一般原因是因為用戶樣本量較小，通過小樣本量來研究產品的可用性問題
1.1明確調研目的
問卷調研中設計者并不直接接觸用戶，所以在問題的深度和廣度上是有限的，一份問卷不能解決多個問題，通常會圍繞解決1-2個核心問題去研究，在設計問題之前需要明確此次問卷調研的目的，然后圍繞這個目的去思考各種問題，通過怎樣的問題達到怎怎樣的結果
例如通過思考和確認，針對我們這款由0到1的知識教育平臺型產品，其調研的目的主要在于
需求驗證，包含對用戶進行市場分析、了解現狀、發現問題，從而提供解決方案，再到兩端用戶是否滿意現在的解決案
用戶接受并付費的意愿如何。收集用戶信息、挖掘分析用戶的付費意愿以及付費習慣
問卷的目的一般可以分為六個方面：
1.2目標用戶分析
對調研用戶進行分類是較為重要的環節，用戶類型不同，問題內容也不同，只有在不同角度不同用戶下設計的不同問題才會獲得有價值的結果
這種情況在問卷中還是比較常見的，例如我們填完問題一后，根據選擇的不同，可能會跳轉到問題三或者問題五，這就是問卷設計者根據不同用戶分類進行的多種問題設計
例如在收集知識平臺滿意度和相關競品使用習慣時，個人機構和組織機構的視角是不一樣的，B端客戶和C端消費者的視角也是不一樣的，所以在問題設計時需要分開對待
問題根據用戶分類設計的好處在于問卷后期可以快速驗證產品的用戶類型和比例，提高調研質量和數據可信度，便于后期對用戶進行更加深入的調研
舉例
結合上面調研的目的及用戶分類，以此我們思考在問卷的設置方面：
對于B端（老師）來說，首先要了解的是客戶目前是否有在使用我們提供的服務、什么時候會使用、使用的頻率是多少、目前使用的體驗如何、有沒有遇到什么問題、有什么建議、對我們提供的解決方案是否愿意接受
對于C端（學生）來說，首先需要了解的是用戶基本信息，是否使用過課程相關的服務，用過哪些競品、吸引用戶的點在哪等等
1.3內部需求對齊
當需要有問卷調研的需要時，首先應該與團隊內部各合作方對齊調研意向，一方面是為了避免過量的問卷投放打擾到用戶，另一方面問卷調研屬于團隊項目，在團隊內部充分討論調研目的后或許你會了解到各業務方當下最關心的用戶問題從而調整調研問卷的內容甚至得到更好的解決辦法，這樣一來才能將問卷調研的價值最大化
例如教育平臺側在新版本上線前為了調研售課老（機構）師對平臺使用的滿意度和深層次的需求問題，那么在發起調研之前，需要跟產品、教研、客服等業務合作伙伴對齊需求
2.1劃分問卷模塊
設計具體問題之前，我們需要預設幾個問卷的模塊，通常圍繞幾個類型：用戶類、行為類、產品類、態度等，在得出完整的問卷之前，我們不需要考慮問題的先后邏輯是否合理，先根據調研目的和模塊類型進行問題窮舉，當用戶模塊相關問題寫完后再繼續寫下一個模塊的問題，直到所有模塊的問題都已經設想完畢，在對問題進行重組
用戶類：收集用戶基本情況，方便我們了解用戶群體，比如：職業、學歷、團隊構成
行為類：了解用戶的行為或者與圍繞產品相關但不涉及產品本身的問題。比如：有沒有在其他平臺入駐、售課時視頻課比較多還是直播課比較多
產品類：了解用戶直接與產品相關的體驗問題。比如：對產品印象如何、一般使用某產品的哪些功能、頻率怎樣、還用過哪些競品、喜歡哪些功能
態度類：用戶對產品的看法。比如:評價、好感、想要的功能；盡量避免提一些無法判斷、沒頭沒尾的問題，一方面對產品優化沒有幫助，另一方面會降低用戶的的期望
2.2衡量問題類型
問卷的問題形式是多樣的，題目類型主要有封閉/半封閉問題、量表式問題、開放式問題組成，需要根據具體目的來選擇相對應的問題
封閉/半封閉題型的選擇在于能否將答案窮舉，避免出現用戶因為沒有合適的選項而隨便勾選答案的情況
量表題型在答案上有明顯的程度高低區分，設計者對該問題有進行統計的需求
在問卷中應盡量避免較多的開放問題，一般在針對某種方向/某個定性的問題做預探索時使用
這里只對問題的類型做簡單的概述，具體的形式是多樣的，例如選擇題可以有單選、多選、圖片選擇；量表題除了打分之外，還有排序和點數分配等其他形式
2.3問題重組
在得到具體的問題后，我們需要對問題進行重新編排，通過改變問題的前后順序來保證用戶在可控的情況下進行真實的問卷回答，除了按照問題的難易度之外，還需要根據問題的屬性由淺入深的重組問題
例如問卷開始先安排過濾題用于過濾用戶，識別用戶是否符合問卷的目的來保證問卷數據的質量，然后按照暖場型問題、漸入型問題、高難度問題、敏感問題來對問題進行重組，當然這些順序并不是固定的，需要依據具體的問卷內容進行調整
關于過濾問題：
用戶在實際問卷回答中，受到各方面因素的影響有很多，例如有時用戶出于自我暗示、自尊心或者時間緊張狀態下，很難根據自身實際情況完成問卷調研，而是隨機挑選或者作出相反的選擇，這種問卷在回收后會對定量分析造成干擾，所以我們需要依據問卷重要程度，安排適量的過濾題來避免此類情況的發生
比如在對于關于產品改版的滿意度調研中，向用戶詢問有關產品功能的問題
如果用戶回答“某某功能”，但在是否知道時選擇了否，或者使用時長很久，但卻不知道某某功能時，在后期數據中，可以將這部分無效問卷去除
問題注意事項
3.1問卷評審
一切準備就緒，是不是準備投放問卷了？別急，許多問卷在投向用戶之前，往往會忽視通過內部手段進行問卷自評，通過問卷自評可以發現這份問卷有沒有偏離最初的調研目的，你所設想的問題用戶是否可以正確理解、問卷是否有可優化的空間等
一般自評包括3個環節：問卷自審、問卷內審、問卷內測
問卷自審
問卷設計完畢之后，需要根據最初確定的調研目的對問卷進行自審，可以站在用戶的視角對問卷進行第一次填寫，確定問題是正確有價值的，是有其他選項，也可以估算回答問卷所用時間，問題中的詞語是否能被用戶理解且沒有歧義等
問卷內審（可選）
不少公司內部有設立專門的用研團隊，在確立調研需求初期就應該與需求方深度綁定，有明確的需求認知，有句話叫當局者迷，邀請用研團隊參與審查可以從專業角度把控用研目標，評估問題是否能被用戶接受等，他們可以從一些不同的角度發現問題
問卷內測（可選）
內審之后，可以借助產品的代表性用戶（一般3-5人）進行問卷內測，通過觀察填寫情況來檢驗問卷設計的合理性，例如觀察答題時間、用戶類型與題目是否關聯等等，確保證問卷上沒有其他問題
3.2預計采集樣本量
內測完畢之后，就可以向用戶投放問卷了，為了避免給過多的用戶造成打擾，我們需要根據產品的用戶數量判斷問卷的投放數量
一般沒有明確規范多少用戶投放多少問卷，基本都是自己判斷，一般如果總用戶量不足30，需要至少覆蓋50%（15個）；如果總用戶量30-100，30人以上就可以；如果是總用戶量100-1000，覆蓋20%-50%就可以。
3.3選擇投放渠道
我一般常用投放渠道有：1）飛書推送；2）站內公告；3）其他內部資源
問卷調研基本分為線上調研，線下調研兩種方法，線上通常是問卷投放或者電話詢問的形式，線下一般與用戶訪談相結合，做到定性定量相結合；選擇投放渠道時，一般根據調研目的、投放預算、預計采集樣本量、統計分析成本來進行判斷
一般用研團隊會使用專業的解決方案快速作出數據分析，比如SPSS，而設計師在實際工作中很少會接觸到此類工具，因為此類視角下探索的方向和內容更加具體，變量在可控范圍之內，不太需要復雜的分析模型，較為常見的更偏向Excel或者問卷平臺自帶的分析功能，所以我們可以對分析思路做一個簡單的了解
4.1數據清洗
前面在問題設計時我們有講到篩選題相關的內容，加入篩選題的目的就是在數據分析前便于我們將異常問卷剔除出去，保證最終結果的準確性，除了觀察篩選題的選項之外，我們還可以根據問卷填寫時長、量表打分規律、問卷填寫完整度等幾點進行問卷篩選
4.2問卷分析
看整體
還記得我們設計問題的第一步劃分問卷模塊嗎？模塊通常圍繞幾個類型：用戶類、行為類、產品類、態度等，在分析問卷時可以基于這些結構得出一個較為整體的情況分析，例如用戶群體結構（用戶類）、存在的問題和新的訴求（用戶建議）等，通過對比相同角色的回答，找出共性的問題和信息
看差異
在得出整體結論之后，我們可以通過差異分析深入挖掘更多信息，例如觀察不同用戶角色對于產品的建議或者評分，會發現用戶角色對于產品的建議和需求是不同的，這種分析方法重點在于找到兩個可能存在關系的因素，通過對比不同角色的回答，找出差異和影響因素，根據上述舉例就是將（是什么）（怎么樣）進行差異對比
問題歸類
根據反映問題的模塊對用戶問題進行歸類分析，寫明用戶的問題描述和具體模塊，并且對后續優化提供解決方案
4.3產出報告
問卷報告一般包含調研背景、問卷回收情況、調研結論（功能優先級、用戶反饋、數據展示等）、整體評價（功能評價、體驗評價）、等，分析時從數據出發找出差異，分析原因，給出結論，在具體匯報時可以按照先結論后具體問題的方式呈現報告，同時可以結合數據提供相對應的解決方案
1.1明確訪談目標
明確訪談目標，可以保證訪談內容在大方向上是一致的，例如調研班主任實際外呼的場景及外呼時關注的信息，在訪談時就不會去問關于主講排課的問題，也可以防止訪談過程中遇到富有表達欲的用戶偏離主題，在訪談過程中難免有用戶興致勃勃的談論自己對產品的看法，在這種情況下，擁有明確的訪談目標可以保證深陷用戶的情境中不迷失訪談方向，保證訪談的最終結果是有價值的
1.2確定訪談類型
根據不同的訪談目標，可以分為三種訪談類型：
開放式訪談
在圍繞的主題和問題上都是開放的，沒有固定的問題也沒有固定的答案，采訪者可以根據受訪者的表現進行相應的問題補充，受訪者可以充分表達自己的觀點和意見，氛圍最為輕松，接近人們日常的對話，適合進行定性研究。但即使是選擇了開放式訪談也需要事先準備訪談提綱來確保此次訪談是有效的
結構式訪談
有嚴格的問題順序，采訪者必須按照順序和題目提問，受訪者回答的答案都是固定的A、B、C、D，這就需要采訪者必須有一個很清晰的目標，在問題的設計上要仔細推敲和打磨受訪者可能回答的形式，當然，再縝密的設想在實際訪談中也會有意外，所以也會設置一些開放性的問題讓受訪者可以自由的進行表述，并給出更加開放和深入的回答，適用于定量數據的研究
半結構式訪談
是實際工作中運用的最多的一種形式，在形式上是結構式與開放式的結合，包含了固定的的問題之外，也設置了開放式的問題，根據訪談時的受訪者的實際情況進行問題的增減，適合定性+定量研究
按照訪談的途徑來劃分，又可以分為線上和線下兩種，在受訪者不方便的情況下可以進行電話訪談的方式來進行，但是如果訪談包含較為復雜的經歷和過程的詢問，線上訪談比線下訪談要遜色不少
1.3設計訪談提綱
明確訪談目的與訪談類型后，就要基于訪談目的，擬定訪談提綱，訪談提綱是方便與用戶交談過程中抓住核心，保證訪談高效有序進行的關鍵，就類似一個標準流程，保證需要研究的問題都可以包含在內，訪談提綱一般包含五個部分，分別是訪談目的、開場白、提問訪談、用戶演示、結束語（基本信息、過往經歷、產品感受、流程體驗、競品體驗），其中提問訪談可以根據具體的訪談內容展深挖細節或者發散問題
提問訪談是提綱中較為重要的一環，問題設計要由易到難，由淺入深，由邊緣到核心，在開始階段設計一些簡單的開放式問題來營造訪談的氛圍，這個過程中可以了解用戶的基本情況或者對產品的使用情況，等訪談向一個方向聚焦時，再逐漸收縮問題范圍，逐步追問核心問題
設計好的問題還需要整理成訪談記錄表，在進行訪談、時，一方面按照訪談清單大綱盡可能的進行脫稿提問，另一方面則需要記錄用戶對于問題反饋，記錄問題時記錄員最好記錄用戶的逐字稿，以便于后期進行記錄整理時不與用戶表達產生偏差
1.4招募用戶：
用戶招募是較為重要的一環，承接訪談前后兩個階段的關鍵節點，用戶招募準確，后面的訪談才有實際意義，招募哪些用戶是由訪談目的所決定的，一般招募環節分為三部分
1.41.明確目標用戶
招募用戶的選擇是由訪談目的決定的，不同的訪談目的所招募的用戶是不一樣的，一般按照使用產品深度的緯度來劃分用戶
核心用戶：產品中較為活躍的用戶
邊緣用戶：產品中即將流失或者已經流失的用戶
潛在用戶：當前并不是產品用戶，但在產品定位的用戶群體中
而訪談目的一般有兩種情況
研究產品所存在的問題，例如研究一下最近用戶活躍度為什么下降
研究產品目標用戶所存在的需求，例如研究用戶對新功能的滿意度
所以如果訪談目的是發現產品現存的問題，那么應該去尋找核心用戶，他們那對于產品有著明確的認知；但如果為了增長，則應該尋找邊緣用戶和潛在用戶，他們會告訴你他們需要什么，你需要做什么
1.4.2多渠道招募
面向內部用戶的產品進行用戶訪談時，一般直接找對應訪談者的leader或者pm溝通即可，而在對外產品時則需要根據確定的篩選條件進行用戶招募工作
核心用戶的招募相對邊緣用戶較為簡單，一般可以通過行為日志數據、登錄時留下的聯系方式、產品用戶群或產品內運營推送推送來招募核心用戶
潛在用戶由于對產品接觸較少，一般通過問卷、外包招募、熟人推薦的形式進行招募
1.4.3驗證目標用戶并邀約
在得知用戶是否愿意接受訪談后，需要再次驗證這些用戶是否真的符合樣本特征，要注意的是，篩選訪談對象要注意平衡，避免同一類型的對象占了過多比例，導致訪談結果不全面
例如做一次關于學習平臺APP的功能優化訪談，就要避免對象大部分是管理者、80后的情況，因為用戶不是目標用戶、80后用戶的需求頻率不大
很顯然，90后/95后/00后、大學生/剛進入職場的職場新人才是我們的目標用戶，那就根據這類人群的角色模型來篩選邀約對象
1.5準備場地和物料
場地選擇
用戶訪談的可選場地有很多，大部分是請用戶到公司來使用公司的會議室，或者有的公司擁有休息區或者共享空間，環境較為舒適和溫馨，也是可以的
需要注意的是，場所的選擇也會對訪談有些影響。應該盡量選擇溫馨舒適的環境來打消用戶的緊張感
物料
采訪者需要提前準備好物料，包括訪談記錄表、訪談提綱、錄音設備；訪談時可以一人負責提問，另一人負責記錄，在使用錄音設備對受訪者進行錄音時，需要提前告知并取得同意
2.1開場白
在一切準備工作ready之后，可以進行訪談了，訪談中難免遇到一些不善表達的用戶，如果一開始就切入正題進行訪談，訪談者可能在緊張的狀態下無法與采訪者達成信任關系，氣氛就會有些尷尬
所以需要先進行簡單的寒暄和自我介紹讓氣氛輕松起來，還可以簡單介紹訪談的背景、流程、內容、時間，告知受訪者今天只是探討問題，沒有對錯之分，所以希望暢所欲言，不要掩飾真實想法
2.2訪談并記錄
還記得咱們前面準備的訪談提綱嗎？在進行簡單的暖場之后，我們可以先對用戶的基本情況和使用經歷進行詢問，從職業、流程、愛好等基礎信息作為切入點，為用戶營造特定的使用場景，然后再進入訪談環節
訪談時，拋出問題的目的不僅僅是得到用戶的一個結論，而是希望用戶借此將自己的體驗和前因后果告訴采訪者，然而很多時候，用戶告訴我們的信息都比較淺顯，比如“我想要個xxx功能”“我覺得xxx挺好的”，這時我們需要對用戶想法刨根問底，從而證實用戶說的“想要xxx功能”是否合理，或者看能否想到其他解決方案
如何刨根問底？
1、結合梯子理論，通過問用戶以下4個層層遞進的問題，來了解用戶需求和用戶心理
屬性：對于這個產品，你最在乎什么功能？
利益：你為什么在乎這個功能，它可以解決你什么問題？
心理：解決這個問題，可以達成你什么目標？
價值觀：你為什么在乎這個目標？
2、情景再現
回答提問時，用戶很少會去主動聯想具體使用場景下的體驗問題，比如當你問“上次旅行去哪玩了？”用戶大概率會回答“去環球影城玩，人特多排隊兩小時，玩了個什么叫鷹馬過山車，20秒，下次去絕對買優速通...”并不會告訴你怎么去的、以什么標準定的酒店、為什么選擇這個項目/地點，等等這些更想要了解的問題告訴你
我們需要幫助用戶在基本體驗之上還原體驗的動機，引導用戶對使用場景進行還原，了解用戶當時場景下的行為，再針對場景和行為去挖掘用戶產生這種體驗感受的動機
3、鸚鵡學舌
復述的時候，有時用戶還會根據你的復述追加一些他當時沒有想到的關聯信息，比如“你的意思是。。。我的理解是。。。對不對？”這樣可以避免雙方理解的偏差，還可以總結提煉用戶的觀點。這樣又可以挖掘到更多內容
2.3結束語
在訪問結束后，我們可以與用戶一起快速回顧訪談的內容，如果用戶有提出一些意見或者建議我們可以再復述一遍進行查缺補漏，并將事先準備好的禮物或者酬勞送給用戶表示感謝，向參與度高，善于溝通的優質用戶表示保持聯系，留下聯系方式方便后續進行可用性測試或者再次訪談
3.1整理訪談內容
一般是在兩個用戶訪談之間的間隙進行筆記的整理， 將用戶的口頭語言轉換為書面語言，這樣一方面減少后續因訪談內容大量堆積而形成的整理壓力，另一方面可以根據上一場訪談進行復盤，從而對下一場即將開始的訪談進行內容調整，在整理時我們需要將重點放在用戶的提出的問題和負向反饋上
3.2問題歸類分析
整場訪談結束之后，我們會發現用戶會提出各種各樣的問題，我們需要依據問題的緯度進行分類，將不同用戶遇到的相同問題進行歸納
問題歸納主要包含兩個部分，主要問題和具體問題，主要問題就是訪談中出現的較為明顯的反饋問題，例如“超7成用戶對首頁推薦的內容并不感興趣”，而具體問題則需要明確用戶反饋原因、對應的功能模塊和問題類型
3.3產出報告
訪談報告是至關重要的，一方面可以和大家共同討論發現用戶真實想法，另一方面也方便產研團隊根據問題關鍵點投入人力作出進一步優化，一般在訪談當天完成結論報告，時間有限是以關鍵結論為主，具體問題可以后續補充。訪談報告一般包含訪談背景、參與人員、用戶信息、主要問題、具體問題、用戶建議、優化建議
本篇文章是我學習到的用戶調研的三種方式，調研方式不重要，重要的在于如何理解用戶需求，真正了解用戶想要的是什么，無論B端還是C端，產品最終還是要服務于用戶，作為設計師同樣需要了解用戶研究，只有對用戶足夠了解才能作出高體驗質量的產品
以上就是我關于用戶研究的學習和分享，歡迎大家一起交流討論~
文章來源：站酷 作者：Hi阿良
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信網站視覺設計的重要性大家應該都清楚，對于普通訪客來說，網站的框架、交互邏輯等這些都是其次的，訪客首先感受到的是網站的視覺設計，同時視覺也能夠直觀地表達出我們所要傳遞的價值。因此，我們在建設網站時，一方面需要確保網站的視覺效果足夠優秀，另一方面需要保證視覺能夠傳遞正確的商業價值。
藝術與商業的本質其實是感性與理性，兩者之間沒有絕對的好與壞，相輔相成才是發揮價值的關鍵。
企業以盈利為目的，其網站不可避免地也附帶了商業屬性，甚至是網站本身就是為了商業而創造出來的，其商業價值占比也更重。但人類作為視覺動物，視覺感受對于訪客來說尤為重要，視覺上的演繹比起網站其他內容，更會影響網站的可信度，因此，網站的視覺起碼需要保證符合受眾群體的基礎審美。
增長超人這些年接觸了大大小小幾千家企業及企業官網，深入探究之后我們找到了一些規律，網站的視覺設計其實關鍵在于：
·品牌基礎 VI 設計的應用；
·平衡藝術與商業的網站設計思維。
我們常見的企業網站存在著一個嚴重的問題，缺乏品牌辨識度，假如把網站左上角的品牌 LOGO 遮住，可能完全看不出這是哪家公司的官網，又或者把品牌 LOGO 替換一下，就成了別家公司的官網。
這是網站嚴重缺乏品牌視覺識別所導致地，這種網站無法讓訪客記住其品牌，更無法在訪客心里占領一席之地。
品牌基礎 VI 設計的應用是最基礎也是最容易忽視的細節，它不僅是存在于初期建站，更是在網站迭代中，持續保持企業網站差異化的關鍵。
VI（視覺識別系統）是品牌的視覺符號化，是品牌識別中最具傳播力和感染力的部分，它可以將品牌識別系統的非可視化內容，轉化為靜態的視覺識別符號，它包含了品牌 LOGO、標準色、象征圖形、標準字體等等。另外還會包含品牌核心價值和個性，不同的品牌 VI 是各個品牌之間形成差異化的根本原因之一。
因此，我們可以通過與品牌 VI 相結合的方式進行設計，品牌 VI 可以有非常豐富多樣的應用形式，在廣泛的層面上進行直接的傳播，能夠在不同場景中進行應用，讓人們快速辨認出該品牌。
品牌 LOGO 則是最具辨識度的視覺符號，通過提取 LOGO 中的基因，延用到我們網站中，更有助于提升品牌辨識度。我們可以從兩個維度來提取：
·LOGO 的“形”
·LOGO 的“色”
首先，我們可以通過提取 logo 的形狀作為網站視覺設計中的「視覺符號」，也可以參考 VI 手冊中的「象征圖形」進行延展，提取 logo 外形結構做成相應的 icon 或是動效等是 logo 元素的直觀體現。
舉個例子，天虹的 logo 是一抹橙色極簡的彩虹形狀，天虹企業簡介的Banner 以及每個頁面的底部導航，都有將 Logo 這一特征延展出來的圖形設計。
▲天虹官網頁面 Banner 展示（增長超人出品）
▲天虹官網底部展示（增長超人出品）
這種方法需要我們很好地提取 logo 中的部分結構 , 或根據造型轉變為動效、icon 等，這樣在網頁中的融入感十分可觀。
提取 logo 中的標準色或代表性的顏色與網頁元素相呼應，也是一種常見的方式。將 Logo 顏色通過網站中的文字、頁面板式、icon 設計表現出來，這是很好的一種呼應方法。
比如：綠色是綠革的標志性顏色。打開綠革官網，可以清晰直觀地看到綠革將 logo 中的兩種綠色元素，融入到網站界面 UI 中，需要突出的文案也會運用這兩種綠色去做表達和強調。
▲ 綠革LOGO
▲ 綠革官網首頁展示（增長超人出品）
在網站設計中，我們可以將標準色換到標題文字、icon、控件。訪客打開網站時會很容易被這些顏色吸引，也不會感到突兀，合理運用 logo 顏色，可以統一網站的整體視覺且做到突出重點與更有效地傳達信息。
品牌 VI 可以在三個維度應用到網站設計，來提升網站的辨識度：
品牌 VI 的應用常見的方式就是在 icon 圖標的設計上。icon 作為網站的重點圖形，能夠讓訪客感知品牌，精致的 icon 可以讓表達更簡單高效，要打造一套精致的 icon，我們可以從識別性、規范性、整體性和品牌感四個方面著手。
識別性：icon 的作用即是幫助訪客理解網站信息，特別是在沒有文字說明 的情況下，icon 的設計需要具備讓訪客快速認出的高識別度，不能讓訪客 產生疑惑。
規范性：每個 icon 要保持視覺大小、色彩等一致性，以及圖標飽滿度等細 節都需遵循同一規律，例如：繪制風格是否一致，使用的圓角或直角是否統 一等等。
整體性：除了 icon 自身的設計之外，整體的設計風格要與網站基調達成一 致，不同網站有不同定位，面向的目標訪客群體自然有所差別，那么整個網 站的 icon 設計也不一樣。
品牌感 : 提升品牌辨識度離不開品牌感， icon 設計要與品牌調性、理念相 符合，傳達給訪客一致的感受。比如：提取品牌色、采取品牌圖形作為圖標設計視覺元素，從而加深訪客對品牌色的感知。
icon 設計中的品牌感是將品牌 VI 應用到網站的關鍵，比如上方的那套icon，是由增長超人根據英威騰本身的品牌色彩和品牌調性進行設計，應用于官網是這樣的：
另外，icon 是網站中不可或缺的元素，充當路標，讓訪客能知道點擊后下一步是什么，也就有明確的心理預期。如果 icon 按鈕不夠明確，訪客可能會不知道下一步是要購買產品還是注冊用戶，并且可能直接瀏覽網站后就直接離開。
版式如何融入品牌調性是很多設計師會忽略的一點，訪客來瀏覽網站時，首先感受到的第一點是色彩，第二則是版式，也就是整體給訪客的感覺。符合品牌定位且具有辨識度的網頁版式設計應該怎么做，它更需要從品牌特性中提取，無法像 icon 一樣從品牌 logo 和標準色中提取元素就可以做到的，更多是一個風格化的設計。
除了靜態的圖形設計，品牌 VI 也可以融入網站動效，利用品牌 LOGO 的設計元素和結構進行設計的動效，可以讓整個網站更有品牌風格。一個好的動效能夠滿足網站功能的表達，強化品牌特質，而不是只追求表面炫酷花哨的效果。
▲天虹部分動效展示（增長超人出品）
在網站視覺設計中，品牌 VI 的應用不僅能夠形成區別于同行的差異化為品牌賦能，還能通過規范化的 VI 應用，提高訪客對其品牌的信任度。
品牌的基礎 VI 設計應用于網站是我們的常規操作，但要注意細節，別忽視了其作為網站基礎的重要性，對于網站視覺設計，我們在保證基礎設計無誤的情況下，需要深入到思維上，一個網站的設計看似簡單，像是色調、排版，都是設計師的基礎功夫，但是要真正做到一個優質的網站，其實并沒有想象中那么容易。
開頭我們有提到：視覺設計如何平衡藝術與商業？大多數設計師在初入職場時 , 都不具備商業思維，首先會經歷一段自我懷疑的過程：完成一個稿件后，反反復復被要求改稿，始終無法達到上級的要求，個人價值開始逐漸模糊，淪為一介改稿工具人。
在我們看來，企業網站的視覺設計必須具備商業思維，也就是視覺設計需要體現其想表達的商業價值。因此，在建設企業網站時，我們需要記住以下幾點。
不為設計而設計不是將藝術“一棒打死”，也并非拋棄創新創意，而是應該更注重于強化產品，給滿足需求的產品力加持。市面上有很多花里胡哨的網站，第一眼可能會驚艷到你，但是再深入瀏覽發現內容很空洞。事實上，能夠讓訪客長時間記住你的并非第一眼，而是其內在，也是我們一直堅持的長期主義價值。
過于強調設計、藝術、創意，不僅會給網站帶來開發難度，也給訪客瀏覽帶來沉重的負擔。
商業環境下，視覺設計的本質應該是強化產品，升華價值，實際上，設計同樣需要具備產品思維。增長超人在建站中已將產品思維全流程化，這種模式下，每一環都串聯起來，不管是用戶體驗，還是價值傳遞都非常有利。
產品思維全流程化
設計需要理解功能目的，為什么策劃這個功能？如何通過設計讓訪客使用更順暢？如何讓訪客愛上這個功能？這都是設計需要不斷探討和思考的問題。設計與產品之間通過產品思維進行聯動，能夠確保核心目標一致、步調一致，真正創造出一個有價值的網站。
我們始終要對設計的結果負責，各個環節的品牌維護及更新必須形成閉環的設計思考，最終達到“設計應時輸出，信息精準傳達，符合結果預期”，在落地層面始終執行著的“四環建設”：
第一環：讓出品更好看（視覺側）
第二環：讓出品更好用（體驗側）
第三環：讓出品高轉化（營銷側）
第四環：讓出品高價值（品牌側）
我們一直在講視覺設計，視覺設計不僅是靜態形式，還可以是動態形式，也就是網站上的交互動效，交互不可避免涉及到的領域就是「用戶體驗」。08年蘋果推出 AppStore，App 興起至今，用戶體驗就廣為人知，在 App 的設計領域更是奉為“宗旨”，當然，在網站設計上同樣如此，“以用戶為本”就是產品的關鍵價值，這是我們不可忽視的方面。我們可以參考以下提高用戶體驗的關鍵因素：
有用：內容能夠滿足需求。
可用：網站的內容應該很容易被找到。
可?。?/strong>設計元素應該貼合情感且具備可欣賞性。
可發現：網站內容容易被定位、被找到且可導航。
無障礙：為有障礙的用戶提供幫助。
可信：網站內容應該有權威性且值得被相信。
網站的視覺設計一方面需要服務于內部，另一方面則服務于用戶，內部指的是內部需求，比如上級、老板等他們的視覺審美，這是不可避免的，其中平衡的技巧在這里就不過多講解了。
重點還是在于用戶身上，也就是訪客。先通過市場調研分析出訪客畫像，可以掌握對訪客的審美基礎和交互邏輯認知，結合起來進行設計，當然我們也提倡盡可能簡化交互，并且讓網站貼合訪客喜好，內容一目了然。
舉個例子：兒童教育服務的品牌網站，在慣性思維中，大多數人會將其設計得更偏向兒童 , 迎合兒童的喜好 , 但是真正瀏覽這個網站的訪客其實是父母。
因此，從偏向兒童的思路一開始就是錯誤的，這也是很多企業建設網站的時候會掉入的誤區，了解用戶是設計不可缺少的一步。
增長思維作為增長超人網站建設三大思維之一，也是三大思維中最能激發網站商用價值的思維。在視覺設計當中，運用增長思維能夠有效強化網站，加強網站價值。
我們需要先探討“網站內容中哪些信息最重要？”“傳遞這些信息的目的是什么？”例如，一個促銷活動版塊的營銷點是免費領取資料，我們需要理解：最打動訪客的是資料還是“免費”，是資料的圖片需要更突出還是“免費”的文案更突出？在商業之下，設計也需要理解營銷，也需要懂增長。
理解了基礎邏輯，就需要進行下一步——強化它們，有效傳遞價值，實際落地可以參考兩個基礎理論：
·視覺動線
·視覺層級
視覺動線是指人們在閱讀時，視覺移動時所形成的方向路徑。早在十多年前，用戶體驗專家雅各布·尼爾森博士提到“人們很少逐字閱讀網頁，相反，他們掃描頁面，挑選單個單詞和句子”。正是如此，人們在閱讀的時候才會形成幾種常見的視覺動線規律。
Z 型
F 型
基于這兩種常見的視覺動線，我們在做網站的版式設計時，可以更合理地策劃視覺動線，其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗，還可以幫助我們引導訪客閱讀預設的信息，高效傳遞高價值信息，提高營銷效率。
視覺層次應該很好理解，即人們在閱讀時，能從視覺中感受到信息的層次，優秀的視覺層次能夠非常高效地引導訪客閱讀更多內容，并且通過信息的優先級設計更直觀地幫助我們達成相應的數據指標。
比如下面兩個示例：
視覺動線可以作為網站整體的版式設計思路，而視覺層次則是單個版塊的設計方向，版塊的視覺層級設計應分為三層：
第一層：訪客掃一眼就能理解整個版塊的主要內容；
第二層：訪客通過仔細瀏覽能夠獲取關鍵內容；
第三層：訪客想深入了解可以查看更多，引導深入。
通過上述三層，能有效實現我們增長的目的。 常見的設計技巧為 : 通過「大小」、「色彩」、「重量」形成信息之間的層級對比，建立信息優先級。
除此之外，我們在策劃一些網站轉化路徑時，還涉及到了「 CTA 行動號召按 鈕」的設計，這在網站的增長思維中是常見的應用，我們必須確保 CTA 足夠 顯眼、突出、目標清晰，常規技巧包括：顏色對比、放置顯眼位置、層級引導、 文案簡潔清晰。
通過這兩個基礎的設計理論與增長思維的結合，我們可以延伸出很多合理的設計思路，形成有理有據的設計語言，有了方法論才是真正的有效設計，而非“摸瞎過河”。
網站的視覺設計可以被視為一種藝術形式，但與純藝術截然不同，網站的視覺設計需要建立在牢固的科學基礎之上，以理性客觀去審視這樣設計是否真的能有效傳遞價值。
視覺設計的本質是什么？很多人認為只是單純的美，或者無非就是關于審美的答案。其實，這種理解是十分表象的，大多數人并沒有理解視覺設計的根本價值。
視覺設計是網站的一個重要層面，網站作為互聯網產品，其視覺設計的本質是價值傳遞，我們一直以增長思維和產品思維與視覺設計相融合，就是為了實現高效傳遞高價值信息。
訪客通過對視覺信息的感知，來決定自己的行為。當我們從信息的角度去理解視覺設計時，可以打破慣性思維對我們的限制，因為視覺設計是一個由抽象信息轉換為圖像信息的過程，理解這層道理才能真正打造出一個具有高顏值和高價值的網站。
文章來源：站酷 作者：增長超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶喜歡在網上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個用戶都為此而樂此不疲。
很多互聯網產品在用戶點擊收藏后，讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇，他們只想簡單的把自己喜歡的東西收藏下來。
選擇本身并不是一件很容易的事情，尤其是對于那些有選擇困難癥的人來說。實際上，我每次都是選默認那個。
這并不是一個好的用戶體驗。
當然也有一些做的很好的體驗，比如微信的收藏，收藏后會出現一個“收藏成功”的非模態反饋。
同時可以添加標簽，但這個并非強制，為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說并不需要用戶去創建自定義分類。
你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。
網站會根據你采集的圖片在極短的時間內，自動識別出圖片對應的收藏夾類型?？梢灾苯硬杉綄奈募A。
然而經過測試，經常會出現誤差。因為圖片的分類其實很復雜的，屬于高度自定義，很顯然，智能識別并不是一個好的解決方案。
花瓣是一個設計師收集靈感的網站，該網站常見的用戶使用場景是，設計師在瀏覽素材時，會大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來花瓣網加入了快速采集的功能，其邏輯是網站會默認選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。
社區類產品有各種點贊，收藏等互動信息，但用戶又不想被別人知道這些信息。
因此，在規劃產品時需要考慮到用戶互動隱私的保護，這是用戶側的剛性需求。
抖音個人主頁的點贊列表，我記得剛開始是公開的，且不能設置為私密。
用戶點贊的視頻會出現在這里，卻少有人希望這些信息被別人看到，總有些點贊視頻你并不想被別人看到。
如果點贊列表可見，那么用戶在點贊的時候就會有所顧慮，這不利于平臺的互動率。
特別是隨著抖音上熟人也越來越多，強關系社交場景在漸漸加強。
抖音后來也發現了這個問題，把它設計成了默認隱藏。（當然可以自己設置為公開，但只有極少數用戶會這樣做。）
由于點贊是私密的，用戶可以隨心所欲的點贊自己喜歡的視頻，毫無社交壓力。
這是為何？
源于人性心理學：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設置了權限，畢竟，誰想被別人窺視當年那個煞筆的自己呢？
現在訂閱號打開率越來越低，朋友圈分享曾是訂閱號流量來源的一大入口。
朋友圈早已淪為了一個人設打造的陣地，現在的人發圈越來越謹慎。
用戶似乎越來越不愿意在朋友圈分享文章了，除非是有利于自己人設打造的內容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點了“在看”后，此文章會出現在看一看這個模塊，且七天前的分享將不可見，這就相當于一個弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對于公眾號主來說，相當于增加了一個流量入口，激發他們創作更多的內容。
視頻號點贊也是同理，會被朋友看到，導致用戶在點贊的時候就會有所顧慮。
他會考慮，我點贊了這個視頻，我老師、上司、父母、親戚、朋友會不會看到？他們會怎么想？
但他在抖音上點贊是沒有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關系平臺；
第二，抖音上的點贊默認是私密的。
因此，微信才推出了私密贊的功能，需要長按才能觸發。
這并是一個優雅的解決方案，一是操作成本有點高，二是用戶存在較高的學習成本。
微信作為一個強關系社交場景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時用過mac OS和windows系統的用戶不知是否發現，這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過來，確定在左，取消在右。
為什么會有這樣的差異？哪一種更加合理？
在交互設計中，這種彈窗叫做模態反饋，艾倫·庫珀在《About Face 4》中提到：模態模式一種臨時模式，它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。
首先我們要明白這兩個按鈕哪個使用率更高，一般來說，“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。
所以這兩個按鈕在視覺上一定要做出差異化，“確定”的視覺層級要高于“取消”，這樣用戶才會一目了然，不會感到困惑。
回到剛才的問題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習慣是從左到右，所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。
mac彈窗的背后邏輯：
根據一般的任務的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進入下一步任務流程。
看上去似乎都有道理，這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性，讓用戶形成操作習慣就沒有啥問題。
從個人的使用習慣而言，個人更傾向于mac的這種方式。
手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側或都放在右側，前者以iPhone為代表，后者以安卓手機為代表。
這兩種方式有什么區別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來看看都放在右側會有什么問題，以下使用場景相信用戶不會陌生：
用戶a，在地鐵上玩王者，聲音有點大，想把聲音調小，結果不小心按到了電源鍵，導致手機息屏，而此刻你正在激烈的團戰，內心有一萬只“草尼瑪”奔騰而過……
用戶b，每次按電源鍵（解鎖或鎖屏）都會不小心同時按到音量鍵，結果直接就截圖了！這種情況發生了不止一次，因為這兩個按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時大拇指會觸碰到，左手拿時中指剛好會觸碰到，而電源鍵又有指紋鎖功能，導致手機在不斷的解鎖，而你毫無察覺……
通過上面的案例，可以得出結論：若按鍵都放在右側，會導致用戶經常誤觸而造成不必要的麻煩。
放在兩側就不會有這樣的問題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔心按錯，減少誤操作的幾率。
值得一提的是，iPhone手機的電源鍵一開始是位于頂部位置，這是為何？
因為剛開始時手機都是小屏幕（3.5～4寸左右），對于iPhone5S及以前的手機來說，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來隨著手機大屏的趨勢（4.7寸以上），這個時候單手已經不方便按到頂端了，從6代開始就把電源鍵放在右側了。
但無論是哪種方式， 兩個按鍵都是分開放。
還有一個小細節，iPhone的實體鍵不是在右側正中間，而是在靠上的位置。
iPhone設計理念是單手持握，并且大多數人右手握手機，大拇指經常會碰到右側邊框，若果放中間，這樣會造成誤觸音量鍵和靜音鍵。
其實上面的案例3就已經說明了按鍵放在中間的弊端。
我想起了當年的錘子T1，左右按鍵一樣大且位于兩側的中間，這是典型的為了追求完美的對稱而向用戶體驗妥協。
iPhone從初代開始就已經建立了自己的設計理念，不管是工業設計還是界面設計，并沿用至今。
從初代開始，iPhone機身左側音量鍵上方就有一個靜音鍵。
這些年來，iPhone一直在減少各種實體按鍵以及外部接口，比如3.5mm耳機孔、home鍵。
但直到如今這個靜音鍵卻一直保留下來，為何iPhone對于這個按鍵情有獨鐘？
靜音鍵開啟后，任何來電或通知都是無聲的，震動也會消失。
在無需點亮屏幕的情況下實現一鍵靜音，方便快捷，深受用戶的青睞。
根據自身的使用習慣以及用戶研究，無非以下幾種使用場景，比如看電影、開會、上課等：
1.進電影院看電影前，我一般都會撥一下，避免在看電影的過程中被來電鈴聲打擾，影響了自己和別人觀影。
2.開會的時候也會撥一下，以防在開會的時候突然被來電鈴聲所打擾，避免不必要的尷尬。
3.學生黨在上課前一般也會開啟，這樣整節課都不怕打電話進來了。
總之，就是不希望自己的手機鈴聲打擾到自己和別人，帶來不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機，對著手機屏幕一頓操作。
而實體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個按鍵這么重要，卻很少看到安卓手機上有（除了一加基本上沒有）。
實體靜音鍵并非蘋果首創，之前的Palm、Blackberry（黑莓）早已有這樣的設計。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統還可以把靜音按鈕直接放在桌面上，設置靜音非常方便，也就沒必要再多加一個實體鍵了，顯得多余又徒增成本。
上面提到過的，作為安卓陣營唯一的靜音鍵，一加手機引以為傲的三段式按鍵，該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。
但個人認為這個設定復雜了，三種模式遠比兩種模式復雜。用戶并不一定能搞明白，有一定的學習成本。
在早期，iPhone的控制中心并沒有靜音按鈕，想要設置個靜音并不是一件容易的事情，而這個功能又是必須的，蘋果索性直接做了一個實體物理鍵。
這樣靜音的時候只需要把靜音鍵撥過來就可以了，一步到位，使用體驗也很好，所以一直保留至今。
雖然現在iPhone的控制中心已經加入了勿擾模式，但考慮到老用戶的使用習慣，以及品牌調性，蘋果對于這個實體按鍵的去掉還是顯得很謹慎。
考慮到之后iPhone在防水、機身內部空間的改進，不排除蘋果終有一天會取消iPhone上這個靜音鍵。
靜音鍵雖好，但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知，或者開啟后忘記關閉，導致錯過了一些重要的電話。
雖然開啟了靜音鍵，但并不是絕對的靜音。如果是鬧鐘，鈴聲還是會響起，因為鬧鐘的優先級要遠高于靜音模式。
蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵，或者開啟后忘記了關閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開啟了靜音模式，卻還可以調解音量大小的原因所在。細微之處方見真功夫。
在日常生活中，旋鈕是個很常見的東西，比如音箱，微波爐，收音機，老式電視，車載旋鈕……
在機械產品上，旋鈕凸起的把手和它下面的圓盤刻度，是最明顯不過的旋轉暗示，符合人的自然感知。
旋鈕式交互是個人非常偏愛的一種交互方式，我認為這種交互跟iPhone的home鍵一樣經典，主要原因有三：
旋鈕操作簡單，看到這種按鈕，一歲小孩子都會忍不住用手去抓。對于用戶來說，幾乎不需要學習成本。
在旋轉的過程中，可調大調小，一切盡在用戶的掌控之中，用戶感覺到有十分的安全感。
在調節的過程中，調大調小都能立刻收到即時的反饋，這是用戶最喜歡的交互方式。
我們在觸摸屏上很少看到這種旋鈕式交互，因為這種交互是要建立在抓住旋鈕實物的感受。
而觸控屏是個二維的世界，沒有真實抓握的手感，無法還原出三維世界的真實手感。
汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后，越來越多的國內廠家開始盲目跟風，把絕大部分的功能按鈕集成到屏幕中，比如空調，不僅不方便，行車中使用還容易造成危險駕駛。
車上的觸控體驗跟手機上是完全是兩碼事，使用場景也完全不同。最大的區別在于后者沒有安全問題。
都知道開車不玩手機，可是行車時操作中控屏跟玩手機有什么兩樣？
對于駕駛員來說更加安全，通過旋鈕調節空調，熟悉后完全可以實現盲操，邊開車邊操作毫無壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。
而安全是汽車駕駛的重中之重。
用戶的操作有真實的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。
軟件系統用久了會變卡，可能會死機，難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。
一旦屏幕失靈，或者系統死機了，那所有按鍵都失效了。
雖然特斯拉為了提升其車載系統的穩定性下了很大功夫，但是問題從來都沒有停止過。
但是硬件基本上很少會出問題，物理旋鈕才讓人100%放心。
無論廠家如何吹噓，虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。
因此，有一些實體鍵出于安全駕駛的考慮還是應該保留，將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
后記：
以上產品體驗涉及到3個軟件層面，3個硬件層面。其實產品體驗從來就不是軟件產品的專屬，而是體現在日常生活的方方面面。不要把自己僅僅局限于互聯網，不要老是沉浸在虛擬世界，回歸于現實世界，多觀察生活、體驗生活。
文章來源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這雖然是交互基礎的概念但對我們設計師來說也極其重要，概念雖然很簡單，但實際在設計中也會頻繁的遇到問題。我們先用比較正緊的文案來描述一下這些比較“枯燥”的概念，映射是一個術語，從數理理論借用而來，表示兩組事物要素之間的關系。（書中諾曼先生的原話）
上兩篇文章我們說的示能和意符，表示了事物本身具備或傳達的功能和被交互性，而映射則是表示了控制器和被控制對象的關系。
好的示能和意符的設計，可以讓映射變的自然。
第一篇示能我們舉了一個開關的例子，多控開關之所以讓人抓狂首先是缺少了意符的表達，其次是映射的不合理。就如同我們在書中見過的一個煤氣灶的案例，4個灶頭下方有4個控制開關，左右兩種不同的排列方法，體現出好的映射有多重要。
諾曼老師在如何設計映射中提到，自然映射設計可以分為3種層次
這三種映射的層次在體驗中的滿意度與效率一次遞減，我們依次在舉例說明
例如門把手在門上，我們就覺得這映射設計的很自然，通過轉動把手可以對門進行開和關。再例如我家的洗衣機上有一個用來選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周圍，旋鈕上有光點，旋轉旋鈕光點就會旋轉到我們需要的洗滌模式上，這也是控件與對象一體的形式，滿足用戶對控制器與被控制對象的心理預期。
那在數字產品中我們也會遇到類似的情況，例如我們想展開放置在一個卡片中的文字，我們通常最好的方式是在文本的邊上設計一個提示展開的“可點擊按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區域，因為映射關系逐漸減弱到無關。
再舉個例子iOS系統中如果要調節音量，可以在音量模塊中直接通過手指的滑動來調節，而不需要在模塊中或者模塊外部加上兩個用來增減音量的按鈕。不過說實話，華為的曲面屏雙擊側邊喚出音量控制模塊，個人覺得成本還要比物理實體按鍵更高一點。
除此之外，智能手機在逐漸演變進化的過程中，手勢操作功不可沒，利用手勢代替按鈕也節省了更多的成本并且在效率方面也得到了提升。例如視頻播放器的應用中，會有相應的控件用來控制視頻的播放、暫停、聲音、進度、亮度、橫豎等等，這些按鈕其實就是最佳的映射設計
這個也就是我們常說的格式塔心理學中的接近原則，因為越靠近越相關，很好理解。某些物件在設計時無法將控件和被控對象結合設計，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關系上可以更清晰。
接下來我會給大家看我家的冰箱和電飯煲的操作界面，大家就知道，次佳的映射如果不好好設計，也會顯的很糟糕。
如圖所示，其實界面的信息設計無非就是這樣，如果你可以把這些界面的信息設計的有邏輯有層次，那么在其他的用戶界面中也能夠如法炮制。
例如電飯煲的烹飪模式和其對應的按鈕，都是通過點擊多次按鈕進行控制，而不是在單獨的模式中具有單獨的按鈕，而最好的方法那肯定就是想選什么模式直接選，而不是做一個按鈕來多次切換。
這里是因為本身這款電飯煲沒有智能面板，所以通過物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問他能不能和洗衣機一樣做個旋鈕呢？當然也可以，因為旋起來也比多點幾次按鈕來的方便，只不過旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產品設計上就有更多的問題要探討啦。
所以我們再來看它的按鈕分布，發現其實控制按鈕和被控制的參數其實缺少了距離關系，當你看著想要控制的參數卻找不到控制按鈕的時候就會比較抓狂，因為在這個布局中既沒有滿足最佳也沒有滿足次佳，甚至連在空間分布上也無法產生對應。
然后我們再看這個電冰箱，這個西門子電冰箱的用戶面板我也屬實沒有看懂，但距離關系已經做的比咱電飯煲要好一些了，至少左右兩側的按鈕應該是控制左右兩側不同的溫度。
左右兩側分別是冷凍和冷藏的設置，但是中間只有兩個溫度，一共4個按鈕和兩個溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環里的boss們的關系一樣混亂，那4個按鈕為什么只有2個溫度呢，因為左側的兩個按鈕分別是切換不同的溫度設定，而右側的一個按鈕和溫度并沒有任何的血親關系，因為它就是一個鎖！不仔細看還以為它是用來控制溫度的，因為和其他三個按鈕太像了！這不就是在濫竽充數么。
這里的兩個案例我們發現，在次佳的映射中，其實就對格式塔心理學里的原則應用的比較多，為了讓控制器和被控制對象的關系更緊密。
在某些場景下，我們是無法通過設計讓控件與對象滿足1、2兩個要求，所以就會有第三種，在空間分布上一致，例如在一個大空間中的燈與開關，開關不可能做在燈本體上，也沒有辦法讓它倆靠的更近，所以只能在空間分布上更加一致，才能夠讓映射關系合理。
其實數字產品的用戶界面設計，基本上我們可以做到1、2點，因為本身區域有限，控制器和對象也幾乎在彈丸之地互相映襯，大部應用的控件操作起來也都很簡單，但是不外乎一些較為復雜的工具類產品，例如車機系統，通過中控屏來控制車輛的一系列功能例如：空調、座椅、車窗等等，那我們也發現其按鈕的分布也是滿足了這樣的交互映射，將物理按鈕變為虛擬按鈕集成在中控屏幕中，為了讓用戶更好的映射出它們之間的關系，于是我們就需要利用空間分布的關系，來讓用戶明白，按鈕與控制對象的關聯邏輯。
例如在特斯拉的UI界面中，將整體分為3塊區域，左邊是形式儀表右側是多功能區域底部則是車輛相關的控制功能，你想控制前后車燈，那么按鈕就會在車輛模型的前后兩側，如果你想打開空調則在底部工具欄的中間即可打開，如果你想給座椅加熱那么也可以像圖片中那樣在4個座位的圖片中進行交互就可以實現。這樣的設計讓控件與被控制的對象能夠遠距離在控件上形成一個映射關系。
還有在日常生活中，大家家里是否用過升降式晾衣架，通過旋轉把手來操控升降，這里其實也很難應用到空間部分，因為兩者所處的平面不同，就更加無法對應起來，有沒有一種比較好的方式來解決這個問題呢，我覺得可以用顏色或者標記來做映射的對應。所以為了映射的相關性、同型、同色、靠近等方式都可以用來提升二者的相關性。
數字產品中的映射也是關于控制器和被控制對象的故事。數字產品中也有不少的控制器我們就稱之為控件，例如一個圖標按鈕、一個下拉列表或者一個滑塊，它們都有各自的控制對象。而我們常說什么樣的設計滿足用戶心智，指的就是讓用戶覺得當他操控控件后帶來的結果與反饋是他預期之中的，這就會讓其覺得是合理的、自然的。
例如在這個案例中，設計師其實是想通過按鈕來控制車中相關的功能，但是大家能發現問題嗎？映射的前提是控件要先滿足示能和意符的表達，其次再通過映射告訴用戶，誰控制誰。但我們發現這個界面中的按鈕其實在示能和意符上出現了歧義，例如熱車的圖標，我們通常認為這樣的宮格形式布局都是以入口形式存在，點擊后會進入下一個界面，但是設計師在這里其實把一些情況搞混了。
所以我們仔細看，這些圖標就像是電飯煲上的按鈕，只要點擊就會觸發車輛狀態的變化，相當于一個開關，咱們先不說這樣的設計是否方便用戶，我們看映射其實就會發現用戶其實很難做到空間布局上的對照，從而更高效的來對車輛進行控制。并且也存在一定的邏輯錯誤，例如熱車和解鎖是什么邏輯，車窗開到一半想停止怎么辦，空調要調節冷熱和溫度怎么辦，所以這里不再單純的是一個開關集合的區域，會遇到很復雜的情況。
我們再來看一個案例，其實在數字界面中很多映射并非有直接對應關系，而是需要用戶通過交互來觸發。在下面的界面中，是一個課程的詳情頁面，用戶可以發布自己的學習筆記通過音頻的方式發布在該頁面中，而底部的工具欄在當前的設計中就會出現映射相關的問題。
我們即然要發布音頻那么我們有這些問題可以提前預設好
1.需要有什么控件來控制嗎？例如一個按鈕
2.那么這個按鈕是點擊后松開再開始錄音，還是需要長按開始錄音，亦或者點擊之后進入一個編輯頁面，再通過錄音或者上傳音頻的形式來編輯呢？
3.點擊麥克風錄完音頻后頁面會怎樣顯示
4.能否試聽、編輯，邊上的輸入框和麥克風有關嗎？
5.我可以直接輸入文字再點擊發布嗎或者直接點發布會出現什么呢？等等
不管如何我們從需要有一個入口，所以這個入口比較關鍵。通過這個入口（按鈕）來觸發上傳音頻的整個交互流程，它也是一個映射關系，只是沒有全部展開，因為這里無法展開。
有同學想問，為什么不能展開呢？其實這個很好理解，就像我們做登錄和注冊的時候不會把兩個流程做在一個界面中一樣，造成頁面的復雜、不兼容。所以如果這里不需要音頻以外形式的發布內容那么就無需把麥克風、輸入框和發布按鈕拆解開來做，造成了沒有必要的浪費。
一個按鈕可以作為一個入口來開啟一個單獨的任務流程，但是如果這樣拆解開那么任務流程就無法再高效的完成，并產生很大的歧義。數字化產品的映射往往是線性的
再說一個類似的案例，這個也是小伙伴做的一個界面。初學者的問題就比較明顯，在于他們沒有分步和階段性控制的概念。總想著一個界面能完成多個任務，當然在這里也沒有考慮好映射怎么做。
從這界面我們能很明顯的看出來這其實是一個發布的界面，從外部一個按鈕中進行跳轉而來的。
如果讓你去評價你會怎么說，是不是哪里都想說一點，好像里面的信息、按鈕、功能就不應該在這個界面？
你可能會有這些問題：怎么把視頻、音頻、圖片做成tab，選擇不同的類型去發布？點擊錄制后音頻會出現在哪里？錄好一條后錄制按鈕還在不在？錄好一條后我切換到圖片再傳一張圖片再點擊下一步會出現什么？點擊草稿箱又會進入什么界面？我什么都不操作直接點下一步會怎樣？這些問題都將困擾我們完成一個發布任務。
將一個交互流程做清晰，就需要讓用戶有一個清晰的功能映射。所以點擊發布后，按鈕應該要先控制發布類型這個對象，讓用戶選擇發布類型，然后再跳轉出對應類型的發布流程。
3.總結
映射在交互體驗的設計中也是很重要的概念之一，要結合示能和意符一起思考。同時剩余的概念我們也會在下期一起分享給大家，對于初學者來說，這些概念很重要，在我們設計案例的時候務必要時刻思考與結合。
聽到“約束”這個詞，但從字面意思大家可能會覺得它有多層含義，比如你小時候，媽媽總是約束你不能吃很多的糖，不能在地上滾來滾去，這是來自父母的約束。那么我們在生活中還有很多的約束，比如道德約束、法律約束、規則約束等等。
所以從字面意思上約束的意思就是：限制管束使不越出范圍。在體驗設計中，約束也被分為了4個大的類型，分別是：物理約束、文化約束、語義約束以及邏輯約束。接下去我們通過對這四個約束類型來聊一聊在設計中，如何利用這些約束來提升用戶體驗。
這個很好理解，一個圓形的井蓋只能用對應尺寸的圓形來覆蓋住，其他形狀或者尺寸就不能匹配。一把鎖也只能通過相應鑰匙才能打開。所以物理約束取決于物體本身外部的特性，決定了其操作方法。設計師們在設計一些產品、界面的時候，務必要考慮物體的物理特性，例如不同的設備、不同的材料等等。
諾曼老師在設計心理學中舉了一個電池正負極放置的例子，我打算換一個手機的例子。大家是否有想過為什么手機是豎著操作的，橫著操作不行嗎？當然不排除我們在玩游戲看電影時一些特殊場景需要將手機橫過來，但是日常我們通過手機來使用應用的時候為什么不是橫過來的。
大家可以嘗試著單手橫過來去發一個微信給好友信息，或者在淘寶買一件商品，首先這倆產品在移動端的手機上都沒有支持橫版適配的設計，因為橫置無法有效進行導航，而且很難瀏覽內容，更不要提用單手橫過來去做一些交互行為。
所以我們發現移動端手機本身的物理特性和受到的約束來自于我們人類的手，四根較長的手指在一側，一根較短的拇指在另一側，這種自然生物的進化就告訴我們，我們的祖先是習慣通過“握”這個行為來對物體進行交互的，而手機除了滿足人手的特性約束以外，也要滿足日常使用的場景：單手手持（單手握比單手托省力很多）、打電話（如果你的聽筒和麥克在屏幕的兩側，腦補一下打電話的樣子）......
所以手機的外形設計，是受到了使用者本體的物理約束，我們的手、我們的耳朵、嘴巴等等，大家也可以再試想一下，如果我們要設計一款專門為沒有手的殘障人士用的通訊工具，我們該怎么設計？例如他們習慣用鼻子操作、用腳掌操作等等。
好了，講完了人類對手機的約束后，我們再來看手機本身對我們數字界面有哪些物理約束。即然手機現在被設計成了豎著的樣子，于是我們的口袋也變成了豎著的，同時我們數字界面的內容也變成了自上而下的內容顯示順序。觸摸式智能手機也將原來只支持點擊操作的手勢進化出支持滑動、3d觸摸的更豐富的交互手勢。
我們在設計界面中元素、組件的時候其實也可以把他們理解為一種“物體”，既然是“物體”那么必然有其特性，例如屬性、狀態、布局規則....，具有一定特性的組件就只能使用在其固定的位置，并給予一定的尺寸范圍和交互方式。
例如現在我們有這樣幾個信息，人物頭像、人物昵稱、個人簡介、關注按鈕這四個元素，我們需要做一個用戶信息模塊，我們會怎樣布局。很顯然將這幾個元素通過排列組合放進一個容器里，有無數種排列方法，但如果我們提前給這個模塊加上一些物理約束，比如它的高度和寬度是30px*100px，同時滿足信息閱讀的順序和效率最優，那就只有一種排列方式。如果這個容器的尺寸變成100px*100px，那么就會有更多的布局，例如居中對齊，個人信息與關注按鈕上下分布等等。而且不同的排列布局、呈現位置給受眾帶來的視覺感知、瀏覽效率也是不同的。如果這個容器是可折疊、可滑動的呢？那么布局又會發生什么變化？
所以物理約束在生活中可能是一種硬約束，但是在數字化設計中，我們用的更多的是“偏軟”的物理約束，例如一張卡片的大小、圖文的間距、控件的展開面積等等，無法用硬約束來控制，因為受到更多因素的影響，不適合用硬約束來規范這些設計元素。
設計師們在做方案的時候要學會尋找最優解，做設計不像是用鑰匙開門或者拼圖這樣每一塊都有他固定的位置，有時候就像是你身邊有幾根不同粗細和長短的木棍，你需要插到一個洞里，不可能有非常完美契合的情況，那我們就要考慮你更在乎的是插緊？填滿？還是堵??？要靈活運用。
文化約束在書中的原話是：每種文化都有一套社交行為準則，如果置身于不熟悉的文化環境，原有的準則和行為就會不適用。
例如大陸的駕駛室在左側，但是香港地區就是在右側。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區別。所以文化的約束就更像是不同的社會認知、習慣、歷史造就人群的行為差異。
例如在不同文化中，信息閱讀的順序并不一樣，就像阿拉伯地區在閱讀時順序是從右往左。再例如國際版本的amazon在新增收貨地址的時候，無論哪個國家，只提供輸入框讓用戶自己填寫，但是在本地化產品中，就會針對中國用戶的特殊地址進行設計。
文化差異還有很多，例如不同國家有不同國家的禁忌和喜好，例如顏色，俄羅斯比較極忌諱黑色、黃色，巴西比較禁忌紫色、黃色，而英國則不喜歡墨綠色。同樣還有手勢、動植物、數字、肢體語言、信仰等等。
文化約束不僅僅存在于國家、宗教之前，人與人之間都會有不同的文化差異。所以文化說白了就是不同群體的認知與共識。說起文化約束讓我又想起了設計師與業務方之間的交流，為什么總是會存在障礙?；蛟S一部分原因就是因為我們各自有著文化差異和立場。業務方在自己的文化認知中會提出同時放大并縮小、五彩斑斕的黑這樣的需求，而設計師聽到這樣的需求就會覺得有點無理取鬧，其實這很正常，這就和我們在裝修時給設計師提出的要求一樣，想要在10平方米的空間打造出多個大面積的空間一樣。其實這些都是我們對另一方的一種期望，只是在表達的過程中不那么專業，作為專業的設計師，我們要學會理解客戶/業務的真實需求，并幫助他們去拆分目標，一步一步接受最后的結果。
語義約束在書中提到的不多，但是我想展開聊一聊。諾曼老師在解釋語義的時候是這么說的：語義約束是指利用某種境況的特殊含義來限定可能的操作方法。舉了一個例子就是摩托車的擋風玻璃之所以這么設計是因為人駕駛摩托車的方向位置從而使得擋風玻璃必須這么設計。所以一個事物被設計后的結果取決于它是為誰而設計的，同時語義約束依據的是我們對現實情況和外部世界的理解。
現在我們可以通過門把手的轉動來開啟門，那么如果我通過人臉識別認證后，是否可以自動開門而不需要再設計一個門把手呢？這種案例其實很多了，例如醫院的手術室等場所。隨著科學技術發展，人與物的交互方式在不斷的改變，從小屏幕到大屏幕的發展，我們觀察到移動端設計中的返回上一頁、滾動至頂部、鍵盤的拆分等等設計應運而生。
我再拿數字產品中的一些組件給大家舉個例子，在以前的文章中，我找到了一個產品的交互有些問題，就是在某個界面的頂部導航中嵌入一個下拉的控件。
在這里，無論該控件本身示能表達還是用戶的預期理解，都表示這當我們點擊下拉按鈕后，會展開更多同類型的選項，并且導航欄是保持固定位置的，而不會將導航欄給頂下去，出現原本不存在的新模塊。那么為什么就不可以像后者一樣，點擊下拉控件后將導航給頂下去呢？
這就要歸結于頂部導航和下拉控件本身的用法與規則。
導航欄嵌入下拉實際上就是導航+下拉控件，那么該控件就具備了兩個屬性，那就是原本導航欄的屬性和下拉控件的屬性，導航欄需要固定在頂部。
在移動端本身的組件定義中，它是一種固定在頂部不可動搖的一個bar，所以很早以前的移動端、web端設計的時候，頂部導航欄在視覺上也是優先級很高的，例如微信、淘寶等頂部導航欄在舊版本都是帶有顏色的，就像是一個盒子必須有一個蓋子，沒有蓋子的容器不嚴謹，不安全。
同時這個“蓋子”有幾個作用：
1.當前定位/說明 ，可以放單個頁面的標題也可以放幾個tab來切換頁面
2.當前界面輔助操作 ，例如分享
3.可以嵌入入口，例如搜索框、設置等等。
即然是一個下拉控件，那么你要下拉的是你本身，而不是整個導航。所以導航本身就有它自己語義，導航+下拉控件，也必須滿足這些約束條件。
語義約束需要設計師們時刻觀察當下用戶的認知水平以及設計的發展階段，去做更合理的運用，我們之前說創新，其實也只是在不斷的跟著科技、文化、用戶習性在進行同步更新，保守未必是錯的，但是想要有所突破不能一味墨守陳規。
這個概念諾曼老師在書中舉的是一個修水龍頭的例子，說的是當你把水龍頭修好，最后發現有一個零件沒有安裝上去，那么顯然是裝錯了。這個和我們之前講的映射是一個道理，自然映射為我們提供邏輯的約束，元素的組成可能存在空間或功能上的邏輯關系，例如不同的開關控制不同的燈。
那么我們還是簡單的來看一下“邏輯”這個概念，我們是不是經常會遇到這樣的場景，當我們把方案或者一個事情講述給別人，會聽到別人說：你這個邏輯不對，那到底什么是邏輯呢？這里不進行長篇大論的解釋，邏輯的概念很大，但是我們可以來比較形象的了解一下。
首先我們要知道在邏輯推理的過程中需要先對概念進行客觀描述，例如男人喜歡女人，這是一種自然的客觀規律。其次我們要對事物中的對象進行判斷是否為真，例如，老王是男人。當我們已知這兩個條件后，可以推導出一個結論，那就是老王喜歡女人。但是這樣的推理并不嚴謹，因為老王可能喜歡女人或者都喜歡。如果有其他的條件，結論才會更準確，例如老王交往過5個女朋友。
設計中，也會存在很多的邏輯，例如業務邏輯、交互邏輯、視覺邏輯等等。業務邏輯指的是商品的展示排列規則、每簽約一個供應商就會展示該供應商的詳情、權限角色的類型不同導致判斷順序不同等。交互邏輯指的交互過程中出現的狀態變化和規則，例如點擊卡片跳轉至xxx界面，點擊后若用戶未登錄則跳轉至登錄頁。而視覺邏輯則是指根據用戶的瀏覽順序和信息的優先級進行視覺布局的設計。
這里我們來舉一個美食產品的智能組菜的功能設計，來看看在這個方案中，邏輯約束是如何影響到我們整個設計過程的。智能組菜這個功能是這樣的，用戶可以將想要烹飪的食材進行自由組合成為一道美食，進而衍生出了該功能。在做這個方案之前，我們要對這些概念進行描述和解析
1.解析概念
智能組菜：
1.智能：通過什么算法，如何通過算法呈現給用戶？如何讓用戶感知到智能？（業務邏輯）
2.組菜：組是什么意思？（把食材搭配到一起）怎么組？（用戶選擇食材后生成）組什么（各種食材）？（交互邏輯）
2.設計策略與交互邏輯的思考
1.怎么把食材搭配到一起：讓用戶自由選擇食材
2.怎么才能讓用戶自由選擇食材：提供食材的搜索、分類
3.怎么提供食材的分類和搜索：設計搜索功能流程、食材分類功能流程
特殊場景思考：對于食材的名稱用戶是否知道，如果不知道該如何搜索？可以提供食材分類和拍照識別這樣的功能。
我們先做的簡單一點，只做食材的搜索。然后接下去思考他的交互邏輯
當用戶進入搜索流程后狀態會發生什么變化？選擇的食材會出現在哪里？如何新增繼續新增、刪除食材？這里有兩種做法：
1.用戶選擇完食材后就進入一個新界面，界面中可以繼續添加食材。
2.用戶選擇完食材后在當前界面出現“菜籃”模塊用來承載已經選擇的食材
如果是你會選擇哪種方式？這兩種交互方式在邏輯上都是正確的，但是邏輯正確并不意味著交互體驗和效率是最優的。
例如搜索場景中需要考慮鍵盤遮擋的問題，如果是第一種，那么沒有鍵盤遮擋的困擾，但是每次選完都要重新點擊新增按鈕，并且新頁面的版面利用率很低。而第二種在當前界面出現菜籃則會被鍵盤遮擋，只能在頁面上方出現，但上方的內容比較飽和，需要再進一步思考。那么當前遇到了兩個問題比較難以權衡，于是我們需要根據更多的條件來約束最后的結果：
1.用戶在選擇食材的時候大概率是目標明確的，搜索類目不會很寬泛，例如青菜、排骨，所以搜索結果不會很多。
2.大部分用戶的手機為某為p40、某果12，頁面較長，空白區域比較充裕。
3.大部分情況一道菜的主要食材在3種左右。
也有小伙伴會問，會不會出現批量選擇的情況?；静粫?，因為就像我們剛才說的，組菜是基于用戶對當前已有的食材進行組合的行為，所以用戶的目標是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場景。所以不需要提供批量選擇。
最后結論是第二種方式有足夠的區域來放置需要選擇的食材。
3.最后的方案
當我們確定好了策略后，我們可以大致繪制一下原型方案。用戶通過在當前頁面搜索后選擇搜索結果的食材，顯示在鍵盤上方。鍵盤收起后會置于底部。食材搜索的結果不需要分類，用宮格形式鋪開，盡可能的利用頂部的面積去展示，不要用列表。然后不需要做搜索按鈕，因為這里的數據量很小，直接輸入完文字后就可以自動聯想匹配。同時我們再把組菜記錄和拍照識別的功能放進去。
做完這些基本的交互后我們不要忘了思考一些異常流程和場景，例如搜不到內容怎么辦？用戶同時搜索了兩種不同的食材怎么辦？用戶第二次選擇了同樣的食材怎么辦？選擇超過5個怎么提示？等等。
好了，這個案例講完后，大家有沒有發現，其實一個方案的產生，其中要思考很多的條件、邏輯來約束不同的設計結果。
假如我們需要加入食材的分類模塊，那么現在的方案和流程還合適嗎？如果業務覺得用戶使用智能組菜是不知道吃什么，一種“窮途末路”的場景，那么我們是不是可以提供一種送即食菜肴的服務，例如最近在電梯廣告里看到了一個“舌尖英雄”的app，他就是將一道菜的食材進行單獨包裝，然后賣給用戶，把烹飪的步驟也用線上視頻的方式教給用戶，用戶一學就會。這也是一種業務創新，同時在智能組菜的場景種插入也不失為一種辦法。
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你們會發現其實想做交互設計比UI設計難很多，那為什么交互設計比較難呢？因為UI設計相當于從0.5到1，而交互則是從0到1。但并不意味著UI就比交互來的層次低，交互注重邏輯，UI注重對品牌和質感的表現，沒有孰優孰劣，但是在入手和執行層面，UI相對簡單一些。
交互設計也可以說是體驗設計的核心。我們需要根據已有的“材料”來進行任務流程、用戶行為的設計，以確保用戶能高效、滿意的完成任務達成目標和解決問題。所以在這整個環節中，要思考的信息和判斷的邏輯會更復雜。交互設計往往覺得很有成就感的地方在于自己設計的流程或者一些創新的交互能夠獲得用戶的好評以及業務數據的提升，在這個方面UI設計的成就感知會來的不夠明顯，因為視覺表現很難量化，用戶也只能通過好不好看來表達，所以UI設計師們也希望通過一些方法來找到屬于自己的成就感，例如我們也會選擇一些平臺發表自己的視覺創意來獲得同行們的認可等等。
那么今天我們一起來聊一個交互案例，來看看需求從“材料”到具象化表現都需要思考什么。當然，學案例是為了擴充自己的知識面，但是想要真正學會，我們要從底層開始學。
首先來講一個發布菜譜的功能：一個美食類產品中需要設計一個用戶自己創建菜譜的流程，基于這個概念我們可以如何設計流程。我們都知道商業設計離不開業務，那么這里我們先不考慮這么多，只考慮如何將流程設計做到最高效，有需要的時候再將業務加入進來。
這里和工作中常規的步驟不一樣，在工作中我們往往第一步都是去分析這個需求的背景、用戶的定位、業務目標什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。
在腦爆前，準備好3個問題：
1.什么是菜譜
2.為什么要發布菜譜
3.怎么發布菜譜。
通過這3個問題我們就可以大致知道這個任務所包含的信息、形式、流程。
1.什么是菜譜：菜譜是通過圖文、視頻等方式給用戶提供做菜步驟的教學內容
2.為什么要發布菜譜：希望通過用戶自主發布內容的形式來提高整體用戶的活躍度以及平臺對用戶個人品牌的塑造。讓用戶之間產生更多的互動。
3.怎么發布菜譜：這里要根據第一個問題腦爆之后再進行流程的設計。
接下來我們根據菜譜這個概念進行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線選項。
在真實工作中其實產品經理會把這個流程要包含的功能和信息點都列舉清楚，只是我們現在自己來從0到1設計一次。
菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱、菜譜的簡介、難度、時間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時間顆粒度小，但是食材我們可以再繼續細化拓展：食材的名稱、用量。菜譜的其他編輯選項，例如菜肴的口味、菜系的分類，編輯這個選項是有助于其他用戶在篩選菜系和分類的時候更快的找到這個菜譜。
例如菜譜的封面，那么我們就需要一個容器來上傳圖片或視頻，可以用一個占位圖image來代替，先不用考慮放什么位置以及在哪個節點，先將每一個信息點都進行控件化。接下來菜譜的名稱和簡介都是輸入模塊text。難度和時間有兩種形式：輸入和選擇，那我們當然用選擇，因為操作和理解成本更低，能用選擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動作面板、展開單選，那哪個更方便高效呢？這里如果需要選擇的選項不多，也不需要滾動、聯動，那么用actionsheet就可以了。如果你想讓選項更直觀更方便操作那么你可以把選項直接放出來。
接下來是食材，食材又分為食材的名稱和用量，那么也是一個輸入的行為，需要兩個輸入框，這里就不能用選擇的交互了，因為在這個場景中選項是根據用戶需求隨機、特定的，需要用戶自己輸入。
最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進行接下來的操作。
根據用戶的操作習慣和場景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習慣呢？先填寫制作順序嗎？不對，應該先編輯基本信息，也就是我們通過烹飪的流程，先想好要做什么菜，再去準備食材，再開始一系列烹飪的步驟。
所以我們要先讓用戶去添加封面編輯標題和介紹，烹飪難度和時間其實放在開頭和末尾都可以，但是考慮到這些信息在列表中會一起展示，那么我們索性就在開頭就直接一起編輯。
接下來是添加食材，添加食材的場景中會涉及到對食材的添加、刪除、清空以及智能編輯（類似添加收貨地址），所以這里的場景不要漏掉。那有的小伙伴要問是不是可以再加一個拍照識別食材的功能？其實不需要，因為我們在準備做菜譜之前肯定對這道菜有了解，知道每一個食材的名稱我們才會去做菜，否則連什么食材都不知道就去做，那萬一有毒呢？所以這個場景是不存在的。
再接著是編輯制作步驟，依然是思考用戶場景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調整位置、批量傳圖等功能。這些場景我們在腦爆的時候或多或少會遺漏掉。
移動端產品的層級和路徑主要是根據頁面來劃定的，所以頁面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡單。路徑階段的劃分主要是根據這幾點來考慮的：
1.當前頁面內容是否溢出、符合場景、滿足預期也就是說當前頁面中的內容是否符合當前場景的用戶，以及是不是過載了。例如我們去購買電影票的流程，當我們在查看電影詳情的時候，不會出現電影院和電影場次的選擇，因為不符合當前場景的用戶需求。
2.場景是否獨立我們在選擇回收自己的手機時，在選擇型號頁面不會再讓用戶編輯估價信息。這個場景是獨立的，并且只有完成了前置操作步驟后才能進行下一步。
3.任務是否需要階段性結束 為什么需要進行新建界面，是因為當前界面在滿足1和2兩個約束后，要考慮第一個步驟是否階段性完結了，例如我如果把菜譜編輯基礎信息界面單獨做一個界面，而編輯步驟再單獨做一個界面，這里第一界面是否階段性完結呢？還沒有，因為你可以隨時要去修改標題、封面、食材等等，而經常返回上一頁并不是一件很簡單的事，用戶也會擔心我編輯好的步驟會不會保存等一系列問題。
這里再用一個蔚來app中選購車輛配置的流程舉個例子。他這里也將選擇配置流程劃分成了幾個界面，但這個流程結構就不是單純的線性結構了，雖然他每個不同的配置單獨做成一個界面但是頂部利用tab來切換不同配置選項的界面。
所以當任務需要階段性完成時候，例如只有先輸入手機號點擊發送驗證碼之后才能收到驗證碼，在這樣的流程中我們可以使用下一步來進入下一個環節。如果要分不同的界面，而又沒有出現階段性完結的情況，那么前一頁的內容編輯再下一頁也需要有，例如我們把標題編輯單獨做一個界面，但是下一個編輯基本信息界面也依然要能夠編輯標題。
通過對用戶場景和觸點的分類，以及對第四步的思考，我們可以發現其實編輯基本信息和編輯步驟是需要放在同一個頁面中去完成的，因為沒有階段性結束。但是放在同一個界面也有一些問題比如單個界面需要編輯的信息太多，比較繁瑣，再次編輯需要上下滑動瀏覽不方便等問題。所以我們也可以看一下市面上的競品都是怎么做的，有一些產品會將編輯標題單獨劃分出一個界面，這其實沒改變前者的問題，單獨作為一個頁面或許是基于這兩點考慮：
1.希望用戶通過認真對待標題來提高菜譜的點擊率和引起別人的興趣
2.業務需求，通過讓用戶了解優質內容的協議來謹慎對待上傳菜譜的質量
3.對于一個復雜操作前的一個準備和引導，讓用戶更容易接受接下來的大量表單的填寫。
接下來是填寫的界面，那么我們就可以根據信息展示的優先級和第三步設定好的控件進行布局，這里涉及到的原理就不講了。我們主要來分析一下某些功能在布局的時候為什么這么放。
首先封面和標題還有簡介從上至下應該沒有什么問題，因為有兩個輸入模塊咱就無法左右放，因為這3者是強關聯信息所以是一個整體。其次是難度和時間，這兩個字段包含的內容和形式我們在之前的步驟中提到有兩種形式，一種是actionsheet還有一種是選項標簽化平鋪，前者的好處是節省空間，易擴展，后者則更加直觀和方便選擇，另外也要考慮類似控件在整個產品中的統一性。
接下來是食材添加和編輯，這里涉及到食材名稱和用量的文本輸入，這里可以直接用一行輸入模塊來放單個食材的編輯，因為整個頁面表單很長所以盡量簡化上下空間。同時還有對食材的刪除、清空、調序和新增。那這三個按鈕怎么放比較合理呢？我們要看用戶使用的場景，可以考慮的維度有：操作頻率、操作優先級以及任務的主方向。
所以在食材編輯這個模塊中，最高頻的是新增其次是刪除再次是調序最后是清空。而當食材新增后內容會向下延伸，所以新增的按鈕不適合放在上方，也不適合放在每個輸入模塊的右側。刪除和調序則是最某個食材信息的編輯所以是針對單個輸入模塊的，那必須跟在后面。最后的清空可以放在新增按鈕的左側。這樣就完成了添加食材的模塊。
再接下來是烹飪步驟。上傳圖片和編輯文本沒什么問題，上下布局是因為在正式瀏覽的時候需要大圖和文字搭配的形式，所以為了形式統一就只能這樣布局。
目前調整步驟在最底部，同時刪除操作也需要點擊調整步驟后才能出現，這里因為調整步驟和刪除不是高頻操作，弱化層級可以理解，但是如果放在底部那么如果我想要刪除第一步和調整前2步順序的時候，就要上下來回滑動，不是很方便。
那其實我們可以這么做，把烹飪步驟作為一個bar，在頁面向上滑動的時候置頂，添加食材也可以這樣操作。就是為了讓用戶在上下滑動的時候可以隨時進行一個編輯，步驟在任何位置都可以直接進行換位和刪除。另外由于是大圖模式，在換位的時候進行長按拖動其實對拇指的操作有一定的要求。既然這樣為什么不用上下切換的按鈕進行調序。
我們來看一下拇指拖動要激活兩個階段，首先要長按激活拖動，然后需要按住不放進行拖拽，由于卡片面積較大拇指滑動的距離就要長，對于手小的用戶就不太方便了。那我們是否可以做成一個上下切換的按鈕，這樣只要通過單擊就可以完成順序的調換，并且通常調換順序并不需要跨越多個步驟進行，一般也只是相鄰兩個步驟的順序換一下即可。所以這里首先我會把編輯按鈕和批量傳圖都放在烹飪步驟bar右側并置頂。
最后再補上剩余的選項模塊和發布、預覽、草稿的按鈕即可。預覽和草稿必須放在導航欄，因為這倆功能是隨時需要進行操作的所以不能在頁面底部，而發布按鈕可以放在最底下。也有小伙伴想問，為什么不在底部做一個固定的bar來放這些按鈕呢。因為頁面縱向信息很復雜，不僅底部占用了高度也容易誤操作，在沒有編輯完時，發布按鈕還是比較雞肋的，所以是不會出現一個底部固定的bar。
好啦，今天分享的交互流程案例大家學廢了嗎？我們下期再見，有更多想法和交流歡迎在留言區留言！
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn