移動(dòng)應(yīng)用程序APP視覺(jué)設(shè)計(jì)因素應(yīng)用分析

趙玲莉（華南理工大學(xué)計(jì)算機(jī)所教學(xué)站 510240）

APP移動(dòng)應(yīng)用程序是當(dāng)下人們生活的一個(gè)熱點(diǎn)，很多事情都可以通過(guò)終端APP的操作完成。比如淘寶手機(jī)端APP，打車(chē)APP，電影票購(gòu)買(mǎi)APP，還有大學(xué)生專用的課程課表APP等，這些都非常方便了我們的生活。拋開(kāi)技術(shù)問(wèn)題而言，這些APP看似很方便，卻有很多設(shè)計(jì)的不足之處，導(dǎo)致在同類APP下載中，用戶人數(shù)比較少。而且，當(dāng)下所有的移動(dòng)終端設(shè)計(jì)都在談?wù)撊绻層脩臬@得優(yōu)雅的用戶體驗(yàn)以及不斷的強(qiáng)調(diào)交互設(shè)計(jì)的重要性，然后卻忘卻了使這一切成為可能的因素，那就是移動(dòng)應(yīng)用程序的外觀視覺(jué)設(shè)計(jì)。移動(dòng)APP實(shí)際上是綜合了很多學(xué)科的技術(shù)，但是如果沒(méi)有完美的外觀設(shè)計(jì)，再好的技術(shù)也成為毫無(wú)意義的擺設(shè)。而不論是一開(kāi)始就優(yōu)秀得讓人驚訝的設(shè)計(jì)師還是循序漸進(jìn)越來(lái)越好的慢熱型設(shè)計(jì)師，在設(shè)計(jì)APP時(shí)，總是有很多東西可以參考，并且是保證APP移動(dòng)應(yīng)用程序外觀的完整性和審美性的一些基本要求。

1.對(duì)比。良好的對(duì)比關(guān)系對(duì)于移動(dòng)應(yīng)用程序非常關(guān)鍵，因?yàn)樗鼤?huì)直接影響到用戶查看設(shè)計(jì)的方式。對(duì)比是指不同或者類似的元素相對(duì)于彼此是怎樣顯示的。如果設(shè)計(jì)中的內(nèi)容看起來(lái)非常相似，那么用戶就不知道應(yīng)該先看哪里，看到的幾乎就是一堆亂糟糟的RGB值。所以，在設(shè)計(jì)中，應(yīng)當(dāng)對(duì)一些元素設(shè)置優(yōu)先級(jí)，不同的元素應(yīng)該很明顯的看出他們的不同，不應(yīng)該讓用戶產(chǎn)生混淆，從而忽略了你想要的表達(dá)。

2.重復(fù)。要使用戶信任和熟悉你的應(yīng)用程序，就需要使用戶感到使用的舒適感。就視覺(jué)設(shè)計(jì)而言，可以使用應(yīng)用程序的編排樣式來(lái)達(dá)到目的。手段就是可以通過(guò)相似元素的重復(fù)使用，從而讓用戶快速建立熟悉感。

3.對(duì)齊。對(duì)齊是視覺(jué)設(shè)計(jì)中常用的方法，在移動(dòng)終端設(shè)計(jì)也非常重要。元素應(yīng)該對(duì)齊到哪里呢？包括對(duì)齊到其他元素，網(wǎng)格，黃金比例框架等，沒(méi)有對(duì)齊的界面元素和構(gòu)建看起來(lái)就像出錯(cuò)一樣，沒(méi)有穩(wěn)定的基礎(chǔ)。不需要特別過(guò)多的技能就可以正確排列元素，設(shè)計(jì)師們?cè)缇土?xí)慣了拖入水平和垂直的輔助線，而不僅僅是目測(cè)。對(duì)齊這個(gè)原則的應(yīng)用在iPhone的應(yīng)用程序中可以找到比較好的范例。

4.接近度和分組。在設(shè)計(jì)中應(yīng)該把相似和相關(guān)的元素組織在一起，構(gòu)成一個(gè)聚合的整體。這樣做的好處是用戶可以更快的瀏覽項(xiàng)目的聚合，并且更容易確定元素之間的的關(guān)系。相關(guān)元素的分組是非常重要的，錯(cuò)誤的分組會(huì)導(dǎo)致客戶的混淆。

5.光線的選擇。如何使用漸變的合適的光影，如何使用邊緣的高光色，也是在設(shè)計(jì)中需要考慮的問(wèn)題。優(yōu)秀的用戶界面設(shè)計(jì)的秘訣在于，在屏幕上的二維物體看起來(lái)想再三維的空間里，并且他們像現(xiàn)實(shí)里面一樣有體積，表面的性質(zhì)和棱角。三維的效果讓用戶體驗(yàn)感大大提升。同時(shí)還要注意設(shè)計(jì)中光源的位置對(duì)文本的閱讀的影響。注意漸變、邊緣高光、塊光澤、陰影等對(duì)圖標(biāo)等的影響。我們一般考慮光源來(lái)自上方，首先會(huì)照射到按鈕的頂部，相對(duì)而言，頂部的顏色會(huì)更加明亮。同時(shí)，按鈕的邊緣在接近邊界之前具有淡淡的，細(xì)微的高光，指示光源自然的反射的邊緣的銳度。添加邊緣高光可以容易的使形狀凸出，可以使主形狀與其便捷和周?chē)膮^(qū)域形成更強(qiáng)烈的對(duì)比。

6.考慮清楚版式的關(guān)系。任何設(shè)計(jì)中版式都是為內(nèi)容服務(wù)的，APP設(shè)計(jì)中也不例外。要注意和諧和平衡，一旦放置了一個(gè)文本塊，就必須重視它在設(shè)計(jì)中的作用。為了使之有效，需要給它提供足夠的空間，并且必須與周?chē)脑睾晚?yè)面本身之間進(jìn)行平衡，使得圖像和文字一樣獲得設(shè)計(jì)的活力。

7.設(shè)計(jì)移動(dòng)應(yīng)用程序在某些方面比較容易，但是在其他方面則比較負(fù)責(zé)和困難。容易是指因?yàn)槠聊槐容^小，內(nèi)容相對(duì)少，更容易進(jìn)行設(shè)計(jì)和管理。但是問(wèn)題是能夠設(shè)計(jì)的元素比較少，發(fā)揮的空間也比較小，所以在處理像素時(shí)就需要注意以下點(diǎn)：盡量使設(shè)計(jì)保持逼真，設(shè)計(jì)師要精確到每一個(gè)像素，盡量簡(jiǎn)化界面，確定什么是必須的，什么是需要隱藏的；要理解清楚那個(gè)圖標(biāo)是必須的，那個(gè)是用途是錯(cuò)誤的；不要把界面控件放在不方面的位置；文字是程序很重要的內(nèi)容，要小心應(yīng)對(duì)。

設(shè)計(jì)不可能一觸而就，它需要時(shí)間和許許多多的實(shí)踐經(jīng)驗(yàn)的積累。在設(shè)計(jì)中要重視構(gòu)思的過(guò)程，構(gòu)思是產(chǎn)生和探索想法和概念的過(guò)程，也是捕捉可視化信息的過(guò)程。設(shè)計(jì)師可以從草圖方式開(kāi)始構(gòu)思，借用草圖來(lái)實(shí)現(xiàn)初步的構(gòu)思，草圖非常適合于協(xié)作、討論和交流想法，雖然不是正式的，或者是看上去比較粗糙，但是的確可能比較形象的表現(xiàn)我們的設(shè)計(jì)理念和想法，在不斷修正后，就可以實(shí)現(xiàn)電腦化的設(shè)計(jì)。所以，設(shè)計(jì)師在設(shè)計(jì)過(guò)程中要多多考慮各方面的要求和想法，做到不浪費(fèi)設(shè)計(jì)，設(shè)計(jì)到恰到好處。

[1]SmashingMagazine著，陳宗斌譯.眾妙之門(mén)網(wǎng)頁(yè)UI設(shè)計(jì)之道.人民郵電出版社，2012.12.

[2]貍雅人編著.PHOTOSHOP職能手機(jī)APP界面設(shè)計(jì).人民郵電出版社，2013.1.

[3]王巧伶等編著.APP手機(jī)界面創(chuàng)意設(shè)計(jì)新手通.機(jī)械工業(yè)出版社，2014.7.