幫你提升表單使用效率的四個(gè)界面設計技巧發(fā)布者：本站     時(shí)間：2020-06-20 14:06:19

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

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



一切都是左對齊的

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

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



2、設置默認值
如果你是一名銷(xiāo)售人員，你的工作內容可能涉及到同潛在用戶(hù)進(jìn)行溝通（也就是“Leads”）。如果你想在Salesforce中跟蹤這些潛在用戶(hù)的信息，那么通常你得先創(chuàng )建一個(gè)相應的檔案。如果要這么做的話(huà)，可能會(huì )創(chuàng )建下面的這種Lead 表單：



在Salesforce中創(chuàng )建一個(gè)新的Lead 表單

看起來(lái)很簡(jiǎn)單，是吧？但是如果我們仔細看看，就能逐漸找出這種表單在設計上的門(mén)道。第一個(gè)可編輯的字段是“Lead 狀態(tài)”，它包含了以下選項：無(wú)聯(lián)系、有聯(lián)系、開(kāi)放狀態(tài)、合格、不合格。



研究表明，設置一個(gè)默認值會(huì )引導許多人在多種不同的語(yǔ)境和環(huán)境下選擇默認選項。好了，回到最初的問(wèn)題，如果你是一個(gè)銷(xiāo)售人員，在同新的潛在用戶(hù)的溝通的時(shí)候，第一次填寫(xiě)這個(gè)表單的時(shí)候，你可能會(huì )更傾向于選擇“開(kāi)放狀態(tài)”而非空著(zhù)不填寫(xiě)。



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

3、預填寫(xiě)相關(guān)字段
許多記錄的相關(guān)頁(yè)面會(huì )根據“發(fā)布者”來(lái)執行一些預制的操作，比如創(chuàng )建新的任務(wù)和事件（我們在淘寶下單的時(shí)候，系統會(huì )幫你填寫(xiě)預制的默認收件地址、收件人和聯(lián)系電話(huà)，這種機制與之類(lèi)似）。那么我們看看下面的頁(yè)面：



發(fā)布者登錄之后觸發(fā)的操作



系統會(huì )自動(dòng)填寫(xiě)發(fā)布者信息

在理想的狀態(tài)下，用戶(hù)會(huì )認真填寫(xiě)每一個(gè)字段的詳細信息，然而事實(shí)上用戶(hù)并沒(méi)有這么做。

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

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

4、讓表單擁有更好的可訪(fǎng)問(wèn)性
在設計新的Lightning Experience 的時(shí)候，我們對于它的可訪(fǎng)問(wèn)性設計就有一個(gè)基本的構想。由于鍵盤(pán)輸入還是目前我們用戶(hù)的主要輸入方式（考慮到我們這是一個(gè)企業(yè)級軟件），所以一定要對鍵盤(pán)有良好的兼容和適配，必須確保用戶(hù)僅用鍵盤(pán)就可以執行全部的操作。為此，我們?yōu)槊總€(gè)表單組件建立了特定的鍵盤(pán)交互模式，而且這些模式的構建是遵循W3C的規則來(lái)設計的，這也確保了這套交互的準確和廣泛的適配性。