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