[ 平面理論教程 ] 設計師必須知道的表單設計的基本準則- 設計教程 - 骨子愛創意

教學主題: 設計師必須知道的表單設計的基本準則

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 設計師必須知道的表單設計的基本準則

這教學的重點為這幾點 [ 基本,準則,設計,必須,知道,設計師,表單,用戶,輸入,內容 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

表單可能是日常UI設計中最常見的設計元素了，它廣泛的應用範疇、多年來的積澱使得表單設計牽涉到大量的、約定俗成的設計規則。今天我們來聊聊這些最常見的表單設計準則。

表單可能是日常UI設計中最常見的設計元素了，它廣泛的應用範疇、多年來的積澱使得表單設計牽涉到大量的、約定俗成的設計規則。今天我們來聊聊這些最常見的表單設計準則。

無論是註冊網站還是內容輸入，總是迴避不了表單這種UI控件。表單幾乎是每一個數字產品都無法規避的組成部分，它的作用近乎無可替代。不過，表單這種控件應用範疇極為廣泛，應用情況牽涉到方方面面，所以請注意，今天的文章里我們所提及的設計準則都只是一般準則，每一種其實都有例外的情況。不過作為一般準則，它們可以很好地引導你設計出一個可用性極佳的表單，同時，作為設計師的你還需要根據實際情況，靈活地調整細節。

接下來，我們一起來看看這些準則都包含了哪些內容吧。

盡量使用單列設計

多列的表單容易讓人分心，無法完全垂直瀏覽一口氣完成填寫。

頂部標籤對齊

標籤和輸入框縱向排列靠左對齊的設計，比起兩者並排擺放效果更好。一方面，這種設計在桌面端和移動端都足夠友好，另一方面，這樣的設計可以更好兼容不同類型、長短的標籤，便於用戶視線的縱向掃視。不過標籤置於輸入框左邊的設計也有其優勢所在：布局更為緊湊，表單長度被壓縮，顯得更短，在特定的頁面布局需求下，可能是更好的選擇。

關聯標籤和輸入框

讓相互關聯的標籤和輸入框更加靠近，組成分組，讓不同的分組保持相對較大的距離，確保用戶不會產生迷惑。

避免字母全大寫

全部字母大寫會難於閱讀和快速掃視。

低於6個選項就全部展示

當表單中需要選取不同選項的時候，低於6個選項就不要使用下拉選框來選取了，因為下拉選框需要兩次點擊完成結果的選擇，而直接選擇來的更快。而超過5個選項的時候，選項過多，適合下拉選框的展示形式。

避免將標籤作為佔位符使用

為了讓布局更緊湊，將標籤作為佔位符放置於輸入框內是很有誘惑力的做法，但是這樣存在一定的可用性問題：讓部分用戶迷惑內容已經被填寫;點擊輸入的時候佔位符消失，有的用戶會忘記輸入內容屬性。

複選框應當縱向排列

縱向排列複選框讓用戶可以更快的掃視內容，便於進行選取。

表述清晰的行為召喚按鈕

行為召喚按鈕中的標籤必須使用簡短而明確的詞彙，讓用戶明確行為的意圖和功能。

指明出錯的內容

當用戶填寫內容出錯的時候，應當指明發生錯誤的條目，以及錯誤的原因。

在用戶填寫完后再驗證

除了需要在輸入過程中進行實時驗證，普通的內容輸入應當在用戶輸入完成之後再對內容的格式、屬性進行驗證，這些時候盡量避免使用內嵌驗證。

不要隱藏基本的幫助文本

將基本的幫助文本直接展示出來，除非你的幫助文本超過100個單詞，信息量過大。如果幫助文本內容過長，建議置於靠近標籤或者輸入框的地方，光標懸停時展示。

區分主要操作和次要操作

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

主要操作和次要操作是要進行區分的，而這個要根據使用場景和需求來分析和區分。

讓內容長度和輸入框長度對應

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

輸入框的長度應該同輸入內容進行對應。諸如郵政編碼、電話號碼和銀行卡號這樣的字段，長度都是固定的，在設計它們的輸入框的時候，輸入框的長度是很好確定的。

正確區分必填字段和選填字段

用戶有的時候並不知道哪些字段是必須填寫哪些可以不用填寫的 ，通常會使用星號(*)來區分兩者，但是星號有的時候並不能為用戶理解，所以盡量用文字來標識差異。

相關信息分組

過長的表單常常會讓用戶感到煩躁和不知所措，應當根據特定的邏輯、內容屬性將相關的內容分組，強化表單整體的形式感，用戶覺得更容易填寫表單，也更容易完成。

值得思考的問題

設計師應當考慮可選字段是否真的必要，並且盡量從更多的渠道搜集數據。

用戶數據的搜集和錄入日趨完善甚至日益複雜化。智能設備本身所搜集的用戶信息越來越多，通過用戶授權，APP和網頁可以獲取大量不同類型、不同體量的數據，這些數據還可能來自第三方的帳號，有或者某個其他的APP，這些信息對於產品而言都有巨大的價值，而體現在表單設計上最直接的好處，就是用戶可以少填寫很多重複的信息。

讓表單有趣

時間寶貴，生命短暫，誰想將大量的時間耗費在填寫表單上呢?其實表單的填寫可以更加有趣的，設計師可以將情緒、情感通過合理的表單設計強化品牌的氣質與特徵。在不違反上述一般法則的基礎上，設計師能做的事情還有很多，為什麼不讓表單更有趣呢?

歡迎關注doyoudo的微信公眾號：

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 設計師必須知道的表單設計的基本準則 這教學會喜歡

文章標題: 骨子愛創意- 設計師必須知道的表單設計的基本準則–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 基本,準則,設計,必須,知道,設計師,表單,用戶,輸入,內容

本文永久連結 :設計師必須知道的表單設計的基本準則

本文轉載自 :VIA