移動(dòng)終端App圖標(biāo)設(shè)計(jì)規(guī)范與技巧研究

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

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

移動(dòng)終端App圖標(biāo)設(shè)計(jì)規(guī)范與技巧研究

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

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

以移動(dòng)終端App圖標(biāo)為研究對(duì)象，探討移動(dòng)終端圖形化用戶界面的發(fā)展歷史和ios、Android兩大主流移動(dòng)終端系統(tǒng)的常規(guī)圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)，梳理了移動(dòng)終端的不同的設(shè)計(jì)原則和視覺(jué)配色原理.根據(jù)當(dāng)前扁平式和立體式的發(fā)展趨勢(shì)，提出了圖標(biāo)設(shè)計(jì)過(guò)程中一些設(shè)計(jì)規(guī)范與技巧.通過(guò)對(duì)優(yōu)秀實(shí)例的分析，總結(jié)出切實(shí)可行的設(shè)計(jì)方法與技巧.

智能手機(jī)；圖標(biāo)風(fēng)格；圖標(biāo)設(shè)計(jì)；移動(dòng)終端

隨著互聯(lián)網(wǎng)的飛速發(fā)展及平板電腦及智能手機(jī)等移動(dòng)終端的大量普及，App應(yīng)用程序作為移動(dòng)終端系統(tǒng)的重要組成部分已經(jīng)和用戶的生活緊密結(jié)合在一起了.與此同時(shí)，越來(lái)越多的人開始重視App的UI界面與圖標(biāo)設(shè)計(jì)，但大量的App圖標(biāo)的視覺(jué)設(shè)計(jì)存在著識(shí)別性不高、表意性不強(qiáng)等問(wèn)題，設(shè)計(jì)師們往往沒(méi)有放開視野，只是局部的關(guān)注圖標(biāo)本身的設(shè)計(jì)方法，沒(méi)有把圖標(biāo)設(shè)計(jì)當(dāng)做一個(gè)體系來(lái)研究.本文采用從整體的角度研究移動(dòng)終端App圖標(biāo)風(fēng)格設(shè)計(jì)的規(guī)范并嘗試挖掘出統(tǒng)一風(fēng)格的圖標(biāo)制作技巧與方法.

1　概述

1.1研究背景

在2015年中國(guó)的智能手機(jī)普及率已經(jīng)超過(guò)50%，而App作為新媒體的產(chǎn)物，在人機(jī)交互方式上做出了革命性的創(chuàng)新，同時(shí)也開創(chuàng)了智能機(jī)的新紀(jì)元.智能手機(jī)能夠在當(dāng)今有如此大的影響力必須歸功于智能手機(jī)上各式各樣App的出現(xiàn).

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

圖標(biāo)體現(xiàn)的是App表達(dá)的核心內(nèi)容和外在體現(xiàn)，是用戶在使用前了解App的一個(gè)重要信息.讓一個(gè)圖標(biāo)能夠既具備美感富有創(chuàng)造性又具有明確的可識(shí)別性，能準(zhǔn)確的表達(dá)出制作者的主旨，是研制App圖標(biāo)設(shè)計(jì)的關(guān)鍵之處.

2　App圖標(biāo)的設(shè)計(jì)規(guī)范

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

圖標(biāo)應(yīng)具備簡(jiǎn)單、美觀的要求，在指引用戶的同時(shí)達(dá)到修飾、美化整個(gè)App界面的作用.按當(dāng)前App市場(chǎng)最多用戶下載量的App的圖標(biāo)來(lái)看，在圖標(biāo)設(shè)計(jì)時(shí)通常需要遵循幾個(gè)設(shè)計(jì)原則［1-4］.

2.1.1表意明確原則

要求讓用戶看一眼圖標(biāo)就知道App大概具有哪些功能，表意明確的圖標(biāo)能夠大大的減少用戶適應(yīng)App的時(shí)間，同時(shí)也能省去繁瑣的使用向?qū)?圖1就是典型的純文字式圖標(biāo).

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

圖2　純圖形式圖標(biāo)

圖3　圖文并存式圖標(biāo)

但是純文字式圖標(biāo)存在一個(gè)很嚴(yán)重的問(wèn)題，因各國(guó)和地區(qū)的文字不同，那就需要在面對(duì)不同國(guó)家和地區(qū)采用不同的圖標(biāo)設(shè)計(jì).純文字式圖標(biāo)一般適用于面向單一國(guó)家或地區(qū)的App.

純圖形式相對(duì)純文字式來(lái)說(shuō)它所表達(dá)的是一種相對(duì)抽象的信息，沒(méi)有文字那樣直接明了，但是對(duì)于大眾化的App來(lái)說(shuō)，純圖形式圖標(biāo)更能使用戶達(dá)到共鳴，且無(wú)需針對(duì)不同地區(qū)設(shè)計(jì)不同的圖標(biāo)，所以現(xiàn)在大部分的App的內(nèi)部執(zhí)行界面都是采用純圖形式圖標(biāo)（見圖2）.圖文并存式要求圖形與文字的完美結(jié)合，既能用文字表達(dá)出App明確的含義，又能通過(guò)圖形使事物與文字之間形成良好的映射，圖文并存式圖標(biāo)雖然也有助于不同地域的用戶理解App，但是其效果遠(yuǎn)不如純圖形式圖標(biāo)，所以現(xiàn)在大部分的App的內(nèi)部執(zhí)行界面都是采用純圖形式圖標(biāo)，而圖文并存式和純文字式更傾向于作為APP的Icon（見圖3）［5］.

2.1.2風(fēng)格統(tǒng)一原則

風(fēng)格統(tǒng)一原則就是要求圖標(biāo)的設(shè)計(jì)要根據(jù)App界面的布局和配色來(lái)設(shè)計(jì)與之相搭配的圖標(biāo).如果一個(gè)App的開始界面和功能界面形成很強(qiáng)烈的反差，會(huì)給人一種很突兀的感覺(jué)，將會(huì)使用戶對(duì)該App的體驗(yàn)大打折扣.所以風(fēng)格統(tǒng)一的目的就保證界面處于用戶的掌控之中，讓用戶感受到主動(dòng)權(quán).如圖4中的兩個(gè)播放按鈕取色就是界面第二欄音頻的顏色，其他按鈕的風(fēng)格也是灰黑色ASB塑料感，具有非常強(qiáng)烈的真實(shí)感.圖4中的酒瓶圖標(biāo)和cellar圖標(biāo)都完美的營(yíng)造出了一種收藏庫(kù)的感覺(jué).

圖4　Cross DJ應(yīng)用

圖5　Awesom e Note應(yīng)用(每個(gè)瓶子都是圖標(biāo))

對(duì)于功能復(fù)雜且多的App來(lái)說(shuō)，因無(wú)法在圖標(biāo)設(shè)計(jì)中體現(xiàn)全部功能信息，當(dāng)前設(shè)計(jì)中更傾向于使用簡(jiǎn)約的圖標(biāo)，來(lái)減少用戶的視覺(jué)盲目感，減緩眼睛的疲勞感.例如各種購(gòu)物App.繼iPhone5之后的蘋果ios系統(tǒng)圖標(biāo)都開始采用扁平的設(shè)計(jì)風(fēng)格，即拋棄部分藝術(shù)修飾，如陰影、透視、紋理、漸變等能做出3D效果的元素一概不用（見圖6）.

圖6　ios圖標(biāo)風(fēng)格的變化

2.1.3藝術(shù)修飾原則

藝術(shù)修飾原則就對(duì)原有的圖形進(jìn)行加工美化，典型的就是Rich Design（豐富設(shè)計(jì)風(fēng)格）.即通過(guò)添加各種設(shè)計(jì)裝飾，比如下落陰影、梯度等，讓整體設(shè)計(jì)顯得很豐富.

藝術(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).采用動(dòng)態(tài)圖能讓頁(yè)面在保持加載的過(guò)程中充滿了趣味性，牢牢的吸引住用戶的注意力.

2.2圖標(biāo)設(shè)計(jì)的視覺(jué)色彩搭配原理

色彩搭配是統(tǒng)一界面風(fēng)格的重要部分，不顧風(fēng)格要求和用戶感受的配色只會(huì)給App帶來(lái)負(fù)面影響.

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

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

紅色在可見光譜中光波最長(zhǎng)，所以是最為醒目的顏色，給人視覺(jué)上一種迫近感和擴(kuò)張感，容易引發(fā)興奮、激動(dòng)、緊張的情緒.在大多數(shù)情況下紅色圖標(biāo)都作為一種警告作用，提示用戶這樣做有一定的風(fēng)險(xiǎ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ì)都離不開這五種色彩，熟悉它們的色彩特性和搭配原則能夠使圖標(biāo)設(shè)計(jì)更突出App所表達(dá)的主題.

2.3藝術(shù)修飾與視覺(jué)色彩搭配設(shè)計(jì)案例

炫麗的背景是該UI的一個(gè)特點(diǎn)，為了突出背景各個(gè)按鈕都是以最簡(jiǎn)單的形式展現(xiàn)出來(lái)，所有按鈕的文字都選擇了百搭色白色，目的是為了在能夠讓用戶方便識(shí)別各個(gè)按鈕為前提最最大程度不影響UI的美觀.圖7中的WiFi連接提示圖標(biāo)采用了和背景一樣的色彩漸變，力求整個(gè)UI界面能夠還原背景圖，使背景與功能界面完美結(jié)合.

圖7　星空UI 01

圖8　3D圖形的陰影效果

3　App圖標(biāo)設(shè)計(jì)的常用效果實(shí)現(xiàn)技巧

為了配合App UI的整體風(fēng)格，圖標(biāo)設(shè)計(jì)過(guò)程中往往需要用到很多的效果來(lái)修飾圖標(biāo).無(wú)論是純圖形式圖標(biāo)、純文字式圖標(biāo)還是圖文并存式圖標(biāo)，都可以使用以下圖標(biāo)修飾效果來(lái)進(jìn)一步提升圖標(biāo)的美感.

3.1陰影效果

陰影效果的作用是突顯一個(gè)元素，大多數(shù)圖標(biāo)都會(huì)擁有這種修飾效果，即便是扁平化的設(shè)計(jì)也有相當(dāng)一部分圖標(biāo)采用了長(zhǎng)陰影效果.長(zhǎng)陰影的制作通常都是使用黑白漸變的矢量矩形來(lái)疊加在圖片上來(lái)實(shí)現(xiàn)這種效果.使用多次復(fù)雜圖層然后將這些圖層填充為黑色，并使用圖層蒙蔽調(diào)整大小與輪廓.而3D圖形則需要根據(jù)圖形的受光面來(lái)添加局部陰影，如圖8中“投影”的實(shí)現(xiàn)就采用了上述提到的方法來(lái)實(shí)現(xiàn).

3.2質(zhì)感效果

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

3.33D效果

3D效果和質(zhì)感效果有很多共同點(diǎn)，但是質(zhì)感效果只需要對(duì)圖標(biāo)的一小部分圖層進(jìn)行打磨和加工，而3D效果則把工程量擴(kuò)大了整個(gè)圖層.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ù)受光面添加陰影效果（見圖9）.

圖9　3D效果制作過(guò)程

3.4點(diǎn)翠修飾處理

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

圖10首先就是一個(gè)沒(méi)有經(jīng)過(guò)任何點(diǎn)翠修飾過(guò)的圖標(biāo)，經(jīng)過(guò)房屋三色彩虹和綠色樹木的點(diǎn)翠修飾后（見圖11），該圖標(biāo)不但突出了主要內(nèi)容房屋，而且對(duì)以前單一的元素進(jìn)行了擴(kuò)充，營(yíng)造了一種意境之美，更能博得用戶的眼球.

圖10　沒(méi)有點(diǎn)翠過(guò)的圖標(biāo)

圖11　點(diǎn)翠過(guò)的圖標(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í)化等.圖12就采用了將圖標(biāo)毛線化的方法點(diǎn)翠修飾，將圖標(biāo)變得更可愛動(dòng)人.

圖12　毛線編織圖標(biāo)

圖13質(zhì)感旋轉(zhuǎn)按鈕圖標(biāo)

圖13就為上述的設(shè)計(jì)案例，該圖標(biāo)參考了汽車儀表盤，拋棄了儀表中的數(shù)字，改用不同深度的顏色來(lái)體現(xiàn)數(shù)值，適合用于音樂(lè)播放器、速度檢測(cè)器等功能的APP中.

4　結(jié)語(yǔ)

當(dāng)前移動(dòng)終端，特別是智能手機(jī)正處于高速發(fā)展時(shí)期，界面設(shè)計(jì)也成為App開發(fā)過(guò)程中的一個(gè)重要事項(xiàng)，圖標(biāo)作為界面中的靈魂，在界面中起著提綱挈領(lǐng)的作用.圖標(biāo)設(shè)計(jì)的用意在于使App能夠有效的展示出它的功能，并通過(guò)統(tǒng)一的風(fēng)格來(lái)提升App整體美感.上文通過(guò)介紹移動(dòng)終端圖形化用戶界面的發(fā)展歷史和移動(dòng)終端系統(tǒng)的常規(guī)圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)，梳理了移動(dòng)終端的不同的設(shè)計(jì)原則和視覺(jué)配色原理，提出了圖標(biāo)設(shè)計(jì)過(guò)程中一些設(shè)計(jì)規(guī)范與技巧，并在所承擔(dān)的App項(xiàng)目開發(fā)圖標(biāo)設(shè)計(jì)工作中應(yīng)用了上述規(guī)范和技巧，如下圖即為設(shè)計(jì)成果之一.

該圖標(biāo)由左邊字母“F”變形成的一個(gè)椅子，右邊是由“W”和“I”兩個(gè)字母組合成一張桌子構(gòu)成的，背景色采用青藍(lán)色調(diào)，起到一種醒腦提神的作用進(jìn)而增加用戶的食欲以及保持一份恬雅淡然的心去品嘗美食，富有寓意又不失藝術(shù)修飾的美感.

圖標(biāo)的風(fēng)格設(shè)計(jì)業(yè)內(nèi)的研究者都從不同角度進(jìn)行了比較深刻的研究，但關(guān)于圖標(biāo)設(shè)計(jì)技巧方面系統(tǒng)化研究的比較少，筆者所在團(tuán)隊(duì)從所承擔(dān)的項(xiàng)目開發(fā)中，歸納并整理了一些切實(shí)可行的規(guī)范和提出了一些實(shí)用技巧，以期能為APP圖標(biāo)設(shè)計(jì)提供借鑒.

［1］羅曉萌.智能手機(jī)App圖標(biāo)的設(shè)計(jì)研究及實(shí)踐[D].濟(jì)南：山東師范大學(xué)，2015：24-30.

［2］毛珊珊.手機(jī)圖形界面的圖標(biāo)設(shè)計(jì)風(fēng)格研究[D].北京：北京服裝學(xué)院，2012：65.

［3］周陟.UI進(jìn)化論—移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)[M].北京：清華大學(xué)出版社，2010：152-175.

［4］王歌.智能手機(jī)交互界面中的圖標(biāo)設(shè)計(jì)研究[D].長(zhǎng)春：長(zhǎng)春工業(yè)大學(xué)，2014：10-18.

［5］百度.百度搜索引擎[EB/OL].[2015-12-15].http://f.hiphotos.baidu.com/image/pic/item/d4628535e5dde7112d44b2b9afefce1b9c1661e f.jpg[EB/OL].

Research on Design Specification and Technique of M obile Term inal App Icon

XIE Wang-du，ZHANG Jian，CHEN Zheng-ming，DAI Jing-guo
（School of Information Science and Engineering；Shaoguan University，Shaoguan 512005，Guangdong，China）

Using mobile terminal app icon as the research object，the paper probed intomobile graphics terminal of user interface development history and IOS，and the twomain Android mobile terminal system of conventional icon design standard，clearing themobile terminal of the different design principles and visual color matching principle. According to the current development trend of flat type and three-dimensional style，some design rules and techniquesare put forward.Through theanalysisofexcellentexamples，the practical designmethodsand techniques are summarized.

smartphone；icon style；icon design；mobile terminals

TP302.4

A

1007-5348（2016）08-0017-05

2016-07-08

廣東大學(xué)生科技創(chuàng)新培育專項(xiàng)資金項(xiàng)目（pdjh2016b0453）；韶關(guān)學(xué)院第十六批教育教學(xué)改革研究一般項(xiàng)目（SYJY20151623）.

謝往都（1995-），男，湖南資興人，韶關(guān)學(xué)院信息科學(xué)與工程學(xué)院學(xué)生；研究方向：UI設(shè)計(jì)與Java開發(fā).

（責(zé)任編輯：歐愷）