淺談移動應用UI設計中文字信息的展示

冷興英，黃立中，宋 娟

當設計師從產品經理拿到原型圖或者功能需求時，一定要先梳理產品的功能，產品實現了哪些實際的業務（若沒有原型圖時，設計師還需考慮如何用界面拆分），每個界面主要向用戶表達什么。這個過程不僅是“看”的過程，更是一個“想”的過程，不斷的完善產品細節，更在大局上把控產品。《手機App 界面設計》中提到過“App 的交互流程設計，簡單說就像建造房子，有清楚的平面圖紙才能著手建設。設計交互流程時應清晰地把握功能的應用需求”。所以，在這個過程中，設計師在已有的原型圖上，建立交互流程模型，加深了對產品的理解，同時思考哪些信息用圖片表達、哪些用圖標、哪一些用文字等等。在明確了文字信息之后，設計師應當思考如何展示這些文字信息，以達到讓用戶可以有效接收信息，并幫助用戶快速地找到自己想要的信息。接下來，將結合實例，講述文字信息的展示。

1 界面文字信息分類

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

展示文字信息有：標題、正文、提示文字、警示文字。

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

其中，設計師要注意一共有幾類標題：大標題、小標題等；警示文字又分為有錯誤警示與危險操作警示。

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

在上一步，我們已經將整個產品的文字信息歸類，在這一步我們就將定義每個分類信息的基礎展示方式。這一步是很重要的一步，定義文字基礎展示方式，直接將影響用戶對信息的接收度，而根據上一步的信息歸類，我們在這一步時，可統一文字信息的設計，在以后設計師輸出設計規范時，會為前端提供一個良好的版本，讓前端開發工程師能夠預設文字、按鈕等，不會出現反復的改動，大大減少產品的開發時間。同時讓產品的文字信息維持一個高度的整合性，加強用戶對信息的有效識別。

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

提示信息，設計師需注意該提示信息的何處展示、何時出現、何時消失。例如，在需要用戶輸入時，通常會有一個標題，告知用戶輸入的內容是什么，例如：賬戶、地區、時間等。然后會出現一些輸入信息的格式提醒，例如：請輸入數字與字母組合等。

而按鈕文字、鏈接性文字等功能文字一般為產品的主題色，區別其他的展示文字。其他的展示文字，我們一般會采取階梯灰色、階梯大小來表示文字的重要性、它們應當被閱讀的先后順序。文字的大小，在移動應用設計時，會采取偶數大小。因為在設計師設計時是以px 為單位設計，在開發程序當中，將會被除以2 來定義文字大小。且移動應用UI 設計時，最小字體以24px 為宜。階梯灰色如圖1：

圖1 階梯灰色

圖2 字體運用實例

圖3 實例字體顏色標記

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

3 文字信息的結構表達方式

基礎的信息展示方式已經在前面兩個步驟中完成，在這一步中，將結合產品的特性來選擇文字信息的結構表達方式。每個產品的特性都不一樣，接下來將以記賬軟件為例，來敘述在設計師選擇文字信息的結構表達方式的時候如何選擇。

記賬軟件，記收入與記支出是產品的基礎功能，我們拿記支出為例。當用戶發生了一筆支出，將會產生8 個信息：數額、類型（支出或收入）、賬戶、用途、支出人、支出發生時間、記賬時間、備注。這8 個信息當中，唯有類型、賬戶可用圖片或圖標代替，其余皆是文字信息。當然在這里提到的產生8 個信息，并不是說用戶需要直接錄入這些信息。在選擇該功能的時候，類型可以已經選定，而記賬時間，當用戶錄入其他6 個信息，點擊保存的時候，系統會自動記錄一個時間，即為記賬時間。而我們要提到，產生的信息、系統記錄的信息和向用戶顯示的信息是不一定對等的。設計師，應與產品經理、開發程序師一起溝通，所產生的信息，與要向用戶顯示的信息。

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

用途的文字信息結構表達方式，以下，有兩種：

圖4 示例1

圖5 示例2

兩個示例的文字信息結構表達有什么區別呢？各自有什么優劣勢？在設計過程當中，我們應當選哪一種呢？

圖4 為把界面分為上下結構，將大類做成按鈕至于頂部。圖5 為把界面分為左右結構，將大類一排一排展示，大類放于左側，小類放于右側，再用背景色來區分兩個區域。圖4 與圖5 都將小類一排排展示，這種小類的展示方式設計是考慮到了用途小類信息的“不確定性”。為什么說這類信息有“不確定”性呢？因為這一類表達了購買用途的具體信息，用戶可以自定義添加刪除，也就意味這這個字段的“不確定性”，不管是文字類型還是文字長度。所以在設計時，小類用這種方式。至于大類，因為只是一種分類、歸納，這一類的文字并不多，這樣就有了兩種設計方式。

由圖分析出，圖4 的大類展示方式不適合于大類個數太多，而明顯圖5 的大類個數要多于圖4，圖5 的大類也可以在設計時，交互可設計為用戶左右皆可上下滑動，以展示更多的大類以及小類。圖4 的大類因為文字長度的不一，整個文字信息的表達結構，使得界面更加靈活。圖5 的文字信息的結構表達方式，就使得界面嚴謹。

那我們如何選擇呢？這一點，設計師在設計時，需與產品經理多溝通，了解產品背景、產品功能需要、用戶體驗。

3.1 產品背景

這里是記賬產品，但是這一類產品也有很多分類：公司記賬、個人家庭生活記賬。公司記賬，有專人管理，需記錄公司財務的每一筆支出與收入，為以公司報稅，向公司負責人做財務報告，以查看公司收益、成本、利潤等。個人家庭生活記賬，個人記錄生活開銷，以記錄個人資產開支，明白錢去哪兒，達到最大有效使用個人財產，以達到個人目的。

3.2 產品功能需要

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

3.3 用戶體驗

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

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

4 結束語

以上所述，移動應用的文字信息的展示方式既有一定的規律，又要根據不同產品的背景來決定文字信息的展示方式。UI 設計中，設計師需要不停地與產品經理溝通，與開發程序師交流，結合用戶體驗，給出最佳的文字信息展示方式。