隨著Ｂ端體驗(yàn)設(shè)計(jì)的發(fā)展，表單類頁面已經(jīng)形成了一定的設(shè)計(jì)模式，例如登錄頁面，場景比較明確、業(yè)務(wù)流程和設(shè)計(jì)模式都比較成熟了。

業(yè)務(wù)型表單設(shè)計(jì)與業(yè)務(wù)強(qiáng)相關(guān)。既需要考慮交互帶來的用戶體驗(yàn)，又要從業(yè)務(wù)角度出發(fā)滿足用戶的行為需求，相對比較復(fù)雜。不過也形成了一些固定的設(shè)計(jì)方法。今天我們先來看看「精簡」策略。

本文主要內(nèi)容：

? 刪除，實(shí)現(xiàn)表單輕量化

? 組織，讓表單更加有層次

? 隱藏，讓表單更加靈活

? 轉(zhuǎn)移，擴(kuò)展表單的異步空間

表單是系統(tǒng)與用戶進(jìn)行溝通的語言，它應(yīng)當(dāng)符合雙方的認(rèn)知邏輯。因此表單設(shè)計(jì)時(shí)，需要解決「產(chǎn)品」和「用戶」２個方面的問題：

? 表單需要用戶提供哪些信息，保證信息的正常流轉(zhuǎn)和業(yè)務(wù)的完整

? 用戶如何理解這些信息，如何更好地幫助用戶完成表單填寫

尤其是面對復(fù)雜表單，需要從這兩方面尋找到突破口。

? 在業(yè)務(wù)層面，設(shè)計(jì)師需要探究用戶的實(shí)際需求，反思表單項(xiàng)是否必要，從而減少不必要的選項(xiàng)，提高用戶效率。

? 同時(shí)在設(shè)計(jì)層面，還需要基于用戶認(rèn)知習(xí)慣，通過合理的信息組織、交互形式幫助用戶完成表單任務(wù)。

復(fù)雜表單通常包含多種業(yè)務(wù)場景，并且與其他業(yè)務(wù)存在關(guān)聯(lián)和嵌套，導(dǎo)致表單內(nèi)容信息量較大。我們需要通過「刪除」、「組織」、「隱藏」、「轉(zhuǎn)移」４個交互設(shè)計(jì)原則，讓表單頁面更加簡單、有效。

▎01　刪除，實(shí)現(xiàn)表單輕量化

前幾年，我們在銀行或者移動營業(yè)廳開通一些新業(yè)務(wù)時(shí)，都會填寫表單，通常是密密麻麻一堆信息。但是實(shí)際需要填寫的內(nèi)容可能只有2～3項(xiàng)，業(yè)務(wù)人員會特意勾選出來給客戶，其余的都是非必填項(xiàng)，或者是業(yè)務(wù)人員填寫的。

線上表單設(shè)計(jì)時(shí)，沒有專門的業(yè)務(wù)人員指導(dǎo)，用戶更容易迷失。所以設(shè)計(jì)師或者產(chǎn)品經(jīng)理的首要任務(wù)就是盡可能地減少表單信息量，降低用戶的認(rèn)知負(fù)荷。

最近在做一個表單的優(yōu)化，業(yè)務(wù)方要求增加“入?yún)ⅰ薄?/span>“出參”兩個表格項(xiàng)，說是用戶會看。與用戶溝通后，反饋也說“會看一下”。但是在深度挖掘用戶場景后，發(fā)現(xiàn)用戶確實(shí)會查看這個信息，只不過不是在當(dāng)前環(huán)節(jié)查看，而是在結(jié)果項(xiàng)中查看。

所以我們最終去掉了這兩個信息量較大的表格內(nèi)容，從而讓整個表單的信息量得到了明顯的下降。因此面對復(fù)雜長表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復(fù)雜信息。

▎02　組織，讓表單更加有層次

當(dāng)我們不得不面對復(fù)雜表單時(shí)，如果采用簡單內(nèi)容平鋪，用戶看到的是滿屏的散點(diǎn)信息，造成信息識別困難，用戶一時(shí)間難以找到填寫思路，反而增加用戶的心理負(fù)擔(dān)。因此信息的層次性，對于復(fù)雜表單至關(guān)重要。

首先要從內(nèi)容和視覺層面讓復(fù)雜信息變得清晰、規(guī)整，更加符合用戶的認(rèn)知習(xí)慣。例如，可以利用分組標(biāo)題、分割線、卡片，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊劃分。

根據(jù)不同的布局和交互，主要有以下4種表單設(shè)計(jì)模式。

1、順序表單

表單分組后，可以按照業(yè)務(wù)邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單，這種布局方式下，用戶無法全覽頁面信息。頁面上下滾動、定位查找?guī)淼慕换コ杀颈容^高。

1）平鋪表單

2）卡片表單

因此順序表單更多地用在業(yè)務(wù)信息比較簡單的場景中。

2、錨點(diǎn)表單

為了解決長表單的定位效率問題，可以在順序表單的基礎(chǔ)上增加錨點(diǎn)。另外錨點(diǎn)還可以幫助用戶快速了解表單所包含的內(nèi)容模塊。

根據(jù)錨點(diǎn)的布局，可以分為橫向錨點(diǎn)和縱向錨點(diǎn)兩類。錨點(diǎn)需要吸頂方便用戶操作。本質(zhì)上來說，錨點(diǎn)表單是順序表單的優(yōu)化版本。

3、標(biāo)簽表單

如果長表單內(nèi)容沒有依賴關(guān)系，還可以將表單拆分為幾個相互獨(dú)立的標(biāo)簽內(nèi)容，這就是標(biāo)簽表單。

不過標(biāo)簽表單更強(qiáng)調(diào)內(nèi)容的并列關(guān)系，常用于配置表單中，例如 MAC 或者 Windows 系統(tǒng)的配置彈窗。標(biāo)簽表單在全新表單中應(yīng)用較少。

因?yàn)闃?biāo)簽表單容易造成內(nèi)容遺漏，并且無法告知用戶哪些標(biāo)簽已經(jīng)填寫，哪些標(biāo)簽未填寫，或者無法清晰地展示校驗(yàn)信息。來回切換標(biāo)簽查看信息，也會影響效率，因此主要用于用戶有目的的配置行為中。

4、步驟表單

步驟表單是一種常見的表單拆分方式。通過節(jié)點(diǎn)將子表單串聯(lián)起來，形成一個完整的業(yè)務(wù)閉環(huán)。例如阿里云的云服務(wù)器訂單流程，或者一些開戶流程等。

步驟表單有幾個特點(diǎn)：

1）過程串聯(lián)

理論上來說，步驟表單有明顯的操作順序，用戶需要按照節(jié)點(diǎn)完成內(nèi)容填寫，因此不會產(chǎn)生信息遺漏。當(dāng)然也可以根據(jù)實(shí)際的業(yè)務(wù)場景，設(shè)置選填節(jié)點(diǎn)。但是總得來說，步驟表單更強(qiáng)調(diào)的是順序操作。

2）業(yè)務(wù)引導(dǎo)性

對于復(fù)雜業(yè)務(wù)，步驟表單可以將分散在不同頁面中的獨(dú)立業(yè)務(wù)串聯(lián)起來，在一定程度上具備新人教學(xué)功能，幫助用戶了解業(yè)務(wù)邏輯。減少用戶自定義操作時(shí)在不同頁面的跳轉(zhuǎn)，從而提供新人用戶的操作效率。例如系統(tǒng)配置向?qū)ь惖牟襟E表單。

3）逆向操作

由于步驟表單存在正向和逆向操作，因此設(shè)計(jì)時(shí)還需要考慮清楚逆向操作的設(shè)計(jì)邏輯。例如：

? 當(dāng)用戶想要修改前面步驟信息時(shí)，除了逐步返回，是否可以步驟條直接跨節(jié)點(diǎn)修改？

? 用戶中途退出表單后，重啟時(shí)是從第一步開始，還是直接從未填寫的步驟開始呢？

? 用戶如果完成了步驟條表單填寫，想要二次修改時(shí)，是用普通表單，還是仍然使用步驟表單形式呢？

4）節(jié)點(diǎn)的平衡性

步驟表單可以分拆信息，化整為零。但是信息節(jié)點(diǎn)也不能過多，否則同樣會影響用戶的操作效率。所以要減少不必要的流程節(jié)點(diǎn)。

最近在做設(shè)計(jì)時(shí)，發(fā)現(xiàn)步驟表單最后一步是內(nèi)容預(yù)覽。通過用戶調(diào)研發(fā)現(xiàn)，部分用戶會謹(jǐn)慎地預(yù)覽前面４步填寫的內(nèi)容。而另一部分用戶則認(rèn)為，剛填寫了內(nèi)容不需要預(yù)覽，強(qiáng)制預(yù)覽的設(shè)計(jì)并不友好。該如何平衡設(shè)計(jì)呢？

最終我們選擇了將預(yù)覽節(jié)點(diǎn)取消，將預(yù)覽功能調(diào)整到第４步，采用「預(yù)覽」按鈕的形式。既滿足了部分用戶預(yù)覽的需要，另一部分用戶也可以不做預(yù)覽，直接提交申請。

所以步驟表單過程中的節(jié)點(diǎn)具有一定的強(qiáng)制性，需要謹(jǐn)慎對待，保證節(jié)點(diǎn)的合理有效。

▎03　隱藏，讓表單更加靈活

1、模塊隱藏

表單實(shí)際上是任務(wù)信息的集合，為了具有更高的適配性，內(nèi)容通常是多種場景的集合。而場景有高頻、低頻區(qū)分，對于高頻信息需要優(yōu)先展示，便于提高用戶的填寫效率；對于低頻場景，可以隱藏弱化展示，從而降低整個表單的復(fù)雜度。

例如我們常見的「高級配置」，通常在表單的底部默認(rèn)收起展示。

2、信息隱藏

復(fù)雜表單中信息會出現(xiàn)多級信息共存的場景。這種場景下，復(fù)雜表單默認(rèn)展示當(dāng)前選項(xiàng)對應(yīng)的子內(nèi)容，隱藏其他選項(xiàng)的內(nèi)容，從而提高信息的指向性。

3、合理的組件形式

比較典型的就是單選和下拉選擇器如何選擇。有人為了強(qiáng)調(diào)效率，一味地追求單選按鈕平鋪展示，認(rèn)為單選更加直觀，用戶不需要點(diǎn)擊下拉滾動查看備選項(xiàng)。但是用戶同樣需要逐個瀏覽選擇，反而增加了整個頁面的信息量。

所以單選框更多用在備選項(xiàng)較少的場景，如果備選項(xiàng)較多，建議優(yōu)先采用下拉選擇器，隱藏備選項(xiàng)。

▎04　轉(zhuǎn)移，擴(kuò)展表單的異步空間

1、信息轉(zhuǎn)移

在表單設(shè)計(jì)時(shí)，可以將部分二級信息轉(zhuǎn)移到彈窗、抽屜中，利用浮層空間拓展業(yè)務(wù)內(nèi)容，根據(jù)用戶操作逐級加載出來。從而減少表單的信息量。

例如下圖中，沒有將「所有配送區(qū)域及運(yùn)費(fèi)」直接展示出來供用戶選擇，而是放在了彈窗中，表單中只呈現(xiàn)最后的選擇結(jié)果。既簡化了表單的內(nèi)容，又讓選擇結(jié)果更加突出，方便用戶的查看和校驗(yàn)。

2、記憶轉(zhuǎn)移

現(xiàn)在很多瀏覽器都增加了密碼存儲功能，減少用戶記憶成本。而在電商購物網(wǎng)站可以設(shè)定默認(rèn)的收貨地址。系統(tǒng)自動讀取調(diào)用，從而減少用戶的輸入操作。

3、行為轉(zhuǎn)移

現(xiàn)在越來越多的網(wǎng)站支持「手機(jī)短信驗(yàn)證碼」免密注冊登錄方式，或者第三方登錄方式，或者手機(jī)端掃碼登錄。將原有的表單填寫轉(zhuǎn)變?yōu)橄到y(tǒng)行為，從而降低用戶的行為成本。

好了，以上就是我總結(jié)的表單設(shè)計(jì)的內(nèi)容～

重復(fù)一遍：

? 刪除，實(shí)現(xiàn)表單輕量化

? 組織，讓表單更加有層次

? 隱藏，讓表單更加靈活

? 轉(zhuǎn)移，擴(kuò)展表單的異步空間

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：騰訊ISUX團(tuán)隊(duì)    來源：子牧先生


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司