一、設(shè)計師必修：圖標(biāo)(icon)設(shè)計指南
一、圖標(biāo)設(shè)計的概述
圖標(biāo)，作為圖形化標(biāo)識的存在，擁有廣義和狹義兩種解讀。廣義上，它涵蓋了所有具有明確指向含義的圖形符號；而狹義上，主要指的是在計算機(jī)設(shè)備界面中的圖形符號。在UI設(shè)計中，我們主要關(guān)注的是圖標(biāo)的狹義概念，它是UI界面視覺構(gòu)成的關(guān)鍵元素之一。透過圖標(biāo)，我們看到的不僅是其外在形態(tài)，更是它所代表的內(nèi)在含義。
二、圖標(biāo)在平面設(shè)計中的重要性
色彩、文字、圖標(biāo)、圖形、圖片以及空間，這六大元素在平面設(shè)計中占據(jù)重要地位。對于UI設(shè)計而言，圖標(biāo)堪稱點(diǎn)睛之筆，甚至能夠直接影響產(chǎn)品的形象和氣質(zhì)。
三、圖標(biāo)的歷史演變
圖標(biāo)并非由界面設(shè)計師創(chuàng)造，其歷史源遠(yuǎn)流長，根植于古代。它們出現(xiàn)在地圖、標(biāo)志、方案、手冊等眾多信息來源中。隨著新技術(shù)和圖形化用戶界面的出現(xiàn)，圖標(biāo)經(jīng)歷了新的轉(zhuǎn)折進(jìn)步。值得一提的是，施樂公司在20世紀(jì)70年代初的Xerox Alto機(jī)器上實(shí)現(xiàn)了第一個圖形化用戶界面的圖標(biāo)，而后Xerox Star的發(fā)布則標(biāo)志著圖標(biāo)作為界面的一部分在消費(fèi)類計算機(jī)中的普及。
四、不同類型的圖標(biāo)及其特點(diǎn)
1. 表意圖標(biāo)（又稱解釋性圖標(biāo)）：這類圖標(biāo)是通過符號表達(dá)特定含義或操作行為，例如箭頭。在發(fā)展過程中，這些符號逐漸繼承了一些象形符號的特性，將符號本身視作“實(shí)物”并不斷演化。
2. 交互圖標(biāo)：具備雙向信息傳遞能力，不僅能向用戶傳遞信息、引導(dǎo)用戶執(zhí)行特定操作，還能接收用戶的控制信息。從功能角度來看，其重要性最高。例如登錄注冊按鈕、開關(guān)按鈕等都屬于交互性圖標(biāo)。
3. 裝飾和娛樂用圖標(biāo)：主要用于提升界面美感、加深個性化設(shè)計風(fēng)格，并不具備明顯的功能性。這類圖標(biāo)迎合目標(biāo)受眾的偏好與期望，提升用戶線上體驗(yàn)感，通常呈現(xiàn)出季節(jié)性和周期性的特征。
4. 應(yīng)用圖標(biāo)：是不同數(shù)字產(chǎn)品在各操作系統(tǒng)平臺上的入口和品牌展示標(biāo)識，結(jié)合市場調(diào)研和品牌設(shè)計，旨在創(chuàng)造快速識別且引人注目的設(shè)計。
五、圖標(biāo)設(shè)計的未來趨勢與挑戰(zhàn)
象形圖標(biāo)
在iOS平臺上，曾經(jīng)風(fēng)靡一時的“Skeumorphic設(shè)計理念”，崇尚超寫實(shí)設(shè)計。其理念認(rèn)為，在應(yīng)用設(shè)計中融入現(xiàn)實(shí)的、物理的元素，使設(shè)計與現(xiàn)實(shí)越相似，操作越一致，用戶越容易理解其運(yùn)作模式，接受度也越高。以富士山圖標(biāo)為例，這一設(shè)計趨勢不僅追求美觀，更強(qiáng)調(diào)功能性，尤其在旅游設(shè)計領(lǐng)域，要求突破語言障礙，實(shí)現(xiàn)普遍認(rèn)同感。
隱喻圖標(biāo)
Icon設(shè)計中的隱喻元素至關(guān)重要。一個房子形狀的圖標(biāo)代表首頁，叉形圖標(biāo)則傳達(dá)出錯或關(guān)閉的信息。即使縮小圖標(biāo)尺寸，隱喻元素依然得以保留，確保信息準(zhǔn)確傳達(dá)。這種設(shè)計方式使得圖標(biāo)具有高度的識別性和理解性。
工具圖標(biāo)
工具圖標(biāo)以行業(yè)分類為基礎(chǔ)，廣泛應(yīng)用于各個領(lǐng)域，無論是普通大眾還是行業(yè)內(nèi)人士都能輕易識別。這類圖標(biāo)長期被使用，如建筑行業(yè)、醫(yī)療行業(yè)、化工行業(yè)等，其識別度極高，體現(xiàn)了行業(yè)的特色與共性。
混合圖標(biāo)
混合圖標(biāo)是前三種圖標(biāo)的有機(jī)結(jié)合，旨在創(chuàng)造不同的視覺效果和應(yīng)用結(jié)構(gòu)。近期流行的MBE粗描邊風(fēng)格icon便是混合圖標(biāo)的典型代表，它們充分展現(xiàn)了設(shè)計師的個人風(fēng)格或特定軟件的設(shè)計感。
字符圖標(biāo)
字符圖標(biāo)，“Glyph”這個詞源自排版領(lǐng)域，隨著數(shù)字設(shè)計的興起，它在設(shè)計界特別是數(shù)字設(shè)計領(lǐng)域逐漸扎根。在希臘語中，“Glyph”意為“雕刻”。在排版領(lǐng)域里，字符圖標(biāo)通常包含特定的含義和特定的功能，既有表意性也有書寫性，既可是字母也可是圖形，有時甚至是二者的結(jié)合。天氣類圖標(biāo)便是字符圖標(biāo)的典型代表，無論是單個還是組合圖標(biāo)都充分展示了其特點(diǎn)。
扁平圖標(biāo)
扁平圖標(biāo)包括線性、面型以及線面結(jié)合等多種形式，拓展性強(qiáng)、更加個性化和年輕化。相同設(shè)計風(fēng)格下的icon通過變換顏色就能傳達(dá)不同的信息。它們設(shè)計簡潔、現(xiàn)代感十足，深受年輕一代的喜愛。
擬物化圖標(biāo)
擬物化圖標(biāo)與扁平化圖標(biāo)形成鮮明對比。這種設(shè)計理念強(qiáng)調(diào)對現(xiàn)實(shí)世界的模仿，將形狀、紋理、光影融入圖標(biāo)設(shè)計，追求真實(shí)感。擬物化圖標(biāo)的設(shè)計歷史幾乎伴隨著Macintosh的誕生和進(jìn)化一路走來，雖然在UI設(shè)計領(lǐng)域被扁平化設(shè)計所替代，但仍然廣泛應(yīng)用于游戲設(shè)計和游戲類產(chǎn)品中，展現(xiàn)出其獨(dú)特的魅力。擬物化圖標(biāo)還廣泛應(yīng)用于桌面應(yīng)用、2.5D圖標(biāo)等領(lǐng)域，成為設(shè)計界不可或缺的一部分。無論是Windows還是iOS系統(tǒng)，其中許多圖標(biāo)已經(jīng)能夠迅速被大多數(shù)用戶識別，甚至成為國際通用的標(biāo)志。
一、圖標(biāo)的信息傳達(dá)效率
在一個圖標(biāo)能夠清晰表述其含義時，它僅需一個字符的位置就能傳遞操作信息給用戶。比如“掃一掃”、“郵件發(fā)送成功”，用文案表達(dá)需要較多的字符，而圖標(biāo)則能以一個字符的位置簡潔地傳達(dá)信息。支付寶的右上角+字符，代表著更多功能，微信中的聲波圖標(biāo)則代表語音功能，這些例子都展示了圖標(biāo)的高效信息傳達(dá)能力。
二、讀圖時代的視覺影響力
隨著碎片化時代的來臨，讀圖時代也同步發(fā)展。圖片內(nèi)容在短時間內(nèi)產(chǎn)生巨大的影響力，這是因?yàn)榇竽X處理圖像的速度遠(yuǎn)快于文字。研究表明，大腦處理圖片的速度比文字快60000倍，而且人們對圖形圖像的記憶也遠(yuǎn)勝于文字。在品牌推廣中，圖像的力量不容忽視，一圖勝千言。圖標(biāo)通過視覺引導(dǎo)幫助用戶快速識別信息，其重要性日益凸顯。
三、社交媒體中的圖標(biāo)識別
以TikTok和Instagram為例，即使沒有文字說明，用戶也能通過圖標(biāo)識別出功能區(qū)域。例如，我們知道第5個標(biāo)簽代表個人中心，這是因?yàn)閳D標(biāo)的視覺設(shè)計已經(jīng)深入人心，成為了一種默認(rèn)的溝通方式。這說明科學(xué)設(shè)計下的圖標(biāo)能夠讓人們迅速理解和記憶。
四、圖標(biāo)設(shè)計的底層邏輯與視覺風(fēng)格
圖標(biāo)設(shè)計遵循一定的底層邏輯，包括線性圖標(biāo)、面型圖標(biāo)、線+面型圖標(biāo)等。在此基礎(chǔ)上，五花八門的圖標(biāo)設(shè)計是在這些基本類型上進(jìn)行視覺區(qū)分和創(chuàng)新。在設(shè)計圖標(biāo)時，我們需要考慮產(chǎn)品的視覺風(fēng)格定位（行業(yè)領(lǐng)域）、圖標(biāo)應(yīng)用的界面以及產(chǎn)品面向的用戶群體。這些因素將影響圖標(biāo)的表達(dá)方式，使其更符合產(chǎn)品的定位和用戶需求。
五、圖標(biāo)設(shè)計的關(guān)鍵詞拆解與聯(lián)想
在圖標(biāo)設(shè)計中，關(guān)鍵詞的拆解與聯(lián)想是重要步驟。將需求信息中的關(guān)鍵詞進(jìn)行拆解和發(fā)散，轉(zhuǎn)化為生活中常見的事物，進(jìn)而釋放關(guān)鍵詞的內(nèi)在含義。通過找到與關(guān)鍵詞相關(guān)的事物，我們可以從中提取形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。例如，說到“榮譽(yù)”，我們可以聯(lián)想到獎杯、獎狀等物體，這些物體可以作為設(shè)計靈感來源，幫助我們創(chuàng)造出符合產(chǎn)品調(diào)性的圖標(biāo)。通過這種方式，我們可以確保圖標(biāo)設(shè)計既符合產(chǎn)品定位，又能有效傳達(dá)信息。圖標(biāo)設(shè)計指南：從繪制到應(yīng)用
一、引入
在UI設(shè)計中，圖標(biāo)是不可或缺的元素之一。它們以其直觀、易識別的特點(diǎn)，引導(dǎo)用戶輕松使用應(yīng)用。本文將深入探討如何使用AI鋼筆工具（sketch貝塞爾工具）和布爾運(yùn)算進(jìn)行圖標(biāo)繪制，并針對不同場景下的圖標(biāo)設(shè)計進(jìn)行詳細(xì)解析。
二、繪制方法與工具
1. AI鋼筆工具與布爾運(yùn)算
在圖標(biāo)設(shè)計中，AI鋼筆工具是設(shè)計師的得力助手。通過sketch貝塞爾工具，我們可以輕松繪制出流暢的線條和形狀。布爾運(yùn)算也是一個強(qiáng)大的工具，通過它，我們可以組合不同的形狀，創(chuàng)造出豐富的圖標(biāo)。
三、場景化設(shè)計
在實(shí)際應(yīng)用中，不同場景下的圖標(biāo)設(shè)計有其特定的特點(diǎn)。例如，大眾點(diǎn)評的tab標(biāo)簽欄、功能區(qū)（品類區(qū)）等，這些圖標(biāo)需要更加豐富多彩，以吸引用戶點(diǎn)擊。而個人中心、分類區(qū)、詳情頁等則更注重功能引導(dǎo)，設(shè)計相對簡潔。
四、圖標(biāo)細(xì)節(jié)解析
在圖標(biāo)設(shè)計中，需要注意以下幾點(diǎn)：
1. 圖標(biāo)端點(diǎn)：分為直角和圓角。在設(shè)計過程中，需要統(tǒng)一圖標(biāo)端點(diǎn)，保持設(shè)計語言的一致性。
2. 拐角：人類眼睛更容易識別圓角矩形。圓角圖標(biāo)給人圓潤、可愛的感覺，而直角則給人尖銳、具有攻擊性的感覺。金融等商務(wù)屬性強(qiáng)的產(chǎn)品通常使用直角圖標(biāo)。
3. 傾斜角度：內(nèi)部空間比例的一致性對圖標(biāo)視覺和諧至關(guān)重要。圖標(biāo)的描邊粗細(xì)也需要統(tǒng)一，常用的粗細(xì)有1px、1.5px、2px、3px。細(xì)描邊精致，粗描邊粗獷，也有結(jié)合的設(shè)計風(fēng)格。
五、圖標(biāo)規(guī)范與實(shí)例解析
國內(nèi)外大廠如蘋果、谷歌、IBM以及國內(nèi)的阿里Ant Design都有圖標(biāo)網(wǎng)格規(guī)范。以谷歌的Material System為例，在2424px的圖標(biāo)尺寸下，上下左右的安全邊距是2px。關(guān)鍵形狀的四個基本形狀為圓形、正方形、縱向矩形和橫向矩形都有明確的尺寸規(guī)范。這些規(guī)范為設(shè)計師提供了明確的指導(dǎo)，使得圖標(biāo)設(shè)計更加統(tǒng)一、和諧。
在設(shè)計過程中，設(shè)計師應(yīng)深入研究這些細(xì)節(jié)，結(jié)合實(shí)際應(yīng)用場景，創(chuàng)造出既美觀又實(shí)用的圖標(biāo)。通過遵循這些規(guī)范，圖標(biāo)制作將不再困難，而是成為設(shè)計師展現(xiàn)才華的舞臺。通過統(tǒng)一圖標(biāo)大小與位置，實(shí)現(xiàn)視覺平衡與精準(zhǔn)對齊
一、圖標(biāo)大小與位置的規(guī)則統(tǒng)一
為了達(dá)成視覺上的平衡，我們需遵循關(guān)鍵形狀的規(guī)則來統(tǒng)一圖標(biāo)的大小及位置。通過確保圖標(biāo)在X軸和Y軸上的坐標(biāo)均為整數(shù)，我們能有效地避免圖標(biāo)失真。在使用AI或Sketch等軟件繪制基礎(chǔ)圖形時，應(yīng)特別留意避免使用小數(shù)點(diǎn)和奇數(shù)，更多地采用偶數(shù)，以確保像素的完美對齊。
二、如何評判圖標(biāo)的適宜性
了解icon的基本知識后，我們該如何判斷一個icon是否適合我們的產(chǎn)品？其評判標(biāo)準(zhǔn)包括識別性、規(guī)范性、整體風(fēng)格與品牌感。圖標(biāo)的首要任務(wù)是準(zhǔn)確傳達(dá)信息，這是其最基礎(chǔ)、最重要的價值。如果一個圖標(biāo)無法被用戶理解，那么它的視覺美觀性便無從談起。
三. 圖標(biāo)的識別性與視覺語言
圖標(biāo)的識別性包括兩個方面：含義識別和視覺識別。前者考驗(yàn)的是圖標(biāo)是否能用視覺語言替代文字語言，讓用戶一目了然。例如，指南針常用于表示“發(fā)現(xiàn)”功能，房子則常代表“首頁”等。后者則關(guān)注圖標(biāo)的大小、顏色、線條粗細(xì)等因素，這些因素都會影響用戶的視覺識別。
四、圖標(biāo)設(shè)計與整體風(fēng)格的融合
設(shè)計圖標(biāo)時，需確保其與產(chǎn)品的整體風(fēng)格相協(xié)調(diào)。不同產(chǎn)品因其定位、目標(biāo)人群不同，其整體基調(diào)亦有差異。如騰訊動漫的圖標(biāo)設(shè)計就偏向卡通可愛風(fēng)格。某些APP會通過其獨(dú)特的啟動圖標(biāo)和整體調(diào)性，傳達(dá)出簡潔干凈的品牌形象，色彩運(yùn)用亦極為克制。
五、品牌感與品牌基因的提取
圖標(biāo)設(shè)計需融入品牌理念，傳達(dá)出與品牌一致的感受。這涉及到從品牌色、品牌元素、吉祥物和品牌圖形等多個方面的提取和融合。設(shè)計師需從品牌設(shè)計的角度去理解和尋找產(chǎn)品的獨(dú)特氣質(zhì)，然后將其具象化，融入界面設(shè)計中。有效的圖標(biāo)設(shè)計能高度融合產(chǎn)品名和啟動圖標(biāo)，增強(qiáng)品牌的辨識度。
六、圖標(biāo)設(shè)計的可用性測試
圖標(biāo)設(shè)計的可用性測試是驗(yàn)證其是否合格的基本規(guī)則。測試內(nèi)容包括圖標(biāo)的識別度、用戶是否熟悉該圖標(biāo)、是否與其他圖標(biāo)含義沖突、是否能在5秒內(nèi)識別、圖標(biāo)的可擴(kuò)展性以及是否需要增加文字標(biāo)簽等。通過這些測試，我們可以了解用戶對圖標(biāo)的理解和接受程度，從而優(yōu)化設(shè)計，提升用戶體驗(yàn)。設(shè)計之道：統(tǒng)一與多樣并存
================
一、視覺語言的統(tǒng)一性
在圖標(biāo)設(shè)計中，視覺語言的統(tǒng)一至關(guān)重要。無論是色彩、形狀還是設(shè)計風(fēng)格，都需要保持一貫性。這種統(tǒng)一性能確保品牌的連貫性和識別度。例如，一個品牌的圖標(biāo)設(shè)計，應(yīng)該讓消費(fèi)者在第一眼就能識別出品牌的獨(dú)特性和核心價值。
二、圖標(biāo)設(shè)計的協(xié)調(diào)性
圖標(biāo)的復(fù)雜程度也應(yīng)保持統(tǒng)一。不應(yīng)出現(xiàn)某些圖標(biāo)過于復(fù)雜，而另一些又過于簡單的情況。整體設(shè)計的協(xié)調(diào)性和統(tǒng)一性也至關(guān)重要。一個優(yōu)秀的圖標(biāo)設(shè)計不僅要與品牌風(fēng)格相匹配，還要確保在多種場景中都能保持其獨(dú)特的視覺沖擊力。
三、視覺體系的集中性
一個成功的圖標(biāo)設(shè)計需要有一個集中的視覺體系。這意味著所有的設(shè)計元素都應(yīng)該圍繞一個中心思想或主題進(jìn)行。只有這樣，才能確保設(shè)計的高度集中和一致性。
四、圖標(biāo)配色的策略性
在圖標(biāo)設(shè)計中，配色的選擇同樣重要。統(tǒng)一的配色不僅能增強(qiáng)品牌的識別度，還能傳遞品牌的情感和價值觀。設(shè)計師需要深入考慮每種顏色所代表的含義，以及如何在圖標(biāo)設(shè)計中合理運(yùn)用這些顏色。
五、圖標(biāo)交付的格式選擇
談到圖標(biāo)的交付格式，常見的有JPG、PNG、GIF和SVG四種。JPG兼容性強(qiáng)，但不支持縮放；PNG支持透明格式，但同樣不支持縮放。GIF適用于簡單的動態(tài)圖標(biāo)，但邊緣可能會有鋸齒，顏色表達(dá)有限。而SVG作為一種矢量格式，支持無損縮放，并且在單色模式下可靈活修改顏色和樣式參數(shù)。
在實(shí)際操作中，設(shè)計師可能會遇到多種交付方式的需求。例如，將SVG格式的圖標(biāo)上傳至iconfont網(wǎng)站進(jìn)行交付時，需要注意SVG的一些限制，如不支持漸變顏色填充和描邊。為了滿足高清設(shè)備的適配需求，設(shè)計師可能需要提供多種倍數(shù)的圖標(biāo)。隨著開發(fā)軟件和插件的進(jìn)步，如今的多倍圖切割功能已經(jīng)相當(dāng)成熟，如藍(lán)湖軟件。
除了技術(shù)層面的要求，一個成功的圖標(biāo)設(shè)計還需要深入了解圖標(biāo)的歷史和背后的文化內(nèi)涵。只有這樣，設(shè)計師才能創(chuàng)作出既符合品牌需求又具有獨(dú)特魅力的圖標(biāo)作品。
設(shè)計是一個既需要保持統(tǒng)一又需要追求豐富的過程。設(shè)計師需要在保持視覺語言、圖標(biāo)設(shè)計和整體設(shè)計的統(tǒng)一性的注重圖標(biāo)的配色策略、交付格式選擇和歷史文化內(nèi)涵的融入，從而創(chuàng)作出既具有品牌特色又富有吸引力的圖標(biāo)作品。圖像學(xué)的簡要?dú)v史及其在設(shè)計領(lǐng)域的應(yīng)用
《Icon Design Guide》、《Icon Utopia》與《the Ultimate Guide to an Interface Icon Set》的啟示
一、圖像學(xué)的歷史演變
從早期的繪畫和雕塑，到現(xiàn)代的攝影和計算機(jī)圖形，圖像學(xué)一直在不斷地發(fā)展和演變。隨著科技的進(jìn)步，圖像設(shè)計已經(jīng)成為了現(xiàn)代設(shè)計領(lǐng)域中不可或缺的一部分。在移動設(shè)備普及的今天，圖標(biāo)設(shè)計更是成為了用戶與設(shè)備交互的重要媒介。
二、appicon：應(yīng)用圖標(biāo)的設(shè)計與意義
AppIcon作為移動應(yīng)用的重要識別標(biāo)志，是用戶認(rèn)識和應(yīng)用你的應(yīng)用的關(guān)鍵元素。一個優(yōu)秀的AppIcon不僅能吸引用戶的注意，更能提高應(yīng)用的度和品牌形象。其設(shè)計要素包括應(yīng)用名稱、顏色、形狀、圖案和字體大小等，需要充分傳遞應(yīng)用的主題和訴求。例如，運(yùn)動健身類應(yīng)用需要通過圖案傳達(dá)健康、活力的信息，而文學(xué)閱讀類應(yīng)用則需要通過字體和色調(diào)傳達(dá)溫馨、靜心的感覺。
三、Unity Android中快速設(shè)置App Icon的技巧
在Unity Android項(xiàng)目中，設(shè)置App Icon的過程往往比較繁瑣。這里提供一種快速設(shè)置App Icon的方法：
1. 需求：簡化unity和 android的設(shè)置app icon的操作，最好能夠?qū)崿F(xiàn)拖入即用。
2. 實(shí)現(xiàn)步驟：
a. 在Plugins/Android目錄下創(chuàng)建res文件夾。
b. 模仿Unity打包時自動產(chǎn)生的icon文件夾，將其復(fù)制到res目錄下。
c. 將對應(yīng)的icon文件放入相應(yīng)的文件夾。其中，ic_launcher為方形圖標(biāo)，ic_launcher_round為圓形圖標(biāo)。
d. 打開Plugins/Android下的LauncherManifest.xml文件，添加對應(yīng)的圖標(biāo)路徑。例如，添加android:icon="@mipmap/ic_launcher"為方形圖標(biāo)，android:roundIcon="@mipmap/ic_launcher_round"為圓形圖標(biāo)。
e. 使用Unity進(jìn)行打包，就會發(fā)現(xiàn)App Icon已經(jīng)更改。
這一方法的優(yōu)點(diǎn)是操作簡單，能夠大大提高開發(fā)效率。也需要注意圖標(biāo)設(shè)計的規(guī)范和質(zhì)量，以確保在不同的設(shè)備和場景下都能良好地展示。
圖像學(xué)在設(shè)計領(lǐng)域的應(yīng)用越來越廣泛，而AppIcon作為移動應(yīng)用的重要識別標(biāo)志，其設(shè)計和設(shè)置都至關(guān)重要。掌握相關(guān)的知識和技巧，能夠更好地進(jìn)行應(yīng)用設(shè)計和開發(fā)，提升用戶體驗(yàn)和品牌形象。
