設計一份優秀表單，需要注意的三個要點

最近發現一首特別耐聽的歌，張學友的《是否在戀愛》（國語版）/《甚麼是戀愛》（粵語版），旋律跟歌詞都很棒，尤其是在最近被各種負面新聞圍繞的氛圍下聽反而能緩解鬱悶的情緒。不過可氣的是之前跟 JC 錄的第四期電台音頻因為內含各種雜音，所以被我們無情地拋棄了，在這上面至少浪費了 4 個小時，不過還好已經重錄並發布了。

這個季節，該是漫天的黃葉、滿樹的紅花羊蹄甲的時候了吧？雖然這周天氣變化反覆無常，但好在過得還不錯，各計劃都完成的還算理想，也算是充實的一周吧。2017 年的最後一個月，不免回憶起去年這個時候組織了一群讀者寫了年終總結呢，不知道這群人如今過得怎麼樣，還在看我寫得文章么？甚是懷念啊。

說回今天翻譯的這篇文章，在我看到它的時候，在 Medium 上是 216 個贊，當我過了 2 天準備翻譯的時候，它的點贊數已經接近 3K 了。不是說它寫得多好，只是作者對於表單設計的理念還是挺到位的，下面分享給各位。

本周譯文。

這是一篇適用於任何人的關於表單設計的方法。

在我們的生活中經常會接觸到表單，不過老實說，它們的使用體驗經常讓人無奈，比如在一些平台確認飛機票、檢查購物清單或者是登錄頁面的設計等等。所以我們都希望表單能被設計的更好用一點。

雖然在這個時代，我們對錶單的設計在交互方法上有更多的技術選擇，包括人工智慧、生物識別等，但是如今我們能看到的大部分表單的基本結構與設計方式都還是處於紙質時代的技術層面上。

從本質上說，好用的表單應該是易於理解且讓人感到舒適的。

易於理解的表單能夠幫助用戶更好的對它們進行填寫，這能讓用戶覺得是在跟表單進行交流，而不是單向的詢問。

讓人感到舒適的表單讓用戶感覺到自己得到了關注。這種表單會在用戶填寫的過程中犯錯誤時，會替用戶找到錯誤的位置和原因，並幫助他們進行修改。

下面有三個注意點，告訴你如何設計出這樣的表單。

1.儘可能刪除表單中的多餘欄位，直到不能再刪除為止。

在上面的例子中，Airbnb 允許用戶通過郵箱進行註冊，但提供的欄位過多，沒辦法讓用戶輕鬆填寫。雖然我知道有時候要去掉表單中的某些項目是不可能的（出於一些原因），但是我們應該盡量做到這一點。所以，要想讓 Airbnb 這份表單做到井然有序，可以從以下幾點做起：

• 修改標籤，刪減掉額外的無用欄位：用「Full Name」欄位替代「First」與「Last」這兩個欄位（即用「姓名」一個輸入框替換掉「姓」與「名」這兩個輸入框）；
• 某個欄位信息對於用戶來說是否有必要在註冊表單中進行填寫（如讓用戶使用郵箱註冊，那麼對於「姓名」欄位是否可以在註冊完成之後的「個人資料」中再填寫）？
• 與領導或產品相關人員協商，將某欄位刪除？（這點很難做到，往往需要數據或其他資料證明這個欄位確實是無用的）

除了對錶單進行簡化之外，我們還可以通過與第三方社交平台的合作來讓用戶更方便的進行註冊，我們總要思考如何將表單最簡化。這就像是 Antoine de Saint-Exupery』s 的名言說的:完美的作品，不是對其中的內容做到無以復加，而應該是不可減少。

2.給表單的設計加入微交互

其實市面上已經有許多新的表單設計形式慢慢普及開來了，但是要在使用之前思考為什麼你的表單需要使用它們。

這些例子中的微交互非常有趣！它們可以提起用戶的興趣，提升用戶註冊的轉化率。其實還有許多其他的微交互方式，也會讓表單變得很有趣。下面這個鏈接中就可以看到不少有趣的關於輸入框的動效形式。 https://tympanus.net/Development/TextInputEffects/

但是，你需要記住你正在為誰而設計，無論是否對錶單加入微交互，都應該考慮清楚它們是否適合你的項目。

3.從全局出發，思考表單的作用

第三點是最具挑戰性的，也是表單設計工作中最具價值的一個點。設計出好的表單不僅僅是把關注點停留在元素或組件上，還應該找到是什麼原因導致用戶在使用的過程中遇到了問題，乃至在填寫表單的過程中被困擾。

雖然這說起來很簡單，好像就是讓用戶註冊這款產品或者說讓用戶訪問站點並創建賬號。但是用戶為什麼要這麼做呢？你是否有想過用戶在使用你的產品時會遇到什麼問題？以及為什麼用戶需要填寫這份表單呢？這是設計師應該思考的。

思考你的表單的設計策略以及它如何融入你的項目中，這將會真正地讓你的工作、團隊以及目標用戶受益。

我不是表單設計方面的專家，甚至在設計領域我也沒有對這方面進行深入的學習與探索，但是希望我寫得這些能幫助各位開始對錶單設計起到重視的作用。

總結

其實這篇文章就說了一個道理，就是在形式上簡化表單的內容，而這個前提是在業務上梳理清楚用戶為什麼要使用這個表單的情況下，同時它能幫用戶解決什麼問題，以及這個表單對於你的產品或項目起到了什麼作用。

看起來很複雜，用一句話總結就是：先找到設計表單的目的，這樣你就知道如何設計了。

END.

原文：https://uxplanet.org/3-best-form-design-practices-for-your-design-process-383510b31613

作者：Ken Lee-Sanekata