表單設(shè)計(jì)

摘自《web表單設(shè)計(jì)》

0,少即是多的大原則:去掉不必要的問(wèn)題,甚至可要可不要的問(wèn)題。

1、大家都知道用戶(hù)在頁(yè)面上的視線軌跡是近似Z字形眼動(dòng),那么將表單放到用戶(hù)可視的第一位。

2、如果有多個(gè)并列的問(wèn)題,一般使用輸入框高度的50%-70%作為問(wèn)題之間的間隔高度。

3、問(wèn)題之間都是有聯(lián)系的,可以進(jìn)行分塊,有邏輯的組織各個(gè)問(wèn)題。

4、表單應(yīng)該少使用復(fù)雜的交互和視覺(jué)樣式,以免增加用戶(hù)負(fù)擔(dān)。

5、但是各組問(wèn)題之間需要區(qū)隔,使用很簡(jiǎn)單的方法(比如虛線、淡背景色)來(lái)區(qū)分各組。

6、除了表單自身,頁(yè)面其他位置盡可能不要讓用戶(hù)注意到,也即是說(shuō),頁(yè)面其他地方的信息用戶(hù)也不應(yīng)該注意到,那么最好不放內(nèi)容。

7、整體流程欄上不要加表示步驟的數(shù)字,因?yàn)樵谔顚?xiě)表單的過(guò)程中,某個(gè)步驟可能會(huì)被增加(登錄、選擇支付方式等)

8、只在必要的地方出現(xiàn)表單。表單上每個(gè)問(wèn)題都要多問(wèn)自己幾次:是不是一定得在這兒讓用戶(hù)填寫(xiě)?

9、不要僅僅要顏色來(lái)傳遞功能(如出錯(cuò)時(shí)候的提示),各個(gè)用戶(hù)對(duì)顏色的理解是會(huì)有偏差的。姐姐方法是應(yīng)同時(shí)使用文字。

10、如果要使用Tab鍵作為表單內(nèi)容間的跳轉(zhuǎn),要考慮到對(duì)于兩欄表單的從第一欄底部跳到第二欄頂部時(shí)的顯示問(wèn)題。

11、一定要有表單名稱(chēng),并且符合人們的期望,并簡(jiǎn)述表單的目的

12、頂部對(duì)齊/左對(duì)齊/右對(duì)齊,各有優(yōu)劣。頂部,符合眼動(dòng)效率。右對(duì)齊,標(biāo)簽和輸入框距離近。左對(duì)齊,方便用戶(hù)快速掌握問(wèn)卷內(nèi)容。根據(jù)場(chǎng)景和表單目的來(lái)選擇。

13、如果屏幕空間珍貴,標(biāo)簽內(nèi)容放到輸入框中提示。但這并不適用于問(wèn)題很多或答案很長(zhǎng)的情況,因?yàn)閷?xiě)完無(wú)法check回答的內(nèi)容是不是符合問(wèn)題。

14、輸入框的長(zhǎng)度要和用戶(hù)對(duì)答案的預(yù)期長(zhǎng)度基本符合。

15、如果要對(duì)“必填項(xiàng)”還是“選填項(xiàng)”進(jìn)行標(biāo)注,那只有在這兩種問(wèn)題數(shù)量差異懸殊時(shí)標(biāo)注有意義。同時(shí)要標(biāo)注問(wèn)題少的那個(gè)。

16、單獨(dú)出現(xiàn)“ * ”是沒(méi)有意義的,因?yàn)闆](méi)有圖例說(shuō)明這是必填還是選填。直接用文字。

17、表單完成時(shí)有主動(dòng)作和次動(dòng)作之分,一般來(lái)說(shuō)“提交”為主動(dòng)作。主動(dòng)作標(biāo)示要顯眼。如果可能,去掉次動(dòng)作的按鈕。

18、主動(dòng)作按鈕和主輸入框?qū)R。

19、提交時(shí)應(yīng)有動(dòng)作提示表單已在提交(特別是網(wǎng)絡(luò)不好的時(shí)候),避免重復(fù)提交。

20、幫助文字在需要時(shí)才出現(xiàn),不遮擋頁(yè)面其他文字,與當(dāng)前輸入框融為一體。·

21、幫助文字在當(dāng)前輸入時(shí)不能消失,否則就失去了幫助文字的意義。

22、如果有多輸入框都需要相同的幫助文字,該幫助文字保持顯示。

23、如果輸入有誤,先告知“出錯(cuò)”。在出錯(cuò)的地方用不同的顏色/字號(hào)/圖形顯示錯(cuò)誤

24、多采用即時(shí)驗(yàn)證,比如支付寶的驗(yàn)證碼。最適合錯(cuò)誤率高,或有特殊格式要求的表單項(xiàng),但要在輸入完成后驗(yàn)證,不要在輸入過(guò)程中驗(yàn)證。

25、減少問(wèn)題是必要的,但是不能增加其他問(wèn)題的復(fù)雜程度。

26、盡可能在所有地方提供默認(rèn)答案,可以根據(jù)用戶(hù)信息或是普遍用戶(hù)行為推斷,要符合大多數(shù)用戶(hù)的預(yù)期。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一. 表單設(shè)計(jì)的影響與原則 1.1 表單的產(chǎn)生 由內(nèi)而外,網(wǎng)站根據(jù)自身信息存儲(chǔ)格式要求,從數(shù)據(jù)庫(kù)映射成表單。 由外...
    曉夢(mèng)蟬君閱讀 12,370評(píng)論 1 30
  • 我們每天都要和大量的表單交互,表單設(shè)計(jì)的好壞直接影響著我們使用產(chǎn)品的直觀感受,同時(shí)表單設(shè)計(jì)的好壞還會(huì)影響公司產(chǎn)品的...
    北海_閱讀 1,449評(píng)論 0 14
  • 本書(shū)一共14章,講了三部分內(nèi)容:表單結(jié)構(gòu)、表單元素、表單交互。表單是橫在用戶(hù)和企業(yè)之間的一道障礙, 沒(méi)有任何人喜歡...
    2c5994723157閱讀 3,330評(píng)論 0 16
  • 無(wú)意中在朋友圈里看到簡(jiǎn)友分享的贈(zèng)書(shū)活動(dòng),被抽中的人可以獲得一本書(shū),但是要在兩周內(nèi)寫(xiě)一篇書(shū)評(píng)。我從小就喜歡別人送書(shū)給...
    七云舒閱讀 416評(píng)論 0 2
  • 無(wú)論我們做什么事都講究方式方法,寫(xiě)產(chǎn)品需求文檔(以下稱(chēng)PRD文檔)也是如此,之前我通過(guò)五篇文章分享了自己寫(xiě)PRD文...
    戰(zhàn)敭閱讀 586評(píng)論 0 9

友情鏈接更多精彩內(nèi)容