萬字長文|終極圖標(biāo)設(shè)計(jì)指南——理論篇

DesignLink
1 評論 2759 瀏覽 14 收藏 29 分鐘
🔗 B端产品需要更多地依赖销售团队和渠道合作来推广产品,而C端产品需要更多地利用网络营销和口碑传播来推广产品..

編輯導(dǎo)語:圖標(biāo)是用戶界面不可缺少的元素,能夠有效幫助用戶解決很多問題。本篇文章作者分享了有關(guān)圖標(biāo)設(shè)計(jì)的基礎(chǔ)理論,從多個(gè)方面講述了圖標(biāo)的歷史、意義、使用方法、設(shè)計(jì)風(fēng)格、類型以及規(guī)格尺寸、交互層等,一起來學(xué)習(xí)一下吧,希望對你有幫助。

如今的用戶界面中,圖標(biāo)絕對是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小,甚至不被人注意到,但是它們幫助設(shè)計(jì)和用戶解決了許多問題。

圖標(biāo)是可用性和導(dǎo)航的關(guān)鍵,用戶能夠感知到圖標(biāo)的功用,但是只有設(shè)計(jì)師才會明白,想要讓圖標(biāo)簡約、可用還富有表現(xiàn)力,要耗費(fèi)多少時(shí)間和精力。

我們每天接收到各種信息,美的丑的,很多時(shí)候我們看的都是別人家誰做的高端的,拔高自己的同時(shí),基礎(chǔ)不能落下。

扎實(shí)的基礎(chǔ)是拔高的前提。喬布斯曾經(jīng)說過:“細(xì)節(jié)至關(guān)重要,花費(fèi)時(shí)間仔細(xì)打磨是值得的”。

圖標(biāo)是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件。所以,這篇文章分為上篇、中篇、下篇三部分,仔細(xì)總結(jié)圖標(biāo)的基礎(chǔ)知識。

從圖標(biāo)的歷史出發(fā),談及到圖標(biāo)的意義、如何使用、設(shè)計(jì)風(fēng)格、圖標(biāo)類型、規(guī)格尺寸、交互層等多方面。

一、什么是圖標(biāo)

上世紀(jì)九十年代伴隨IT產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)測繪,原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識特定功能的圖形標(biāo)志。

在不同場景下圖標(biāo)的表達(dá)含義也會有不。

我們從廣義和狹義兩個(gè)角度來做概述:

  • 廣義:具有指代意義的圖形符號,具有高度濃縮并且可以快捷傳達(dá)信息、便于以及的特性。應(yīng)用范圍非常廣泛,包括軟件、硬件、網(wǎng)頁、社交場所等公共公共場合。所謂無處不在。例如,男女廁所標(biāo)志,和各種交通標(biāo)志。
  • 狹義:應(yīng)用于計(jì)算機(jī)軟件方面。程序標(biāo)識,數(shù)據(jù)標(biāo)識,命令選擇、模式信號等。圖標(biāo)有助于用戶快速識別并且執(zhí)行命令和打開相關(guān)程序文件。具有相同擴(kuò)展名的文件具有相同的圖標(biāo)。

UI設(shè)計(jì)中圖標(biāo)主要被劃分為兩大類:標(biāo)志圖標(biāo)以及功能圖標(biāo)。標(biāo)志圖標(biāo),即手機(jī)APP應(yīng)用的啟動(dòng)入口。

由于這是用戶接觸app的第一印象,具備品牌傳播的屬性,決定了用戶去留問題。功能性圖標(biāo),主要是app出現(xiàn)在app、網(wǎng)站內(nèi)部,具備功能性引導(dǎo)的功能。

二、圖標(biāo)的意義

隨著人們工作越來越忙,圖標(biāo)已成為了生活中的一部分。幫助我們快速定位,幫助我們快速的做出決定和行為,以及幫助我們找到需要的東西。

圖標(biāo)連接著整個(gè)世界。不管你使用什么樣的語言,作為視覺語言的圖標(biāo)都發(fā)揮著巨大的作用。例如機(jī)場中的導(dǎo)航標(biāo)識、商場中的指示標(biāo)識等等。圖標(biāo)能夠快速的傳達(dá)信息。隨著信息技術(shù)的提升以及信息過剩,人們的注意力更加短暫和稀缺,

圖標(biāo)成為了這個(gè)充滿噪音和過多無價(jià)值信息世界的救生員。通過簡單快速的查看就可以知道圖標(biāo)中攜帶的復(fù)雜信息。優(yōu)秀的圖標(biāo)成為我們生活中的救生員。無論你需要找到正確的應(yīng)用程序或產(chǎn)品頁面上的特定功能,又或者當(dāng)你在外國城市搜索地鐵時(shí),圖標(biāo)都可以節(jié)省你很多時(shí)間。

隨著世界越來越忙,越來越嘈雜和全球化,它將在未來更加重要。

三、圖標(biāo)的優(yōu)勢

圖標(biāo)設(shè)計(jì)是界面設(shè)計(jì)中很重要的元素之一,一套高質(zhì)量的圖標(biāo)對產(chǎn)品的品牌形象和用戶的體驗(yàn)影響是巨大的。不僅能提升界面美觀度、降低用戶理解成本,還能塑造品牌形象、提升用戶的安全感和轉(zhuǎn)化率。

同時(shí)圖標(biāo)具備傳遞信息非常的高效的特點(diǎn)?,F(xiàn)在人類能夠維持注意力的時(shí)間越來越短(已經(jīng)比金魚還短了),因此傳遞信息的速度就越來越重要。

1. 圖標(biāo)傳達(dá)信息快

本身對圖形的理解和接收能力就比單純的文字要快。圖形能更簡單清晰且很直觀的展示。

2. 圖標(biāo)傳達(dá)信息準(zhǔn)

通用圖形能跨語言、跨地區(qū)、跨文化群體表達(dá)出同樣含義,不易發(fā)生混淆。同樣文化背景的人對文字理解可能會不一致。

如果用圖形就會一目了然。用戶已經(jīng)經(jīng)過了長時(shí)間不同平臺長期培養(yǎng),很多圖標(biāo)已經(jīng)形成了視覺習(xí)慣,比如齒輪代表設(shè)置、鉛筆代表編輯、放大鏡代表搜索。已經(jīng)超越了語言地區(qū)的限制。

3. 品牌塑造穩(wěn)定

同一個(gè)品牌、同一個(gè)平臺保持同樣的風(fēng)格圖標(biāo),會讓人感到很專業(yè)。并且一套好的圖標(biāo)從獨(dú)特性、象征性、記憶性上都更易于感動(dòng)用戶,激發(fā)人們點(diǎn)擊的欲望。用戶始終在商家提供的環(huán)境里,能提升安全感。例如支付寶、拼多多、網(wǎng)易嚴(yán)選等優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品。

4. 減少用戶辨識時(shí)間

人體左腦主要從事思維邏輯處理,右腦主要形象思維,從事視覺圖像、音樂、空間幾何處理。據(jù)科學(xué)表明,右腦是左腦處理速度的60萬倍,意味著人類對圖像的敏感度是非常高的。所以我們可以將文字圖像化,從而快速引導(dǎo)用戶接受相應(yīng)消息,進(jìn)行操作,減少理解閱讀思考的時(shí)間。

四、圖標(biāo)的類型及設(shè)計(jì)屬性

圖標(biāo)根據(jù)具體實(shí)際用途大體可以分為三大類:工具圖標(biāo)、裝飾圖標(biāo)、啟動(dòng)圖標(biāo),而根據(jù)設(shè)計(jì)風(fēng)格分類主要有線性風(fēng)格、面性風(fēng)格、漸變風(fēng)格、剪影風(fēng)格、長投影風(fēng)格、卡通風(fēng)格、輕質(zhì)感風(fēng)格、擬物風(fēng)格、2.5D風(fēng)格等等。

1. 工具圖標(biāo)

1)線性風(fēng)格

線性圖標(biāo),即圖形是通過線條的描邊輪廓勾勒出來的。多數(shù)人對它樣式認(rèn)識的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓,比如上圖案例,線性圖標(biāo)的創(chuàng)作空間看似不多,但實(shí)際上有非常多的調(diào)整空間。特點(diǎn)是簡約、概括、視覺識別度良好,設(shè)計(jì)感強(qiáng)。

2)面性風(fēng)格

面性圖標(biāo),即使用對內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣,在這類圖標(biāo)中,也不是只能應(yīng)用純色的方式進(jìn)行填充,還有非常多的視覺表現(xiàn)類型。

3)混合風(fēng)格

在設(shè)計(jì)圖標(biāo)類型的時(shí)候,也不一定非線性和面性不可,有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師,還創(chuàng)作出了混合型的圖標(biāo),既有線性描邊的輪廓,又有色彩填充的區(qū)域。

2. 啟動(dòng)圖標(biāo)

啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類型的圖標(biāo)說起來更難,因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。主要分為文字類型、圖形類型、插畫類型、圖標(biāo)類型,擬物類型。

3. 裝飾圖標(biāo)

裝飾圖標(biāo)最主要的應(yīng)用區(qū)域,集中在首頁的快速入口上,也是今天多數(shù)應(yīng)用中會使用的組件。

1)漸變風(fēng)格

多為單色漸變,顏色過渡清新自然,是目前的主流設(shè)計(jì)風(fēng)格之一。除用于圖標(biāo)外,漸變風(fēng)格可使用的場景非常多,如APP中的背景圖、按鈕等。

2)輕質(zhì)感風(fēng)格

層次簡單,用色素雅干凈,采用輕投影、輕漸變的方法設(shè)計(jì)。這類圖標(biāo)具有一定的立體感,能給人輕盈、簡潔、精致的感覺。

3)輕質(zhì)感風(fēng)格

層次簡單,用色素雅干凈,采用輕投影、輕漸變的方法設(shè)計(jì)。這類圖標(biāo)具有一定的立體感,能給人輕盈、簡潔、精致的感覺。

4)2.5d風(fēng)格

介于2D和3D之間,那么它就是在平面上面看立體的2.5D透視原理圖像,就是物體的正面光面和暗面三面組成,也算是偽3D。首先,設(shè)計(jì)師需要設(shè)計(jì)出明暗、背面、正面三個(gè)面的圖像之后,拼合后只需要做圖像、光影關(guān)系的調(diào)整,以及整體配色和感覺。

5)實(shí)物貼圖風(fēng)格

采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格,它不屬于完全依靠我們創(chuàng)作和繪制出來的。

6)MBE風(fēng)格

MBE是從扁平化的潮流中逐漸演變而來的。

最原始的MBE風(fēng)格特征非常明顯:粗描邊、描邊斷點(diǎn)、深淺色調(diào)搭配出陰影質(zhì)感、一般以單色調(diào)為主、背景有些低飽和度的小圓圈和加號點(diǎn)綴。粗線條描邊起到了對界面的絕對隔絕,突顯內(nèi)容,表現(xiàn)清晰,單色調(diào)化繁為簡,富有質(zhì)感。

后期,也有眾多設(shè)計(jì)師對這種風(fēng)格進(jìn)行了改良,描邊斷點(diǎn)、背景點(diǎn)綴、色彩溢出不再是必要的,進(jìn)一步簡化了設(shè)計(jì)。

五、如何選擇線性還是面性

基礎(chǔ)功能圖標(biāo)是應(yīng)用程序或網(wǎng)站使用最頻繁的圖標(biāo)。主要作用是替代或者輔助文字來引導(dǎo)用戶。

表現(xiàn)形式也比較簡單無非三種:線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合。那么我們在工作中如何正確選擇使用呢?

線性圖標(biāo)顧名思義用線條來表現(xiàn)繪制。面性圖標(biāo)也就是一個(gè)物體的剪影,用塊來表現(xiàn)語義。

二者的表現(xiàn)形式卻有很多種,同色的、漸變色的、疊加的、斷線等。在點(diǎn)線面基礎(chǔ)三元素中,從面積大小角度考慮,點(diǎn)最小,面最大。

從視覺上來說,線性給人的感覺是較為輕量、簡約。

面性給人的視覺重量最重,通過面積、色彩、質(zhì)感等相對于線性圖標(biāo)具備更強(qiáng)的視覺信息層級,更具引導(dǎo)性。

線面結(jié)合的方式相較于前兩者,樣式表現(xiàn)會更為豐富,形式感最強(qiáng)。但由于圖標(biāo)內(nèi)元素增多,如果運(yùn)用不得當(dāng),很容易顯得雜亂。

通常設(shè)計(jì)拿到需求時(shí),首先考慮的是圖標(biāo)的識別效率,畢竟圖標(biāo)最重要的作用是快速傳遞信息。

線性圖標(biāo)的線條比較微妙尤其是形狀邊緣時(shí)更容易被識別到,面性的特征就會被忽略掉。

綜上所述,具體如何使用,需要了解圖標(biāo)的實(shí)際作用是什么,然后做出選擇。市面上的應(yīng)用大多是用線性用在功能圖表為主,面性用在功能區(qū),吸引用戶點(diǎn)擊。線面結(jié)合用的比較少。

六、如何準(zhǔn)確運(yùn)用圖標(biāo)

1. 面性圖標(biāo)的運(yùn)用

面性圖標(biāo)視覺表現(xiàn)力強(qiáng),有效的強(qiáng)調(diào)頁面的視覺重心,能更好的突出主要業(yè)務(wù)重心,所以常用在首頁做為主要流量分發(fā)。很多產(chǎn)品在節(jié)日或活動(dòng)中,常常改變面性圖標(biāo)來營造氣氛。

面性圖標(biāo)不建議在列表中大量使用,原因是形式與功能之間的關(guān)系,面性圖標(biāo)的特點(diǎn)是視覺表現(xiàn)力強(qiáng),不具備高效的識別性,對于功能分類的列表頁面,視覺重點(diǎn)是功能的名稱,圖標(biāo)的作用是輔助文字表達(dá),需要快速無差別識別功能,并不需要高效引導(dǎo)的作用。

2. 面性與異形圖標(biāo)的運(yùn)用

面性圖標(biāo)的第一視覺是一個(gè)色塊,異形圖標(biāo)第一視覺是個(gè)形狀,所以面性圖標(biāo)視覺表現(xiàn)力強(qiáng),異形圖標(biāo)識別效率高。

通過二者的這一特征,于是做了這樣的設(shè)計(jì)。第一排的面性圖標(biāo)都是用戶的高頻使用的業(yè)務(wù)板塊,視覺上強(qiáng)引導(dǎo)為用戶優(yōu)先做出選擇,這就是一種高級的設(shè)計(jì)手法!

3. 用圖標(biāo)區(qū)別視覺層級、業(yè)務(wù)板塊

下圖為京東的個(gè)人中心頁面嘛,圖標(biāo)有主有次,有視覺層級,強(qiáng)化用戶常用的或者產(chǎn)品主推的業(yè)務(wù),為用戶做選擇。

七、圖標(biāo)的用色原則

首先看一下微信以及支付寶的圖標(biāo)設(shè)計(jì),不難發(fā)現(xiàn)運(yùn)用了四色系原則。

保證四個(gè)色系是比較合理的,紅、黃、藍(lán)、綠也符合大多數(shù)業(yè)務(wù)場景屬性。

一般情況下,四色系能保證用色的合理性。當(dāng)然這并不是絕對,只要視覺舒適,符合業(yè)務(wù),是可以突破四色系的。

拋開四色系原則,我們也不難發(fā)現(xiàn)一些應(yīng)用上使用了純黑色的線型圖標(biāo)。其實(shí)純黑色用的好,比四色系更容易凸顯逼格,更加高級。比如得物、小黑盒。一個(gè)是產(chǎn)品特性,潮流相關(guān),一個(gè)是傳遞品牌特性。

黑色象征著高貴、穩(wěn)重、科技、潮流。黑色是一個(gè)很神奇的顏色,可以莊重、高雅,也可以讓其他顏色(亮色)突出出來。不難理解,得物為什么用黑色,潮流相關(guān),凸顯個(gè)性、有逼格;小黑盒用黑色,與游戲相關(guān),大多是男性用戶居多,而且品牌中有“黑”,也契合品牌。

八、圖標(biāo)的大小規(guī)范

1. 圖標(biāo)大小

iOS的網(wǎng)格大小要求是4的倍數(shù),最小熱區(qū)是44pt。安卓的設(shè)計(jì)規(guī)范要求網(wǎng)格大小是8的倍數(shù),最小操作熱區(qū)為48dp。

同時(shí)需要考慮到不同機(jī)型適配問題。@2x要求是4的倍數(shù),被2整除適配@1x;@3x要求12的倍數(shù),適配@1x、@2x。建議是采用48pt為常規(guī)尺寸。

2. 圖標(biāo)粗細(xì)

為了保證圖標(biāo)能夠看清,圖標(biāo)的粗細(xì)也有相應(yīng)的要求,太細(xì)會存在看不清的情況。

在@1x一倍圖設(shè)計(jì)模式下,以48px為基準(zhǔn),常用的圖標(biāo)粗細(xì)有:1.5px、2px、3px、4px。需要注意在48X48px畫布上繪制線性圖標(biāo),線寬為4px時(shí),當(dāng)不同場景縮放,需要按比例進(jìn)行調(diào)整:圖標(biāo)為32X32px時(shí)線寬為3px;圖標(biāo)為24X24px時(shí)線寬為2px;圖標(biāo)為16X16px時(shí)線寬為2px。

3. 物理大小&視覺大小

在繪制一整套圖標(biāo)的時(shí)候,總被說視覺不統(tǒng)一,大小不一樣。這是因?yàn)槟惆凑瘴锢泶笮≡谧鰣D標(biāo),忽略了視覺大小。分別是什么意思呢?

物理大小是形狀之間的寬和高相同,不是計(jì)算面積;視覺大小是,正方形的邊長跟圓形的直徑相等的情況下,繪制出來的圖形,視覺上圓總要小一點(diǎn)。

也就是視覺大小。需要通過人眼去判斷不斷的微調(diào)大小和比例。視覺大小是感受上的視覺。

除了正方形跟圓意外,還有菱形,三角形。在繪制這類圖形,一定要注意視覺大小。別再讓別人說你的圖標(biāo)不統(tǒng)一了。

為了保證圖標(biāo)的視覺統(tǒng)一,通常會借助網(wǎng)格(keyline線)

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),會在這個(gè)基礎(chǔ)上圖標(biāo)會保持一致。如果未來這些圖標(biāo)被其他人維護(hù)的時(shí)候,網(wǎng)格也可以起到很好的作用。

網(wǎng)格很像遵循的規(guī)則,讓其他設(shè)計(jì)師在最開始就明白圖標(biāo)的尺寸、以及設(shè)計(jì)規(guī)范。

當(dāng)然并不是所有時(shí)候繪制圖標(biāo)都必須先建立網(wǎng)格。如果你要?jiǎng)?chuàng)建超過50個(gè)圖標(biāo)以上的圖標(biāo)集時(shí),網(wǎng)格還是很有必要的。

你要使用同一種風(fēng)格創(chuàng)建很多圖標(biāo),網(wǎng)格有助于保持視覺網(wǎng)格統(tǒng)一 。

另一個(gè)情況是當(dāng)你要給現(xiàn)有的平臺設(shè)計(jì)圖標(biāo),而這個(gè)平臺有自己的圖標(biāo)網(wǎng)格。

如給 iOS或Android 設(shè)計(jì)圖標(biāo), 你最好使用它們平臺的網(wǎng)格規(guī)范。這些網(wǎng)格確保它們在各個(gè)平臺上保持網(wǎng)格統(tǒng)一,你應(yīng)該遵循這些規(guī)則,確保和平臺的風(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)建一些美觀的圖標(biāo)也不難。這使它們具有凝聚力,可能會是一個(gè)難點(diǎn)。完成一組連貫的圖標(biāo)是一個(gè)艱巨的挑戰(zhàn)。下面有6個(gè)有用的技巧,可以掌握如何創(chuàng)建精美的具備凝聚力的圖標(biāo)集。

2. 為什么圖標(biāo)應(yīng)該具有凝聚力

圖標(biāo)設(shè)計(jì)不僅僅是代表真實(shí)對象的圖形符號。這是一種獨(dú)特的語言,其中每個(gè)圖標(biāo)都是一個(gè)具有自己含義的名詞。

就像在現(xiàn)實(shí)世界中與伴侶聊天一樣,可以使用圖標(biāo)與數(shù)字世界中的人進(jìn)行交流。

在一組使用樣式不同的圖標(biāo)就像在一個(gè)句子中混合使用不同的語言–即使您很好的被人們所理解,人們也不會認(rèn)真對待您。

1)堅(jiān)持一種風(fēng)格

這是要使圖標(biāo)漂亮且一致的關(guān)鍵。在確定圖標(biāo)的樣式之前,請勿開始制作任何圖標(biāo)。

有很多樣式和樣式變體。最常見的是:輪廓圖標(biāo),字形,平面圖標(biāo),擬形圖標(biāo),手繪等。一旦確定了未來圖標(biāo)的樣式,請堅(jiān)持使用該圖標(biāo)集中的每個(gè)圖標(biāo)。具有不同樣式的圖標(biāo)引人注目,但效果并不理想。它破壞了整個(gè)集合的凝聚力,美感和價(jià)值。

從決定使用哪種樣式的那一刻起,所有設(shè)置的圖標(biāo)都應(yīng)使用相同的樣式制作。不要讓風(fēng)格各異的圖標(biāo)殺死場景并破壞其背后的辛苦工作。

2)保持相同的風(fēng)格

這與保持相同樣式略有不同。

每種風(fēng)格都有其個(gè)性。例如,可以制作成千上萬種不同的輪廓圖標(biāo)變體。但是選擇正確的樣式同樣重要。

圖標(biāo)是詳細(xì)的還是簡約的?有粗線還是細(xì)線更好?還是混合線寬?那角落呢:它們應(yīng)該是圓的還是尖的?要使用圓形或?qū)用眴幔?/p>

確切知道為什么每個(gè)元素都按您的方式進(jìn)行??紤]一下您未來圖標(biāo)集的所有可能細(xì)節(jié),并一直堅(jiān)持到最后。

3)大小相同

保持集合中每個(gè)圖標(biāo)的大小相同。它們不僅應(yīng)該在相同大小的方形框架中,而且看起來也應(yīng)該相等!

想象兩個(gè)相同大小的形狀–圓形和正方形。正方形將始終看起來更大,因?yàn)樗鼤畛涓嗫臻g。應(yīng)該進(jìn)行一些更改以使它們在外觀上相同。例如,將正方形縮小一點(diǎn)。

4)使用網(wǎng)格

出色的圖標(biāo)集始終使用網(wǎng)格制作。只是不要過度使用它們。如果您發(fā)現(xiàn)圖標(biāo)看起來不適合網(wǎng)格,請調(diào)整!好的集合有一個(gè)網(wǎng)格。

5)在整個(gè)集合中使用相同的元素

很簡單:如果您在一個(gè)圖標(biāo)中使用了20px的圓圈,另一個(gè)圖標(biāo)則需要一個(gè)類似的圓圈,只需復(fù)制它即可。毫無疑問,在整個(gè)集合中具有相等大小的對象會使它看起來更具凝聚力!從其他圖標(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è)性化、差異化,尤其是競品。

設(shè)計(jì)過程中盡可能與產(chǎn)品品牌結(jié)合,讓用戶快速記住你的產(chǎn)品(品牌)。所以C端產(chǎn)品的圖標(biāo)設(shè)計(jì)更具備獨(dú)特的視覺風(fēng)格。

B端產(chǎn)品的圖標(biāo)設(shè)計(jì)則不需要過于差異化,主要強(qiáng)調(diào)圖標(biāo)的表意與實(shí)際需求一致。在圖標(biāo)表達(dá)上差距不能太大,同質(zhì)化較為嚴(yán)重。

2. 不同的設(shè)計(jì)難點(diǎn)

C端產(chǎn)品圖標(biāo)更多偏向趣味性,不太會考慮業(yè)務(wù)層,更多重視視覺表現(xiàn)與優(yōu)化

B端產(chǎn)品圖標(biāo)更多取決于業(yè)務(wù)。在B端的設(shè)計(jì)場景中,很多圖標(biāo)是與各種業(yè)務(wù)名稱關(guān)聯(lián),而業(yè)務(wù)名稱復(fù)雜多變,往往去思考每個(gè)業(yè)務(wù)所表達(dá)的特殊含義。

3. 不同的側(cè)重點(diǎn)

C端產(chǎn)品圖標(biāo)數(shù)量較少,但是使用的場景十分復(fù)雜。當(dāng)形成一套視覺圖標(biāo)體系的時(shí)候,要把多場景的圖標(biāo)進(jìn)行串聯(lián),需要考慮不同功能不同頁面之間的聯(lián)系。比如首頁功能區(qū)、分類區(qū)、個(gè)人中心等,都要需要保證整體性。

B端產(chǎn)品圖標(biāo)的使用場景比C端少的多,但數(shù)量往往是C端的好幾倍。需要通過圖標(biāo)保證不同業(yè)務(wù)之間的關(guān)系,所以B端圖標(biāo)更講究延展性。

十二、小結(jié)

整個(gè)圖標(biāo)設(shè)計(jì)分為三篇來講述的。

  • 《理論篇》主要講述圖標(biāo)設(shè)計(jì)的概念以及設(shè)計(jì)原則等理論內(nèi)容;
  • 《工作篇》主要講述工作中圖標(biāo)設(shè)計(jì)過程以及圖標(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)載。

題圖來自 Unsplash ,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 文章蠻長的哈哈,不過作者確實(shí)從多個(gè)方面講述了圖標(biāo)這一概念,總之,受益匪淺。

    來自江蘇 回復(fù)
专题
19131人已学习13篇文章
在B端产品设计中,数据的筛选是其中必不可少的一个步骤。本专题的文章提供了B端数据筛选查询的设计思路。
专题
14146人已学习12篇文章
“产品架构能力”是B2B产品经理中泛指设计产品系统架构的能力,这是产品经理非常重要的一个能力。本专题的文章分享了产品架构的设计指南。
专题
12783人已学习12篇文章
发觉用户本能的最好方式就是从用户的心理出发,利用人的本能做产品设计,用最“自然”的方式影响用户的行为。本专题的文章分享了产品心理学。
专题
14247人已学习13篇文章
数据仓库是所有产品的数据中心,公司体系下的所有产品产生的所有数据最终都流向数据仓库。本专题的文章分享了什么是数据仓库和如何搭建数据仓库。