的App類別是游戲，而健康&健身幾乎沒有進入前10。2020年雖是艱難的一年，但它提供了很多機會，可以為移動應用市場引入一種新的經濟回報和有意義的醫療解決方案，直接影響人們的健康行為、并幫助他們生活得更輕松、更愉悅。
為此，你需要一個功能強大的App，因為如果不能運行的話他就是無用的產品。但是這種強大的功能還需要通過設計來將它呈現出來。一個優秀的醫療App設計將醫藥類App最重要的細節呈現出來，并引導用戶使用，以及建議用戶接下來如何操作，最終完成必要操作。
一個App能憑借自身成為一個的客戶開發工具和公司的核心產品。對于與健康或醫學相關的產品，UI/UX設計更為重要。
呼吸監測應用程序-作者: George Frigo
在這篇對設計師和公司都有幫助的文章中，我們將探討一些醫療App設計中的最佳實踐是如何發揮作用的。
醫療類應用類型
值得注意的是，“醫療保健App”是一個多方面的概念，包含了大量與健康和醫學相關的數字產品。
這里有很多類型的醫療類App，包括：
醫療專業人員遠程病人會診的App（遠程醫療）
電子病歷App(EMR)
記錄和管理患者生命體征的App
提醒患者服藥、鍛煉等的App
醫療計算App
提供醫療信息參考的App
健身和運動類App
健康的生活方式和健康App（每日飲水量、睡眠管理等）
這似乎是一個過于寬泛的主題（例如，將卡路里計數器app與醫學教育解決方案相比較），但是也有一些通用設計經驗可以使得醫療健康類App更、讓人們有辦法得到他們想要的。
醫療應用程序作者: Victor Nikitin
如何為醫療健康打造移動應用
即使一個App不是企業的主要產品，它也有可能產生巨大的價值。例如，如果它是一個醫療辦公室的配套應用程序，它可以減輕員工的負擔，為客戶提供信息和服務。如果一個健康App是企業的主要產品，比如健身或冥想應用程序，那就比較危險了。有時候，健康App的缺陷是人們放棄使用這些App的原因。
為了避免這種情況，我們來看看醫療App設計中的一些最佳實踐技巧，以及它們如何幫助App聚焦、直觀和快速。
醫療保健: Anatoly
調研—成功的第一步
在設計原型應用程序界面之前，你需要知道誰是你的目標用戶，以及他們的地理環境、社會經濟背景和心理特征，畢竟沒有產品可以迎合每個人。用戶的興趣和能力決定了他們如何與軟件互動。所以解答以下問題將有所幫助：
誰是你的目標人群？
他們喜歡什么？
怎么樣的app他們每天都會使用？
使用目的？
通常，醫療健康軟件要么被患者使用，要么被醫生使用（如果我們將生活服務類軟件的用戶也計作患者的話）。這兩種用戶的需求在功能和UI設計上都有不同。因此，醫務人員通常需要快速獲得某些數據項：EHR/EMR（電子健康檔案/電子病歷），藥品規格標準，診斷和治療建議，參考資料等。然而患者需要的是盡可能精簡的、易于理解的信息項。因為這一群體中有相當一部分老年人或者有某種特殊障礙。
只有進行了恰當的用戶調研，得出了相應的結論，設計師才能繼續醫療健康軟件的真實有效的設計。
Chahua的健康管理軟件
細化明晰每個案例
醫學對普通人來講是復雜的學科，最好的方法反而是將醫療健康設計得相對簡單，以安撫用戶并讓他們保持專注。
“世人總將事物搞復雜，殊不知，簡單才是至理。” ——Richard Branson
想要給人留下深刻印象，將醫療UI設計得過于詳細是沒有意義的，最好的是界面和邏輯易于理解，即使軟件是專為醫務人員設計的（當然，不要居高臨下）。
醫療App/檔案和活躍度-作者: Igor savalev
設計醫療健康軟件的UI，提供有益的新用戶引導流程，使界面可直觀理解。否則，用戶會對糟糕的體驗失望，甚至等不到進入核心功能就會退出。
所有相關方，不管是醫生還是患者，都會喜歡清晰極簡的軟件，這樣，你就不需要讓用戶學習如何操作軟件，這對醫療機構來講是個解決辦法，他們已經習慣了這些事。
幫助用戶穩定發現功能，循序漸進地給予指導。以用戶引導流程開始，將app中每個動作劃分成可處理塊，一次提供一個操作說明。
使用恰當的顏色（更進一步）
利用被動輸入和自動補齊功能限制用戶必須輸入的信息的數量，調整鍵盤，動態驗證字段值。這篇文章里還有更多表單設計相關。
所有醫療信息都得由擁有一定學歷和專業知識的專家提供，否則，這些內容要么不完整，要么包含錯誤，這在醫療健康中是不容允許的。
醫務人員使用的醫療軟件-作者: yurig
功能的重要性（及特色）
醫療保健應用程序的特性和功能類型取決于它的用途和目標用戶。例如，醫療中心的應用程序需要一個賬戶，病人可以在那里查看他們的就診、推薦和預約記錄。如果沒有安全加密的視頻會議和通信功能，遠程醫療應用程序就毫無用處。
與其他一般APP不一樣的地方，“首頁”是醫療類的app的主要功能的位置。先來回答一個問題: 為什么有人使用您的應用程序(或類似的醫療類App) ，如果一個人訪問一個應用程序來記錄或接收一些信息，聯系醫生，檢查他們的進展等，這個功能都放在“首頁”上？
呼應前面的觀點，就是避免過多功能同時出現時的混亂。不可否認，這種情況在傳統的醫療類App中更為常見，這些應用程序有時候會分散注意力，不斷添加新的和新的功能，直到只有資深的用戶才能理解并熟練使用。
根據二八定律的法則告訴過你，80%的用戶傾向于使用不超過20%的功能。區分優先次序，決定哪些功能對用戶最重要。
醫藥應用App作者: Manoj Dalvadi
導航的研究和鑒賞
清晰的導航結構是醫療應用程序用戶界面設計的骨干必需組件。沒有它，這個App將會不再受歡迎。導航代表和易用，因此從用戶的角度來看是有價值的。一個醫療專業人士需要一個能輔助工具，因為他們已經有太多的時間花在處理EHR（電子健康記錄）上了，【類似國內的病歷本】。
經斯坦福醫學院進行的調查發現，醫生花在每個病人身上的時間中，有62%的時間花在EHR（電子健康記錄）上。如果設計的導航不夠，那么這個App就沒有任何使用價值。就算病人目前在使用導航的頻率很低，但他們也不會樂意看到混亂的導航而放棄二次使用的機會。
重要的導航信息應放在屏幕上顯眼的地方，并根據要求提供詳細信息。有一個“三次點擊規則”說系統的設計應該使任何信息都可以在三次轉換中使用。如果用戶在三次點擊之后找不到他們想要的東西，他們可能會感到沮喪，放棄他們原本要做的任務。
目前采用標準的應用程序導航有：
-漢堡菜單
-標簽欄
-導航抽屜
醫療應用-作者: Alex Samofalov
色彩的運用方法
一般來說，應用程序的顏色選擇取決于目標用戶和應用程序的主題來決定。
醫療保健應用程序的設計通常是在中性色調與流行的冷色調的藍色和綠色，白色為背景。在大多數情況下，設計師這樣做是為了達到某些效果: 利用舒緩柔和的顏色與醫療保健行業的共同聯系，緩解焦慮，增加可信度。所以你很少能看到明亮的紅色或黃色在醫療類App的界面。
藍色為主的醫療類App，作者Adam Sokoowski
然而，考慮到醫療軟件的通用性，在顏色的選擇方面沒有特別的限制。要考慮到的是，應用程序的整體外觀應該創造一個積極的印象，而不是引起擔憂，恐懼，或其他不良情緒的感覺。
例如，下面這個健身應用程序的深色調的設計看起來很漂亮，也不過時：
深色為主的醫療類App
健康與鍛煉應用程序-作者: Saepul Rohman
或者用明亮的顏色來增加一些活力：
移動健身應用-作者: Michal Parulski
追求個性
移動App的個性化設計是近年來最顯著的設計趨勢之一。某些功能需要適應特定的用戶模式。
這樣設計的目標是幫助用戶更地利用App解決他們的問題。這個系統提示了一個人接下來要指示的操作，否則這些可能會被忽略。要做到這一點，必須識別和分析用戶特征，并通過數據跟蹤用戶的行為變化。就像每個人都有自己不同的身體狀態一樣，他們也希望自己使用的App能根據他們的身體狀態提供相應的差異化體驗。即使不是醫療保健行業，也有33% 的客戶會因為個性化不足而放棄某款產品。
在醫療App設計中，個性化定制選項有很多: 顏色主題、通知、交互元素、使用 AI 創建個性化推薦等等。
最大化可訪問性設計
易訪問性設計對于每個App設計都很重要，特別是醫療App。
醫療App的用戶通常有不同程度的視力和聽力，年齡，身體和心理障礙。醫療App的功能設計需要讓不同的用戶在使用過程中都有比較好的用戶體驗?？紤]不同用戶的局限性，并幫助他們努力克服局限性帶來的負面影響非常重要。例如，暈動病患者不太喜歡過多動效。
這并不意味著在醫療App設計中只能有兩種顏色，所有的字號都必須非常大，但這確實意味對于醫療App，設計師會面臨更多挑戰。不過這是一個額外鍛煉機會，而不是負擔。從WC3的網頁內容無障礙指南開始，使用像這樣的色盲模擬器。
App無障礙設計的例子: 把主要元素放在拇指區，不要忘記選擇改變視圖為水平模式，字號需要更大，等等。
色盲模擬器-作者: keithar
積極態度的力量
醫學不僅復雜，而且通常讓人望而生畏。比較聰明的設計手法是讓你的應用看起來和醫學毫無關系。這樣可以消除人們對醫學壓力的刻板印象，讓用戶體驗更加愉悅。
比如在用戶使用的不同階段運用積極的文案、有趣的圖片、舒緩的顏色或其他元素。醫療App界面設計中的圖片和圖標需要能夠用戶調動積極、愉快的情緒，營造一種無痛感和安全感。
冠狀病毒APP-作者: Mahdieh Khalili
不要將App設計成網頁
在有醫療網站的情況下設計醫療App，老板甚至是設計師可能會將網頁頁面復制到App當中，這樣通常會導致用戶放棄使用App。
移動端和網頁端的交互存在一定的差異性。手機的物理尺寸比電腦屏幕小。在手機上，我們的任何交互都是通過手指來完成，所以不愿意輸入冗長的文案，同時期望產品運行得更快。
在大多數情況下，人們使用網站獲取信息，使用App完成工作。此外，App集成了手機的功能，比如加速器和攝像頭，使App的設計不同于網頁。
健康醫療應用-作者: Grace Saraswati
適得其反
保持吸引力與功能平衡都很重要。醫療保健應用程序必須不能分散用戶對其內容的注意力。仔細看看上面的要點，注意好分寸就行。
圖形元素、包括動效，應該始終履行他們的使命，即數據輸入，并說明微交互的用戶與系統，而不是僅僅只為了使一個應用程序看起來很炫酷。
不要過度使用漸變和陰影，只將用戶的注意力集中在主要文字信息上。只使用一種字體，你可以通過改變字體的大小和其他特征來改變它，比如斜體、粗體。
多使用簡單的配色可以獲得更清晰的品牌信息和導航。
健康與活動跟蹤互動-作者: Dibbendo Pranto
抄還是不抄？
你可能會在某個時候想，如果覺得抄這個方案有用的話？是不是應該拿一些成功的競爭對手的應用程序復制一份。
其實，照抄其他產品是不明智的行為，因為他們的設計可能很容易就不夠好。你最終可能正好抄了競爭對手的錯誤方案，從而阻礙未來應用程序市場運作。
另一方面，你肯定應該對其他應用程序進行分析，進行競爭對手的研究。一個應用程序應該與用戶以前使用其他應用程序的經驗相關。如果事實并非如此，而且你添加了太多的原創性，那么使用這個應用程序的用戶就會覺得很麻煩，用戶也不會容忍“一切都錯了”的設計。蘋果和谷歌都有人機界面指南和材質設計。
用戶把大部分時間花在其他事情上 ——Jacob’s Law
有必要根據你的品牌、服務和產品的具體情況進行設計。好比如一個健身APP與一醫療APP，兩者使用方向有很大的差異。所以說必須完全符合目標受眾的要求、細節，以及應用程序的主題情況進行針對性設計。
藥物提醒程序-作者: Martyna Zielińska
實用性測試
最后，要記住最重要的一點，每個設計師都可以認為這個決定是否合理。他們可能會對應用程序的架構和導航的一致性，深思熟慮的設計，以及最重要的實用價值深信不疑，以至于完全忘記了通過實踐進行測試，設計師可以提高他們的同理心水平，更好地感受客戶的需求。但事實上，這種陷阱會給應用程序帶來很多負面影響。
只有在分析了與用戶與應用程序界面交互相關的數據之后，才能得出結論。多進行一些測試將有助于及時地獲得反饋，解決應用程序中的所有可出現陷阱一樣的場景。
積極的用戶參與是成功的關鍵。在年齡、職業、地理位置、性別、文化和宗教背景等方面，選擇盡可能接近目標受眾的相關測試對象。越接近越好。讓他們執行你的應用程序的主要功能并收集反饋。
病歷本App應用-作者: Alex Samofalov
最后
設計不單單是討論顏色搭配和字體的運用，而是能夠帶來價值和解決業務問題。健康和醫療類App是一個敏感而富有挑戰性的課題，需要特別關注。設計師們一直在努力平衡醫療應用程序極高的安全性和可用性要求與其界面的美學性，經過深思熟慮體驗和用戶界面設計成就一個很好的醫療類工具，讓用戶在一個簡單和直觀的界面的幫助下參與使用。
文章來源：花火圓桌（ID：huahuoyuanzhuo） 作者：Kate Shokurova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“我們不設計頁面，我們設計構成元素的系統?！薄猄tephen Hay
原子設計理論并不是什么高大上的規則。
隨著網頁設計的持續發展，我們認識到開發設計系統（design system）的重要性，它最早就是為了讓網頁設計師更容易理解網頁的構成，后來才延伸到UI設計當中。
簡單來說，當公司的業務產品逐漸擴大時，我們需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。 開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。因此，原子設計理論的出現就是為了幫助我們去搭建設計系統，這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。
原子是所有事物的基本構成物質。每一個化學元素都具有不同的性質，并且它們一旦被分解就會失去其意義。
分子是由兩個或兩個以上的原子通過化學鍵結合在一起的。這些原子的組合具有自己獨特的性質，并且相較于原子來說，更具實際意義和可操作性。
有機體是由分子有機地組合在一起的。這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。
宇宙中的物質都可以被分解成為原子元素。
碰巧的是，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。
△Josh Duck的“HTML元素周期表”
接下來和大家細聊一下什么是原子設計；原子設計到底好在哪里；為什么要有設計系統；以及該如何利用原子理論創建自己的項目組件庫。
原子設計（Atomic Design）理念最早是由國外網頁設計師Brad Frost提出的，他從化學元素周期表中得到啟發，發現原子結合在一起，可以形成分子，進一步形成組織，從科學的角度來講，在宇宙中的所有事物都是由一組有序的原子組成。
Brad將這個概念應用到界面設計中，仔細觀察后我們不難發現，界面其實就是由一些基本的元素組成，文字，顏色和圖標等都是一個個原子。
通過原子設計，我們可以把界面看作是一個連貫的整體，同時也是一些元素的集合，每個元素都不盡相同，互相結合產生更多層次和結構，模塊之間相互統一。說到底，原子設計其實是一種設計方法論，它由原子、分子、組織、模塊和頁面共同協作，由此創作出統一和富有層次的設計系統。
簡單來說：原子結合在一起，形成分子，進一步結合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。
原子設計是一種方法，由五個不同的階段一起工作，以更慎重和更具層次的方式創建界面設計系統。從而創造出更有效的用戶界面系統的一種設計方法。
它的五個不同階段是：
原子(Atoms)：為頁面構成的基本元素，例如標簽、輸入框、文字、顏色等；
分子(Molecules)：由原子構成的簡單UI元素，例如按鈕；
組織(Organisms)：相對分子而言，較為復雜的構成物，由原子及分子所組成；
模板(Templates)：以頁面為基礎的架構，將以上元素進行排版；
頁面(Pages)：將實際內容（圖片、文章等）放置在特定模板內；
原子設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個階段哦～
原子
如果原子是物質的基礎組成部分，那么我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。
在團隊開始新項目時，為了保證各個頁面具有統一的設計風格，我們會制定一套簡易的視覺規范，在關鍵的設計元素上，各個設計師達成一致，這樣就能很大程度保證不同頁面的風格統一，并在這個基礎上去探索更有創新意義的設計方案。
在模式庫中，原子一目了然地展示了所有的基本樣式，當你回來繼續開發和維護你的設計系統時，這是一份很有用的設計參考指南。
分子
分子是原子組合建立的元素，兩個原子即可組成一個分子。
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。例如，搜索框里的文字和圖標共同打造一了個搜索表單分子。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和柵格。合并后，這些抽象的原子從毫無關聯到又一個共同的目的，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個尺寸和規范。
將單個元素組裝為簡單的功能組是我們一直以來構建用戶界面的方式，可幫助UI設計人員和開發人員堅持單一職責原則，這種方式簡單且復用性高，可以保證界面具有良好的可用性。
以界面設計中的表單為例，表單是一個非常常見的設計元素，一個表單分子是由文字、圖標和線條原子組成。這些原子合并后，得到的是一個可以應用在任何信息展示或者功能入口的組合。
組織
組織是由分子或原子或其它有機體組成的相對復雜的UI部分 。這些組織組成了界面的不同部分。
通過結合分子和原子，我們可以構建更復雜和可擴展性的模塊，這個稱之為組織，其實也可以稱之為組件，這些組件組成了界面的不同部分。同樣以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。從建立分子到建立更精細的組件，這為設計師和開發人員提供了重要的內容構建思路。
組件在解放設計師生產力方面有著重要的作用，我們可以把界面中常見的組件進行分類整理，如搜索、表單、圖片和卡片等，這些常用組件基本能滿足日常的設計需求。以Aribnb為例，他們主要分為3類：卡片、表單和內容。每個標簽內容的設計形式盡量都保持統一，因此負責不同內容模塊的設計師只要選擇同一個組件就能完成頁面的設計。在短時間內就可以完成頁面超多的復雜項目，極大的提升了團隊的設計效率。
在網頁端最典型的例子就是網站導航，搜索表單，我們幾乎訪問的每個網站都會看到這些類型的組件。
模板
原子，分子和組織的這種語言有助于我們有意識地構造設計系統的組件。但是，最終我們必須采用一個更適合描述我們最終產出的語言，這樣才好匯報給老板、客戶和同事，簡單來說就是說人話。
模版的本質就是線框圖，在這一步我們基本可以看到一個產品的形態。我們可以不斷調整組件和分子組合在一起的效果來嘗試不同的方案，找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內容結構布局，而不是頁面的最終內容，此時模版內容是隨時可以調整的，嘗試不同的方案，在多個模版中進行對比，在這個階段改動和溝通保證了成本。因此，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。
模板是頁面級別的對象，它將組件放置在布局中，并顯示設計的底層內容結構。在設計一個有效的設計系統時，必須在布局的環境中展示組件的外觀和功能，以證明這些部件組成了一個功能良好的整體。
模板的另一個重要特征是它們專注于頁面的底層內容結構，而不是頁面的最終內容。設計系統必須考慮內容的動態性質，因此，把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。
頁面
頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，將占位符替換為有代表性的真是內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的視覺方案。
頁面階段是原子設計中最具體的階段，由于一些眾所周知的原因這個階段非常重要。別忘了，這可是用戶在訪問你的界面時會實際看到和交互的內容。
除了演示用戶所看到的最終界面之外， 頁面對于測試底層設計系統的有效性是必不可少的 。在頁面階段，我們可以看到當將真實內容應用于設計系統時，所有這些模式如何運作。所有的一切看起來都很棒嗎？如果答案是否定的，那么我們可以回過頭去修改我們的分子、生物體和模板，以更好地滿足我們內容的需求。
頁面還提供了一個表達模板變量的地方，這對建立強大而可靠的設計系統至關重要。以下是模板變量的幾個例子：
用戶在其購物車中有一個商品，另一個用戶在其購物車中有十個商品。
網頁APP的儀表板通常顯示最近的活動，但是該部分對于首次使用的用戶是禁用的。
一篇文章標題可能是40個字符長，而另一篇文章標題可能是100個字符長
在所有這些例子中，底層的模板是相同的，但用戶界面將會隨著內容的動態性質而改變。這些變化直接影響了底層分子，有機體和模板的構建方式。因此，創建解釋這些變量的頁面有助于我們建立更具彈性的設計系統。
這就是原子設計！這五個不同的階段同時協同工作，以產生有效的用戶界面設計系統。
原子是最基礎的UI元素，并且是可以用作界面的元素構建塊；
分子是用于形成相對簡單的UI組件的原子集合；
組織是形成界面各個部分的相對復雜的部件；
模板將組件放置在布局中，并演示設計的底層內容結構；
頁面將真實內容應用于模板，設計出視覺稿，并最終成為開發落地的依據；
原子設計為制作設計系統提供了清晰的方法?？蛻艉蛨F隊成員通過實際的設計流程與步驟，能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來，因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。
通過模塊化的設計系統調動組件，可以使我們開發新的產品時，從開始就可以對產品進行嚴格的把控與一定程度上的控制，進而規避了事后風險。開發之前不確定好系統模塊化，毫無邏輯的去開發，開發到一半發現功能與需求對不上等問題逐漸產生，會導致產品的延期、人員成本的浪費、資金成本的增加，產品的迭代率的下降、進而影響市場先機與市場占有率。
原子化設計與原來的樣式庫設計思路不一樣，原子化設計從抽象到具象，從元素到組件，讓設計師從底層開始思考，對整個設計會有更清晰的理解。同時也能讓設計更加統一，在新增組件的時候更謹慎。
原子設計的原理可以保證任何一個設計組件的構成與開發構建組件一一對應。同時應用原子設計的設計軟件（e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通，并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。
原子設計為我們提供了一些關鍵的見解，幫助我們創建更有效、更深思熟慮的UI設計系統。
那么、
如果產品規模小只需要1，2個設計師，大概率是前期不需要大費周章搞一個需要開發配合的設計系統?？梢灾焕肧ketch或者Figma做一個像貼紙一樣的設計組件庫。但是功能多了怎么辦，公司來新人了，當新設計師產出后就會發現與原設計師設計的風格不一樣，慢慢發現整體設計風格不統一了，只靠一個簡單的組件庫很難能滿足新功能需求，新功能貼紙上沒有設計或者設計需要變通，又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。
這時候就會需要一個設計師領頭去重新整理設計系統，走查發現同一個正文所用的十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現有上線產品對比整理好后一并交給開發，開發再一一整理代碼庫。
設計系統（Design Systems）對于很多年輕設計師可能十個新名詞，但是設計規范和組件等我們應該還是有一定認知的。在設計的過程中，我們會被其影響。在我們日常所使用的App產品中，如Apple、Google、Airbnb、Uber、滴滴等，他們的產品體驗非常流暢，用戶使用產品時能夠地滿足需求，在其良好的體驗背后都有著一套強大的設計系統做支撐。
為什么需要設計系統
1、團隊協作，體驗一致。以滴滴為例，雖然只是一個簡單的打車應用，但是其旗下的業務卻很多，快出、出租車、順風車等，每個業務都由不同的團隊和設計師負責?？梢韵胂笕绻麤]有設計系統，任由各模塊設計師自由發揮，風格各異，出來的結果可想而知。而有了設計系統的幫助，就會感覺界面風格非常統一，感覺是出自同一個設計師之手，可見其設計系統的功勞不小。
2、系統的管理多樣性。在設計過程中，我們會發現過程中，我們會發現每個業務的形態都是基于不同的場景，因為場景的多樣性，在表現上就會催生出不同的樣式。如果每個業務都用一種樣式表達，久而久之當業務增長過快時，我們現有的設計模式就會難以滿足。Airbnb的設計方式就是非常值得參考的一個案例，從最開始是提供民宿，到后來新增的餐館服務，你會發現房源和餐館都用了同一套圖文信息結構，只是在內容的細節上有一些不同。這樣可以降低設計的難度。設計師不用為每個場景思考一個設計模式而煩惱。同時，用戶在瀏覽不同場景的內同時，在相互切換中也不會產生為違和感，一切都是很自然的操作。
3、幫助產品成長，避免一次性設計。互聯網產品的成長模式是一種漸進式迭代，在產品初期的主要訴求是快速上線，等到產品上線獲取一定的用戶，證明它可以活下去時再逐步完善，增加更多的功能。每一次的迭代都是站在我們之前的思考之上，每一次的優化都會讓我們的設計更進一步，這是我們期望達到的結果。
以Uber為例，新版本繼承了黑色按鈕的設計，并和地圖進行了結合，地圖的配色和舊版本相比也變得生動了，這種改變并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同，在視覺上更為和諧。
效率（Efficiency）：由于建立了組件庫，一旦要更改某一個元素，可以馬上施行、應用。
跨部門的共通語言（Collaboration）：不僅方便設計師思考頁面的和諧性，也可以讓工程師、測試檢驗清楚頁面的邏輯架構及變化，減少不必要的來回溝通
在此，順便淺談下設計系統。
通常，設計系統包含的內容由設計原則、設計語言和組件庫，這是一個整體的概念。
設計原則
設計原則是一個產品的核心設計理念，設計的本質就是解決問題，在制定設計原則時要建立在這個中心思想之上。這些問題也許是一個業務形態，例如打車的場景，也許是一個設計形式，如表單。設計形式又很多，我們應該如何選擇呢？相對合理的方法就是建立一個規則，所有的問題和形式都想這個規則靠攏，減少不確定性，這就是設計原則的出發點。因此我們可以理解為，設計原則就是一系列的規則，是我們設計過程中要遵循的中心思想。
例如：蘋果把審美作為第一要素存在于設計原則中，它的產品往往也是品味的代名詞，看看它的設計原則就知道了：
審美的完整性
一致性
直接操作
即使的反饋
隱喻
用戶可控
△ 官網：https://developer.apple.com/design/
再來看看Material Design，Google對其定義是一個完整統一的系統，結合了理論、資源和工具的數字體驗產品，相比而言它的設計原則就是更加獨特，這是它的設計原則：
材料是一種隱喻
大膽/圖形/強調/
運動賦予意義
靈活的基礎
跨平臺
△ 官網：https://material.io/design
由此可以看出，和iOS相比，Material Design的設計原則更加的抽象，因為他擁有一個獨特的設計世界觀，用還原的方法和物理方法呈現出它的本質，通過抽象的視覺卡片傳遞出設計的目的和原則。
設計語言
在建立設計原則后，下一步就是制定一套設計語言規范，設計規范是設計系統的表現層，面向的對象是團隊設計師和開發者，他能幫助設計師的設計輸出保持風格統一。同樣也能幫助開發者高度還原設計。非常有利于設計師和開發者的協作。這套規范包含的有：字體、顏色、圖標和柵格。
組件化設計
組件化設計主要作用有兩點，一是保證多人協作效率，組件化設計可以快速完成一個簡單頁面的設計，提升設計效率；二是保持產品體驗的統一性。同時，組件化設計環節在設計系統中是一個相對重要的工作，需要有一個全局觀，要有較強的設計水平和溝通協作能力，這樣，組件化的落地才會得到很好的推進。
在多屏時代，我們時時刻刻都在設計產品界面，需適配多系統，其中很重要的一點是如何在多系統之間保持體驗一致性，很多人想到的就是規范，要想做一套嚴謹邏輯好，靈活的設計規范，那么原子設計可以幫助我們來很好的實現它，它在構建設計系統中算是比較科學的一種方法，國外很多設計團隊都在使用這樣的設計方法。比如以下這幾個團隊：
1、Airbnb
Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新React Sketch app 管理設計系統， 這是為Airbnb的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢sketch數據、代碼，也可以下載圖標、設計模塊，所有工程師、設計師都可以免費下載。
△ 官網：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的組件和先進技術，并結合 Sketch 構建了強大的 Web 設計系統，同樣能滿足修改原子，全局同步更新的功能，支持響應式布局。提供了近百個網頁模板，可以非常迅速地完成效果圖制作。
△ 官網：http://framesforsketch.com
3、Nested Symbols
這是一套免費的設計系統，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號，方便自定義和編輯。
△ 官網：https://www.janlosert.com/
原子設計理論最大的價值，就是為設計體系/組件庫的構建提供思路和方法，如果你不滿足于市場上現有的設計系統，我們還可以自己創建。因此我們首先要為產品設計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展，必須能在所有地方奏效！
接下來就以 Sketch Library 功能來實現組件庫的創建。
第一步：定義顏色（color）
將顏色添加 Main、Text、Status 等一級分類，例如：Color/Status；再添加二級分類，例如：Color/Status/Success 等，命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后，將每個顏色轉換成 Symbol，便可統一調用。
第二步：定義字體（font）
根據設計規范，將不同字號的文字樣式羅列出來，例如：Title 1、Body、Body2 等，按照「樣式名稱/顏色/對齊方式」的層級結構，將文字賦予 Text Style，整理出所有的字體樣式。
第三步：定義圖標（icon）
將圖標放置在 24*24px 大小畫板內，從定義好的顏色系統中選擇合適的 Symbol，這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸（size）大小，并把調整尺寸（Resizing） 設為上下左右同時吸附，以確保圖標在使用時可以等比縮放。
第四步：加入其他元素（Elements）
根據以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，例如：按鈕、表單、空狀態等，整個過程都是通過 Symbol 的不斷嵌套，最終實現組件庫的創建。
第五步：加入組件庫
使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」（組件庫）標簽，點擊「Add Library」（添加組件庫）按鈕添加剛才的 Sketch 文件，完成后就可以從其他的 Sketch 文件中，對此庫里的元素進行調用了。
寫在最后，原子設計是一套具有科學嚴謹的創建設計系統的方法論，是一個構建UI系統的心理模型。
原子設計使我們可以將我們的界面UI細分為原子元素，并通過這些元素組合在一起形成最終的界面。
原子作為整個理論最基礎的元素，當我們改變其中的原子時，整個體系都會發生變化。原子的設計概念和sketch中的“符號”有異曲同工之妙，當我們改變其中一個元素時，其他所有包含這個元素的頁面都會發生變化，可以保證整個系統的一致性和層次感。原子設計為界面元素提供了應用規則和組織原理，這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。
經常有同學問ios設計規范，安卓設計規范在哪看這類問題，最后，來推薦一些大平臺的設計網站，上文出現過的下面就不重復了。我們耳熟能詳的優秀設計都是來自于這些世界互聯網公司，說真的，審美這東西還真是人家說了算～
反正看看又不要錢，都去康康唄～
Google Design
谷歌設計中心，它非常全面的展示了谷歌的設計工作和概念。包括Material Design在內的所有關于設計、體驗、產品等互聯網領域的探索。
△ 網址：https://design.google/
Fluent Design
微軟基于Windows10的設計語言，包括人機界面布局、控件、樣式及資源下載。
△ 網址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM設計語言是偉大設計的代名詞，他將人們的需求轉化成精心打造的產品。在這里可以學習IBM設計團隊一用戶為中心設計的新思維方式。
△ 網址：https://www.ibm.com/design/
Facebook Design
臉書設計官網，在國內，我們常?？吹侥槙脑O計文章被翻成中文為中國設計師所學習
△ 網址：https://facebook.design/
Uber Design
作為全球第一家即時打車應用，優步其超前的設計理念和優秀的用戶體驗成為同類產品競相模仿的對象。
△ 網址：https://www.uber.deign.com/
Ant Design
螞蟻金服設計平臺是阿里旗下子公司，基于螞蟻金服生態系統的跨設計與開發的體驗解決方案。
△ 網址：https://design.alipay.com/
參考資料
《原子設計》官網
Airbnb 設計規范
Apple 設計規范
Material Design設計規范
Google及其他
文章來源：tob.design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本篇文章將分享Web端表單體驗優化等相關內容，分析設計師在設計B端類產品時如何讓用戶愉悅并的填寫表單。
表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。在用戶界面中表單無處不在，比如：用戶注冊登陸頁、支付頁、用戶反饋、共享信息數據錄入等不同類型的表單。當我們使用/設計表單頁面時看似是按鈕、輸入框等表單組件進行組合搭配使用，看似簡單，但是在實際業務使用中卻有著無數可推敲的細節冒出來，常常給設計師造成較多的困擾。
那么在實際工作中哪些內容會給設計造成困擾呢？舉幾個例子：在實際的業務中很多產品因為業務導向需要入海（非中國區方向），所以就存在表單標簽對齊方式問題，如果右對齊可能在中文的情況下表單標簽預設寬度正好合適，但是當用戶切換到多語言時因為語言差異會導致折行嚴重等一些列問題，相當影響體驗；設計師常常疑惑表單標簽是頂部對齊、右對齊還是左對齊，他們的差異點在哪呢？必填與非必填項以什么形式告訴用戶會更加合理呢？表單按鈕放在頁面哪個位置體驗會更佳呢？
所以我們不能忽視這些設計細節，往往一些好的設計細節提升總會給用戶帶來不一樣的用戶體驗。針對以上這些舉重若輕的問題我們一一明確、拋出并與大家一起來進行由淺至深的探討「如何提升表單體驗」。
重點概覽
一、表單分析
二、體驗與優化
三、排列與布局
四、寫在最后
表單分析
1.1 表單的重要性
在上面的前言中也提到了表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。并且在《Web Form Design》一書中 Luke Wroblewsk 也提到了“表單決定了最關鍵的界面中交互的成敗”，當用戶使用網站時會有一個特定目標，如果設計得好，網站將實現有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環境下所達到的特定目標，也是設計師想要達成的最終目標。表單往往是目標用戶和整個產品的一所橋梁。因為，盡管人機交互的發展進步，表單仍然是用戶在網絡中進行交互的主要方式。所以表單是被認為完成目標的最終，也是最重要的階段。
我們以淘寶來舉個典型的例子，淘寶屬于國民電商平臺也是亞洲較大的網上交易平臺，提供各類優質商品。從平臺的特性來講，它以用戶下單并成交作為最終目標。其中支付表單起著一個關鍵的作用，用戶從購買到支付完成以分步形式進行，第一步填寫基本信息并提交訂單，第二步選擇商品并選擇支付貨款至第三方，第三步買方確認收貨并自動打款給商家，第四步完成訂單并評價。在填寫表單時中間沒任何阻斷，用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。
1.2 拆分表單
我們簡單提一下表單組成（網上有很多詳細的相關文章），一個完整較復雜的表單是由7個基本組成部分，表單類別、表單標簽、表單基本組件、占位提示、幫助信息、按鈕、校驗。表單可以包含以上組成部分，但不是一定都要有，比如：移動端填寫驗證碼時為了減少用戶操作，當用戶填寫完成之后直接提交表單驗證。
表單類別：第一時間告訴用戶此段落的表單大致內容，減少用戶理解并承擔著概括內容的作用；
表單組件：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等十幾種類型，是形成表單的核心內容；
表單標簽：表單標簽承擔著對輸入項或設置項的解釋作用，所以表單標簽需要合理設置，核心點是幫助用戶快速理解每一項字段的作用；
占位提示：使用通用的認知提示并且以較弱的方式呈現給用戶，用戶填完信息即消失。注意：占位提示不能替代標簽，因為消失的占位提示會拉長用戶的短期記憶，如果沒有表單標簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會詳細分析。
幫助信息：當表單標簽不足以對輸入項準確說明時，這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達到的目的。
按鈕：當用戶完成信息錄入時，按鈕能夠對表單內容進行校驗或提交。
校驗：對用戶信息錄入內容進行校驗并給出對應的錯誤提示。如：內容是否為空、類型格式是否正確、是否符合業務邏輯等等。校驗時有兩種規則，分別是使用即時校驗（失焦即校驗）和點擊提交按鈕以后的最終校驗。狀態分別為錯誤、警示、成功。
1.3 表單類型
基礎表單
較為簡單的一類表單，把所有表單字段平鋪在頁面中，字段內容較少。當用戶輸入少量信息即可完成一個簡單快速的任務。例如：此類型表單常常用在簡單的登錄注冊中。
分步表單
較為復雜的一類表單，把一個相對復雜的表單字段拆解為多個步驟進行。根據業務屬性進行步驟分組利用步驟條告訴用戶所完成的流程和進度，當用戶每次填寫都意味著一次節點完成，整個流程結束給予明確的結果反饋，并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復雜的造成的填寫負擔，并且能減少用戶表單填寫出錯率。
分組表單
將一個復雜表單拆解歸類分組。分組表單與分布表單特點較為相似，都可以減輕用戶因為表單大而復雜的造成填寫的負擔，并且能減少用戶表單填寫出錯率
體驗與優化
1.1 必填項or可選項
在設計表單時大多數設計師都習慣性的使用星號表示必填字段。但那么問題來了，針對必填項和可選項用那種形式才是最科學的呢？我們簡單分析一下。
當表單中的必填信息多于非必填信息時，如果使用紅色星號表示必填項，那么大量紅色星號導致增加用戶的認知負擔，使得用戶無法快速識別哪些是必須填寫的，哪些是不必須填寫。并且使用紅色星號會帶給用戶一些恐懼感，它增加了出錯的風險并降低了表單填寫率。因此在表單設計中，當必填項多于非必填項時，隱藏紅色星號標記，通過暗提示標記可選項的形式來幫助用戶識別。
紅色星號對于不同用戶也會存在不同的認知差異。對比較有經驗的用戶可能表意較為明顯，但不代表所有用戶都能理解，比如一些非中國區用戶使用國際化產品時存在不同認知，因為每個國家本地化差異較大導致認知差異。
還有一點是表單中視覺噪聲越少可讀性越強，因此當必填項多于非必填用非必填字段提示用戶會更好。
1.2 單列布局or多列布局
多列表單字段會導致用戶視覺路徑變長，因為如果表單中有水平相鄰的字段，則用戶必須以Z樣式進行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段，將數據輸入到錯誤字段中。而最終校驗信息時用戶得反復檢查錯誤項導致用戶放棄填寫。
如果表單使用單列，則完成的路徑是頁面垂直向下的一條直線，單列布局能夠給用戶呈現一條清晰的視覺路。因此，表單較為簡單時盡量避免將表單分成多列，在業務場景允許的情況盡量使用單列（部分業務訴求和一些特定場景要求，多列布局會更節省垂直空間，但是多列布局需要考慮字段之間的關聯性，這里不強求一定只能使用單列布局）。
1.3 將復雜的表單分為幾個簡單的步驟
在設計師設計表單時可能業務場景復雜、字段較多，即使設計師把很多不必要的字段都刪除也解決不了根本問題。所以，這時候設計師需要將大型任務分解為一系列較小的任務，使得表單更加的簡潔。這種方式的好處是能將步驟以視覺的方式傳達給用戶數量、名稱、說明等信息，更加提高用戶滿意度并且能激勵繼續填寫。
但是設計師需要注意的是不要太過于細化步驟以及在小型彈出窗出現過多的步驟，過多的步驟不利與用戶填寫和記憶，反而增加用戶負擔。
1.4 按鈕的位置
按鈕放在頁面左下角比較好還是放右下角比較好？這是設計師在設計表單時常常糾結的一個問題。其實在14世紀西方活字印刷術的發明人約翰·古騰堡提出一個概念古騰堡法則（Gutenberg Diagram），又稱對角線平衡法則。它指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進行掃描。左上角是第一視覺落點區（主視區），而右下角是最終視覺落點區（終點區）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下，從左到右。
所以，界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則，設計師應該把界面的關鍵元素放在主視區，終點區可以放按鈕、強提示，盲點區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
同理，表單中會出現組合按鈕，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
如下圖是一個彈窗類型的表單，如果根據業務訴求確認操作重要程度強于取消操作，那么確認按鈕應該放在取消按鈕的右邊。因為確認按鈕放在右側(終點區) 用戶關注度會更強。
1.5 占位提示避免代替表單標簽
常規的占位提示作用是使用通用的認知提示并且以較弱的方式呈現給用戶，當在字段中填入內容這些提示通常會消失。
設計師常常遇到表單字段較多并且頁面空間有限的情況，為了減少橫向節省空間設計師常常的做法是將表單標簽刪除，使用占位提示文本作為信息提示。但是設計師必須有意識知道到這種方式適合使用在較為簡單的表單中，比如：表格中點擊修改名稱操作，彈出氣泡并且氣泡中只存在一個字段。或者是在用戶非常熟知的登錄注冊等較為簡單的表單填寫時使用。但是當用戶需要填寫大量字段信息時不建議使用占位提示代替表單標簽的方式。原因有兩點：1. 當用戶選中文本框填寫時，占位內容即消失，這時候用戶無法檢查并確認其所寫的內容是否符合預期。2. 當用戶看到文本框中已經回填內容了，誤認為占位提示是默認回顯內容，造成內容已經填完不需要再操作的錯覺。
針對上面問題也不是沒有解決方案，在Material Design中有提供針對上面的問題的解決方案，我們這邊暫時稱其為“浮動標簽”，默認情況下輸入框內顯示占位文本，當用戶輸入內容以后占位文本浮動到內容上方與內容左對齊。
1.6 校驗反饋及時并準確
設計師通常認為用戶在填寫表單時能夠很順利的完成表單錄入，但事實相反。在實際的使用場景中，特別是在一些業務較為復雜的表單中用戶極易發生錯誤，這時候需要需要明確的校驗信息、準確的校驗時機、輸入的限制提示。
錯誤提示校驗
錯誤校驗提示一般存在于錯誤率較高情況下出現，如：在登錄注冊時，要求用戶填寫手機號，如果用戶輸入的手機號碼不符合特定的輸入格式，那么這時候需要明確標記錯誤原因，準確的幫助用戶找到問題并解決，避免錯誤提示描述模糊不清誤導用戶。錯誤提示一般會采用“雙重視覺強調”來顯示錯誤，除了輸入框突出顯示外，同時需要在輸入框下方加入紅色指導文字。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
限制與格式提示
在表單中如果出現特定格式時務必要提前告知用戶?？梢栽谳斎肟蛑酗@示概括回答的方式引導用戶，如：請輸入日期，eg：mm/dd/yy。這樣便于幫助用戶提前感知，減少表單填寫錯誤率。
校驗時機
為了避免用戶在提交時表單時出現大面積的報錯問題，設計師可以使用實時校驗的交互形式。如：在用戶輸入完成之后鼠標失焦后進行信息校驗，但是需要注意的是在實時校驗時避免用戶還沒有輸入完成即出現校驗誤導用戶，所以需要準確判斷鼠標是否失焦。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
1.7 字段長度與輸入預期成正比
在實際業務中，設計師常常習慣把每個表單字段都設置成相同的寬度，在視覺效果上看感覺會比較統一，但是這種做法實際上體驗欠佳。字段的寬度應該向用戶暗示所需輸入內容的長度從而減輕判斷負擔。在Ant Design 4.0 系列分享的文章《整齊劃一？不如錯落有致》中分析到錯落有致的排版表現似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體。但左圖過度的對齊導致暗示隱性的截斷，我們慣性視覺會產生表單字段右側空間缺了一大塊的錯覺。
文章總結到“表單寬度的處理方式核心旨在解決兩個問題：1. 暗示填寫內容長度；2. 表單項布局排列效果，我們通過設置合理的默認寬度尺寸和描述關系，就可以讓設計師們跳過部分繁瑣磨人的細節思考，快速搭建表單寬度合理且舒適的頁面。”如下圖所示：
排列與布局
1.1 定寬or自適應？
表單做定寬還是做自適應？哪個“更好”的這個問題時常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好，它根據內容自適應即可，但是當遇到Select、DataPicker、Cascader等類型時就會開始糾結這個問題。在實際的業務中不論是做理想中的定寬還是自適應，很多情況下瀏覽器窗口大小不一可能導致在一些極限情況下都會產生不盡人意的情況。腦補一下，比如：在筆記本的小屏幕下左對齊并定寬效果還不錯，但是當你把頁面呈現在較大顯示器下，這時候頁面右側又會呈現出大面積的空白。參考AntDesign提供的典型頁面以下三種樣式是都會造成不同的反面效果。
所以在實際業務場景中如果沒有明確自適應和特定自定義寬度的需求時可以通過以下幾種方式處理。
將關聯性強的字段分組
如果頁面橫向寬度足夠大時，可以將一個區域中字段較多、并具有關聯性字段進行分組，這樣不僅有利于空間布局上的利用，還可以通過字段之間關聯性暗提示幫助用戶更好理解。格式塔心理學中有多種分組原則，可以使字段之間具有相關性：接近度，相似度，連續性，閉合性和連通性。將非結構化字段分組為幾個機構化的集合提高表單的可用性。
設置字段寬度梯度
可以給字段設置幾檔寬度梯度的尺寸，我們可以站在AntDesign這個巨人的肩膀汲取一些相關經驗，其中4.0系列分享的文章中總結到其經過對十幾個業務線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據原理，我們可以假設原子寬度XS為100，那么通過尺寸的倍數+間距的方式來計算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計算方式也是用來解決視覺對齊規則，如下圖所示：
1.2 表單標簽頂部對齊or右對齊or左對齊
在設計表單時到底是左對齊、右對齊還是頂部對齊呢？這個問題也是在實際業務中設計師發問頻率較高的一個棘手問題。其實，不論是哪種方式都有相對的利弊，需要根據實際業務場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究，下圖是Matteo Penzo研究總結得到的瀏覽時間表：
表單字段頂部對齊
將表單標簽放置在其對應輸入字段的正上方，并垂直左對齊排列，用戶只需依次向下瀏覽即可看到標簽與輸入字段兩個元素。其優勢是橫向屏幕空間足夠，能夠比較友好的適配多語言適合非中國區業務表單使用。并且根據上面Matteo Penzo的時間表上看，頂部對齊的瀏覽和填寫的效率也是3種常規的對齊方式中較高的一種。不足點是會占用較多的縱向垂直屏幕空間，此外應當注意每組表單標簽和輸入字段與其他字段組的間距，以免層級區分度不夠的問題。
表單字段右對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽右對齊。其優點減少了占用屏幕的高度，并且表單標簽與輸入字段關系較近，所以用戶在填寫表單時效率較高。不足點是由于表單標簽的字數不可控（特別是針對非中國區業務時，多語言切換可能會出現超長的文案，甚至出現折行的情況），可能會造成左側參差不齊的問題，導致可讀性不高用戶在查看表單時比較費勁，并且不太適合非中國區業務。
表單字段左對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽左對齊。表單標簽和輸入字段距離較遠，用戶從左至右瀏覽時間變長，并且根據上面Matteo Penzo的時間表上看，左對齊的瀏覽和填寫的效率是3種常規的對齊方式中最慢的一種。但是，如果業務需要用戶對表單放慢速度并謹慎填寫（復雜表單或者表單中含有大量高級設置的陌生數據時），左對齊的方式會減少部分用戶的出錯率。但不太適合非中國區業務。
1.3 表單布局類型
常規布局（簡單）
在實際業務中當表單字段較為簡單時可使用，表單字段至上而下單列排列布局，用戶只需縱向閱讀填寫，填寫完成率較高。
多列布局（較復雜）
垂直空間有限并且表單含有較多填寫字段的復雜表單時，可將具有相關聯字段放在一個卡片區域中進行歸類，將多個字段組合在一行，形成多列排布的暗提示幫助用戶更好理解。
區域分組布局（復雜）
表單含有較多填寫字段的復雜表單，可將具有相關聯字段進行分類并以標題區分的形式進行字段分組，并且表單字段都在一個卡片區域內。
卡片分組布局（高復雜）
卡片分組布局一般用來處理高復雜類型表單。當業務中希望頁面承載眾多表單字段時，可將信息相關性弱的字段拆分為多個部分，并通過多個卡片分組承載不同類型字段，每個卡片都需有個卡片類別標題。
寫在最后
本篇文章從分析表單在產品中為何如此的重要，總結了在日常工作中設計師常常遇到的表單類型和布局，設計師可通過文章中的建議和案例進而合理的選擇并靈活應用。以及在實際的業務應用場景中設計師如何規避和注意一些設計細節進而提升表單的體驗。文章通過一些案例進行分析，希望大家能夠通過此篇文章更多的是受到啟發（而不是限制），能夠在日常工作中靈活應用并舉一反三。這里需要強調的是作為產品設計師不論是表單設計還是全局的頁面設計，都需要有理解業務本質的能力和全局的業務思考能力，不然常常會被稱之為“喂，那個畫圖的設計”。
文章來源：tob.design