中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在設(shè)計(jì)表單時(shí)，你有考慮過如何排版？左對(duì)齊還是右對(duì)齊？縱排列還是橫排列？這篇文章作者詳細(xì)介紹了B端表單設(shè)計(jì)中的對(duì)齊問題，推薦想要了解B端表單設(shè)計(jì)的童鞋閱讀。

當(dāng)我們使用表單組件、或設(shè)計(jì)表單頁(yè)面時(shí)Label 和 input 應(yīng)該上下還是左右排列、表單項(xiàng)應(yīng)該縱向排列還是橫向排列、在頁(yè)面中應(yīng)該居中對(duì)齊還是左對(duì)齊呢

當(dāng)我們使用表單組件、或設(shè)計(jì)表單頁(yè)面時(shí)，往往有最直覺的設(shè)計(jì)經(jīng)驗(yàn)本能驅(qū)動(dòng)我們?nèi)ソ鉀Q這類看似在界面設(shè)

計(jì)中最簡(jiǎn)單的問題，但每每到細(xì)微之處，又會(huì)有無數(shù)疑問從細(xì)節(jié)中冒出來給我們?cè)O(shè)計(jì)師造成困擾。

在做表單設(shè)計(jì)中經(jīng)常這樣的兩個(gè)問題：

一是對(duì)齊問題。

標(biāo)題到底向左還是向右對(duì)齊，好像兩種都有可以都不太影響操作。

二是輸入框長(zhǎng)度問題。

A：你這個(gè)框長(zhǎng)度為什么不一樣啊，看起來好亂。

B：你這么框?yàn)槭裁催@么長(zhǎng)，我這只有展示兩個(gè)數(shù)字啊 。

一、對(duì)齊問題

先說下對(duì)齊問題，怎么去選擇對(duì)齊方式，在日常表單設(shè)計(jì)中常見的對(duì)齊方式有左對(duì)齊、右對(duì)齊、和頂部對(duì)齊。

然后三種對(duì)齊方式分從內(nèi)容關(guān)聯(lián)性、標(biāo)題長(zhǎng)度的靈活性、空間的占比、閱讀體驗(yàn)等幾個(gè)維度進(jìn)行優(yōu)劣分析。

優(yōu)點(diǎn)：閱讀視線對(duì)齊，比較符合人正常瀏覽習(xí)慣，豎向空間占用較少。

缺點(diǎn)：標(biāo)題長(zhǎng)度限制性較大、內(nèi)容關(guān)聯(lián)性較低、瀏覽效率低、閱讀成本較高。

適用場(chǎng)景：標(biāo)題字符數(shù)≤7，表單內(nèi)容適中、邏輯相對(duì)復(fù)雜、需要仔細(xì)閱讀的頁(yè)面。

優(yōu)點(diǎn)：內(nèi)容關(guān)聯(lián)性強(qiáng)、版式整齊、豎向空間占用少。

缺點(diǎn)：標(biāo)題長(zhǎng)度靈活性不高、左邊起點(diǎn)對(duì)不齊、瀏覽速度慢。

適用場(chǎng)景：數(shù)據(jù)內(nèi)容多、邏輯關(guān)系簡(jiǎn)單、標(biāo)題字?jǐn)?shù)少的情況（如篩選條件）。

優(yōu)點(diǎn)：標(biāo)簽字符長(zhǎng)度靈活度高、瀏覽效率相對(duì)較高、信息展示清晰。

缺點(diǎn)：豎向空間占比大。

適用場(chǎng)景：標(biāo)題字符數(shù)較長(zhǎng)的情況。

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

頁(yè)面內(nèi)容?和?承載內(nèi)容的容器。

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