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