萬(wàn)字長(zhǎng)文|終極圖標(biāo)設(shè)計(jì)指南——理論篇
編輯導(dǎo)語(yǔ):圖標(biāo)是用戶(hù)界面不可缺少的元素,能夠有效幫助用戶(hù)解決很多問(wèn)題。本篇文章作者分享了有關(guān)圖標(biāo)設(shè)計(jì)的基礎(chǔ)理論,從多個(gè)方面講述了圖標(biāo)的歷史、意義、使用方法、設(shè)計(jì)風(fēng)格、類(lèi)型以及規(guī)格尺寸、交互層等,一起來(lái)學(xué)習(xí)一下吧,希望對(duì)你有幫助。
如今的用戶(hù)界面中,圖標(biāo)絕對(duì)是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小,甚至不被人注意到,但是它們幫助設(shè)計(jì)和用戶(hù)解決了許多問(wèn)題。
圖標(biāo)是可用性和導(dǎo)航的關(guān)鍵,用戶(hù)能夠感知到圖標(biāo)的功用,但是只有設(shè)計(jì)師才會(huì)明白,想要讓圖標(biāo)簡(jiǎn)約、可用還富有表現(xiàn)力,要耗費(fèi)多少時(shí)間和精力。
我們每天接收到各種信息,美的丑的,很多時(shí)候我們看的都是別人家誰(shuí)做的高端的,拔高自己的同時(shí),基礎(chǔ)不能落下。
扎實(shí)的基礎(chǔ)是拔高的前提。喬布斯曾經(jīng)說(shuō)過(guò):“細(xì)節(jié)至關(guān)重要,花費(fèi)時(shí)間仔細(xì)打磨是值得的”。
圖標(biāo)是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件。所以,這篇文章分為上篇、中篇、下篇三部分,仔細(xì)總結(jié)圖標(biāo)的基礎(chǔ)知識(shí)。
從圖標(biāo)的歷史出發(fā),談及到圖標(biāo)的意義、如何使用、設(shè)計(jì)風(fēng)格、圖標(biāo)類(lèi)型、規(guī)格尺寸、交互層等多方面。
一、什么是圖標(biāo)
上世紀(jì)九十年代伴隨IT產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)測(cè)繪,原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識(shí)特定功能的圖形標(biāo)志。
在不同場(chǎng)景下圖標(biāo)的表達(dá)含義也會(huì)有不。
我們從廣義和狹義兩個(gè)角度來(lái)做概述:
- 廣義:具有指代意義的圖形符號(hào),具有高度濃縮并且可以快捷傳達(dá)信息、便于以及的特性。應(yīng)用范圍非常廣泛,包括軟件、硬件、網(wǎng)頁(yè)、社交場(chǎng)所等公共公共場(chǎng)合。所謂無(wú)處不在。例如,男女廁所標(biāo)志,和各種交通標(biāo)志。
- 狹義:應(yīng)用于計(jì)算機(jī)軟件方面。程序標(biāo)識(shí),數(shù)據(jù)標(biāo)識(shí),命令選擇、模式信號(hào)等。圖標(biāo)有助于用戶(hù)快速識(shí)別并且執(zhí)行命令和打開(kāi)相關(guān)程序文件。具有相同擴(kuò)展名的文件具有相同的圖標(biāo)。
UI設(shè)計(jì)中圖標(biāo)主要被劃分為兩大類(lèi):標(biāo)志圖標(biāo)以及功能圖標(biāo)。標(biāo)志圖標(biāo),即手機(jī)APP應(yīng)用的啟動(dòng)入口。
由于這是用戶(hù)接觸app的第一印象,具備品牌傳播的屬性,決定了用戶(hù)去留問(wèn)題。功能性圖標(biāo),主要是app出現(xiàn)在app、網(wǎng)站內(nèi)部,具備功能性引導(dǎo)的功能。
二、圖標(biāo)的意義
隨著人們工作越來(lái)越忙,圖標(biāo)已成為了生活中的一部分。幫助我們快速定位,幫助我們快速的做出決定和行為,以及幫助我們找到需要的東西。
圖標(biāo)連接著整個(gè)世界。不管你使用什么樣的語(yǔ)言,作為視覺(jué)語(yǔ)言的圖標(biāo)都發(fā)揮著巨大的作用。例如機(jī)場(chǎng)中的導(dǎo)航標(biāo)識(shí)、商場(chǎng)中的指示標(biāo)識(shí)等等。圖標(biāo)能夠快速的傳達(dá)信息。隨著信息技術(shù)的提升以及信息過(guò)剩,人們的注意力更加短暫和稀缺,
圖標(biāo)成為了這個(gè)充滿(mǎn)噪音和過(guò)多無(wú)價(jià)值信息世界的救生員。通過(guò)簡(jiǎn)單快速的查看就可以知道圖標(biāo)中攜帶的復(fù)雜信息。優(yōu)秀的圖標(biāo)成為我們生活中的救生員。無(wú)論你需要找到正確的應(yīng)用程序或產(chǎn)品頁(yè)面上的特定功能,又或者當(dāng)你在外國(guó)城市搜索地鐵時(shí),圖標(biāo)都可以節(jié)省你很多時(shí)間。
隨著世界越來(lái)越忙,越來(lái)越嘈雜和全球化,它將在未來(lái)更加重要。
三、圖標(biāo)的優(yōu)勢(shì)
圖標(biāo)設(shè)計(jì)是界面設(shè)計(jì)中很重要的元素之一,一套高質(zhì)量的圖標(biāo)對(duì)產(chǎn)品的品牌形象和用戶(hù)的體驗(yàn)影響是巨大的。不僅能提升界面美觀(guān)度、降低用戶(hù)理解成本,還能塑造品牌形象、提升用戶(hù)的安全感和轉(zhuǎn)化率。
同時(shí)圖標(biāo)具備傳遞信息非常的高效的特點(diǎn)?,F(xiàn)在人類(lèi)能夠維持注意力的時(shí)間越來(lái)越短(已經(jīng)比金魚(yú)還短了),因此傳遞信息的速度就越來(lái)越重要。
1. 圖標(biāo)傳達(dá)信息快
本身對(duì)圖形的理解和接收能力就比單純的文字要快。圖形能更簡(jiǎn)單清晰且很直觀(guān)的展示。
2. 圖標(biāo)傳達(dá)信息準(zhǔn)
通用圖形能跨語(yǔ)言、跨地區(qū)、跨文化群體表達(dá)出同樣含義,不易發(fā)生混淆。同樣文化背景的人對(duì)文字理解可能會(huì)不一致。
如果用圖形就會(huì)一目了然。用戶(hù)已經(jīng)經(jīng)過(guò)了長(zhǎng)時(shí)間不同平臺(tái)長(zhǎng)期培養(yǎng),很多圖標(biāo)已經(jīng)形成了視覺(jué)習(xí)慣,比如齒輪代表設(shè)置、鉛筆代表編輯、放大鏡代表搜索。已經(jīng)超越了語(yǔ)言地區(qū)的限制。
3. 品牌塑造穩(wěn)定
同一個(gè)品牌、同一個(gè)平臺(tái)保持同樣的風(fēng)格圖標(biāo),會(huì)讓人感到很專(zhuān)業(yè)。并且一套好的圖標(biāo)從獨(dú)特性、象征性、記憶性上都更易于感動(dòng)用戶(hù),激發(fā)人們點(diǎn)擊的欲望。用戶(hù)始終在商家提供的環(huán)境里,能提升安全感。例如支付寶、拼多多、網(wǎng)易嚴(yán)選等優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品。
4. 減少用戶(hù)辨識(shí)時(shí)間
人體左腦主要從事思維邏輯處理,右腦主要形象思維,從事視覺(jué)圖像、音樂(lè)、空間幾何處理。據(jù)科學(xué)表明,右腦是左腦處理速度的60萬(wàn)倍,意味著人類(lèi)對(duì)圖像的敏感度是非常高的。所以我們可以將文字圖像化,從而快速引導(dǎo)用戶(hù)接受相應(yīng)消息,進(jìn)行操作,減少理解閱讀思考的時(shí)間。
四、圖標(biāo)的類(lèi)型及設(shè)計(jì)屬性
圖標(biāo)根據(jù)具體實(shí)際用途大體可以分為三大類(lèi):工具圖標(biāo)、裝飾圖標(biāo)、啟動(dòng)圖標(biāo),而根據(jù)設(shè)計(jì)風(fēng)格分類(lèi)主要有線(xiàn)性風(fēng)格、面性風(fēng)格、漸變風(fēng)格、剪影風(fēng)格、長(zhǎng)投影風(fēng)格、卡通風(fēng)格、輕質(zhì)感風(fēng)格、擬物風(fēng)格、2.5D風(fēng)格等等。
1. 工具圖標(biāo)
1)線(xiàn)性風(fēng)格
線(xiàn)性圖標(biāo),即圖形是通過(guò)線(xiàn)條的描邊輪廓勾勒出來(lái)的。多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓,比如上圖案例,線(xiàn)性圖標(biāo)的創(chuàng)作空間看似不多,但實(shí)際上有非常多的調(diào)整空間。特點(diǎn)是簡(jiǎn)約、概括、視覺(jué)識(shí)別度良好,設(shè)計(jì)感強(qiáng)。
2)面性風(fēng)格
面性圖標(biāo),即使用對(duì)內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣,在這類(lèi)圖標(biāo)中,也不是只能應(yīng)用純色的方式進(jìn)行填充,還有非常多的視覺(jué)表現(xiàn)類(lèi)型。
3)混合風(fēng)格
在設(shè)計(jì)圖標(biāo)類(lèi)型的時(shí)候,也不一定非線(xiàn)性和面性不可,有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師,還創(chuàng)作出了混合型的圖標(biāo),既有線(xiàn)性描邊的輪廓,又有色彩填充的區(qū)域。
2. 啟動(dòng)圖標(biāo)
啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類(lèi)型的圖標(biāo)說(shuō)起來(lái)更難,因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。主要分為文字類(lèi)型、圖形類(lèi)型、插畫(huà)類(lèi)型、圖標(biāo)類(lèi)型,擬物類(lèi)型。
3. 裝飾圖標(biāo)
裝飾圖標(biāo)最主要的應(yīng)用區(qū)域,集中在首頁(yè)的快速入口上,也是今天多數(shù)應(yīng)用中會(huì)使用的組件。
1)漸變風(fēng)格
多為單色漸變,顏色過(guò)渡清新自然,是目前的主流設(shè)計(jì)風(fēng)格之一。除用于圖標(biāo)外,漸變風(fēng)格可使用的場(chǎng)景非常多,如APP中的背景圖、按鈕等。
2)輕質(zhì)感風(fēng)格
層次簡(jiǎn)單,用色素雅干凈,采用輕投影、輕漸變的方法設(shè)計(jì)。這類(lèi)圖標(biāo)具有一定的立體感,能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)。
3)輕質(zhì)感風(fēng)格
層次簡(jiǎn)單,用色素雅干凈,采用輕投影、輕漸變的方法設(shè)計(jì)。這類(lèi)圖標(biāo)具有一定的立體感,能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)。
4)2.5d風(fēng)格
介于2D和3D之間,那么它就是在平面上面看立體的2.5D透視原理圖像,就是物體的正面光面和暗面三面組成,也算是偽3D。首先,設(shè)計(jì)師需要設(shè)計(jì)出明暗、背面、正面三個(gè)面的圖像之后,拼合后只需要做圖像、光影關(guān)系的調(diào)整,以及整體配色和感覺(jué)。
5)實(shí)物貼圖風(fēng)格
采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格,它不屬于完全依靠我們創(chuàng)作和繪制出來(lái)的。
6)MBE風(fēng)格
MBE是從扁平化的潮流中逐漸演變而來(lái)的。
最原始的MBE風(fēng)格特征非常明顯:粗描邊、描邊斷點(diǎn)、深淺色調(diào)搭配出陰影質(zhì)感、一般以單色調(diào)為主、背景有些低飽和度的小圓圈和加號(hào)點(diǎn)綴。粗線(xiàn)條描邊起到了對(duì)界面的絕對(duì)隔絕,突顯內(nèi)容,表現(xiàn)清晰,單色調(diào)化繁為簡(jiǎn),富有質(zhì)感。
后期,也有眾多設(shè)計(jì)師對(duì)這種風(fēng)格進(jìn)行了改良,描邊斷點(diǎn)、背景點(diǎn)綴、色彩溢出不再是必要的,進(jìn)一步簡(jiǎn)化了設(shè)計(jì)。
五、如何選擇線(xiàn)性還是面性
基礎(chǔ)功能圖標(biāo)是應(yīng)用程序或網(wǎng)站使用最頻繁的圖標(biāo)。主要作用是替代或者輔助文字來(lái)引導(dǎo)用戶(hù)。
表現(xiàn)形式也比較簡(jiǎn)單無(wú)非三種:線(xiàn)性圖標(biāo)、面性圖標(biāo)、線(xiàn)面結(jié)合。那么我們?cè)诠ぷ髦腥绾握_選擇使用呢?
線(xiàn)性圖標(biāo)顧名思義用線(xiàn)條來(lái)表現(xiàn)繪制。面性圖標(biāo)也就是一個(gè)物體的剪影,用塊來(lái)表現(xiàn)語(yǔ)義。
二者的表現(xiàn)形式卻有很多種,同色的、漸變色的、疊加的、斷線(xiàn)等。在點(diǎn)線(xiàn)面基礎(chǔ)三元素中,從面積大小角度考慮,點(diǎn)最小,面最大。
從視覺(jué)上來(lái)說(shuō),線(xiàn)性給人的感覺(jué)是較為輕量、簡(jiǎn)約。
面性給人的視覺(jué)重量最重,通過(guò)面積、色彩、質(zhì)感等相對(duì)于線(xiàn)性圖標(biāo)具備更強(qiáng)的視覺(jué)信息層級(jí),更具引導(dǎo)性。
線(xiàn)面結(jié)合的方式相較于前兩者,樣式表現(xiàn)會(huì)更為豐富,形式感最強(qiáng)。但由于圖標(biāo)內(nèi)元素增多,如果運(yùn)用不得當(dāng),很容易顯得雜亂。
通常設(shè)計(jì)拿到需求時(shí),首先考慮的是圖標(biāo)的識(shí)別效率,畢竟圖標(biāo)最重要的作用是快速傳遞信息。
線(xiàn)性圖標(biāo)的線(xiàn)條比較微妙尤其是形狀邊緣時(shí)更容易被識(shí)別到,面性的特征就會(huì)被忽略掉。
綜上所述,具體如何使用,需要了解圖標(biāo)的實(shí)際作用是什么,然后做出選擇。市面上的應(yīng)用大多是用線(xiàn)性用在功能圖表為主,面性用在功能區(qū),吸引用戶(hù)點(diǎn)擊。線(xiàn)面結(jié)合用的比較少。
六、如何準(zhǔn)確運(yùn)用圖標(biāo)
1. 面性圖標(biāo)的運(yùn)用
面性圖標(biāo)視覺(jué)表現(xiàn)力強(qiáng),有效的強(qiáng)調(diào)頁(yè)面的視覺(jué)重心,能更好的突出主要業(yè)務(wù)重心,所以常用在首頁(yè)做為主要流量分發(fā)。很多產(chǎn)品在節(jié)日或活動(dòng)中,常常改變面性圖標(biāo)來(lái)營(yíng)造氣氛。
面性圖標(biāo)不建議在列表中大量使用,原因是形式與功能之間的關(guān)系,面性圖標(biāo)的特點(diǎn)是視覺(jué)表現(xiàn)力強(qiáng),不具備高效的識(shí)別性,對(duì)于功能分類(lèi)的列表頁(yè)面,視覺(jué)重點(diǎn)是功能的名稱(chēng),圖標(biāo)的作用是輔助文字表達(dá),需要快速無(wú)差別識(shí)別功能,并不需要高效引導(dǎo)的作用。
2. 面性與異形圖標(biāo)的運(yùn)用
面性圖標(biāo)的第一視覺(jué)是一個(gè)色塊,異形圖標(biāo)第一視覺(jué)是個(gè)形狀,所以面性圖標(biāo)視覺(jué)表現(xiàn)力強(qiáng),異形圖標(biāo)識(shí)別效率高。
通過(guò)二者的這一特征,于是做了這樣的設(shè)計(jì)。第一排的面性圖標(biāo)都是用戶(hù)的高頻使用的業(yè)務(wù)板塊,視覺(jué)上強(qiáng)引導(dǎo)為用戶(hù)優(yōu)先做出選擇,這就是一種高級(jí)的設(shè)計(jì)手法!
3. 用圖標(biāo)區(qū)別視覺(jué)層級(jí)、業(yè)務(wù)板塊
下圖為京東的個(gè)人中心頁(yè)面嘛,圖標(biāo)有主有次,有視覺(jué)層級(jí),強(qiáng)化用戶(hù)常用的或者產(chǎn)品主推的業(yè)務(wù),為用戶(hù)做選擇。
七、圖標(biāo)的用色原則
首先看一下微信以及支付寶的圖標(biāo)設(shè)計(jì),不難發(fā)現(xiàn)運(yùn)用了四色系原則。
保證四個(gè)色系是比較合理的,紅、黃、藍(lán)、綠也符合大多數(shù)業(yè)務(wù)場(chǎng)景屬性。
一般情況下,四色系能保證用色的合理性。當(dāng)然這并不是絕對(duì),只要視覺(jué)舒適,符合業(yè)務(wù),是可以突破四色系的。
拋開(kāi)四色系原則,我們也不難發(fā)現(xiàn)一些應(yīng)用上使用了純黑色的線(xiàn)型圖標(biāo)。其實(shí)純黑色用的好,比四色系更容易凸顯逼格,更加高級(jí)。比如得物、小黑盒。一個(gè)是產(chǎn)品特性,潮流相關(guān),一個(gè)是傳遞品牌特性。
黑色象征著高貴、穩(wěn)重、科技、潮流。黑色是一個(gè)很神奇的顏色,可以莊重、高雅,也可以讓其他顏色(亮色)突出出來(lái)。不難理解,得物為什么用黑色,潮流相關(guān),凸顯個(gè)性、有逼格;小黑盒用黑色,與游戲相關(guān),大多是男性用戶(hù)居多,而且品牌中有“黑”,也契合品牌。
八、圖標(biāo)的大小規(guī)范
1. 圖標(biāo)大小
iOS的網(wǎng)格大小要求是4的倍數(shù),最小熱區(qū)是44pt。安卓的設(shè)計(jì)規(guī)范要求網(wǎng)格大小是8的倍數(shù),最小操作熱區(qū)為48dp。
同時(shí)需要考慮到不同機(jī)型適配問(wèn)題。@2x要求是4的倍數(shù),被2整除適配@1x;@3x要求12的倍數(shù),適配@1x、@2x。建議是采用48pt為常規(guī)尺寸。
2. 圖標(biāo)粗細(xì)
為了保證圖標(biāo)能夠看清,圖標(biāo)的粗細(xì)也有相應(yīng)的要求,太細(xì)會(huì)存在看不清的情況。
在@1x一倍圖設(shè)計(jì)模式下,以48px為基準(zhǔn),常用的圖標(biāo)粗細(xì)有:1.5px、2px、3px、4px。需要注意在48X48px畫(huà)布上繪制線(xiàn)性圖標(biāo),線(xiàn)寬為4px時(shí),當(dāng)不同場(chǎng)景縮放,需要按比例進(jìn)行調(diào)整:圖標(biāo)為32X32px時(shí)線(xiàn)寬為3px;圖標(biāo)為24X24px時(shí)線(xiàn)寬為2px;圖標(biāo)為16X16px時(shí)線(xiàn)寬為2px。
3. 物理大小&視覺(jué)大小
在繪制一整套圖標(biāo)的時(shí)候,總被說(shuō)視覺(jué)不統(tǒng)一,大小不一樣。這是因?yàn)槟惆凑瘴锢泶笮≡谧鰣D標(biāo),忽略了視覺(jué)大小。分別是什么意思呢?
物理大小是形狀之間的寬和高相同,不是計(jì)算面積;視覺(jué)大小是,正方形的邊長(zhǎng)跟圓形的直徑相等的情況下,繪制出來(lái)的圖形,視覺(jué)上圓總要小一點(diǎn)。
也就是視覺(jué)大小。需要通過(guò)人眼去判斷不斷的微調(diào)大小和比例。視覺(jué)大小是感受上的視覺(jué)。
除了正方形跟圓意外,還有菱形,三角形。在繪制這類(lèi)圖形,一定要注意視覺(jué)大小。別再讓別人說(shuō)你的圖標(biāo)不統(tǒng)一了。
為了保證圖標(biāo)的視覺(jué)統(tǒng)一,通常會(huì)借助網(wǎng)格(keyline線(xiàn))
4. 什么是圖標(biāo)網(wǎng)格
把圖標(biāo)網(wǎng)格當(dāng)成一種約束,讓你的圖標(biāo)集保持規(guī)范統(tǒng)一。網(wǎng)格是一個(gè)框架,讓你的圖標(biāo)保持統(tǒng)一。
5. 什么時(shí)候使用網(wǎng)格
網(wǎng)格是一個(gè)框架結(jié)構(gòu),會(huì)在這個(gè)基礎(chǔ)上圖標(biāo)會(huì)保持一致。如果未來(lái)這些圖標(biāo)被其他人維護(hù)的時(shí)候,網(wǎng)格也可以起到很好的作用。
網(wǎng)格很像遵循的規(guī)則,讓其他設(shè)計(jì)師在最開(kāi)始就明白圖標(biāo)的尺寸、以及設(shè)計(jì)規(guī)范。
當(dāng)然并不是所有時(shí)候繪制圖標(biāo)都必須先建立網(wǎng)格。如果你要?jiǎng)?chuàng)建超過(guò)50個(gè)圖標(biāo)以上的圖標(biāo)集時(shí),網(wǎng)格還是很有必要的。
你要使用同一種風(fēng)格創(chuàng)建很多圖標(biāo),網(wǎng)格有助于保持視覺(jué)網(wǎng)格統(tǒng)一 。
另一個(gè)情況是當(dāng)你要給現(xiàn)有的平臺(tái)設(shè)計(jì)圖標(biāo),而這個(gè)平臺(tái)有自己的圖標(biāo)網(wǎng)格。
如給 iOS或Android 設(shè)計(jì)圖標(biāo), 你最好使用它們平臺(tái)的網(wǎng)格規(guī)范。這些網(wǎng)格確保它們?cè)诟鱾€(gè)平臺(tái)上保持網(wǎng)格統(tǒng)一,你應(yīng)該遵循這些規(guī)則,確保和平臺(tái)的風(fēng)格保持一致。
九、圖標(biāo)常用尺寸
1. iPhone圖標(biāo)尺寸規(guī)范
@2x格式使用機(jī)型:iPhone 4,4s,5,5s,5s,s,6,6s,7,8,XR;
@3x格式使用機(jī)型:iPhone 6P,6SP,7P,8P,X,XS,XS Max;
2. 安卓圖標(biāo)尺寸規(guī)范
3. iPad圖標(biāo)尺寸規(guī)范
十、如何統(tǒng)一圖標(biāo)
1. 創(chuàng)建凝聚力的圖標(biāo)集
創(chuàng)建一個(gè)圖標(biāo)很容易。創(chuàng)建一些美觀(guān)的圖標(biāo)也不難。這使它們具有凝聚力,可能會(huì)是一個(gè)難點(diǎn)。完成一組連貫的圖標(biāo)是一個(gè)艱巨的挑戰(zhàn)。下面有6個(gè)有用的技巧,可以掌握如何創(chuàng)建精美的具備凝聚力的圖標(biāo)集。
2. 為什么圖標(biāo)應(yīng)該具有凝聚力
圖標(biāo)設(shè)計(jì)不僅僅是代表真實(shí)對(duì)象的圖形符號(hào)。這是一種獨(dú)特的語(yǔ)言,其中每個(gè)圖標(biāo)都是一個(gè)具有自己含義的名詞。
就像在現(xiàn)實(shí)世界中與伴侶聊天一樣,可以使用圖標(biāo)與數(shù)字世界中的人進(jìn)行交流。
在一組使用樣式不同的圖標(biāo)就像在一個(gè)句子中混合使用不同的語(yǔ)言–即使您很好的被人們所理解,人們也不會(huì)認(rèn)真對(duì)待您。
1)堅(jiān)持一種風(fēng)格
這是要使圖標(biāo)漂亮且一致的關(guān)鍵。在確定圖標(biāo)的樣式之前,請(qǐng)勿開(kāi)始制作任何圖標(biāo)。
有很多樣式和樣式變體。最常見(jiàn)的是:輪廓圖標(biāo),字形,平面圖標(biāo),擬形圖標(biāo),手繪等。一旦確定了未來(lái)圖標(biāo)的樣式,請(qǐng)堅(jiān)持使用該圖標(biāo)集中的每個(gè)圖標(biāo)。具有不同樣式的圖標(biāo)引人注目,但效果并不理想。它破壞了整個(gè)集合的凝聚力,美感和價(jià)值。
從決定使用哪種樣式的那一刻起,所有設(shè)置的圖標(biāo)都應(yīng)使用相同的樣式制作。不要讓風(fēng)格各異的圖標(biāo)殺死場(chǎng)景并破壞其背后的辛苦工作。
2)保持相同的風(fēng)格
這與保持相同樣式略有不同。
每種風(fēng)格都有其個(gè)性。例如,可以制作成千上萬(wàn)種不同的輪廓圖標(biāo)變體。但是選擇正確的樣式同樣重要。
圖標(biāo)是詳細(xì)的還是簡(jiǎn)約的?有粗線(xiàn)還是細(xì)線(xiàn)更好?還是混合線(xiàn)寬?那角落呢:它們應(yīng)該是圓的還是尖的?要使用圓形或?qū)用眴幔?/p>
確切知道為什么每個(gè)元素都按您的方式進(jìn)行。考慮一下您未來(lái)圖標(biāo)集的所有可能細(xì)節(jié),并一直堅(jiān)持到最后。
3)大小相同
保持集合中每個(gè)圖標(biāo)的大小相同。它們不僅應(yīng)該在相同大小的方形框架中,而且看起來(lái)也應(yīng)該相等!
想象兩個(gè)相同大小的形狀–圓形和正方形。正方形將始終看起來(lái)更大,因?yàn)樗鼤?huì)填充更多空間。應(yīng)該進(jìn)行一些更改以使它們?cè)谕庥^(guān)上相同。例如,將正方形縮小一點(diǎn)。
4)使用網(wǎng)格
出色的圖標(biāo)集始終使用網(wǎng)格制作。只是不要過(guò)度使用它們。如果您發(fā)現(xiàn)圖標(biāo)看起來(lái)不適合網(wǎng)格,請(qǐng)調(diào)整!好的集合有一個(gè)網(wǎng)格。
5)在整個(gè)集合中使用相同的元素
很簡(jiǎn)單:如果您在一個(gè)圖標(biāo)中使用了20px的圓圈,另一個(gè)圖標(biāo)則需要一個(gè)類(lèi)似的圓圈,只需復(fù)制它即可。毫無(wú)疑問(wèn),在整個(gè)集合中具有相等大小的對(duì)象會(huì)使它看起來(lái)更具凝聚力!從其他圖標(biāo)復(fù)制元素將為您節(jié)省大量時(shí)間!
6)使用相同的調(diào)色板
相同的顏色組合應(yīng)該保留在集合的所有圖標(biāo)中。選擇顏色,將它們添加到色板,然后嘗試使用它們。
十一、B端、C端圖標(biāo)的差異
1. 圖標(biāo)內(nèi)容差異化
C端產(chǎn)品的圖標(biāo)設(shè)計(jì)需要突出自己的設(shè)計(jì)理念,還要與其他產(chǎn)品形成個(gè)性化、差異化,尤其是競(jìng)品。
設(shè)計(jì)過(guò)程中盡可能與產(chǎn)品品牌結(jié)合,讓用戶(hù)快速記住你的產(chǎn)品(品牌)。所以C端產(chǎn)品的圖標(biāo)設(shè)計(jì)更具備獨(dú)特的視覺(jué)風(fēng)格。
B端產(chǎn)品的圖標(biāo)設(shè)計(jì)則不需要過(guò)于差異化,主要強(qiáng)調(diào)圖標(biāo)的表意與實(shí)際需求一致。在圖標(biāo)表達(dá)上差距不能太大,同質(zhì)化較為嚴(yán)重。
2. 不同的設(shè)計(jì)難點(diǎn)
C端產(chǎn)品圖標(biāo)更多偏向趣味性,不太會(huì)考慮業(yè)務(wù)層,更多重視視覺(jué)表現(xiàn)與優(yōu)化
B端產(chǎn)品圖標(biāo)更多取決于業(yè)務(wù)。在B端的設(shè)計(jì)場(chǎng)景中,很多圖標(biāo)是與各種業(yè)務(wù)名稱(chēng)關(guān)聯(lián),而業(yè)務(wù)名稱(chēng)復(fù)雜多變,往往去思考每個(gè)業(yè)務(wù)所表達(dá)的特殊含義。
3. 不同的側(cè)重點(diǎn)
C端產(chǎn)品圖標(biāo)數(shù)量較少,但是使用的場(chǎng)景十分復(fù)雜。當(dāng)形成一套視覺(jué)圖標(biāo)體系的時(shí)候,要把多場(chǎng)景的圖標(biāo)進(jìn)行串聯(lián),需要考慮不同功能不同頁(yè)面之間的聯(lián)系。比如首頁(yè)功能區(qū)、分類(lèi)區(qū)、個(gè)人中心等,都要需要保證整體性。
B端產(chǎn)品圖標(biāo)的使用場(chǎng)景比C端少的多,但數(shù)量往往是C端的好幾倍。需要通過(guò)圖標(biāo)保證不同業(yè)務(wù)之間的關(guān)系,所以B端圖標(biāo)更講究延展性。
十二、小結(jié)
整個(gè)圖標(biāo)設(shè)計(jì)分為三篇來(lái)講述的。
- 《理論篇》主要講述圖標(biāo)設(shè)計(jì)的概念以及設(shè)計(jì)原則等理論內(nèi)容;
- 《工作篇》主要講述工作中圖標(biāo)設(shè)計(jì)過(guò)程以及圖標(biāo)落地;
- 《分享篇》主要分享圖標(biāo)設(shè)計(jì)的工具、圖標(biāo)網(wǎng)站、圖標(biāo)設(shè)計(jì)團(tuán)隊(duì)或者設(shè)計(jì)師。
第一篇內(nèi)容就到這里結(jié)束了。
本文由 @卡洛設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash ,基于 CC0 協(xié)議。
文章蠻長(zhǎng)的哈哈,不過(guò)作者確實(shí)從多個(gè)方面講述了圖標(biāo)這一概念,總之,受益匪淺。