瀘藝鳴

（吉林大學(xué)，吉林 長春 130000）

0 引言

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

1 輸入型表單

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

1.1 輸入型表單的默認(rèn)常態(tài)設(shè)計

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

1.2 輸入型表單的點擊焦點狀態(tài)設(shè)計

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

1.3 輸入型表單的輸入狀態(tài)設(shè)計

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

1.4 輸入型表單的禁用狀態(tài)設(shè)計

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

1.5 輸入型表單的驗證狀態(tài)設(shè)計

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

2 選擇型表單

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

3 復(fù)合組件表單

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

3.1 復(fù)合組件表單設(shè)計的簡單原則

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

3.2 復(fù)合組件表單設(shè)計的相似原則

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

3.3 復(fù)合組件表單設(shè)計的接近原則

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

4 結(jié)語

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