2023-2-13 ui設計分享達人
隨著Ｂ端體驗設計的發展，表單類頁面已經形成了一定的設計模式，例如登錄頁面，場景比較明確、業務流程和設計模式都比較成熟了。
業務型表單設計與業務強相關。既需要考慮交互帶來的用戶體驗，又要從業務角度出發滿足用戶的行為需求，相對比較復雜。不過也形成了一些固定的設計方法。今天我們先來看看「精簡」策略。
本文主要內容：
? 刪除，實現表單輕量化
? 組織，讓表單更加有層次
? 隱藏，讓表單更加靈活
? 轉移，擴展表單的異步空間
表單是系統與用戶進行溝通的語言，它應當符合雙方的認知邏輯。因此表單設計時，需要解決「產品」和「用戶」２個方面的問題：
? 表單需要用戶提供哪些信息，保證信息的正常流轉和業務的完整
? 用戶如何理解這些信息，如何更好地幫助用戶完成表單填寫
尤其是面對復雜表單，需要從這兩方面尋找到突破口。
? 在業務層面，設計師需要探究用戶的實際需求，反思表單項是否必要，從而減少不必要的選項，提高用戶效率。
? 同時在設計層面，還需要基于用戶認知習慣，通過合理的信息組織、交互形式幫助用戶完成表單任務。
復雜表單通常包含多種業務場景，并且與其他業務存在關聯和嵌套，導致表單內容信息量較大。我們需要通過「刪除」、「組織」、「隱藏」、「轉移」４個交互設計原則，讓表單頁面更加簡單、有效。
前幾年，我們在銀行或者移動營業廳開通一些新業務時，都會填寫表單，通常是密密麻麻一堆信息。但是實際需要填寫的內容可能只有2～3項，業務人員會特意勾選出來給客戶，其余的都是非必填項，或者是業務人員填寫的。
線上表單設計時，沒有專門的業務人員指導，用戶更容易迷失。所以設計師或者產品經理的首要任務就是盡可能地減少表單信息量，降低用戶的認知負荷。
最近在做一個表單的優化，業務方要求增加“入參”、“出參”兩個表格項，說是用戶會看。與用戶溝通后，反饋也說“會看一下”。但是在深度挖掘用戶場景后，發現用戶確實會查看這個信息，只不過不是在當前環節查看，而是在結果項中查看。
所以我們最終去掉了這兩個信息量較大的表格內容，從而讓整個表單的信息量得到了明顯的下降。因此面對復雜長表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復雜信息。
當我們不得不面對復雜表單時，如果采用簡單內容平鋪，用戶看到的是滿屏的散點信息，造成信息識別困難，用戶一時間難以找到填寫思路，反而增加用戶的心理負擔。因此信息的層次性，對于復雜表單至關重要。
首先要從內容和視覺層面讓復雜信息變得清晰、規整，更加符合用戶的認知習慣。例如，可以利用分組標題、分割線、卡片，按照不同信息的類別、屬性和相關性進行區塊劃分。
根據不同的布局和交互，主要有以下4種表單設計模式。
表單分組后，可以按照業務邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單，這種布局方式下，用戶無法全覽頁面信息。頁面上下滾動、定位查找帶來的交互成本比較高。
1）平鋪表單
2）卡片表單
因此順序表單更多地用在業務信息比較簡單的場景中。
為了解決長表單的定位效率問題，可以在順序表單的基礎上增加錨點。另外錨點還可以幫助用戶快速了解表單所包含的內容模塊。
根據錨點的布局，可以分為橫向錨點和縱向錨點兩類。錨點需要吸頂方便用戶操作。本質上來說，錨點表單是順序表單的優化版本。
如果長表單內容沒有依賴關系，還可以將表單拆分為幾個相互獨立的標簽內容，這就是標簽表單。
不過標簽表單更強調內容的并列關系，常用于配置表單中，例如 MAC 或者 Windows 系統的配置彈窗。標簽表單在全新表單中應用較少。
因為標簽表單容易造成內容遺漏，并且無法告知用戶哪些標簽已經填寫，哪些標簽未填寫，或者無法清晰地展示校驗信息。來回切換標簽查看信息，也會影響效率，因此主要用于用戶有目的的配置行為中。
步驟表單是一種常見的表單拆分方式。通過節點將子表單串聯起來，形成一個完整的業務閉環。例如阿里云的云服務器訂單流程，或者一些開戶流程等。
步驟表單有幾個特點：
理論上來說，步驟表單有明顯的操作順序，用戶需要按照節點完成內容填寫，因此不會產生信息遺漏。當然也可以根據實際的業務場景，設置選填節點。但是總得來說，步驟表單更強調的是順序操作。
對于復雜業務，步驟表單可以將分散在不同頁面中的獨立業務串聯起來，在一定程度上具備新人教學功能，幫助用戶了解業務邏輯。減少用戶自定義操作時在不同頁面的跳轉，從而提供新人用戶的操作效率。例如系統配置向導類的步驟表單。
由于步驟表單存在正向和逆向操作，因此設計時還需要考慮清楚逆向操作的設計邏輯。例如：
? 當用戶想要修改前面步驟信息時，除了逐步返回，是否可以步驟條直接跨節點修改？
? 用戶中途退出表單后，重啟時是從第一步開始，還是直接從未填寫的步驟開始呢？
? 用戶如果完成了步驟條表單填寫，想要二次修改時，是用普通表單，還是仍然使用步驟表單形式呢？
步驟表單可以分拆信息，化整為零。但是信息節點也不能過多，否則同樣會影響用戶的操作效率。所以要減少不必要的流程節點。
最近在做設計時，發現步驟表單最后一步是內容預覽。通過用戶調研發現，部分用戶會謹慎地預覽前面４步填寫的內容。而另一部分用戶則認為，剛填寫了內容不需要預覽，強制預覽的設計并不友好。該如何平衡設計呢？
最終我們選擇了將預覽節點取消，將預覽功能調整到第４步，采用「預覽」按鈕的形式。既滿足了部分用戶預覽的需要，另一部分用戶也可以不做預覽，直接提交申請。
所以步驟表單過程中的節點具有一定的強制性，需要謹慎對待，保證節點的合理有效。
表單實際上是任務信息的集合，為了具有更高的適配性，內容通常是多種場景的集合。而場景有高頻、低頻區分，對于高頻信息需要優先展示，便于提高用戶的填寫效率；對于低頻場景，可以隱藏弱化展示，從而降低整個表單的復雜度。
例如我們常見的「高級配置」，通常在表單的底部默認收起展示。
復雜表單中信息會出現多級信息共存的場景。這種場景下，復雜表單默認展示當前選項對應的子內容，隱藏其他選項的內容，從而提高信息的指向性。
3、合理的組件形式
比較典型的就是單選和下拉選擇器如何選擇。有人為了強調效率，一味地追求單選按鈕平鋪展示，認為單選更加直觀，用戶不需要點擊下拉滾動查看備選項。但是用戶同樣需要逐個瀏覽選擇，反而增加了整個頁面的信息量。
所以單選框更多用在備選項較少的場景，如果備選項較多，建議優先采用下拉選擇器，隱藏備選項。
在表單設計時，可以將部分二級信息轉移到彈窗、抽屜中，利用浮層空間拓展業務內容，根據用戶操作逐級加載出來。從而減少表單的信息量。
例如下圖中，沒有將「所有配送區域及運費」直接展示出來供用戶選擇，而是放在了彈窗中，表單中只呈現最后的選擇結果。既簡化了表單的內容，又讓選擇結果更加突出，方便用戶的查看和校驗。
現在很多瀏覽器都增加了密碼存儲功能，減少用戶記憶成本。而在電商購物網站可以設定默認的收貨地址。系統自動讀取調用，從而減少用戶的輸入操作。
現在越來越多的網站支持「手機短信驗證碼」免密注冊登錄方式，或者第三方登錄方式，或者手機端掃碼登錄。將原有的表單填寫轉變為系統行為，從而降低用戶的行為成本。
好了，以上就是我總結的表單設計的內容～
重復一遍：
? 刪除，實現表單輕量化
? 組織，讓表單更加有層次
? 隱藏，讓表單更加靈活
? 轉移，擴展表單的異步空間
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：子牧先生
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司