11個高效實用的設計技巧,提升表單設計效果!

語言: CN / TW / HK

關注 ▲Clip設計夾 後台 回覆“ 進羣 加入設計成長羣

設計夾的第 120 篇文章分享 

大家好 ,這裏是設計夾 今天為大家分享的是 「表單設計

表單是產品設計中常見且重要的組成部分,對UX/UI設計師來説,構建有效的表單至關重要。

經過思考的表單設計,能夠為用户帶來更好的 實用性、包容性 ,讓填寫體驗更流暢。

讓我們一起來看看在表單設計過程中需要注意的技巧和問題點,創建更合理的表單

    最小化字段數量

通常表單中的字段越多,用户完成的可能性就越小。

在表單設計過程中我們要儘可能避免展示非必填的字段,尤其是想引導用户註冊或者留資的場景中,避免表單中的某個字段為選填,保證用户最大程度的留資轉化。

    明確標記可選字段

在同一個表單中,要確保用户清楚哪些字段是必填、哪些是選填的。

用星號標記必填字段是設計師最常用的方法,但用户仍有可能無法很好地理解星號的含義。

因此,簡單地用文本(選填)標記某些字段通常不會在視覺上造成負擔,並且更清晰。

    使用單列布局

儘管單列布局在視覺上可能不太優雅,但可以提高用户理解、減少輸入錯誤,提高整體的轉化率。

在單列布局中,用户“遺漏”輸入的可能性會更小,因為在填寫單列布局的表單時,視線只需要從上至下垂直移動。

當用户錯過某個字段時,會破壞用户不斷填寫表單取得進展的節奏,因為他們需要被迫倒退並填寫更早的字段,產生負面體驗。

    將標籤放在表單上方

在單列布局中,難經常看到表單標籤放在輸入框左側的情況。

這意味着用户的瀏覽視線仍然是Z字型,而不是簡單的垂直向下,這樣會增加填寫的複雜性,填寫過程更緩慢。

    對標籤和字段進行分組

在表單設計過程中,要確保表單的字段、相關的標籤有着清晰的層級分組和間距,並與周圍的元素充分分離。

    避免將數字拆分為多個輸入字段

當填寫電話號碼、身份證、銀行卡、訂單號等較長的數字時只需要一個輸入字段,避免將數字拆分為多個輸入字段。分成多個字段雖然看起來清楚,但需要用户多次點擊輸入,操作更繁瑣。

   在移動端中使用默認控件

Android和iOS都有用於特定類型數據輸入的默認組件,例如日期選擇器。

在移動端設計中,儘可能使用這些內置的元素,這樣用户會更熟悉原生的選項,表現可能會更好。

    保證字段簡潔

在設計表單的標籤時,目標是最少的字段和最大的清晰度。

如果考慮到某個字段有不確定性,可以使用一些簡短的提示文本,明確説明如何填寫這個字段。

    在按鈕上使用準確的描述

在按鈕中使用點擊後將進行的操作,讓用户能更明確知道點擊之後的操作。按鈕上最常見的描述是“提交”或者“取消”,代表的含義太不夠具體。可以考慮使用“註冊”、“發送信息”、“創建帳户”等文案。

   不要使用佔位符作為標籤

佔位符是指點擊輸入前在輸入框中顯示的提示文本。

使用佔位符文本作為標籤看起來雖然很簡潔,但佔位符文本的顏色往往是淺灰色,訪問性和識別度弱,不夠明顯。

另外一旦在輸入框內填寫信息後,佔位符標籤就會消失,用户可能會忘記這個表單的標籤或者輸入的具體要求。

    使用內聯驗證來確認進度

使用內聯驗證來確認用户輸入的進度以及輸入的內容是否正確。

例如用户填寫完成一個字段後,在字段旁出現正確的提示,即時反饋給用户。

最後

以上是在表單設計中高效且實用的設計技巧 ,希望通過這些內容能讓你對錶單設計有更多的學習

慢慢來比較快,如覺得有幫助,

請點個 贊&在看 ,謝謝!

添加微信,邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集