第一篇：智能手機(jī)軟件圖標(biāo)設(shè)計(jì)風(fēng)格研究(第一章_1.1_1.2)

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

第一章 緒 論

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ī)在人類日常生活的重要地位，人們已經(jīng)對(duì)智能手機(jī)依賴成癮。所以我們有必要對(duì)其的發(fā)展進(jìn)行研究試圖從中挖掘出可用的價(jià)值。

具統(tǒng)計(jì)，在2015年中國的智能手機(jī)普及率已經(jīng)高達(dá)50%，這意味著中國的智能手機(jī)市場(chǎng)已經(jīng)發(fā)展的很壯大了，我們完全可以從中撈一桶金。而APP，application 的簡(jiǎn)稱，作為智能手機(jī)的靈魂，其發(fā)展可說是關(guān)系到智能手機(jī)的存亡。APP 作為新媒體的產(chǎn)物，在人機(jī)交互方式上做出了革命性的創(chuàng)新，同時(shí)也開創(chuàng)了智能機(jī)的新紀(jì)元。如果一臺(tái)智能手機(jī)沒有APP那么它就和一臺(tái)普通的移動(dòng)電話機(jī)沒有任何的區(qū)別，智能手機(jī)之所以能夠在當(dāng)今有如此大的影響力必須功于智能手機(jī)上各式各樣APP的出現(xiàn)。硅谷著名工程師 Andreessen 曾說，軟件 正在吞噬著世界，而現(xiàn)在看來，APP 則正在吞噬著軟件。因此我們當(dāng)今的智能手機(jī)時(shí)代可以說是APP的時(shí)代。

1.2圖標(biāo)的重要意義

如果說APP是智能手機(jī)的靈魂，那么圖標(biāo)就猶如APP的精氣神。所謂“未見其人先聞其聲”，圖標(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)研究的問題。如何在眾多的APP中使自己成為關(guān)注的焦點(diǎn)，圖標(biāo)設(shè)計(jì)的好壞就是取得成功的重要因素。視覺效果優(yōu)秀，色彩搭配自然舒適，圖形設(shè)計(jì)簡(jiǎn)單符合邏輯的圖標(biāo)往往就能夠在第一時(shí)間博得用戶的眼球。同樣這些因素也是本文將重點(diǎn)講述的一個(gè)重要問題。

1.3圖標(biāo)的產(chǎn)生和發(fā)展過程

圖標(biāo)的產(chǎn)生離不開計(jì)算機(jī)系統(tǒng)的發(fā)展，這里我們將采用計(jì)算機(jī)的圖形界面系統(tǒng)發(fā)展過程 和手機(jī)的圖形界面系統(tǒng)發(fā)展過程相結(jié)合的方式來講述最全面的圖標(biāo)的產(chǎn)生和發(fā)展過程。（1）PC機(jī)的圖形界面系統(tǒng)發(fā)展歷史

1981年世界上第一個(gè)圖形界面系統(tǒng)Xerox Alto出現(xiàn)，從此，開啟了圖形界面的新紀(jì)元，圖1 Xerox Alto系統(tǒng)界面

從圖1中我們可以發(fā)現(xiàn)，最初的圖形界面只是簡(jiǎn)簡(jiǎn)單單使用矩形框?qū)粹o包圍住，雖然這樣能夠直接表達(dá)出每個(gè)按鈕的意義，但是相比圖標(biāo)按鈕來說，圖標(biāo)按鈕不僅能使界面更加美觀使人感覺舒適而且能使不同文化不同語言的用戶對(duì)不同的按鈕達(dá)成共識(shí)。

直到1989年 NeXTSTEP 1.0 GUI才出現(xiàn)了圖標(biāo)圖形界面的雛形，該GUI 的圖標(biāo)很大，48×48像素，包含更多顏色，一開始是單色的，從1.0開始支持彩色，下圖中已經(jīng)可以看到現(xiàn)代 GUI 的影子。

圖2 NeXTSTEP 1.0 GUI

隨著圖形界面給用戶來的的良好體驗(yàn)，在之后的10多年中圖形系統(tǒng)以每年兩代的速度進(jìn)行的更新，越來越多的圖形系統(tǒng)相繼出現(xiàn)，系統(tǒng)也越來越完善和統(tǒng)一。包括：Windows 3.1引入了TrueType 字體，第一次使 Windows 成為可以用于印刷的系統(tǒng)；Amiga Workbench有了很多的改進(jìn)，該版 GUI 包含很多改進(jìn)，桌面可以垂直分割成不同分辨率和顏色深度；Mac OS version 7.0 是第一個(gè)支持彩色Mac OS GUI，還有陰影效果；Windows 95這是第一個(gè)在每個(gè)窗口上加上了關(guān)閉按鈕的GUI。

圖3 Windows 3.1 圖4 Amiga Workbench 圖5 Mac OS version 7.0

盡管經(jīng)過了10多年的發(fā)展，當(dāng)時(shí)的圖形界面還是處于一種像素風(fēng)格，和當(dāng)今的主流系統(tǒng)相差甚遠(yuǎn)。直到2001年蘋果和微軟公司相繼推出Mac OS X和Windows XP 系統(tǒng)才奠定了當(dāng)代圖形界面系統(tǒng)的主流，引導(dǎo)了圖標(biāo)的發(fā)展趨勢(shì)。Mac OS X。默認(rèn)的 32×32, 48×48 被更大的 128×128平滑半透明圖標(biāo)代替。Windows XP用戶可以改變整個(gè) GUI 的外觀與風(fēng)格，默認(rèn)圖標(biāo)為 48×48，支持上百萬顏色。

（2）手機(jī)圖形界面的發(fā)展

正如早期的計(jì)算機(jī)系統(tǒng)一樣，早期的手機(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)。

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

相比PC機(jī)的在1989年就出現(xiàn)了彩色界面，手機(jī)的彩屏系統(tǒng)在2000年才問世。2000年1月，日本最大的電信運(yùn)營商N(yùn)TT DoCoMo推出了第一支正式上市的彩屏手機(jī)D502 i，實(shí)現(xiàn)了人們“彩色的夢(mèng)”?？上У氖牵捎谌毡颈就了捎玫木W(wǎng)絡(luò)和中國國內(nèi)的GSM、CDMA網(wǎng)絡(luò)技術(shù)都不相同，所以基本上這類手機(jī)在非日本地區(qū)都不可以使用。

圖7 D502 i 手機(jī)界面

在此之后，瑞典的愛立(Ericsson)公司發(fā)布了該公司第一款GSM網(wǎng)絡(luò)彩屏手機(jī)--T68，同時(shí)日本的三菱(Mitsubishi)公司也發(fā)布了彩屏手機(jī)--Trium E彩手機(jī)，NOKIA也宣稱推出了7210彩屏版本。但這些都不是第一部彩色液晶顯示屏的GSM手機(jī)。真正第一個(gè)推出彩屏GSM手機(jī)的是臺(tái)灣一家較為知名的手機(jī)廠商--英華達(dá)(OKWAP)，它在2000年9月推出的OKWAP i108，才是真正世界上第一款GSM網(wǎng)絡(luò)的彩色液晶屏手機(jī)。而隨著彩屏的到來，其延生物如彩信業(yè)務(wù)及拍照功能，開始了飛躍發(fā)展。

圖8 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)至極。直到2004年，各大廠家開始把高端液晶技術(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ì)膩滑潤，更有質(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ì)

2.1 圖標(biāo)設(shè)計(jì)的作用

參考文獻(xiàn)：http://product.pconline.com.cn/itbk/top/1202/2665845.html http://mobile.163.com/10/0701/08/6AGBRK8J00112K88.html

http://it.sohu.com/41/56/article15745641.shtml http://

第二篇：PS 圖標(biāo)設(shè)計(jì)教程之打造碳纖維風(fēng)格圖標(biāo)

這次PS教程教大家做一個(gè)自定義的碳纖維圖標(biāo)，做成彩色的或許更炫。主要通過簡(jiǎn)單的圖層變換和樣式的設(shè)置即可完成。大家可以邊看教程邊自己動(dòng)手做一下。

最終效果圖

1>大家下午好，這次教程教大家做一個(gè)自定義的碳纖維的圖標(biāo)。首先創(chuàng)建一個(gè)600X200 的文檔，選擇圓角矩形工具，按照下圖設(shè)置上面的工具欄選項(xiàng)。

圖01

2>在畫布上畫一個(gè)圓角矩形，如下：

圖02

3>選擇鋼筆工具，然后在圓角矩形里右擊，選擇填充路徑，這里會(huì)彈出一個(gè)窗口，提 示你選擇顏色，顏色可以任選，沒有關(guān)系，因?yàn)楹竺嫖覀儠?huì)對(duì)顏色進(jìn)行修改，然后右 擊，選擇刪除路徑。

圖03

4>現(xiàn)在你應(yīng)該有一個(gè)圓角的矩形圖層，現(xiàn)在設(shè)置圖層樣式，如下：

圖04

圖05

圖06

圖07

5>設(shè)置完之后，你應(yīng)該得到下面的結(jié)果，這里有個(gè)小技巧，你可以在設(shè)置好的圖層樣 式里選擇保存，以后就可以直接使用這個(gè)樣式了。

圖08

6>下一步，你要自己創(chuàng)建一個(gè)自定義的填充樣式，新建一個(gè)透明背景的4X4文檔，放大 到1600倍，然后如下填充圖片

圖09

7>創(chuàng)建好之后，點(diǎn)擊“編輯>定義圖案”，保存自定義的填充圖案。然后回到第一個(gè)文 檔里，按住CTRL在圖層的縮略圖上單擊，創(chuàng)建選區(qū)。新創(chuàng)建一個(gè)圖層，取名為“樣式 ”。選擇油漆桶工具，填充方式里，選擇圖案，圖案選擇我們剛才創(chuàng)建的那個(gè)圖案。

圖10

8>點(diǎn)擊選區(qū)填充。給“樣式”圖層添加一個(gè)圖層蒙版，然后按D，復(fù)位前景色和背景色，按X切換前景背景色，現(xiàn)在漸變工具對(duì)稱漸變，如下圖，從點(diǎn)1拉漸變到點(diǎn)2。

圖11

9>右擊“樣式”圖層，選擇應(yīng)用圖層蒙版，然后再添加一個(gè)圖層蒙版，這次選擇線性 漸變，按X切換前景背景色，如下拉一個(gè)漸變：

圖12

10>再次應(yīng)用圖層蒙版，結(jié)果如下：

圖13

11>使用鋼筆工具，創(chuàng)建如下路徑：

圖14

12>在新層里填充選區(qū)為白色，透明度設(shè)為5%。

圖15

13>選擇矩形工具，在圖標(biāo)下面畫一個(gè)矩形。

圖16 14>如下給矩形圖層添加圖層樣式：

圖17

圖18

15>使用多邊形索討工具，如下給在矩形圖層下面添加一個(gè)邊角選區(qū)。

圖19

16>用稍微亮點(diǎn)的顏色，填充邊角，同樣在右邊也做一個(gè)對(duì)稱的邊角。

圖20

17>在矩形條上加上你的Label，然后在空白出添加你的圖標(biāo)，收工！

圖21

第三篇：圖標(biāo)設(shè)計(jì)心得

東莞生活網(wǎng)： www.hidg.net

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

在這里分享下我對(duì)于圖標(biāo)設(shè)計(jì)的一些心得體會(huì)。說的不好，還請(qǐng)各位看客包涵指正。圖標(biāo)在我們?nèi)粘Ｉ钪斜?廣泛應(yīng)用，軟硬件、網(wǎng)頁、社交公共場(chǎng)合無所不在。廣義來說，圖標(biāo)就是具有指代意義的圖形符號(hào)，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。狹義來說，就 是我們所熟悉的在計(jì)算機(jī)程序方面的應(yīng)用。包括：程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。如今圖標(biāo)被廣泛的應(yīng)用，其價(jià)值也是顯而易 見的。一套好的圖標(biāo)能夠?yàn)橛脩糁庇^傳達(dá)所描述的物體，減輕用戶的認(rèn)知負(fù)擔(dān)，特別是一些抽象的功能和意義。同時(shí)增添圖標(biāo)的精美度不僅能提升整個(gè)界面的吸引力 和觀賞性，還能使產(chǎn)品與用戶產(chǎn)生共鳴。

下面以制作電話本和短消息這兩個(gè)圖標(biāo)為例。

設(shè)定風(fēng)格。通觀整個(gè)圖標(biāo)設(shè)計(jì)，設(shè)定風(fēng)格是基礎(chǔ)，亦是非常重要的一步。需要對(duì)整套圖標(biāo)進(jìn)行周全的構(gòu)想，因?yàn)檫@一步為圖標(biāo)設(shè)定了一個(gè)方向，之后圖標(biāo)設(shè)計(jì)的造型，上色的深入展開都要以此為基礎(chǔ)。在這里我設(shè)定的是復(fù)古做舊的風(fēng)格。

繪制草圖。這一步驟主要是設(shè)計(jì)圖標(biāo)的造型。造型在圖標(biāo)設(shè)計(jì)中有著決定性的影響，他直觀的給用戶展現(xiàn)其所代表的含義。而草圖是最直觀，最快速展現(xiàn)設(shè)計(jì) 構(gòu)思的一種方法。此時(shí)我們可以通過頭腦風(fēng)暴列舉出一些能讓用戶一目了然，又貼合電話本和短消息含義的元素，同時(shí)列舉的元素又要符合復(fù)古做舊的風(fēng)格。因此，我選取做舊的通訊錄來表示電話本，選取羽毛筆和信紙來表示短消息。在繪制草圖時(shí)，要注意圖標(biāo)造型的統(tǒng)一，方向的一致性，使圖標(biāo)有充分的辨識(shí)度。其次要控制 單個(gè)圖標(biāo)元素的數(shù)量與其他圖標(biāo)相協(xié)調(diào)，用最少的元素來表達(dá)圖標(biāo)的含義。不然過多的元素不僅會(huì)使圖標(biāo)臃腫不堪，更會(huì)使圖標(biāo)的含義模糊不清，難以琢磨。

東莞汽車頻道：auto.hidg.net

東莞生活網(wǎng)： www.hidg.net 上色刻畫。在確定造型之后，就需要對(duì)圖標(biāo)上色以及深入刻畫。

東莞汽車頻道：auto.hidg.net

東莞生活網(wǎng)： www.hidg.net

東莞汽車頻道：auto.hidg.net

東莞生活網(wǎng)： www.hidg.net

東莞汽車頻道：auto.hidg.net

東莞生活網(wǎng)： www.hidg.net

總結(jié)

一，設(shè)計(jì)一套完整的圖標(biāo)要確保其風(fēng)格的一致性。在造型，透視，大小，色彩，效果處理等各個(gè)方面做到統(tǒng)一，以保證每個(gè)圖標(biāo)都與其風(fēng)格相契合。其次，控制圖標(biāo)元素的數(shù)量，對(duì)一些不必要的元素要果斷去除。圖標(biāo)應(yīng)該是一種能使用戶輕

東莞汽車頻道：auto.hidg.net

東莞生活網(wǎng)： www.hidg.net 松識(shí)別的圖形語言，而不是成為用戶閱讀的負(fù)擔(dān)。更要充分展現(xiàn)各個(gè) 圖標(biāo)間的差異程度，提升圖標(biāo)自身的辨識(shí)度，從而幫助用戶理解閱讀。再則還要考慮這套圖標(biāo)所應(yīng)用的環(huán)境。不同國度，不同社會(huì)環(huán)境，不同文化傳統(tǒng)對(duì)圖形也有不 同的認(rèn)識(shí)理解。同時(shí)也要考慮到人們的情感因素，避免使用敏感圖形。所以在設(shè)計(jì)開始就應(yīng)考慮周詳，謹(jǐn)慎使用。最后，畫圖標(biāo)要有足夠的耐心，對(duì)于細(xì)節(jié)要不怕繁瑣,細(xì)心揣摩。（詳細(xì)咨詢：東莞論壇——汽車頻道）

東莞汽車頻道：auto.hidg.net

第四篇：圖標(biāo)設(shè)計(jì)心得

圖標(biāo)設(shè)計(jì)心得

December 22, 2010adali 圖標(biāo)在生活中運(yùn)用是顯而可見的。例如：男女廁所標(biāo)志和各種交通標(biāo)志等。在計(jì)算機(jī)系統(tǒng)或軟件方面的應(yīng)用也是很廣泛。例如：程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。下面的例子更形象的說明這個(gè)問題。

(圖片來源：九銘)外國人A與中國人B，兩人在語言上存在差異對(duì)文字的認(rèn)識(shí)是不同的，用圖標(biāo)來表示，會(huì)縮短語言描述的距離。所以圖標(biāo)更具有快捷傳達(dá)信息、便于記憶的特性。那么圖標(biāo)被廣泛使用的時(shí)候，什么樣的圖標(biāo)才是好圖標(biāo)呢？好圖標(biāo)從兩個(gè)角度去認(rèn)識(shí)：辨識(shí)度與精致度。

辨識(shí)度：圖標(biāo)能夠直觀的表現(xiàn)要描述的物體。精致度：在精美的頁面或者系統(tǒng)界面上，精致的圖標(biāo)能提升整個(gè)頁面的最佳視覺。那么怎么樣才能做出一套好的圖標(biāo)？在圖標(biāo)設(shè)計(jì)過程中需要注意哪些問題？ 在《圖標(biāo)設(shè)計(jì)語言》中作者Yegor Gilyov(來源站點(diǎn)Turbo Milk)曾提到 “如果你需要畫幾個(gè)圖標(biāo)，你需要整體考慮這個(gè)站點(diǎn)所有圖標(biāo)，然后再開始使用軟件繪制?！比绻愕膇con全都是粗糙模糊的造型或拙劣的漸變色，那么這個(gè)icon很失敗，不能當(dāng)作是“風(fēng)格的問題”來了事。這樣的icon不僅僅會(huì)毀掉整個(gè)頁面的美觀，更讓被描述的文字降低了被查看的欲望，對(duì)你的用戶來使用或閱讀它是一種極大的痛苦。Icon的細(xì)節(jié)包含對(duì)顏色的使用，對(duì)造型的創(chuàng)新，對(duì)質(zhì)感的體現(xiàn)。Icon的設(shè)計(jì)步驟

我認(rèn)為icon設(shè)計(jì)遵循上面的一個(gè)規(guī)則，在做icon的前提要先構(gòu)思好整個(gè)icon的風(fēng)格，有了構(gòu)思可以開始造型設(shè)計(jì)接著就是上色，然后對(duì)整體的icon進(jìn)行細(xì)節(jié)修改。

Icon的要點(diǎn)從學(xué)會(huì)批評(píng)別人開始

曾經(jīng)有人說過：“批評(píng)別人的作品比自己制作一個(gè)優(yōu)秀的作品要容易得多。但如果使用系統(tǒng)的方式去批判，這才是個(gè)成熟的分析！”那么怎么學(xué)會(huì)去批判呢？下面來分享一些批判后總結(jié)的例子。

（圖片來源iconfans）上面一些圖標(biāo)看起來很像，這讓人很難分辨出哪個(gè)是哪個(gè)。尤其小圖標(biāo)的時(shí)候辨識(shí)性差了。如果你不注意說明，你會(huì)很容易把這些圖標(biāo)混在一起。圖標(biāo)還是要有差異性，在保全風(fēng)格統(tǒng)一的前提下要有很好的識(shí)別性，可以在顏色上或者造型上做差異的改變。

(圖片來源：九銘)圖標(biāo)應(yīng)該是輕松被識(shí)別的，構(gòu)建它的元素要越少越好。而上面的插畫和圖形明顯的告訴我們圖標(biāo)的相關(guān)性不該是復(fù)雜的，可以省略掉相同的對(duì)象，凸顯出重要的信息。

上面圖片形象的說明了圖標(biāo)像素邊沿化的問題，左邊的圖標(biāo)比較模糊不清，右邊的比較清晰。

在做icon時(shí)很容易出現(xiàn)一些常見的毛邊，導(dǎo)致像素過渡化，最后圓角不柔和。怎么樣處理不柔和的圓角？

在由大icon到小icon的過程中你要重視一些細(xì)節(jié)的處理，對(duì)于這個(gè)我創(chuàng)了一句口訣：去多穩(wěn)造型，邊沿移到位。

去多穩(wěn)造型：大icon到小icon的過程是由細(xì)節(jié)的減少開始變化，大icon比較注重質(zhì)感和光澤等，小icon除了保證質(zhì)感還要清晰可見。在做16像素icon時(shí)可以減少一些必要的元素用像素點(diǎn)去代替，去掉多余的陰影與高光。

邊沿移到位：小icon的邊緣移位主要靠移動(dòng)像素點(diǎn)來實(shí)現(xiàn)，或者增加像素點(diǎn)。

經(jīng)過處理，上面的圖標(biāo)已經(jīng)沒有了原來的鋸齒，有的是柔和的圓角。

當(dāng)然每個(gè)設(shè)計(jì)師做icon的習(xí)慣都是不一樣的，這只是我做icon時(shí)的一些心得。

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

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

與制作技巧研究

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

（韶關(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 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ā)展，越來越多的人開始重視手機(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è)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年中國的智能手機(jī)普及率已經(jīng)高達(dá)50%，而APP（application）作為新媒體的產(chǎn)物，在人機(jī)交互方式上做出了革命性的創(chuàng)新，同時(shí)也開創(chuàng)了智能機(jī)的新紀(jì)元。智能手機(jī)之所以能夠在當(dāng)今有如此大的影響力必須功于智能手機(jī)上各式各樣APP的出現(xiàn)，硅谷著名工程師 Andreessen 曾說，軟件正在吞噬著世界，而現(xiàn)在看來，APP 則正在吞噬著軟件。因此我們當(dāng)今的智能手機(jī)時(shí)代可以說是APP的時(shí)代。[13] 1.2圖標(biāo)的重要意義

所謂“未見其人先聞其聲”，圖標(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)研究的問題。如何在眾多的APP中使自己成為關(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)在2000年才問世。

圖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ī)。而隨著彩屏的到來，其延生物如彩信業(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)至極。直到2004年，各大廠家開始把高端液晶技術(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ì)膩滑潤，更有質(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ì)更符合標(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]

圖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ù)不同的屏幕分辨率來調(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)涵而又不失美感的水平。因此在設(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)重的問題，那就是APP在面對(duì)不同的地域不同的文化的客戶那就應(yīng)該采用不同的圖標(biāo)，這不得不說是一個(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ì)純文字式來說它所表達(dá)的是一種相對(duì)抽象的信息，沒有文字那樣直接明了，但是對(duì)于大眾化的APP來說，純圖形式圖標(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è)界面的布局和配色來設(shè)計(jì)出與之相搭配的圖標(biāo)。就像裝修新房子一樣，新房裝修完后設(shè)計(jì)師會(huì)根據(jù)房子的構(gòu)造和設(shè)計(jì)風(fēng)格來配置相搭調(diào)的家具和小飾件。圖標(biāo)就類似于整個(gè)APP中的小飾件，運(yùn)用好這些小飾件就能營造出一種讓用戶掌控自如的感覺。如果一個(gè)APP的開始界面和功能界面形成很強(qiáng)烈的反差，那就會(huì)給人一種很突兀的感覺，這將會(huì)使用戶對(duì)該APP的體驗(yàn)大打折扣。所以風(fēng)格統(tǒng)一的目的就保證界面處于用戶的掌控之中，讓用戶自己感受主動(dòng)權(quán)。

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

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

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

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

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

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

雖然說現(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ù)修飾還有一種比較特殊的方式，那就是才用動(dòng)態(tài)圖來作為圖標(biāo)，動(dòng)態(tài)圖相對(duì)于以往的靜態(tài)圖來說可以更加容易吸引用戶的注意力，但是如果大量的使用動(dòng)態(tài)圖則會(huì)照成一種非?；靵y的場(chǎng)景，同時(shí)也會(huì)導(dǎo)致手機(jī)的負(fù)載過大，從而影響APP的運(yùn)行效率。所以一般情況下只需要在加載、等待、刷新等界面中使用動(dòng)態(tài)圖標(biāo)。實(shí)際上，有研究表明，普通用戶能夠忍受的最長的加載頁面的時(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圖標(biāo)設(shè)計(jì)的視覺重要性

所謂的視覺重要性用網(wǎng)上調(diào)侃的一句話來說“現(xiàn)在就是個(gè)看臉的世界?！鄙鲜鏊岬降乃性瓌t都是為了進(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)造的階段就將視覺設(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ì)使用白色作為填充色，圖標(biāo)同樣也是如此。

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

紅色在可見光譜中光波最長，所以是最為醒目的顏色，給人視覺上一種迫近感和擴(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)色還可以使人感覺時(shí)間過得很快。藍(lán)色適合搭配的顏色是白色、粉藍(lán)色、醬紅色、金色、銀色、橄欖綠、橙色、黃色。

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

黑白和三大原色是圖標(biāo)設(shè)計(jì)的最基本的顏色，從UI設(shè)計(jì)到圖標(biāo)設(shè)計(jì)都離不開這五種色彩，所以熟悉它們的色彩特性和搭配原則能夠使圖標(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ì)的過程中我們要針對(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×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)過復(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)潔的界面，這樣才能讓用戶了解和分析所統(tǒng)計(jì)的信息。這類布局所才用的圖標(biāo)通常是長矩形的小條格或者是不同規(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)制作過程中往往需要用到很多的修飾效果來到的制作者的目的。無論是純圖形式圖標(biāo)、純文字式圖標(biāo)還是圖文并存式圖標(biāo)，使用各種圖標(biāo)修飾效果都能進(jìn)一步提升圖標(biāo)的美感。（1）陰影效果 陰影效果的作用是突顯一個(gè)元素，大多數(shù)圖標(biāo)都會(huì)擁有這種修飾效果，即便是扁平化的設(shè)計(jì)也一部分圖標(biāo)采用了長陰影效果。長陰影的制作通常都是使用黑白漸變的矢量矩形來疊加在圖片上來實(shí)現(xiàn)這種效果?；蛘呤褂枚啻螐?fù)雜圖層然后將這些圖層填充為黑色，并使用圖層蒙蔽調(diào)整大小與輪廓。相對(duì)于長陰影，Windows PC機(jī)上的圖標(biāo)通常是采用描邊陰影，在比較規(guī)則的圖標(biāo)上添加這種陰影可以使用Photoshop的圖層屬性中的“投影”選項(xiàng)直接添加。對(duì)于一些相對(duì)復(fù)雜的圖形，可以通過復(fù)制圖層然后對(duì)圖形進(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中“鋼筆”工具或者“矩形”工具這類繪畫手段制作需要拋光的部分，然后填充為白色，對(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 3D效果大致制作過程

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

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

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

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

圖4-4進(jìn)點(diǎn)翠過的圖標(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)格化的方法來對(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)人。

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

第五章 總結(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整體的美感。本文通過研究得出目前的APP圖標(biāo)設(shè)計(jì)風(fēng)格趨向于簡(jiǎn)約化，無論是在圖標(biāo)的色彩搭配上還是布局對(duì)圖標(biāo)設(shè)計(jì)的限制都導(dǎo)致了現(xiàn)在圖標(biāo)設(shè)計(jì)的方向變成力求于精簡(jiǎn)與細(xì)致。即便是制作簡(jiǎn)單的圖標(biāo)，通過本文對(duì)圖標(biāo)的點(diǎn)翠修飾和圖標(biāo)的加工效果的研究得出，如果設(shè)計(jì)能采用獨(dú)特的制作方式與加工手段也能使圖標(biāo)變得更加具有吸引力，使簡(jiǎn)單的圖標(biāo)具有了生命力。

關(guān)于圖標(biāo)的風(fēng)格設(shè)計(jì)無論是筆者還是其他研究者都已經(jīng)進(jìn)行了比較透徹的研究，總的來說就是圖標(biāo)要具有一定的美感并且能夠表達(dá)出制作出這個(gè)圖標(biāo)的用意。而關(guān)于圖標(biāo)制作這方面，雖然筆者用獨(dú)特的見解講述了不同圖標(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 著，牛化成譯.貼心設(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)用_朱曉陽[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