設計基礎(7): 簡(jiǎn)約設計4原則在表單設計中的應用

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

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

　　本文主要內容：

　　表單是系統與用戶(hù)進(jìn)行溝通的語(yǔ)言，它應當符合雙方的認知邏輯。因此表單設計時(shí)，需要解決「產(chǎn)品」和「用戶(hù)」２個(gè)方面的問(wèn)題：尤其是面對復雜表單，需要從這兩方面尋找到突破口。復雜表單通常包含多種業(yè)務(wù)場(chǎng)景，并且與其他業(yè)務(wù)存在關(guān)聯(lián)和嵌套，導致表單內容信息量較大。我們需要通過(guò)「刪除」、「組織」、「隱藏」、「轉移」４個(gè)交互設計原則，讓表單頁(yè)面更加簡(jiǎn)單、有效。

　　▎01刪除，實(shí)現表單輕量化前幾年，我們在銀行或者移動(dòng)營(yíng)業(yè)廳開(kāi)通一些新業(yè)務(wù)時(shí)，都會(huì )填寫(xiě)表單，通常是密密麻麻一堆信息。但是實(shí)際需要填寫(xiě)的內容可能只有2～3項，業(yè)務(wù)人員會(huì )特意勾選出來(lái)給客戶(hù)，其余的都是非必填項，或者是業(yè)務(wù)人員填寫(xiě)的。線(xiàn)上表單設計時(shí)，沒(méi)有專(zhuān)門(mén)的業(yè)務(wù)人員指導，用戶(hù)更容易迷失。所以設計師或者產(chǎn)品經(jīng)理的首要任務(wù)就是盡可能地減少表單信息量，降低用戶(hù)的認知負荷。最近在做一個(gè)表單的優(yōu)化，業(yè)務(wù)方要求增加“入參”、“出參”兩個(gè)表格項，說(shuō)是用戶(hù)會(huì )看。與用戶(hù)溝通后，反饋也說(shuō)“會(huì )看一下”。但是在深度挖掘用戶(hù)場(chǎng)景后，發(fā)現用戶(hù)確實(shí)會(huì )查看這個(gè)信息，只不過(guò)不是在當前環(huán)節查看，而是在結果項中查看。所以我們最終去掉了這兩個(gè)信息量較大的表格內容，從而讓整個(gè)表單的信息量得到了明顯的下降。因此面對復雜長(cháng)表單，我們需要從需求入手，判斷是否有必要讓用戶(hù)提供如此多的復雜信息。

　　▎02組織，讓表單更加有層次當我們不得不面對復雜表單時(shí)，如果采用簡(jiǎn)單內容平鋪，用戶(hù)看到的是滿(mǎn)屏的散點(diǎn)信息，造成信息識別困難，用戶(hù)一時(shí)間難以找到填寫(xiě)思路，反而增加用戶(hù)的心理負擔。因此信息的層次性，對于復雜表單至關(guān)重要。首先要從內容和視覺(jué)層面讓復雜信息變得清晰、規整，更加符合用戶(hù)的認知習慣。例如，可以利用分組標題、分割線(xiàn)、卡片，按照不同信息的類(lèi)別、屬性和相關(guān)性進(jìn)行區塊劃分。根據不同的布局和交互，主要有以下4種表單設計模式。

　　1、順序表單表單分組后，可以按照業(yè)務(wù)邏輯順序鋪開(kāi)展示。用戶(hù)只要按順序填寫(xiě)就可以了。但是對于超長(cháng)表單，這種布局方式下，用戶(hù)無(wú)法全覽頁(yè)面信息。頁(yè)面上下滾動(dòng)、定位查找帶來(lái)的交互成本比較高。1）平鋪表單

　　2）卡片表單

　　因此順序表單更多地用在業(yè)務(wù)信息比較簡(jiǎn)單的場(chǎng)景中。2、錨點(diǎn)表單為了解決長(cháng)表單的定位效率問(wèn)題，可以在順序表單的基礎上增加錨點(diǎn)。另外錨點(diǎn)還可以幫助用戶(hù)快速了解表單所包含的內容模塊。

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

　　3、標簽表單如果長(cháng)表單內容沒(méi)有依賴(lài)關(guān)系，還可以將表單拆分為幾個(gè)相互獨立的標簽內容，這就是標簽表單。

　　不過(guò)標簽表單更強調內容的并列關(guān)系，常用于配置表單中，例如 MAC 或者 Windows 系統的配置彈窗。

　　標簽表單在全新表單中應用較少。因為標簽表單容易造成內容遺漏，并且無(wú)法告知用戶(hù)哪些標簽已經(jīng)填寫(xiě)，哪些標簽未填寫(xiě)，或者無(wú)法清晰地展示校驗信息。來(lái)回切換標簽查看信息，也會(huì )影響效率，因此主要用于用戶(hù)有目的的配置行為中。4、步驟表單

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

　　步驟表單有幾個(gè)特點(diǎn)：1）過(guò)程串聯(lián)理論上來(lái)說(shuō)，步驟表單有明顯的操作順序，用戶(hù)需要按照節點(diǎn)完成內容填寫(xiě)，因此不會(huì )產(chǎn)生信息遺漏。當然也可以根據實(shí)際的業(yè)務(wù)場(chǎng)景，設置選填節點(diǎn)。但是總得來(lái)說(shuō)，步驟表單更強調的是順序操作。2）業(yè)務(wù)引導性

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

　　3）逆向操作

　　由于步驟表單存在正向和逆向操作，因此設計時(shí)還需要考慮清楚逆向操作的設計邏輯。例如：4）節點(diǎn)的平衡性步驟表單可以分拆信息，化整為零。但是信息節點(diǎn)也不能過(guò)多，否則同樣會(huì )影響用戶(hù)的操作效率。所以要減少不必要的流程節點(diǎn)。最近在做設計時(shí)，發(fā)現步驟表單最后一步是內容預覽。通過(guò)用戶(hù)調研發(fā)現，部分用戶(hù)會(huì )謹慎地預覽前面４步填寫(xiě)的內容。而另一部分用戶(hù)則認為，剛填寫(xiě)了內容不需要預覽，強制預覽的設計并不友好。該如何平衡設計呢？最終我們選擇了將預覽節點(diǎn)取消，將預覽功能調整到第４步，采用「預覽」按鈕的形式。既滿(mǎn)足了部分用戶(hù)預覽的需要，另一部分用戶(hù)也可以不做預覽，直接提交申請。所以步驟表單過(guò)程中的節點(diǎn)具有一定的強制性，需要謹慎對待，保證節點(diǎn)的合理有效。

　　▎03隱藏，讓表單更加靈活1、模塊隱藏表單實(shí)際上是任務(wù)信息的集合，為了具有更高的適配性，內容通常是多種場(chǎng)景的集合。而場(chǎng)景有高頻、低頻區分，對于高頻信息需要優(yōu)先展示，便于提高用戶(hù)的填寫(xiě)效率；對于低頻場(chǎng)景，可以隱藏弱化展示，從而降低整個(gè)表單的復雜度。例如我們常見(jiàn)的「高級配置」，通常在表單的底部默認收起展示。

　　2、信息隱藏復雜表單中信息會(huì )出現多級信息共存的場(chǎng)景。這種場(chǎng)景下，復雜表單默認展示當前選項對應的子內容，隱藏其他選項的內容，從而提高信息的指向性。

　　3、合理的組件形式比較典型的就是單選和下拉選擇器如何選擇。有人為了強調效率，一味地追求單選按鈕平鋪展示，認為單選更加直觀(guān)，用戶(hù)不需要點(diǎn)擊下拉滾動(dòng)查看備選項。但是用戶(hù)同樣需要逐個(gè)瀏覽選擇，反而增加了整個(gè)頁(yè)面的信息量。所以單選框更多用在備選項較少的場(chǎng)景，如果備選項較多，建議優(yōu)先采用下拉選擇器，隱藏備選項。▎04轉移，擴展表單的異步空間1、信息轉移在表單設計時(shí)，可以將部分二級信息轉移到彈窗、抽屜中，利用浮層空間拓展業(yè)務(wù)內容，根據用戶(hù)操作逐級加載出來(lái)。從而減少表單的信息量。例如下圖中，沒(méi)有將「所有配送區域及運費」直接展示出來(lái)供用戶(hù)選擇，而是放在了彈窗中，表單中只呈現最后的選擇結果。既簡(jiǎn)化了表單的內容，又讓選擇結果更加突出，方便用戶(hù)的查看和校驗。

　　2、記憶轉移

　　現在很多瀏覽器都增加了密碼存儲功能，減少用戶(hù)記憶成本。而在電商購物網(wǎng)站可以設定默認的收貨地址。系統自動(dòng)讀取調用，從而減少用戶(hù)的輸入操作。3、行為轉移現在越來(lái)越多的網(wǎng)站支持「手機短信驗證碼」免密注冊登錄方式，或者第三方登錄方式，或者手機端掃碼登錄。將原有的表單填寫(xiě)轉變?yōu)橄到y行為，從而降低用戶(hù)的行為成本。