2019-8-14 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
介紹表單設(shè)計(jì)里經(jīng)常會(huì)犯的錯(cuò)誤~
無(wú)論是注冊(cè)流程，還是信息輸入的界面，表單都是產(chǎn)品設(shè)計(jì)里最重要的組件之一。本文重點(diǎn)介紹了表單設(shè)計(jì)里常見(jiàn)的注意事項(xiàng)。不過(guò)這些只是通用的規(guī)則，實(shí)際應(yīng)用中總有例外~
少于6個(gè)選項(xiàng)的情況，建議全部顯示
把選項(xiàng)內(nèi)容放在下拉框里，不僅隱藏了選項(xiàng)內(nèi)容，而且需要兩次點(diǎn)擊。如果大于5個(gè)選項(xiàng)，建議用輸入選擇器，如果超過(guò)25個(gè)選項(xiàng)，建議加上搜索功能~
輸入框長(zhǎng)度可以暗示內(nèi)容長(zhǎng)度
輸入內(nèi)容的長(zhǎng)度決定了輸入框的長(zhǎng)度。這種做法適合應(yīng)用在一些固定長(zhǎng)度信息的情況，比如銀行卡號(hào)、電話號(hào)碼、郵政編碼等。
標(biāo)簽頂部對(duì)齊
相比左對(duì)齊，標(biāo)簽頂部對(duì)齊的表單用戶完成率更高。移動(dòng)設(shè)備屏幕大小有限，頂部對(duì)齊的效果也更好（標(biāo)簽文案長(zhǎng)度不可控）。然而在大量數(shù)據(jù)輸入時(shí)，還是可以考慮左對(duì)齊標(biāo)簽，因?yàn)闉g覽更，還能節(jié)省高度。
不要把占位符當(dāng)做標(biāo)簽
用戶在輸入的時(shí)候就會(huì)看不到標(biāo)簽內(nèi)容是什么了。詳見(jiàn)Nielsen Norman團(tuán)隊(duì)的總結(jié)。
*也可以參考Google的做法，默認(rèn)把占位符當(dāng)作標(biāo)簽，輸入時(shí)標(biāo)簽移動(dòng)到輸入框上方
將復(fù)選框/單選框上下排列
上下排列方便瀏覽閱讀，橫向排列選項(xiàng)內(nèi)容會(huì)被選框控件隔開(kāi)。
指出錯(cuò)誤在哪
告訴用戶具體哪里出錯(cuò)了，以及錯(cuò)誤的原因。
等用戶填完了再進(jìn)行驗(yàn)證
不要在用戶正在輸入的時(shí)候就去驗(yàn)證，除非這能幫到他。例如在創(chuàng)建一個(gè)有字?jǐn)?shù)限制的密碼～
不要隱藏幫助信息
盡量默認(rèn)顯示幫助信息。如果信息太復(fù)雜，考慮在輸入時(shí)放在輸入框的旁邊。
不要用*星號(hào)表示必填項(xiàng)，標(biāo)出選填字段
用戶不一定知道星號(hào)代表什么含義。還不如明確的標(biāo)出哪些是選填字段。
標(biāo)簽和輸入框成組
標(biāo)簽和對(duì)應(yīng)的輸入框形成一組，他們之間的間距要比組與組之間的間距小，這樣用戶不會(huì)困惑標(biāo)簽是屬于上面還是下面。
按鈕的文案描述具體意圖
比如按鈕上的文字建議寫“注冊(cè)”，而不是“提交”。
主次按鈕有層次區(qū)分
關(guān)系近的內(nèi)容成組
太長(zhǎng)的表單讓用戶感到不知所措。有邏輯地分組能讓用戶更快地理解表單。
轉(zhuǎn)自：站酷-大秘密mimi
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net