表單設計

摘自《web表單設計》

0惯悠,少即是多的大原則:去掉不必要的問題,甚至可要可不要的問題竣况。

1克婶、大家都知道用戶在頁面上的視線軌跡是近似Z字形眼動,那么將表單放到用戶可視的第一位。

2情萤、如果有多個并列的問題鸭蛙,一般使用輸入框高度的50%-70%作為問題之間的間隔高度。

3筋岛、問題之間都是有聯(lián)系的娶视,可以進行分塊,有邏輯的組織各個問題泉蝌。

4歇万、表單應該少使用復雜的交互和視覺樣式揩晴,以免增加用戶負擔勋陪。

5、但是各組問題之間需要區(qū)隔硫兰,使用很簡單的方法(比如虛線诅愚、淡背景色)來區(qū)分各組。

6劫映、除了表單自身违孝,頁面其他位置盡可能不要讓用戶注意到,也即是說泳赋,頁面其他地方的信息用戶也不應該注意到雌桑,那么最好不放內容。

7祖今、整體流程欄上不要加表示步驟的數(shù)字校坑,因為在填寫表單的過程中,某個步驟可能會被增加(登錄千诬、選擇支付方式等)

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

9邪驮、不要僅僅要顏色來傳遞功能(如出錯時候的提示),各個用戶對顏色的理解是會有偏差的傲茄。姐姐方法是應同時使用文字毅访。

10、如果要使用Tab鍵作為表單內容間的跳轉盘榨,要考慮到對于兩欄表單的從第一欄底部跳到第二欄頂部時的顯示問題俺抽。

11、一定要有表單名稱较曼,并且符合人們的期望磷斧,并簡述表單的目的

12、頂部對齊/左對齊/右對齊,各有優(yōu)劣弛饭。頂部冕末,符合眼動效率。右對齊侣颂,標簽和輸入框距離近档桃。左對齊,方便用戶快速掌握問卷內容憔晒。根據(jù)場景和表單目的來選擇藻肄。

13、如果屏幕空間珍貴拒担,標簽內容放到輸入框中提示嘹屯。但這并不適用于問題很多或答案很長的情況,因為寫完無法check回答的內容是不是符合問題从撼。

14州弟、輸入框的長度要和用戶對答案的預期長度基本符合。

15低零、如果要對“必填項”還是“選填項”進行標注婆翔,那只有在這兩種問題數(shù)量差異懸殊時標注有意義。同時要標注問題少的那個掏婶。

16啃奴、單獨出現(xiàn)“ * ”是沒有意義的,因為沒有圖例說明這是必填還是選填雄妥。直接用文字最蕾。

17、表單完成時有主動作和次動作之分茎芭,一般來說“提交”為主動作揖膜。主動作標示要顯眼。如果可能梅桩,去掉次動作的按鈕壹粟。

18、主動作按鈕和主輸入框對齊宿百。

19趁仙、提交時應有動作提示表單已在提交(特別是網(wǎng)絡不好的時候),避免重復提交垦页。

20雀费、幫助文字在需要時才出現(xiàn),不遮擋頁面其他文字痊焊,與當前輸入框融為一體盏袄》蘧·

21、幫助文字在當前輸入時不能消失辕羽,否則就失去了幫助文字的意義逛尚。

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

23、如果輸入有誤铣口,先告知“出錯”滤钱。在出錯的地方用不同的顏色/字號/圖形顯示錯誤

24、多采用即時驗證脑题,比如支付寶的驗證碼件缸。最適合錯誤率高,或有特殊格式要求的表單項旭蠕,但要在輸入完成后驗證停团,不要在輸入過程中驗證旷坦。

25掏熬、減少問題是必要的,但是不能增加其他問題的復雜程度秒梅。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市辆它,隨后出現(xiàn)的幾起案子誊薄,更是在濱河造成了極大的恐慌,老刑警劉巖锰茉,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呢蔫,死亡現(xiàn)場離奇詭異,居然都是意外死亡飒筑,警方通過查閱死者的電腦和手機片吊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來协屡,“玉大人俏脊,你說我怎么就攤上這事》粝” “怎么了爷贫?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵认然,是天一觀的道長。 經(jīng)常有香客問我漫萄,道長季眷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任卷胯,我火速辦了婚禮子刮,結果婚禮上,老公的妹妹穿的比我還像新娘窑睁。我一直安慰自己挺峡,他們只是感情好,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布担钮。 她就那樣靜靜地躺著橱赠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪箫津。 梳的紋絲不亂的頭發(fā)上狭姨,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音苏遥,去河邊找鬼饼拍。 笑死,一個胖子當著我的面吹牛田炭,可吹牛的內容都是我干的师抄。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼教硫,長吁一口氣:“原來是場噩夢啊……” “哼叨吮!你這毒婦竟也來了?” 一聲冷哼從身側響起瞬矩,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤茶鉴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后景用,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涵叮,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年丛肢,在試婚紗的時候發(fā)現(xiàn)自己被綠了围肥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蜂怎,死狀恐怖穆刻,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情杠步,我是刑警寧澤氢伟,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布榜轿,位于F島的核電站,受9級特大地震影響朵锣,放射性物質發(fā)生泄漏谬盐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一诚些、第九天 我趴在偏房一處隱蔽的房頂上張望飞傀。 院中可真熱鬧,春花似錦诬烹、人聲如沸砸烦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽幢痘。三九已至,卻和暖如春家破,著一層夾襖步出監(jiān)牢的瞬間颜说,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工汰聋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留门粪,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓马僻,卻偏偏與公主長得像庄拇,于是被迫代替她去往敵國和親注服。 傳聞我的和親對象是個殘疾皇子韭邓,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內容

  • 一. 表單設計的影響與原則 1.1 表單的產(chǎn)生 由內而外,網(wǎng)站根據(jù)自身信息存儲格式要求溶弟,從數(shù)據(jù)庫映射成表單女淑。 由外...
    曉夢蟬君閱讀 12,047評論 1 30
  • 我們每天都要和大量的表單交互,表單設計的好壞直接影響著我們使用產(chǎn)品的直觀感受辜御,同時表單設計的好壞還會影響公司產(chǎn)品的...
    北海_閱讀 1,358評論 0 14
  • 本書一共14章鸭你,講了三部分內容:表單結構、表單元素擒权、表單交互袱巨。表單是橫在用戶和企業(yè)之間的一道障礙, 沒有任何人喜歡...
    2c5994723157閱讀 3,220評論 0 16
  • 無論你是做什么產(chǎn)品的碳抄,我相信表單設計的需求都是非常常見的泰涂,但是也是容易被忽略的蔬浙。跟以往不同的是,寫這篇文章并不是我...
    idatadesign閱讀 1,845評論 1 25
  • 無意中在朋友圈里看到簡友分享的贈書活動统捶,被抽中的人可以獲得一本書,但是要在兩周內寫一篇書評屠凶。我從小就喜歡別人送書給...
    七云舒閱讀 322評論 0 2