□張 立

（湖北經(jīng)濟學(xué)院藝術(shù)設(shè)計學(xué)院，湖北 武漢 430205）

基于用戶的移動應(yīng)用產(chǎn)品界面視覺設(shè)計研究

□張 立

（湖北經(jīng)濟學(xué)院藝術(shù)設(shè)計學(xué)院，湖北 武漢 430205）

移動應(yīng)用產(chǎn)品的用戶界面設(shè)計成為當(dāng)今設(shè)計的一個熱點研究領(lǐng)域，本文著重分析了界面視覺設(shè)計的原則，移動應(yīng)用產(chǎn)品界面視覺設(shè)計與用戶研究的關(guān)系和作用，詳細論述了移動應(yīng)用產(chǎn)品界面視覺設(shè)計的版面設(shè)計、圖標(biāo)設(shè)計、色彩配置設(shè)計、視覺風(fēng)格設(shè)計、文字設(shè)計等內(nèi)容。用戶研究貫穿在整個移動應(yīng)用產(chǎn)品服務(wù)體系設(shè)計的過程中，用戶是界面視覺設(shè)計的核心，能更有效地實現(xiàn)信息傳播，我們需要關(guān)注和理解用戶的目標(biāo)需求，讓視覺設(shè)計發(fā)揮更大的作用。

用戶；移動應(yīng)用產(chǎn)品；視覺設(shè)計；界面

由中國科學(xué)院《互聯(lián)網(wǎng)周刊》主辦的2015《互聯(lián)網(wǎng)周刊》年度人物及年度產(chǎn)品頒獎，360手機助手、有信電話等一批知名軟硬件科技創(chuàng)新企業(yè)獲得了“2015《互聯(lián)網(wǎng)周刊》年度產(chǎn)品”等各項榮譽，排名前十的主要為移動應(yīng)用產(chǎn)品。

1 界面設(shè)計簡介

根據(jù)《設(shè)計詞典》的定義，界面設(shè)計是指對兩種不同的物體間交流手段，交流過程的整體設(shè)計，系統(tǒng)地優(yōu)化人的操作，化解人機交流效率為目的，亦稱用戶界面設(shè)計（User Interface Design），英文縮寫為UI。

隨著移動智能設(shè)備相關(guān)科技的發(fā)展，界面設(shè)計是屏幕產(chǎn)品的重要組成部分，一個好的界面設(shè)計，界面的圖標(biāo)、布局、設(shè)計風(fēng)格能支撐有效的產(chǎn)品，使人與產(chǎn)品實現(xiàn)良好的交互?，F(xiàn)在用戶對移動應(yīng)用產(chǎn)品提出更高的要求，產(chǎn)品設(shè)計時考慮用戶的自身感受，產(chǎn)品信息容易理解，界面設(shè)計清晰、簡潔明快。

從設(shè)計角度而言，界面設(shè)計是一個復(fù)雜的有心理學(xué)、認(rèn)知學(xué)、視覺傳達設(shè)計等不同學(xué)科相互交叉、參與的工程。所以研究移動產(chǎn)品界面設(shè)計對于提高用戶對產(chǎn)品的有效使用、產(chǎn)品信息的表達有著重要作用，而以用戶為中心的研究是界面設(shè)計的理論基礎(chǔ)和出發(fā)點。只有滿足人的感官特征的界面設(shè)計，才能讓視覺設(shè)計發(fā)揮應(yīng)有的作用［1］。

1.1 界面視覺設(shè)計與界面設(shè)計的關(guān)系

界面視覺設(shè)計是整個設(shè)計的形式層面，是最直觀展現(xiàn)給用戶的部分。界面視覺設(shè)計又簡稱為GUI（Graphical User Interface），即人機交互圖形化用戶界面設(shè)計，是屏幕產(chǎn)品的視覺體驗和互動操作部分，它由版面、圖標(biāo)、色彩、文字等部分組成。而界面設(shè)計則是用戶與產(chǎn)品交流的平臺和媒介。界面設(shè)計包含界面視覺設(shè)計，界面視覺設(shè)計是界面設(shè)計的一部分，兩者的關(guān)系是一種從屬關(guān)系。

界面設(shè)計的范疇比較廣泛，需要大量信息技術(shù)支撐，界面視覺設(shè)計更偏重于設(shè)計藝術(shù)。但在整體框架之下，界面視覺設(shè)計則要遵循界面設(shè)計的基本原則和規(guī)則，堅持理性設(shè)計。在產(chǎn)品開發(fā)初期，界面視覺設(shè)計師要與界面設(shè)計師進行相互交流和配合，確定產(chǎn)品的視覺設(shè)計風(fēng)格和交互構(gòu)思以及功能的設(shè)定。然后設(shè)計師再根據(jù)整體設(shè)計框架完成最終的視覺設(shè)計效果，并滿足界面設(shè)計的功能需求同時也要注意設(shè)計視覺表達，起到與眾不同、畫龍點睛的作用。在設(shè)計過程中界面視覺設(shè)計師需要界面設(shè)計的理性思維，滿足用戶的理性需求。界面設(shè)計師也需要視覺設(shè)計的藝術(shù)審美，滿足用戶的情感需求。

1.2 界面視覺設(shè)計與平面設(shè)計的關(guān)系

平面設(shè)計 （Graphic Design），也稱為視覺傳達設(shè)計，是以“視覺”作為溝通和表現(xiàn)的方式，通過多種方式來創(chuàng)造和結(jié)合符號、圖片和文字，借此作出用來傳達想法或訊息的視覺表現(xiàn)［2］。平面設(shè)計是設(shè)計師把創(chuàng)意用不同的圖形、文字、符號，按照一定的視覺規(guī)律在平面上組合，以圖片的形式展現(xiàn)出來。

從心理學(xué)層面劃分，界面劃分為情感和感覺兩個層次。感覺是指人的眼、耳、舌、鼻、身等。界面視覺設(shè)計與平面設(shè)計都必須滿足用戶的情感和感覺需求，但是平面設(shè)計沒有用戶直接動手操作的環(huán)節(jié)，也缺少與用戶互動和交流的過程。

2 移動應(yīng)用產(chǎn)品界面視覺設(shè)計原則

作為移動應(yīng)用產(chǎn)品的設(shè)計師必須充分了解移動產(chǎn)品設(shè)計、使用功能、技術(shù)實施的可行性，再發(fā)揮設(shè)計創(chuàng)意美感吸引用戶。移動應(yīng)用產(chǎn)品界面視覺設(shè)計所需考慮到的設(shè)計原則，包含所有與用戶直接接觸的視覺、聽覺、味覺以及感覺等設(shè)計模塊，視覺設(shè)計原則還要規(guī)范畫面（界面）的呈現(xiàn)、系統(tǒng)給予用戶的觀感等［3］。

本文所分析的界面視覺設(shè)計原則包含整體美感設(shè)計、界面呈現(xiàn)能讓用戶一目了然、視覺元素應(yīng)與一般生活習(xí)慣具有相對應(yīng)之要素，還可以通過圖像對應(yīng)直覺，操作界面風(fēng)格、圖像及編排應(yīng)保持一致，信息與選項的呈現(xiàn)應(yīng)在畫面中的可視范圍，并減少用戶負擔(dān)，所見即所得。此外，吸引人的輸入界面工具造型以及互動方式都能方便用戶使用。

2.1 畫面呈現(xiàn)與操作

界面美學(xué)的完整性意味著信息架構(gòu)和與視覺設(shè)計的原則能夠符合一致。在長期使用與觀察的情形之下，畫面上的任何一個元素物件都應(yīng)會讓用戶感到愉悅。同時在圖形設(shè)計的使用要盡量保持簡單，這樣可以提升用戶去使用這些圖形界面，進而提高界面的使用性。在畫面的呈現(xiàn)方式上，將功能選項置于界面上的四個角落，將主要呈現(xiàn)的目標(biāo)內(nèi)容呈現(xiàn)在界面中間比較容易被用戶操作。

2.2 隱喻性

隱喻提供了一個整合新信息與之前知識的記憶方法，產(chǎn)出更深的理解與具有創(chuàng)造力的推理。Apple官方推出的設(shè)計指南 《IOS Human Interface GUidelines》里面是這樣解釋隱喻對體驗的影響：當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作仿造，用戶就能快速領(lǐng)會如何使用它。Marcus（2002）認(rèn)為，在圖形使用者界面中，隱喻有以下的功能：

（1）用來象征人、物、結(jié)構(gòu)以及過程。

（2）描述一種結(jié)構(gòu)或過程。

（3）解釋一個結(jié)構(gòu)或過程的因果關(guān)系。

（4）清楚地（暗示或意味）表達觀念或價值。

2.3 一致性

2.3.1 風(fēng)格一致性：各種界面的設(shè)計準(zhǔn)則要素按照一般用戶的使用習(xí)慣，不要讓用戶在解讀畫面要素時有所遲疑、猜測的迷思發(fā)生。

2.3.2 圖像一致性：畫面上所呈現(xiàn)的任一要素：例如圖像形狀、色彩配置，都應(yīng)避免用戶在視覺上產(chǎn)生混淆，要視覺明顯并且沖擊力強。其他的符號圖形所代表的涵義與象征，必須與其動作或指令有直接的關(guān)系，不能讓用戶產(chǎn)生任何的歧義。

2.3.3 編排一致性：相近或類似的信息內(nèi)容要按一致的編排方式呈現(xiàn)，相同的功能在界面的畫面中使用一致的要素，如標(biāo)題文字、圖像按鍵及畫面的安排等都能在既定的規(guī)范中求變化。在色彩的配置運用上應(yīng)使用標(biāo)準(zhǔn)化的色系搭配為原則，顏色之間不要相互干擾或太過突出。要協(xié)調(diào)整體信息的美感與界面協(xié)調(diào)性的均衡為原則。

3 移動應(yīng)用產(chǎn)品界面視覺設(shè)計與用戶研究

3.1 用戶研究

用戶就是指使用某產(chǎn)品的人，對于移動應(yīng)用產(chǎn)品來說，用戶就是直接與應(yīng)用產(chǎn)品進行交互來完成某種特定功能的人，包括一切與產(chǎn)品直接交互、并通過產(chǎn)品的某種特定功能來完成某個具體任務(wù)的人［4］。

用戶研究在整個產(chǎn)品設(shè)計中具有重要作用。應(yīng)用產(chǎn)品從研究、建模和需求定義三個階段都是針對產(chǎn)品的用戶來展開研究。從移動應(yīng)用產(chǎn)品設(shè)計過程來看，我們主要將其構(gòu)成分解包含三個層面，分別為內(nèi)容層面、行為層面和形式層面。

移動應(yīng)用產(chǎn)品設(shè)計過程中的三個層面

用戶研究主要研究兩個方面：一方面是關(guān)于產(chǎn)品可用性的調(diào)查，研究用戶對產(chǎn)品的認(rèn)可度，調(diào)整產(chǎn)品的系統(tǒng)設(shè)計，方便用戶更容易學(xué)習(xí)、使用和記憶產(chǎn)品；另一個方面是通過對產(chǎn)品可用性的研究，不斷發(fā)掘用戶的潛在需求，為產(chǎn)品的更新迭代提供新的思路和方法。用戶研究同時也是得到用戶需求和反饋的途徑，是檢驗產(chǎn)品界面設(shè)計與交互設(shè)計是否合理的重要標(biāo)準(zhǔn)。

3.2 用戶的分類和特性

3.2.1 用戶的分類。根據(jù)一般用戶對移動應(yīng)用產(chǎn)品不同的熟悉程度，我們將用戶分為新手用戶、中間用戶和資深用戶三大類。

（1）新手用戶：對產(chǎn)品缺少必要的認(rèn)知。沒有基本的操作概念，需要盡可能簡單的交互設(shè)計和界面設(shè)計。他們想要學(xué)習(xí)如何操作產(chǎn)品，但這并不意味他們需要或想要學(xué)習(xí)其中的工作流程。

（2）中間用戶：對產(chǎn)品有一定的了解，能夠順利完成一些基本的產(chǎn)品操作功能。他們會確定一些經(jīng)常使用和很少使用的功能。他們喜歡將經(jīng)常使用功能放在界面的前端和中心位置，這樣方便查找、使用和記憶。

（3）資深用戶：對產(chǎn)品非常熟悉和了解，會時不時地摸索產(chǎn)品的深奧功能，并會經(jīng)常地使用其中一些。他們會主動積極地學(xué)習(xí)產(chǎn)品內(nèi)容，他們喜歡挑戰(zhàn)新的功能，不會受到任何復(fù)雜性的困擾。

3.2.2 用戶的特性。移動終端智能手機被視作現(xiàn)代生活中必不可少的設(shè)備，隨著用戶通過智能手機來獲得新聞、購物、娛樂、社交等內(nèi)容越來越多，通過電視、報紙和雜志等傳統(tǒng)媒介來獲得內(nèi)容的用戶比例不斷下降。70%的智能手機用戶表示，他們一定要帶上該設(shè)備才會出門（如下圖）。

使用手機地點的多元化

影響手機用戶的因素

3.3用戶目標(biāo)與用戶體驗

認(rèn)知心理學(xué)專家唐納德·A·諾曼先生 （Donald A Norman）在《情感化設(shè)計》（Emotional Design）一書中從認(rèn)知的過程將用戶對產(chǎn)品的體驗作了遞進式的分層。這里我們將Donald A Norman提出的用戶認(rèn)知的本能、行為和反思層次與用戶目標(biāo)相對應(yīng)，我們可以對用戶體驗得到更好的理解：

（1）體驗?zāi)繕?biāo)：與本能處理過程有關(guān)，即用戶想要感受到什么。

（2）最終目標(biāo)：與行為處理過程有關(guān)，即用戶想要做什么。

（3）人生目標(biāo)：與反思處理過程有關(guān)，即用戶想要成為什么。

用戶體驗（User Experience）指的是用戶在與系統(tǒng)交互時候的體驗感覺，是涉及到一個人使用一個特定產(chǎn)品或系統(tǒng)或服務(wù)的有關(guān)行為、態(tài)度與情緒。是用戶在使用產(chǎn)品的過程中建立起來的一種純主觀的心理感受。體驗是主觀的，具有很強的不確定性因素。由于用戶個體的差異決定了每個用戶的真實體驗是無法完全模擬和再現(xiàn)的，但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經(jīng)由良好設(shè)計的實驗來認(rèn)識到的。

3.4 移動應(yīng)用產(chǎn)品界面視覺設(shè)計中用戶研究的作用

以用戶為中心的設(shè)計 （User Centered Design，簡稱UCD），是一種吸引人的、高效的用戶體驗的方法。以用戶為中心的設(shè)計思想非常簡單：在開發(fā)產(chǎn)品的每一個步驟中．都要把用戶列入考慮范圍［5］。

產(chǎn)品設(shè)計的最終目的是幫助用戶達成目標(biāo)，隨著產(chǎn)品信息化的進程，我們在研究、理解產(chǎn)品的用戶和精心設(shè)計產(chǎn)品的行為上所付出的各種努力最終都要通過視覺的方式呈現(xiàn)給用戶。因此我們在界面視覺設(shè)計之初就應(yīng)該明白用戶始終是第一的位置，并將用戶的目標(biāo)作為設(shè)計評斷的第一基準(zhǔn)。視覺界面雖然從流程上來說在用戶研究之后開始，但是在具體操作過程中，即使我們不能完全參與其中，也應(yīng)該盡可能的給予研究內(nèi)容的關(guān)注。因為在用戶研究的過程中我們可以獲悉用戶的分類層次，目標(biāo)體驗的關(guān)鍵詞等有用的信息，通過這些使得視覺界面設(shè)計在風(fēng)格把握等方面能夠第一時間找準(zhǔn)方向，做到有的放矢。

4 移動應(yīng)用產(chǎn)品界面視覺設(shè)計

4.1 視覺風(fēng)格設(shè)計

設(shè)計師應(yīng)從產(chǎn)品全局的角度考慮選擇在界面上應(yīng)用某種風(fēng)格，同樣界面上不只是考慮單獨的某個或某部分的元素，而是每個方面都需要從風(fēng)格的角度來考慮。我們通過從一開始對風(fēng)格的整體把握，從而把界面的設(shè)計基調(diào)確定下來，以保證視覺界面設(shè)計的功能特征與產(chǎn)品的品牌形象相一致。用戶對產(chǎn)品的體驗是通過形式、內(nèi)容和行為平衡統(tǒng)一作用而來的。

4.1.1 視覺風(fēng)格與功能：視覺風(fēng)格選擇的越多樣越容易誤導(dǎo)設(shè)計者及相關(guān)利益者對產(chǎn)品的判斷，產(chǎn)品視覺風(fēng)格的開發(fā)應(yīng)考慮控件、按鈕的基本形狀、操作模式和應(yīng)用環(huán)境等因素。視覺美感的考慮不能影響界面的含義和用戶與產(chǎn)品交互的能力［6］。

4.1.2 視覺風(fēng)格與品牌：產(chǎn)品與用戶的接觸就像人與人之間的交往，第一印象非常重要。據(jù)研究表明，用戶對產(chǎn)品的觀察的前5分鐘是建立長期關(guān)系的基礎(chǔ)。為確保這5分鐘得到好的效果，界面必須清晰直接地表達產(chǎn)品品牌。為品牌建立正面積極的第一印象的有效手段是通過合適的顏色和圖像風(fēng)格。

4.2 界面版面設(shè)計

冠以交互設(shè)計之父的阿倫·庫珀（Alan cooper）曾經(jīng)談到用戶的視覺路徑一般是：從上到下，從左到右。好的視覺設(shè)計路徑應(yīng)該是順應(yīng)用戶的視覺習(xí)慣，糟糕的設(shè)計會讓用戶視覺運動毫無規(guī)律，到處都是視覺焦點。

用戶視覺路徑

4.2.1 版面分割

4.2.1.1 依背景及內(nèi)容將版面分為7種配置：

A.版1：運用整個界面作界面信息內(nèi)容的配置。

B.版2：將界面垂直分割，運用界面中間的區(qū)塊配置網(wǎng)站內(nèi)容資訊，左右兩側(cè)則留白。

C.版3：將界面水平分割，運用界面中間的區(qū)塊配置網(wǎng)站內(nèi)容資訊，上下兩側(cè)則留白。

D.版4：運用界面中間的區(qū)塊配置產(chǎn)品內(nèi)容信息，上下左右皆留白。

E.版5：以版2或版3為基礎(chǔ)，作少許的變化，三側(cè)留白。

F.版6：以版1為基礎(chǔ)，作些少的變化，一側(cè)留白。

G.版7：將網(wǎng)站內(nèi)容的信息以不同區(qū)塊組成，構(gòu)成各式各樣的配置型態(tài)。

依背景及內(nèi)容分割版面

4.2.1.2 依界面物件的配置對版面作水平、垂直及水平和垂直交叉等分割，背景及底部固定導(dǎo)覽之外其他物件皆屬于內(nèi)容配置的物件。

A.水平配置：將應(yīng)用產(chǎn)品物件（包括Logo、按鈕、圖標(biāo)、廣告等）以水平的方式排列。

B.垂直配置：將應(yīng)用產(chǎn)品物件以垂直的方式排列。

C.水平和垂直交叉配置：將應(yīng)用產(chǎn)品物件以水平及垂直交叉的方式排列。

D.其他配置：其他非水平或垂直之配置方式。

4.2.2 版面配置

（1）區(qū)塊數(shù)：信息周圍皆留白，即視為一區(qū)塊。

（2）Logo位置：將頁面切割成九宮格，由左至右、由上至下分別為1-9共九個區(qū)塊，從中判斷Logo位于哪一個區(qū)塊。若橫跨其他區(qū)，橫跨面積小于1/3內(nèi)則不予計算，超過1/3則視為兩個區(qū)塊。

（3）搜尋列位置：判斷搜尋列位于頁面九宮格的哪一個區(qū)塊。若橫跨其他區(qū)，橫跨面積小于1/3內(nèi)則不予計算，超過1/3則視為兩個區(qū)塊。

（4）柵格系統(tǒng)：是一種可以被用來搭建“組合”的系統(tǒng)，它為版面布局提供了一種統(tǒng)一的結(jié)構(gòu)，可以有效地設(shè)計出有視覺層次和功能上較為多樣的界面。柵格設(shè)計一般可分為黃金比例和等比例兩種模式［7］。

柵格將屏幕分成多個大的水平和垂直區(qū)域。理想情況下，柵格上不同屏幕區(qū)域的大小尺寸應(yīng)該保證一致的關(guān)系，這種關(guān)系一般指比例。最常用的比例是“黃金分割”，這種比例也是人眼看起來最為舒適、和諧的。

（頁面九宮格示意圖）

利用柵格設(shè)計可以給視覺版面設(shè)計帶來以下的作用：

（1）可用性：版面設(shè)計元素的位置規(guī)則化，用戶可以快速清晰地分辨界面，并尋找到關(guān)鍵的界面元素。間隔一致和定位通過幫助用戶內(nèi)在的視覺機制從而提升屏幕信息的可讀性。

（2）視覺吸引力：視覺布局的比例協(xié)調(diào)可以帶給用戶一種井然有序的感覺，使界面看上去清晰、舒服，提高視覺吸引力，更有讓人進行互動操作的欲望。

（3）提高效率：界面版面布局標(biāo)準(zhǔn)化可以提高視覺界面設(shè)計者的工作效率和用戶的使用效率。

4.3 界面圖標(biāo)設(shè)計

圖標(biāo)廣義上指所有帶有指示作用的標(biāo)志；狹義上是指數(shù)字顯示屏上用來引導(dǎo)用戶運行各種操作的圖像。界面圖標(biāo)設(shè)計要具備國際間確定意義的圖解式、圖形式的符號特征；還要具備作為用戶界面中實現(xiàn)人機互動最為重要的交互元素，又具有指示性、指代性、易識別、易理解、易記憶、易操作的特點。

4.3.1 圖標(biāo)設(shè)計的步驟。通常包括：（1）風(fēng)格定位，（2）設(shè)計造型，（3）顏色定位，（4）細節(jié)整合4個步驟。圖標(biāo)設(shè)計應(yīng)該在整體界面視覺設(shè)計風(fēng)格的框架下進行設(shè)計。

4.3.2 圖標(biāo)的造型設(shè)計。圖表造型一般分為實物化和簡圖化兩大類。在造型的設(shè)計中，設(shè)計者應(yīng)利用人們已有的一些認(rèn)知進行圖形化的設(shè)計，顧及用戶日常生活中的習(xí)慣用法，同時考慮不同地區(qū)不同用戶的習(xí)俗認(rèn)知差別，最后做出的效果還需追求細節(jié)（包括結(jié)構(gòu)和色彩）。

辨識圖標(biāo)的評斷標(biāo)準(zhǔn)主要是圖標(biāo)的辨識度和精確度。圖標(biāo)效果和作用可以說直接評斷一個界面的好壞。圖標(biāo)應(yīng)該將自身與產(chǎn)品相應(yīng)的功能完美地融合，注重圖標(biāo)的質(zhì)感設(shè)計可以提升產(chǎn)品對用戶的吸引力，使用戶能清晰地了解使用并給用戶帶來的視覺體驗享受，同時能提升產(chǎn)品的品牌形象。

4.4 界面色彩配置設(shè)計

由于移動應(yīng)用產(chǎn)品都采用彩色液晶顯示屏技術(shù)，用戶自身對色彩有著本能的關(guān)注，色彩的設(shè)計在移動產(chǎn)品營銷領(lǐng)域也起到巨大的作用，是視覺界面設(shè)計的重要工具。

4.4.1 文字色彩

（1）產(chǎn)品文字的用色數(shù)量：包括內(nèi)文之標(biāo)題、文字及連結(jié)（指連結(jié)前）所用的色彩數(shù)量。

（2）產(chǎn)品文字的主要用色。

（3）產(chǎn)品亮眼色彩文字的用量：將色彩以色相、飽和度、亮度（HSB：hue、saturation、brightness）值表示，依飽和度及亮度（最高值為100，最低值為0），將其值均分三等分，分別為低（0—33）、中（34—66）及高（67—100），若飽和度及亮度值皆屬高（67—100），則視為亮眼色彩，以一個或一串連續(xù)的亮眼字作為一個計算單位。

色彩色相、純度和明度三元素不同的變化可以豐富視覺上的層次感，通過對色彩視覺層次化的使用，使得同一頁面也可以富有豐富的層次變化，從而更好地引導(dǎo)用戶交互的行為。例如設(shè)計某一區(qū)域時只用一種色彩，首先選定一種色彩，然后調(diào)整該色彩的飽和度或者透明度，產(chǎn)生新的色彩，用于界面。這樣的界面色彩設(shè)計既統(tǒng)一，又有層次感；而在純色塊的布局之中添加色彩鮮艷的圖片會顯得醒目［8］。

4.4.2 背景色彩

（1）產(chǎn)品背景主要用色：產(chǎn)品背景色中面積最大的顏色。

（2）主導(dǎo)覽列背景主要用色：主導(dǎo)覽列背景使用最多的色彩，若背景色彩為漸層色彩，則選取最深及最淺相加后除以2計算；若背景色彩為多種顏色，則選取靠近文字周圍的色彩。

4.4.3 文字與背景的辨識度

（1）內(nèi)文文字與背景的明度差和色差。

（2）主界面文字與背景的明度差和色差。

4.4.4 配色方法

（1）色彩心理選擇法：色彩都具有色相、明度、和純度三種屬性。相同的色彩不同的色相明度純度，讓人產(chǎn)生不同的心理印象，從而選擇最適合用戶心理的色彩。

（2）圖片選擇法：就是利用擬物化的照片來尋找合適的色彩搭配。這種方法與日本色彩研究所的研究有著本源的相似。都是通過對自然和社會已有的色彩進行提煉，通過類似方案的大量提取，從而收獲符合人們習(xí)慣配色方案。

（3）調(diào)查問卷分析法：就是由設(shè)計師提供出多套配色方案，由用戶研究人員進行調(diào)查問卷、用戶訪談等方式進行數(shù)據(jù)收集，根據(jù)所得到的數(shù)據(jù)分析進行刪選，得出最適合的配色方案。這種方法的優(yōu)點是準(zhǔn)確率高，缺點則是時間成本和人力成本都消耗比較多。

4.5 界面文字設(shè)計

移動應(yīng)用產(chǎn)品主要針對界面文字的相關(guān)設(shè)計，包含文字編排及字體設(shè)計兩大類。

4.5.1 文字編排

（1）標(biāo)題數(shù)：計算內(nèi)文中的標(biāo)題數(shù)量，包括文字標(biāo)題、圖片標(biāo)題，以HTML語法中的對稱標(biāo)簽＜h1>—＜h6>為輔助計算。

（2）段落數(shù)：計算內(nèi)文中的段落數(shù)量，以HTML語法中的對稱標(biāo)簽＜p>、＜br>為輔助計算。

（3）段落字?jǐn)?shù)：計算頁面內(nèi)文中最長段落的字?jǐn)?shù)，含標(biāo)點符號，不含空格，英文則以字符數(shù)計算。

4.5.2 字體設(shè)計

（1）字體種類數(shù)：計算產(chǎn)品文字設(shè)計中使用的不同字體數(shù)量。

（2）粗體數(shù)量：計算內(nèi)文中使用的粗體數(shù)量，以一個或一組連續(xù)的粗體字作為一個計算單位。以HTML語法中的對稱標(biāo)簽＜strong>、＜b>為輔助計算。

（3）斜體數(shù)量：計算內(nèi)文中使用的斜體數(shù)量，以一個或一組連續(xù)的斜體字作為一個計算單位。以HTML語法中的對稱標(biāo)簽＜i>、＜em>為輔助計算。

（4）字號：指內(nèi)文主要使用的字號。由于字號有pt、px、em等不同設(shè)定單位，我們將所有單位換算成pt（12pt=16px=1em）以利統(tǒng)計。

（5）文字字體：指應(yīng)用產(chǎn)品內(nèi)主要使用的字體。

文字是人類用來記錄語言的符號系統(tǒng)。界面設(shè)計日趨從平面化到擬物化，再到扁平化，但細節(jié)還是離不了文字的顯示。就界面內(nèi)文字的設(shè)計來說，我們還要注重文字的功能、形式美和情感體驗三個方面［9］。

（A）功能方面：文字在圖形界面的使用上應(yīng)該是一種精煉的輔助。盡可能地減少文字的使用，讓用戶減少對界面識別和認(rèn)知的負擔(dān)。

（B）形式方面：由于圖形界面內(nèi)文字的作用是細節(jié)的提示、解釋，所以形式一般采用簡潔清晰的字體，避免斜體字等易造成視覺模糊的效果。在文字較多的情況下應(yīng)將文字清晰的組成段落，從而給人整齊構(gòu)成感。

（C）文字的情感體現(xiàn)，往往容易讓人忽視。文字有其它視覺形式無與倫比的親近特性，是人類文化的重要傳承媒介。雖然計算機已存有了多達幾千種各式各樣特點的字體，但為了滿足用戶對產(chǎn)品和文字本身不同的情感訴求，我們作為設(shè)計者應(yīng)用“定制”的理念，將文字設(shè)計得更好。

通過分析界面視覺設(shè)計，我們可以清楚地認(rèn)識到，用戶研究應(yīng)該貫穿在整個移動應(yīng)用產(chǎn)品服務(wù)體系設(shè)計的過程中，用戶是界面視覺設(shè)計的核心，我們需要關(guān)注和理解用戶的目標(biāo)需求，從目標(biāo)出發(fā)給予用戶各層次的體驗享受。隨著中國經(jīng)濟的發(fā)展，信息技術(shù)的發(fā)展，今后界面視覺設(shè)計還會發(fā)展出許多新的形式和特點來幫助人們使用產(chǎn)品、駕馭產(chǎn)品，發(fā)揮出更大的作用。

［1］吳林燕.以用戶為中心平板電腦界面視覺設(shè)計研究［D］.南京理工大學(xué)，2013：16.

［2］曹方.視覺傳達設(shè)計原理［M］.南京:江蘇美術(shù)出版社，2005:68-80.

［3］杜鋒.基于人機工程的GUI設(shè)計研究［D］.南京航空航天大學(xué)，2008:45-50.

［4］鐘韜.手機用戶界面設(shè)計方法研究［D］.湖南大學(xué)，2005:22-45.

［5］Jasse James Garrett.用戶體驗的要素：以用戶為中心的Web設(shè)計［M］.范曉燕，譯.北京:機械工業(yè)出版社，2011:130-230.

［6］李怡.界面設(shè)計初探［J］.重慶科技學(xué)院學(xué)報（社會科學(xué)版），2010（9）:166-169.

［7］金伯利·伊拉姆.網(wǎng)格系統(tǒng)與版式設(shè)計［M］.上海:上海人民美術(shù)出版社，2013:68-110.

［8］彭蘭.數(shù)字媒體傳播概論［M］.北京:高等教育出版社，2011:49.

［9］李穎菲，熊傳鵬.界面視覺設(shè)計與交互設(shè)計的理解［J］.中國新技術(shù)新產(chǎn)品，2009（24）:107-108.

責(zé)任編輯 文 嶸

10.14180/j.cnki.1004-0544.2017.04.010

J524.1

A

1004-0544（2017）04-0067-06

教育部人文社科青年項目（14YJC760082）。 作者簡介：張立（1975-），女，湖北廣水人，湖北經(jīng)濟學(xué)院藝術(shù)設(shè)計學(xué)院副教授。

隨著全球科學(xué)技術(shù)的快速發(fā)展，全球的通訊、網(wǎng)絡(luò)及軟件也取得迅猛發(fā)展，科技與網(wǎng)際網(wǎng)絡(luò)的發(fā)展已經(jīng)全面改變了我們的生活。移動智能設(shè)備、手機的普及，用戶獲取信息從以瀏覽器為入口的方式轉(zhuǎn)化為獨立移動應(yīng)用 （即以 Cookie技術(shù)作為用戶畫像提取的方式不再可能完整描繪移動設(shè)備用戶）。智能手機也進入了一個新的發(fā)展時期，ABI Research預(yù)測全球行動移動應(yīng)用產(chǎn)品總收入至2016年則將達到460億美元。

目前在移動終端的應(yīng)用產(chǎn)品類型主要分為：