在做交互設計或者視覺設計時要遵循一些既有的原則，其中非常重要的一條就是【格式塔定律】
一、什么是格式塔原理？
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域。“形狀”和“圖形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經驗和印象，加起來才是我們對一朵花的感知。
格式塔心理學家認為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據某些規則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。
二、什么是格式塔原理？
使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如，在Ant Design的標題區域中，“ 搜索”功能與站點的主要導航位于同一行。但是，主導航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標題與下面滾動的頁面內容區分開。此外，大頁腳的單一統一背景色 可有效地表示該區域中的所有鏈接都屬于一個組。
創建清晰的邊界是一種強大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時，它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分，那么我們可以用線框畫出邊界來達到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設計時的原理，比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細細體會這個相似性原理就會給我們答案，讓我們在畫設計稿時能夠有理有據。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應用共享的顏色來表示某些項目是相關的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達它們確實相關。
在用戶界面設計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內容，鏈接顏色應僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關的，并且以相同的方式工作。因此，鏈接顏色不應用于關鍵字，不可點擊的標題或實際上不可點擊的附近圖標。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區域很遠，并且根據Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。
例如，在產品列表頁面中，每個單獨的產品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時，就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統首頁的改版：
根據上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結構和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區分不夠清晰：因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產生聯想，同時這兩個模塊之間只靠間距來區分，區分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯系太弱：因為面試卡片用了非常強的邊界區分的線條（接近性原理-構建清晰的結構）確實在面試模塊之間構建了清晰的結構，與此同時卡片與頭部的日期之間看起來沒有什么關聯。
3.首頁的選中效果太弱，分析這個頁面的層級，左側首頁選中才應該是最重的，能讓用戶第一眼就知道在系統中的位置，很顯然目前來看很容易忽視首頁這個位置，關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。
根據格式塔原理中的相似性原理和接近性原理，對頁面的結構進行了調整，就看起來清晰多了。
所以，我們在制作完設計稿后，可以應用格式塔原理，分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續的形式而不是離散的碎片。
連續理解起來是很簡單的，但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。
視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實現統一整體，這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考，就是不閉合時候也會實現統一的整體，更確切的說，這種現象是一種不完全的關閉。這些圖形與設計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復雜的場景來降低復雜度。
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。這個原理經常會在海報設計中應用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。
文章來源：站酷 作者：ZZiUP
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為人類，我們無法總是理性地看到事物的本質。社會心理學告知我們，人類的感知與決策，在一定程度上，會帶有偏差。而作為設計師，我們可以主動利用這些偏差，設計更好的產品。
本文介紹了三條曲線，它們都將認知偏差做了可視化的表達，前兩個來自日常收集整理，后面一個由筆者總結工作經驗得出，下面開始吧。
1984 年，經濟學家 Mazur 提出模型：我們的大腦難以處理冗長的信息，因為不確定性隨著信息的增加而增加。隨著時間推移，我們對收益的感知下降。
決策中，我們傾向于把長期的權重調低：無論是收益還是成本，只要時間夠長，我們都傾向認為它不夠重要。
舉例來看：各大銀行如何吸引潛在用戶辦理信用卡？可以承諾在后期，提供專業的優質服務與購物優惠，也可以信用卡辦理完成的當下，讓用戶領取諸如行李箱、廚具套裝之類的禮品。雖然兩種方式都有可能吸引來用戶，但原本辦卡意愿相對低的用戶，大部分是被當下的禮品所吸引。換言之，這部分用戶是「額外的」。
各大互聯網產品都深諳此道，比如購買會員的頁面，首月打折/首月免費/一年后付費都是慣用的手法，就在當下，給用戶利益，促進轉化。
技巧總結：比起稍后的利益，我們更傾向當下給用戶一些甜頭，哪怕甜頭很小。
峰終定律由諾貝爾獎得主 DanielKahneman 提出：人們對于一段體驗的評價，取決于這段時間內最好的體驗，與結尾的體驗。我們的大腦最擅長「以偏概全」，它不會無差別收錄所有內容，只會去記錄離自己最近、讓自己印象最深的點。
宜家是峰終定律最好的踐行者。顧客的購物流程中，差強人意的體驗不在少數。比如店員很少，難以及時獲得幫助，比如購物路線很長，對于有明確購物目的的顧客不太友好，比如永遠要排的結賬長隊等等。
但是宜家把握了它的「峰&終」。「峰」是過程中的小驚喜，比如隨時可以坐下體驗的沙發躺椅，比如偶爾出現的極便宜的家居用品，比如貼心的鉛筆與尺子；「終」就是結賬出口外，撫平顧客排隊焦躁的冰淇淋與熱狗。
而這些產品宜家本可以提高售價，但卻沒有。因為用一個美味便宜的冰激淋結束購物之旅，糟糕體驗被拋到腦后，人們回想起宜家時，會選擇性地認為整個流程都非常棒。
游戲產品也非常善于遵循峰終定律讓玩家玩得更盡興。比如疫情之后大熱的 Switch 健身環大冒險。
運動時，系統會一直強力夸夸為玩家打氣，完成動作都會有及時的鼓勵給到，創造一個接一個的體驗「峰」值。每一次通過關卡，還會讓玩家站直并高抬雙手，將健身環舉過頭頂堅持幾秒，畫面里的「終」是非常有儀式感的 ending 動作，讓玩家成就感滿滿。
技巧總結：在滿足了用戶的常規體驗之后，用心打造一些帶有巧思的設計，安排在流程的中間與結尾處，給用戶創造峰值體驗。這不僅有可能讓普通用戶轉化轉化成忠誠用戶，還能極大提高產品滿意度還能帶來口碑效應。
租房產品中，用戶在 APP 內挑選幾套心儀的房源，再約房東/經紀人去實地看房，是很典型租房用戶場景。我們發起「看房路線」這一功能的設計。使用看房路線，用戶能夠在選好x套房源后，根據智能規劃的看房順序與路線，輔以時間提示與導航，有條不紊地去實地看房，妥妥貼心功能。
我們大費周章產出了設計方案，上線后的效果，無論是使用頻率與使用深度，都不理想。調研后發現，實地看房的場景，其實存在極大的不確定性。用戶在看房中途，可能做出決策租賃某一套，也可能被經紀人帶領去看別的房源，從而中斷原本的計劃。
用戶是完全自由的，他們會尋求最熟悉、最好用、最穩妥的途徑去解決自己的非娛樂性問題。至于導航，用戶平時使用什么同類產品呢？高德地圖、百度地圖這類很成熟的地圖類應用。
用戶不會因為場景不在專業的地圖APP內，就原諒打折扣的導航體驗。用戶預期遠高于實際產品開發程度，這種認知偏差，需要產品人來買單。
總結這個功能的問題出現在哪里？其一，設計缺失，沒有將線下流程的旁枝側節考慮全面；其二，設計過度，但沒有成本去滿足用戶的高階需求。如何調整用戶的預期到合理的區間，我們做設計時的「度」怎樣把握，徒勞曲線應運而生。
橫軸是設計投入程度，縱軸是用戶滿意度，隨著設計投入程度的加大，用戶的滿意度呈遞增態勢，但到了一定程度，滿意度會斷崖式下跌至谷底，這個階段的設計投入便是徒勞。當設計投入快到達極限時，滿意度又陡然到了一個新的高度。
我們要將自己的設計置于一個合理的區間，并將用戶的期望調整同步。當有足夠成本支持（無論可觀支持抑或主觀爭取）時，把握機會，為用戶創造體驗。
技巧總結：要引導用戶在使用產品的時候，對功能有合理的預期——如果不能提供完善的服務，就用樸素的設計方案滿足用戶的基本訴求，而非好高騖遠。在用戶有更加合理選擇的時候，給與用戶便利，尊重用戶的自由。這樣不太功利的思考與設計，很可能帶給你的產品帶來更快的迭代，與更多的用戶。
雙曲貼現、峰終定理、徒勞曲線，三條曲線嘗試將人們的思維偏差暴露出來，利用得當，事半功倍。希望能帶給你一點啟發。
文章來源：優設 作者：58UXD
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
滿足用戶的懶是用戶體驗的本質，利用用戶的懶是探索人性的設計！
用戶有多懶？
人有七宗罪，其中就有懶惰，懶是人的天性，是刻在骨子里的基因。
現在互聯網產品幾乎都是在滿足人的懶，買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等，互聯網的發展把人慣得越來越懶，也正因如此，才成就了許許多多的產品。
為用戶多想一步，就是思考用戶的行為目的是什么，然后在設計上為用戶提供快捷的操作方式，這樣就能提高產品的使用體驗。
設計產品時不能總以自己慣有的思維方式去設計，要能把自己變成當下產品的用戶，站在用戶的角度去尋找答案解決問題。
我們從更高一個層面去思考這個問題，是哪些人創造了互聯網盛世，又是哪些人推動了社會進步，絕對不是懶的學習、懶的改變自己的人，而是那些善于思考想要改變“懶”的人。
文章來源：站酷-吳星辰
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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