本文從詳細問題反饋分析及分類、體驗問題價值優先級評估、意見反饋體驗問題價值優先級評估等方面，幫你學會整理反饋意見。

文章來源：優設  作者：vv醬?-? 

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

本文從詳細問題反饋分析及分類、體驗問題價值優先級評估、意見反饋體驗問題價值優先級評估等方面，幫你學會整理反饋意見。

文章來源：優設  作者：vv醬?-? 

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

一、設計體系的三層一環結構

下面是我提出一個VGLT-MO三層一環結構，幫助大家理解設計體系。

• 愿景與原則（Vision & Principle），它們作為設計決策的參考，指導前行。
• 指南（Guidelines），包含樣式指南（Style Guideline）、模式指南（Patterns Guideline)、內容指南（Content Guideline）等更多通過文字和圖像進行傳達的內容。
• 庫與工具（Libraries & Tools），包含組件庫（Components Libraries）、工具包（Toolkits）、協同工具（Collaborative Tools）等可以直接進行使用的內容。

包圍著這三層內容的一環是管理結構（Management Structure）與組織流程（Organization Process)，它促進整個設計體系成為一個活的生態系統。

我曾參與過國內某知名企業的設計體系建設過程，遇到了很多困難，但也收獲了更多的認知，了解到不能怎么做和應該如何做，進一步促成了本篇文章；因此我試著搭建出設計體系的通用結構，并且文章后面闡述其中的價值和如何去構建設計體系。

二、設計體系的原則

系統規則影響系統行為，穩定的設計體系結構促進產生穩定的設計體系，關于設計體系的原則我將其歸結為以下4點原則：

1）形式上，通用卻靈活

設計體系是獨立存在于現有業務外的，用可預測的規則進行構建和管理，指導方向一致性，而非每個人獨自開腦洞。

但是規則并不是限制，當指導不足以傳達更佳的用戶體驗時就通過體系機制的設計，即時迭代設計體系。

設計師可以更快地完成原型和迭代工作，因而更加靈活地去思考滿足需求的解決方案。

2）關系上，整合但互通

整合設計與開發，鏈接設計與實現的代碼，有效地將體驗的設計與落地的開發相結合；但又通過獨立化的模塊設計以及模塊間關系的設計，搭配良好的機制和協同工具幫助使用者更流暢地使用。

3）組織上，開放共享且跨域同步

通過組織流程的設計讓基于模塊化設計思維的組件、設計模式、內容策略等等能被盡可能多的人重復利用，提高知識復用率；并讓關于用戶的知識在組織中的設計師、工程師、產品經理、市場營銷人員等人中保持同步和流通。

4）成果上，協同而一致

通過良好的開發體驗，用設計開發的規范化指導，讓大范圍的開發與設計都能良好地匹配用戶心智模型和多設備多平臺需求，帶來優質且統一的產品價值傳達和用戶體驗實現。

除了創建更高的可用性（Usability）之外，也能建立更高的可訪問性（Accessibility），讓體驗在如障礙群體、各類配置低下的設備、有法律與文化的國際差異等在產品多次迭代中也能更易達成一致（這些往往是較少被考慮到的內容）。

三、不同設計體系的差異

不同組織和產品的設計體系都會不一樣。

設計體系有不同規模（Kholmatova，2017），簡單來說可以分為平臺級設計體系（如Apple的人機交互指南HIG, Microsoft的流暢設計體系FDS）和公司級設計體系（如Atlassian的Atlassian設計體系ADS；Salesforce的閃電設計體系LDS，Adobe的Spectrum），如螞蟻金服的Ant Design等）。

設計體系的開放程度不一，而且有些設計體系并不對外開放（如Airbnb的設計語言系統DLS），而微軟的流暢設計體系則是全程開放。

我們可以從實踐規則（嚴格/松散）、構造方式（模塊化/整合化）和管理機制（集中式/分布式）（Kholmatova，2017）。

任何組織都能在其中找到合適的定位，有些設計體系極為嚴格，而有些反而得益于其松散性與靈活性；如Airbnb的設計體系整體上更為嚴格，擁有詳實的設計規范文檔、設計與開發有精準的同步流程、擁有嚴格的新模式入庫流程，詳實全面的設計文檔等；通過內網進行使用，并開發一系列的插件工具促進設計與開發流程。

而TED只有兩名 UX 設計師和四名前端工程師專職負責設計體系相關工作，因此就更稍顯松散；不同的程度都是和自身組織的團隊文化和產品特征有關的，他們更加關注有效地實現產品設計目標。

“我們鼓勵以正確的方式進行設計，而非一味強調一致性原則；頁面的性能表現對于我們來說更為重要，如果它無法有效地承載內容，我們會將其修改到能夠承載為止；一致性與模式化的信條對于我們來說無法成為驅動設計決策的關鍵要素?！薄狹ichael McWatters，TED UX 架構師

是標準化還是松散化，更多依靠組織文化下的選擇。它們各有利弊。一個緊湊嚴格，利于精準，但有時較為死板，會限制設計師進行創造發揮；一個靈活適應，利于拓展和快速變更，但難以控制，它們都需要找到解決自身缺陷的方法。

關于模塊化還是整合化，我們可以根據各自適應的產品特征進行抉擇。

例如模塊化方式適用于：

• 需要擴展與進化空間；
• 需要適應不同類型的用戶需求；
• 需要大量的可復用部件參與構建；
• 需要多個團隊同步并行地參與構建。

典型的例子包括電商產品、新聞類產品、在線教育平臺、金融平臺、政府信息平臺等等。

而整合化方式則適用于：

• 面向一個特定目標進行設計的；
• 無需具備擴展性與適應性；
• 需要在體系范圍之外進行風格探索的；
• 部件復用率較低的；
• 一次性的。

典型的例子包括創意展示類頁面、一次性的運營活動頁面、作品集等等。

當然有許多不同的特質讓每個設計體系各不相同，關鍵的是，我們如何找到適合的定位；而關于管理方式上的劃分，我將在第4章-如何構建設計體系中進行更多詳細的論述。

四、關于設計體系的認知誤區

知道設計體系是什么，更需要了解設計體系不是什么。

關于設計體系有一些誤區，例如：

設計體系是設計規范（Design Guidelines）嗎？

許多人都會將設計規范與設計體系相提并論。但實際上，他們并不是一個層級的東西，或者更準確的說是設計體系包含了設計規范。

設計體系是模式庫（Pattern Library）或組件庫（Component Library）嗎？

模式庫的建立在設計體系內，而模式庫是記錄和共享設計模式的工具，只是設計體系的工具化和顯現化的部分；像Bootstrap這樣的工具包不被認為是設計體系，因為它們缺少一些定義設計系統的重要元素:模式庫、風格指南和設計語言。

設計體系是否會扼殺組織內的創造力？

不好的設計體系當然會，但好的設計體系往往會通過機制和流程，促進實際的創造力，因為來自終端的良好的解決方案可以更快被整個組織所采用，而不必擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。

設計體系是一勞永逸的嗎？

設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是將靜態的設計規范曲解成了設計體系。

文章來源：人人都是產品經理  作者：龍哩個龍

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

編輯導語：設計在產品中日?？梢?，但設計體系從何而來？很多時候，我們可以基于一套架構嚴謹、規則統一的體系框架，對產品表現層面的設計工作可以逐漸實現模塊化運作；本文作者分享了關于設計體系的整體詳細介紹，我們一起來了解一下。

——WHY 為什么？

設計體系從何而來，為何出現？設計體系如何發展到現在的樣子？

——WHAT 是什么？

設計體系是什么？不是什么？關于設計體系有哪些誤區？與設計規范、組件庫、模式庫的區別是什么？有哪些現存的設計體系？

——HOW 如何做？

如何搭建自己公司的設計體系？

——FUTURE 設計體系的未來如何？

這篇文章有大量我的個人理解，因此難免出錯或是不準確的地方。

國內設計和前端界對Design System主要存在兩種叫法，設計系統和設計體系。

看看百度詞條對兩個詞匯的解釋：

系統，來源于古代希臘文（systεmα），英文為system，日文音譯，后引為中文，即形容若干部分相互聯系、相互作用，形成的具有某些功能的整體。
體系，英文為structure，泛指一定范圍內或同類的事物按照一定的秩序和內部聯系組合而成的整體，是不同系統組成的系統。

要了解Design System，首先就得了解到它一定不是一堆UI組件，不只是設計師的事；如果稱Design System稱為“設計系統”，則是把它當成“產品”存在了，過于靜態，失去了人之間的聯系，但恰恰是人之間的聯系才能促成優秀設計體系的生成。

因此盡管原英文單詞不同，但依據實際表達的意思，本文偏向于認同“設計體系”的名稱，相信你讀完之后也會認同這樣的叫法。

一、設計體系的涌現：適應組織的需要

目前來說，設計體系尚未出現清晰的定義，我們可以看一些設計體系的專家的定義：

“由明確的標準指導的可重用組件的集合，這些組件可以組裝在一起以構建任意數量的應用程序。”——Will Fanguy（2017，inVision設計體系專家）

“一組相互關聯的模式和實例的共享，通過將一致地組織它們以服務產品目標。模式（Pattern）是我們用來創建界面的重復元素：如用戶流、交互、按鈕、文本字段、圖標、顏色、排版、微復制等；實例(Practices)是我們在團隊工作中如何選擇創建、獲取、共享和使用這些模式?！薄?Alla Kholmatova（2017，著有設計體系：數字化產品設計的系統化方法）

“由個人、團隊或社區記錄和發布的視覺風格、組件和其他的庫，以作為代碼和設計工具，以便采用產品可以更加高效和有凝聚力?！薄狽athan Curtis（2017，設計體系咨詢專家，幫助多個企業搭建設計體系）

在本文綜合的理解下，我試著為設計體系下了更加清晰的定義：

設計體系（Design System，也可以叫設計系統）是可重用組件的集合，由清晰的標準引導，通過機制化的組織流程和具象的指南與工具加以整合，以幫助開發者（設計、工程等）高效且一致地創建大量的應用，并且動態地確保用戶體驗的一致性。

如果你之前不太了解設計體系，可能現在有點懵，沒關系，相信讀完我這篇文章，你一定就能了解。

二、小故事：一個按鈕的旅程

試想一下，現在你現在是UX設計師A1，我們現在因為某項用戶需求或業務需求需要處理。

1. 那么最開始我們需要考慮是這個需求用按鈕還是用其他解決方案解決。最后我們決定了使用按鈕的方式。
2. 然后再考慮一些視覺因素，例如框線、背景塊、描述、顏色、陰影、字體等元素，每個因素都需要考慮一遍……
3. 再考慮頁面中的位置關系，在頁面靠左還是靠右？與四面保持多大間距？……
4. 再加上互動因素，懸停的時候、點擊的時候、選中的時候、不可用的時候，再加上后續結果是跳出彈窗？打開新頁面？還是僅僅是頁面的小變化？……
5. 嗯，不錯好像設計做完了，評審一下，大家似乎都同意了。然后交給視覺設計師C1處理視覺。差不多之后，再交到前端工程師小B1手上，啪啦啪啦敲一堆代碼，好像實現了。
6. 驗收的時候又發現和最初設計并不一樣。前端怪你某個標注沒做清楚，然后就又拉著前端改改改……
7. 如果又要做個按鈕，設計師A2與工程師B1之間又如何進行設計連接？工程師B2如何快速修改工程師B1的代碼？他們與組織中其他的設計師AN和工程師們BN又如何連接？……
8. 又到某次軟件需要版本升級，需要對按鈕進行統一的改色和調整，不過之前的幾個前端到換到其他部門了，新的前端工程師B3發現軟件中的按鈕，盡管都是按鈕，但代碼都不相同，他花了非常多的時間找到了各個按鈕的代碼并逐一進行了更改……
9. 而這些僅僅是一個按鈕，如果再加入表單、選項卡、標簽欄、搜索欄、樹形控件等等組件……停停停，已經腦溢血了。

盡管A1設計師和B1工程師的自己的習慣可能類似，但由于參與人數的增多和任務量的增多，每個人都有自己的見解與習慣；考慮這一個按鈕中的每一種元素，回憶一下數學中的排列組合問題，最后將發現同一個問題的解決方案的組合情況將會產生成百上千甚至萬種可能，而這里很多都是重復工作。

怎么辦？我們需要定義明確清晰的規則，讓不同的人都能為統一問題達成相對一致的解決方案處理，即達成設計工程化。

設計體系便是一種解決辦法。但盡管是叫“設計體系”而不是叫“開發體系”，但這并不意味著這只是設計的事情；因此接下來，我將談談設計體系是如何誕生的。

三、源起何處？——應對組織的挑戰

上面的故事已經從側面體現出，當業務與用戶的需求迫使組織面對一系列的問題，迫使企業需要探索合適的解決方法。

總的來說，設計體系的出現便是用來應對組織在敏捷、協作和債務處理等方面的需求。

——敏捷響應需求：在多設備、多平臺的現在，組織不可能選擇每隔幾年再更新一個全新的數字產品，因為這意味著在交互上用戶需要重新學習，在戰略上這種方式的不確定性因素過大，如果失敗就意味資源的大量浪費。

就特性而言，數字產品不同于實體產品，往往需要盡快上市，最小成本檢驗，盡快迭代，以獲取更強的競爭力，而且以往寫的代碼也不會被磨損，需要定期進行維護；因此這些便對組織滿足用戶體驗的速度做出了要求，因此更多的組織逐漸采用如等以敏捷（Agile）和精益（Lean）思維為基礎的敏捷開發（Scrum）、設計沖刺（Design Sprint）等方法。

——復雜的協作鴻溝：對用戶來說，只需要點擊升級便可獲得最新的體驗，但這意味著這種體驗的即時在線化將體驗迭代的簡單交給了用戶，而復雜就留給了組織；UX設計師、前端工程師、產品經理、內容策略師們、可訪問性專家等等組成的組織結構和工作流程都需要得到適應性的改變，才能提供快速迭代的流程去完成版本管理、設計管理、債務管理等工作？

Alex Schleifer（Airbnb設計副總監）也提到這樣的情況：雖然工具的提升幫助編碼的速率和設計的效率都在提升，但最終使設計生效的是多方面的協作的結果，然而原有方式越來越多暴露出在跨學科溝通上的問題，這些依然阻礙著產品創新以實現更佳用戶體驗的效率。

——債務大量累積： 這里的債務不是指經濟上的債務，在設計上，由于設計人員的個體差別和缺乏系統性機制促進設計經驗溝通，設計往往在長期的開發過程中提供了許多定制化的解決方案；在UI上可以體現為不同樣式的按鈕或顏色等、UX上可以體現為同一軟件上的交互邏輯混亂等，這造成了設計債務（Design Dept）。

而技術債務（Technical Dept）亦是如此，為同一個問題，不同的工程師使用不同的代碼或是令牌標記，加大了代碼設計與維護、拓展的難度；同時，我認為其中還存在一個債務，我將其稱之為產品債務（Product Dept），不同類別的產品經理等負責產品定義等職能的人員為同一產品或業務功能提供了不同，但效果相似的產品解決辦法。

而且無論你是互聯網公司，亦或是傳統產品公司，越是龐大的體系，人員就越細分，在整體設計上的知識就越分裂，就越有可能出現同一問題多個定制化解決方案的情況，這會讓出現在工程、產品、設計上的債務就越龐大。

這些設計、技術、產品債務讓管理、維護都異常艱難；而且只要審視一下我們日常工作的周遭，就會發現債務其實無處不在；那些雜亂的視覺形象應用、那些不統一的工業產品材料與色彩、那些無準則的交互行為、那些不一致的反饋聲音、同一數字產品不同的功能模塊定義等等……

時至今日，設備和用戶的多樣性都在激增，以往的標準、工作流程和基礎設施都難以支撐；我們用設計和開發應對的問題越來越多，變化也越來越多，但我們一直在定制化和通用化之間無序游離。

可以在一些軟件中看到同樣的一個功能按鈕出現十幾種形式，而它們要解決的問題卻幾乎一樣；也可以看到那些拙劣的設計規范中，萬物歸為一種單調樣式，降低了開發成本，卻帶來用戶認知的困難。它們都難以維護，極大地阻礙了組織創造體驗、達成商業可持續和創新的效率。

四、組織的應對？996還是一勞永逸？

面對著這些問題，公司只能存在幾種選擇（Suarez等人，inVison）：

• A-不改變速度雇傭更多的人（通過內部雇傭或業務外包）；
• B-提升員工設計與開發的速度（個人能力的極致壓制，996、007）；
• C-改變工作的方式，創建通配式的解決方案，提高設計與代碼復用率以提升效率（如模塊化）。

大部分組織為了滿足快速發展的需要，往往更多采用A和B的方式（例如各種各樣的業務擴充，產生了大量對工程和設計人員的需求，如阿里、網易、字節、美團等）。

但提升人員，仍然不能解決定制化方案的拓展問題，仍然存在大量不可復用的方案，造成效率的浪費；好比毒素累積，治標不治本，當達到足夠的毒素累積之后，創新將寸步難行。

如果不首先創新構建方式，就無法創新產品，這是非常簡單的真理。——Alex Schleifer（Airbnb設計副總監）

雖然組織內也一直在提升效率，但管理只能提升局部效率，工具才能帶來系統的變革。

設計體系的提出并不只是為了解決用戶體驗的問題，而是適應組織內的開發需求。而通配式解決方案的方法則更具系統性、遠期性。這便是設計體系的源頭，模塊化（Modularity）是一個關鍵詞。

五、設計體系的發展歷程

早在福特的時代，“流水線”思維就將生產流程模塊化進而提升生產效率和生產一致性，形成大批量的工業化時代，形成了強勢的美國汽車工業；二戰之后，20世紀60年代，豐田作為日本汽車制造商的一分子運用精益生產的小批量生產方法，注重發掘工人的創造力，即時解決問題，響應需求，降低遠期浪費。 (E Ries, 2012)

回到軟件開發上來。20世紀60年代，越來越多組織發現軟件發展的速度已經跟不上硬件的升級，軟件開發越來越容易緩慢、難維護且容易出錯。在開發上，預算超支、超時運行，在使用效果上效率和質量都很低下；在運維上，不符合要求、難以維護管理代碼，容易造成軟件無法交付。

硬件與軟件之間的差距以及解決這個問題而造成的困境，軟件危機（Software Crisis）便出現了。

沒人能對這些問題視而不見，開發者與設計師的先驅們開始探索解決方案。

1968年，第一屆北約軟件工程（NATO）會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件（Component-based）的開發方法，通過復用代碼來提高編程潛力的方法，減少編程的工作量，同時能幫助編程工作更高效、更易于擴展且靈活，提升軟件開發速度；因此這被認為是有可能是解決“軟件危機”的方法之一，這種方法可以算是早期的設計體系的基礎雛形。（軟件危機&INvision）——維基百科，關于軟件危機的描述

而在設計界，也有先驅提出了類似方法。1977年，Alexander等人通過其書A Pattern Language，提出了模式語言（Pattern Language），期望用系統化的方法解決設計建筑、城鎮和建設方式的問題，幫助形成一種實現為250多種不同類型建筑的持續性方式（Koivisto，2019）；這種語言通過共享共同的模式，用共同設計的方式將更多人納入設計過程。

如果每個模式都是解決共同的問題，那么當面向同樣的問題時，用模式等方式快速應用以前的解決方法將可能是高效的工具；這里的模式（Pattern）便是用戶界面設計中的循環解決方式，模式庫是特定用戶界面上重復設計元素的集合。

在網頁開發時代，網頁設計師用基礎的網頁架構就能搭載數以萬計的頁面。

21世紀初，YUI和jQuery UI等庫的引入，為開發人員提供了一套小部件和模式的工具包，以創建更一致的網站用戶界面（Forst, 2016）（例如Bootstrap是Twitter開發的基于網頁解決方案的前端工具包，供設計師和開發人員使用）。

但這些方法也會些有優有劣，例如Mary Collin就曾對使用Bootstrap開發的網頁進行綜合對比，結果發現Bootstrap容易導致成果缺乏獨特性，看起來外觀非常一致；但在另一方面，在移動端響應性和拓展性方面效果很不錯，因為足夠穩定。

Mary Collin的一些網頁對比

在現代，互聯網興起，尤其是移動互聯網的興起，降低了信息分發與復制的邊際成本和提供了龐大的用戶量；即時在線的網絡為數字產品的測試和快速迭代提供了可能，良好的用戶體驗能為企業創造的價值將遠超傳統時代，體驗的重要性迫使數字產品不得不用更快速的升級換代過程滿足用戶需求?！ㄓ彳?，2020）

但規范或庫本身是靜態的，依然具備過多的不確定性，并且缺乏對開發全鏈路的支持，尤其是未來的每一次的設計如何決策。

因此進一步，一些通用設計資產(Design Assets)被逐漸固定下來，并輔以使用的規則描述，設計模式（Design Patterns）逐步形成，為協作而生，通過為重復的共同問題快速生成解決方案，并盡可能在整個組織內保持一致以提升效率。因為類似的原因和目的，也同時產生了例如樣式指南、設計語言、內容指南、甚至是品牌識別系統等等類似產物。

在軟件開發問題上，設計規范和設計模式成為內部設計師們依靠復制粘貼進行傳播的文檔，亦或是前端工程們網上開源共享的模式庫（Pattern libraries）或組件庫。

與設計模式不同，模塊化設計（Modular Design）引入了敏捷設計方法的思想；建立在以前的基礎上，讓解決方案的更快、更短的迭代，前端框架是提供特定解決方案和特定外觀和感覺的工具”（Frost，2013）。

框架本質上是模塊化的，它們專注于單個項目或設計問題（Frost，2013）；對于多個設計問題，框架、模式庫或模塊化設計本身不足以系統地使用，這樣的背景下，便迎來了設計體系的涌現。

六、大量涌現的設計體系

2013年，Brad Forst提出了原子設計（Atomic Design）理論為設計體系的出現奠定了一波理論熱度，提供了更加形象化的描述說明；這讓更多人意識到這些問題的存在，并且提供了易于理解且廣泛傳播的理論基礎和解決方案。

Brad Forst，原子設計（Atomic Design）理論

原子設計理論將交互元素似化學因子一般逐步拆分。

• 在最底層級是原子（Atoms，例如按鈕、圖標的最小組件等）;
• 原子構成分子（Molecules，分子由兩個或多個攜帶自身屬性的原子組裝而成，并形成更實質性和功能性的組件，例如由表單標簽、輸入和按鈕組成的搜索表單）;
• 分子組成為有機體（Organisms，分子和原子組成的更大組裝體，是界面的一部分，如導航欄或標題）;
• 再組成為模板（Templates，將原子、分子和有機體等相對抽象的屬性放入情境中，接近最終解決效果，但更關注底層頁面結構）;
• 最后這些模板在設計師和工程師的協作下，變成實際的頁面（Pages）。

這是一種逐步拆分式的模塊化方法。

他建議用模式庫（Pattern Library，也被稱為用戶界面庫、組件庫、資產庫等）集合構成用戶界面的可重用組件，并通過指南（Guideline）指導如何創建，以進一步綜合了風格指南、流程指南、設計語言等等設計指南；包括他之內的幾位設計體系先驅都提出要進一步整合領域內語言，開始更多地使用設計體系（Design System）這樣的語言來代表類似的事物。

理論如此，實踐永遠不會落下?；ヂ摼W的廣泛普及帶來用戶需求量爆炸，對公司來說，越來越多的業務量壓力和一致的體驗需求的迫使下，越來越多的企業推出了自家的設計體系。

2014年伊始，Google推出了質感設計體系（Material Design System），類似的時間前后Atlassian搭建了Atlassian設計體系和Airbnb也在內部搭建設計體系（即后來的設計語言體系，DLS，Design Language System）；在此之后，一系列公司跟進開始研究和開放自己的設計體系。

例如Apple的人機界面指南（HIG），Microsoft的流暢設計體系（Fluent Design System）、IBM的碳設計體系（Carbon Design System），Salesforce的Lightning設計體系、Shopify的Polaris設計體系,甚至一些英國、美國、澳大利亞等公共部門也推出了自己的設計體系，如英國政府的GOV.UK設計體系。

而在國內，搭建的比較完善的有知名的螞蟻金服Ant Design設計體系，還有Element，以及View UI等中臺設計體系，以及許多存在于部門內部、仍然只是設計規范、或者設計體系不完全體的內容。

——插個題外話，微軟的流暢設計體系（Fluent Design System）是我這篇文章最開始的起點，從簡單論述微軟如何統一用戶體驗聚焦到流暢設計體系。

當然關于Fluent Design System的更多內容，我會在本系列文章之后，單獨出篇文章描述我的發現【稿子都差不多了，寫著寫著就寫成了設計體系系列文章哈哈】。

我們現在知道設計體系是為了什么了，但在現在的階段，問題不是能搭建什么，而是如何能更好地搭建。

“體驗工程的建設已經遠遠不止于一套設計規范或一套組件庫，他需要一套完整的系統來支撐，解決內部協作的一致性問題，解決設計系統更新的周期性問題，解決一群設計師與工程師如何規?；纳a各種業務 UI 的問題，從而最終解決用戶體驗一致性的問題“——Alibaba Fusion Design

文章來源：人人都是產品經理  作者：龍哩個龍

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

表單作為平臺與用戶聯系最為緊密的一環，良好的表單設計可以帶給用戶流暢自然的用戶體驗，保證用戶情緒的正向增長，而混亂無序的表單則會引起用戶的負面情緒，影響甚至阻礙用戶操作的完成，降低用戶對品牌好感度和信賴度。對于我們這樣的金融產品而言，產品內存在著如開戶表單、出金申請表單、調整杠桿申請表單等形形色色的表單，如何將這些表單整理歸納形成一套完整的表單設計體系，帶給用戶統一、高效且優質的填寫體驗，是我們這次表單優化的主要的任務。

系列文章中關于表單設計部分我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，希望這次的分享能為你今后的表單設計提供思路與參考。

1 認識表單

1.1 表單的歷史

表單在我們工作、生活中的使用由來已久，在還沒有互聯網的年代，表單就已經是人們收集和存儲數據、信息的重要手段，并一直沿用至今。如體檢時填寫的體檢表、入職時填寫的入職登記表、銀行開戶時填寫的開戶表都是使用的這種印刷的紙質表單。它們身上有很多設計可以作為重要的參考，幫助我們優化 UI 中的表單元素。

表單是 UI 界面中最為常見的元素，它通常是用來搜集和呈現一些數據、信息和特定的字段。表單的應用極為廣泛，比如登錄應用時填寫賬號密碼、網上購物時完善訂單信息、OA系統中提交休假審批、修改個人中心信息時……都是在和表單發生互動。

1.1 表單的構成

表單的目的、內容、大小等雖然各有不同，但是表單的基本構成元素是相對固定的，在設計過程中，設計師需要合理組織這些元素，幫助用戶在填寫表單時，輕松愉快的完成，表單主要組成部分如下圖。

1.標簽：告訴用戶此處相應的輸入元素是什么;

2.輸入區：可交互的輸入區域，根據字段類型使用相應的交互組件;

3.占位符：對當前項進行額外的信息描述;

4.前置圖標（可選）：描述文本所需的輸入類型和特征;

5.后置圖標（可選）：對輸入內容進行控制，如：下拉的展開與收起、清空；

6.幫助（可選）：提供表單內容的注釋或輔助類容，如：說明、注意事項；

7.反饋（可選）：告知用戶當前操作可能或已出現的問題，如：提交成功、錯誤提示、網絡問題；

8.鍵盤（可選）：在文本編輯時需要使用鍵盤，如：設備系統鍵盤、應用內置鍵盤；

9.操作按鈕：操作按鈕是在表單的結尾，如：提交、下一步、清空所有信息。

2 如何打造令人愉悅表單體驗

在如今這個互聯網時代，我們幾乎每天都會接觸到形形色色的表單，作為用戶與產品鏈接的樞紐，表單設計的好壞會直接的影響產品的實際數據表現。好的表單結構清晰，交互合理，用戶能夠高效愉悅的完成表單填寫，為用戶節省了時間，同時也提高了自身產品的轉化。而差的表單往往信息邏輯混亂，填寫效率低，且容易讓人產生挫敗感而中途放棄，在無形中浪費掉了很多潛在商業機會。是什么造成了不同表單之間出現如此大的體驗差異，我們又該如何做才能設計出令用戶愉悅的表單呢？在實際項目過程中，總結出一套適用于移動端表單設計的路徑圖-通過做好五個步驟，設計出令人愉悅的表單。

2.1 表單框架選擇

合理的表單框架選擇是打造用戶友好型表單的基礎，在進行表單設計時，我們首先需要依照表單的使用場景和復雜程度，選用最為恰當的表單框架。確定好表單框架，也就決定了后續設計中表單信息如何組織以及呈現。我們將表單框架劃分為“錄入方式”、“標簽布局”和“按鈕邏輯”三個部分，在表單設計時通過對這三個部分的選用來確定最終的表單框架形態。

2.2.1 錄入方式

按照表單錄入方式的不同我們大體上可以將表單錄入方式分為“單步錄入”、“分步錄入”和“分級錄入”三種，在進行表單設計時需要根據實際情況選擇與使用場景匹配的錄入方式。

1 單步錄入

單步錄入是表單中最為常見的錄入方式，在一個頁面內呈現所有的錄入項，結構簡單，快速錄入、快速提交，適用于錄入項較少的表單。

2 分步錄入

相對于PC端而言，移動端手機屏幕尺寸較小，一份在PC端1-2屏就能完全展示的表單在移動端往往需要7-8屏。將一個需要7-8屏才能展示完整的表單放在一個頁面內讓用戶填寫，用戶容易產生抵觸情緒會造成表單完成率的降低。

為了提高用戶填寫效率，減少用戶的抵觸情緒，我們可以將一個冗長的表單拆分成多個步驟，分步錄入。通過拆分成一個個步驟，讓表單信息呈現更為清理有條理，并且能引導用戶逐步填寫完成表單錄入。

當表單處于以下4種場景時選擇建議選用分步錄入模式:

1.表單錄入項過多，在一個頁面內已經不能合理清晰的組織傳遞信息。

2.表單內容的錄入方式存在較大差異，不適宜在一個頁面內進行展示。

3.表單錄入項在業務上存在先后順序，只有先完成上一步字段錄入，才能夠進入下一步。

4.在業務上很重要的表單，為了讓用戶能夠沉浸、快速的完成表單填寫時。

分布錄入模式下步4種步驟導航選擇：

1.文字導航：當表單為2步錄入表單時，我們展示步驟條帶給用戶的引導意義并不大，通常這種情況下我們會選擇省略掉步驟條，只展示當前步驟名稱，給予用戶提示。

2.步驟條導航：當表單錄入步驟為3-4步時，我們可以在頁面頂部放置步驟條顯示所有步驟內容標題，用戶通過步驟條能夠對表單有一個清晰的預期。

3.雙層步驟導航：當表單錄入步驟大于4步時，受限于移動端屏幕尺寸，橫向上不夠容納步驟數太多的步驟條，這時我們可以其中某些關聯的步驟歸納為一個大步驟，形成雙層步驟導航。

4.進度條導航：當表單錄入步驟大于4步，又擔心雙層導航給用戶傳遞出表單極端復雜的印象，勸退用戶。這時我們可以使用進度條導航，用百分比進度條來展現表單填寫進度。

3 分級錄入

分級錄入大家可能相對較為陌生，分級錄入在B端產品中會有相對多見，一般運用于有明顯上下級關系的表單，如項目管理工具中新建任務表單，在新建任務的同時還能新建下屬子任務。又如客戶關系管理軟件中，新建訂單的同時新建下屬的訂單明細。我們可以將使用分級錄入模式的表單視為兩張表單，子表單添加的數據會回顯到主表單上。

2.1.2 標簽布局

標簽用于提示用戶需要輸入的是什么信息。合理的標簽布局結構，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的標簽布局形式有：左右結構、上下結構和浮動結構。不同的標簽布局都有各自的優點和缺點，我們需要根據項目實際情況來選擇最合適的標簽形式。

1 左右結構

左右結構是目前最為常見的標簽布局形式，左右結構中標簽和輸入區域在一行內排布，其中標簽位于左側且居左對齊，輸入項位于右側有居左和居右對齊兩種對齊方式。

優點：節省縱向頁面空間，在移動端有限的頁面空間內能展示更多的錄入項。

缺點：標簽的長度無法確定，視覺上顯得參差不齊，表單的信息瀏覽和填寫效率一般，標簽橫向展示空間有限，對于多語言適配場景不太友好。

2 上下結構

上下結構也是我們能夠經常在表單中見到的標簽布局形式，上下結構中標簽位于上方且居左對齊，輸入區域位于下方也為居左對齊。

優點：用戶的視覺瀏覽路徑相對于左右結構來說較短，擁有較強的信息瀏覽和填寫效率，標簽橫向展示空間充足，對于多語言適配場景友好。

缺點：占據縱向空間多，一屏內能展示的錄入項較少。

3 浮動結構

Material Design中文本錄入的標簽形式就是選用的浮動結構，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會上移為文本輸入讓出空間，完成填寫后標簽和輸入文案上下排列展示。

優點：結構簡單，視覺干擾少，信息瀏覽和填寫效率高。

缺點：填寫項過多時，表單信息傳遞不夠清晰。

4 內部結構

內部結構相對于前面3種結構較為少見，比較長出現在登錄場景，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會消失，完成填寫后只展示輸入文案。

優點：結構簡單，視覺干擾少，聚焦于操作。

缺點：只適用于如登錄等錄入項極少的場景，一旦錄入項變多，由于錄入后不展示標簽，將導致用戶后續很難判斷輸入的信息是否準確。

2.1.3 按鈕邏輯

按鈕作為表單的重要組成部分之一，合理的按鈕邏輯能夠為用戶順暢完成表單填寫提供幫助，表單的按鈕邏輯主要由按鈕的位置和按鈕的點亮邏輯兩部分組成。

1 按鈕位置

按鈕在頁面中的位置情況主要有以下3種：

1.頂部按鈕：以文字的形式固定在頂部導航欄的右側，頂部按鈕尺寸較小，因為它所占空間有限，因此在操作上相對來說不便于點擊。所以這類頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。

2.表單底部：按鈕跟隨表單放置于表單的最下方，根據表單內容縱向空間的大小而上下移動。因為表單內容較多時，容易下沉過多而導致按鈕不可見，所以將按鈕放置于表單底部更適用于當表單錄入項較少不足半屏的場景。

3.設備底部：操作按鈕常駐在設備底部展示，適用于表單錄入項過多的情況，在表單設計時可以盡量將必填項放置在表單前面，用戶填完必填項后就可以點擊操作按鈕提交或者進入下一步，而不用滑動到表單底部再進行操作。

2 按鈕點亮邏輯

1.當表單錄入項較少時，且有明確預期按鈕何時可用，可以先置灰主按鈕，完成必填項填寫后再點亮主按鈕。

2.當表單錄入項較多時，且用戶不清楚為什么按鈕不可以用，此時按鈕可以常亮，并在用戶點擊時給予反饋，告知錯誤原因。

2.2 表單信息梳理

在確定好表單框架以后，對于表單內容信息的進行有效的組織也尤為重要，特別是對于一些結構復雜、錄入項多的表單，如果不對信息進行組織，很容易顯得繁雜混亂，容易讓用戶在一開始就產生抵觸的情緒，甚至選擇放棄。那么如何合理有層次的組織信息呢？

2.2.1 簡化表單，聚焦核心

我們在設計表單時潛意識里都想要從用戶那里獲取到更多的信息，表單中因此出現很多必要性較低的錄入項，表單也因此變得冗長，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，在填寫表單之前就萌生退意。我們在進行表單設計時需要保持克制，聚焦于表單的核心任務，讓表單盡量短而美。那么我們要如何為表單減負，可以嘗試以下方法。

1 減少表單中的多余字段

表單中每多一個錄入項需要填寫，都有可能會失去一部分用戶好感度甚至流失一部分用戶。在設計時我們需要判斷某個字段信息對于用戶來說是否有必要在表單中進行填寫，盡可能的刪減掉額外的無用字段。例如注冊表單，如讓用戶使用郵箱注冊，那么用戶的姓名字段是否是注冊的必選項？如果不是必選項是否可以在之后的信息完善中進行填寫。

2 合并表單中的同類字段

在表單中時有一些信息他們本身緊密相關，我們完全可以視情況將其合并為一個錄入項，來減少不必要的錄入操作，達到簡化表單，提升錄入效率的目的。合并錄入項要結合實際的使用場景以真實的提升表單體驗為目的，而不是一味的追求表單的最簡化。

3 隱藏表單中的低頻字段

根據用戶使用數據，適當將使用頻次不高、或者提供給專業用戶的高級表單項隱藏起來。例如一份表單中有一個填寫項，90%的用戶都不需要填寫，那么默認收起。保持表單的簡潔，讓絕大多數用戶快速完成，避免大量的表單給用戶的焦慮，而又滿足了小眾用戶的需求。

2.2.2 先易后難，循序漸進

根據沉沒成本的定義：人們在做決策時，受到了自己過去所投入的時間、金錢、精力等因素的干擾，對于先前付出了投資的事情有更強的忠誠度和繼續投資的意愿。進行流程設計時也可以遵循這個原理，將容易完成的表單放在前面，這樣做有3個好處：

1.簡單的表單更容易激起用戶的填寫欲望，用戶會迫不及待地去完成。相反，用戶一開始就看到過于復雜的表單，很容易被嚇到，從而放棄整個任務。

2.用戶通過完成簡單的表單，可以增加自信心，即使后面的表單變復雜了，用戶也更有耐心去完成。

3.當用戶將前面簡單的表單完成后，放棄整個表單的機會成本就變高了，即使后面碰到較難的任務，用戶放棄的幾率也會降低。

2.2.3 信息分組，一目了然

當我們我們設計的表單字段內容較多時，需要合理的對字段信息進行分組，這樣整體看起來更加有組織性。接近性（格式塔原理）原則告訴我們： 相互靠近的物體被認為比相互距離較遠的物體更有關聯性，這樣能使設計界面層次有序，視覺清晰，減少視覺噪音。分組時需要注意：

1.內容屬性相近或有關聯性的放在一組。

2.根據信息的重要性及難易程度排列分組，將選填的表單內容靠后

2.3 錄入操作提效

在表單錄入設計階段，我們需要明確認識到一點，用戶在面對一份表單時往往沒有我們想象中的那么有耐心，復雜繁瑣的錄入操作可能會直接勸退用戶。我們需要做的就是化繁為簡，思考如何給用戶減負，讓用戶簡單高效的完成表單錄入。表單錄入操作提效有一些切實可行的方法，下面請我將一一向分享。

2.3.1 設置默認值

對于用戶而言，填寫信息永遠都不是一件有趣的事情，在對用戶足夠了解的前提下，我們可以選擇為表單中的部分錄入項提前設置合理的默認值，節省用戶的操作時間。默認值的設置不是一個隨性發揮的過程，而是基于用戶行為和數據的理性判斷，并且也不是每個字段都適合設定默認值。關于如何設置合理的默認值，什么字段適合設定默認值，下面幾點可供大家參考：

1 自動填入已有信息

在一些業務場景，會使用到用戶之前在其它表單中已經錄入的信息，此時在填寫新表單時，可以默認帶入之前的數據。

2 自動填入關聯數據

如果用戶正在填寫的內容有相關的關聯數據，可以默認帶入。如我們在填寫訂單時可以默認帶入該訂單關聯的商品基礎信息。

3 系統自動獲取數據

基于移動端設備的能力，我們可以在用戶開放權限的情況下獲取一定的用戶信息（位置信息、電話區號、運動數據等），在特定情況下默認填寫，如滴滴通過GPS定位自動幫用戶填入上車位置。

4 經驗預判填入信息

像電話區號、證件類型、國籍等用戶錄入結果相對固定的字段，可以根據情況提設置合理的默認值。

2.3.2 減少手動輸入

相較于PC端而言，移動端設備屏幕尺寸較小，虛擬按鍵的輸入效率遠不及實體鍵盤，在移動端手動輸入的成本較高。因此，為了打造便捷優雅的操作體驗，移動端表單需要盡量減少用戶的手動輸入。以下方法可以減少手動輸入。

1 聯想輸入

聯想輸入是給予用戶輸入字段的自動補全功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。

2 替代輸入

對于表單填寫過程中可以固化選擇的信息，應讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。

3 歷史記錄

一份用戶可能會多次填寫的表單，我們可以提供用戶的歷史輸入項供其選擇，如滴滴的打車頁面會將我的常用目的地放置在目的地輸入框的旁邊供我快速錄入。

4 新型組件

一些新型的交互組件的使用能夠簡化信息錄入的操作，例如滑塊組件等。

2.2.3 減少頁面跳轉

在填寫表單時如果填寫項需要頻繁的頁面跳轉會使得整體的填寫效率變低，增加用戶的操作成本。在進行表單設計時應盡量規避這種頻繁的頁面跳轉，選用更流暢靈活的交互方式。

1 選項露出

在網頁端表單設計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中，觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時，當選項少于8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。

2 減少跳轉

在表單填寫中我們期望用戶保持專注，盡量避免產生引導用戶離開當前頁面的填寫交互，這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。

2.3.4  智能錄入

1 OCR識別文件內容

對于一些標準證件類信息的錄入，可以通過OCR識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。值得注意的是，如果圖片不清晰或存在水印，將大大降低識別準確度。此時應提供修正渠道，讓用戶可以逐一校對并修改文本內容。

2 號碼認證

短信驗證碼升級方案。直連三大運營商，一步校驗手機號與當前SIM卡號一致性。優化注冊/登錄/支付等場景驗證流程，有效提升拉新轉化率和用戶留存率。不做數據加工與號碼精準營銷，保護用戶隱私。

2.3.5  聯動鍵盤

為了避免讓用戶頻繁的跳入跳出相同類型的輸入項，首先整合表單的信息字段，將同類型的字段進行合并，同時結合輸入控件，設計聯動式組件，讓用戶在表單輸入時更加高效。

2.4 設計細節把控

設計不是簡單的元素拼湊，深入下去，有很多細節需要推敲，細節應該是含蓄的，包含在整體之內。好的細節設計不容易被用戶的眼睛直接發現，但是會讓用戶與產品的交互過程變得通順、舒適，概括來說就是潤物細無聲。對應到表單設計上，我們需要通過表單設計中的細節把控，讓表單錄入這件事變得簡單、高效。

1 必填與選填

當表單中同時出現必填項和選填項時我們需要對其做出區分，避免用戶不知道哪些字段必須填寫、哪些字段可以選擇性填寫。沿用通用符號習慣，在表單中我們往往使用 * 號來標記必填項。但是當表單中的必填項多于選填項時，大量的 * 號會增加用戶的認知負擔，面對這種情況，我們可以使用暗提示來標記選填項幫助用戶識別。

2 號碼組合規律

如電話號碼、銀行卡號這類有數字組合規律的號碼字段，我們可以沿用它們在線下的數字組合規律，通過空格對號碼字段進行劃分，幫助用戶校驗和閱讀。

3 密碼保護

出于保護用戶賬號安全考量，我們在進行密碼輸入時通常使用隱暗文字的方式來保護用戶賬戶安全，但是暗文字的顯示方式會讓用戶無法確認密碼信息。因此我們可以在輸入時，讓輸入字段短暫顯示，保持1秒然后再轉變為暗文字，這樣既可以讓用戶明確內容，也保證了用戶的賬戶安全。

4 符合心理預期

我們在進行表單設計時，輸入區域的長度要符合心理預期，需要預判填寫內容長度來確定輸入區域的長度。這樣不僅在體驗上一致，而且在視覺體驗上更加愉悅。

5 對指令有明確的稱謂

用戶應該對他們的操作所帶來的結果非常自信，使用“提交”、“注冊”、“立即支付”、“創造賬戶”等確定性文案來描述用戶將采取的操作。

6 錯誤信息就近反饋

報錯信息應當一目了然，從用色、圖標到文本都應當起到高亮的效果，而且報錯信息應當靠近輸入框，而非表單的底部或者頂部或者按鍵旁邊。

7 防止輸入框的遮擋

在設計主要由文本輸入框構成的表單頁面時，要考慮鍵盤出現可能會遮擋輸入框的情況，我們需要把控件放在scrollView上，當鍵盤會遮擋輸入框時,則表單滾動。

8 指導性錯誤反饋

對于異常情況不能只是冷冰冰的告知失敗，這樣容易給用戶帶來挫敗感，且缺少下一步操作指引。錯誤反饋不應該只著眼于結果，錯誤反饋的闡述角度應該是引起用戶關注、讓其快速了解出錯情況，并指導如何處理。

2.5 整體體驗提升

經過前面幾個步驟，表單整體形態已經確定，最后一步我們需要從整體體驗的角度對表單進行完善和調整。包含表單的容錯性考量、表單流程閉環的打造、視情況而定的趣味性設計。

2.5.1 表單容錯性考量

即便你的產品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的?！禛etting Real》

容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，包括降低用戶操作的出錯率、及時提供糾錯幫助、提供解決方案等內容。

容錯設計與用戶體驗息息相關，我們在表單頁面設計時也需要進行容錯性考量，盡量避免用戶錯誤操作的出現。當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。讓表單填寫流程更順暢，給用戶帶來更優的用戶體驗，關于表單容錯性設計可以從以下幾個方面來進行。

1 引導與提示

引導和提示要突出表現，從而引起用戶關注，確保用戶在操作前能注意到引導或提示信息。引導與提示用語要簡單且易于理解，當重要或操作不可逆時，要詢問用戶讓其知道這樣操作的后果。

2 限制操作

如何從設計上避免用戶出錯，限制是一種非常必要的方式，可以通過限制用戶的某些交互操作或者增加某些操作的難度來對用戶操作進行限制避免用戶出錯。

3 反饋與幫助

當用戶出現填寫錯誤時，及時的反饋錯誤并提供糾錯幫助，出錯信息應當用清晰準確且用戶易于理解，能夠對用戶解決當前問題提供建設性幫助。

4 錯誤恢復

允許用戶犯錯，操作者能歸夠撤銷以前的指令，幫助用戶在犯錯以后能夠快速回到正確狀態。

2.5.2 表單填寫流程閉環

表單的終點并不是提交，一個好的表單設計需要兼顧考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還有填寫后的整體流程體驗，為用戶提供完整的、形成閉環的表單填寫體驗。

舉個例子，當我們設計的表單需要用戶準備如身份證、銀行卡這類的證件時，需在表單填寫前告知用戶，避免用戶填寫途中才發現證件未準備，導致用戶填寫流程中斷。再如，用戶在填寫完證券開戶表單后，其實還需要通過審批后用戶才能進行入金交易等操作，這時我們需要一個結果頁來告知用戶表單提交的結果狀態和下一步的操作指引。

2.5.3 最后，再增加一點愉悅度吧

表單設計并不一定需要是嚴肅且正式的，在表單設計時可以嘗試引入一些趣味性的元素，研究表明，更大的文字輸入框、適度的留白空間、優雅的動畫效果、趣味性界面設計會讓人心情愉悅更有填寫的欲望。

例如bilibili的登錄頁面，在用戶輸入賬號時上方的卡通形象是睜眼的，當切換到輸入密碼或者驗證碼時卡通人物會有一個捂住雙眼的動作十分有趣，這樣的趣味性設計能夠在一定程度上緩解用戶在填寫表單時的焦慮情緒，并增加對于bilibili保護賬號安全的信賴感。

總結

以上就是我對于移動端表單設計的一些歸納和總結，過往的項目中自己設計大量的表單頁面，走了不少彎路犯了不少錯誤，但也通過項目不斷的反思總結，收獲不少的關于表單設計的經驗。在這里將項目中關于表單的一些思考和經驗分享出來，總結出自己的一套關于表單設計的方法論，也是希望能夠對正在進行表單設計或者即將進行表單設計的你提供一點點參考與幫助。

表單設計我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，也希望你能夠持續關注。

文章來源：站酷  作者：Yone楊

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

顏色可以用來區分信息圖形上的數據類別和維度，是數據可視化中最常用的視覺變量之一。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾——他們在識別部分或者全部顏色時有困難。我們通常籠統的稱這類人群為“色盲(Color Blindness)”（也稱為道爾頓癥、色覺缺失、色覺辨認障礙、色弱等）。面對如此龐大的特殊受眾，設計師理應關注他們的需求。信息圖形設計本是以向用戶傳遞精準數據為目標，也不能忽視了這部分群體。

一. 了解色盲
“色盲能看到顏色嗎？”“他們只能看到黑、白嗎？”——人們常誤以為色盲視覺所見的景象只有灰階分布，其實不是的。色盲并不意味著色覺的完全喪失，而是指部分色覺受損，因此無法正確感知和分辨某些區域的顏色。色盲可以分為：紅色盲（P）、綠色盲（D）、藍色盲（T）和全色盲。其中紅色盲和綠色盲最為普遍，合稱為紅綠色盲。全球大約2億人都患有色盲，它的普遍程度甚至高于AB血型的人群。下面我們感性的看看色盲人眼中的世界：
 

從上面模擬色盲色覺的圖片來看，我們可以感受到色盲人士能夠辨識的色相較為有限。紅色盲和綠色盲的色覺較為近似。由于紅綠色盲人數占到了色盲總數的99%，我們需要更多地理解他們能看到的顏色。以下列舉了紅綠色盲容易混淆的顏色，以及色覺上的一些規律：

 　　1 ) 紅綠色盲難以分辨兩種差別只在紅色或綠色元素的顏色。如紅色和綠色；藍色和紫色（藍+紅）；綠色和棕色；紅色和棕色等。

2 ) 紅綠色盲人士對藍色更為敏感。舉例來說，他們會把紅色和綠色、或黃色和黃綠色混淆，但卻能清楚的分辨綠色和藍綠色（翠綠色）。

3 ) 紅綠色盲眼中的紅色并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色強調字。

4 ) 雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。

5 ) 相比高飽和度的顏色，低飽和度的顏色更難辨認。如天藍色和粉紅色。

也許以上的分析還是太抽象，為了更直觀的看到色盲人士眼中的顏色，下面介紹幾種模擬色盲色覺的工具，方便設計師們設計和檢驗：

Adobe自帶的校樣設置

Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設置，對于每天都在Photoshop/Illustrator中拼搏的視覺設計師來說，這是最簡便的一種方法了。選擇“視圖—校樣設置—紅色盲型/綠色盲型”

 Color Oracle：http://colororacle.org/

 網站Color Blind Web Page Filter：http://colorfilter.wickline.org/

二.設計解決方案

設計面向色盲人士友好的信息圖形，并不意味著要設計師要放棄使用色彩這種“利器”。即便是對色覺障礙的人士來說，顏色依然是區分不同類數據的一種簡單快速的表現形式。要提高信息圖形的識別性和易讀性，我們可以遵循這樣幾個思路尋找解決方案：（1）不完全依賴顏色來區分信息，同時使用多種視覺變量來編碼信息；（2）選擇安全的配色方案；（3）使用文字注解。

1.冗余編碼

避免僅使用顏色來編碼信息，應盡量同時使用多種視覺變量（如形狀+顏色、尺寸+顏色、注釋+顏色）來對信息編碼。其中，形狀包括了這樣一些可使用的元素：圓形、三角形、矩形等；實線、虛線、點線等；字母、數字符號等。這里需遵循的一個原則是：使用盡可能少的顏色——結合使用不同形狀符號和少量鮮艷的顏色，效果遠好于只使用一種形狀和多種顏色。

 
2.選擇適當的配色
針對色盲人士的顏色識別能力，需要精心選擇配色，才能避免選擇容易混淆的色區。然而，要使配色能覆蓋到各種色覺辨認能力的人（包括色盲、色弱和色覺正常的人群）并不是一件容易的事，尤其同一界面需要出現多種顏色時，讓設計師非常頭疼。日本有研究得出一組無障礙配色建議，在此分享，供大家參考。這組顏色針對色盲和非色盲人士都是易辨識的（例如它選擇了朱紅色代替紅色，藍綠色代替綠色，紫紅色代替紫色，以減少色盲人士的困擾），它對屏顯和印刷都適用，并且所有顏色的名稱也容易定義。

需要注意的是，從以上配色組中選取顏色時：A. 請交替使用暖色和冷色；B. 當使用多個暖色和多個冷色時，在明度和飽和度上做出區別； C. 避免同時使用低飽和度和低明度的組合。
另外分享兩個配色工具，它們都提供了針對色盲人士配色的選項，可以輔助大家進行配色：
網站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/（打開“show color deficiency simulation”面板）
地圖配色工具COLOR BREWER 2.0 http://colorbrewer2.org/（勾選“colorblind safe”選項）

三、舉例

下面以幾種常用信息圖形為例，來說明如何為色盲用戶優化信息圖：

1)點狀圖

優化采用了這樣一些手段：A.調整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。B.調整明度，使圖中幾個顏色在明度上差異更明顯。C.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。

2)折線圖

優化采用了這樣一些手段：A.采用更粗的線條，使顏色更明顯。（色塊越小，顏色越難分辨。對有色覺障礙的人來說，帶顏色的細線、小圖標、細體文字尤其難區分。）B.換用不同形狀的線條（實線、虛線、點線）。C.文字直接注釋在線的周圍。D.顏色微調。這樣對每一類數據使用多重可視化變量進行編碼后，即便顏色信息完全丟失，也能夠完整的傳遞信息。所有使用線元素的信息圖，都可以參考這種解決方式。

3)柱狀圖

通過增加底紋，直接標注文字注釋的方式優化了柱狀圖。所有使用面的圖形（如餅圖），都可以參考這種解決方式。

四.寫在最后

在實際設計過程中，我們不一定會同時使用到以上所有手段，需要在美觀和友好之間進行權衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。如highcharts這個趨勢圖非常優秀，它采用了易辨識的顏色，每個節點處都使用了不同形狀的符號，然而僅當鼠標hover到具體節點時，會出現該條線對應的信息（“New York”）。

另外除了鼠標hover的交互方式以外，我們甚至也可以為色盲人士提供單獨的色盲模式切換，這樣也可以兼顧視覺上的美觀，避免了太多信息的干擾。這種形式在游戲和軟件中也有先例。例如iChat，一般情況下僅有不同顏色來區別用戶的在線狀態，但同時，它也提供了“User shapes to indicate status”選項，可以將“空閑”狀態換成橙黃色三角形符號，將“忙”狀態換成紅色方形符號表示。

文章來源：騰訊CDC  作者：pearlfu

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

編輯導語：新基建的支持，持續利好的政策，再加上互聯網紅利正在逐漸向供給側轉移……諸多因素都在推動著產業互聯網的發展。B端市場儼然已經成為產業互聯網的代名詞，盡管如此，B端市場仍然需要深度改造，我們要認清其獨特性，把握B端時代的發展規律，贏得發展紅利。

毋庸置疑的是，產業互聯網絕對是當前的熱點。無論是頭部的互聯網巨頭，還是新入局的玩家，幾乎都想要通過加持產業互聯網的概念來投身到全新的風口里。

的確，在C端流量的爭奪已然成為紅海的大背景下，將目光轉移到B端市場，我們將會發現一片充滿了機會的藍海。于是，習慣了跟隨風口的人們，開始將目光投向B端市場，并且開始用自身的實踐來尋找著挖掘風口的全新方式和方法。

在很多時候，B端市場，儼然成為產業互聯網的代名詞。

盡管B端市場的確有著非常龐大的市場潛能，并且B端市場確實需要被深度改造，但是，同僅僅只是以搭建平臺和中心為代表經典互聯網模式不同，B端市場或許需要投入更大的精力，或許需要建構新的商業模式，才能真正見到效果。

縱然是那些處于頭部的互聯網巨頭，依然需要投入很多，才能在賦能和改造B端的命題上有所建樹。簡單來講，B端時代是一個比C端時代的險灘暗流更多的時代。這是B端時代雖然成為一種趨勢，但卻一直都無法獲得突破性發展的根本原因。

說到底，B端市場是一個與C端完全不一樣的市場。

簡單地套用C端市場的打法并不能夠奏效，甚至還會失去絕佳的窗口期。找到真正適合B端時代的商業模式，并且真正能夠用這套商業模式解決互聯網時代無法解決的痛點和難題，或許才是B端時代的玩家們真正應該思考的關鍵問題。

我們都知道，在C端時代，互聯網平臺通常是用燒錢和補貼的方式來改變C端用戶的習慣，而后再對C端用戶進行收割。在這個過程當中，玩家們僅僅只是需要將平臺盡可能做大即可，等到C端用戶的行為和習慣改變之后，他們就可以發揮業已形成的規模效應，實現盈利。

同C端時代的商業模式不同，B端時代是一次全新的旅程，我們只有認清了它的獨特性，才能真正把握B端時代的發展規律，最終贏得發展紅利。

一、B端時代不一定要做大，但一定要做深

相對于C端時代動輒千萬級別，甚至億級的用戶量不同，在B端時代，用戶的量級會大大減少?？v然是頭部的平臺，它們所服務的用戶都無法達到C端時代的量級。

因此，僅僅只是將目光聚焦在用戶的量級上，試圖通過規模效益來實現自身的發展，很顯然是不對的。這是B端時代來臨之后，人們簡單地套用C端時代的發展模式，卻一直都無法奏效的根本原因。

同C端時代一定要做大不同，在B端時代，更加考驗玩家的是，是否能夠做深，是否能夠對一個B端玩家從頭到尾進行方方面面的賦能，徹徹底底的改造。

如果一個玩家可以對一個B端用戶從始至終都進行深入而又全面地改造，并且真正可以給B端用戶帶來本質性的變化。那么，這個玩家或許才算是真正掌握了B端時代發展的精髓。

這就需要B端時代的玩家擁有較為龐大的綜合實力。他們不僅要能上九天攬月，還要能夠下五洋捉鱉。由此可見，在B端時代，僅僅只是依靠概念和營銷是難以實現持續發展的，只有真正成為一個多面手，真正能夠給B端用戶帶來真正的改變，才能讓B端用戶買單。

如何扎根到某一個行業當中，把某個行業的內在流程和環節摸清弄透，做B端用戶的“萬金油”，才是確保一個B端時代的玩家可以長久發展的關鍵所在。所以，在B端時代，不一定要做到像C端時代那樣的量級，但是，一定要比C端時代做得更深，更透才行。

二、B端時代不一定要做平臺，但一定要做中臺

互聯網思維的深度影響讓玩家們簡單地認為，在B端時代，只需要搭建一個平臺，再把B端用戶聚攏在這個平臺上，就可以自然而然地進入到B端時代。事實證明，在B端時代，我們真正缺少的不是撮合和中介，而是賦能和改造。

在這個大背景下，互聯網時代的平臺和中心的概念已經不那么重要了，如何對B端用戶進行深度而又全面地賦能，如何深入到B端行業的方方面面，才是保證B端玩家真正把握風口的關鍵所在。

從這個角度來看，在B端時代，人們真正需要的或許并不是一個平臺，而是一個中臺。

同平臺僅僅只是一手聯通著上游的生產端，一手聯通著下游的消費端不同。中臺更像是一個深入到生產端和消費端的細枝末節的強大的根系，它不僅要承擔聯通的角色，而且還要承擔輸送營養和能量，改造B端角色。

可見，我們再去用平臺的概念來實踐B端時代的發展，依然無法真正把握B端時代的精髓，僅僅只能變成落后的B端玩家傾銷傳統、原始庫存產品的場所，而無法成為升級、轉型B端行業的助推器和營養基。

在B端時代來臨早期階段，我們看到的諸多以銷售為主導的賦能方式和方法，無論是社交電商，還是社交新零售基本上都是基于平臺思維出現的，而后來的發展同樣告訴我們，這種平臺思維無法真正奏效，以中臺代替平臺，才能真正把握B端時代的發展紅利。

三、B端時代不一定要封閉，但一定要開放

在C端時代，我們更多地看到的是你強我弱的零和游戲，即一方的強大，一定是以另外一方的弱勢為基礎的。這是互聯網平臺之所以會不斷建構屬于自身的生態系統，不斷進行流量的爭奪，并且逐漸走向封閉和壟斷的根本原因。雖然這套模式在C端時代非常奏效。

但是，等到B端時代來臨，我們再去用這樣一種封閉的、獨立的生態系統式的模式發展的時候，便會開始遭遇越來越多的困境和難題。

因此，在B端時代，我們并不一定要建構一個封閉的、獨立的生態系統，而是要打破自身的局限，不斷破圈才能獲得更大的發展空間。當下，我們看到越來越多地互聯網平臺開始破圈，打破原有的生態圈的概念，正是這種現象的直接體現。

B站在破圈，快手在破圈，阿里在破圈，微信也在破圈。這說明，在B端時代，不同的生態體和平臺之間同樣需要不斷聯通，才能真正給B端產業帶來改變，一味地封閉，不僅無法獲得發展，甚至還將會走入到死胡同里。

在B端時代，一定要開放，一定要協同。當我們不斷打破原有的圈層限制，當我們不斷開啟新的發展的時候，不同中心之間的協同給B端行業帶來的改變才能更大。從單平臺到多平臺，將會成為B端時代的主旋律。

以此為開端，在我們的頭腦當中所形成的根深蒂固的平臺和中心的概念將會由此打破，取而代之的將會是共生體的概念。

四、B端時代不一定要消費升級，但一定要產業升級

我們都知道，伴隨著B端時代的來臨，人們提及最多的是“消費升級”的概念。因為在消費升級的概念出現之后，人們才會反推到產業端，用產業升級來實踐B端時代，并且由此衍生出來了產業互聯網的概念。

事實上，所謂的消費升級的概念，其實依然是基于C端時代誕生出來的概念，如果用這個概念來指導B端時代的發展，是無法讓B端時代的發展跳出C端時代的發展怪圈的。

真正意義上的B端時代并不真正需要所謂的消費升級，但是，一定需要產業升級。因為以C端為主導的消費互聯網時代遭遇困境的根本原因不是因為C端用戶出問題了，而是因為B端的生產和供應方式出問題了，落后的供應端已經難以與消費端完美對接。

在這個時候，我們只有升級B端產業，通過新的生產方式和供應方式去滿足C端用戶的新需求，才能化解消費互聯網時代的問題，再度讓供求兩端實現對接。

隨著人們對于B端時代認識的深入，消費升級的概念開始逐漸被弱化，取而代之的是產業升級和消費平權的概念。通過產業升級，我們看到的是B端行業的生產模式和供應模式需要一場深度且全面地改變；通過消費平權，我們看到的是B端行業的用戶群體需要從一二線城市轉向下沉市場。

從本質上來看，無論是產業升級，還是消費平權，都是一場以B端變革為肇始點的新發展。不同的是，產業升級的概念之下，玩家們真正應該關注的是外部產業的升級；而在消費平權的概念之下，玩家們真正應該關注的是自身的升級。

五、B端時代不一定要去互聯網化，一定要數字化

伴隨著B端時代出現的是產業互聯網的概念，提及產業互聯網的字眼，人們自然而然地將其與互聯網聯系在一起。

后來，隨著大數據、云計算、區塊鏈和人工智能為代表的新技術的崛起，我們看到的是一場以去互聯網化為代表的新發展浪潮的來臨。于是，人們開始將B端時代與互聯網撇清聯系，甚至開始詆毀互聯網的功能和作用，去互聯網化儼然已經成為一種潮流。

筆者認為，在B端時代，我們并不一定要去互聯網化，而是一定要擺正互聯網的位置，認清互聯網的作用。在很多時候，B端時代的互聯網更多地承擔的是一個數字流量的獲取和整合的角色，它存在的價值和意義在于為將來的數字化積蓄能量。從這個角度來看，B端時代的來臨并不一定需要去互聯網化，而是應該更多地需要數字化。

如何以數字化為切入點來改變消費互聯網時代以互聯網為主導的發展模式，通過對傳統產業進行數字化的改造和整理，為傳統行業的發展汲取新的發展動能，或許才是我們真正應該關注的地方。

從這個邏輯來看，B端時代并不一定要去互聯網化，但是，一定要數字化。只有數字化真正實現和完成之后，B端時代才能真正完成和實現。

當產業互聯網時代來臨，B端市場成為一個備受關注的熱門領域。很顯然，B端市場與C端市場是存在著巨大區別的。認清這種區別，并且以此來落地和實踐產業互聯網，才能避免產業互聯網走回頭路，真正讓產業互聯網帶入到屬于自己的發展軌道里。

文章來源：人人都是產品經理  作者：孟永輝

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

在工作中常常被問到如何表達講述自己的設計，為了讓自己的設計有理可依，對接上下游匯報工作的時候，總結以下一些方法和觀點，幫助不知從何講述自己設計的人一些語言技巧。  

以下僅是個人觀點，用作探討交流，文中所有舉例均為本人工作設計輸出。

設計師能做出好的設計，卻缺乏系統化的語言包裝，“如何講設計”不該讓它成為難題，做一個有產品思維的設計師，讓你的設計以理服人，我們要不止停留在視覺表層，更要從多緯度看待產品設計，本文將從以下三點簡述：01.產品設計的五個層面，02.講述設計的流程，03.關于本次總結

做好產品設計的第一步，是了解產品， 要對于產品的需求如何確定、產品定位如何決定有一個基本的認識，在產品常識里面最重要也最常用的就是產品設計的五個層面，也簡稱用戶體驗五要素——

作為UI設計師，所處的視覺設計是表現層，是確定產品的最終形態，因此也處于產品設計的頂層（能被看到），是一個具象畫的呈現；其次，往里推框架層，是確定產品外觀，將界面信息和導航設計有序歸類，讓用戶使用或者理解；結構層是為用戶設計一個結構化的體驗，將零散的元素轉化為有序立體的空間；范圍層確定產品的功能和需求；最后戰略層是確定產品目標和用戶需求；底層邏輯結構決定上層意識形態表現，因此在設計前我們要知道產品是屬于洞察階段，設計中是屬于產品設計解決方案階段，整體的產品設計是一個概念通過無數個層面的努力，經過時間，轉化為具象表現的過程，所以我們在完成一項設計時，應該講述一個完整的設計思路 ，不要讓自己的設計思路僅停留在表面。

整個產品的設計產出是一個抽象到具象化的過程，設計的前期屬于產品洞察階段，這個時候一般由團隊的老板領導結合當下市場需要，有用戶的需求就有商機，想出產品大致的方向（戰略層）然后通過產品經理整合梳理高層的意見確定產品大致的功能和內容輸出原型（范圍層），交給交互設計師優化產品細節邏輯和信息具體框架，經過研發評估能夠技術實現產出交互稿（結構、框架層），這里已經過渡到設計解決問題執行階段，最后是給到界面設計師美化視覺產出高保真（表現層）。

也就是到我們自己設計輸出之前要經歷這么多，如果能在講述自己設計的時候，提前去了解這些，那么設計內容就不愁沒法兒講，光是闡述自己的設計思路就可以講出一個故事，這也是為什么現在很多品牌賣貨都開始營銷產品背后的故事由來。我們設計能做好，也要會用語言推銷自己的設計成果。

設計是對于某件事精心準備的過程。好的設計作品，應該擁有完整的設計流程，因此我們在講述自己設計作品的時候，有一套完整系統化的方式是非常有效的。完整的設計流程包含以下4個步驟：

第一是我們需要去了解設計的需求背景，知道大概的方向—— 

1. 來源（簡單理解就是誰提出的問題）需求有可能是你的老板、你的產品經理、或者交互設計、或者視覺上的問題··· 

2. 背景（籠統一點，就是這個需求是新需求還是原來有然后進行改版優化）需求的基層性質是什么，原本調性是什么，我們要做什么樣的產品··· 

3. 目標（目標一般都是需要解決什么問題）搞清楚為什么做這個需求，能解決什么痛點，不做無用功。

誰提出的問題，是新的需求還是舊的問題，或者我們要解決什么？圍繞這幾個方向將你的設計概述出來，會讓非專業的人也能聽懂你做了什么，舉個簡單的例子，我們公司后臺一個很小的產品bug需求，往往這種需求就是產品經理的一個截圖和他標注的兩句話——

然后你完成了這個需求單，在傳達給非產品經理以外的人的時候，你有可能是以下轉述方式——

毫無疑問，你就是將需求者的意思一字不落的轉達了，但是對于其他的聽者來說，你的轉述平平無奇、毫無意義，甚至都沒有印象你做了什么，所以你應該講清楚這個需求的背景—— 

設計需求來源是誰，原本屬于產品哪個模塊（來源），他原來功能是怎么樣的，界面上展示的結構哪里有問題（背景），視覺用了什么樣的方式改成什么樣，解決了什么痛點（目標）

講清楚誰給的需求，需要解決什么問題，是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的，才讓你的敘述更完整，聽起來更有邏輯。如果是一項新的需求，沒有背景，那還得從設計分析說起，設計分析就是讓你更專業的去做事，設計分析分為——用戶分析，設計目標，和設計手段三個要點：

首先用戶分析就是，分析你做的東西給誰看，而用戶又分為群體用戶和獨立用戶，在c端常見的就是獨立用戶，他們通常不定性，且有很多特征；在b端，目標用戶一般是群體，他們大多數是有場景特性和行業特性，針對獨立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結論也是不一致的，所以我們應該結合產品的調性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有：用戶畫像、用戶訪談、問卷調查、焦點小組、眼動測試、用戶反饋以及大數據分析，這些方法中最簡單的是用戶畫像，就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數據分析和用戶反饋，這兩種方式通過對接需求的上下游就可以得知。

通過用戶分析得出需求結論，滿足需求就能達成設計目標——

設計目標結合卡諾模型來分析，卡諾模型—反應產品性能和解決用戶需求的滿意度的一種非線性關系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個需求，用戶滿意度不會上升，但不滿足這個需求，用戶不滿意會大幅度降低 ；2.期望屬性：提供個性化需求，用戶滿意度會上升，不提供此需求，用戶滿意度會降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會降低 ；4.無差異：無論提不提供，用戶滿意度都不會改變，根本不在意；因此在做需求的時候我們應該盡力滿足基本需求和期望需求，而可有可無的需求盡量不去做，降低效率。幸福需求是不容易達到的，如果能滿足是非常棒的～這里就像是滿足了設計心理學的三個層次——本能、行為、反思。

接下來是大家都熟知的設計手段，適當的講一些述專業的設計技法，用不同的手段去實現的主畫面，最后達到完成設計目標這樣的結果，會讓你顯得更專業。設計的手段有很多種，這里主要講述常用的三種，構圖排版（采用什么構圖方式，為什么這樣構圖是因為什么設計原則）、色彩運用（為什么使用這個顏色，因為這個顏色給人的心里感知是什么樣的）、設計風格（采用什么風格最貼近產品調性，為什么用這個風格），但是講設計時一定要記住產品的調性，不能偏離產品本身，不要盲目套用絢麗的技法，否則是不合適的。

很多時候面對非專業需求方收稿時，可能看到如下話語———— 

（心里是不是xxxx····“萬馬奔騰”，用個文明點的詞）

非專業人士無法理解這二者的區別，他們認為他們的設計手段能達成設計目標，而作為專業設計師的我們就應該引導對方說出設計目標，再用我們專業的手段去滿足對方的目標，去實現減少改稿次數，而不是讓非專業人士去指導專業人士修改設計手段。分清這兩者的區別，我們就可以在設計引導中更加主動。用設計分析的方法來講述設計，舉個例子——

會議管理——會議預約移動端優化，因為這是我們原有產品EKP里面的模塊，PC端和移動端都有，因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像，得出他們的一些需求結論，然后目前幸福需求是沒有的，純屬個人建議，日后如果有此功能，想必用戶的滿意程度也會大大提升。

概括一下已完成的整體主要頁面，分析設計目標： 

頭部屬于流量量較高的區域，采用卡片式設計，將會議內容置于此處，作為頁面信息關鍵層，采用左對齊方式排版，突出會議標題和時間提醒用戶。

通過不同的顏色標簽，區分參會人員狀態—— 

待進行未有操作反饋，選用橙色，屬于可以持續進行并有明顯提醒作用 

已做反饋屬于成功操作，選用已有用戶認知心理的綠色 

已知信息拒絕參與，是不太重要的，屬于不再進行的階段，選用灰色

接下來是設計作品的產出過程，一般情況下不可見的過程，為什么要去講，  因為一個東西從無到有是很不容易的一件事，如果能講述過程，就可以引燃情緒共鳴，讓別人記住，讓自己的設計作品也能有始有終—— 

設計過程一般分為四個階段：初期階段、中期階段、最終定稿；具體的關鍵詞和描述可以通過以下方式提煉出來，這里就不做詳細說明了。

拿運營宣傳來舉個例子，我們公司中秋節月餅禮盒包裝主視覺設計——整個過程應該是有一個系統化的說明的，省略為寫字的地方是我們可以插入的具體圖片和過程，步驟差不多就是上述這些，可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優化…主畫面的誕生是不容易的，強化這種過程參與，讓不被看見的事也能展現。如果實在不好記錄，你可以從一開始就截圖你繪制的過程——

上圖是用PS截圖，再用時間軸將每一幀動態循壞播放，導出GIF然后截一張不變的底圖合成就可以了。

最后是數據驗證階段，這個是設計落地的直觀證實，包含主觀認可和客觀數據，具體內容就是通過用戶或者專業的人士反饋給你設計落地的好壞，來判定你做的是否優秀成功。通常這一塊的數據決定你驗證你前面所有的過程，只要按照該流程認真做了，最后效果通常不會太差，如果出現很大的偏差也往往是意料之外的，因該尋求團隊一起解決，不是某一個人的問題。

根據以上最后我們總結，好的設計就是滿足以下4個方面：好看，好用，好記，能實現。設計師要考慮的維度不僅僅在視覺層面，什么是有產品思維的設計師，就是在執行時候要考慮上下游不同職能的工作內容，如果你的設計不能實現，再好看也是白費功夫的～從產品交互視覺多層面談設計，會讓你的設計包裝顯得不那么單調，系統化的方法總結到此，不足之處多多包含～謝謝你的閱讀！

文章來源：優設  作者：YiVi_eleven 

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