區(qū)塊鏈技術(shù)與電子商務(wù)應(yīng)用 課件 【ch02】主題圖標(biāo)設(shè)計(jì)

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