2021-2-25 資深UI設計者
大家是不是時常困惑于，B 端的表單設計體現不出高級感？設計發揮的空間特別的少？
那是你沒用對發力點~
B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現差別?？偨Y了 4 個思考問題：
案例：以創建公眾號消息自動推送為例
另一方面要考慮信息層次。
搞定了基本要素后，我們開始考慮如何表現信息層次。
在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。
我所認為表單之間的關系分為 3 種：
優點：
平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單
缺點：
使用場景：
當需要完成一個簡單快速的任務，輸入少量信息即可完成創建
優點：
用于復雜任務時，拆解任務進行編排，適當的任務分割，可以降低用戶出錯率
缺點：
使用場景：
適用于大型、復雜任務
優點：
減少不必要（非重要）的輸入項，能適當的減輕用戶認知負擔
缺點：
使用場景：
特殊場景下使用
那么用一條完整的鏈路來表達就是：
了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：
封裝密度高且信息密度低
△ 圖中案例，僅做示例說明
將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？
小結：
分析了解表單的結構關系，判斷表單，尋找共性的內容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。
關于使用何種布局方式的判斷，應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。
1. 信息的復雜度和相關性模型
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn
2. 區隔方式
根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn
3. 注意事項
文章來源：優設 作者：交互思維鋪子
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務