編輯導語：在設計表單時，你有考慮過如何排版？左對齊還是右對齊？縱排列還是橫排列？這篇文章作者詳細介紹了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ù)較長的情況。

從上面的分析可以看出來影響表單布局方式的主要是兩點：

頁面內容?和?承載內容的容器。

1. 頁面內容：內容數(shù)量的多少直接會影響布局，內容越少信息邏輯越簡單，思考過程越容易，反之內容越多邏輯結構越復雜，考慮的東西就越多，要有序的、有規(guī)律的去布局信息。
2. 容器：容器的大小對應單位面積展示信息數(shù)量的多少，也會直接影響到表單的布局，常見的容器有頁面（最大）、抽屜（大）、彈窗（中）、氣泡（?。?/strong>。