一、刪除，實(shí)現(xiàn)表單輕量化
前幾年，我們?cè)阢y行或者移動(dòng)營(yíng)業(yè)廳開(kāi)通一些新業(yè)務(wù)時(shí)，都會(huì)填寫(xiě)表單，通常是密密麻麻一堆信息。但是實(shí)際需要填寫(xiě)的內(nèi)容可能只有2～3項(xiàng)，業(yè)務(wù)人員會(huì)特意勾選出來(lái)給客戶，其余的都是非必填項(xiàng)，或者是業(yè)務(wù)人員填寫(xiě)的。
線上表單設(shè)計(jì)時(shí)，沒(méi)有專門(mén)的業(yè)務(wù)人員指導(dǎo)，用戶更容易迷失。所以設(shè)計(jì)師或者產(chǎn)品經(jīng)理的首要任務(wù)就是盡可能地減少表單信息量，降低用戶的認(rèn)知負(fù)荷。
最近在做一個(gè)表單的優(yōu)化，業(yè)務(wù)方要求增加“入?yún)ⅰ?、“出參”兩個(gè)表格項(xiàng)，說(shuō)是用戶會(huì)看。與用戶溝通后，反饋也說(shuō)“會(huì)看一下”。但是在深度挖掘用戶場(chǎng)景后，發(fā)現(xiàn)用戶確實(shí)會(huì)查看這個(gè)信息，只不過(guò)不是在當(dāng)前環(huán)節(jié)查看，而是在結(jié)果項(xiàng)中查看。
所以我們最終去掉了這兩個(gè)信息量較大的表格內(nèi)容，從而讓整個(gè)表單的信息量得到了明顯的下降。
因此面對(duì)復(fù)雜長(zhǎng)表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復(fù)雜信息。
二、組織，讓表單更加有層次
當(dāng)我們不得不面對(duì)復(fù)雜表單時(shí)，如果采用簡(jiǎn)單內(nèi)容平鋪，用戶看到的是滿屏的散點(diǎn)信息，造成信息識(shí)別困難，用戶一時(shí)間難以找到填寫(xiě)思路，反而增加用戶的心理負(fù)擔(dān)。因此信息的層次性，對(duì)于復(fù)雜表單至關(guān)重要。
首先要從內(nèi)容和視覺(jué)層面讓復(fù)雜信息變得清晰、規(guī)整，更加符合用戶的認(rèn)知習(xí)慣。例如，可以利用分組標(biāo)題、分割線、卡片，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊劃分。
根據(jù)不同的布局和交互，主要有以下4種表單設(shè)計(jì)模式。
1、順序表單
表單分組后，可以按照業(yè)務(wù)邏輯順序鋪開(kāi)展示。用戶只要按順序填寫(xiě)就可以了。但是對(duì)于超長(zhǎng)表單，這種布局方式下，用戶無(wú)法全覽頁(yè)面信息。頁(yè)面上下滾動(dòng)、定位查找?guī)?lái)的交互成本比較高。
1）平鋪表單
2）卡片表單
因此順序表單更多地用在業(yè)務(wù)信息比較簡(jiǎn)單的場(chǎng)景中。
2、錨點(diǎn)表單
為了解決長(zhǎng)表單的定位效率問(wèn)題，可以在順序表單的基礎(chǔ)上增加錨點(diǎn)。另外錨點(diǎn)還可以幫助用戶快速了解表單所包含的內(nèi)容模塊。
根據(jù)錨點(diǎn)的布局，可以分為橫向錨點(diǎn)和縱向錨點(diǎn)兩類。錨點(diǎn)需要吸頂方便用戶操作。本質(zhì)上來(lái)說(shuō)，錨點(diǎn)表單是順序表單的優(yōu)化版本。
3、標(biāo)簽表單
如果長(zhǎng)表單內(nèi)容沒(méi)有依賴關(guān)系，還可以將表單拆分為幾個(gè)相互獨(dú)立的標(biāo)簽內(nèi)容，這就是標(biāo)簽表單。
不過(guò)標(biāo)簽表單更強(qiáng)調(diào)內(nèi)容的并列關(guān)系，常用于配置表單中，例如 MAC 或者 Windows 系統(tǒng)的配置彈窗。
標(biāo)簽表單在全新表單中應(yīng)用較少。因?yàn)闃?biāo)簽表單容易造成內(nèi)容遺漏，并且無(wú)法告知用戶哪些標(biāo)簽已經(jīng)填寫(xiě)，哪些標(biāo)簽未填寫(xiě)，或者無(wú)法清晰地展示校驗(yàn)信息。來(lái)回切換標(biāo)簽查看信息，也會(huì)影響效率，因此主要用于用戶有目的的配置行為中。
4、步驟表單
步驟表單是一種常見(jiàn)的表單拆分方式。通過(guò)節(jié)點(diǎn)將子表單串聯(lián)起來(lái)，形成一個(gè)完整的業(yè)務(wù)閉環(huán)。例如阿里云的云服務(wù)器訂單流程，或者一些開(kāi)戶流程等。
步驟表單有幾個(gè)特點(diǎn)：
1）過(guò)程串聯(lián)
理論上來(lái)說(shuō)，步驟表單有明顯的操作順序，用戶需要按照節(jié)點(diǎn)完成內(nèi)容填寫(xiě)，因此不會(huì)產(chǎn)生信息遺漏。當(dāng)然也可以根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景，設(shè)置選填節(jié)點(diǎn)。但是總得來(lái)說(shuō)，步驟表單更強(qiáng)調(diào)的是順序操作。
2）業(yè)務(wù)引導(dǎo)性
對(duì)于復(fù)雜業(yè)務(wù)，步驟表單可以將分散在不同頁(yè)面中的獨(dú)立業(yè)務(wù)串聯(lián)起來(lái)，在一定程度上具備新人教學(xué)功能，幫助用戶了解業(yè)務(wù)邏輯。減少用戶自定義操作時(shí)在不同頁(yè)面的跳轉(zhuǎn)，從而提供新人用戶的操作效率。例如系統(tǒng)配置向?qū)ь惖牟襟E表單。
3）逆向操作
由于步驟表單存在正向和逆向操作，因此設(shè)計(jì)時(shí)還需要考慮清楚逆向操作的設(shè)計(jì)邏輯。例如：
- 當(dāng)用戶想要修改前面步驟信息時(shí)，除了逐步返回，是否可以步驟條直接跨節(jié)點(diǎn)修改？
- 用戶中途退出表單后，重啟時(shí)是從第一步開(kāi)始，還是直接從未填寫(xiě)的步驟開(kāi)始呢？
- 用戶如果完成了步驟條表單填寫(xiě)，想要二次修改時(shí)，是用普通表單，還是仍然使用步驟表單形式呢？
4）節(jié)點(diǎn)的平衡性
步驟表單可以分拆信息，化整為零。但是信息節(jié)點(diǎn)也不能過(guò)多，否則同樣會(huì)影響用戶的操作效率。所以要減少不必要的流程節(jié)點(diǎn)。
最近在做設(shè)計(jì)時(shí)，發(fā)現(xiàn)步驟表單最后一步是內(nèi)容預(yù)覽。通過(guò)用戶調(diào)研發(fā)現(xiàn)，部分用戶會(huì)謹(jǐn)慎地預(yù)覽前面４步填寫(xiě)的內(nèi)容。而另一部分用戶則認(rèn)為，剛填寫(xiě)了內(nèi)容不需要預(yù)覽，強(qiáng)制預(yù)覽的設(shè)計(jì)并不友好。該如何平衡設(shè)計(jì)呢？
最終我們選擇了將預(yù)覽節(jié)點(diǎn)取消，將預(yù)覽功能調(diào)整到第４步，采用「預(yù)覽」按鈕的形式。既滿足了部分用戶預(yù)覽的需要，另一部分用戶也可以不做預(yù)覽，直接提交申請(qǐng)。
所以步驟表單過(guò)程中的節(jié)點(diǎn)具有一定的強(qiáng)制性，需要謹(jǐn)慎對(duì)待，保證節(jié)點(diǎn)的合理有效。
三、隱藏，讓表單更加靈活
1、模塊隱藏
表單實(shí)際上是任務(wù)信息的集合，為了具有更高的適配性，內(nèi)容通常是多種場(chǎng)景的集合。而場(chǎng)景有高頻、低頻區(qū)分，對(duì)于高頻信息需要優(yōu)先展示，便于提高用戶的填寫(xiě)效率；對(duì)于低頻場(chǎng)景，可以隱藏弱化展示，從而降低整個(gè)表單的復(fù)雜度。
例如我們常見(jiàn)的「高級(jí)配置」，通常在表單的底部默認(rèn)收起展示。
2、信息隱藏
復(fù)雜表單中信息會(huì)出現(xiàn)多級(jí)信息共存的場(chǎng)景。這種場(chǎng)景下，復(fù)雜表單默認(rèn)展示當(dāng)前選項(xiàng)對(duì)應(yīng)的子內(nèi)容，隱藏其他選項(xiàng)的內(nèi)容，從而提高信息的指向性。
3、合理的組件形式
比較典型的就是單選和下拉選擇器如何選擇。有人為了強(qiáng)調(diào)效率，一味地追求單選按鈕平鋪展示，認(rèn)為單選更加直觀，用戶不需要點(diǎn)擊下拉滾動(dòng)查看備選項(xiàng)。但是用戶同樣需要逐個(gè)瀏覽選擇，反而增加了整個(gè)頁(yè)面的信息量。
所以單選框更多用在備選項(xiàng)較少的場(chǎng)景，如果備選項(xiàng)較多，建議優(yōu)先采用下拉選擇器，隱藏備選項(xiàng)。
四、轉(zhuǎn)移，擴(kuò)展表單的異步空間
1、信息轉(zhuǎn)移
在表單設(shè)計(jì)時(shí)，可以將部分二級(jí)信息轉(zhuǎn)移到彈窗、抽屜中，利用浮層空間拓展業(yè)務(wù)內(nèi)容，根據(jù)用戶操作逐級(jí)加載出來(lái)。從而減少表單的信息量。
例如下圖中，沒(méi)有將「所有配送區(qū)域及運(yùn)費(fèi)」直接展示出來(lái)供用戶選擇，而是放在了彈窗中，表單中只呈現(xiàn)最后的選擇結(jié)果。既簡(jiǎn)化了表單的內(nèi)容，又讓選擇結(jié)果更加突出，方便用戶的查看和校驗(yàn)。
2、記憶轉(zhuǎn)移
現(xiàn)在很多瀏覽器都增加了密碼存儲(chǔ)功能，減少用戶記憶成本。
而在電商購(gòu)物網(wǎng)站可以設(shè)定默認(rèn)的收貨地址。系統(tǒng)自動(dòng)讀取調(diào)用，從而減少用戶的輸入操作。
3、行為轉(zhuǎn)移
現(xiàn)在越來(lái)越多的網(wǎng)站支持「手機(jī)短信驗(yàn)證碼」免密注冊(cè)登錄方式，或者第三方登錄方式，或者手機(jī)端掃碼登錄。將原有的表單填寫(xiě)轉(zhuǎn)變?yōu)橄到y(tǒng)行為，從而降低用戶的行為成本。
好了，以上就是我總結(jié)的表單設(shè)計(jì)的內(nèi)容～
重復(fù)一遍：
- 刪除，實(shí)現(xiàn)表單輕量化
- 組織，讓表單更加有層次
- 隱藏，讓表單更加靈活
- 轉(zhuǎn)移，擴(kuò)展表單的異步空間
作者：子牧先生
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)基礎(chǔ)(7): 簡(jiǎn)約設(shè)計(jì)4原則在表單設(shè)計(jì)中的應(yīng)用
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司