表單設(shè)計(jì)實(shí)用指南

作者網(wǎng)址:https://uxdesign.cc/@CoyleAndrew

原文地址:Design Better Forms

譯者:mantfly

此文由非專業(yè)人士翻譯自Medium钾唬,仍在不斷修訂中。


在設(shè)計(jì)表單的過程中,設(shè)計(jì)師常常遇到的問題钮追,以及如何解決它們灰羽。

表單最好是一列

多列表單會(huì)影響用戶的垂直方向感

標(biāo)簽和表格對(duì)齊

標(biāo)簽頂部對(duì)齊的表格比左對(duì)齊讓用戶完成度更高泛范,并且頂部對(duì)齊的標(biāo)簽在移動(dòng)端更容易轉(zhuǎn)換刃鳄。然而孽文,為了更容易瀏覽厌衔,多數(shù)據(jù)多選擇入口用左對(duì)齊的標(biāo)簽璧帝,相比頂對(duì)齊標(biāo)簽,可以減少高度富寿,做更多提示睬隶。

將標(biāo)簽和輸入框分組

標(biāo)簽和輸入框放在一起,確保組與組之間空間足夠大讓用戶不會(huì)混淆页徐。

避免全大寫

全大寫不容易閱讀瀏覽苏潜。

選項(xiàng)少于6個(gè)可以全部展示

下拉列表需要兩次點(diǎn)擊并且隱藏了選項(xiàng),超過5個(gè)選項(xiàng)就使用輸入選擇器变勇,超過25個(gè)選項(xiàng)就用相關(guān)搜索的下拉菜單恤左。

不要把標(biāo)簽放在輸入框里

把標(biāo)簽放輸入框可以優(yōu)化空間贴唇,尼爾森諾曼集團(tuán)的Katie Sherwin總結(jié)過這個(gè)方式導(dǎo)致的一些使用問題。

把復(fù)選框(和單選按鈕)一行行列出來以便瀏覽

給出明確響應(yīng)的描述(CTAs: call to action)

明確的響應(yīng)表明意圖飞袋。

標(biāo)明填寫的錯(cuò)誤

給用戶標(biāo)出哪里出錯(cuò)了并給出原因戳气。

當(dāng)用戶打字的時(shí)候不要給錯(cuò)誤提示(除非對(duì)他們打字過程有幫助)

不要隱藏基礎(chǔ)的提示信息

盡可能保留基本的幫助信息。對(duì)于復(fù)雜的幫助信息巧鸭,可以在點(diǎn)擊輸入框后出現(xiàn)在輸入框后面瓶您。

把主要步驟和次要步驟區(qū)分開來

使用字段長(zhǎng)度作為輸入框長(zhǎng)度

輸入框的長(zhǎng)度容納內(nèi)容的長(zhǎng)度。類似電話號(hào)碼纲仍、郵編等等可以用到呀袱。

不要用*號(hào)來表示必填項(xiàng)目

用戶常常不知道*表達(dá)的是什么,相反巷折,去設(shè)置可選填的會(huì)更好压鉴。

把相關(guān)的信息放在一起

用戶的思考的時(shí)間是集中的,太長(zhǎng)的表單會(huì)讓人疲勞锻拘。有邏輯的分組會(huì)讓用戶更快熟悉表單油吭。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市署拟,隨后出現(xiàn)的幾起案子婉宰,更是在濱河造成了極大的恐慌,老刑警劉巖推穷,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件心包,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡馒铃,警方通過查閱死者的電腦和手機(jī)蟹腾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來区宇,“玉大人娃殖,你說我怎么就攤上這事∫楣龋” “怎么了炉爆?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)卧晓。 經(jīng)常有香客問我芬首,道長(zhǎng),這世上最難降的妖魔是什么逼裆? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任郁稍,我火速辦了婚禮,結(jié)果婚禮上波附,老公的妹妹穿的比我還像新娘艺晴。我一直安慰自己昼钻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布封寞。 她就那樣靜靜地躺著然评,像睡著了一般。 火紅的嫁衣襯著肌膚如雪狈究。 梳的紋絲不亂的頭發(fā)上碗淌,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音抖锥,去河邊找鬼亿眠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛磅废,可吹牛的內(nèi)容都是我干的纳像。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拯勉,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼竟趾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宫峦,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤岔帽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后导绷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體犀勒,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年妥曲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贾费。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡檐盟,死狀恐怖铸本,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情遵堵,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布怨规,位于F島的核電站陌宿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏波丰。R本人自食惡果不足惜壳坪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望掰烟。 院中可真熱鬧爽蝴,春花似錦沐批、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至发框,卻和暖如春躺彬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背梅惯。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工宪拥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人铣减。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓她君,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親葫哗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缔刹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容