更好的前端設計形式——設計者犯的常見錯誤及修改方法

想學更多的設計知識能夠到咱們的羣（801466587）來交流哦~

不管是註冊表、多視圖步進器仍是單調數據輸入界面，表單都是產品設計中最重要的組成部分之一。本文着重論述了表格設計的常見問題和不足之處。記住，這些是通常準則，每一個規則都有例外。

表格應該是一列

多欄會干擾用戶垂直動量。

標籤頂部對齊

頂部對齊的標籤能夠很好地在手機上被翻譯。

組標籤及其輸入

把標籤和輸入放在一塊兒，確保字段之間有足夠的間距，這樣用戶就不會感到困惑。

不要全爲大寫字母

全爲大寫字母都比較難閱讀。

若是低於6個選項，能夠顯示全部能夠選擇的選項

在選擇器下拉中放置選項須要兩次單擊，並隱藏選項。若是有超過5個選項，請使用輸入選擇器。若是有超過25個選項，能夠在下拉菜單中加入上下文搜索。

將選框放在彼此之下

將選框放在彼此下方能夠方便用戶選擇

準確陳述按鈕做用

對按鈕應準確陳述意圖。

顯示錯誤提示

向用戶顯示錯誤發生的地方並提供緣由。

在用戶填寫字段後使用內聯驗證（除非在過程當中幫助它們）

在用戶鍵入「--」時不要使用內聯驗證，除非它幫助他們-例如在建立密碼、用戶名或帶有字符計數的消息的狀況下。

不要隱藏基本的幫助文本

儘量地公開基本的幫助文本。對於複雜的幫助文本，請考慮在聚焦狀態下將其放置在輸入旁邊。

區分主次

須要區分按鈕的主次關係。

使用字段框長度做爲啓示

框的長度提供了答案的長度。如電話號碼、郵政編碼等。

顯示出可選字段

用戶並不會都知道所需的字段標記（*）所隱含的內容。相反，最好是表示出可選字段。

羣體相關信息

長長的表單會讓人感到不知所措。經過建立邏輯組，用戶將更快地理解窗口。

使它有趣

生命短暫。沒有人想填寫表格。有趣可使用戶逐步參與。設計師的角色是表達他們公司的品牌以引發情感上的反應。若是你能正確運用上面的技巧，能夠提升你的完成率。

若是你想學習更多關於網頁前端設計的技巧，網頁排版的知識能夠去學習一下《歐美範網頁設計實戰課程》，若是你沒有ps基礎能夠去學習一下《PS網頁前端設計基礎》這是一套徹底免費的教程，相信你將會有更多的收穫~ 若是你喜歡這篇文章或發現它有用，能夠點❤，也能夠點擊分享它，這樣更多的人能夠從中受益~