B端表單設計思考
編輯導語:在設計表單時,你有考慮過如何排版?左對齊還是右對齊?縱排列還是橫排列?這篇文章作者詳細介紹了B端表單設計中的對齊問題,推薦想要了解B端表單設計的童鞋閱讀。
當我們使用表單組件、或設計表單頁面時Label 和 input 應該上下還是左右排列、表單項應該縱向排列還是橫向排列、在頁面中應該居中對齊還是左對齊呢
當我們使用表單組件、或設計表單頁面時,往往有最直覺的設計經(jīng)驗本能驅動我們去解決這類看似在界面設
計中最簡單的問題,但每每到細微之處,又會有無數(shù)疑問從細節(jié)中冒出來給我們設計師造成困擾。
在做表單設計中經(jīng)常這樣的兩個問題:
一是對齊問題。
標題到底向左還是向右對齊,好像兩種都有可以都不太影響操作。
二是輸入框長度問題。
A:你這個框長度為什么不一樣啊,看起來好亂。
B:你這么框為什么這么長,我這只有展示兩個數(shù)字啊 。
一、對齊問題
先說下對齊問題,怎么去選擇對齊方式,在日常表單設計中常見的對齊方式有左對齊、右對齊、和頂部對齊。
然后三種對齊方式分從內容關聯(lián)性、標題長度的靈活性、空間的占比、閱讀體驗等幾個維度進行優(yōu)劣分析。
優(yōu)點:閱讀視線對齊,比較符合人正常瀏覽習慣,豎向空間占用較少。
缺點:標題長度限制性較大、內容關聯(lián)性較低、瀏覽效率低、閱讀成本較高。
適用場景:標題字符數(shù)≤7,表單內容適中、邏輯相對復雜、需要仔細閱讀的頁面。
優(yōu)點:內容關聯(lián)性強、版式整齊、豎向空間占用少。
缺點:標題長度靈活性不高、左邊起點對不齊、瀏覽速度慢。
適用場景:數(shù)據(jù)內容多、邏輯關系簡單、標題字數(shù)少的情況(如篩選條件)。
優(yōu)點:標簽字符長度靈活度高、瀏覽效率相對較高、信息展示清晰。
缺點:豎向空間占比大。
適用場景:標題字符數(shù)較長的情況。
從上面的分析可以看出來影響表單布局方式的主要是兩點:
頁面內容?和?承載內容的容器。
- 頁面內容:內容數(shù)量的多少直接會影響布局,內容越少信息邏輯越簡單,思考過程越容易,反之內容越多邏輯結構越復雜,考慮的東西就越多,要有序的、有規(guī)律的去布局信息。
- 容器:容器的大小對應單位面積展示信息數(shù)量的多少,也會直接影響到表單的布局,常見的容器有頁面(最大)、抽屜(大)、彈窗(中)、氣泡(?。?/strong>。
tips:容器的選擇要符合當期業(yè)務場景分析適用情況,主要從上下頁面的關聯(lián)性、任務的復雜程度?和?操作流暢程度?去選擇適合的容器
如果頁面直接存在強關聯(lián)性,需要停留在當期頁面進行操作并且展示信息不多時,建議使用彈窗或者抽屜。
如果關聯(lián)較弱且信息量較大時,建議新開頁面進行操作,沉浸操作注意力會更加集中。
二、總結
對于信息量大、業(yè)務場景復雜、需要仔細閱讀的頁面(如合同審核、項目審批、訂單報價等)推薦 單列 左對齊方式?布局。
當標題字數(shù)長度過長,影響頁面排版美觀和體驗時,推薦?頂對齊方式 布局。
正常情況推薦 單列布局 的方式。
- 體驗上:閱讀速度快能提高填寫效率。
- 設計上:減少設計成本,復用率高。
- 技術上:開發(fā)成本低,比較容易適配和擴展。
多列布局時,建議采用 右對齊方式布局,保證模塊之間的親密性,減少閱讀誤差。多列閱讀效率較低,除特殊情況不建議采用多列布局。
原文鏈接:https://m.ui.cn/details/610344
本文由 @木登Zero 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。
題圖來自 Unsplash,基于CC0協(xié)議
二是輸入框長度問題。(展開說說在哪鵝)
實用性很強!下次就用上!感謝作者分享~