瀘藝鳴
(吉林大學(xué),吉林 長春 130000)
當(dāng)前移動(dòng)端App設(shè)計(jì)逐漸形成體系,App界面由多種組件/控件及文本構(gòu)成。這些組件控件經(jīng)過設(shè)計(jì)合理布局,才能給用戶良好的體驗(yàn)。其中App里的表單組件必不可少,這類組件是系統(tǒng)可獲得用戶信息達(dá)到用戶指令的主要功能。表單里的操作組件類型決定了表單的類型,筆者把表單分為 3類:輸入型表單、選擇型表單、復(fù)合組件表單,本文將依次闡述這3類表單的體驗(yàn)設(shè)計(jì)要點(diǎn)。
輸入型表單的交互狀態(tài)不同涉及的視覺元素樣式也有所不同。輸入型表單交互可以分為5種狀態(tài):默認(rèn)常態(tài)、點(diǎn)擊焦點(diǎn)狀態(tài)、輸入狀態(tài)、禁用狀態(tài)及驗(yàn)證狀態(tài)。
在默認(rèn)常規(guī)狀態(tài)下,輸入型表單可由標(biāo)簽、占位符(默認(rèn)提示文案)、輸入框外框這3個(gè)元素組成。標(biāo)簽可以理解成一個(gè)標(biāo)題,用來說明用戶輸入時(shí)所需要填寫的內(nèi)容。在移動(dòng)App的UI設(shè)計(jì)中,會(huì)根據(jù)不同頁面場景及用戶的認(rèn)知感知適當(dāng)調(diào)整標(biāo)簽的形式[1]。首先,用純文字標(biāo)簽樣式居多,標(biāo)簽文字盡量控制在6個(gè)字符以內(nèi),內(nèi)容文字言簡意賅。其次,圖形標(biāo)簽的運(yùn)用,視覺上看多個(gè)表單的圖形標(biāo)簽比文字標(biāo)簽字符長短不齊要舒服得多。用圖形標(biāo)簽的前提條件是用戶對(duì)界面有一定的認(rèn)知,比如登錄注冊頁面的用戶名人像圖形和密碼鑰匙圖形。再次,無標(biāo)簽的情況,設(shè)計(jì)師需要把占位符的文字內(nèi)容處理的簡單易懂,不能含糊其辭。比如“請(qǐng)輸入”這樣非常不友好,用戶不知道自己需要輸入什么內(nèi)容,如果占位符寫“請(qǐng)輸入姓名”,就可以避免用戶的困惑。Giles Colborne提到簡單的特性和個(gè)性應(yīng)該源自于使用的方法和所要表現(xiàn)的產(chǎn)品,以及用戶執(zhí)行的任務(wù)[2]。
在用戶操作移動(dòng)端界面的時(shí)候,通常用手勢操作界面,點(diǎn)擊觸發(fā)表單。這時(shí)候表單就處于點(diǎn)擊焦點(diǎn)狀態(tài),表單里的占位符消失,光標(biāo)在輸入框內(nèi)閃爍,提示用戶當(dāng)前可以輸入文字或者數(shù)字,同時(shí)鍵盤也隨之彈出。在這里需要注意的是鍵盤彈出會(huì)遮擋住頁面一半的內(nèi)容,所以要給鍵盤做個(gè)特殊處理或者表單內(nèi)容置頂處理。比如招商銀行App的記賬頁面設(shè)計(jì),當(dāng)數(shù)字鍵盤彈起時(shí),鍵盤右上方顯示“完成”按鈕,用戶點(diǎn)擊完成按鈕就可把鍵盤收起,方便用戶進(jìn)行下一步操作。招商銀行App修改交易詳情頁面,由于輸入型表單在頁面最下方,用戶點(diǎn)擊表單輸入框時(shí),該輸入表單整體隨著鍵盤彈出向頁面頂部移動(dòng),這樣用戶可以看到當(dāng)前輸入表單的內(nèi)容。
當(dāng)用戶點(diǎn)擊焦點(diǎn)狀態(tài)開始輸入內(nèi)容時(shí),要把輸入文字顏色做一個(gè)主要醒目的顏色,意在提示用戶已輸入了相關(guān)內(nèi)容。從用戶體驗(yàn)角度講,輸入操作對(duì)用戶來說很煩瑣,那么智能輸入就起到了很好的作用。此外智能模塊還可以進(jìn)行圖像識(shí)別,通過用戶選擇上傳的圖片分析出地址信息,系統(tǒng)會(huì)自動(dòng)把內(nèi)容填寫到表單里,這一項(xiàng)功能也是輸入型表單的一大進(jìn)步。最后是表單輸入狀態(tài)下的容錯(cuò)性,讓用戶修改刪除已輸入的內(nèi)容,這里要設(shè)置一鍵刪除按鈕,避免用戶在輸入內(nèi)容過長時(shí)逐字刪除。
輸入型表單有不可點(diǎn)擊的禁用狀態(tài),這種情況下要用視覺引導(dǎo),從而告訴用戶該輸入框不可用。通常設(shè)計(jì)師用顏色的飽和度即顏色的深淺來設(shè)計(jì),把輸入邊框的顏色飽和度降低,具體降低數(shù)值是邊框正常狀態(tài)顏色的30%透明度。第二種做法是禁用狀態(tài)的輸入框底色填充灰色,與正常狀態(tài)下的輸入框底色白色作色相上的區(qū)分。除了視覺引導(dǎo),設(shè)計(jì)師還會(huì)在交互形式上作提示,禁用表單在用戶點(diǎn)擊焦點(diǎn)狀態(tài)時(shí),鍵盤不做彈出或者彈窗提示“不可用”。
用戶在輸入內(nèi)容后是否是符合系統(tǒng)所需內(nèi)容,必須要經(jīng)過驗(yàn)證,這里涉及兩種驗(yàn)證—主動(dòng)驗(yàn)證與被動(dòng)驗(yàn)證[3]。主動(dòng)驗(yàn)證與被動(dòng)驗(yàn)證最大的區(qū)別在于驗(yàn)證的時(shí)間點(diǎn)是在輸入過程中還是輸入完成后。驗(yàn)證錯(cuò)誤的提示一定要給用戶指明方向,即提示錯(cuò)誤的具體問題或正確的字符內(nèi)容,如填寫淘寶App收貨信息頁面,該頁被動(dòng)認(rèn)證toast會(huì)提示用戶“請(qǐng)輸入11位電話號(hào)碼”,文案很明確告訴用戶填寫電話號(hào)碼的位數(shù)不對(duì)。為了降低用戶操作錯(cuò)誤次數(shù),標(biāo)簽占位符的文案處理和鍵盤處理上都應(yīng)該做暗示與引導(dǎo)。比如輸入姓名時(shí),占位符明確寫出名字的文字范式及字符限制,從而提高用戶輸入效率。
選擇型表單是設(shè)計(jì)表單最為推崇的一類表單,選擇總是比輸入方便,給用戶準(zhǔn)備好相關(guān)內(nèi)容的選項(xiàng),其實(shí)就是給用戶減少思考的負(fù)擔(dān)。選擇型表單主要構(gòu)成有:標(biāo)簽、占位符(默認(rèn)提示文案)、輸入框外框和選擇按鈕這4個(gè)元素。選擇型表單交互分為4種狀態(tài):默認(rèn)常態(tài)、點(diǎn)擊焦點(diǎn)狀態(tài)、選擇完成狀態(tài)及驗(yàn)證狀態(tài)。選擇型表單與輸入型表單不同的是,焦點(diǎn)狀態(tài)選擇型表單的占位符不會(huì)消失。選擇表單點(diǎn)擊焦點(diǎn)狀態(tài),彈出選擇框或者跳轉(zhuǎn)新頁面進(jìn)行選擇,為了不讓用戶感到交互層級(jí)過深,一般首選彈窗形式選擇框。如果頁面里有連續(xù)多個(gè)選擇型表單,建議彈窗做連續(xù)可選擇的樣式,這樣會(huì)避免用戶反復(fù)點(diǎn)擊表單的操作。
復(fù)合組件表單包括選擇按鈕、操作(如增加或刪除)按鈕、輸入框等組件組合一起的操作表單。筆者認(rèn)為復(fù)合組件表單的體驗(yàn)設(shè)計(jì)應(yīng)遵循用戶心智,在復(fù)雜組件操作里要做簡單明了的視覺引導(dǎo),做到“簡單”就應(yīng)該遵循規(guī)律標(biāo)準(zhǔn),以心理學(xué)研究成果—格式塔心理學(xué)為依據(jù)。格式塔心理學(xué)闡述設(shè)計(jì)的原則有很多版本。這里筆者簡化到3個(gè)原則可應(yīng)用到表單設(shè)計(jì)中,分別是:簡單原則、相似原則、接近原則。
格式塔心理學(xué)研究表明,人腦對(duì)于復(fù)雜的東西不容易理解,而簡單的基本幾何形狀就會(huì)被很好地接受。那么設(shè)計(jì)復(fù)合組件表單的視覺元素也應(yīng)該盡量簡單地用幾何圖形來表達(dá)。比如在設(shè)計(jì)的紅圈報(bào)銷App里的創(chuàng)建編輯審批流頁面,復(fù)合組件表單里包括刪除按鈕、選擇設(shè)置人員按鈕及設(shè)置優(yōu)先級(jí)計(jì)數(shù)器組件。這幾個(gè)組件都需要遵循簡單原則,筆者在設(shè)計(jì)的時(shí)候運(yùn)用了扁平化風(fēng)格,由單色線條組成以“圓”為基礎(chǔ)輪廓的幾何形狀按鈕。為了用戶更好理解每個(gè)組件的操作,這里不提倡用復(fù)雜圖形及顏色漸變的圖標(biāo)樣式。
人的眼睛很容易關(guān)注復(fù)雜環(huán)境中外表相似的東西,由于復(fù)合組件表單里組件按鈕多樣,可以利用相似原則設(shè)計(jì)區(qū)分功能操作及層級(jí)關(guān)系。筆者在設(shè)計(jì)紅圈報(bào)銷App添加模板頁面表單時(shí),該頁面表單有刪除、欄位名稱、欄位類型選擇及拖動(dòng)排序按鈕組件,其中欄位類型包括單個(gè)表單以及整組類型表單。表單的刪除是針對(duì)整個(gè)表單的操作,所以在設(shè)計(jì)中顏色是紅色,有別于其他操作按鈕顏色。欄位類型選擇及拖動(dòng)排序按鈕組件都是可分別點(diǎn)擊編輯的,屬于相似操作所以用最深的黑灰色。其中整組類型表單下方要顯示其組里的各個(gè)欄位內(nèi)容(在當(dāng)前表單里不可編輯只做展示),這里的文字顏色用淺一個(gè)層級(jí)的顏色,文字的大小也是比表單可操作內(nèi)容文案要小。也就是說可見視覺元素的大小、顏色、質(zhì)感相似,給用戶的引導(dǎo)操作就是相似的。
表單里組件接近原則簡單來說就是越是距離相近的元素越容易被看成同一組信息,或者被看作一個(gè)整體。比如飛豬App入住海外酒店表單填寫頁面,其中一表單有主標(biāo)簽(標(biāo)簽下有提示語及解釋按鈕)、兩個(gè)輸入框(入住人員姓氏與名字)和查看通訊錄按鈕。該表單的主標(biāo)簽、提示語與解釋按鈕在一個(gè)模塊區(qū)域內(nèi),與其他右側(cè)輸入框的間距大約在48 px,即標(biāo)簽與右側(cè)間距相對(duì)最大,人的肉眼很快把該區(qū)域看成一整體。也就是說該表單通過視覺上距離的區(qū)分,從而區(qū)分出了4個(gè)模塊。
移動(dòng)端表單分為3種:輸入型表單、選擇型表單及復(fù)合組件表單。設(shè)計(jì)師要通過視覺元素的大小、顏色、質(zhì)感及動(dòng)畫效果去做信息層級(jí)區(qū)分。還要注意不同的人機(jī)交互狀態(tài)下視覺元素要隨機(jī)應(yīng)變,目的就是以用戶為中心,讓用戶感知信息的輸入是簡單愉悅的,如果能讓用戶做選擇就盡量做出選擇項(xiàng)目,避免用戶頻繁輸入操作。未來表單設(shè)計(jì)也要根據(jù)產(chǎn)品特殊應(yīng)用場景去實(shí)現(xiàn),像醫(yī)療行業(yè)、交通行業(yè)及金融業(yè)務(wù)等等,希望利用AI人工智能等新型科技技術(shù),有越來越多的方便、快捷的表單形式服務(wù)于各行各業(yè)。