2026-4-23 清陽(yáng) 設(shè)計(jì)思維
B端系統(tǒng)軟件中表單的應(yīng)用場(chǎng)景非常多，今天蘭亭妙微UI設(shè)計(jì)公司，就撈點(diǎn)干貨，說(shuō)說(shuō)B端產(chǎn)品表單如何設(shè)計(jì)，用戶體驗(yàn)會(huì)更好。
從標(biāo)題、輸入框、布局排版、數(shù)據(jù)展示四個(gè)方面，詳細(xì)介紹一下關(guān)于表單的體驗(yàn)設(shè)計(jì)，目錄如下：
設(shè)計(jì)師A說(shuō)：不加冒號(hào)，用戶不在意，而且占空間…..
設(shè)計(jì)師B說(shuō)：要加冒號(hào)，加上可以更好的區(qū)分上下文，以及標(biāo)簽和輸入框的關(guān)系…..
以上A/B設(shè)計(jì)師說(shuō)的都有一定的道理，那到底加不加冒號(hào)呢？
遇到問(wèn)題咱就先調(diào)研一波，看一下Win、Mac系統(tǒng)中是否有無(wú)冒號(hào)。
Win系統(tǒng)：最新版本不加冒號(hào)。
Mac系統(tǒng)：最新版本設(shè)計(jì)偏向C端化，不加冒號(hào)，13.0.1之前版本有冒號(hào)。
是不是感覺(jué)主流的設(shè)計(jì)是不加冒號(hào)呀？
稍等一下…那在具體B端系統(tǒng)中是有怎樣的應(yīng)用場(chǎng)景呢？
以上場(chǎng)景中左右布局，單選/多選組件、標(biāo)題加內(nèi)容組件都不適合去掉冒號(hào)展示。
那到底加不加冒號(hào)呢？
可以先說(shuō)一下答案，加不加冒號(hào)對(duì)用戶無(wú)影響，《Web 表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中，卡羅琳·賈雷特做過(guò)大量測(cè)試，最終證明沒(méi)有一名用戶留意表單冒號(hào)是否出現(xiàn)。
因此，得出以下建議：
如果你新建一個(gè)系統(tǒng)，使不使用冒號(hào)隨意一旦決定是否使用冒號(hào)，需要全部表單統(tǒng)一規(guī)則
用戶填寫(xiě)表單時(shí)，有必填項(xiàng)和選填項(xiàng)，如果表單中多數(shù)或全部是必填項(xiàng)，那是否還應(yīng)該對(duì)其標(biāo)記？
答案是肯定的，用戶遇到較多表單填寫(xiě)項(xiàng)時(shí)，是需要通過(guò)必填標(biāo)記來(lái)評(píng)估工作量。下面就介紹一下具體標(biāo)記必填項(xiàng)的三種樣式。
填寫(xiě)表單過(guò)長(zhǎng)或填寫(xiě)表單被打斷（移動(dòng)端常見(jiàn)），就會(huì)增加用戶工作記憶和認(rèn)知負(fù)荷，完成任務(wù)更加困難，從而降低了用戶體驗(yàn)。
有部分設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺(jué)噪音，并且重復(fù)的紅色“*”會(huì)帶來(lái)一些認(rèn)知恐慌，便采用文字提示方式，但這種方式比較占用空間，文字內(nèi)容過(guò)長(zhǎng)，用戶壓力較大，用戶體驗(yàn)降低，不建議使用。
雖然有設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺(jué)噪聲，帶來(lái)一些認(rèn)知恐慌，但紅色“*”在互聯(lián)網(wǎng)中很常見(jiàn)，用戶熟知其意，已形成固定的視覺(jué)語(yǔ)言，并且空間較小，能與標(biāo)簽文字足夠區(qū)分開(kāi)，相比之下采用紅色“*”必填提示是非常值得推薦使用。
但是還有一個(gè)問(wèn)題，就是紅色“*”的位置是在字段前還是字段后呢？
紅色“*”的具體位置有三種位置，如上圖做了詳細(xì)展示。
這不是強(qiáng)制性的，但標(biāo)記可選字段非必填，確實(shí)減輕了用戶思考，提升用戶體驗(yàn)。
用戶最理想閱讀的標(biāo)題文字?jǐn)?shù)是7±2，當(dāng)標(biāo)題文字過(guò)長(zhǎng)，或不足對(duì)輸入項(xiàng)準(zhǔn)確說(shuō)明時(shí)，要給出對(duì)應(yīng)的提示文字，幫助用戶更好的輸入內(nèi)容，常見(jiàn)樣式如下。
這三種樣式是遞進(jìn)邏輯，根據(jù)不同的文字提示內(nèi)容和難度，選擇不同的提示樣式。其中對(duì)于第二種樣式中，圖標(biāo)提示的位置還有幾種方式，如下圖說(shuō)明。
本文事無(wú)巨細(xì)的說(shuō)了一下表單中標(biāo)題樣式問(wèn)題，雖然很多是表單設(shè)計(jì)的一些較冷較小的內(nèi)容，但也需要設(shè)計(jì)師沉下心來(lái)，打磨細(xì)節(jié)之處。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.payeee.cn