□張 立

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

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

□張 立

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

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

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

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

1 界面設(shè)計(jì)簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 隱喻性

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

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

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

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

（4）清楚地（暗示或意味）表達(dá)觀念或價(jià)值。

2.3 一致性

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

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

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

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

3.1 用戶研究

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

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

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

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

3.2 用戶的分類和特性

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

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

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

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

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

使用手機(jī)地點(diǎn)的多元化

影響手機(jī)用戶的因素

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

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

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

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

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

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

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

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

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

4 移動(dòng)應(yīng)用產(chǎn)品界面視覺(jué)設(shè)計(jì)

4.1 視覺(jué)風(fēng)格設(shè)計(jì)

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

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

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

4.2 界面版面設(shè)計(jì)

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

用戶視覺(jué)路徑

4.2.1 版面分割

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

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

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

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

D.版4：運(yùn)用界面中間的區(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 依界面物件的配置對(duì)版面作水平、垂直及水平和垂直交叉等分割，背景及底部固定導(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ù)：信息周?chē)粤舭?，即視為一區(qū)塊。

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

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

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

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

（頁(yè)面九宮格示意圖）

利用柵格設(shè)計(jì)可以給視覺(jué)版面設(shè)計(jì)帶來(lái)以下的作用：

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

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

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

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

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

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

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

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

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

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

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），則視為亮眼色彩，以一個(gè)或一串連續(xù)的亮眼字作為一個(gè)計(jì)算單位。

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

4.4.2 背景色彩

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

（2）主導(dǎo)覽列背景主要用色：主導(dǎo)覽列背景使用最多的色彩，若背景色彩為漸層色彩，則選取最深及最淺相加后除以2計(jì)算；若背景色彩為多種顏色，則選取靠近文字周?chē)纳省?/p>

4.4.3 文字與背景的辨識(shí)度

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

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

4.4.4 配色方法

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

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

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

4.5 界面文字設(shè)計(jì)

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

4.5.1 文字編排

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

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

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

4.5.2 字體設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

［9］李穎菲，熊傳鵬.界面視覺(jué)設(shè)計(jì)與交互設(shè)計(jì)的理解［J］.中國(guó)新技術(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

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

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

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