2021-4-22 ui設(shè)計(jì)分享達(dá)人
2020年可以說(shuō)是一個(gè)風(fēng)險(xiǎn)年，但更是一個(gè)機(jī)會(huì)年，全球各類資產(chǎn)都出現(xiàn)了大行情機(jī)會(huì)，市場(chǎng)的投資熱情再次被點(diǎn)燃。借著這股東風(fēng)，在2020年年尾，我們開始了對(duì)公司金融產(chǎn)品的優(yōu)化改造工作，希望通過(guò)改造提升產(chǎn)品的用戶體驗(yàn)，配合來(lái)年的運(yùn)營(yíng)活動(dòng)，提升產(chǎn)品的用戶數(shù)和活躍度。改造工作主要為優(yōu)化開戶流程、提升社區(qū)氛圍、完善交易功能三個(gè)部分。后續(xù)我將通過(guò)系列文章對(duì)這次優(yōu)化設(shè)計(jì)過(guò)程中的思考進(jìn)行分享。
表單作為平臺(tái)與用戶聯(lián)系最為緊密的一環(huán)，良好的表單設(shè)計(jì)可以帶給用戶流暢自然的用戶體驗(yàn)，保證用戶情緒的正向增長(zhǎng)，而混亂無(wú)序的表單則會(huì)引起用戶的負(fù)面情緒，影響甚至阻礙用戶操作的完成，降低用戶對(duì)品牌好感度和信賴度。對(duì)于我們這樣的金融產(chǎn)品而言，產(chǎn)品內(nèi)存在著如開戶表單、出金申請(qǐng)表單、調(diào)整杠桿申請(qǐng)表單等形形色色的表單，如何將這些表單整理歸納形成一套完整的表單設(shè)計(jì)體系，帶給用戶統(tǒng)一、高效且優(yōu)質(zhì)的填寫體驗(yàn)，是我們這次表單優(yōu)化的主要的任務(wù)。
系列文章中關(guān)于表單設(shè)計(jì)部分我將分為上下兩期來(lái)向大家分享，體系化表單設(shè)計(jì)（上期）主要介紹在項(xiàng)目中總結(jié)出的表單設(shè)計(jì)中的方法論，下期則是介紹方法論在我們項(xiàng)目中實(shí)際的應(yīng)用，希望這次的分享能為你今后的表單設(shè)計(jì)提供思路與參考。
表單在我們工作、生活中的使用由來(lái)已久，在還沒(méi)有互聯(lián)網(wǎng)的年代，表單就已經(jīng)是人們收集和存儲(chǔ)數(shù)據(jù)、信息的重要手段，并一直沿用至今。如體檢時(shí)填寫的體檢表、入職時(shí)填寫的入職登記表、銀行開戶時(shí)填寫的開戶表都是使用的這種印刷的紙質(zhì)表單。它們身上有很多設(shè)計(jì)可以作為重要的參考，幫助我們優(yōu)化 UI 中的表單元素。
表單是 UI 界面中最為常見的元素，它通常是用來(lái)搜集和呈現(xiàn)一些數(shù)據(jù)、信息和特定的字段。表單的應(yīng)用極為廣泛，比如登錄應(yīng)用時(shí)填寫賬號(hào)密碼、網(wǎng)上購(gòu)物時(shí)完善訂單信息、OA系統(tǒng)中提交休假審批、修改個(gè)人中心信息時(shí)……都是在和表單發(fā)生互動(dòng)。
表單的目的、內(nèi)容、大小等雖然各有不同，但是表單的基本構(gòu)成元素是相對(duì)固定的，在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師需要合理組織這些元素，幫助用戶在填寫表單時(shí)，輕松愉快的完成，表單主要組成部分如下圖。
1.標(biāo)簽：告訴用戶此處相應(yīng)的輸入元素是什么;
2.輸入?yún)^(qū)：可交互的輸入?yún)^(qū)域，根據(jù)字段類型使用相應(yīng)的交互組件;
3.占位符：對(duì)當(dāng)前項(xiàng)進(jìn)行額外的信息描述;
4.前置圖標(biāo)（可選）：描述文本所需的輸入類型和特征;
5.后置圖標(biāo)（可選）：對(duì)輸入內(nèi)容進(jìn)行控制，如：下拉的展開與收起、清空；
6.幫助（可選）：提供表單內(nèi)容的注釋或輔助類容，如：說(shuō)明、注意事項(xiàng)；
7.反饋（可選）：告知用戶當(dāng)前操作可能或已出現(xiàn)的問(wèn)題，如：提交成功、錯(cuò)誤提示、網(wǎng)絡(luò)問(wèn)題；
8.鍵盤（可選）：在文本編輯時(shí)需要使用鍵盤，如：設(shè)備系統(tǒng)鍵盤、應(yīng)用內(nèi)置鍵盤；
9.操作按鈕：操作按鈕是在表單的結(jié)尾，如：提交、下一步、清空所有信息。
在如今這個(gè)互聯(lián)網(wǎng)時(shí)代，我們幾乎每天都會(huì)接觸到形形色色的表單，作為用戶與產(chǎn)品鏈接的樞紐，表單設(shè)計(jì)的好壞會(huì)直接的影響產(chǎn)品的實(shí)際數(shù)據(jù)表現(xiàn)。好的表單結(jié)構(gòu)清晰，交互合理，用戶能夠高效愉悅的完成表單填寫，為用戶節(jié)省了時(shí)間，同時(shí)也提高了自身產(chǎn)品的轉(zhuǎn)化。而差的表單往往信息邏輯混亂，填寫效率低，且容易讓人產(chǎn)生挫敗感而中途放棄，在無(wú)形中浪費(fèi)掉了很多潛在商業(yè)機(jī)會(huì)。是什么造成了不同表單之間出現(xiàn)如此大的體驗(yàn)差異，我們又該如何做才能設(shè)計(jì)出令用戶愉悅的表單呢？在實(shí)際項(xiàng)目過(guò)程中，總結(jié)出一套適用于移動(dòng)端表單設(shè)計(jì)的路徑圖-通過(guò)做好五個(gè)步驟，設(shè)計(jì)出令人愉悅的表單。
合理的表單框架選擇是打造用戶友好型表單的基礎(chǔ)，在進(jìn)行表單設(shè)計(jì)時(shí)，我們首先需要依照表單的使用場(chǎng)景和復(fù)雜程度，選用最為恰當(dāng)?shù)谋韱慰蚣?。確定好表單框架，也就決定了后續(xù)設(shè)計(jì)中表單信息如何組織以及呈現(xiàn)。我們將表單框架劃分為“錄入方式”、“標(biāo)簽布局”和“按鈕邏輯”三個(gè)部分，在表單設(shè)計(jì)時(shí)通過(guò)對(duì)這三個(gè)部分的選用來(lái)確定最終的表單框架形態(tài)。
按照表單錄入方式的不同我們大體上可以將表單錄入方式分為“單步錄入”、“分步錄入”和“分級(jí)錄入”三種，在進(jìn)行表單設(shè)計(jì)時(shí)需要根據(jù)實(shí)際情況選擇與使用場(chǎng)景匹配的錄入方式。
單步錄入是表單中最為常見的錄入方式，在一個(gè)頁(yè)面內(nèi)呈現(xiàn)所有的錄入項(xiàng)，結(jié)構(gòu)簡(jiǎn)單，快速錄入、快速提交，適用于錄入項(xiàng)較少的表單。
相對(duì)于PC端而言，移動(dòng)端手機(jī)屏幕尺寸較小，一份在PC端1-2屏就能完全展示的表單在移動(dòng)端往往需要7-8屏。將一個(gè)需要7-8屏才能展示完整的表單放在一個(gè)頁(yè)面內(nèi)讓用戶填寫，用戶容易產(chǎn)生抵觸情緒會(huì)造成表單完成率的降低。
為了提高用戶填寫效率，減少用戶的抵觸情緒，我們可以將一個(gè)冗長(zhǎng)的表單拆分成多個(gè)步驟，分步錄入。通過(guò)拆分成一個(gè)個(gè)步驟，讓表單信息呈現(xiàn)更為清理有條理，并且能引導(dǎo)用戶逐步填寫完成表單錄入。
當(dāng)表單處于以下4種場(chǎng)景時(shí)選擇建議選用分步錄入模式:
1.表單錄入項(xiàng)過(guò)多，在一個(gè)頁(yè)面內(nèi)已經(jīng)不能合理清晰的組織傳遞信息。
2.表單內(nèi)容的錄入方式存在較大差異，不適宜在一個(gè)頁(yè)面內(nèi)進(jìn)行展示。
3.表單錄入項(xiàng)在業(yè)務(wù)上存在先后順序，只有先完成上一步字段錄入，才能夠進(jìn)入下一步。
4.在業(yè)務(wù)上很重要的表單，為了讓用戶能夠沉浸、快速的完成表單填寫時(shí)。
分布錄入模式下步4種步驟導(dǎo)航選擇：
1.文字導(dǎo)航：當(dāng)表單為2步錄入表單時(shí)，我們展示步驟條帶給用戶的引導(dǎo)意義并不大，通常這種情況下我們會(huì)選擇省略掉步驟條，只展示當(dāng)前步驟名稱，給予用戶提示。
2.步驟條導(dǎo)航：當(dāng)表單錄入步驟為3-4步時(shí)，我們可以在頁(yè)面頂部放置步驟條顯示所有步驟內(nèi)容標(biāo)題，用戶通過(guò)步驟條能夠?qū)Ρ韱斡幸粋€(gè)清晰的預(yù)期。
3.雙層步驟導(dǎo)航：當(dāng)表單錄入步驟大于4步時(shí)，受限于移動(dòng)端屏幕尺寸，橫向上不夠容納步驟數(shù)太多的步驟條，這時(shí)我們可以其中某些關(guān)聯(lián)的步驟歸納為一個(gè)大步驟，形成雙層步驟導(dǎo)航。
4.進(jìn)度條導(dǎo)航：當(dāng)表單錄入步驟大于4步，又擔(dān)心雙層導(dǎo)航給用戶傳遞出表單極端復(fù)雜的印象，勸退用戶。這時(shí)我們可以使用進(jìn)度條導(dǎo)航，用百分比進(jìn)度條來(lái)展現(xiàn)表單填寫進(jìn)度。
分級(jí)錄入大家可能相對(duì)較為陌生，分級(jí)錄入在B端產(chǎn)品中會(huì)有相對(duì)多見，一般運(yùn)用于有明顯上下級(jí)關(guān)系的表單，如項(xiàng)目管理工具中新建任務(wù)表單，在新建任務(wù)的同時(shí)還能新建下屬子任務(wù)。又如客戶關(guān)系管理軟件中，新建訂單的同時(shí)新建下屬的訂單明細(xì)。我們可以將使用分級(jí)錄入模式的表單視為兩張表單，子表單添加的數(shù)據(jù)會(huì)回顯到主表單上。
標(biāo)簽用于提示用戶需要輸入的是什么信息。合理的標(biāo)簽布局結(jié)構(gòu)，能夠提高用戶的閱讀效率，還能降低信息填寫時(shí)的錯(cuò)誤率。常見的標(biāo)簽布局形式有：左右結(jié)構(gòu)、上下結(jié)構(gòu)和浮動(dòng)結(jié)構(gòu)。不同的標(biāo)簽布局都有各自的優(yōu)點(diǎn)和缺點(diǎn)，我們需要根據(jù)項(xiàng)目實(shí)際情況來(lái)選擇最合適的標(biāo)簽形式。
左右結(jié)構(gòu)是目前最為常見的標(biāo)簽布局形式，左右結(jié)構(gòu)中標(biāo)簽和輸入?yún)^(qū)域在一行內(nèi)排布，其中標(biāo)簽位于左側(cè)且居左對(duì)齊，輸入項(xiàng)位于右側(cè)有居左和居右對(duì)齊兩種對(duì)齊方式。
優(yōu)點(diǎn)：節(jié)省縱向頁(yè)面空間，在移動(dòng)端有限的頁(yè)面空間內(nèi)能展示更多的錄入項(xiàng)。
缺點(diǎn)：標(biāo)簽的長(zhǎng)度無(wú)法確定，視覺上顯得參差不齊，表單的信息瀏覽和填寫效率一般，標(biāo)簽橫向展示空間有限，對(duì)于多語(yǔ)言適配場(chǎng)景不太友好。
上下結(jié)構(gòu)也是我們能夠經(jīng)常在表單中見到的標(biāo)簽布局形式，上下結(jié)構(gòu)中標(biāo)簽位于上方且居左對(duì)齊，輸入?yún)^(qū)域位于下方也為居左對(duì)齊。
優(yōu)點(diǎn)：用戶的視覺瀏覽路徑相對(duì)于左右結(jié)構(gòu)來(lái)說(shuō)較短，擁有較強(qiáng)的信息瀏覽和填寫效率，標(biāo)簽橫向展示空間充足，對(duì)于多語(yǔ)言適配場(chǎng)景友好。
缺點(diǎn)：占據(jù)縱向空間多，一屏內(nèi)能展示的錄入項(xiàng)較少。
Material Design中文本錄入的標(biāo)簽形式就是選用的浮動(dòng)結(jié)構(gòu)，在浮動(dòng)結(jié)構(gòu)中標(biāo)簽和提示文字合二為一，正常狀態(tài)下，標(biāo)簽位于輸入?yún)^(qū)域內(nèi)部原本提示文案的位置，當(dāng)用戶輸入時(shí)，內(nèi)部的標(biāo)簽就會(huì)上移為文本輸入讓出空間，完成填寫后標(biāo)簽和輸入文案上下排列展示。
優(yōu)點(diǎn)：結(jié)構(gòu)簡(jiǎn)單，視覺干擾少，信息瀏覽和填寫效率高。
缺點(diǎn)：填寫項(xiàng)過(guò)多時(shí)，表單信息傳遞不夠清晰。
內(nèi)部結(jié)構(gòu)相對(duì)于前面3種結(jié)構(gòu)較為少見，比較長(zhǎng)出現(xiàn)在登錄場(chǎng)景，在浮動(dòng)結(jié)構(gòu)中標(biāo)簽和提示文字合二為一，正常狀態(tài)下，標(biāo)簽位于輸入?yún)^(qū)域內(nèi)部原本提示文案的位置，當(dāng)用戶輸入時(shí)，內(nèi)部的標(biāo)簽就會(huì)消失，完成填寫后只展示輸入文案。
優(yōu)點(diǎn)：結(jié)構(gòu)簡(jiǎn)單，視覺干擾少，聚焦于操作。
缺點(diǎn)：只適用于如登錄等錄入項(xiàng)極少的場(chǎng)景，一旦錄入項(xiàng)變多，由于錄入后不展示標(biāo)簽，將導(dǎo)致用戶后續(xù)很難判斷輸入的信息是否準(zhǔn)確。
按鈕作為表單的重要組成部分之一，合理的按鈕邏輯能夠?yàn)橛脩繇槙惩瓿杀韱翁顚懱峁椭?，表單的按鈕邏輯主要由按鈕的位置和按鈕的點(diǎn)亮邏輯兩部分組成。
按鈕在頁(yè)面中的位置情況主要有以下3種：
1.頂部按鈕：以文字的形式固定在頂部導(dǎo)航欄的右側(cè)，頂部按鈕尺寸較小，因?yàn)樗伎臻g有限，因此在操作上相對(duì)來(lái)說(shuō)不便于點(diǎn)擊。所以這類頂部按鈕更適用于「編輯頁(yè)面」，需要用戶謹(jǐn)慎操作。
2.表單底部：按鈕跟隨表單放置于表單的最下方，根據(jù)表單內(nèi)容縱向空間的大小而上下移動(dòng)。因?yàn)楸韱蝺?nèi)容較多時(shí)，容易下沉過(guò)多而導(dǎo)致按鈕不可見，所以將按鈕放置于表單底部更適用于當(dāng)表單錄入項(xiàng)較少不足半屏的場(chǎng)景。
3.設(shè)備底部：操作按鈕常駐在設(shè)備底部展示，適用于表單錄入項(xiàng)過(guò)多的情況，在表單設(shè)計(jì)時(shí)可以盡量將必填項(xiàng)放置在表單前面，用戶填完必填項(xiàng)后就可以點(diǎn)擊操作按鈕提交或者進(jìn)入下一步，而不用滑動(dòng)到表單底部再進(jìn)行操作。
1.當(dāng)表單錄入項(xiàng)較少時(shí)，且有明確預(yù)期按鈕何時(shí)可用，可以先置灰主按鈕，完成必填項(xiàng)填寫后再點(diǎn)亮主按鈕。
2.當(dāng)表單錄入項(xiàng)較多時(shí)，且用戶不清楚為什么按鈕不可以用，此時(shí)按鈕可以常亮，并在用戶點(diǎn)擊時(shí)給予反饋，告知錯(cuò)誤原因。
在確定好表單框架以后，對(duì)于表單內(nèi)容信息的進(jìn)行有效的組織也尤為重要，特別是對(duì)于一些結(jié)構(gòu)復(fù)雜、錄入項(xiàng)多的表單，如果不對(duì)信息進(jìn)行組織，很容易顯得繁雜混亂，容易讓用戶在一開始就產(chǎn)生抵觸的情緒，甚至選擇放棄。那么如何合理有層次的組織信息呢？
我們?cè)谠O(shè)計(jì)表單時(shí)潛意識(shí)里都想要從用戶那里獲取到更多的信息，表單中因此出現(xiàn)很多必要性較低的錄入項(xiàng)，表單也因此變得冗長(zhǎng)，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，在填寫表單之前就萌生退意。我們?cè)谶M(jìn)行表單設(shè)計(jì)時(shí)需要保持克制，聚焦于表單的核心任務(wù)，讓表單盡量短而美。那么我們要如何為表單減負(fù)，可以嘗試以下方法。
表單中每多一個(gè)錄入項(xiàng)需要填寫，都有可能會(huì)失去一部分用戶好感度甚至流失一部分用戶。在設(shè)計(jì)時(shí)我們需要判斷某個(gè)字段信息對(duì)于用戶來(lái)說(shuō)是否有必要在表單中進(jìn)行填寫，盡可能的刪減掉額外的無(wú)用字段。例如注冊(cè)表單，如讓用戶使用郵箱注冊(cè)，那么用戶的姓名字段是否是注冊(cè)的必選項(xiàng)？如果不是必選項(xiàng)是否可以在之后的信息完善中進(jìn)行填寫。
在表單中時(shí)有一些信息他們本身緊密相關(guān)，我們完全可以視情況將其合并為一個(gè)錄入項(xiàng)，來(lái)減少不必要的錄入操作，達(dá)到簡(jiǎn)化表單，提升錄入效率的目的。合并錄入項(xiàng)要結(jié)合實(shí)際的使用場(chǎng)景以真實(shí)的提升表單體驗(yàn)為目的，而不是一味的追求表單的最簡(jiǎn)化。
根據(jù)用戶使用數(shù)據(jù)，適當(dāng)將使用頻次不高、或者提供給專業(yè)用戶的高級(jí)表單項(xiàng)隱藏起來(lái)。例如一份表單中有一個(gè)填寫項(xiàng)，90%的用戶都不需要填寫，那么默認(rèn)收起。保持表單的簡(jiǎn)潔，讓絕大多數(shù)用戶快速完成，避免大量的表單給用戶的焦慮，而又滿足了小眾用戶的需求。
根據(jù)沉沒(méi)成本的定義：人們?cè)谧鰶Q策時(shí)，受到了自己過(guò)去所投入的時(shí)間、金錢、精力等因素的干擾，對(duì)于先前付出了投資的事情有更強(qiáng)的忠誠(chéng)度和繼續(xù)投資的意愿。進(jìn)行流程設(shè)計(jì)時(shí)也可以遵循這個(gè)原理，將容易完成的表單放在前面，這樣做有3個(gè)好處：
1.簡(jiǎn)單的表單更容易激起用戶的填寫欲望，用戶會(huì)迫不及待地去完成。相反，用戶一開始就看到過(guò)于復(fù)雜的表單，很容易被嚇到，從而放棄整個(gè)任務(wù)。
2.用戶通過(guò)完成簡(jiǎn)單的表單，可以增加自信心，即使后面的表單變復(fù)雜了，用戶也更有耐心去完成。
3.當(dāng)用戶將前面簡(jiǎn)單的表單完成后，放棄整個(gè)表單的機(jī)會(huì)成本就變高了，即使后面碰到較難的任務(wù)，用戶放棄的幾率也會(huì)降低。
當(dāng)我們我們?cè)O(shè)計(jì)的表單字段內(nèi)容較多時(shí)，需要合理的對(duì)字段信息進(jìn)行分組，這樣整體看起來(lái)更加有組織性。接近性（格式塔原理）原則告訴我們： 相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性，這樣能使設(shè)計(jì)界面層次有序，視覺清晰，減少視覺噪音。分組時(shí)需要注意：
1.內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組。
2.根據(jù)信息的重要性及難易程度排列分組，將選填的表單內(nèi)容靠后
在表單錄入設(shè)計(jì)階段，我們需要明確認(rèn)識(shí)到一點(diǎn)，用戶在面對(duì)一份表單時(shí)往往沒(méi)有我們想象中的那么有耐心，復(fù)雜繁瑣的錄入操作可能會(huì)直接勸退用戶。我們需要做的就是化繁為簡(jiǎn)，思考如何給用戶減負(fù)，讓用戶簡(jiǎn)單高效的完成表單錄入。表單錄入操作提效有一些切實(shí)可行的方法，下面請(qǐng)我將一一向分享。
對(duì)于用戶而言，填寫信息永遠(yuǎn)都不是一件有趣的事情，在對(duì)用戶足夠了解的前提下，我們可以選擇為表單中的部分錄入項(xiàng)提前設(shè)置合理的默認(rèn)值，節(jié)省用戶的操作時(shí)間。默認(rèn)值的設(shè)置不是一個(gè)隨性發(fā)揮的過(guò)程，而是基于用戶行為和數(shù)據(jù)的理性判斷，并且也不是每個(gè)字段都適合設(shè)定默認(rèn)值。關(guān)于如何設(shè)置合理的默認(rèn)值，什么字段適合設(shè)定默認(rèn)值，下面幾點(diǎn)可供大家參考：
在一些業(yè)務(wù)場(chǎng)景，會(huì)使用到用戶之前在其它表單中已經(jīng)錄入的信息，此時(shí)在填寫新表單時(shí)，可以默認(rèn)帶入之前的數(shù)據(jù)。
如果用戶正在填寫的內(nèi)容有相關(guān)的關(guān)聯(lián)數(shù)據(jù)，可以默認(rèn)帶入。如我們?cè)谔顚懹唵螘r(shí)可以默認(rèn)帶入該訂單關(guān)聯(lián)的商品基礎(chǔ)信息。
基于移動(dòng)端設(shè)備的能力，我們可以在用戶開放權(quán)限的情況下獲取一定的用戶信息（位置信息、電話區(qū)號(hào)、運(yùn)動(dòng)數(shù)據(jù)等），在特定情況下默認(rèn)填寫，如滴滴通過(guò)GPS定位自動(dòng)幫用戶填入上車位置。
像電話區(qū)號(hào)、證件類型、國(guó)籍等用戶錄入結(jié)果相對(duì)固定的字段，可以根據(jù)情況提設(shè)置合理的默認(rèn)值。
相較于PC端而言，移動(dòng)端設(shè)備屏幕尺寸較小，虛擬按鍵的輸入效率遠(yuǎn)不及實(shí)體鍵盤，在移動(dòng)端手動(dòng)輸入的成本較高。因此，為了打造便捷優(yōu)雅的操作體驗(yàn)，移動(dòng)端表單需要盡量減少用戶的手動(dòng)輸入。以下方法可以減少手動(dòng)輸入。
聯(lián)想輸入是給予用戶輸入字段的自動(dòng)補(bǔ)全功能，用戶少量輸入后進(jìn)行選擇。錄入方式由原來(lái)的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
對(duì)于表單填寫過(guò)程中可以固化選擇的信息，應(yīng)讓用戶進(jìn)行選擇操作以代替手動(dòng)輸入，盡可能地讓用戶減少輸入成本。
一份用戶可能會(huì)多次填寫的表單，我們可以提供用戶的歷史輸入項(xiàng)供其選擇，如滴滴的打車頁(yè)面會(huì)將我的常用目的地放置在目的地輸入框的旁邊供我快速錄入。
一些新型的交互組件的使用能夠簡(jiǎn)化信息錄入的操作，例如滑塊組件等。
在填寫表單時(shí)如果填寫項(xiàng)需要頻繁的頁(yè)面跳轉(zhuǎn)會(huì)使得整體的填寫效率變低，增加用戶的操作成本。在進(jìn)行表單設(shè)計(jì)時(shí)應(yīng)盡量規(guī)避這種頻繁的頁(yè)面跳轉(zhuǎn)，選用更流暢靈活的交互方式。
在網(wǎng)頁(yè)端表單設(shè)計(jì)中，用戶在表單填寫中需要對(duì)選項(xiàng)進(jìn)行選擇時(shí)，常用的交互形式是在選擇器的下拉列表中進(jìn)行選項(xiàng)的二次點(diǎn)擊。而在移動(dòng)端設(shè)計(jì)中，觸發(fā)選擇器后的二次點(diǎn)擊會(huì)增加用戶的填寫成本。所以在設(shè)計(jì)時(shí)，當(dāng)選項(xiàng)少于8時(shí)，在表單中直接顯示所有可選項(xiàng)，當(dāng)選項(xiàng)超出過(guò)多時(shí)則在列表浮層中進(jìn)行選擇。
在表單填寫中我們期望用戶保持專注，盡量避免產(chǎn)生引導(dǎo)用戶離開當(dāng)前頁(yè)面的填寫交互，這種交互跳轉(zhuǎn)很容易打斷用戶固有的行為軌跡。因此運(yùn)用浮層、彈窗等交互來(lái)完成輔助信息的采集是我們較為推崇的交互形式。
對(duì)于一些標(biāo)準(zhǔn)證件類信息的錄入，可以通過(guò)OCR識(shí)別文件內(nèi)容。當(dāng)用戶上傳圖片后，運(yùn)用圖像識(shí)別技術(shù)提取關(guān)鍵信息并自動(dòng)填入結(jié)果。值得注意的是，如果圖片不清晰或存在水印，將大大降低識(shí)別準(zhǔn)確度。此時(shí)應(yīng)提供修正渠道，讓用戶可以逐一校對(duì)并修改文本內(nèi)容。
短信驗(yàn)證碼升級(jí)方案。直連三大運(yùn)營(yíng)商，一步校驗(yàn)手機(jī)號(hào)與當(dāng)前SIM卡號(hào)一致性。優(yōu)化注冊(cè)/登錄/支付等場(chǎng)景驗(yàn)證流程，有效提升拉新轉(zhuǎn)化率和用戶留存率。不做數(shù)據(jù)加工與號(hào)碼精準(zhǔn)營(yíng)銷，保護(hù)用戶隱私。
為了避免讓用戶頻繁的跳入跳出相同類型的輸入項(xiàng)，首先整合表單的信息字段，將同類型的字段進(jìn)行合并，同時(shí)結(jié)合輸入控件，設(shè)計(jì)聯(lián)動(dòng)式組件，讓用戶在表單輸入時(shí)更加高效。
設(shè)計(jì)不是簡(jiǎn)單的元素拼湊，深入下去，有很多細(xì)節(jié)需要推敲，細(xì)節(jié)應(yīng)該是含蓄的，包含在整體之內(nèi)。好的細(xì)節(jié)設(shè)計(jì)不容易被用戶的眼睛直接發(fā)現(xiàn)，但是會(huì)讓用戶與產(chǎn)品的交互過(guò)程變得通順、舒適，概括來(lái)說(shuō)就是潤(rùn)物細(xì)無(wú)聲。對(duì)應(yīng)到表單設(shè)計(jì)上，我們需要通過(guò)表單設(shè)計(jì)中的細(xì)節(jié)把控，讓表單錄入這件事變得簡(jiǎn)單、高效。
當(dāng)表單中同時(shí)出現(xiàn)必填項(xiàng)和選填項(xiàng)時(shí)我們需要對(duì)其做出區(qū)分，避免用戶不知道哪些字段必須填寫、哪些字段可以選擇性填寫。沿用通用符號(hào)習(xí)慣，在表單中我們往往使用 * 號(hào)來(lái)標(biāo)記必填項(xiàng)。但是當(dāng)表單中的必填項(xiàng)多于選填項(xiàng)時(shí)，大量的 * 號(hào)會(huì)增加用戶的認(rèn)知負(fù)擔(dān)，面對(duì)這種情況，我們可以使用暗提示來(lái)標(biāo)記選填項(xiàng)幫助用戶識(shí)別。
如電話號(hào)碼、銀行卡號(hào)這類有數(shù)字組合規(guī)律的號(hào)碼字段，我們可以沿用它們?cè)诰€下的數(shù)字組合規(guī)律，通過(guò)空格對(duì)號(hào)碼字段進(jìn)行劃分，幫助用戶校驗(yàn)和閱讀。
出于保護(hù)用戶賬號(hào)安全考量，我們?cè)谶M(jìn)行密碼輸入時(shí)通常使用隱暗文字的方式來(lái)保護(hù)用戶賬戶安全，但是暗文字的顯示方式會(huì)讓用戶無(wú)法確認(rèn)密碼信息。因此我們可以在輸入時(shí)，讓輸入字段短暫顯示，保持1秒然后再轉(zhuǎn)變?yōu)榘滴淖郑@樣既可以讓用戶明確內(nèi)容，也保證了用戶的賬戶安全。
我們?cè)谶M(jìn)行表單設(shè)計(jì)時(shí)，輸入?yún)^(qū)域的長(zhǎng)度要符合心理預(yù)期，需要預(yù)判填寫內(nèi)容長(zhǎng)度來(lái)確定輸入?yún)^(qū)域的長(zhǎng)度。這樣不僅在體驗(yàn)上一致，而且在視覺體驗(yàn)上更加愉悅。
用戶應(yīng)該對(duì)他們的操作所帶來(lái)的結(jié)果非常自信，使用“提交”、“注冊(cè)”、“立即支付”、“創(chuàng)造賬戶”等確定性文案來(lái)描述用戶將采取的操作。
報(bào)錯(cuò)信息應(yīng)當(dāng)一目了然，從用色、圖標(biāo)到文本都應(yīng)當(dāng)起到高亮的效果，而且報(bào)錯(cuò)信息應(yīng)當(dāng)靠近輸入框，而非表單的底部或者頂部或者按鍵旁邊。
在設(shè)計(jì)主要由文本輸入框構(gòu)成的表單頁(yè)面時(shí)，要考慮鍵盤出現(xiàn)可能會(huì)遮擋輸入框的情況，我們需要把控件放在scrollView上，當(dāng)鍵盤會(huì)遮擋輸入框時(shí),則表單滾動(dòng)。
對(duì)于異常情況不能只是冷冰冰的告知失敗，這樣容易給用戶帶來(lái)挫敗感，且缺少下一步操作指引。錯(cuò)誤反饋不應(yīng)該只著眼于結(jié)果，錯(cuò)誤反饋的闡述角度應(yīng)該是引起用戶關(guān)注、讓其快速了解出錯(cuò)情況，并指導(dǎo)如何處理。
經(jīng)過(guò)前面幾個(gè)步驟，表單整體形態(tài)已經(jīng)確定，最后一步我們需要從整體體驗(yàn)的角度對(duì)表單進(jìn)行完善和調(diào)整。包含表單的容錯(cuò)性考量、表單流程閉環(huán)的打造、視情況而定的趣味性設(shè)計(jì)。
即便你的產(chǎn)品90％的時(shí)間都運(yùn)行良好，但是如果在用戶需要幫助時(shí)置之不理，他們是不會(huì)忘記這一點(diǎn)的?！禛etting Real》
容錯(cuò)性概念源于計(jì)算機(jī)領(lǐng)域，容錯(cuò)性是指計(jì)算機(jī)系統(tǒng)在發(fā)生故障的情況下，依然能夠保證系統(tǒng)正常運(yùn)行。計(jì)算機(jī)這種保證系統(tǒng)正常運(yùn)行的能力也被稱為容錯(cuò)能力。延伸到互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域，容錯(cuò)性的范疇更為寬泛，包括降低用戶操作的出錯(cuò)率、及時(shí)提供糾錯(cuò)幫助、提供解決方案等內(nèi)容。
容錯(cuò)設(shè)計(jì)與用戶體驗(yàn)息息相關(guān)，我們?cè)诒韱雾?yè)面設(shè)計(jì)時(shí)也需要進(jìn)行容錯(cuò)性考量，盡量避免用戶錯(cuò)誤操作的出現(xiàn)。當(dāng)用戶出現(xiàn)錯(cuò)誤操作時(shí)，幫助用戶識(shí)別、診斷，及時(shí)反饋問(wèn)題所在，并提出有效的解決方案，幫助用戶快速?gòu)腻e(cuò)誤中恢復(fù)。讓表單填寫流程更順暢，給用戶帶來(lái)更優(yōu)的用戶體驗(yàn)，關(guān)于表單容錯(cuò)性設(shè)計(jì)可以從以下幾個(gè)方面來(lái)進(jìn)行。
引導(dǎo)和提示要突出表現(xiàn)，從而引起用戶關(guān)注，確保用戶在操作前能注意到引導(dǎo)或提示信息。引導(dǎo)與提示用語(yǔ)要簡(jiǎn)單且易于理解，當(dāng)重要或操作不可逆時(shí)，要詢問(wèn)用戶讓其知道這樣操作的后果。
如何從設(shè)計(jì)上避免用戶出錯(cuò)，限制是一種非常必要的方式，可以通過(guò)限制用戶的某些交互操作或者增加某些操作的難度來(lái)對(duì)用戶操作進(jìn)行限制避免用戶出錯(cuò)。
當(dāng)用戶出現(xiàn)填寫錯(cuò)誤時(shí)，及時(shí)的反饋錯(cuò)誤并提供糾錯(cuò)幫助，出錯(cuò)信息應(yīng)當(dāng)用清晰準(zhǔn)確且用戶易于理解，能夠?qū)τ脩艚鉀Q當(dāng)前問(wèn)題提供建設(shè)性幫助。
允許用戶犯錯(cuò)，操作者能歸夠撤銷以前的指令，幫助用戶在犯錯(cuò)以后能夠快速回到正確狀態(tài)。
表單的終點(diǎn)并不是提交，一個(gè)好的表單設(shè)計(jì)需要兼顧考慮用戶填寫前的引導(dǎo)、填寫時(shí)的及時(shí)校驗(yàn)與幫助、還有填寫后的整體流程體驗(yàn)，為用戶提供完整的、形成閉環(huán)的表單填寫體驗(yàn)。
舉個(gè)例子，當(dāng)我們?cè)O(shè)計(jì)的表單需要用戶準(zhǔn)備如身份證、銀行卡這類的證件時(shí)，需在表單填寫前告知用戶，避免用戶填寫途中才發(fā)現(xiàn)證件未準(zhǔn)備，導(dǎo)致用戶填寫流程中斷。再如，用戶在填寫完證券開戶表單后，其實(shí)還需要通過(guò)審批后用戶才能進(jìn)行入金交易等操作，這時(shí)我們需要一個(gè)結(jié)果頁(yè)來(lái)告知用戶表單提交的結(jié)果狀態(tài)和下一步的操作指引。
表單設(shè)計(jì)并不一定需要是嚴(yán)肅且正式的，在表單設(shè)計(jì)時(shí)可以嘗試引入一些趣味性的元素，研究表明，更大的文字輸入框、適度的留白空間、優(yōu)雅的動(dòng)畫效果、趣味性界面設(shè)計(jì)會(huì)讓人心情愉悅更有填寫的欲望。
例如bilibili的登錄頁(yè)面，在用戶輸入賬號(hào)時(shí)上方的卡通形象是睜眼的，當(dāng)切換到輸入密碼或者驗(yàn)證碼時(shí)卡通人物會(huì)有一個(gè)捂住雙眼的動(dòng)作十分有趣，這樣的趣味性設(shè)計(jì)能夠在一定程度上緩解用戶在填寫表單時(shí)的焦慮情緒，并增加對(duì)于bilibili保護(hù)賬號(hào)安全的信賴感。
以上就是我對(duì)于移動(dòng)端表單設(shè)計(jì)的一些歸納和總結(jié)，過(guò)往的項(xiàng)目中自己設(shè)計(jì)大量的表單頁(yè)面，走了不少?gòu)澛贩噶瞬簧馘e(cuò)誤，但也通過(guò)項(xiàng)目不斷的反思總結(jié)，收獲不少的關(guān)于表單設(shè)計(jì)的經(jīng)驗(yàn)。在這里將項(xiàng)目中關(guān)于表單的一些思考和經(jīng)驗(yàn)分享出來(lái)，總結(jié)出自己的一套關(guān)于表單設(shè)計(jì)的方法論，也是希望能夠?qū)φ谶M(jìn)行表單設(shè)計(jì)或者即將進(jìn)行表單設(shè)計(jì)的你提供一點(diǎn)點(diǎn)參考與幫助。
文章來(lái)源：站酷 作者：Yone楊
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com