国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

表單是B端產(chǎn)品中的一個(gè)常見功能，在設(shè)計(jì)錄入表單時(shí)，應(yīng)盡量減少用戶的思考和理解負(fù)擔(dān)，提高表單的操作效率，降低用戶出錯(cuò)的概率。本文作者總結(jié)了一些B端表格設(shè)計(jì)時(shí)的知識(shí)點(diǎn)，與你分享。

一、概念

在B端產(chǎn)品中，表單是出現(xiàn)頻率很高的載體。由于B端產(chǎn)品主要目的都是為了使企業(yè)降本增效，便于管理者進(jìn)行管理，由于有一類場(chǎng)景經(jīng)常出現(xiàn)，就是流程表單。流程表單除了填寫端的表單，還需要結(jié)合審批流程，用戶角色也相對(duì)復(fù)雜，是B端設(shè)計(jì)中的一個(gè)重點(diǎn)和難點(diǎn)，所以我會(huì)從表單基本結(jié)構(gòu)出發(fā)簡(jiǎn)單，給大家整理一下關(guān)于B端流程表單設(shè)計(jì)里面我的一些思路。

“錄入”是B端產(chǎn)品常見的任務(wù)場(chǎng)景，常用于向用戶收集或驗(yàn)證信息。也就是說(shuō)，大部分起到了數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。例如：登錄注冊(cè)模塊信息采集，評(píng)論的編輯頁(yè)；OA中的請(qǐng)假流程等。具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。

在設(shè)計(jì)錄入表單時(shí)，應(yīng)盡量減少用戶的思考和理解負(fù)擔(dān)，提高表單的操作效率，降低用戶出錯(cuò)的概率，才能提高錄入任務(wù)的完成度和滿意度。

針對(duì)不同的用戶數(shù)據(jù)要進(jìn)行不同的表單設(shè)計(jì)，以便適用各個(gè)場(chǎng)景功能。

二、B端表單構(gòu)成&種類

一個(gè)基礎(chǔ)表單由標(biāo)簽 表單域 提示信息 操作按鈕四部分構(gòu)成。除此之外，根據(jù)表單的復(fù)雜程度還會(huì)衍生出其他內(nèi)容：校驗(yàn)提示、幫助信息、占位信息、提示。

1. 標(biāo)簽

標(biāo)簽用于解釋表單項(xiàng)的含義或要錄入/選擇的內(nèi)容，引導(dǎo)用戶進(jìn)行填寫識(shí)別內(nèi)容。

合理的標(biāo)簽布局結(jié)構(gòu)，能夠提高用戶的閱讀效率，還能降低信息填寫時(shí)的錯(cuò)誤率。常見的標(biāo)簽布局形式有：左右結(jié)構(gòu)、上下結(jié)構(gòu)、右對(duì)齊結(jié)構(gòu)以及內(nèi)部結(jié)構(gòu)。

1）左右結(jié)構(gòu)

左右結(jié)構(gòu)是目前B端產(chǎn)品設(shè)計(jì)中常見的表單布局形式，它減少了頁(yè)面的垂直占用空間，而增加了橫向占用空間。因PC端的橫向空間很大，當(dāng)錄入項(xiàng)不多時(shí)，可以采用該種結(jié)構(gòu)。

從閱讀和填寫效率角度來(lái)說(shuō)，左右對(duì)齊表單填寫速度相較于上下和右對(duì)齊來(lái)說(shuō)最慢。因?yàn)樽笥覍?duì)齊表單解析問題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來(lái)，只是花費(fèi)時(shí)間較長(zhǎng)。根據(jù)馬泰奧·彭佐的研究，典型掃視時(shí)間為500毫秒，很長(zhǎng)說(shuō)明用戶經(jīng)歷了沉重的認(rèn)知壓力。

優(yōu)勢(shì)：容易游覽標(biāo)簽突出標(biāo)簽；占用垂直空間較少。

劣勢(shì)：

• 標(biāo)簽和輸入框的相鄰間距增大且不統(tǒng)一；造成用戶視線瀏覽定位反復(fù)跳動(dòng)。
• 左右對(duì)齊適合于用戶不熟悉表單的內(nèi)容數(shù)據(jù)需要首先定位問題的標(biāo)簽，瀏覽表單會(huì)使得用戶更聚焦標(biāo)簽內(nèi)容。用戶只要上上下下閱讀標(biāo)簽左欄，不會(huì)被輸入框打斷。

適用場(chǎng)景：

表單中存在較多的復(fù)雜或敏感信息，希望用戶放慢速度、仔細(xì)思考。

2）上下結(jié)構(gòu)

上下結(jié)構(gòu)擁有較強(qiáng)的信息瀏覽和填寫效率，用戶的視覺瀏覽路徑相對(duì)左右結(jié)構(gòu)來(lái)說(shuō)較短，是目前B端產(chǎn)品中使用的最多的一種表單對(duì)齊方式。該種結(jié)構(gòu)適用于一行需要放置多項(xiàng)錄入項(xiàng)的情況，或標(biāo)簽名稱通常較長(zhǎng)的表單。

馬泰奧·彭佐從2006年7月進(jìn)行眼動(dòng)研究發(fā)現(xiàn)，從標(biāo)簽移動(dòng)到輸入框只需50毫秒。比左右結(jié)構(gòu)標(biāo)簽快了10倍，后者需要500毫秒；比右對(duì)齊標(biāo)簽方式快2倍，后者高達(dá)240秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。

優(yōu)勢(shì)：

• 最利于減少表單填寫時(shí)間（標(biāo)簽和輸入框位置最為靠近）；
• 用戶視線固定，動(dòng)線一直向下（清晰的完成路徑）；
• 節(jié)省大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。

劣勢(shì)：

• 占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽）；
• 建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

適用場(chǎng)景：

• 希望用戶快速填寫表單，完成任務(wù)；
• 同時(shí)，當(dāng)輸入項(xiàng)存在主次之分時(shí)，對(duì)標(biāo)簽擴(kuò)展性要求高。

3）右對(duì)齊結(jié)構(gòu)

右對(duì)齊結(jié)構(gòu)與左右結(jié)構(gòu)一樣都在很多B端產(chǎn)品中出現(xiàn)次數(shù)很多，它一樣減少了頁(yè)面的垂直占用空間，而增加了橫向占用空間。

右對(duì)齊的表單由于標(biāo)簽字?jǐn)?shù)不一致，導(dǎo)致左側(cè)看起來(lái)凌亂沒有對(duì)齊，一定程度影響了整體表單版式。

如果要盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供快速完成時(shí)間。馬泰奧·彭佐的眼動(dòng)研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在170毫秒和240毫秒，而填寫完成時(shí)間比左對(duì)齊快2倍。

優(yōu)勢(shì)：

• 減少占用縱向空間
• 提高填寫效率

劣勢(shì)：

• 右對(duì)齊布局造成左側(cè)不齊，可讀性降低；
• 不夠靈活，如果標(biāo)簽需要兩行文字進(jìn)行展示，會(huì)導(dǎo)致閱讀困難。

4）內(nèi)部結(jié)構(gòu)

內(nèi)部結(jié)構(gòu)在移動(dòng)端表單中使用較多，這里對(duì)于用戶需要輸入的內(nèi)容，只保留了提示性文字，當(dāng)用戶進(jìn)行輸入時(shí)，內(nèi)部的標(biāo)簽/提示性文字就會(huì)消失，將導(dǎo)致用戶很難判別輸入的信息是否準(zhǔn)確。這種形式適用于極少輸入項(xiàng)的表單（如登錄）

優(yōu)勢(shì)：

• 減少占用橫向空間
• 不用考慮標(biāo)簽長(zhǎng)度不一致導(dǎo)致的對(duì)齊問題

劣勢(shì)：

內(nèi)部標(biāo)簽消失，很難判斷信息

5）如何選擇

操作效率：

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

根據(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)表單根據(jù)業(yè)務(wù)需要以操作效率為主時(shí)，推薦使用頂對(duì)齊的方式。

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

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

屏效：

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

視覺對(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)選擇了視覺對(duì)齊，而犧牲的是操作效率。

單從效率角度看，頂對(duì)齊>右對(duì)齊>左對(duì)齊，根據(jù)不同的業(yè)務(wù)場(chǎng)景，效率并不是唯一的考慮指標(biāo)。

希望用戶放慢速度，好好考慮每個(gè)表單內(nèi)容填寫，那么采用左對(duì)齊，適用于填寫重要信息及確認(rèn)；

頂對(duì)齊針對(duì)標(biāo)簽文字過(guò)多或者需要英文時(shí)，延展性更好；

右對(duì)齊要考慮能否精簡(jiǎn)標(biāo)簽內(nèi)容，確定好表單與界面的間距，標(biāo)簽長(zhǎng)短差異過(guò)大謹(jǐn)慎使用右對(duì)齊。

2. 表單域

表單域即表單的輸入?yún)^(qū)域，輸入域是用來(lái)采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個(gè)輸入域字段都包含一個(gè)類型的數(shù)據(jù)信息。

對(duì)于用戶來(lái)說(shuō)，表單設(shè)計(jì)的時(shí)候盡可能減少用戶的思考、理解，選擇合適的輸入域類型，提升表單的輸入效率。

3. 提示信息

提示信息是復(fù)雜表單的必要內(nèi)容，在用戶填寫表單前會(huì)對(duì)填寫的標(biāo)簽內(nèi)容產(chǎn)生疑問，可以使用Tooltips進(jìn)行說(shuō)明，讓用戶了解表單內(nèi)容。

還有一種提示信息是用戶是在用戶填寫完該表單域之后出現(xiàn)的校驗(yàn)提示信息，如我們?cè)谔顚懯謾C(jī)號(hào)碼時(shí)的位數(shù)不對(duì)，這類提示能夠提前告知用戶可能出現(xiàn)的錯(cuò)誤，減少下一步操作的出錯(cuò)概率。

4. 操作按鈕

當(dāng)用戶完成信息錄入時(shí)，按鈕能夠?qū)Ρ韱蝺?nèi)容進(jìn)行校驗(yàn)、提交、保存或者進(jìn)行下一步操作；操作按鈕中有且僅有一個(gè)主功能按鈕，其他為次要按鈕；

關(guān)于按鈕順序，最常見的疑問是確定按鈕應(yīng)該在取消按鈕左邊還是右邊，這是一個(gè)爭(zhēng)論已久的話題。這里建議使用基于Ant Design 的設(shè)計(jì)原則，將規(guī)范定為：左對(duì)齊從左往右閱讀，右對(duì)齊從右往左閱讀；

5. 表單類型

對(duì)于復(fù)雜表單，在設(shè)計(jì)時(shí)需要對(duì)其進(jìn)行合理的歸納簡(jiǎn)化，降低表單填寫負(fù)荷。 一般來(lái)說(shuō)，表單可分為基礎(chǔ)表單、分步表單、錨點(diǎn)定位、標(biāo)簽頁(yè)這幾類。

1）基礎(chǔ)表單

當(dāng)表單條目數(shù)在7個(gè)內(nèi)，表單較為簡(jiǎn)單，這時(shí)候我們一般直接采用基礎(chǔ)表單，基礎(chǔ)表單樣式如下：

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

2）分步表單

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

3）錨點(diǎn)定位

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

4）標(biāo)簽頁(yè)

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

三、表單布局選擇

表單的布局方式需要考慮到內(nèi)容之前的關(guān)聯(lián)度，對(duì)復(fù)雜表單進(jìn)行合理的歸納，簡(jiǎn)化表單頁(yè)面的布局方式，綜合起來(lái)可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。

1. 普通布局

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

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

2. 弱分組

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

3. 區(qū)域內(nèi)分組

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

4. 卡片分組

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

四、表單按鈕位置

web端頁(yè)面，除去頂部和側(cè)邊導(dǎo)航欄，主要內(nèi)容頁(yè)面里的按鈕該如何放置排布呢？我們可以將內(nèi)容頁(yè)面分為以下三個(gè)部分：

1.標(biāo)題欄(Header)——主要是全局性操作按鈕，例如編輯、新建等；

2.主體內(nèi)容(Body)——有兩種操作按鈕。

第一種，是局部操作按鈕，例如表格內(nèi)部的操作項(xiàng)目；

第二種，是全局性完成按鈕，跟隨在內(nèi)容后的，例如取消、確定、上一步、下一步等；

3.底欄(Footer)——主要是全局性頁(yè)面完成按鈕，需要貼底固定性質(zhì)的。例如取消、確定、保存等。

表單按鈕的位置、順序、組織方式、視覺強(qiáng)調(diào)程度是用戶尋找按鈕的線索，通過(guò)警告色可引起注意，避免誤操作，準(zhǔn)確的文案則能夠預(yù)告按鈕的執(zhí)行結(jié)果。

按鈕設(shè)計(jì)的目標(biāo)是指導(dǎo)用戶采取我們希望用戶采取的行動(dòng)，盡量幫助用戶快速找到需要操作的按鈕，并了解執(zhí)行該操作的結(jié)果，同時(shí)盡可能避免誤操作。

表單按鈕位置有三種類型：頁(yè)面右上角、跟隨內(nèi)容、固定底部操作區(qū)。

1）右上角標(biāo)題欄

表單按鈕放置固定在右上角標(biāo)題區(qū)域，不跟隨表單內(nèi)容滾動(dòng)。將操作按鈕放置在右上角，與固定在底部操作區(qū)相比，能夠進(jìn)一步降低按鈕對(duì)表單內(nèi)容的干擾，使用戶能夠更加聚焦表單內(nèi)容進(jìn)行填寫。

操作按鈕放置在右上角，與操作路徑不一致，右上角也是視覺容易忽略的地方，可能會(huì)使點(diǎn)擊操作變得更加困難。

2）跟隨內(nèi)容

按鈕跟隨表單內(nèi)容是很常規(guī)的一種設(shè)計(jì)方法。用戶填寫完所有表單內(nèi)容下方就是操作按鈕，適用于表單內(nèi)容不超過(guò)一屏的基礎(chǔ)表單場(chǎng)景中使用。

在一些超過(guò)一屏的復(fù)雜表單中需要手動(dòng)保存的操作按鈕，可能需要滑到頁(yè)面最底部才能點(diǎn)擊保存。

3）固定底部操作區(qū)

復(fù)雜表單中，通常表單內(nèi)容區(qū)域都超過(guò)了一屏，填寫的內(nèi)容很多?？煽紤]將操作按鈕固定在底部操作區(qū)，并且可考慮加上手動(dòng)保存的按鈕。復(fù)雜表單內(nèi)容多，用戶在使用過(guò)程中可能會(huì)中途中斷退出，這時(shí)候保存功能就能夠幫助用戶在下次回來(lái)再次編輯的時(shí)候使用，繼續(xù)上次填寫的內(nèi)容。

固定在底部操作區(qū)的按鈕會(huì)對(duì)用戶產(chǎn)生干擾，從而影響用戶忽略表單的內(nèi)容。

設(shè)計(jì)策略：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對(duì)象。

設(shè)計(jì)指導(dǎo)原則：使用經(jīng)典的“F”型或”Z”型視覺引導(dǎo)模型。

僅有表單時(shí)建議采用“F”模型，按鈕位置跟隨內(nèi)容在左；當(dāng)表單被包含在某個(gè)容器中，則建議使用“Z”模型，將“確認(rèn)/提交”等行為放在右側(cè)視覺終點(diǎn)處。

基礎(chǔ)表單單列布局可將操作按鈕跟隨內(nèi)容放置，復(fù)雜表單多列布局超出一屏的情況下可考慮將按鈕固定在底部操作區(qū)。

1. 表單內(nèi)容視覺要平衡嗎

在設(shè)計(jì)表單時(shí)，我們總覺得視覺重心偏左，會(huì)使用戶視覺造成不適感，因此在設(shè)計(jì)時(shí)我們總想讓視覺變得更平衡。

比如京東云，使用大屏電腦看，信息全集中在左邊，右邊卻大片空白，感覺視覺有點(diǎn)失衡。而類似飛書的居中設(shè)計(jì)，左右均等的留白區(qū)域視覺會(huì)更平衡。 于是我在設(shè)計(jì)時(shí)也在考慮要不要用居中設(shè)計(jì)的方式呢？

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

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

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

這兩個(gè)產(chǎn)品分別是飛書設(shè)置類表單和百度云購(gòu)買表單。

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

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

五、表單頁(yè)面適配方式

B端設(shè)計(jì)師在設(shè)計(jì)表單的時(shí)候還需要考慮到頁(yè)面適配問題，如果設(shè)計(jì)不考慮適配，前端就會(huì)站在他的角度根據(jù)自己的認(rèn)為合理的方式進(jìn)行適配，在實(shí)際使用時(shí)就會(huì)導(dǎo)致體驗(yàn)不好，后面想在調(diào)整就得重新等排期了，因此在設(shè)計(jì)時(shí)就需要把適配方式定好。 表單在設(shè)計(jì)時(shí)一般有2種適配方式，一種是固定適配，一種是間距適配。

1. 固定適配

表單中信息寬度固定，不隨分辨率變化而變化，要保證最小分辨率能夠正常顯示。

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

我在設(shè)計(jì)時(shí)設(shè)定1366X768為最小分辨率，可保證筆記本電腦的使用。頁(yè)面最小分辨率可根據(jù)客戶或公司產(chǎn)品用戶的屏幕分辨率決定，因?yàn)橐恍┕酒髽I(yè)可能還在使用1280X720的分辨率，那么就設(shè)定1280為最小兼容的分辨率。

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

2. 間距適配

間距適配就是使用固定的左右間距，不跟隨頁(yè)面的寬度變化。當(dāng)頁(yè)面寬度變大時(shí)，組件自適應(yīng)變寬。

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