国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

表單元素或者模塊，在現(xiàn)實(shí)生活中的產(chǎn)品設(shè)計(jì)里十分常見，那么，你有留意過表單設(shè)計(jì)都有哪些常見的交互形式和布局樣式嗎？作為一名設(shè)計(jì)師，你要怎么做好表單布局，并選擇適合目標(biāo)用戶操作習(xí)慣的交互方式？一起來看看作者的分析和總結(jié)。

上一篇我們聊了關(guān)于表單設(shè)計(jì)的基礎(chǔ)知識(shí)點(diǎn)。接下來我們來聊聊表單系列的第二篇，表單常見的布局樣式和交互形式。

將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設(shè)計(jì)師，對(duì)表單能有一個(gè)更好的了解，從而避免在工作中進(jìn)入誤區(qū)，也希望能給PM們提供一些思路。

三、表單的布局形式

1. 常見的表單布局

在表單設(shè)計(jì)中，通常需要根據(jù)信息的容量來選擇合理的內(nèi)容形式來組織表單的內(nèi)容形式，以此來確保信息屏效比和用戶的操作效率。

其中所謂“屏效”比是一個(gè)關(guān)于界面設(shè)計(jì)的一個(gè)概念，最初起源于諧音“坪效”，“坪效”指的是每坪的面積可以產(chǎn)出多少營業(yè)額（營業(yè)額/專柜所占總坪數(shù)），是一個(gè)市場營銷領(lǐng)域的概念，而界面設(shè)計(jì)中的“屏效”則是指屏幕單位時(shí)間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率的提升。

依據(jù)表單的組織方式可以將其分為表單的組織形式分為三種，分別為：基礎(chǔ)布局、分組布局、分步驟布局。

1）基礎(chǔ)布局

基礎(chǔ)平鋪是最簡單的表單組織形式，將所有需要填寫的表單內(nèi)容項(xiàng)直接羅列在頁面上。主要針對(duì)表單內(nèi)容項(xiàng)較少且項(xiàng)目之間無邏輯關(guān)系不能按照一定的相關(guān)性進(jìn)行分組的表單。

• 優(yōu)勢：相對(duì)簡潔、便于操作，比較適用于完成一個(gè)簡單快捷的任務(wù)；
• 劣勢：表單項(xiàng)數(shù)量較大時(shí)一次性展示全部信息加重了用戶的操作負(fù)擔(dān)，填寫效率較低。
• 使用場景：當(dāng)需要完成一個(gè)簡單快速的任務(wù)（表單條目數(shù)在7個(gè)內(nèi)），比如：輸入少量信息即可完成創(chuàng)建、注冊(cè)登陸表單。

依據(jù)表單的尺寸或列數(shù)，可將平鋪方式分為單列平鋪和多列平鋪。

① 單列平鋪

• 優(yōu)勢：路徑清晰，由上至下，填寫效率高、體驗(yàn)好，操作順暢；
• 劣勢：占用縱向空間。

② 多列平鋪

• 優(yōu)勢：節(jié)省頁面縱向空間，信息承載量較大，能夠放置更多的控件單元。
• 劣勢：“Z”字型的視覺動(dòng)線較為復(fù)雜，填寫體驗(yàn)不好，易出錯(cuò)易遺漏。

2）分組表單

分組歸納是基礎(chǔ)平鋪的演進(jìn)方式，也是基于基礎(chǔ)平鋪上的交互設(shè)計(jì)四法則之一“組織”的應(yīng)用，在基礎(chǔ)平鋪的基礎(chǔ)上將表單項(xiàng)中相關(guān)聯(lián)的項(xiàng)目進(jìn)行分組，顯得更有規(guī)律和組織性，即使表單項(xiàng)較多也不會(huì)顯得雜亂和壓抑，用戶在填寫表單時(shí)的心理壓力和視覺疲勞也會(huì)得到緩解，操作體驗(yàn)也會(huì)更好。

依據(jù)視覺樣式可以有三種形式，分別為：標(biāo)題分組、卡片分組和標(biāo)簽分組。

• 優(yōu)勢：將表單內(nèi)容進(jìn)行了分類歸組，便于快速定位，能夠減輕用戶填寫表單時(shí)的焦慮感和心理壓力；
• 劣勢：分組標(biāo)題的添加進(jìn)一步增加了頁面的垂直空間占用；
• 使用場景：適用于表單條目數(shù)在7個(gè)以上，且表單項(xiàng)之間存在關(guān)聯(lián)關(guān)系，具備分類歸納的基礎(chǔ)條件。

① 標(biāo)題分組

標(biāo)題分組是用文字標(biāo)題對(duì)表單項(xiàng)進(jìn)行分類，當(dāng)表單的數(shù)據(jù)信息超過7個(gè)輸入域，同時(shí)關(guān)聯(lián)性沒有那么強(qiáng)且可以被分組時(shí)，用分組的方式幫用戶設(shè)置幾個(gè)休息點(diǎn)，讓用戶把要填寫表單的大任務(wù)拆解成幾個(gè)小任務(wù)來完成；緩解用戶在輸入上的心理壓力與視覺疲勞。

注意：分組內(nèi)設(shè)置項(xiàng)要有強(qiáng)關(guān)聯(lián)性，否則不能歸為一組，不能因?yàn)樽侄味酁榱朔纸M去分組。

標(biāo)題分組對(duì)應(yīng)的詳情展示：一項(xiàng)一項(xiàng)上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點(diǎn)定位，點(diǎn)擊錨點(diǎn)定位的標(biāo)題即可自動(dòng)定位到該區(qū)域，方便用戶快速定位瀏覽位置。

② 卡片分組

卡片分組是在標(biāo)題分組的基礎(chǔ)上給每個(gè)分組加上背景做成卡片的形式進(jìn)行分組。

需要滿足數(shù)據(jù)內(nèi)容體量很大（7-15個(gè)設(shè)置項(xiàng)）且超過一屏，關(guān)聯(lián)性更強(qiáng)、數(shù)據(jù)信息可被分類歸納時(shí)，用標(biāo)題分組不足以給信息做層級(jí)區(qū)分，為了讓用戶在操作時(shí)更聚焦，同時(shí)也需要給用戶更明確的操作引導(dǎo)，可通過卡片分組的形式展示，對(duì)單獨(dú)的卡片進(jìn)行命名。

注意：一個(gè)表單項(xiàng)不要分過多的卡片分組，不能每兩項(xiàng)做一個(gè)分組，這反而會(huì)造成用戶視覺壓力和操作負(fù)擔(dān)。

③ 標(biāo)簽分組

當(dāng)表單數(shù)據(jù)信息之間沒有特定的關(guān)聯(lián)性，可以并列單獨(dú)處理，且每個(gè)設(shè)置項(xiàng)都包含多個(gè)輸入域，且多個(gè)輸入域都使用了標(biāo)題分組，為減少加載時(shí)間將表單分頁展現(xiàn)的情況下，布局就可以采用標(biāo)簽頁布局進(jìn)行展示操作。

標(biāo)簽分組是以tab標(biāo)簽頁的形式將不同分組的表單項(xiàng)進(jìn)行并列分組的方式；這種方式一般比較少用，也不推薦，因?yàn)轫撁嫔现荒芸吹揭粋€(gè)分組的內(nèi)容，比較容易遺漏。

注意事項(xiàng)：

1. tab標(biāo)簽的填寫沒有先后順序的規(guī)則，標(biāo)簽頁彼此之間沒有特定的關(guān)聯(lián)性，可獨(dú)立去設(shè)置。也就是說先填寫tab1還是先填寫tab2，對(duì)表單的其他tab項(xiàng)沒有任何影響，不存在聯(lián)動(dòng)關(guān)系。
2. 對(duì)表單信息的分類可以有效的降低視覺噪音，幫助用戶關(guān)注重要的填寫內(nèi)容，根據(jù)表單數(shù)據(jù)信息的優(yōu)先級(jí)進(jìn)行分類，將優(yōu)先級(jí)高的放在表單前面，優(yōu)先級(jí)低的放在表單后面，或進(jìn)行折疊收起。

具體該如何選擇呢？

1. 如果每個(gè)組之間有邏輯先后順序，那么推薦使用分步表單。
2. 如果每個(gè)組之間關(guān)聯(lián)性較強(qiáng)，就不適合分開，推薦使用錨點(diǎn)定位。
3. 如果每個(gè)組既沒有邏輯先后順序，也沒有關(guān)聯(lián)性時(shí)，推薦使用標(biāo)簽分組。

3）基礎(chǔ)分步表單

步驟引導(dǎo)是將需要填寫的表單信息按照線性流程進(jìn)行組織，配備步驟條告知用戶完整的流程和進(jìn)度，在全部步驟表單填寫完整后確認(rèn)信息，流程結(jié)束后給予用戶操作的結(jié)果及反饋。

• 優(yōu)勢：任務(wù)流程清晰，明確當(dāng)前用戶目標(biāo)，減少用戶負(fù)擔(dān)；及時(shí)的反饋校驗(yàn)，也避免填寫完成后才發(fā)現(xiàn)中間的表單填寫有誤，降低用戶的犯錯(cuò)成本。
• 劣勢：無法通覽全部內(nèi)容，每一步的回溯成本較高
• 適用場景：適用于具有明確線性邏輯的任務(wù)場景。

4）高級(jí)表單

高級(jí)表單適用于內(nèi)容項(xiàng)復(fù)雜，多任務(wù)嵌套使用的場景，常見有動(dòng)態(tài)表單、動(dòng)態(tài)表格、折疊面板、彈窗/抽屜編輯等。

① 動(dòng)態(tài)可編輯表單

表單內(nèi)容項(xiàng)是不固定的，用戶可以按照實(shí)際業(yè)務(wù)需求對(duì)某些內(nèi)容項(xiàng)進(jìn)行動(dòng)態(tài)增減。常見形式有一個(gè)固定的表單，通過增減按鈕可以設(shè)置表單數(shù)目，一般動(dòng)態(tài)表單數(shù)目≤3，并且每個(gè)輸入框不需要單獨(dú)的標(biāo)題使用。

② 可編輯表格

和動(dòng)態(tài)表單的交互邏輯基本一致，外觀上是以表格形式展示，增減的動(dòng)態(tài)數(shù)據(jù)數(shù)目建議3~6個(gè)。

建議條目表單數(shù)2~5項(xiàng)時(shí)使用，以使得每行內(nèi)容可被完整呈現(xiàn)。

③ 折疊面板編輯

折疊面板：適用于表單中明顯嵌套子任務(wù)的模式，收起狀態(tài)下只讀子任務(wù)設(shè)置，展開狀態(tài)則可以對(duì)子任務(wù)的設(shè)置進(jìn)行編輯修改。

建議條目表單數(shù)在6~8項(xiàng)時(shí)使用。

④ 規(guī)則樹

應(yīng)用于規(guī)則編輯場景。適用于頁面中需要添加一個(gè)或多個(gè)對(duì)象，且每個(gè)對(duì)象都需要添加或編輯多組數(shù)據(jù)的情況。

⑤ 語句式表單

讓用戶在預(yù)設(shè)的結(jié)構(gòu)來完成語句，常用于設(shè)置、編輯規(guī)則類表單，表單讀起來更友好更人性化。

2. 影響表單布局的要素

影響表單布局與構(gòu)成元素選擇的幾個(gè)要素：

內(nèi)容數(shù)量：內(nèi)容的多少會(huì)影響設(shè)計(jì)所選擇的容器、內(nèi)容布局；如果內(nèi)容較多，除了布局還要考慮采用分組、分步等形式去有序組織信息。

復(fù)雜程度：表單邏輯也是伴隨內(nèi)容的多少而同比增加的，內(nèi)容少則關(guān)系相對(duì)簡單，內(nèi)容多則關(guān)系復(fù)雜。

邏輯結(jié)構(gòu)：常見的有串行結(jié)構(gòu)（各表單內(nèi)容之間是線性關(guān)系）、并列結(jié)構(gòu)（有多組表單，各組是并列關(guān)系）、更復(fù)雜的甚至有串行與并行嵌套結(jié)合的結(jié)構(gòu)。

所處容器：表單內(nèi)容所處的容器有頁面、抽屜、彈窗、氣泡，容器所能承載內(nèi)容的多少也在逐步減少。在設(shè)計(jì)中我們根據(jù)打斷感、與上一級(jí)關(guān)聯(lián)程度、內(nèi)容復(fù)雜度進(jìn)行容器選擇。

來源頁面關(guān)聯(lián)：如果與來源頁面關(guān)聯(lián)強(qiáng)，則建議使用彈窗、抽屜等容器，可以停留在之前操作頁面上，缺點(diǎn)則是用戶操作的沉浸感偏弱；如果與來源頁面關(guān)聯(lián)弱且信息量較大，則建議使用頁面，同時(shí)在頁面中填寫表單的沉浸感也會(huì)更強(qiáng)。

3. 如何判斷采用哪種布局方式

關(guān)于使用何種布局方式的判斷，應(yīng)從信息的復(fù)雜度和關(guān)聯(lián)性兩個(gè)維度去梳理。根據(jù)信息的復(fù)雜度和相關(guān)性模型，選用相應(yīng)的信息呈現(xiàn)方式，選用合理的布局方案來承載詳情頁的內(nèi)容。

下圖是為了能更直觀的讓設(shè)計(jì)師明確面對(duì)不同復(fù)雜程度的表單如何設(shè)計(jì)，根據(jù)信息的復(fù)雜度和相關(guān)性模型來進(jìn)行選擇。

（來源：Ant Design）

四、表單的交互形式

在B端產(chǎn)品中，大致可以將表單操作的交互方式分為6種，依據(jù)使用頻率從低到高分別為：原位編輯、側(cè)邊抽屜、氣泡卡片、新開頁面、浮層彈窗、頁面跳轉(zhuǎn)，在選擇交互方式的時(shí)候需要根據(jù)使用場景和業(yè)務(wù)需求。

1. 原位編輯

原位編輯是一種由內(nèi)容展示演變而來的狀態(tài)，其編輯內(nèi)容也為展示內(nèi)容，單擊的時(shí)候切換為編輯狀態(tài)，可編輯內(nèi)容，屬于輕量型的信息采集表單。

一般出現(xiàn)在表格或者卡片內(nèi)，單個(gè)的字段展示（例如新建文檔標(biāo)題等）也可能出現(xiàn)，正常情況下就是展示狀態(tài)，當(dāng)鼠標(biāo)懸浮時(shí)hover時(shí)提示可編輯，點(diǎn)擊字段內(nèi)容或特定操作按鈕即激活為可編輯狀態(tài)。

• 優(yōu)勢：快捷易操作，隨時(shí)啟用與退出，主流程的操作流暢度高。
• 劣勢：編輯狀態(tài)較為隱蔽，不宜被察覺，特殊狀態(tài)才會(huì)被觸發(fā)。
• 適用場景：適用于輸入內(nèi)容較少，適用于頻率較低，同時(shí)屬于主流程分支的場景。

2. 氣泡卡片

氣泡卡片是一種類似于彈窗的對(duì)話框，但是比彈框要輕量很多，屬于超輕量的對(duì)話框，氣泡卡片內(nèi)通常只包含一個(gè)輕量化的操作，允許用戶在當(dāng)前界面快速對(duì)某一個(gè)操作進(jìn)行編輯同時(shí)不需要打斷主任務(wù)流，可以隨取隨用，通常是非模態(tài)的，不對(duì)主頁面流程和操作具有阻斷性。

觸發(fā)生效機(jī)制可以是設(shè)置項(xiàng)點(diǎn)擊即生效，也可以多個(gè)設(shè)置項(xiàng)選擇后，觸發(fā)操作按鈕生效（操作按鈕建議不超過2個(gè)），觸發(fā)機(jī)制可以根據(jù)項(xiàng)目實(shí)際需求而定。

• 優(yōu)勢：簡單快捷易操作、主流程的操作流暢度高。
• 劣勢：擴(kuò)展性不強(qiáng)，承載的信息不易過多。
• 適用場景：適用于快速編輯和輸入的場景。常用于條件篩選的設(shè)置，點(diǎn)擊或hover后顯示氣泡卡片內(nèi)容（建議不超過5個(gè)設(shè)置項(xiàng)）。

3. 抽屜編輯

抽屜彈窗也被稱為側(cè)彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側(cè)邊彈出的交互方式，其操作成本和用戶使用心理負(fù)擔(dān)會(huì)小很多，流暢性次于原位編輯與氣泡卡片交互但但優(yōu)于頁面跳轉(zhuǎn)。

通常在主視窗的局部位置滑動(dòng)出現(xiàn)，占用整個(gè)窗口高度，抽屜的承載能力大于彈窗，根據(jù)數(shù)據(jù)信息選擇彈窗或抽屜，允許承載較長的表單內(nèi)容。

和模態(tài)一樣，滑出的內(nèi)容是與上下文存在關(guān)系的，允許用戶在主視窗中查看參考信息，建議條目表單數(shù)>8項(xiàng)時(shí)使用。

注意事項(xiàng)：如果系統(tǒng)大部分用的彈窗，就優(yōu)先選用彈窗，如果表單內(nèi)增加了更多字段，可以換成抽屜彈窗。

• 優(yōu)勢：承載的信息量有較大的彈性空間。
• 劣勢：由于信息集中在一側(cè)，導(dǎo)致視覺焦點(diǎn)不穩(wěn)定，如果長時(shí)間工作，會(huì)產(chǎn)生不平衡的感覺。
• 適用場景：適用于當(dāng)前任務(wù)流中插入臨時(shí)任務(wù)的場景。

4. 新開頁面

新開頁面指的是保持當(dāng)前頁面不變，在主頁面進(jìn)行操作后在瀏覽器中新開標(biāo)簽頁用以展示新頁面，瀏覽器停留的頁面可以是當(dāng)前頁面也可以是新開的標(biāo)簽頁。

• 優(yōu)勢：頁面之間相互獨(dú)立，互補(bǔ)不干擾。
• 劣勢：用戶的焦點(diǎn)丟失，注意力分散（因?yàn)橄到y(tǒng)中大部分的操作在同一個(gè)頁面中完成）。
• 適用場景：適用于需要參照一些文檔來幫助用戶完成表單錄入操作的場景。

5. 窗口式表單（浮層彈窗）

彈窗交互是表單交互比較常見的交互方式，也具有較強(qiáng)的信息承載能力，同時(shí)拓展性也更強(qiáng)，在原位編輯與氣泡卡片無法滿足交互時(shí)選擇彈窗/抽屜交互，用戶在不離開當(dāng)前頁面的情況下進(jìn)行插入性操作，用戶也可隨時(shí)退出操作。

依據(jù)主頁面交互阻斷性可將彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種形式。

1）模態(tài)彈窗

模態(tài)彈窗以頁面對(duì)話框的形式呈現(xiàn)，體現(xiàn)頁面和彈窗之間的一種層級(jí)關(guān)系，激活彈窗時(shí)，用戶不能離開主頁面的流程，對(duì)主頁面的交互具有一定的阻斷性，不能繼續(xù)主頁面中的操作，必須關(guān)閉彈窗后才能繼續(xù)主頁面的操作。

• 優(yōu)勢：簡單易操作，承載的信息量有較大的彈性空間
• 缺點(diǎn)：浮層彈窗給主操作流程造成較強(qiáng)的割裂，降低輸入的流暢度。
• 適用場景：適用于主流程步驟中需要分支任務(wù)的場景。

2）非模態(tài)彈窗

非模態(tài)彈窗指的是用戶在不離開主頁面的情況下，可在當(dāng)前頁面中打開多個(gè)浮層彈窗并對(duì)其內(nèi)容進(jìn)行編輯；

激活彈窗時(shí)，用戶可以離開當(dāng)前的主頁面及相關(guān)流程對(duì)彈窗內(nèi)容進(jìn)行編輯，同時(shí)隨時(shí)可以回到主頁面及相關(guān)流程繼續(xù)操作，和模態(tài)彈窗的主要區(qū)別是對(duì)主頁面流程沒有阻斷性。

• 優(yōu)勢：同時(shí)進(jìn)行多個(gè)操作，阻斷性弱。
• 劣勢：學(xué)習(xí)成本高，容易產(chǎn)生混亂，誤操作概率高。
• 適用場景：適用于多任務(wù)處理情況有較高的要求的場景。

6. 頁面跳轉(zhuǎn)

新頁面為當(dāng)前頁面的分支流程，不會(huì)干涉用戶對(duì)于主頁面的操作，頁面功能是獨(dú)立的。

如果是初始化類型操作，超出了彈窗/抽屜的承載量，涉及錄入內(nèi)容比較多的時(shí)候，有大量的信息要一項(xiàng)一項(xiàng)審核，就建議跳轉(zhuǎn)到頁面再進(jìn)行新的操作，跳轉(zhuǎn)頁面體量較大，頁面更加穩(wěn)定。

• 優(yōu)勢：信息承載能力強(qiáng)；有利于用戶對(duì)業(yè)務(wù)流程有更清晰的認(rèn)識(shí)，從而使得主流程的操作流暢度高。
• 劣勢：輸入字段較多，難于給予及時(shí)性反饋。
• 適用場景：適用于特別重要的功能表單的填寫場景。

7. 如何選擇表單交互方式

首先第一原則：不濫用表單的交互形式。

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

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

根據(jù)內(nèi)容的多少及親密程度來決定，我們?cè)O(shè)計(jì)時(shí)應(yīng)選用哪種交互方式，或者可以直接根據(jù)內(nèi)容承載量做判斷也是可以的，從少到多依次為：氣泡卡片 – 原位編輯 – 彈窗 – 抽屜 – 頁面跳轉(zhuǎn)- 新開頁面。

具體選擇：

1. 當(dāng)信息復(fù)雜度低，同時(shí)相關(guān)性高時(shí)，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。
2. 當(dāng)信息復(fù)雜度高，但關(guān)聯(lián)性也較高時(shí)，我們可以使用抽屜、全屏彈窗的交互方式。
3. 當(dāng)信息復(fù)雜度高或信息獨(dú)立時(shí)，我們可以使用頁面的交互方式。

關(guān)于不同交互方式的特點(diǎn)：

• 氣泡卡片：承載內(nèi)容比較少，直觀，即見即所得。
• 彈窗：通過小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。
• 抽屜：與彈窗式相似，通過小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動(dòng)條。
• 頁面跳轉(zhuǎn)：最常用方式，適用于絕大部分的表單，支持構(gòu)建復(fù)雜的表單。

五、最后

1. 表單頁面要考慮適配方式

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

1）固定適配

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

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

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

1）間距適配

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

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

2. 總結(jié)

關(guān)于表單設(shè)計(jì)其實(shí)還有很多可以深挖的空間，不管是To C 還是To B，都是為了實(shí)現(xiàn)用戶的需求、幫用戶解決問題。

我自己剛接觸B端產(chǎn)品的時(shí)候，還是習(xí)慣性的希望能把產(chǎn)品做的美觀，“高大上”。后來在工作中慢慢地發(fā)現(xiàn)每個(gè)項(xiàng)目的背后思考更為重要，把更多的精力投入到沉淀行業(yè)知識(shí)、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上，輔助業(yè)務(wù)挖掘，為誰而設(shè)計(jì)很重要，從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn)，從而切實(shí)解決問題。

以上便是個(gè)人對(duì)表單設(shè)計(jì)經(jīng)驗(yàn)總結(jié)和方法沉淀，以及對(duì)部分問題的理解和分析，有不足或疏漏的地方的歡迎交流或留言補(bǔ)充。

長達(dá)16000+字，文章很長，感謝您的耐心閱讀。希望能夠通過這篇文章給到大家更多的啟發(fā)。文章中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給予指正。

下期預(yù)告：全方位解析在表單設(shè)計(jì)中，常見的設(shè)計(jì)疑問？

參考文獻(xiàn)：

1. 來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
2. 表單設(shè)計(jì)需要注意 http://t.cn/EhMmZPf
3. 表單設(shè)計(jì)http://zhangjingwei.cn/pd/4147841.html
4. 《Ant Design表單設(shè)計(jì)》來源鏈接：https://ant.design/docs/spec/research-form-cn
5. 《web表單設(shè)計(jì)》