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