大家看到上圖，前三個是行距的問題：

• 第一個太擠了，都粘在一起了，這樣眼睛在看這個文本的時候會需要花點時間去分辨，這樣的排版會讓讀者看得很累。很不舒服。大家看一下自己手頭上所做文本的是不是太擠了，如果是那就改一下吧！
• 第二個是比較適中的，由于每行分得很清楚，這樣看起來有很強(qiáng)的識別性。
• 第三個是比較寬的，松了一點，這樣看起來也很清楚，但是當(dāng)你的文章不是一兩行而是十幾行與幾十行的時候你就會覺得文章的連貫性產(chǎn)生了很嚴(yán)重的脫節(jié)，一般排版不會越過兩個字體高度（2em）

下面兩個就是字?jǐn)?shù)的問題了，第四個每行文字太長，這樣看起來頭要搖來搖去，這樣讀者更容易顯得很累。因為要不斷的轉(zhuǎn)動頭，或是讓眼球不斷的左右擺動。最舒服的方式就是讀者一眼看上去就能把一行看完，不然從行末到下一行行首也會形成斷裂感。而下面的又太扁了，這樣看起來也不是很舒服。由于在不斷的換行閱讀，眼球也會覺得不舒服。而推薦的最好的字?jǐn)?shù)是： 不大于45個字母，不大于30個漢字。

上面的圖是關(guān)于段距的，第一個是比較合適的，這樣的把段落分開了，讓讀者覺得文章并不是很多很難讀，而如果不把段落當(dāng)一回事，任其自然那么就會如下面一樣，兩段成為一段，這里是兩段還好，如果是幾十段，那么這個文章就很少有人能讀下去了！

“輸入框(Input)應(yīng)當(dāng)符合邏輯地劃分為小組，這樣大腦就可以很好的處理大堆區(qū)域間的關(guān)系。”――《HTML權(quán)威指南》

Web應(yīng)用程序總是利用表單來處理數(shù)據(jù)錄入和配置，但并不是所有的表單都保持一致。輸入?yún)^(qū)域的對齊方式，各自的標(biāo)簽(label)，操作方式，以及周圍的視覺元素都會或多或少影響用戶的行為。

表單布局

考慮到用戶完成表單填寫的時間應(yīng)當(dāng)盡可能的短，并且收集的數(shù)據(jù)都是用戶所熟悉的（比如姓名、地址、付費信息等），垂直對齊的標(biāo)簽和輸入框可以說是最佳的。每對標(biāo)簽和輸入框垂直對齊給人一種兩者接近的感覺，并且一致的左對齊減少了眼睛移動和處理時間。用戶只需要往一個方向移動:下。

在這種布局中，推薦使用加粗的標(biāo)簽，這可以增加它們視覺比重，提高其顯著性。如果不加粗的話，從用戶的角度講，標(biāo)簽和輸入框的文字幾乎就一樣了。

如果一個表單上的數(shù)據(jù)并不為人熟悉或者在邏輯上分組有困難（比如一個地址的多個組成部分），左對齊的標(biāo)簽可以很容易的通覽表單的信息。用戶只需要上下看看左側(cè)一欄標(biāo)簽就可以了，而不會被輸入框打斷思路。但這樣一來，標(biāo)簽與其對應(yīng)的輸入框之間的距離通常會被更長的標(biāo)簽拉長，可能會影響填寫表單的時間。用戶必須左右來回的跳轉(zhuǎn)目光來找到兩個對應(yīng)的標(biāo)簽和輸入框。

于是產(chǎn)生了一種替代的方案，標(biāo)簽右對齊布局，使得標(biāo)簽和輸入框之間的聯(lián)系更緊密。然而結(jié)果是左邊參差不齊的空白和標(biāo)簽讓用戶很難快速檢索表單要填寫的內(nèi)容。在西方國家，人們習(xí)慣于從左至右的書寫，所以這種右對齊的布局就給用戶造成了閱讀障礙。

借助可視化元素

由于“標(biāo)簽左對齊布局”的優(yōu)點（方便檢索并且減少垂直高度），嘗試糾正它的主要缺點（標(biāo)簽和輸入框的分離）就很誘惑人。

一個方案就是增加背景色和分割線，不同的背景色產(chǎn)生了一列垂直的標(biāo)簽和一列垂直的輸入框，每一組標(biāo)簽和輸入框利用清晰的水平線分開。雖然這聽上去不錯，但是還是會存在問題。

對比之前的形態(tài)（用戶主觀的視覺區(qū)分），這增加了15個視覺元素：中間線、一個個有背景色的單元格以及一條條的水平線。這些元素會轉(zhuǎn)移用戶的視線，讓用戶難以聚焦到一些重要的元素上，比如標(biāo)簽和輸入框。正如 Edward Tufte指出的:“信息本身存在差異，必然產(chǎn)生感官上的不同。”換句話說，任何對布局無用的視覺元素都會不斷地擾亂布局。當(dāng)你試著瀏覽左側(cè)的標(biāo)簽就可以發(fā)現(xiàn)，你的視線總是被打斷，停下來想那些水平線、單元格和背景顏色。

當(dāng)然這并不意味著放棄背景色和線條。它們對于劃分相關(guān)區(qū)域信息還是很有效的。比如一條細(xì)水平線或者一個淺淺的背景色，都可以從視覺上組合相關(guān)數(shù)據(jù)。背景色和線條對于區(qū)分表單的主要操作按鈕尤其有效。

主次操作

一個表單的主要操作（通常是“提交”或“保存”）需要一個比較強(qiáng)的視覺比重（在上面的例子里用了亮色調(diào)、粗字體、背景色等等）。這相當(dāng)于給用戶一個提示：您已/即將完成填寫表單。

當(dāng)一個表單有多個操作，比如“繼續(xù)”和“返回”，那有必要減輕次要操作的視覺重量。這可以最小化用戶潛在的操作錯誤的風(fēng)險。

雖然以上內(nèi)容可以更好的讓你設(shè)計表單，但是組合布局、可視化元素以及內(nèi)容，仍然需要經(jīng)過用戶的測試以及數(shù)據(jù)分析（完成度評估、錯誤報告等）。