B端表單設(shè)計|標(biāo)題樣式細(xì)節(jié)設(shè)計

2 評論 4799 瀏覽 35 收藏 8 分鐘

在B端產(chǎn)品的交互設(shè)計中,表單設(shè)計是一個不可忽視的環(huán)節(jié)。它直接影響著用戶的填寫效率和體驗。這篇文章,我們來看看作者列舉的案例,和正確的選擇。

B端系統(tǒng)軟件中表單的應(yīng)用場景非常多,今天就撈點干貨,說說B端產(chǎn)品表單如何設(shè)計,用戶體驗會更好。

從標(biāo)題、輸入框、布局排版、數(shù)據(jù)展示四個方面,詳細(xì)介紹一下關(guān)于表單的體驗設(shè)計,目錄如下:

一、標(biāo)簽是否加冒號

設(shè)計師A說:不加冒號,用戶不在意,而且占空間…..

設(shè)計師B說:要加冒號,加上可以更好的區(qū)分上下文,以及標(biāo)簽和輸入框的關(guān)系…..

以上A/B設(shè)計師說的都有一定的道理,那到底加不加冒號呢?

遇到問題咱就先調(diào)研一波,看一下Win、Mac系統(tǒng)中是否有無冒號。

Win系統(tǒng):最新版本不加冒號。

Mac系統(tǒng):最新版本設(shè)計偏向C端化,不加冒號,13.0.1之前版本有冒號。

是不是感覺主流的設(shè)計是不加冒號呀?

稍等一下…那在具體B端系統(tǒng)中是有怎樣的應(yīng)用場景呢?

以上場景中左右布局,單選/多選組件、標(biāo)題加內(nèi)容組件都不適合去掉冒號展示。

那到底加不加冒號呢?

可以先說一下答案,加不加冒號對用戶無影響,《Web 表單設(shè)計·創(chuàng)建高可用性的網(wǎng)頁表單》中,卡羅琳·賈雷特做過大量測試,最終證明沒有一名用戶留意表單冒號是否出現(xiàn)。

因此,得出以下建議:

  • 如果你希望系統(tǒng)重表單使用更多的業(yè)務(wù)場景和對齊方式,請使用冒號
  • 如果你當(dāng)前已使用有冒號的表單,請保持使用冒號

如果你新建一個系統(tǒng),使不使用冒號隨意一旦決定是否使用冒號,需要全部表單統(tǒng)一規(guī)則??

二、表單必填樣式

用戶填寫表單時,有必填項和選填項,如果表單中多數(shù)或全部是必填項,那是否還應(yīng)該對其標(biāo)記?

答案是肯定的,用戶遇到較多表單填寫項時,是需要通過必填標(biāo)記來評估工作量。下面就介紹一下具體標(biāo)記必填項的三種樣式。

① 頂部統(tǒng)一提示

填寫表單過長或填寫表單被打斷(移動端常見),就會增加用戶工作記憶和認(rèn)知負(fù)荷,完成任務(wù)更加困難,從而降低了用戶體驗。

② 文字提示“必填”

有部分設(shè)計師認(rèn)為紅色“*”會增加視覺噪音,并且重復(fù)的紅色“*”會帶來一些認(rèn)知恐慌,便采用文字提示方式,但這種方式比較占用空間,文字內(nèi)容過長,用戶壓力較大,用戶體驗降低,不建議使用。

③ 紅色星號“*”必填提示

雖然有設(shè)計師認(rèn)為紅色“*”會增加視覺噪聲,帶來一些認(rèn)知恐慌,但紅色“*”在互聯(lián)網(wǎng)中很常見,用戶熟知其意,已形成固定的視覺語言,并且空間較小,能與標(biāo)簽文字足夠區(qū)分開,相比之下采用紅色“*”必填提示是非常值得推薦使用。

但是還有一個問題,就是紅色“*”的位置是在字段前還是字段后呢?

紅色“*”的具體位置有三種位置,如上圖做了詳細(xì)展示。

  1. 標(biāo)題左側(cè):比較常見,用戶打眼一看就能區(qū)分出必填項,推薦使用;
  2. 標(biāo)題右側(cè):比較常見,多配合無號碼使用;
  3. 輸入框右側(cè):現(xiàn)有系統(tǒng)較少使用,由于輸入框形式、長度不統(tǒng)一,會導(dǎo)致難以瀏覽和判斷,不推薦。是否可標(biāo)記可選字段?

這不是強(qiáng)制性的,但標(biāo)記可選字段非必填,確實減輕了用戶思考,提升用戶體驗。??

三、提示樣式

用戶最理想閱讀的標(biāo)題文字?jǐn)?shù)是7±2,當(dāng)標(biāo)題文字過長,或不足對輸入項準(zhǔn)確說明時,要給出對應(yīng)的提示文字,幫助用戶更好的輸入內(nèi)容,常見樣式如下。

這三種樣式是遞進(jìn)邏輯,根據(jù)不同的文字提示內(nèi)容和難度,選擇不同的提示樣式。其中對于第二種樣式中,圖標(biāo)提示的位置還有幾種方式,如下圖說明。

四、小結(jié)

本文事無巨細(xì)的說了一下表單中標(biāo)題樣式問題,雖然很多是表單設(shè)計的一些較冷較小的內(nèi)容,但也需要設(shè)計師沉下心來,打磨細(xì)節(jié)之處。

這里的闡述希望是拋磚引玉,能給大家更多的啟發(fā),如有不嚴(yán)謹(jǐn)和錯誤的地方希望大家不吝指教。

本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,微信公眾號:【Clip設(shè)計夾】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 真的很感謝這樣的文章

    來自山東 回復(fù)
  2. 真的很感謝這樣的文章,下沉探討細(xì)節(jié)設(shè)計的要點,希望多多更呀!

    來自廣東 回復(fù)