表單標(biāo)簽對(duì)齊方式如何選？

輯導(dǎo)語(yǔ)：表單是最常用的信息錄入工具，日常生活中，我們每個(gè)人都在和各種表單打交道。本文作者結(jié)合案例對(duì)表單標(biāo)簽的樣式及設(shè)計(jì)注意事項(xiàng)進(jìn)行了詳細(xì)的說(shuō)明，相信對(duì)表單標(biāo)簽不熟悉的同學(xué)看完后肯定會(huì)有不少的收獲~

輸入設(shè)計(jì)和表單設(shè)計(jì)是產(chǎn)品經(jīng)理與交互設(shè)計(jì)師的核心技能，你可以把它們用在各類軟件和各種平臺(tái)上。

一、首先什么是標(biāo)簽？

我們先來(lái)復(fù)習(xí)一下文本輸入框的構(gòu)成。

△文本輸入框的構(gòu)成

文本容器/Container—可交互的輸入?yún)^(qū)域
輸入文本/Input text—所輸入的文本內(nèi)容
標(biāo)簽文本/Label Text—告訴用戶這個(gè)表單字段中要輸入的內(nèi)容屬性
占位符文本/Placeholder text—輸入信息的范例，用戶后續(xù)需要用自己的內(nèi)容替代它
幫助和驗(yàn)證（可選）/Helper or Validation text(optional)—提供上下文信息和驗(yàn)證信息
引導(dǎo)圖標(biāo)（可選）/Leading icon(optional)—描述文本字段所需的輸入類型和特征
后綴圖標(biāo)（可選）/Trailing icon(optional)—對(duì)輸入內(nèi)容進(jìn)行控制，比如顯示和隱藏

我們今天要聊的就是第3點(diǎn)：標(biāo)簽文本/Label Text。

標(biāo)簽應(yīng)該用人們能明白的語(yǔ)言提出簡(jiǎn)潔問(wèn)題，以便于回答。

但依舊依賴于表單元素的布局。

二、標(biāo)簽對(duì)齊方式

輸入框標(biāo)簽應(yīng)當(dāng)頂對(duì)齊、右對(duì)齊還是左對(duì)齊？

先來(lái)看看這幾種對(duì)齊方式的優(yōu)缺點(diǎn)。

1. 頂對(duì)齊標(biāo)簽/Top aligned labels

△頂對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

頂對(duì)齊時(shí)間最快，由于標(biāo)簽和輸入框的位置非常靠近，處理起來(lái)毫不費(fèi)力。清晰的完成路徑，只需要往下移動(dòng)。
提供了大量的橫向空間，可以用來(lái)擴(kuò)大或者收縮標(biāo)簽文字，而不會(huì)對(duì)整個(gè)頁(yè)面布局產(chǎn)生負(fù)面影響。
比如說(shuō)法語(yǔ)、德語(yǔ)或荷蘭語(yǔ)比英語(yǔ)長(zhǎng)很多的語(yǔ)言，容易對(duì)表單布局產(chǎn)生破壞力。
橫向空間的富余，可以以多種方式組合相關(guān)輸入框。

缺點(diǎn)：

eg: Amazon 寄送地址表單的頂對(duì)齊標(biāo)簽提供了充裕空間，可水平分組相關(guān)內(nèi)容.

2. 左對(duì)齊標(biāo)簽/Left-aligned labels

△左對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

容易瀏覽標(biāo)簽，只要上下瀏覽表單問(wèn)題，不會(huì)被輸入框打斷。
垂直空間占用少。

缺點(diǎn)：

標(biāo)簽和相關(guān)輸入框相鄰間距過(guò)大，延長(zhǎng)完成時(shí)間。
根據(jù)馬泰奧的研究，“典型掃視時(shí)間為500毫秒，很長(zhǎng)，說(shuō)明用戶經(jīng)歷著沉重的認(rèn)知壓力。”
雖然速度是最慢的，但從辯證的角度來(lái)看，完成時(shí)間較長(zhǎng)并不一定是壞事。
有時(shí)候我們需要用戶謹(jǐn)慎的對(duì)待表單的填寫(xiě)，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級(jí)設(shè)置陌生數(shù)據(jù)時(shí)，就可以使用左對(duì)齊標(biāo)簽。

3. 右對(duì)齊標(biāo)簽/Right-aligned labels

△右對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

缺點(diǎn)：

右對(duì)齊布局造成左側(cè)不齊，可讀性降低；
不夠靈活，如果標(biāo)簽需要兩行文字進(jìn)行展示，會(huì)導(dǎo)致閱讀困難。
但如果既要減少表單占用的垂直空間，又要減少填表時(shí)間的話，右對(duì)齊標(biāo)簽不失為一個(gè)較好的選擇。

eg: Jira 創(chuàng)建故事表單采用右對(duì)齊標(biāo)簽布局

4. 輸入框內(nèi)標(biāo)簽/Label in the input box

優(yōu)點(diǎn)：

對(duì)屏幕的占用空間非常小

缺點(diǎn)：

填寫(xiě)輸入框時(shí)，輸入框的標(biāo)簽會(huì)消失，因此用戶看不到提示；
填完后，也無(wú)法檢查對(duì)錯(cuò)。
且輸入框內(nèi)的標(biāo)簽要明確的表明自己是標(biāo)簽，而不是已填數(shù)據(jù)。
輸入框內(nèi)標(biāo)簽更適合用于只有一個(gè)問(wèn)題（比如搜索框）或者幾個(gè)輸入框的表單或者問(wèn)題非常熟悉的表單（比如通訊錄）。

eg：Dribbble 搜索頁(yè)面為輸入框內(nèi)標(biāo)簽

5. 浮動(dòng)標(biāo)簽/Float label

當(dāng)用戶在Text field中輸入內(nèi)容以后，內(nèi)嵌Label會(huì)浮動(dòng)到Text field上方，成為頂端對(duì)齊。

優(yōu)點(diǎn)：兼具內(nèi)嵌Label和頂端對(duì)齊的優(yōu)點(diǎn)

缺點(diǎn)：輸入內(nèi)容后，標(biāo)簽顯示過(guò)小，對(duì)于小屏幕和視力不佳的用戶來(lái)說(shuō)是個(gè)挑戰(zhàn)。

eg：Yahoo登錄頁(yè)面，輸入框?yàn)楦?dòng)標(biāo)簽

三、總結(jié)

頂對(duì)齊標(biāo)簽，能減少填寫(xiě)時(shí)間，適用于本地化，標(biāo)簽長(zhǎng)度可以靈活多變。
右對(duì)齊標(biāo)簽，與頂對(duì)齊標(biāo)簽類似，但可以減少垂直空間的占用。
左對(duì)齊標(biāo)簽，要求人們仔細(xì)填寫(xiě)或者回答多個(gè)問(wèn)題中的若干特定問(wèn)題。
輸入框內(nèi)標(biāo)簽，表單問(wèn)題少，屏幕空間非常有限。
浮動(dòng)標(biāo)簽，注意場(chǎng)景與使用者視力問(wèn)題。
注意區(qū)分標(biāo)簽與數(shù)據(jù)。

擴(kuò)展閱讀：

能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行單一運(yùn)動(dòng)。

事實(shí)上，馬泰奧·彭佐從2006年7月進(jìn)行的眼動(dòng)研究發(fā)現(xiàn)，頂對(duì)齊標(biāo)簽方式從標(biāo)簽移動(dòng)到輸入框只要50毫秒，比左對(duì)齊標(biāo)簽方式快了10倍，后者需要500毫秒；比右對(duì)齊標(biāo)簽方式快2倍，后者高達(dá)240毫秒。

可能覺(jué)得幾百毫秒，覺(jué)得也沒(méi)有多少多長(zhǎng)時(shí)間，但是一旦涉及到需要填寫(xiě)幾百個(gè)錄入項(xiàng)，時(shí)間也是成倍的。

所以在標(biāo)簽對(duì)齊上要根據(jù)場(chǎng)景選擇合適的方式。

作者：Neko，支付產(chǎn)品經(jīng)理/UI/UX；公眾號(hào)：吱了一聲

本文由 @Neko 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自pexels，基于CC0協(xié)議

輯導(dǎo)語(yǔ)：B端表單若設(shè)計(jì)不好，則容易導(dǎo)致不佳的用戶體驗(yàn)，無(wú)法給用戶有效的信息反饋。那么，應(yīng)該如何優(yōu)化B端表單設(shè)計(jì)、提高B端表單的操作效率呢？也許你需要在交互形式、表單頁(yè)面、輸入框等方面做好優(yōu)化。本文作者總結(jié)了提高B端表單操作效率的7個(gè)技巧，不妨來(lái)看一下。

一些同學(xué)在設(shè)計(jì)B端表單時(shí)，不知道需要考慮哪些問(wèn)題，直接使用Ant Design提供的表單模版，或者參考競(jìng)品，上線后用戶反饋難用，產(chǎn)品反饋拓展性低。

那么該如何提高B端表單操作效率呢？這里有7個(gè)技巧分享給大家。

不濫用表單的交互形式；
將復(fù)雜表單進(jìn)行合理的歸納簡(jiǎn)化；
復(fù)雜表單布局要考慮關(guān)聯(lián)性；
表單視覺(jué)可以不平衡；
標(biāo)簽對(duì)齊方式要選對(duì)；
表單頁(yè)面要考慮適配方式；
輸入框不用整齊劃一，可以錯(cuò)落有致。

一、不濫用表單的交互形式

表單的交互設(shè)計(jì)，有時(shí)候往往會(huì)被設(shè)計(jì)所忽略，或者所有交互都采用彈窗，本可以氣泡卡片一步解決，使用彈窗卻要兩步完成，本需要界面跳轉(zhuǎn)承載復(fù)雜表單，卻使用彈窗不停滾動(dòng)。

在表單設(shè)計(jì)時(shí)，該如何選擇合適的交互形式呢？首先我們需要了解常用的交互形式有哪些。

常用的交互形式主要有：原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁(yè)面跳轉(zhuǎn)等。

表單交互方式的選擇，我們可以參考 Ant Design 表單設(shè)計(jì)規(guī)范，從關(guān)聯(lián)性和復(fù)雜度進(jìn)行判斷，在選擇時(shí)，我們優(yōu)先考慮信息的復(fù)雜度，其次在考慮相關(guān)性。

1）當(dāng)信息復(fù)雜度低，同時(shí)相關(guān)性高時(shí)，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。

比如釘釘任務(wù)詳情頁(yè)面的數(shù)據(jù)編輯，相關(guān)度極高，同時(shí)信息不復(fù)雜，那么就可選擇原位編輯，在使用原位編輯時(shí)，需要根據(jù)業(yè)務(wù)進(jìn)行判斷，是否有必要進(jìn)行原位編輯。

而Ones的篩選，其數(shù)據(jù)量相對(duì)較多，但是相關(guān)性極高，那么就可以選擇氣泡的形式；有贊教育綁定銷售員，采用了彈窗的形式，這里也可采取氣泡的形式。

2）當(dāng)信息復(fù)雜度高，但關(guān)聯(lián)性也較高時(shí)，我們可以使用抽屜、全屏彈窗的交互方式。

比如神策數(shù)據(jù)，信息量較為復(fù)雜，同時(shí)有一定相關(guān)性，數(shù)據(jù)創(chuàng)建后即可在列表中查看；但是當(dāng)數(shù)據(jù)特別復(fù)雜，同時(shí)新增入口位置較多時(shí)，可采用全屏彈窗的方式，在CRM行業(yè)較常見(jiàn)，比如銷幫幫。

其優(yōu)勢(shì)是，當(dāng)從詳情頁(yè)進(jìn)行新增或編輯時(shí)，編輯完成后，詳情頁(yè)數(shù)據(jù)即可展示當(dāng)前新增的信息，如果是頁(yè)面表單，需要刷新數(shù)據(jù)才可以查看到，體驗(yàn)感較低。

3）當(dāng)信息復(fù)雜度高或信息獨(dú)立時(shí)，我們可以使用頁(yè)面的交互方式。

比如有贊的新增報(bào)名，其關(guān)聯(lián)性就不像CRM那么強(qiáng)，因此直接采用頁(yè)面的交互方式就可以；而阿里巴巴的創(chuàng)建網(wǎng)絡(luò)信息復(fù)雜度較高，同時(shí)相對(duì)獨(dú)立，因此也適合采用頁(yè)面進(jìn)行交互。

二、將復(fù)雜表單進(jìn)行合理的歸納簡(jiǎn)化

對(duì)于復(fù)雜表單，在設(shè)計(jì)時(shí)需要對(duì)其進(jìn)行合理的歸納簡(jiǎn)化，降低表單填寫(xiě)負(fù)荷。

一般來(lái)說(shuō)，表單可分為基礎(chǔ)表單、分步表單、錨點(diǎn)定位、標(biāo)簽頁(yè)這幾類。

1）當(dāng)表單條目數(shù)在7個(gè)內(nèi)，表單較為簡(jiǎn)單，這時(shí)候我們一般直接采用基礎(chǔ)表單，比如有贊更換負(fù)責(zé)人頁(yè)面：

2）當(dāng)表單條目數(shù)在7個(gè)以上，可歸類到復(fù)雜表單，這時(shí)候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的分組方式，進(jìn)行歸納簡(jiǎn)化，降低表單填寫(xiě)負(fù)荷。具體該如何選擇呢？

① 如果每個(gè)組之間有邏輯先后順序，那么推薦使用分步表單，比如阿里云的購(gòu)買(mǎi)。

② 如果每個(gè)組之間關(guān)聯(lián)性較強(qiáng)，就不適合分開(kāi)，推薦使用錨點(diǎn)定位，比如銷幫幫的編輯銷售機(jī)會(huì)、新建客戶等表單都是采用錨點(diǎn)定位。

③ 如果每個(gè)組既沒(méi)有邏輯先后順序，也沒(méi)有關(guān)聯(lián)性時(shí)，推薦使用標(biāo)簽分組，比如飛書(shū)的發(fā)票管理，都是相對(duì)獨(dú)立的表單。

三、復(fù)雜表單布局要考慮關(guān)聯(lián)性

上面提到了為復(fù)雜表單進(jìn)行合理的歸納簡(jiǎn)化，但是歸納簡(jiǎn)化后采用什么布局方式更合適呢？

表單頁(yè)面的布局方式，綜合起來(lái)可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。

在選擇時(shí)，和表單的交互方式選擇一樣，可參考 Ant Design 表單設(shè)計(jì)規(guī)范，從關(guān)聯(lián)性和復(fù)雜度進(jìn)行判斷，在選擇時(shí)，我們優(yōu)先考慮信息的復(fù)雜度，其次再考慮相關(guān)性。

1）當(dāng)條目數(shù)在7個(gè)內(nèi)時(shí)，仍然使用基礎(chǔ)布局，比如網(wǎng)易互客的企業(yè)信息資料新增：

2）當(dāng)表單條目數(shù)在7個(gè)以上，可歸類到復(fù)雜表單，這時(shí)候仍然根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的布局方式，提高表單的瀏覽效率和屏效需求。

① 當(dāng)表單空間有限，且相關(guān)性較強(qiáng)時(shí)，推薦使用弱分組，將多個(gè)組合在一行中，形成分組的暗示。

PS：弱分組也可和區(qū)域內(nèi)分組和卡片分組組合使用，從而提高屏效。

② 當(dāng)條目數(shù)在7-15個(gè)內(nèi)時(shí)，相關(guān)性較強(qiáng)時(shí)，使用區(qū)域內(nèi)分組較為適合，比如網(wǎng)易七魚(yú)的新建在線質(zhì)檢模版：

③ 當(dāng)條目數(shù)在15個(gè)以上，推薦使用卡片布局較為合適，比如阿里云服務(wù)購(gòu)買(mǎi)表單：

四、表單視覺(jué)可以不平衡

在設(shè)計(jì)表單時(shí)，我們總覺(jué)得視覺(jué)重心偏左，因此在設(shè)計(jì)時(shí)我們總想讓視覺(jué)變得更平衡。

比如京東云，使用大屏電腦看，信息全集中在左邊，感覺(jué)視覺(jué)有點(diǎn)失衡。而類似飛書(shū)的居中設(shè)計(jì)，視覺(jué)會(huì)更平衡。

于是我在設(shè)計(jì)時(shí)也在考慮要不要用居中設(shè)計(jì)的方式呢？但是當(dāng)我繼續(xù)查找資料時(shí)發(fā)現(xiàn)，其實(shí)在表單的設(shè)計(jì)中我們不用過(guò)度的追求視覺(jué)平衡，首先人的視覺(jué)動(dòng)線遵循F模型，同時(shí)根據(jù)行業(yè)相關(guān)信息可讀性研究，眼動(dòng)舒適角度為30度。

因此當(dāng)表單信息較少，不考慮屏效時(shí)，采用從上往下的方式，據(jù)研究這是能夠最高效完成任務(wù)的布局方式。

為了印證這個(gè)結(jié)論，我收集了近50個(gè)B端后臺(tái)，共507個(gè)表單，竟然發(fā)現(xiàn)只有2個(gè)產(chǎn)品用了視覺(jué)重心居中的設(shè)計(jì)。

這個(gè)結(jié)果讓我挺詫異的，但又在情理之中。一個(gè)是飛書(shū)設(shè)置類表單、一個(gè)是百度云購(gòu)買(mǎi)表單。

設(shè)置類表單，數(shù)據(jù)項(xiàng)較少，相對(duì)比較簡(jiǎn)單，使用居中設(shè)計(jì)可以讓用戶更聚焦。

而百度云的表單，雖然也是視覺(jué)居中，但是將側(cè)邊欄進(jìn)行收起，在設(shè)計(jì)上和我們普通網(wǎng)頁(yè)設(shè)計(jì)方式類似，從而承載更多的信息。

而其他的CRM、ERP、云產(chǎn)品、OA、項(xiàng)目研發(fā)、文檔產(chǎn)品、在線教育、HR、BI等系統(tǒng)產(chǎn)品的錄入類表單均采用的視覺(jué)偏左的設(shè)計(jì)方式，不管表單拓展多復(fù)雜的信息，都不會(huì)影響整體的一致性。

所以，在設(shè)計(jì)表單時(shí)不用過(guò)度追求視覺(jué)平衡，而是需要優(yōu)先考慮信息操作效率，信息閱讀效率。

五、標(biāo)簽對(duì)齊方式要選對(duì)

標(biāo)簽分為左標(biāo)簽、右標(biāo)簽、頂標(biāo)簽三種，不同的對(duì)齊方式，使用場(chǎng)景不同。

具體該如何選擇呢？我們需要從3個(gè)方面進(jìn)行考慮：操作效率、標(biāo)簽長(zhǎng)度、屏效、視覺(jué)對(duì)齊。

1. 操作效率

根據(jù)Matteo Penzo的研究總結(jié)得到的瀏覽時(shí)間表發(fā)現(xiàn)，標(biāo)簽移動(dòng)到輸入框的時(shí)間，頂部對(duì)齊最快只要50ms，其次是右對(duì)齊240ms，左對(duì)齊耗費(fèi)時(shí)間最長(zhǎng)500ms。

因此當(dāng)以操作效率為主時(shí)，推薦使用頂對(duì)齊的方式。

2. 標(biāo)簽長(zhǎng)度

當(dāng)標(biāo)簽長(zhǎng)度超過(guò)8個(gè)字，或者需要考慮中英文雙版本時(shí)，推薦使用頂對(duì)齊的方式，其容納的標(biāo)簽文字更多，拓展性更好，比如Ones的建任務(wù)的標(biāo)簽，就采用標(biāo)簽頂對(duì)齊的方式：

3. 屏效

如果只考慮屏效，那么標(biāo)簽左對(duì)齊右對(duì)齊均可，但是如果還考慮表單錄入效率，那么推薦使用標(biāo)簽右對(duì)齊的方式，比如蜂鳥(niǎo)匯報(bào)：

4. 視覺(jué)對(duì)齊

一般情況我們?cè)谠O(shè)計(jì)表單，優(yōu)先考慮效率和屏效，但在競(jìng)品分析中發(fā)現(xiàn)，竟然有50%的表單采用了標(biāo)簽左對(duì)齊的方式，因?yàn)檫@樣可以讓標(biāo)簽和其他內(nèi)容保持對(duì)齊，比如神策網(wǎng)：

因此，在進(jìn)行標(biāo)簽對(duì)齊方式的選擇時(shí)，我們首先要清楚以什么為主，什么是可以犧牲的，比如神策網(wǎng)選擇了視覺(jué)對(duì)齊，而犧牲的是操作效率。

六、表單頁(yè)面要考慮適配方式

設(shè)計(jì)時(shí)如果不考慮適配方式，那么前端可能不考慮，可能用他覺(jué)得合理的方式，在實(shí)際使用時(shí)就會(huì)導(dǎo)致體驗(yàn)不好，后面想在調(diào)整就得重新等排期了，因此在設(shè)計(jì)時(shí)就需要把適配方式定好。

表單在設(shè)計(jì)時(shí)一般有2種適配方式，一種是固定適配，一種是間距適配。

1. 固定適配，設(shè)計(jì)需要注意

設(shè)計(jì)時(shí)，需要保證最小分辨率能夠正常顯示，表單中信息寬度固定，不隨分辨率變化而變化。該方式適合用于表單頁(yè)面的適配中。

當(dāng)采用弱分組布局時(shí)，隨分辨率變小，數(shù)據(jù)項(xiàng)自動(dòng)掉下來(lái)，其他保持不變。

這里最小分辨率大家根據(jù)自己公司情況而定，我在設(shè)計(jì)時(shí)設(shè)定1366X768為最小分辨率。

下圖是百度統(tǒng)計(jì)流量研究所，大家可以看看數(shù)據(jù)，具體以自身公司而定，因?yàn)橐恍﹩挝豢赡苓€在使用1280X720的分辨率，那么就設(shè)定1280為最小兼容的分辨率。

2. 間距適配，和移動(dòng)端類似，間距固定，組件自適應(yīng)

該適應(yīng)方式在彈窗、抽屜中較為使用，表單頁(yè)中不太推薦使用該方式，因?yàn)楫?dāng)分辨率變大，眼動(dòng)的視覺(jué)變大，不利于信息瀏覽。

七、輸入框不用整齊劃一，可以錯(cuò)落有致

表單頁(yè)在設(shè)計(jì)時(shí)，我們總是糾結(jié)到底整齊排列好，還是錯(cuò)落排列好，錯(cuò)落排列又該遵循什么規(guī)則呢，這里推薦大家閱讀Ant_Design的文章《整齊劃一？不如錯(cuò)落有致》。

文章提到，如果表單跟隨空間自適應(yīng)會(huì)造成不穩(wěn)定的情況，線上效果會(huì)呈現(xiàn)以下效果。

同時(shí)輸入框的寬度不應(yīng)該自適應(yīng)，而需要根據(jù)填寫(xiě)內(nèi)容的長(zhǎng)度來(lái)定，減輕判斷負(fù)擔(dān)。

最后，錯(cuò)落有致更舒適，整齊劃一在視線上有隱性的截?cái)啵瑫?huì)感覺(jué)缺了一塊內(nèi)容。

如何錯(cuò)落有致呢？有什么規(guī)則嗎？

Ant_Design設(shè)定104px 為原子級(jí)寬度尺碼 XS，通過(guò)倍數(shù)+間距疊加的方式（此處計(jì)算間距的原因是為了兼顧組合 input 和單個(gè) input 對(duì)齊問(wèn)題）從小到大去依次推導(dǎo)出更大的四種寬度來(lái)擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對(duì)齊關(guān)系。

通過(guò)對(duì)比，我們可以明顯地看到，錯(cuò)落有致的排列方式更加舒適。

當(dāng)然，你在設(shè)計(jì)時(shí)，最小原子的寬度不一定設(shè)置為104，也可根據(jù)業(yè)務(wù)情況將最小原子X(jué)S設(shè)置為可容納6個(gè)中文漢字，然后在通過(guò)如下規(guī)則進(jìn)行換算。

八、畫(huà)重點(diǎn)

本文針對(duì)如何提高B端表單操作效率，整理了7個(gè)技巧：

不濫用表單的交互形式；
將復(fù)雜表單進(jìn)行合理的歸納簡(jiǎn)化；
復(fù)雜表單布局要考慮關(guān)聯(lián)性；
表單視覺(jué)可以不平衡；
標(biāo)簽對(duì)齊方式要選對(duì)；
表單頁(yè)面要考慮適配方式；
輸入框不用整齊劃一，可以錯(cuò)落有致。

希望通過(guò)本文的分享，讓大家有一個(gè)更清晰的認(rèn)知，從而提高表單操作效率。

參考引文：

《且曼B端產(chǎn)品設(shè)計(jì)之表單設(shè)計(jì)》

人眼的視角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

淺談B端表單設(shè)計(jì)

https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ

Ant Design 表單設(shè)計(jì)規(guī)范

https://ant.design/docs/spec/research-form-cn

Ant Design ProForm 高級(jí)表單

https://procomponents.ant.design/components/form

QueryFilter / LightFilter 篩選表單

https://procomponents.ant.design/components/query-filter

整齊劃一，不如錯(cuò)落有致

https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

作者：風(fēng)箏KK，公眾號(hào)：海鹽社

本文由 @風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議

簽制作軟件中在進(jìn)行繪制文字的時(shí)候，其中文字的排版對(duì)齊方式有好幾種，今天就給大家分享一下都有哪些文字對(duì)齊方式。

首先打開(kāi)標(biāo)簽制作軟件，新建標(biāo)簽，設(shè)置標(biāo)簽尺寸，然后點(diǎn)擊“查看”—“對(duì)齊”就可以看到軟件的對(duì)齊方式有那幾種了。

左對(duì)齊：非常好理解就選中文字之后排版的樣式就是左對(duì)齊了。其余的右對(duì)齊、頂對(duì)齊、底對(duì)齊、都可以按照這種方式去進(jìn)行理解排版樣式。比如說(shuō)在軟件中繪制一個(gè)文字，選中右對(duì)齊之后點(diǎn)擊確認(rèn)，效果如下：

看了上面的效果就理解了右對(duì)齊方式。就是在繪制的文字藍(lán)色區(qū)域的框框中文字排版樣式是右對(duì)齊。

除了上面的對(duì)齊方式之外，還有一種文字的對(duì)齊方式是普通文本中“兩端對(duì)齊”的方式，接下來(lái)我將繪制的普通文本設(shè)置對(duì)齊方式為兩端對(duì)齊，并設(shè)置一下“字符等寬” ，點(diǎn)擊確認(rèn)之后就可以看到效果。

以上就是在標(biāo)簽制作軟件中繪制繪制文字時(shí)候的幾種對(duì)齊方式了，有需要的可根據(jù)實(shí)際的需求去進(jìn)行自定義設(shè)置。

在線咨詢

上一篇：如何制作一個(gè)完美的全屏視頻H5
下一篇：編寫(xiě)你的第一行 HTML 代碼，來(lái)幫助蝙蝠俠寫(xiě)一封情書(shū)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

表單標(biāo)簽對(duì)齊方式如何選？

一、首先什么是標(biāo)簽？

二、標(biāo)簽對(duì)齊方式

1. 頂對(duì)齊標(biāo)簽/Top aligned labels

2. 左對(duì)齊標(biāo)簽/Left-aligned labels

3. 右對(duì)齊標(biāo)簽/Right-aligned labels

4. 輸入框內(nèi)標(biāo)簽/Label in the input box

5. 浮動(dòng)標(biāo)簽/Float label

三、總結(jié)

一、不濫用表單的交互形式

二、將復(fù)雜表單進(jìn)行合理的歸納簡(jiǎn)化

三、復(fù)雜表單布局要考慮關(guān)聯(lián)性

四、表單視覺(jué)可以不平衡

五、標(biāo)簽對(duì)齊方式要選對(duì)

1. 操作效率

2. 標(biāo)簽長(zhǎng)度

3. 屏效

4. 視覺(jué)對(duì)齊

六、表單頁(yè)面要考慮適配方式

1. 固定適配，設(shè)計(jì)需要注意

2. 間距適配，和移動(dòng)端類似，間距固定，組件自適應(yīng)

七、輸入框不用整齊劃一，可以錯(cuò)落有致

八、畫(huà)重點(diǎn)

您的項(xiàng)目需求