主題圖標設計第二章新工科建設·應用型本科規(guī)劃教材UI設計實戰(zhàn)圖標0101圖標圖標的概念圖標（Icon）是指具有明確指代含義的計算機圖形，如圖2.1、圖2.2所示。設計成功的圖標能夠給用戶優(yōu)良的視覺感受和操作體驗。01圖標圖標分類按照功能分類可以把圖標分為系統(tǒng)圖標、應用圖標、功能圖標。系統(tǒng)圖標是指系統(tǒng)安裝后自動出現(xiàn)的圖標，如我的電腦、我的文檔、網(wǎng)上鄰居、回收站等。應用圖標是指桌面上除系統(tǒng)圖標以外的圖標，如各種應用程序的啟動圖標。功能圖標是指能指引用戶完成某項功能的圖標,如聯(lián)系人、電話、設置等圖標。按照設計風格可以把圖標分為線形圖標、扁平圖標、擬物/寫實圖標。線形圖標，顧名思義就是用線將圖形表現(xiàn)出來，通過調(diào)整線條的粗細、走向等來豐富細節(jié)的表達,如圖2.3所示。01圖標扁平圖標設計圖標時，去掉冗余的裝飾效果，讓“信息”本身作為核心凸顯出來,并且在設計元素上強調(diào)抽象、極簡、符號化，如圖2.4所示。01圖標擬物/寫實圖標設計/寫實圖標效果與真實物體相似或相同，如圖2.5所示，便于用戶理解圖標的所代表的功能，降低用戶學習成本。主題圖標0202主題圖標主題圖標概念具有共同主題的圖標稱為主題圖標。主題圖標通過網(wǎng)絡被下載后安裝到手機中使用，能充分展現(xiàn)用戶個性。一般來說，設計時不會單獨設計主題圖標，同時還要設計主題壁紙、控件、解鎖界面等，這樣用戶才會感到產(chǎn)品的統(tǒng)—性和完整性。如圖2.6~圖2.9所示為學生作品展示。常用主題圖標名稱常用主題圖標都包含:電話(telephone)、電子郵件(E-mail)、短信(message)、計算器（calculator)、快速打開（fast)、聯(lián)系人（user)、瀏覽器(browser)、手電筒〈flashlight)、日歷(calendar)、設置(setting)、時間(clock)、收音機,(radio)、下載(download)、相冊（picture)、相機(camera)、音樂(music)、游戲(game),主題商店(themestore)、意見反饋(feedback)、應用商店(Appstore)等。如圖2.10~圖2.13所示為學生作品展示。02主題圖標圖標設計規(guī)范及技巧0303圖標設計規(guī)范及技巧圖標識別性要強圖標設計最重要的就是識別性要強。圖標不同于其他的圖形設計，圖標首先要展示功能性，然后才展示視覺效果。用戶在使用圖標時都是在短時間、零思考狀態(tài)下進行的，一個圖標設計得非常精美，但是所代表的功能表現(xiàn)得非常差，或者模棱兩可，那么這個圖標設計并不是成功的，所以判斷一個圖標設計成功的最主要的標準就是識別性。如圖2.14所示為學生作品展示。03常見智能手機系統(tǒng)圖標要有一致性圖標的一致性包括造型、顏色、材質(zhì)、透視角度、光影效果等。造型一致性:在設計圖標時，不論是外框〈根據(jù)設計需要可以不用外框〉，還是圖標內(nèi)部的功能圖形，造型都要保持一致性，包括線條的粗細及圖形的圓角值等。如圖2.15所示為學生作品展示。03常見智能手機系統(tǒng)圖標要有一致性顏色—致性:在設計圖標時，使用顏色也要保證一致性，如色系一致、色調(diào)一致、灰度一致等。一般建議初學者在使用顏色時控制顏色數(shù)量不超過3種(不包括中性色)，以方便對顏色理解和掌握。圖標顏色—致性的示例如圖2.16所示。03常見智能手機系統(tǒng)圖標要有一致性材質(zhì)—致性:在設計過程中，經(jīng)常會通過材質(zhì)來表現(xiàn)質(zhì)感，但是在設計一套作品時材質(zhì)的數(shù)量控制在3種之內(nèi)，因為如果材質(zhì)過多的話，也會給用戶造成視覺疲勞，產(chǎn)生厭惡感;另外，還要注意材質(zhì)在使用時合理搭配，才能有吸睛的效果展示。例如，“金屬+皮革”“木板＋紙”等效果都非常經(jīng)典。如圖2.17所示為學生作品展示。03常見智能手機系統(tǒng)圖標要有一致性透視角度一致性:透視要遵循的原則是“近大遠小，近實遠虛”，在設計過程中,除了要遵循透視原則，還要注意角度的一致性。如果圖標在設計時都是向左傾斜的，就不要出現(xiàn)不傾斜或向別的方向傾斜。如圖2.18所示為學生作品展示。03常見智能手機系統(tǒng)圖標要有一致性光影效果一致性:在設計過程中，肯定要通過光影效果來增加視覺層次感，但是使用時要注意角度的一致性，注意高光與陰影角度要保持統(tǒng)一。如圖2.19所示為學生作品展示。03常見智能手機系統(tǒng)平衡視覺差由于眼睛的視覺差別，在設計過程中往往會出現(xiàn)視覺差。大小、比例和顏色是最容易出現(xiàn)視覺差的基本參數(shù)，所以必要時即便值相同，也要手動再調(diào)整，保證視覺差的一致性，如圖2.20所示。03圖標設計規(guī)范及技巧避免使用文字做圖標—些圖標在設計時，用戶愿意使用企業(yè)或產(chǎn)品的首字母設計為圖標，但最好避免出現(xiàn)這樣的做法。因為如果是字母的話容易雷同,所以最好的方法是將文字圖形化(再加工創(chuàng)造)，如圖2.21所示，或者是代表企業(yè)或產(chǎn)品的標志性象征，如圖2.22所示。03圖標設計規(guī)范及技巧避免使用圖片做圖標寫實圖標固然精美，如圖2.23所示，但是對設計師的要求也是比較高的，不是所有的設計師都具備設計寫實圖標這樣的能力。如果直接拿圖片做圖標的話，會讓用戶有一種胡亂拼湊的印象，如圖2.24所示。在蘋果AppStroe上傳圖標審核時也會因此而不予以通過，拒絕產(chǎn)品上線。所以，提高設計師寫實圖標設計能力還是必要的。03圖標設計規(guī)范及技巧適應不同場景應用一個好圖標在設計時就要考慮在不同背景、不同平臺的顯示效果。6．適應不同場景應用一個好圖標在設計時就要考慮在不同背景、不同平臺的顯示效果。應用圖標在使用過程中會以多種不同的尺寸出現(xiàn)，如要上傳到蘋果AppStroe的圖標尺寸要求是1024px×1024px，而上傳到Android應用商店的圖標尺寸要求是512px×512px;尺寸這么大的圖標對于設計師來說可以進行很多創(chuàng)意和細節(jié)刻畫。但是出現(xiàn)在手機主屏上的圖標尺寸就比較小，為了保持圖標的識別度，就要去除一些不必要的細節(jié)刻畫，甚至進行重新設計，如圖2.25所示。03圖標設計規(guī)范及技巧提煉特點繪制圖標時，首先要學會提煉內(nèi)容，通過聯(lián)想的設計思維方法打開設計思路，更快更準確地抓住提煉的內(nèi)容，便于圖標繪制。例如，我們要繪制一個熊貓的圖標，首先我們先想—下熊貓的外形特點:圓圓的腦袋、半圓形的耳朵、橢圓形的眼睛、倒三角形的鼻子、曲線形的嘴，掌握住這些特點，熊貓圖標很快就能夠被繪制出來了，如圖2.26所示。03圖標設計規(guī)范及技巧競品分析市面上大量存在類似主題的App，這樣在做圖標時很有可能出現(xiàn)雷同。例如，微信、陌陌、WhatsApp等產(chǎn)品的圖標都使用氣泡的元素，顯然，氣泡代表了語言的傳達。那么要設計一個獨特的圖標，首先應該看看同行的圖標設計是什么樣子的，通過篩選分析,調(diào)整圖形設計細節(jié),做到與同行的有所不同,這樣才能達到吸引用戶眼球的目的,如圖2.27所示。03圖標設計規(guī)范及技巧確定設計風格根據(jù)App的主題類型選擇—種合適的風格運用到圖標中，如擬物風格、扁平風格等。目前，扁平化的設計風格屬于流行趨勢，這雖然降低了設計難度，但增加了圖形設計提煉難度，如圖2.28所示。03圖標設計規(guī)范及技巧細節(jié)刻畫圖標的圖形整體設計好后，為增加圖標的層次感和細節(jié)刻畫，再通過設計方法適當調(diào)整細節(jié)，提高圖標的表現(xiàn)力，如圖2.29所示。03圖標設計規(guī)范及技巧場景測試—個圖標設計完成后，由于使用的手機品牌或型號過多，分辨率也會有很多，因此需要設計出來的圖標能夠適應大多數(shù)手機系統(tǒng)，并方便被應用。一般圖標上線前，設計師都會在應用場景中對其進行測試。03圖標設計規(guī)范及技巧正負形組合正負形組合是一種十分常見的設計方法，主圖形(—般面積比較大）與輔助圖形通過相互組合、疊加或摳除，組成新的圖形，如圖2.30所示。通過正負形組合設計，提高應用圖形的信息承載能力和表達功能，視覺上具有更強的錯視感和沖擊力，同時還豐富了應用圖形的表現(xiàn)力。03圖標設計規(guī)范及技巧線性圖標線性圖標可以通過提煉圖形的輪廓設計各式線性圖形;也可以通過線的變化(粗細、走向、連接或中斷等），形成各種風格，設計提煉難度大。如圖2.31所示為學生作品展示。03圖標設計規(guī)范及技巧色塊拼合把圖形通過有規(guī)律的分割,并填充顏色，顏色的表現(xiàn)順序可參照色環(huán)的顏色分布，如圖2.32所示。這種設計方法的顏色效果自然和諧，不會出現(xiàn)太刺激的顏色，比較適合初學者。03圖標設計規(guī)范及技巧透明漸變通過對圖形放大或縮小再疊加上不同透明度的顏色，形成層次豐富、形態(tài)飽滿的圖形組合。這種設計方法充滿想象力，也會營造一種朦朧美，常用于同色相顏色變化處理，如圖2.33所示。03圖標設計規(guī)范及技巧圖形復用通過對設計好的主圖形進行復制，然后調(diào)整透明度或大小變化，產(chǎn)生圖形重復之美，如圖2.34所示。03圖標設計規(guī)范及技巧背景組合當設計的圖形過于單調(diào)時，可以適當對背景進行設計處理，增加符合主題的元素，或者條紋、格紋等元素。這種設計更具多元化，增強視覺感，更有活力，如圖2.35