移動App表單組件體驗設計

瀘藝鳴

（吉林大學，吉林 長春 130000）

0 引言

當前移動端App設計逐漸形成體系，App界面由多種組件/控件及文本構成。這些組件控件經過設計合理布局，才能給用戶良好的體驗。其中App里的表單組件必不可少，這類組件是系統可獲得用戶信息達到用戶指令的主要功能。表單里的操作組件類型決定了表單的類型，筆者把表單分為 3類：輸入型表單、選擇型表單、復合組件表單，本文將依次闡述這3類表單的體驗設計要點。

1 輸入型表單

輸入型表單的交互狀態不同涉及的視覺元素樣式也有所不同。輸入型表單交互可以分為5種狀態：默認常態、點擊焦點狀態、輸入狀態、禁用狀態及驗證狀態。

1.1 輸入型表單的默認常態設計

在默認常規狀態下，輸入型表單可由標簽、占位符（默認提示文案）、輸入框外框這3個元素組成。標簽可以理解成一個標題，用來說明用戶輸入時所需要填寫的內容。在移動App的UI設計中，會根據不同頁面場景及用戶的認知感知適當調整標簽的形式[1]。首先，用純文字標簽樣式居多，標簽文字盡量控制在6個字符以內，內容文字言簡意賅。其次，圖形標簽的運用，視覺上看多個表單的圖形標簽比文字標簽字符長短不齊要舒服得多。用圖形標簽的前提條件是用戶對界面有一定的認知，比如登錄注冊頁面的用戶名人像圖形和密碼鑰匙圖形。再次，無標簽的情況，設計師需要把占位符的文字內容處理的簡單易懂，不能含糊其辭。比如“請輸入”這樣非常不友好，用戶不知道自己需要輸入什么內容，如果占位符寫“請輸入姓名”，就可以避免用戶的困惑。Giles Colborne提到簡單的特性和個性應該源自于使用的方法和所要表現的產品，以及用戶執行的任務[2]。

1.2 輸入型表單的點擊焦點狀態設計

在用戶操作移動端界面的時候，通常用手勢操作界面，點擊觸發表單。這時候表單就處于點擊焦點狀態，表單里的占位符消失，光標在輸入框內閃爍，提示用戶當前可以輸入文字或者數字，同時鍵盤也隨之彈出。在這里需要注意的是鍵盤彈出會遮擋住頁面一半的內容，所以要給鍵盤做個特殊處理或者表單內容置頂處理。比如招商銀行App的記賬頁面設計，當數字鍵盤彈起時，鍵盤右上方顯示“完成”按鈕，用戶點擊完成按鈕就可把鍵盤收起，方便用戶進行下一步操作。招商銀行App修改交易詳情頁面，由于輸入型表單在頁面最下方，用戶點擊表單輸入框時，該輸入表單整體隨著鍵盤彈出向頁面頂部移動，這樣用戶可以看到當前輸入表單的內容。

1.3 輸入型表單的輸入狀態設計

當用戶點擊焦點狀態開始輸入內容時，要把輸入文字顏色做一個主要醒目的顏色，意在提示用戶已輸入了相關內容。從用戶體驗角度講，輸入操作對用戶來說很煩瑣，那么智能輸入就起到了很好的作用。此外智能模塊還可以進行圖像識別，通過用戶選擇上傳的圖片分析出地址信息，系統會自動把內容填寫到表單里，這一項功能也是輸入型表單的一大進步。最后是表單輸入狀態下的容錯性，讓用戶修改刪除已輸入的內容，這里要設置一鍵刪除按鈕，避免用戶在輸入內容過長時逐字刪除。

1.4 輸入型表單的禁用狀態設計

輸入型表單有不可點擊的禁用狀態，這種情況下要用視覺引導，從而告訴用戶該輸入框不可用。通常設計師用顏色的飽和度即顏色的深淺來設計，把輸入邊框的顏色飽和度降低，具體降低數值是邊框正常狀態顏色的30%透明度。第二種做法是禁用狀態的輸入框底色填充灰色，與正常狀態下的輸入框底色白色作色相上的區分。除了視覺引導，設計師還會在交互形式上作提示，禁用表單在用戶點擊焦點狀態時，鍵盤不做彈出或者彈窗提示“不可用”。

1.5 輸入型表單的驗證狀態設計

用戶在輸入內容后是否是符合系統所需內容，必須要經過驗證，這里涉及兩種驗證—主動驗證與被動驗證[3]。主動驗證與被動驗證最大的區別在于驗證的時間點是在輸入過程中還是輸入完成后。驗證錯誤的提示一定要給用戶指明方向，即提示錯誤的具體問題或正確的字符內容，如填寫淘寶App收貨信息頁面，該頁被動認證toast會提示用戶“請輸入11位電話號碼”，文案很明確告訴用戶填寫電話號碼的位數不對。為了降低用戶操作錯誤次數，標簽占位符的文案處理和鍵盤處理上都應該做暗示與引導。比如輸入姓名時，占位符明確寫出名字的文字范式及字符限制，從而提高用戶輸入效率。

2 選擇型表單

選擇型表單是設計表單最為推崇的一類表單，選擇總是比輸入方便，給用戶準備好相關內容的選項，其實就是給用戶減少思考的負擔。選擇型表單主要構成有：標簽、占位符（默認提示文案）、輸入框外框和選擇按鈕這4個元素。選擇型表單交互分為4種狀態：默認常態、點擊焦點狀態、選擇完成狀態及驗證狀態。選擇型表單與輸入型表單不同的是，焦點狀態選擇型表單的占位符不會消失。選擇表單點擊焦點狀態，彈出選擇框或者跳轉新頁面進行選擇，為了不讓用戶感到交互層級過深，一般首選彈窗形式選擇框。如果頁面里有連續多個選擇型表單，建議彈窗做連續可選擇的樣式，這樣會避免用戶反復點擊表單的操作。

3 復合組件表單

復合組件表單包括選擇按鈕、操作（如增加或刪除）按鈕、輸入框等組件組合一起的操作表單。筆者認為復合組件表單的體驗設計應遵循用戶心智，在復雜組件操作里要做簡單明了的視覺引導，做到“簡單”就應該遵循規律標準，以心理學研究成果—格式塔心理學為依據。格式塔心理學闡述設計的原則有很多版本。這里筆者簡化到3個原則可應用到表單設計中，分別是：簡單原則、相似原則、接近原則。

3.1 復合組件表單設計的簡單原則

格式塔心理學研究表明，人腦對于復雜的東西不容易理解，而簡單的基本幾何形狀就會被很好地接受。那么設計復合組件表單的視覺元素也應該盡量簡單地用幾何圖形來表達。比如在設計的紅圈報銷App里的創建編輯審批流頁面，復合組件表單里包括刪除按鈕、選擇設置人員按鈕及設置優先級計數器組件。這幾個組件都需要遵循簡單原則，筆者在設計的時候運用了扁平化風格，由單色線條組成以“圓”為基礎輪廓的幾何形狀按鈕。為了用戶更好理解每個組件的操作，這里不提倡用復雜圖形及顏色漸變的圖標樣式。

3.2 復合組件表單設計的相似原則

人的眼睛很容易關注復雜環境中外表相似的東西，由于復合組件表單里組件按鈕多樣，可以利用相似原則設計區分功能操作及層級關系。筆者在設計紅圈報銷App添加模板頁面表單時，該頁面表單有刪除、欄位名稱、欄位類型選擇及拖動排序按鈕組件，其中欄位類型包括單個表單以及整組類型表單。表單的刪除是針對整個表單的操作，所以在設計中顏色是紅色，有別于其他操作按鈕顏色。欄位類型選擇及拖動排序按鈕組件都是可分別點擊編輯的，屬于相似操作所以用最深的黑灰色。其中整組類型表單下方要顯示其組里的各個欄位內容（在當前表單里不可編輯只做展示），這里的文字顏色用淺一個層級的顏色，文字的大小也是比表單可操作內容文案要小。也就是說可見視覺元素的大小、顏色、質感相似，給用戶的引導操作就是相似的。

3.3 復合組件表單設計的接近原則

表單里組件接近原則簡單來說就是越是距離相近的元素越容易被看成同一組信息，或者被看作一個整體。比如飛豬App入住海外酒店表單填寫頁面，其中一表單有主標簽（標簽下有提示語及解釋按鈕）、兩個輸入框（入住人員姓氏與名字）和查看通訊錄按鈕。該表單的主標簽、提示語與解釋按鈕在一個模塊區域內，與其他右側輸入框的間距大約在48 px，即標簽與右側間距相對最大，人的肉眼很快把該區域看成一整體。也就是說該表單通過視覺上距離的區分，從而區分出了4個模塊。

4 結語

移動端表單分為3種：輸入型表單、選擇型表單及復合組件表單。設計師要通過視覺元素的大小、顏色、質感及動畫效果去做信息層級區分。還要注意不同的人機交互狀態下視覺元素要隨機應變，目的就是以用戶為中心，讓用戶感知信息的輸入是簡單愉悅的，如果能讓用戶做選擇就盡量做出選擇項目，避免用戶頻繁輸入操作。未來表單設計也要根據產品特殊應用場景去實現，像醫療行業、交通行業及金融業務等等，希望利用AI人工智能等新型科技技術，有越來越多的方便、快捷的表單形式服務于各行各業。