淺談移動(dòng)應(yīng)用UI設(shè)計(jì)中文字信息的展示

冷興英，黃立中，宋 娟

當(dāng)設(shè)計(jì)師從產(chǎn)品經(jīng)理拿到原型圖或者功能需求時(shí)，一定要先梳理產(chǎn)品的功能，產(chǎn)品實(shí)現(xiàn)了哪些實(shí)際的業(yè)務(wù)（若沒(méi)有原型圖時(shí)，設(shè)計(jì)師還需考慮如何用界面拆分），每個(gè)界面主要向用戶表達(dá)什么。這個(gè)過(guò)程不僅是“看”的過(guò)程，更是一個(gè)“想”的過(guò)程，不斷的完善產(chǎn)品細(xì)節(jié)，更在大局上把控產(chǎn)品?！妒謾C(jī)App 界面設(shè)計(jì)》中提到過(guò)“App 的交互流程設(shè)計(jì)，簡(jiǎn)單說(shuō)就像建造房子，有清楚的平面圖紙才能著手建設(shè)。設(shè)計(jì)交互流程時(shí)應(yīng)清晰地把握功能的應(yīng)用需求”。所以，在這個(gè)過(guò)程中，設(shè)計(jì)師在已有的原型圖上，建立交互流程模型，加深了對(duì)產(chǎn)品的理解，同時(shí)思考哪些信息用圖片表達(dá)、哪些用圖標(biāo)、哪一些用文字等等。在明確了文字信息之后，設(shè)計(jì)師應(yīng)當(dāng)思考如何展示這些文字信息，以達(dá)到讓用戶可以有效接收信息，并幫助用戶快速地找到自己想要的信息。接下來(lái)，將結(jié)合實(shí)例，講述文字信息的展示。

1 界面文字信息分類

現(xiàn)在的文字信息大致分為兩類：展示文字信息、功能文字信息。

展示文字信息有：標(biāo)題、正文、提示文字、警示文字。

功能文字信息分為：按鈕文字（即按鈕上的文字，是用戶要向我們的產(chǎn)品告知的一個(gè)動(dòng)作）、鏈接性文字、功能性文字（只有文字，但卻有按鈕的功能）。

其中，設(shè)計(jì)師要注意一共有幾類標(biāo)題：大標(biāo)題、小標(biāo)題等；警示文字又分為有錯(cuò)誤警示與危險(xiǎn)操作警示。

2 如何定義文字信息的基礎(chǔ)展示方式

在上一步，我們已經(jīng)將整個(gè)產(chǎn)品的文字信息歸類，在這一步我們就將定義每個(gè)分類信息的基礎(chǔ)展示方式。這一步是很重要的一步，定義文字基礎(chǔ)展示方式，直接將影響用戶對(duì)信息的接收度，而根據(jù)上一步的信息歸類，我們?cè)谶@一步時(shí)，可統(tǒng)一文字信息的設(shè)計(jì)，在以后設(shè)計(jì)師輸出設(shè)計(jì)規(guī)范時(shí)，會(huì)為前端提供一個(gè)良好的版本，讓前端開(kāi)發(fā)工程師能夠預(yù)設(shè)文字、按鈕等，不會(huì)出現(xiàn)反復(fù)的改動(dòng)，大大減少產(chǎn)品的開(kāi)發(fā)時(shí)間。同時(shí)讓產(chǎn)品的文字信息維持一個(gè)高度的整合性，加強(qiáng)用戶對(duì)信息的有效識(shí)別。

上面提到的警示類文字，這類文字一般采用橙色、黃色或紅色。在這里要提醒，設(shè)計(jì)師在拿到產(chǎn)品原型、功能需求時(shí)，所看到的字段、輸入框等示例都是成功示例，但在設(shè)計(jì)時(shí)，一定要考慮極端情況的出現(xiàn)。例如：用戶在登錄時(shí)，登錄賬號(hào)輸入賬戶格式錯(cuò)誤、或用戶輸賬號(hào)錯(cuò)誤等等。而我們的警示信息、何時(shí)出現(xiàn)、何處出現(xiàn)，設(shè)計(jì)時(shí)應(yīng)結(jié)合功能需求、用戶體驗(yàn)等與開(kāi)發(fā)人員相互討論，給出方案為給用戶產(chǎn)生警示。若是用戶輸入賬號(hào)格式錯(cuò)誤，在用戶輸入時(shí)，即可出現(xiàn)錯(cuò)誤警示（此信息錯(cuò)誤由前端檢測(cè)）。這也就意味著，在輸入框周圍的位置可出現(xiàn)錯(cuò)誤提示。若是在輸入格式正確的情況下，用戶輸入賬號(hào)錯(cuò)誤，就需要在用戶點(diǎn)擊“登錄”按鈕過(guò)后向用戶顯示錯(cuò)誤警示（此信息錯(cuò)誤由后臺(tái)檢測(cè)）。

提示信息，設(shè)計(jì)師需注意該提示信息的何處展示、何時(shí)出現(xiàn)、何時(shí)消失。例如，在需要用戶輸入時(shí)，通常會(huì)有一個(gè)標(biāo)題，告知用戶輸入的內(nèi)容是什么，例如：賬戶、地區(qū)、時(shí)間等。然后會(huì)出現(xiàn)一些輸入信息的格式提醒，例如：請(qǐng)輸入數(shù)字與字母組合等。

而按鈕文字、鏈接性文字等功能文字一般為產(chǎn)品的主題色，區(qū)別其他的展示文字。其他的展示文字，我們一般會(huì)采取階梯灰色、階梯大小來(lái)表示文字的重要性、它們應(yīng)當(dāng)被閱讀的先后順序。文字的大小，在移動(dòng)應(yīng)用設(shè)計(jì)時(shí)，會(huì)采取偶數(shù)大小。因?yàn)樵谠O(shè)計(jì)師設(shè)計(jì)時(shí)是以px 為單位設(shè)計(jì)，在開(kāi)發(fā)程序當(dāng)中，將會(huì)被除以2 來(lái)定義文字大小。且移動(dòng)應(yīng)用UI 設(shè)計(jì)時(shí)，最小字體以24px 為宜。階梯灰色如圖1：

圖1 階梯灰色

圖2 字體運(yùn)用實(shí)例

圖3 實(shí)例字體顏色標(biāo)記

圖2、圖3，也可以看出，對(duì)于產(chǎn)品的一些特殊文字，我們亦可采取加背景色、背景圖片等方式向用戶展出。這里，一般我們用的背景色、背景圖片的主體色會(huì)與我們的文字顏色形成一個(gè)對(duì)比，以此突出文字的易讀性，向用戶加強(qiáng)信息接收。

3 文字信息的結(jié)構(gòu)表達(dá)方式

基礎(chǔ)的信息展示方式已經(jīng)在前面兩個(gè)步驟中完成，在這一步中，將結(jié)合產(chǎn)品的特性來(lái)選擇文字信息的結(jié)構(gòu)表達(dá)方式。每個(gè)產(chǎn)品的特性都不一樣，接下來(lái)將以記賬軟件為例，來(lái)敘述在設(shè)計(jì)師選擇文字信息的結(jié)構(gòu)表達(dá)方式的時(shí)候如何選擇。

記賬軟件，記收入與記支出是產(chǎn)品的基礎(chǔ)功能，我們拿記支出為例。當(dāng)用戶發(fā)生了一筆支出，將會(huì)產(chǎn)生8 個(gè)信息：數(shù)額、類型（支出或收入）、賬戶、用途、支出人、支出發(fā)生時(shí)間、記賬時(shí)間、備注。這8 個(gè)信息當(dāng)中，唯有類型、賬戶可用圖片或圖標(biāo)代替，其余皆是文字信息。當(dāng)然在這里提到的產(chǎn)生8 個(gè)信息，并不是說(shuō)用戶需要直接錄入這些信息。在選擇該功能的時(shí)候，類型可以已經(jīng)選定，而記賬時(shí)間，當(dāng)用戶錄入其他6 個(gè)信息，點(diǎn)擊保存的時(shí)候，系統(tǒng)會(huì)自動(dòng)記錄一個(gè)時(shí)間，即為記賬時(shí)間。而我們要提到，產(chǎn)生的信息、系統(tǒng)記錄的信息和向用戶顯示的信息是不一定對(duì)等的。設(shè)計(jì)師，應(yīng)與產(chǎn)品經(jīng)理、開(kāi)發(fā)程序師一起溝通，所產(chǎn)生的信息，與要向用戶顯示的信息。

上述的8 個(gè)信息中，一般用途、賬戶、支出人為文字信息選擇，而賬戶、支出人的選擇信息或許不多，用途一類信息卻可能會(huì)很多，甚至產(chǎn)生大類中有小類，就有文字信息的結(jié)構(gòu)表達(dá)方式的選擇。什么是文字信息結(jié)構(gòu)的表達(dá)方式？產(chǎn)品所產(chǎn)生的、包含的大量信息，都有關(guān)系。例如這里說(shuō)的大類與小類，一個(gè)大類由許多個(gè)小類組成，許多個(gè)小類組成了某一個(gè)大類，這是包含與被包含，大類包含了小類，這就是關(guān)系。這種關(guān)系，亦是一種結(jié)構(gòu)，上下結(jié)構(gòu)，大類為上，小類為下。而設(shè)計(jì)師在這里，要考慮用何種方式去表現(xiàn)這種結(jié)構(gòu)，并能夠讓用戶可以通過(guò)大類找到小類，找到需要的文字信息。

用途的文字信息結(jié)構(gòu)表達(dá)方式，以下，有兩種：

圖4 示例1

圖5 示例2

兩個(gè)示例的文字信息結(jié)構(gòu)表達(dá)有什么區(qū)別呢？各自有什么優(yōu)劣勢(shì)？在設(shè)計(jì)過(guò)程當(dāng)中，我們應(yīng)當(dāng)選哪一種呢？

圖4 為把界面分為上下結(jié)構(gòu)，將大類做成按鈕至于頂部。圖5 為把界面分為左右結(jié)構(gòu)，將大類一排一排展示，大類放于左側(cè)，小類放于右側(cè)，再用背景色來(lái)區(qū)分兩個(gè)區(qū)域。圖4 與圖5 都將小類一排排展示，這種小類的展示方式設(shè)計(jì)是考慮到了用途小類信息的“不確定性”。為什么說(shuō)這類信息有“不確定”性呢？因?yàn)檫@一類表達(dá)了購(gòu)買用途的具體信息，用戶可以自定義添加刪除，也就意味這這個(gè)字段的“不確定性”，不管是文字類型還是文字長(zhǎng)度。所以在設(shè)計(jì)時(shí)，小類用這種方式。至于大類，因?yàn)橹皇且环N分類、歸納，這一類的文字并不多，這樣就有了兩種設(shè)計(jì)方式。

由圖分析出，圖4 的大類展示方式不適合于大類個(gè)數(shù)太多，而明顯圖5 的大類個(gè)數(shù)要多于圖4，圖5 的大類也可以在設(shè)計(jì)時(shí)，交互可設(shè)計(jì)為用戶左右皆可上下滑動(dòng)，以展示更多的大類以及小類。圖4 的大類因?yàn)槲淖珠L(zhǎng)度的不一，整個(gè)文字信息的表達(dá)結(jié)構(gòu)，使得界面更加靈活。圖5 的文字信息的結(jié)構(gòu)表達(dá)方式，就使得界面嚴(yán)謹(jǐn)。

那我們?nèi)绾芜x擇呢？這一點(diǎn)，設(shè)計(jì)師在設(shè)計(jì)時(shí)，需與產(chǎn)品經(jīng)理多溝通，了解產(chǎn)品背景、產(chǎn)品功能需要、用戶體驗(yàn)。

3.1 產(chǎn)品背景

這里是記賬產(chǎn)品，但是這一類產(chǎn)品也有很多分類：公司記賬、個(gè)人家庭生活記賬。公司記賬，有專人管理，需記錄公司財(cái)務(wù)的每一筆支出與收入，為以公司報(bào)稅，向公司負(fù)責(zé)人做財(cái)務(wù)報(bào)告，以查看公司收益、成本、利潤(rùn)等。個(gè)人家庭生活記賬，個(gè)人記錄生活開(kāi)銷，以記錄個(gè)人資產(chǎn)開(kāi)支，明白錢去哪兒，達(dá)到最大有效使用個(gè)人財(cái)產(chǎn)，以達(dá)到個(gè)人目的。

3.2 產(chǎn)品功能需要

這個(gè)功能為幫助用戶記住這一筆支出的用途。若是公司記賬，會(huì)計(jì)需要選擇這筆支出的正確用途，以便報(bào)稅，并生成公司的財(cái)務(wù)報(bào)表。這對(duì)于公司的算賬、統(tǒng)計(jì)是一個(gè)很重要的條目，且不可輕易更改，每一個(gè)大類與小類之間的關(guān)系都很重要。若是個(gè)人家庭生活記賬，用戶選擇用途，只需要記錄該筆資金的大致去向，以便控制開(kāi)銷，合理使用資金。那大類與小類的關(guān)系就不顯得那么重要，甚至由于個(gè)人生活、愛(ài)好的固定，小類亦是固定的。

3.3 用戶體驗(yàn)

若是公司記賬，使用者多為會(huì)計(jì)、管理財(cái)務(wù)者，這一類用戶為專業(yè)用戶，擁有專業(yè)技能，在記賬時(shí)，會(huì)先選擇大類，再選擇小類，因?yàn)檫@樣能保障記賬的準(zhǔn)確性，以方便公司財(cái)務(wù)計(jì)算、成本計(jì)算等。若為個(gè)人用戶，用戶從事的職業(yè)不限，且文憑、技能不限，則需要在操作上有明確提示，并能快速找到信息。在《“拯救月光族”App 用戶界面設(shè)計(jì)策略》中提到“現(xiàn)代年輕人更愿意使用界面簡(jiǎn)潔，操作方便、流暢的軟件”。所以界面要擁有“親切感”，加強(qiáng)用戶對(duì)產(chǎn)品的好感。

所以，在這里，文字信息的結(jié)構(gòu)表達(dá)選擇哪一種，若為公司專業(yè)記賬，選擇圖5 的結(jié)構(gòu)表達(dá)方式較為合適；若為個(gè)人家庭生活記賬選擇圖4 的結(jié)構(gòu)表達(dá)方式較為合適。

4 結(jié)束語(yǔ)

以上所述，移動(dòng)應(yīng)用的文字信息的展示方式既有一定的規(guī)律，又要根據(jù)不同產(chǎn)品的背景來(lái)決定文字信息的展示方式。UI 設(shè)計(jì)中，設(shè)計(jì)師需要不停地與產(chǎn)品經(jīng)理溝通，與開(kāi)發(fā)程序師交流，結(jié)合用戶體驗(yàn)，給出最佳的文字信息展示方式。