換個角度談表單設計

今天這期周刊我們繼續來聊聊「表單設計」這個 Design Pattern。表單幾乎是設計過程中每個產品都會涉及到的一個功能模塊，作為一個如此重要、常見的課題，網路上有非常多的相關的討論、總結文章。不過既然我們的這個系列是基於 Design System 來展開的，這次我想換一個思路和角度來和大家談表單設計。

從表象上來看，表單不過是一堆操作的集合界面，但實際上它遠沒有看上去這麼簡單。表單的出現就意味著需要對用戶當前流程的中斷，向用戶索要信息，表單的設計是否合理將會對產品的整體效果、數據帶來直接的影響。

網路關於表單設計的討論有很大一部分關注點在動效、設計形式的創新，比如前段時間很多人關注的欄位標題設計（如下圖）：

其實並不是說這些討論和文章不好，只是基於我們在前面對於表單的思考它們只是一些「點」，而表單設計於業務的作用是一整個「面」的事情。單個的「點」很散，不足以實質是的解決問題，只有基於「面」下思考的「點」才是真正設計於業務真正的價值。

表單本質是解決什麼問題？

原則上來說用戶並不需要表單，是因為我們還無法更有效、方便的獲取用戶的信息，所以需要用戶自己填寫來讓幫助產品滿足大家的需求。

這個成本是我們的系統留給用戶的，既然現在我們還無法完全避免，那麼我們就需要儘可能的去降低用戶在這裡的成本消耗。

所以表單的本質是幫助系統合理、高質、高效的收集用戶信息來讓用戶的使用繼續下去，獲得更好的產品體驗、提升對產品的依賴。而從產品設計的角度來說，我們最核心關注的是表單的填寫質量和填寫效率。

填寫質量將影響系統是否能夠更好的服務於用戶；填寫效率則將影響用戶是否更願意提供信息給到我們的系統。

如何來看待表單設計

很多設計師在表單設計過程中受到別人的質疑或是自我懷疑，很大原因來源於將多個維度的混在了一起。就像我們將交互、視覺同時來做的時候一樣，結果往往導致顧了東顧不了西，越攪越亂。

所以當我們換一個思路，將表單的「屬性」先進行拆分逐個解決，處理起來就會清晰得多。

通常來說我會將表單（其實也適用於很多地方）的設計拆分成三個維度：基礎體驗、行業特性和業務特性，這三個維度基本也決定了一個表單的設計，我們可以由下至上一層層來解決。

首先，表單作為最為常見的設計模式之一已經被大家研究過很多年了。無論是怎樣的表單，使用哪些組件、各自有什麼樣的約束、規範和優秀案例，得出結論和形成一整套完整的方案相對來說還是比較容易的。

在此之上我們可以開始進一步考慮產品所處的行業或是領域。每一個不同的類型都有著自己的特性，做食譜的產品和做汽車的產品顯然就有著很大的差異（後面會詳細提到）。它直接的反映就是表單問題和輸入的設計，最終也會體現出產品自身的專業度表單填寫的質量效率。

最後是業務特性。如果說前兩層屬性還具備共同性，那麼第三層的業務特性可能就會有著明顯的差異。每一個產品都有自己獨特的業務特性（同時也是設計上的約束），我們需要基於它們來進行屬於自己產品的表單設計。

這也是為什麼之前提到做競品分析真正需要的是分析而不是直接「照搬」別的產品，設計的思考具有共同性但產品業務、背景則很多時候是不一樣的。

以上是 Design System 系列的第 10 期的節選內容，在餘下的全文內容中（付費部分）我們將繼續聊聊表單的設計框架，並且通過幾個實際案例來進一步剖析表單的設計。

加入 PinDesign 會員，獲取本期主題「換個角度談表單設計」的全文內容及本系列前 2 期周刊的贈送，年付會員將獲得 Design System 系列所有（01~09）文章的贈送。

Design System 是 PinDesign 周刊的一個新系列，基於「Design Systems」這本書結構框架的讀書筆記和經驗總結。希望將自己的感受和經驗分享給大家，輔助大家的閱讀。

點擊領取 PinDesign 會員計劃 50 元優惠券

Design System 系列已更新：