UI圖標(biāo)設(shè)計(jì)技巧課件

V

圖標(biāo)設(shè)計(jì)1圖標(biāo)的種類及表現(xiàn)手法應(yīng)用圖標(biāo)需要設(shè)計(jì)師打造一枚充滿個(gè)性的圖標(biāo)，以引起用戶注意且應(yīng)用圖標(biāo)表現(xiàn)手法豐富，哪怕貼個(gè)代言人照片都沒問題，手游普遍采用代言人為桌面圖標(biāo)主體1.應(yīng)用圖標(biāo)圖標(biāo)的種類功能圖標(biāo)在頁面中通常都是比較安靜的純?cè)?，甚至有時(shí)候，即便消失了，也不易察覺，因此功能圖標(biāo)在整體頁面中通常都不太突出，這也限制了它的表現(xiàn)手法，同時(shí)由于功能圖標(biāo)通常成群結(jié)隊(duì)的出現(xiàn)，彼此之間的統(tǒng)一一性，也顯得尤為重要。

2.功能圖標(biāo)1.線性2.面性3.線+面圖標(biāo)的表現(xiàn)手法2圖標(biāo)的風(fēng)格擬物圖標(biāo)一一致力于創(chuàng)造類似真實(shí)世界的圖標(biāo)圖標(biāo)的風(fēng)格功能圖標(biāo)在頁面中通常都是比較安靜的純?cè)?，甚至有時(shí)候，即便消失了，也不易察覺，因此功能圖標(biāo)在整體頁面中通常都不太突出，這也限制了它的表現(xiàn)手法，同時(shí)由于功能圖標(biāo)通常成群結(jié)隊(duì)的出現(xiàn)，彼此之間的統(tǒng)一一性，也顯得尤為重要。

線型圖標(biāo)一一線條的藝術(shù)圖標(biāo)的風(fēng)格這是現(xiàn)在最流行的圖標(biāo)表現(xiàn)風(fēng)格之一，也是每一個(gè)設(shè)計(jì)師最容易開始的一種圖標(biāo)設(shè)計(jì)風(fēng)格。特點(diǎn)是:圖標(biāo)是由一條等粗細(xì)度線條構(gòu)成的圖形，相比面形圖標(biāo)會(huì)比較有細(xì)節(jié)的表現(xiàn)空間，控制線條的粗細(xì)和構(gòu)型能夠有很多樣的視覺表現(xiàn);應(yīng)用場(chǎng)景:通常應(yīng)用在小的功能入口，起到指代功能的作用;設(shè)計(jì)要點(diǎn):線條粗度需整套一致、構(gòu)型飽滿、大小上要視覺統(tǒng)一、視角一致(一般都是正視圖的圖標(biāo)，中間不要插入一兩個(gè)俯視圖或者類似側(cè)軸的角度)、圓角統(tǒng)一。面型圖標(biāo)一一扁平化時(shí)代的代表圖標(biāo)的風(fēng)格這也是非常常見的圖標(biāo)，它是扁平化和象形圖標(biāo)的代表，設(shè)計(jì)時(shí)主要是設(shè)計(jì)師會(huì)去從現(xiàn)實(shí)世界中提取事物的關(guān)鍵形狀特點(diǎn)然后通過草稿再電子化的一個(gè)過程。特點(diǎn)是:一個(gè)象形的剪影小色塊、視覺上比較有張力，比線形圖標(biāo)有更重的視覺感、不好刻畫較多細(xì)節(jié);應(yīng)用場(chǎng)景:通常是作為一個(gè)軟件標(biāo)識(shí)或者系統(tǒng)標(biāo)識(shí)的入口圖標(biāo);設(shè)計(jì)要點(diǎn):布爾運(yùn)算、正負(fù)形只能選擇一種并統(tǒng)一、大小是視覺上要統(tǒng)一、視角一致、圓角統(tǒng)一、剪影面積趨近、構(gòu)型飽滿填充型圖標(biāo)一一以“MBE”為代表的圖標(biāo)風(fēng)格圖標(biāo)的風(fēng)格這種類型的圖標(biāo)可以說是面形圖標(biāo)和線形圖標(biāo)的完美結(jié)合，采用線條構(gòu)型然后在內(nèi)部填充顏色。特點(diǎn)是:比較新穎，有較多的喪現(xiàn)空間;應(yīng)用場(chǎng)景:通常應(yīng)用在比較有張力需要個(gè)性的產(chǎn)品需求中;設(shè)計(jì)要點(diǎn):線條統(tǒng)一、配色統(tǒng)一、大小視覺上統(tǒng)一手繪圖標(biāo)一一游戲圖標(biāo)圖標(biāo)的風(fēng)格這是一種手工繪制的圖標(biāo)，這種風(fēng)格的圖標(biāo)可以天馬行空得彰，顯設(shè)計(jì)師的表現(xiàn)力，在一些主題比賽中這種圖標(biāo)風(fēng)格參加比賽可以說是開掛的狀態(tài)。特點(diǎn):視覺表現(xiàn)豐富細(xì)膩、很有感染力和場(chǎng)景感;應(yīng)用場(chǎng)景:更多的應(yīng)用在游戲中或者手機(jī)主題設(shè)計(jì)中;設(shè)計(jì)要點(diǎn):細(xì)節(jié)的把握視覺的把握、圖標(biāo)構(gòu)型、整個(gè)風(fēng)格統(tǒng)一等3功能圖標(biāo)的制作方法通過對(duì)logo或品牌元素提取特定形狀，這個(gè)形狀是固定的、具象的，例如圓形，三角形、字母甚至是logo本身等等。提取出形狀基因后，有三種方法與圖標(biāo)相結(jié)合。功能圖標(biāo)的制作方法1.提取特定形狀①直接應(yīng)用最常見的用法就是直接將整個(gè)logo作為圖標(biāo)(比如首頁);如圖:功能圖標(biāo)的制作方法②做為外輪廓將提取的形狀作為整套圖標(biāo)的外輪廓，例如谷歌play-一樣，提取出三角形后，整套圖標(biāo)都是以三角形作為外形，如圖再比如你提取出一個(gè)圓形基因，也可以將其作為外輪廓使用，如圖功能圖標(biāo)的制作方法③將圖形與圖標(biāo)巧妙融合假如我在logo.上面提取出一個(gè)圓形作為基因,我們可以將這個(gè)圓形巧妙的與圖標(biāo)進(jìn)行融合，如圖但這里必須要強(qiáng)調(diào)一點(diǎn)，很多時(shí)候，我們很難將一個(gè)特定形狀融入到所有的圖標(biāo)當(dāng)中，如果強(qiáng)行融合，難免會(huì)讓人覺得死板生硬，所有一定要有所取舍，例如案例中的圖標(biāo)也不是所有都融入了圓形，如圖功能圖標(biāo)的制作方法這招是最簡(jiǎn)單直接的方法，直接吸取品牌色作為視覺基因，以此來進(jìn)行圖標(biāo)設(shè)計(jì)，舉幾個(gè)例子:2.吸取品牌顏色功能圖標(biāo)的制作方法舉個(gè)例子，iwork的logo:除了顏色以外，我們?cè)趌ogo上面提取出兩個(gè)特點(diǎn):①新:是指整個(gè)logo有兩個(gè)斷開的地方②層:是指logo有三個(gè)不同顏色的深淺，形成前后關(guān)系，也就是層級(jí)。那如何將這兩個(gè)特點(diǎn)運(yùn)用到圖標(biāo)上呢?我們看下圖

3.抓取風(fēng)格特點(diǎn)功能圖標(biāo)的制作方法第一步:先畫好基礎(chǔ)形;第二步:將合適的地方斷開;第三步:將局部(小塊)調(diào)整顏色，以區(qū)分層級(jí);這樣一一個(gè)具有品牌基因的圖標(biāo)就誕生了!其它的圖標(biāo)也是一樣的道理,最后得到整套圖標(biāo)如右圖:4.調(diào)整局部透明度功能圖標(biāo)的制作方法上面這個(gè)案例只是抓取風(fēng)格特點(diǎn)的一種結(jié)果，不同的案例會(huì)有不同的結(jié)果，例如網(wǎng)易云音樂的圖標(biāo)，是抓取logo上圓潤(rùn)的風(fēng)格特點(diǎn)，如圖:小密圈則是抓取斷線的風(fēng)格特點(diǎn)，如圖:4圖標(biāo)的特性圖標(biāo)的特性①尺寸的統(tǒng)一在網(wǎng)頁設(shè)計(jì)中圖標(biāo)的主流尺寸有16x16、24x24、32x3、48x48、64x64、96x96、128x128、256x256、512x512.在移動(dòng)端iOS規(guī)范中在2倍圖下最適合人點(diǎn)擊的區(qū)域大小為48*48px，iOS功能圖標(biāo)其他尺寸為48加或減4的倍數(shù);安卓android功能圖標(biāo)其他尺寸為48加或減8的倍數(shù)。在很多帶有色塊的圖標(biāo)，不僅要保證色塊44*44pt的大小統(tǒng)一，也要保證里面色塊里面的功能圖標(biāo)的大小統(tǒng)一。1.統(tǒng)一性圖標(biāo)的特性②風(fēng)格的統(tǒng)一直角圖標(biāo)和圓角圖標(biāo)基礎(chǔ)上可以添加一個(gè)其他風(fēng)格，如雙色風(fēng)格;但是剩余的其他風(fēng)格最好就不要兩兩相加，不然就會(huì)給用戶感覺很容易亂，也不夠簡(jiǎn)潔，主次不明。③視覺規(guī)范的統(tǒng)一為什么我們?cè)偻瑯拥拇笮^(qū)域去繪制正方形、圓形、三角形，雖然符合了大小統(tǒng)一的特性，但是從視覺上還是不能看，上去很均衡?這就需要我們規(guī)范化的去繪制圖標(biāo)，安卓android規(guī)范里給出了圖標(biāo)的繪制方法。圖標(biāo)的特性簡(jiǎn)潔性不單單體驗(yàn)在圖標(biāo)的簡(jiǎn)潔，還要體現(xiàn)在從創(chuàng)意到實(shí)際游地的簡(jiǎn)潔。在使用軟件al或者sketch的時(shí)候繪制基礎(chǔ)圖形下要出現(xiàn)小數(shù)點(diǎn)和甚數(shù)，多用偶數(shù)。2.簡(jiǎn)潔性圖標(biāo)的特性圖標(biāo)具有可點(diǎn)擊性和標(biāo)識(shí)性?？牲c(diǎn)擊性就會(huì)有點(diǎn)擊前、點(diǎn)擊時(shí)、點(diǎn)擊后三種狀態(tài)，主流底部標(biāo)簽欄會(huì)在點(diǎn)擊前使用線性圖標(biāo)，點(diǎn)擊時(shí)和點(diǎn)擊后使用面性圖標(biāo);也有使用顏色來區(qū)分。3.層次明確圖標(biāo)的特性好的圖標(biāo)可以直接當(dāng)應(yīng)用圖標(biāo)或者logo來使用同時(shí)好的圖標(biāo)還可以通過點(diǎn)線面動(dòng)效變化做下拉加載動(dòng)畫。4.延展性5圖標(biāo)繪制注意事項(xiàng)圖標(biāo)繪制注意事項(xiàng)從定義上來看，圖標(biāo)是一一個(gè)物體或者-個(gè)動(dòng)作的視覺代表。如果一個(gè)圖標(biāo)無法清晰地告知用戶它所代表的內(nèi)容，那么無疑失去了實(shí)用價(jià)值，成為了視覺噪音,雖然圖標(biāo)千變?nèi)f化，但是有一些普遍存在的圖標(biāo)還是為大眾所熟知的(如家庭、打印以及搜索)。1、圖標(biāo)應(yīng)當(dāng)正確地傳達(dá)信息易于識(shí)別的圖標(biāo)圖標(biāo)繪制注意事項(xiàng)但是除開這些最常見的圖標(biāo)之外，絕大多數(shù)的圖標(biāo)都因?yàn)槠缌x和含糊的設(shè)計(jì)而常常令用戶感到迷惑。以10S.上的游戲中心圖標(biāo)為例，這幾個(gè)多彩的氣泡到底有看怎樣的含義?它是如何同游戲聯(lián)系到一起的?如果你覺得這個(gè)游戲中心的圖標(biāo)設(shè)計(jì)不足以說明問題，那么再看看Gmail這個(gè)案例。谷歌原本是計(jì)劃將所有功能都收納到一個(gè)抽家的圖標(biāo)當(dāng)中，而許多用戶則常常會(huì)在反潰的時(shí)候表達(dá)自己的迷感:“我的谷歌日歷去哪里了?不易于識(shí)別的圖標(biāo)?圖標(biāo)繪制注意事項(xiàng)無論一個(gè)圖標(biāo)對(duì)你而言含義有多清晰，對(duì)于首次看到這個(gè)圖標(biāo)的用戶而言，它帶來的體驗(yàn)和你的預(yù)期往往相去甚遠(yuǎn)。你認(rèn)為你的用戶會(huì)很熟悉一一個(gè)抽象的圖形或者圖標(biāo)，這是圖標(biāo)設(shè)計(jì)最常見的誤區(qū)之一。你所設(shè)計(jì)的圖標(biāo)，首要的任務(wù)是引導(dǎo)用戶去他們?cè)撊サ牡胤?，達(dá)成目標(biāo)?！笆褂梦迕朐瓌t:如果一個(gè)圖標(biāo)需要超過5秒時(shí)間來思考它的含義，那么它絕對(duì)無法準(zhǔn)確地傳達(dá)含義。選擇熟悉的圖標(biāo):用戶會(huì)基于以往的經(jīng)驗(yàn)來判斷和認(rèn)識(shí)一一個(gè)圖標(biāo)，通過你的競(jìng)爭(zhēng)對(duì)手和常用這些圖標(biāo)的平臺(tái)來了解你的用戶，做出合理的選取。”圖標(biāo)繪制注意事項(xiàng)在絕大多數(shù)的情況下，圖標(biāo)并不是用來表現(xiàn)創(chuàng)造力的對(duì)象。請(qǐng)不要誤會(huì)我的意思，我并不是說充滿創(chuàng)意的圖標(biāo)是錯(cuò)的，但是過于花哨的圖標(biāo)確實(shí)會(huì)對(duì)圖標(biāo)的用戶體驗(yàn)造成負(fù)面影響的。如果說真有什么值得注意的技巧，那就是盡最讓你的圖標(biāo)設(shè)計(jì)簡(jiǎn)約、現(xiàn)代而友好，通過其他的元素來表現(xiàn)你的創(chuàng)造力，傳遞更多的信息。每個(gè)圖標(biāo)都應(yīng)當(dāng)以盡量簡(jiǎn)約的方式呈現(xiàn)出來，將最核心和最本質(zhì)的概念凸顯出來，降低用戶的學(xué)習(xí)曲戔，盡量讓用戶能夠眼看出來，確保可讀性和清晰度，即使在尺寸很小的情況下。2.讓圖標(biāo)簡(jiǎn)單而概括圖標(biāo)繪制注意事項(xiàng)好的用戶體驗(yàn)可以從不同的層面來進(jìn)行界定，而能否讓用戶輕松的識(shí)別內(nèi)容是諸多標(biāo)準(zhǔn)中的一條。清晰是優(yōu)秀的UI的重要特征，你的圖標(biāo)應(yīng)當(dāng)幫助用戶不費(fèi)腦子地理解界面信息。然而不同的人會(huì)根據(jù)他們不同的經(jīng)驗(yàn)來判漸圖標(biāo)的含義，這種差異是無法忽略的。為了降低圖標(biāo)信息傳遞上的模糊性，最好是為每個(gè)圖標(biāo)附.上文本標(biāo)簽，以明確它的實(shí)際含義。你應(yīng)當(dāng)讓你的用戶擁有明確的期待，讓他們?cè)敢馊c(diǎn)擊它們。3.附上文本標(biāo)簽圖標(biāo)繪制注意事項(xiàng)4.讓圖標(biāo)更容易被點(diǎn)擊（移動(dòng)端）在觸摸屏上，UI控件的推薦尺寸寬度是7~10mm，下面是蘋果和谷歌的設(shè)計(jì)規(guī)范上的建議:蘋果建議將觸摸交互的對(duì)象控制在44x44px以上，不過這個(gè)實(shí)際大小要根據(jù)屏幕的像素密度而進(jìn)行調(diào)警，而這個(gè)44的像素寬度的參考屏幕是320x480px的3.5英寸屏幕。谷歌在規(guī)范觸摸屏控件的時(shí)候，使用的是推薦參數(shù)是48<48dp。在絕大多數(shù)的情況下，要求控件問的間距至少間隔3dp,確保信息密度和可用性。無論屏幕尺寸大小，這個(gè)48x48dp的控件尺寸對(duì)應(yīng)的物理尺寸應(yīng)當(dāng)不會(huì)小于9mm。這當(dāng)中還有一個(gè)問題值得注高即使圖片尺寸是24x24dp.也要確保圍繞它的觸摸觸發(fā)區(qū)域不得小于48x48dp。如下圖圖標(biāo)繪制注意事項(xiàng)此外，圖標(biāo)之間的應(yīng)當(dāng)有足夠的間距，確保