并不簡單！幫你提升表單使用效率的四個界面設計技巧

編者按：作為世界最著名的客戶關系管理軟件巨頭，Salesforce 在CRM軟件設計上有著深入的了解和過硬的設計和開發經驗。諸如CRM這類企業級的軟件中，表單類的界面非常多，這也促成了今天的這篇文章。一個優秀的表單到底要具備怎樣的素質？如何提高表單的用戶體驗和使用效率？看看Salesforce 的團隊是怎么做的。

Salesforce 用戶每天都在和表單打交道，無論他是銷售人員、主管還是經理。所以，對于Salesforce而言，能否無縫地添加、編輯、刪除信息就是確保企業生產力的核心因素和驅動力所在。這也是為什么Salesforce的UX團隊將表單設計和編輯作為新產品 Lightning Experience的核心。

1、標簽&字段的對齊

在Lightning 中，表單里的標簽和它所對應的輸入字段是一起左對齊的，并且標簽處于輸入框的上方。這種設計方式可以讓用戶操作更加省心高效，和之前的版本相比，用戶在瀏覽和操作的時候，只需要進行上下眼動就可以搞定一切，無需左右掃視。

一切都是左對齊的

雖然新的設計會在垂直方向上占用更多的空間，但是標簽和字段的匹配會讓整個界面在視覺上更加易用清晰。為了讓用戶在輸入的時候看得更清楚，成對的字段和標簽會更加靠近，兩個不同的組之間的間隙會更大。無需左右掃視之后，用戶可以更加順暢地填寫表單。

在視圖模式之下，我們采用了相同的原理來設計，這樣使得信息的層次結構更優秀，同時確保了整體的可讀性。

2、設置默認值

如果你是一名銷售人員，你的工作內容可能涉及到同潛在用戶進行溝通（也就是“Leads”）。如果你想在Salesforce中跟蹤這些潛在用戶的信息，那么通常你得先創建一個相應的檔案。如果要這么做的話，可能會創建下面的這種Lead 表單：

在Salesforce中創建一個新的Lead 表單

看起來很簡單，是吧？但是如果我們仔細看看，就能逐漸找出這種表單在設計上的門道。第一個可編輯的字段是“Lead 狀態”，它包含了以下選項：無聯系、有聯系、開放狀態、合格、不合格。

研究表明，設置一個默認值會引導許多人在多種不同的語境和環境下選擇默認選項。好了，回到最初的問題，如果你是一個銷售人員，在同新的潛在用戶的溝通的時候，第一次填寫這個表單的時候，你可能會更傾向于選擇“開放狀態”而非空著不填寫。

好了，在絕大多數的情況下，新建一個Lead 表單的時候銷售人員會選擇“開放狀態”。而在之后每次新建這類表單的時候，在這個字段上耗費一兩秒來進行選擇。但是如果這種表單的數量非常多，比如有幾百份，那么這個修改成本就非常之高昂了。這就是為何要為一些字段設計默認值。

3、預填寫相關字段

許多記錄的相關頁面會根據“發布者”來執行一些預制的操作，比如創建新的任務和事件（我們在淘寶下單的時候，系統會幫你填寫預制的默認收件地址、收件人和聯系電話，這種機制與之類似）。那么我們看看下面的頁面：

發布者登錄之后觸發的操作

系統會自動填寫發布者信息

在理想的狀態下，用戶會認真填寫每一個字段的詳細信息，然而事實上用戶并沒有這么做。

在這個案例中，這個Lead 表單是關于一個名叫Walter Junior的人，并且這是執行一次調用之后顯示的界面。這個用戶相關的信息包含了四個字段，而其中“姓名”和“項目”兩個字段都被預先填寫，由于這是一個調用信息的界面，所以項目中默認填寫的是“Call”，而相關用戶的名字也無需填寫，直接填寫進去了。

在理想的狀態下，用戶會“勤勉”地填寫所有字段，并且詳細地描述每一個細節和相關的信息。然而實際上，人是有惰性的，操作者總會詳盡辦法偷懶。每一個新增加的字段，都是用戶完成表單的巨大屏障。為了解決這個問題，我們作出了一個妥協方案：系統預先填充一些相關的關鍵內容。當用戶填寫的表單涵蓋這些預制信息的時候，系統會幫用戶填寫預制的信息，這樣一來，這個有四個字段的表單中，用戶需要填寫的僅僅只有2個字段（請繼續腦補淘寶下單的時候，自動添加收件人信息的機制）。

4、讓表單擁有更好的可訪問性

在設計新的Lightning Experience 的時候，我們對于它的可訪問性設計就有一個基本的構想。由于鍵盤輸入還是目前我們用戶的主要輸入方式（考慮到我們這是一個企業級軟件），所以一定要對鍵盤有良好的兼容和適配，必須確保用戶僅用鍵盤就可以執行全部的操作。為此，我們為每個表單組件建立了特定的鍵盤交互模式，而且這些模式的構建是遵循W3C的規則來設計的，這也確保了這套交互的準確和廣泛的適配性。

這是一個日期選擇器組件，旁邊是W3C中推薦的設計模式

然而上述的全部規則并不是剛好合適的，真正的重度用戶傾向于更高頻度地使用鍵盤，而他們也會從真正高度一致的鍵盤輸入體驗中收益。如何評判整套鍵盤交互的易用和可靠性呢？一個真正為核心用戶設計的日期選擇器可以讓他們完成全部的日期選取、必要的編輯，而雙手無需離開鍵盤。

結語：更多的問題

對于Salesforce的UX團隊而言，Lightning Experience 是一個里程碑，不過要做的事情還有很多。比如我們需要提升輸入體驗，引入行內編輯功能。

不管你在團隊中處于什么樣的地位，是設計界面還是編寫代碼，無論是要設計復選框還是要制作更為復雜的CRM程序，表單的設計至關重要。在許多情形下，用戶需要同這些表單進行長時間、大范圍的交互和操作，任何效率上的提升都會帶來體驗的極大優化。請務必記住，精心設計的界面不止是要保證形式上的漂亮，方便和高效的設計也是造福用戶的重要手段。

【這些表單設計的文章不容錯過】

Salesforce的可訪問性設計經驗：
《漲姿勢！ 對于可訪問性設計師必知的7件事(上)》
《漲姿勢！ 對于可訪問性設計師必知的7件事(下)》

優秀的視覺設計也很重要：
《實用素材！22組深色風格登錄表格PSD免費下載》

來自百度設計師的經驗總結：
《牽線搭橋！讓用戶更高效地完成表單填寫》

原文地址：medium
優設譯者：@陳子木

「子木說」

不同于國內的計算機的發展軌跡，國外早在80年代的時候就進入了計算機在企業的普及。在這個階段，真正有效的、優秀的圖形化操作界面并不多，絕大多數的操作是依靠鍵盤輸入完成的。這種語境下，國外的電腦操作對于“純粹的鍵盤輸入”有非常根深蒂固的需求，從企業普及到普通民眾的普及，許多需求也沿襲了下來。不過國內的電腦普及和教育并沒有經歷這樣的一個過程。作為最主要的操作系統供應商，微軟和蘋果，對此都有深刻的認知，國內用戶對于許多快捷鍵并不需要（當然系統都內置了），也沒有過多的需求，但是如果你仔細觀察國外影視劇的時候，會發現“高段位的用戶”通常會用純粹的鍵盤進行操作，這就是國外計算機使用習慣和文化的傳承。許多著名的代碼編輯都是以純鍵盤操作作為賣點的，著名的機械鍵盤HHKB甚至可以說是為了適配這樣的需求而存在的。當然，如果你和我一樣是需要長時間輸入文字的話，還可以選擇一個名為nvalt 的軟件（Mac only）。

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量103萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com