第一篇：智能手機(jī)APP圖標(biāo)設(shè)計(jì)風(fēng)格_謝往都(修改)剖析

智能手機(jī)APP圖標(biāo)設(shè)計(jì)風(fēng)格

與制作技巧研究

謝往都，XXX，陳正銘，戴經(jīng)國(guó)

（韶關(guān)學(xué)院 信息科學(xué)與工程學(xué)院 廣東省 韶關(guān)市 512000）

摘要：本文首先簡(jiǎn)要介紹了移動(dòng)終端的圖形化用戶界面的發(fā)展歷史，得出當(dāng)今手機(jī)圖標(biāo)設(shè)計(jì)的主要風(fēng)格是由蘋果的扁平式和立體式的發(fā)展趨勢(shì)的結(jié)論。然后對(duì)iOS和Android設(shè)備的圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)進(jìn)行了總結(jié)，之后研究并梳理了在不同的設(shè)計(jì)原則和視覺(jué)配色原理圖標(biāo)設(shè)計(jì)過(guò)程中應(yīng)該采用怎樣的圖標(biāo)風(fēng)格。然后根據(jù)不同的布局風(fēng)格對(duì)界面的圖標(biāo)風(fēng)格和設(shè)計(jì)要求進(jìn)行了研究和總結(jié)。最后通過(guò)對(duì)優(yōu)秀實(shí)例的分析，研究出圖標(biāo)設(shè)計(jì)要點(diǎn)和加工方式。

Abstract: This paper briefly introduces the history of the development of the graphical user interface of the mobile terminal, draws the conclusion that the main style of today's mobile phone icon design is by the conclusion of the development trend of Apple's flat and three-dimensional.Then on IOS and Android devices icon design standards are summarized.After study and carding of the in different design principles and visual color matching principle for icon design process should be using what kind of style icon.Then according to the different layout style of interface icons style and design requirements of research and summary.Finally, through the analysis of outstanding cases of icon design points and processing methods.關(guān)鍵詞：智能手機(jī)；圖標(biāo)風(fēng)格；圖標(biāo)設(shè)計(jì)

Key words: smart phone;icon style;icon design 引言

隨著智能手機(jī)的飛速發(fā)展，越來(lái)越多的人開(kāi)始重視手機(jī)APP的UI界面的風(fēng)格設(shè)計(jì)，而圖標(biāo)，作為UI的最基本發(fā)元素，其研究卻被人忘記在角落之中。雖然目前有一部分人開(kāi)始研究圖標(biāo)的制作和設(shè)計(jì)，但是他們往往沒(méi)有放開(kāi)視野，只是局部的研究圖標(biāo)本身的設(shè)計(jì)方法，沒(méi)有把圖標(biāo)設(shè)計(jì)當(dāng)做一個(gè)體系，從整個(gè)APP體系研究圖標(biāo)的設(shè)計(jì)風(fēng)格。本文將采用從整體出發(fā)的角度來(lái)研究智能手機(jī)APP圖標(biāo)風(fēng)格設(shè)計(jì)的理念并挖掘出制作統(tǒng)一風(fēng)格圖標(biāo)的方法。

第一章 緒論

1.1研究背景

隨著信息時(shí)代的迅速發(fā)展，在當(dāng)今社會(huì)手機(jī)已經(jīng)是隨處可見(jiàn)，雖然智能手機(jī)是進(jìn)幾年才出現(xiàn)的新型產(chǎn)物，但是按照現(xiàn)在的發(fā)展速度來(lái)看，智能手機(jī)憑借它強(qiáng)大的功能與便攜操作的特性，擁有攝像攝影、播放視頻音頻、遠(yuǎn)程通訊等功能，今后智能手機(jī)完全能取代PC機(jī)在人類日常生活的重要地位。所以我們有必要對(duì)其的發(fā)展進(jìn)行研究試圖從中挖掘出可用的價(jià)值。具統(tǒng)計(jì)，在2015年中國(guó)的智能手機(jī)普及率已經(jīng)高達(dá)50%，而APP（application）作為新媒體的產(chǎn)物，在人機(jī)交互方式上做出了革命性的創(chuàng)新，同時(shí)也開(kāi)創(chuàng)了智能機(jī)的新紀(jì)元。智能手機(jī)之所以能夠在當(dāng)今有如此大的影響力必須功于智能手機(jī)上各式各樣APP的出現(xiàn)，硅谷著名工程師 Andreessen 曾說(shuō)，軟件正在吞噬著世界，而現(xiàn)在看來(lái)，APP 則正在吞噬著軟件。因此我們當(dāng)今的智能手機(jī)時(shí)代可以說(shuō)是APP的時(shí)代。[13] 1.2圖標(biāo)的重要意義

所謂“未見(jiàn)其人先聞其聲”，圖標(biāo)體現(xiàn)出的是APP所表達(dá)的核心內(nèi)容也是APP的外在體現(xiàn)，它關(guān)系著整個(gè)程序設(shè)計(jì)的成敗，是用戶在使用APP前了解APP的一個(gè)重要信息。如何讓一個(gè)圖標(biāo)能夠即不失美感富有創(chuàng)造性又具有明確的可識(shí)別性，能準(zhǔn)確的表達(dá)出制作者的主旨，這是本文重點(diǎn)研究的問(wèn)題。如何在眾多的APP中使自己成為關(guān)注的焦點(diǎn)，圖標(biāo)設(shè)計(jì)的好壞就是取得成功的重要因素。視覺(jué)效果優(yōu)秀，色彩搭配自然舒適，圖形設(shè)計(jì)簡(jiǎn)單符合邏輯的圖標(biāo)往往就能夠在第一時(shí)間博得用戶的眼球。同樣這些因素也是本文將重點(diǎn)講述的一個(gè)重要問(wèn)題。

1.3手機(jī)圖形界面的發(fā)展

早期的手機(jī)系統(tǒng)只支持黑白色調(diào)，圖標(biāo)也是簡(jiǎn)單的類似手繪線條圖形，形式簡(jiǎn)單沒(méi)有任何的邊框修飾和色澤點(diǎn)翠。而正是這種線條式的簡(jiǎn)單風(fēng)格，已經(jīng)成為了當(dāng)今的主流圖標(biāo)設(shè)計(jì)風(fēng)格，雖然現(xiàn)在市面上也不乏形式多樣，具有藝術(shù)性的圖標(biāo)，但是簡(jiǎn)約的設(shè)計(jì)風(fēng)格憑借著它表意明確，淺顯易懂，色彩搭配簡(jiǎn)單自然等優(yōu)勢(shì)一直占據(jù)著APP的大部分市場(chǎng)。相比PC機(jī)的在1989年就出現(xiàn)了彩色界面，手機(jī)的彩屏系統(tǒng)在2000年才問(wèn)世。

圖1-1 早期的黑白機(jī)界面

圖1-2 D502 i 手機(jī)界面

第一個(gè)推出彩屏GSM手機(jī)的是臺(tái)灣一家較為知名的手機(jī)廠商--英華達(dá)(OKWAP)，它在2000年9月推出的OKWAP i108，才是真正世界上第一款GSM網(wǎng)絡(luò)的彩色液晶屏手機(jī)。而隨著彩屏的到來(lái)，其延生物如彩信業(yè)務(wù)及拍照功能，開(kāi)始了飛躍發(fā)展。[16]

圖1-3 OKWAP i108手機(jī)界面

雖然早在2000年手機(jī)系統(tǒng)就進(jìn)入了彩色時(shí)代，但是APP圖標(biāo)的設(shè)計(jì)還是處于一種停滯狀態(tài)，彩屏的APP圖標(biāo)僅僅只是把以前的黑白色調(diào)重新漆上了一次彩色，整體的設(shè)計(jì)可以說(shuō)是極簡(jiǎn)至極。直到2004年，各大廠家開(kāi)始把高端液晶技術(shù)運(yùn)用在手機(jī)上，使手機(jī)屏幕從10萬(wàn)像素直接升級(jí)到130萬(wàn)像素，可以和數(shù)碼照相機(jī)的演示效果到底同一水平線。有了液晶技術(shù)的設(shè)備基礎(chǔ)，APP圖標(biāo)的設(shè)計(jì)也得到極大的發(fā)展。2007年隨著蘋果公司的iPhone系列上市，APP圖標(biāo)變的更加細(xì)膩滑潤(rùn)，更有質(zhì)感，色彩也更加飽和豐富，同時(shí)也保留了以前的簡(jiǎn)約風(fēng)格，體現(xiàn)出一種純樸的美感。iPhone系列的推出可以說(shuō)是引領(lǐng)了當(dāng)代APP圖標(biāo)設(shè)計(jì)的潮流，就連當(dāng)今使用用戶最多的Android系統(tǒng)上的APP圖標(biāo)也是處處能見(jiàn)到IOS圖標(biāo)設(shè)計(jì)風(fēng)格的身影。

第二章 手機(jī)圖標(biāo)的設(shè)計(jì)標(biāo)準(zhǔn)

2.1 手機(jī)圖形界面設(shè)計(jì)的規(guī)范

在手機(jī)有限的屏幕空間中如何才能讓圖標(biāo)設(shè)計(jì)更符合標(biāo)準(zhǔn)，這就必須遵循以下的手機(jī)UI設(shè)計(jì)規(guī)范原則。

首先我們將手機(jī)屏幕拆分為4個(gè)區(qū)域，自頂向下分別是：狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)、標(biāo)簽欄，這些區(qū)域?qū)?yīng)不同的屏幕分辨率也將以不同的尺寸呈現(xiàn)出來(lái)。[20]

圖1-4 IOS應(yīng)用圖標(biāo)規(guī)范表格

圖1-5 iPhone圖標(biāo)尺寸規(guī)范

由于Android系統(tǒng)設(shè)備眾多，一個(gè)應(yīng)用程序圖標(biāo)需要設(shè)計(jì)幾種不同尺寸,但是目前的Android系統(tǒng)已經(jīng)擁有了自適應(yīng)功能可以根據(jù)不同的屏幕分辨率來(lái)調(diào)整圖標(biāo)的大小所以這里就不進(jìn)行詳細(xì)的研究了。

2.2圖標(biāo)的設(shè)計(jì)原則

圖標(biāo)的設(shè)計(jì)形式主要有三種分別為：純圖形式、純文字式和圖文并存式。而這三種形式各有自己適合的界面，設(shè)計(jì)者應(yīng)該根據(jù)不同APP的試用范圍和布局的排版來(lái)決定使用哪一種圖標(biāo)這點(diǎn)我將于第四章在和大家講解，現(xiàn)在我們先了解下圖標(biāo)設(shè)計(jì)主要原則。

圖標(biāo)只要具備簡(jiǎn)單明了、美觀自然的要求就行了，簡(jiǎn)單來(lái)說(shuō)圖標(biāo)的設(shè)計(jì)就是用來(lái)告訴用戶按什么按鈕能完成什么任務(wù)，在指引用戶的同時(shí)又達(dá)到修飾、美化整個(gè)APP界面的作用。所以我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候應(yīng)該首先考慮這兩點(diǎn)，達(dá)到有一定內(nèi)涵而又不失美感的水平。因此在設(shè)計(jì)圖標(biāo)時(shí)我們應(yīng)該注意一下幾個(gè)基本的設(shè)計(jì)原則。（1）表意明確原則

現(xiàn)在的人也不喜歡花費(fèi)太多的時(shí)間去尋找一個(gè)符合自己要求的APP，所以讓用戶看一眼圖標(biāo)就知道APP具有哪些功能，是留住用戶的重要手段，表意明確的圖標(biāo)能夠大大的減少用戶適應(yīng)APP的時(shí)間，同時(shí)也能省去繁瑣的向?qū)Ч?jié)目。表達(dá)信息最準(zhǔn)確的方式就是才用文字，純文字式圖標(biāo)就在這反面起到了很大的作用。如圖2-1就是典型的純文字式圖標(biāo)，其功能復(fù)雜性只需要瀏覽一遍我們就可以完全了解。

圖2-1 純文字式圖標(biāo)

但是這類圖標(biāo)同時(shí)具有一個(gè)很嚴(yán)重的問(wèn)題，那就是APP在面對(duì)不同的地域不同的文化的客戶那就應(yīng)該采用不同的圖標(biāo)，這不得不說(shuō)是一個(gè)很麻煩并且很困難的事情。所以純文字式圖標(biāo)一般適用于面向內(nèi)地用戶的中小型APP。如果需要擴(kuò)大用戶量，那么采用純圖形式圖標(biāo)和圖文并存式圖標(biāo)將是一個(gè)不錯(cuò)的選擇。

純文字式圖標(biāo)就要求設(shè)計(jì)者具有豐富的聯(lián)想能力和洞察事物的能力，當(dāng)使用象征事物作為圖標(biāo)的時(shí)候，設(shè)計(jì)者就需要考慮到采用事物的材料、外形、角度（文件圖標(biāo)用側(cè)面就根據(jù)有代表性）等因素。純圖形式相對(duì)純文字式來(lái)說(shuō)它所表達(dá)的是一種相對(duì)抽象的信息，沒(méi)有文字那樣直接明了，但是對(duì)于大眾化的APP來(lái)說(shuō)，純圖形式圖標(biāo)更能使用戶達(dá)到共鳴。這也就不用繁瑣的針對(duì)不同地區(qū)設(shè)計(jì)不同的圖標(biāo)，極大的減輕了圖標(biāo)設(shè)計(jì)的成本，所以現(xiàn)在大部分的APP的內(nèi)部界面都是采用純圖形式圖標(biāo)，而圖文并存式和純文字式更傾向于作為APP的Icon。

圖2-2 圖文并存式和純文字式圖標(biāo)

（2）風(fēng)格統(tǒng)一原則

風(fēng)格統(tǒng)一原則就是要求圖標(biāo)的設(shè)計(jì)要根據(jù)APP每個(gè)界面的布局和配色來(lái)設(shè)計(jì)出與之相搭配的圖標(biāo)。就像裝修新房子一樣，新房裝修完后設(shè)計(jì)師會(huì)根據(jù)房子的構(gòu)造和設(shè)計(jì)風(fēng)格來(lái)配置相搭調(diào)的家具和小飾件。圖標(biāo)就類似于整個(gè)APP中的小飾件，運(yùn)用好這些小飾件就能營(yíng)造出一種讓用戶掌控自如的感覺(jué)。如果一個(gè)APP的開(kāi)始界面和功能界面形成很強(qiáng)烈的反差，那就會(huì)給人一種很突兀的感覺(jué)，這將會(huì)使用戶對(duì)該APP的體驗(yàn)大打折扣。所以風(fēng)格統(tǒng)一的目的就保證界面處于用戶的掌控之中，讓用戶自己感受主動(dòng)權(quán)。

根據(jù)界面的展示功能來(lái)設(shè)計(jì)不同的圖標(biāo)是風(fēng)格統(tǒng)一需要注意的問(wèn)題，一些隱喻式的UI設(shè)計(jì)者采用擬物物圖標(biāo)，從而達(dá)到整體的氛圍修飾。圖2-3中的兩個(gè)播放按鈕取色就是界面第二欄音頻的顏色，其他按鈕的風(fēng)格也是灰黑色ASB塑料感，具有非常強(qiáng)烈的真實(shí)感。圖2-4中的酒瓶圖標(biāo)和cellar圖標(biāo)都完美的營(yíng)造出了一種收藏庫(kù)的感覺(jué)。

圖2-3 Cross DJ 應(yīng)用

圖2-4 Awesome Note 應(yīng)用

而相對(duì)于功能比較復(fù)雜或者一個(gè)頁(yè)面展示的內(nèi)能比較多的界面來(lái)說(shuō)，我們更傾向于使用簡(jiǎn)約的圖標(biāo)，這樣能減少用戶的視覺(jué)盲目敢，減緩眼睛的疲勞感。例如各種購(gòu)物APP。并且簡(jiǎn)約化是現(xiàn)在圖標(biāo)的主要發(fā)展趨勢(shì)，繼iPhone5之后的蘋果機(jī)圖標(biāo)都開(kāi)始采用扁平的設(shè)計(jì)風(fēng)格，即拋棄部分藝術(shù)修飾，如陰影、透視、紋理、漸變等等能做出3D效果的元素一概不用。

（3）藝術(shù)修飾原則

圖2-5 IOS圖標(biāo)風(fēng)格的變化

雖然說(shuō)現(xiàn)在圖標(biāo)的發(fā)展趨勢(shì)偏向于簡(jiǎn)約的風(fēng)格，但是適當(dāng)?shù)倪\(yùn)用藝術(shù)修飾也能讓圖標(biāo)達(dá)到一種眼前一亮的作用。簡(jiǎn)單來(lái)說(shuō)藝術(shù)修飾原則就對(duì)原有的圖形進(jìn)行加工美化，典型的就是rich design豐富設(shè)計(jì)風(fēng)格。所謂rich design就是通過(guò)添加各種設(shè)計(jì)裝飾，比如下落陰影、梯度等，讓整體設(shè)計(jì)顯得很豐富。這種設(shè)計(jì)風(fēng)格可以讓用戶在導(dǎo)航時(shí)，更加自如。另外rich design和擬真設(shè)計(jì)風(fēng)格也不同，后者是通過(guò)模擬物理實(shí)物來(lái)讓設(shè)計(jì)更加逼真（類似于IOS6之前的圖標(biāo)風(fēng)格）。

藝術(shù)修飾還有一種比較特殊的方式，那就是才用動(dòng)態(tài)圖來(lái)作為圖標(biāo)，動(dòng)態(tài)圖相對(duì)于以往的靜態(tài)圖來(lái)說(shuō)可以更加容易吸引用戶的注意力，但是如果大量的使用動(dòng)態(tài)圖則會(huì)照成一種非常混亂的場(chǎng)景，同時(shí)也會(huì)導(dǎo)致手機(jī)的負(fù)載過(guò)大，從而影響APP的運(yùn)行效率。所以一般情況下只需要在加載、等待、刷新等界面中使用動(dòng)態(tài)圖標(biāo)。實(shí)際上，有研究表明，普通用戶能夠忍受的最長(zhǎng)的加載頁(yè)面的時(shí)間一般為8秒鐘。8秒是一個(gè)臨界值，如果加載時(shí)間超過(guò)8秒，除非用戶必須在這個(gè)頁(yè)面獲得一些信息，一般用戶會(huì)關(guān)閉頁(yè)面或者轉(zhuǎn)到其他頁(yè)面。采用充滿動(dòng)態(tài)圖能讓頁(yè)面在保持加載的過(guò)程中充滿了趣味性，牢牢的吸引住用戶的注意力，讓用戶在等待時(shí)不在是無(wú)所事事，但是使用必須恰當(dāng)。

第三章 圖標(biāo)設(shè)計(jì)的視覺(jué)要素

3.1圖標(biāo)設(shè)計(jì)的視覺(jué)重要性

所謂的視覺(jué)重要性用網(wǎng)上調(diào)侃的一句話來(lái)說(shuō)“現(xiàn)在就是個(gè)看臉的世界?！鄙鲜鏊岬降乃性瓌t都是為了進(jìn)一步提高視覺(jué)效果而規(guī)定的。視覺(jué)設(shè)計(jì)試圖解決的是功能和美學(xué)效果之間的鴻溝，從兩者之間尋找一個(gè)完美的平衡，所以設(shè)計(jì)師不僅要完全熟知軟件的每項(xiàng)功能同時(shí)也要擁有視覺(jué)設(shè)計(jì)的技術(shù)。

圖標(biāo)的底色最好使用明亮的三原色,在一個(gè)圖標(biāo)上附加太多的細(xì)節(jié),這會(huì)導(dǎo)致計(jì)算機(jī)界面混亂,但是一個(gè)按鈕過(guò)于簡(jiǎn)單又會(huì)顯得蒼白無(wú)力。好的圖標(biāo)應(yīng)該是在同類中易讀易懂易識(shí)別，而不是在說(shuō)明解釋，一個(gè)好的創(chuàng)意應(yīng)該以清晰、簡(jiǎn)明、給人印象深刻的方式表現(xiàn)出來(lái)。

視覺(jué)設(shè)計(jì)同樣是整體用戶體驗(yàn)設(shè)計(jì)的一部分，我們應(yīng)該在軟件框架開(kāi)始構(gòu)造的階段就將視覺(jué)設(shè)計(jì)考慮周全以便圖標(biāo)風(fēng)格的統(tǒng)一。優(yōu)秀的視覺(jué)效果可以增加APP的使用用戶，提升APP頁(yè)面交互直接的流暢性，提高用戶的滿意度與使用成就感，進(jìn)而使APP變的更完善。3.2圖標(biāo)設(shè)計(jì)的色彩原理

視覺(jué)效果的重要一部分就是色彩搭配。色彩搭配是統(tǒng)一界面風(fēng)格的重要部分，不顧風(fēng)格要求和用戶感受的配色只會(huì)給APP帶來(lái)負(fù)面影響。在了解色調(diào)的搭配前，我們先要知道各種色彩的作用。就像每種花都有不同的花語(yǔ)一樣，使用合理的配色可以更方便用戶融入作者的思想中。下面我們來(lái)淺談一下幾種最基本也是最常用的色彩。

白色是所有顏色中最簡(jiǎn)單的色彩，它沒(méi)有強(qiáng)烈的個(gè)性，不會(huì)對(duì)人體感官造成強(qiáng)烈的刺激，白色可以說(shuō)是百搭色，所以在很多UI中都會(huì)使用白色作為填充色，圖標(biāo)同樣也是如此。

黑色與其他的顏色搭配會(huì)形成一種強(qiáng)烈的反差感，正是這種反差感所以它更能突出其他的顏色。黑色適合搭配的顏色是紅色、藍(lán)色、白色、紫色。

紅色在可見(jiàn)光譜中光波最長(zhǎng)，所以是最為醒目的顏色，給人視覺(jué)上一種迫近感和擴(kuò)張感，容易引發(fā)興奮、激動(dòng)、緊張的情緒。在大多數(shù)情況下紅色圖標(biāo)都作為一種警告作用，提示用戶這樣做有一定的風(fēng)險(xiǎn)。所以在圖標(biāo)制作時(shí)我們一般是采用比較淺的紅色作為主色調(diào)從而突出其前兩種特點(diǎn)。紅色適合搭配的顏色是白色、黑色、藍(lán)灰色、米色、灰色。

藍(lán)色有鎮(zhèn)靜的效果，可以使人的情緒平靜下來(lái)，還可以降低血壓。除此之外藍(lán)色還是后退色，藍(lán)色物體看上去比實(shí)際距離遠(yuǎn)，藍(lán)色還可以使人感覺(jué)時(shí)間過(guò)得很快。藍(lán)色適合搭配的顏色是白色、粉藍(lán)色、醬紅色、金色、銀色、橄欖綠、橙色、黃色。

黃色的波長(zhǎng)適中，是所有色相中最能發(fā)光的色，能起到醒目和放大的作用。雖然黃色過(guò)于明亮，但是稍添加別的色彩就容易失去本來(lái)的面貌，所以黃色一般都是作為輔色起到提醒和修飾的作用。黃色適合搭配紫色、藍(lán)色、白色、咖啡色、黑色。

黑白和三大原色是圖標(biāo)設(shè)計(jì)的最基本的顏色，從UI設(shè)計(jì)到圖標(biāo)設(shè)計(jì)都離不開(kāi)這五種色彩，所以熟悉它們的色彩特性和搭配原則能夠使圖標(biāo)設(shè)計(jì)更突出APP所表達(dá)的主題，使UI交互更加貼切自然。

第四章 設(shè)計(jì)圖標(biāo)的基本方法和要點(diǎn)

4.1圖標(biāo)設(shè)計(jì)的排版和尺寸和擺放位置

圖標(biāo)的一大作用就是用于UI的界面美化修飾，所以在圖標(biāo)設(shè)計(jì)的過(guò)程中我們要針對(duì)不同的板塊設(shè)計(jì)不同的圖標(biāo)，依據(jù)圖標(biāo)的生存空間來(lái)設(shè)計(jì)圖標(biāo)才能更好的發(fā)揮圖標(biāo)的作用。（1）跳板式導(dǎo)航（又稱快速啟動(dòng)板或?qū)m格導(dǎo)航）

跳板式導(dǎo)航的特點(diǎn)是界面中的各個(gè)菜單選項(xiàng)就是其他界面的跳轉(zhuǎn)點(diǎn)。其布局模式通常是40×40px、40×30px和30×20px網(wǎng)格，由這類較小的板塊組成，每一個(gè)板塊都是用上一個(gè)圖標(biāo)作為按鈕，但是部分跳板式導(dǎo)航會(huì)根據(jù)不同的應(yīng)用優(yōu)先級(jí)順序，放大或者縮小網(wǎng)格，用于突出主要應(yīng)用，所以在設(shè)計(jì)時(shí)可以對(duì)主要功能的圖標(biāo)進(jìn)行細(xì)膩的加工以突出該圖標(biāo)的主要地位。

由于跳板式導(dǎo)航中每個(gè)按鈕直接的間隙比較小，因此在設(shè)計(jì)這類布局的圖標(biāo)時(shí)，應(yīng)該注意每個(gè)圖標(biāo)的配色不能有太大的色相差，除了主要圖標(biāo)之外，其他圖標(biāo)不需經(jīng)過(guò)復(fù)雜的修飾加工，否則會(huì)加大用戶對(duì)按鈕選擇的壓力，通常采用扁平式或者線條式這里比較簡(jiǎn)約的圖標(biāo)。（2）列表式導(dǎo)航

列表導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。列表項(xiàng)目通常是采用間距、標(biāo)題等進(jìn)行分組，形成擴(kuò)展列表。這類布局的圖標(biāo)比跳板式導(dǎo)航更小，通常是20X20px的圖標(biāo)，在圖標(biāo)旁邊通常有文字標(biāo)題來(lái)幫助引導(dǎo)。圖標(biāo)設(shè)計(jì)是通常是采用簡(jiǎn)單的雙色搭配，不需要復(fù)雜的圖片內(nèi)容，采用簡(jiǎn)單的圖形來(lái)勾勒就可以了。（3）儀表式導(dǎo)航

儀表式導(dǎo)航通常是用于統(tǒng)計(jì)信息的界面，相對(duì)于其他界面來(lái)說(shuō)，統(tǒng)計(jì)界面更需要直觀的信息與簡(jiǎn)潔的界面，這樣才能讓用戶了解和分析所統(tǒng)計(jì)的信息。這類布局所才用的圖標(biāo)通常是長(zhǎng)矩形的小條格或者是不同規(guī)格的錐形塊，并且在設(shè)計(jì)圖標(biāo)的時(shí)候可以根據(jù)不同信息的重要程度采用比較強(qiáng)烈的顏色進(jìn)行標(biāo)注。（4）隱喻式導(dǎo)航

隱喻式的特點(diǎn)是頁(yè)面模仿應(yīng)用的隱喻對(duì)象，通常用于游戲和一些比較特殊的APP中，其中充滿了大量的圖標(biāo)和按鈕。用于這種布局的圖標(biāo)是最復(fù)雜也是最多變的，我們需要根據(jù)整個(gè)APP的UI設(shè)計(jì)的氛圍來(lái)制作與之相對(duì)應(yīng)的圖標(biāo)，其中會(huì)用到各種圖標(biāo)加工方法，整個(gè)界面的圖標(biāo)設(shè)計(jì)下來(lái)與其說(shuō)是圖標(biāo)制作，倒不如說(shuō)是制作一幅繪畫也不足為過(guò)。4.2.1圖標(biāo)制作中的各種效果實(shí)現(xiàn)

為了配合UI的整體風(fēng)格，圖標(biāo)制作過(guò)程中往往需要用到很多的修飾效果來(lái)到的制作者的目的。無(wú)論是純圖形式圖標(biāo)、純文字式圖標(biāo)還是圖文并存式圖標(biāo)，使用各種圖標(biāo)修飾效果都能進(jìn)一步提升圖標(biāo)的美感。（1）陰影效果 陰影效果的作用是突顯一個(gè)元素，大多數(shù)圖標(biāo)都會(huì)擁有這種修飾效果，即便是扁平化的設(shè)計(jì)也一部分圖標(biāo)采用了長(zhǎng)陰影效果。長(zhǎng)陰影的制作通常都是使用黑白漸變的矢量矩形來(lái)疊加在圖片上來(lái)實(shí)現(xiàn)這種效果?；蛘呤褂枚啻螐?fù)雜圖層然后將這些圖層填充為黑色，并使用圖層蒙蔽調(diào)整大小與輪廓。相對(duì)于長(zhǎng)陰影，Windows PC機(jī)上的圖標(biāo)通常是采用描邊陰影，在比較規(guī)則的圖標(biāo)上添加這種陰影可以使用Photoshop的圖層屬性中的“投影”選項(xiàng)直接添加。對(duì)于一些相對(duì)復(fù)雜的圖形，可以通過(guò)復(fù)制圖層然后對(duì)圖形進(jìn)行變形調(diào)整大小和比例，再降低透明度和顏色的填充程度來(lái)實(shí)現(xiàn)陰影效果。而3D圖形則需要根據(jù)圖形的受光面來(lái)添加局部陰影，下圖中“投影”的實(shí)現(xiàn)同樣可以采用上述提到的方法來(lái)實(shí)現(xiàn)。

圖4-1 3D圖形的陰影效果

（2）質(zhì)感效果

具有質(zhì)感效果的圖標(biāo)主要是用于一些按鈕上，其作用顧名思義，就是給按鈕賦予了一種有質(zhì)量的視覺(jué)感，主要應(yīng)用于純圖形式圖標(biāo)、和圖文并存式圖標(biāo)。質(zhì)感效果的制作是通過(guò)對(duì)圖標(biāo)的局部板塊使用斜面和浮雕效果與陰影效果配合制作出一種圖層凸起初步的效果，有了初步的質(zhì)感之后需要使用拋光效果對(duì)質(zhì)感進(jìn)一步的打磨加工。拋光效果的制作通常是用類似Photoshop中“鋼筆”工具或者“矩形”工具這類繪畫手段制作需要拋光的部分，然后填充為白色，對(duì)其進(jìn)行模糊和透明化的設(shè)置即可達(dá)到理想的效果。（3）3D效果

3D效果和質(zhì)感效果有很多共同點(diǎn)能適用于如何圖標(biāo)，但是質(zhì)感效果只需要對(duì)圖標(biāo)的一小部分圖層進(jìn)行打磨和加工，而3D效果則把工程量擴(kuò)大了整圖層。

3D效果的整體立體感不是通過(guò)斜面和浮雕效果來(lái)實(shí)現(xiàn)，而是先對(duì)底層圖層進(jìn)行復(fù)制和填充，然后根據(jù)整個(gè)圖形的規(guī)格對(duì)底層和頂層進(jìn)行勾勒，再對(duì)勾勒出來(lái)的部分補(bǔ)充色彩，整體層次劃分完成后需要對(duì)邊緣進(jìn)行細(xì)化拋光，最后再根據(jù)受關(guān)面添加陰影效果。陰影的分布可以參考圖4-1，這類陰影效果同拋光效果一樣是手繪陰影部分然后采用模糊和透明的方法到達(dá)漸變的效果。

圖4-2 3D效果大致制作過(guò)程

4.2.1圖標(biāo)的點(diǎn)翠修飾

圖標(biāo)的點(diǎn)翠修飾就是在單一的圖標(biāo)中添加一些次要的元素來(lái)修飾圖標(biāo)。單一的圖標(biāo)有時(shí)并不能吸引用戶，這是就需要通過(guò)其他元素的點(diǎn)翠，使整個(gè)圖標(biāo)變得更加生動(dòng)形象，達(dá)到博人眼球的作用，當(dāng)然這種點(diǎn)翠方法只適用于APP的icon和界面中的裝飾類圖標(biāo)，對(duì)于應(yīng)用中的其他圖標(biāo)最好是使用扁平化設(shè)計(jì)風(fēng)格。

圖4-3就是一個(gè)沒(méi)有經(jīng)過(guò)任何點(diǎn)翠修飾過(guò)的圖標(biāo)，它看上去只有簡(jiǎn)單的三座房屋，沒(méi)有白云小鳥，沒(méi)有花草樹(shù)木，毫無(wú)吸引力。類似這樣的圖標(biāo)其實(shí)擁有很大的改善空間。

圖4-3簡(jiǎn)單的房圖標(biāo)

經(jīng)過(guò)房屋三色彩虹和綠色樹(shù)木的點(diǎn)翠修飾后，該圖標(biāo)不但突出了主要內(nèi)容圖4-3 無(wú)點(diǎn)翠的房屋圖標(biāo)房屋，而且對(duì)以前單一的元素進(jìn)行了擴(kuò)充，營(yíng)造了一種意境之美，更能博得用戶的眼球。

圖4-4進(jìn)點(diǎn)翠過(guò)的圖標(biāo)

圖4-5的郵箱圖標(biāo)也很好的運(yùn)用了云彩和信件 的搭配，不僅使“云傳輸”這種概念變得跟生 動(dòng)形象，而且表達(dá)出了該APP的技術(shù)理念。

圖4-5 郵箱圖標(biāo)

除了添加一些其他元素對(duì)圖標(biāo)進(jìn)行修飾外，還一種將圖標(biāo)風(fēng)格化的方法來(lái)對(duì)圖標(biāo)進(jìn)行點(diǎn)翠修飾。這類方法比較復(fù)雜，并且形式多變，但是制作出來(lái)的視覺(jué)效果非常棒，能夠體現(xiàn)出一種藝術(shù)加工的效果。常用的風(fēng)格化制作方法有將圖標(biāo)金屬化、水墨化、擬物化、寫實(shí)化等方法。圖4-6就采用了將圖標(biāo)毛線化的方法點(diǎn)翠修飾，將圖標(biāo)變得更可愛(ài)動(dòng)人。

圖4-6 毛線編織圖標(biāo)

第五章 總結(jié)

現(xiàn)在智能手機(jī)正處于發(fā)展的鼎盛時(shí)期，手機(jī)的界面設(shè)計(jì)也逐漸成為智能手機(jī)發(fā)展過(guò)程中的一個(gè)重要事項(xiàng)。而圖標(biāo)作為手機(jī)界面中的靈魂，它在手機(jī)界面中起著不可或缺的作用，圖標(biāo)比文字更具代表性，更能突出整個(gè)界面的用意，使設(shè)計(jì)者和用戶之間達(dá)成共鳴。

智能手機(jī)圖標(biāo)設(shè)計(jì)風(fēng)格的用意在于使APP能夠方便的展示出它的功能與作用，并且通過(guò)統(tǒng)一的圖標(biāo)風(fēng)格來(lái)提升APP整體的美感。本文通過(guò)研究得出目前的APP圖標(biāo)設(shè)計(jì)風(fēng)格趨向于簡(jiǎn)約化，無(wú)論是在圖標(biāo)的色彩搭配上還是布局對(duì)圖標(biāo)設(shè)計(jì)的限制都導(dǎo)致了現(xiàn)在圖標(biāo)設(shè)計(jì)的方向變成力求于精簡(jiǎn)與細(xì)致。即便是制作簡(jiǎn)單的圖標(biāo)，通過(guò)本文對(duì)圖標(biāo)的點(diǎn)翠修飾和圖標(biāo)的加工效果的研究得出，如果設(shè)計(jì)能采用獨(dú)特的制作方式與加工手段也能使圖標(biāo)變得更加具有吸引力，使簡(jiǎn)單的圖標(biāo)具有了生命力。

關(guān)于圖標(biāo)的風(fēng)格設(shè)計(jì)無(wú)論是筆者還是其他研究者都已經(jīng)進(jìn)行了比較透徹的研究，總的來(lái)說(shuō)就是圖標(biāo)要具有一定的美感并且能夠表達(dá)出制作出這個(gè)圖標(biāo)的用意。而關(guān)于圖標(biāo)制作這方面，雖然筆者用獨(dú)特的見(jiàn)解講述了不同圖標(biāo)效果的制作方式和對(duì)圖標(biāo)美化加工的手段，但是圖標(biāo)制作方法是多樣的，筆者只是介紹了自己制作圖標(biāo)時(shí)所想到的點(diǎn)子，至于其他的方法則需要讀者自行進(jìn)行總結(jié)和研究了。

參考文獻(xiàn)：

[1]周陟.UI進(jìn)化論—移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)[M].北京：清華大學(xué)出版社，2010: 15250.[3]Alan Dix，Jane Finlay等.人機(jī)交互[M].北京：電子工業(yè)出版社，2006:28.[4]（美）Suzanne Ginsburg.[譯]師蓉 樊旺斌.iPhone應(yīng)用用戶體驗(yàn)設(shè)計(jì)實(shí)戰(zhàn)與案例.機(jī)器工業(yè)出版社.[5]（美）Timothy Wood 著，毛姝雯譯.IOS 用戶體驗(yàn)設(shè)計(jì)［B］.人民郵電出版社，2013.[6]（英）Giles Colborne 著，李松峰，秦續(xù)文譯.簡(jiǎn)約至上——交互式設(shè)計(jì)四策略［B］.人民郵電出版社，2011.[7]Rachel Hinman 著，熊子川，李滿海譯.移動(dòng)互聯(lián)：用戶體驗(yàn)設(shè)計(jì)指南［B］．清華大學(xué)出版社，2013． [8]（美）Jakob Nielsen，Raluca Budiu 著，?；勺g.貼心設(shè)計(jì)：打造高可用性的移動(dòng)產(chǎn)品［B］.人民郵電出版社，2013.[9](美)Tberesa Neal 著，王軍鋒，郭偎，武艷芳譯.移動(dòng)應(yīng)用 UI 設(shè)計(jì)模式［B］．人民郵電出版社，2013．

[10]郭歌.智能手機(jī)界面的圖標(biāo)設(shè)計(jì)研究［D］.北京工業(yè)大學(xué)，2013.[11]軟件桌面圖標(biāo)設(shè)計(jì)的分析與研究_張苗[D]

[12]手機(jī)圖形界面的圖標(biāo)設(shè)計(jì)風(fēng)格研究_毛珊珊[D]

[13]智能手機(jī)APP圖標(biāo)的設(shè)計(jì)研究及實(shí)踐_羅曉萌[D]

[14]智能手機(jī)交互界面中的圖標(biāo)設(shè)計(jì)研究_王歌[D]

[15]極簡(jiǎn)主義在手機(jī)APP啟動(dòng)圖標(biāo)設(shè)計(jì)中的運(yùn)用_朱曉陽(yáng)[D]

[16]http://product.pconline.com.cn/itbk/top/1202/2665845.html

[17]http://mobile.163.com/10/0701/08/6AGBRK8J00112K88.html

[18]http://it.sohu.com/41/56/article15745641.shtml

[19]http://

[21]http://

[22]https://zhuanlan.zhihu.com/p/19567510