表單設(shè)計(jì)的九個(gè)基本法則

10 評(píng)論 32450 瀏覽 252 收藏 8 分鐘

在表單設(shè)計(jì)中,我們需要注意哪些內(nèi)容呢?

表單是承載信息和展示信息的重要途徑,因此我們?cè)谠O(shè)計(jì)的時(shí)候要注意很多事情。

首先我們要知道表單的組成:

  • 標(biāo)簽
  • 幫助文字
  • 輸入框
  • 報(bào)錯(cuò)提示。

那我我們?cè)谠O(shè)計(jì)的過程中 到底要注意哪些事情呢?

1、布局上

我們盡量采用單列進(jìn)行展示,建議這樣做的原因一是能夠方便用戶進(jìn)行瀏覽和輸入,二是因?yàn)檫@樣布局,能夠進(jìn)行響應(yīng)式的開發(fā),減少了成本。但是其自身也存在著缺點(diǎn),當(dāng)需要輸入的條件過多時(shí),用戶需要拖動(dòng)鼠標(biāo)進(jìn)行查看與填寫。

2、標(biāo)簽的設(shè)計(jì)

標(biāo)簽的位置主要分成三種:左標(biāo)簽、頂標(biāo)簽、和內(nèi)標(biāo)簽(圖一、圖二、圖三、)。而關(guān)于是否要有必填和選填的存在,個(gè)人認(rèn)為,選填是否存在是可以被考究的。

左標(biāo)簽是目前比價(jià)主流的排布方式,主要適用于web端,建議將標(biāo)簽靠左對(duì)齊,因?yàn)椴粌H在界面上會(huì)顯得比較爭(zhēng)氣劃一,在用戶對(duì)信息的提取和響應(yīng)也會(huì)效率大大提高。但是它存在著一個(gè)比較尷尬的問題,也就是空間的占用上,用于web倒也沒有什么問題,但是當(dāng)如果用于移動(dòng)端,則會(huì)出現(xiàn)需要左右滑動(dòng),信息填寫被覆蓋等問題。

頂部標(biāo)簽很好的解決了左標(biāo)簽的尷尬處境,但是自身也存在著問題,也就是當(dāng)需要填寫較多信息的時(shí)候,出現(xiàn)滾動(dòng)的場(chǎng)景幾率也就相對(duì)較大。這里要注意的是在使用頂部標(biāo)簽的時(shí)候,我們要注意輸入框與輸入框之間的距離(如右圖)。

將標(biāo)簽放進(jìn)輸入框中是一個(gè)很好的解決方式,但是隨之而來的還有,當(dāng)我填寫信息的時(shí)候,輸入框任何指示信息也沒有,會(huì)讓用戶產(chǎn)生困惑的心里,那我們要如何解決呢:如上圖,我們可以將圖標(biāo)放入輸入框中或者放在左側(cè)。

3、幫助性信息

幫助性文字的展示一般采用氣泡框進(jìn)行提示(也有會(huì)先將一些提示性文字放在頁面的頂端,但是這個(gè)要取決于文案的內(nèi)容多少,以及重要程度。)氣泡框提示的內(nèi)容要求簡(jiǎn)潔易懂,鼠標(biāo)放上去則迅速展開提示內(nèi)容,鼠標(biāo)移開則消失,注意:展開的時(shí)候不宜擋住當(dāng)前輸入?yún)^(qū)域,這么做的原因是讓用戶知道我處于什么地方,我在針對(duì)什么。

4、輸入框的設(shè)計(jì)

在進(jìn)行信息錄入的過程中,我們要保持輸入框的獨(dú)特性(錄入前、錄入中、錄入后):錄入前和輸入中 我們要使輸入框高亮、沉浸、懸浮、等方法,讓用戶只專注于當(dāng)前的錄入,錄入后要給出反饋,是錄入失敗還是錄入成功,當(dāng)然這個(gè)要根據(jù)產(chǎn)品的特點(diǎn),來進(jìn)行控制。

5、報(bào)錯(cuò)提示

如上圖,報(bào)錯(cuò)提示有很多種,要根據(jù)不同場(chǎng)景選擇不同的報(bào)錯(cuò)提示,假如只是針對(duì)單個(gè)輸入框的判斷,則僅需在當(dāng)前狀態(tài)進(jìn)行報(bào)錯(cuò),文字提示和輸入框顏色、樣式、變化都可以。

但是如果是重大操作結(jié)果報(bào)錯(cuò),我們還是優(yōu)先選擇用模態(tài)框的方式進(jìn)行報(bào)錯(cuò),這樣的好處是能更好的提醒用戶錯(cuò)誤的結(jié)果,也能中斷用戶的操作,讓用戶專心思考和檢查之前的信息。

6、自動(dòng)配置。

我們?cè)谠O(shè)計(jì)的過程中,要盡量減少用戶的輸入次數(shù),有些信息,我們可以通過自動(dòng)補(bǔ)全,或者提供默認(rèn)值等方式減少用戶的輸入時(shí)間,畢竟用戶輸入信息只是一個(gè)過程。

7、尺寸和錄入量、格式

很多數(shù)據(jù)已經(jīng)證明根據(jù)內(nèi)容作出適當(dāng)?shù)某叽?,能夠大幅減少用戶的不確定性,以及一些特定的信息(手機(jī)、銀行卡等)采用特定的錄入格式都會(huì)讓用戶的體檢更加良好。

8、錄入信息的分組

將同類信息進(jìn)行分組,這樣即使是很多的信息疊加在一起,用戶在輸入上的心理壓力也會(huì)大大減小。

9、提高反饋報(bào)錯(cuò)和幫助信息的可見度

但用戶在輸入信息的過程中,當(dāng)遇到磕絆或者提示時(shí),證明用戶正處在迷茫的狀態(tài),這時(shí)候表達(dá)要發(fā)揮它的易操作、易理解、以及可見性,來進(jìn)行指導(dǎo)用戶走出迷茫。

總結(jié):好的表單設(shè)計(jì),在使用上是高效的,友好的,體驗(yàn)統(tǒng)一的。因此在設(shè)計(jì)的初期,要對(duì)錄入信息進(jìn)行一個(gè)充分的了解,這樣你的稿子才不會(huì)一審再審。

 

作者:秦東源,個(gè)人公眾號(hào):海鮮君的設(shè)計(jì)物語

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

題圖來自u(píng)nsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 非常感謝您對(duì)原則上支持。
    我引用了您的原則來改善我的表單設(shè)置。
    我的地址是:http://bijinshan.cn/zh-hans/node/47
    如里你有更好的建議:可以在我的博客上留言。
    ??

    來自浙江 回復(fù)
  2. 謝謝,對(duì)此時(shí)此刻的我很有幫助。 ??

    來自廣東 回復(fù)
  3. 感覺設(shè)計(jì)的很好。對(duì)我很有幫助。感謝

    來自北京 回復(fù)
    1. 謝謝,一起進(jìn)步!

      來自上海 回復(fù)
  4. 有一點(diǎn)錯(cuò)字和不通順的瑕疵,再優(yōu)化一下就更完美了,內(nèi)容挺好,感謝分享!

    來自廣東 回復(fù)
    1. 我好恨啊,我也發(fā)現(xiàn)了。。。

      來自上海 回復(fù)
  5. 可以的,受教了

    回復(fù)
    1. 謝謝 共同成長(zhǎng)~

      來自上海 回復(fù)
    2. 1

      來自北京 回復(fù)
    3. 1

      來自北京 回復(fù)