1、智能手機(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ì)原則和視覺配色原理圖標(biāo)設(shè)計(jì)過程中應(yīng)該采用怎樣的圖標(biāo)風(fēng)格。然后根據(jù) 不同的布局風(fēng)格對(duì)界面的圖標(biāo)風(fēng)格和設(shè)計(jì)要求進(jìn)行了研究和總結(jié)。最后通過對(duì)優(yōu)秀實(shí)例的分析，研究出圖 標(biāo)設(shè)計(jì)要點(diǎn)和加工方式。Abstract: This paper brieflyintroduce

2、s the history of the development of the graphical userinterface of the mobile terminal,draws the conclusion that the main style of todays mobile phoneicon design is by the conclusion of the development trend of Apples flat and three-dimensional. Then on IOS and Android devices icon design standards

3、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. Fi

4、nally, 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ā)展，越來越多的人開始重視手機(jī)APP的UI界面的風(fēng)格設(shè)計(jì)，而圖標(biāo)，作為UI的最基本發(fā)元素，其研究卻被人忘記在角落之中。雖然目前有一部分人開始 研究圖標(biāo)的制作和設(shè)計(jì)，但是他們往往沒有放開視野，只是局部的研究圖標(biāo)本身的設(shè)計(jì)方法， 沒有把圖標(biāo)設(shè)計(jì)當(dāng)做一個(gè)體系，從整個(gè)

5、APP體系研究圖標(biāo)的設(shè)計(jì)風(fēng)格。本文將采用從整體出發(fā)的角度來研究智能手機(jī)APP圖標(biāo)風(fēng)格設(shè)計(jì)的理念并挖掘出制作統(tǒng)一風(fēng)格圖標(biāo)的方法。第一章緒論1.1 研究背景隨著信息時(shí)代的迅速發(fā)展，在當(dāng)今社會(huì)手機(jī)已經(jīng)是隨處可見，雖然智能手機(jī)是進(jìn)幾年才出現(xiàn)的新型產(chǎn)物，但是按照現(xiàn)在的發(fā)展速度來看，智能手機(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ī)交互方式上做

6、出了革命性的創(chuàng)新，同時(shí)也開創(chuàng)了智能機(jī)的新紀(jì)元。智能手機(jī)之所以能夠在當(dāng)今有如此大的影響力必須功于智能手機(jī)上各式各樣APP的出現(xiàn)，硅谷著名工程師Andreessen曾說，軟件正在吞噬著世界，而現(xiàn)在看來，APP則正在吞噬著軟件。 因此我們當(dāng)今的智能手機(jī)時(shí)代可以說是APP的時(shí)代。131.2 圖標(biāo)的重要意義所謂“未見其人先聞其聲”，圖標(biāo)體現(xiàn)出的是 APP所表達(dá)的核心內(nèi)容也是 APP的外在體 現(xiàn)，它關(guān)系著整個(gè)程序設(shè)計(jì)的成敗，是用戶在使用 APP1了解APP的一個(gè)重要信息。如何讓一個(gè)圖標(biāo)能夠即不失美感富有創(chuàng)造性又具有明確的可識(shí)別性，能準(zhǔn)確的表達(dá)出制作者的主 旨，這是本文重點(diǎn)研究的問題。如何在眾多的APP中使

7、自己成為關(guān)注的焦點(diǎn)，圖標(biāo)設(shè)計(jì)的好壞就是取得成功的重要因素。視覺效果優(yōu)秀，色彩搭配自然舒適，圖形設(shè)計(jì)簡(jiǎn)單符合邏輯的圖標(biāo)往往就能夠在第一時(shí)間博得用戶的眼球。同樣這些因素也是本文將重點(diǎn)講述的一個(gè)重要問題。1.3 手機(jī)圖形界面的發(fā)展早期的手機(jī)系統(tǒng)只支持黑白色調(diào)，圖標(biāo)也是簡(jiǎn)單的類似手繪線條圖形，形式 簡(jiǎn)單沒有任何的邊框修飾和色澤點(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)在

8、2000年才問世。2 57下午中國(guó)移用生1 hHit! IIIII 0。，PO圖1-1早期的黑白機(jī)界面Ed圖1-2 D502 i手機(jī)界面第一個(gè)推出彩屏GSMF機(jī)的是臺(tái)灣一家較為知名的手機(jī)廠商-英華達(dá)（OKWAP）它在2000年9月推出的OKWAP i10日才是真正世界上第一款 GSMO絡(luò)的彩色液晶屏手機(jī)。而隨 著彩屏的到來，其延生物如彩信業(yè)務(wù)及拍照功能，開始了飛躍發(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ì)可以說是極簡(jiǎn)至極。直到 200

9、4年，各大廠家開始把高端液晶技術(shù)運(yùn)用在手機(jī)上，使手機(jī)屏幕從10萬像素直接升級(jí)到130萬像素，可以和數(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系列的推出可以說是引領(lǐng)了當(dāng)代APP圖標(biāo)設(shè)計(jì)的潮流，就連當(dāng)今使用用戶最多的Android系統(tǒng)上的APP圖標(biāo)也是處處能見到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ì)更

10、符合標(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)出來。20設(shè)備分蝌率狀麻欄離境導(dǎo)航欄高度標(biāo)整欄高度iPhons6 plus1232 x 2208px60px132px147pxiPhoneG750 ： 1334 px即RM98pxiPhon&5/5s/5c601136 px40pxiPhone 4/4 5640px40p9BpxjfAif Wlf ni22048 x 1536 pxB3 口*9Spx1C2J * 766 pxNQpx44px49pxiPad min

11、i1024x768 px20px44 px外刑尺寸鍛備應(yīng)用程序圉標(biāo)4戶戶宇|.&的圖和Spat)卡的梅設(shè)蒼陽橋iPfwic 5 的faMSr 5$, JC1就bINQ曲素啦冷重州書鵬索能，沔煤泵視網(wǎng)膜的浮NL.曲通3又品交薛逑你M151d卻素m61Q24B素80-B0#s船ms#素ip;d的迷你儂制比It破陰。像素iPnd 的 Lw拓唬必T51X5必停雷40X構(gòu)牌素圖1-5 iPhone圖標(biāo)尺寸規(guī)范I!1%I1網(wǎng)心1- TL：*小 (薜M匕爵1婚8悼wen加4 M 4B.V圖1-4 IOS應(yīng)用圖標(biāo)規(guī)范表格怛U通由于Android系統(tǒng)設(shè)備眾多，一個(gè)應(yīng)用程序圖標(biāo)需要設(shè)計(jì)幾種不同尺寸，但是目前的An

12、droid系統(tǒng)已經(jīng)擁有了自適應(yīng)功能可以根據(jù)不同的屏幕分辨率來調(diào)整圖標(biāo)的大小所以這 里就不進(jìn)行詳細(xì)的研究了。2.2 圖標(biāo)的設(shè)計(jì)原則圖標(biāo)的設(shè)計(jì)形式主要有三種分別為：純圖形式、純文字式和圖文并存式。而這三種形式各有自己適合的界面，設(shè)計(jì)者應(yīng)該根據(jù)不同APP的試用范圍和布局的排版來決定使用哪一種圖標(biāo)這點(diǎn)我將于第四章在和大家講解，現(xiàn)在我們先了解下圖標(biāo)設(shè)計(jì)主要原則。圖標(biāo)只要具備簡(jiǎn)單明了、 美觀自然的要求就行了， 簡(jiǎn)單來說圖標(biāo)的設(shè)計(jì)就是用來告訴用 戶按什么按鈕能完成什么任務(wù)，在指引用戶的同時(shí)又達(dá)到修飾、美化整個(gè)APP界面的作用。所以我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候應(yīng)該首先考慮這兩點(diǎn)，達(dá)到有一定內(nèi)涵而又不失美感的水平。因此

13、在設(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ù)雜性只需要瀏覽一遍我們就可以完全了解。21：妗國(guó)一川圖2-1純文字式圖標(biāo)但是這類圖標(biāo)同時(shí)具有一個(gè)很嚴(yán)重的問題，那就是APP在面對(duì)不同的地域不同的文化的客戶那就應(yīng)該采用不同的圖標(biāo)，這不得不說是一個(gè)很麻煩并且

14、很困難的事情。所以純文字式圖標(biāo)一般適用于面向內(nèi)地用戶的中小型APR如果需要擴(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ì)純文字式來說它所表達(dá)的是一種相對(duì)抽象的信息，沒有文字那樣直接明了，但是對(duì)于大眾化的APP來說，純圖形式圖標(biāo)更能使用戶達(dá)到共鳴。這也就不用繁瑣的針對(duì)不同地區(qū)設(shè)計(jì)不同的圖標(biāo)，極大的減輕了圖標(biāo)設(shè)計(jì)的成本，所以現(xiàn)在大部分的APP的內(nèi)部界面都是采用純圖形式圖標(biāo)，而圖文并存式和純文字

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

16、問題，一些隱喻式的設(shè)計(jì)者采用擬物物圖標(biāo)，從而達(dá)到整體的氛圍修飾。圖2-3中的兩個(gè)播放按鈕取色就是界面 第二欄音頻的顏色，其他按鈕的風(fēng)格也是灰黑色 ASB塑料感，具有非常強(qiáng)烈的真實(shí)感。圖 2-4中的酒瓶圖標(biāo)和cellar圖標(biāo)都完美的營(yíng)造出了一種收藏庫的感覺。圖 2-3 Cross DJ 應(yīng)用圖 2-4 Awesome Note 應(yīng)用而相對(duì)于功能比較復(fù)雜或者一個(gè)頁面展示的內(nèi)能比較多的界面來說，我們更傾向于使用簡(jiǎn)約的圖標(biāo)，這樣能減少用戶的視覺盲目敢，減緩眼睛的疲勞感。例如各種購(gòu)物APR并且簡(jiǎn)約化是現(xiàn)在圖標(biāo)的主要發(fā)展趨勢(shì)，繼iPhone5之后的蘋果機(jī)圖標(biāo)都開始采用扁平的設(shè)計(jì)風(fēng)格，即拋棄部分藝術(shù)修飾，如

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

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

19、圖標(biāo)設(shè)計(jì)的視覺重要性所謂的視覺重要性用網(wǎng)上調(diào)侃的一句話來說“現(xiàn)在就是個(gè)看臉的世界。”上述所提到的所有原則都是為了進(jìn)一步提高視覺效果而規(guī)定的。視覺設(shè)計(jì)試圖解決的是功能和美學(xué)效果之間的鴻溝，從兩者之間尋找一個(gè)完美的平衡，所以設(shè)計(jì)師不僅要完全熟知軟件的每項(xiàng)功能同時(shí)也要擁有視覺設(shè)計(jì)的技術(shù)。圖標(biāo)的底色最好使用明亮的三原色，在一個(gè)圖標(biāo)上附加太多的細(xì)節(jié)，這會(huì)導(dǎo)致計(jì)算機(jī)界面 混亂，但是一個(gè)按鈕過于簡(jiǎn)單又會(huì)顯得蒼白無力。好的圖標(biāo)應(yīng)該是在同類中易讀易懂易識(shí)別，而不是在說明解釋，一個(gè)好的創(chuàng)意應(yīng)該以清晰、簡(jiǎn)明、給人印象深刻的方式表現(xiàn)出來。視覺設(shè)計(jì)同樣是整體用戶體驗(yàn)設(shè)計(jì)的一部分，我們應(yīng)該在軟件框架開始構(gòu)造的階段就將視覺

20、設(shè)計(jì)考慮周全以便圖標(biāo)風(fēng)格的統(tǒng)一。優(yōu)秀的視覺效果可以增加APP的使用用戶，提升APP頁面交互直接的流暢性，提高用戶的滿意度與使用成就感，進(jìn)而使APP變的更完善。3.2 圖標(biāo)設(shè)計(jì)的色彩原理視覺效果的重要一部分就是色彩搭配。色彩搭配是統(tǒng)一界面風(fēng)格的重要部分，不顧風(fēng)格要求和用戶感受白配色只會(huì)給APP帶來負(fù)面影響。在了解色調(diào)的搭配前，我們先要知道各種色彩的作用。就像每種花都有不同的花語一樣，使用合理的配色可以更方便用戶融入作者的思想中。下面我們來淺談一下幾種最基本也是最常用的色彩。白色是所有顏色中最簡(jiǎn)單的色彩，它沒有強(qiáng)烈的個(gè)性，不會(huì)對(duì)人體感官造成強(qiáng)烈的刺激， 白色可以說是百搭色，所以在很多UI中都會(huì)使用

21、白色作為填充色，圖標(biāo)同樣也是如此。黑色與其他的顏色搭配會(huì)形成一種強(qiáng)烈的反差感，正是這種反差感所以它更能突出其他的顏色。黑色適合搭配的顏色是紅色、藍(lán)色、白色、紫色。紅色在可見光譜中光波最長(zhǎng)， 所以是最為醒目的顏色，給人視覺上一種迫近感和擴(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án)色還是后 退色，藍(lán)色物體看上去比實(shí)際距離遠(yuǎn)， 藍(lán)色還可以

22、使人感覺時(shí)間過得很快。 藍(lán)色適合搭配的 顏色是白色、粉藍(lán)色、醬紅色、金色、銀色、橄欖綠、橙色、黃色。黃色的波長(zhǎng)適中，是所有色相中最能發(fā)光的色， 能起到醒目和放大的作用。 雖然黃色過 于明亮，但是稍添加別的色彩就容易失去本來的面貌，所以黃色一般都是作為輔色起到提醒和修飾的作用。黃色適合搭配紫色、藍(lán)色、白色、咖啡色、黑色。黑白和三大原色是圖標(biāo)設(shè)計(jì)的最基本的顏色，從UI設(shè)計(jì)到圖標(biāo)設(shè)計(jì)都離不開這五種色APP所表達(dá)的主題，使 UI彩，所以熟悉它們的色彩特性和搭配原則能夠使圖標(biāo)設(shè)計(jì)更突出 交互更加貼切自然。第四章 設(shè)計(jì)圖標(biāo)的基本方法和要點(diǎn)4.1圖標(biāo)設(shè)計(jì)的排版和尺寸和擺放位置圖標(biāo)的一大作用就是用于 UI的界

23、面美化修飾，所以在圖標(biāo)設(shè)計(jì)的過程中我們要針對(duì)不 同的板塊設(shè)計(jì)不同的圖標(biāo)，依據(jù)圖標(biāo)的生存空間來設(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 X 40px、40 X 30px和30 X 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)該注

24、意每個(gè)圖標(biāo)的配色不能有太大的色相差，除了主要圖標(biāo)之外，其他圖標(biāo)不需經(jīng)過復(fù)雜的修飾加工，否則會(huì)加大用戶對(duì)按鈕選擇的壓力，通常采用扁平式或者線條式這里比較簡(jiǎn)約的圖標(biāo)。(2)列表式導(dǎo)航列表導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁面。列表項(xiàng)目通常是采用間距、標(biāo)題等進(jìn)行分組，形成擴(kuò)展列表。這類布局的圖標(biāo)比跳板式導(dǎo)航更小，通常是20X20px的圖標(biāo)，在圖標(biāo)旁邊通常有文字標(biāo)題來幫助引導(dǎo)。圖標(biāo)設(shè)計(jì)是通常是采用簡(jiǎn)單的雙色搭配，不需要復(fù)雜的圖片內(nèi)容，采用簡(jiǎn)單的圖形來勾勒就可以了。(3)儀表式導(dǎo)航儀表式導(dǎo)航通常是用于統(tǒng)計(jì)信息的界面，相對(duì)于其他界面來說， 統(tǒng)計(jì)界面更需要直觀的信息與簡(jiǎn)潔的界

25、面，這樣才能讓用戶了解和分析所統(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īng)用的隱喻對(duì)象，通常用于游戲和一些比較特殊的APP中，其中充滿了大量的圖標(biāo)和按鈕。用于這種布局的圖標(biāo)是最復(fù)雜也是最多變的，我們需要根據(jù)整個(gè)APP的UI設(shè)計(jì)的氛圍來制作與之相對(duì)應(yīng)的圖標(biāo)，其中會(huì)用到各種圖標(biāo)加工方法，整個(gè)界 面的圖標(biāo)設(shè)計(jì)下來與其說是圖標(biāo)制作，倒不如說是制作一幅繪畫也不足為過。4.2.1圖標(biāo)制作中的各種效果實(shí)現(xiàn)為了配合UI的整體風(fēng)格，圖標(biāo)制作過程中往往需要用到很多的修飾

26、效果來到的制作者 的目的。無論是純圖形式圖標(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)陰影的制作通常都是使用黑白漸變的矢量矩形來疊加在圖片上來實(shí)現(xiàn)這種效果。或者使用多次復(fù)雜圖層然后將這些圖層填充為黑色，并使用圖層蒙蔽調(diào)整大小與輪廓。相對(duì)于長(zhǎng)陰影，Windows PC機(jī)上的圖標(biāo)通常是采用描邊陰影，在比較規(guī)則的圖標(biāo)上添加這種陰影可以使用Photoshop的圖層屬性中的“投影”選項(xiàng)直接添加。對(duì)于一些相對(duì)復(fù)雜的圖形，可以通過復(fù)制圖層然后對(duì)

27、圖形進(jìn)行變形調(diào)整大小和比例，再降低透明度和顏色的填充程度來實(shí)現(xiàn)陰影效果。而3D圖形則需要根據(jù)圖形的受光面來添加局部陰影，下圖中“投影”的實(shí)現(xiàn)同樣可以采用上述提到的方法來實(shí)現(xiàn)。反光圖4-1 3D圖形的陰影效果(2)質(zhì)感效果具有質(zhì)感效果的圖標(biāo)主要是用于一些按鈕上，其作用顧名思義，就是給按鈕賦予了 一種有質(zhì)量的視覺感，主要應(yīng)用于純圖形式圖標(biāo)、和圖文并存式圖標(biāo)。質(zhì)感效果的制作是通過對(duì) 圖標(biāo)的局部板塊使用斜面和浮雕效果與陰影效果配合制作出一種圖層凸起初步的效果，有了初步的質(zhì)感之后需要使用拋光效果對(duì)質(zhì)感進(jìn)一步的打磨加工。拋光效果的制作通常是用類似Photoshop中“鋼筆”工具或者“矩形”工具這類繪畫手段

28、制作需要拋光的部分，然后填充 為白色，對(duì)其進(jìn)行模糊和透明化的設(shè)置即可達(dá)到理想的效果。(3) 3D效果3D效果和質(zhì)感效果有很多共同點(diǎn)能適用于如何圖標(biāo)，但是質(zhì)感效果只需要對(duì)圖標(biāo)的一 小部分圖層進(jìn)行打磨和加工，而3D效果則把工程量擴(kuò)大了整圖層。3D效果的整體立體感不是通過斜面和浮雕效果來實(shí)現(xiàn)，而是先對(duì)底層圖層進(jìn)行復(fù)制和 填充，然后根據(jù)整個(gè)圖形的規(guī)格對(duì)底層和頂層進(jìn)行勾勒，再對(duì)勾勒出來的部分補(bǔ)充色彩，整體層次劃分完成后需要對(duì)邊緣進(jìn)行細(xì)化拋光，最后再根據(jù)受關(guān)面添加陰影效果。陰影的分布可以參考圖4-1 ,這類陰影效果同拋光效果一樣是手繪陰影部分然后采用模糊和透明的方法 到達(dá)漸變的效果。4.2.1圖標(biāo)的點(diǎn)翠修

29、飾圖標(biāo)的點(diǎn)翠修飾就是在單一的圖標(biāo)中添加一些次要的元素來修飾圖標(biāo)。單一的圖標(biāo)有時(shí)并不能吸引用戶，這是就需要通過其他元素的點(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簡(jiǎn)單的房圖標(biāo)圖4-4進(jìn)點(diǎn)翠過的圖標(biāo)圖4-3就是一個(gè)沒有經(jīng)過任何點(diǎn)翠修飾過的圖標(biāo)，它看上去只 有簡(jiǎn)單的三座房屋，沒有白云小鳥，沒有花草樹木，毫無吸引力。 類似這樣的圖標(biāo)其實(shí)擁有很大的改善空間。經(jīng)過房屋三色彩虹和綠色樹木的點(diǎn)翠修飾后，該圖標(biāo)不但突出了主要內(nèi)容圖 4-3無點(diǎn)翠的房屋圖標(biāo)房屋，而且對(duì)以前單一 的元素進(jìn)行

30、了擴(kuò)充，營(yíng)造了一種意境之美，更能博得用戶的眼球。圖4-5的郵箱圖標(biāo)也很好的運(yùn)用了云彩和信件 的搭配，不僅使“云傳輸”這種概念變得跟生 動(dòng)形象，而且表達(dá)出了該 APP的技術(shù)理念。圖4-5郵箱圖標(biāo)除了添加一些其他元素對(duì)圖標(biāo)進(jìn)行修飾外，還一種將圖標(biāo)風(fēng)格化的方法來對(duì)圖標(biāo)進(jìn)行點(diǎn)翠修飾。這類方法比較復(fù)雜，并且形式多變，但是制作出來的視覺效果非常棒，能夠體現(xiàn)出一種藝術(shù)加工的效果。常用的風(fēng)格化制作方法有將圖標(biāo)金屬化、水墨化、擬物化、寫實(shí)化等方法。圖4-6就采用了將圖標(biāo)毛線化的方法點(diǎn)翠修飾，將圖標(biāo)變得更可愛動(dòng)人。第五章總結(jié)現(xiàn)在智能手機(jī)正處于發(fā)展的鼎盛時(shí)期，手機(jī)的界面設(shè)計(jì)也逐漸成為智能手機(jī)發(fā)展過程中的一個(gè)重要事項(xiàng)。而圖標(biāo)作為手機(jī)界面中的靈魂，它在手機(jī)界面中起著不可或缺的作用，圖標(biāo)比文字更具代表性，更能突出整個(gè)界面的用意，使設(shè)計(jì)者和用戶之間達(dá)成共鳴。智能手機(jī)圖標(biāo)設(shè)計(jì)風(fēng)格的用意在于使APP能夠方便的展示出它的功能與作用，并且通過統(tǒng)一的圖標(biāo)風(fēng)格來提升 APP