全網(wǎng)最全面的ICON設(shè)計(jì)教學(xué)

2019-05-18 1938 0

undefined


 


 

在 UI 的設(shè)計(jì)體系中,圖標(biāo)是最重要的組成部分之一,是任何 UI 界面中都不可或缺的視覺(jué)元素。了解圖標(biāo)相關(guān)的概念,以及正確繪制的方法,是入門(mén) UI 設(shè)計(jì)的必備條件。

網(wǎng)上現(xiàn)存不少關(guān)于圖標(biāo)繪制的文章和教學(xué),但不是太籠統(tǒng),就是太片面。即使看了很多這種碎片化的知識(shí),也很難在我們的認(rèn)知中對(duì)它有比較全面、系統(tǒng)的認(rèn)識(shí),所以大多數(shù)初級(jí)的 UI 設(shè)計(jì)師,始終畫(huà)不好圖標(biāo)。

針對(duì)這個(gè)問(wèn)題,我希望用一篇長(zhǎng)文來(lái)講清楚圖標(biāo)設(shè)計(jì)的所有要點(diǎn)和具體的設(shè)計(jì)方法,讓所有設(shè)計(jì)新人更快的上手圖標(biāo)設(shè)計(jì)。

本文共分為以下5個(gè)部分:


 

1. 圖標(biāo)設(shè)計(jì)詳解:先對(duì)圖標(biāo)有個(gè)整體的認(rèn)識(shí),了解圖標(biāo)總共有哪些類(lèi)型和應(yīng)用場(chǎng)景。

2. 工具圖標(biāo)設(shè)計(jì):最常見(jiàn)的工具型圖標(biāo)的相關(guān)規(guī)范,以及對(duì)應(yīng)的設(shè)計(jì)案例演示。

3. 裝飾圖標(biāo)設(shè)計(jì):近年來(lái)使用越來(lái)越廣泛的視覺(jué)型圖標(biāo)設(shè)計(jì)認(rèn)識(shí),以及對(duì)應(yīng)的講解。

4. 啟動(dòng)圖標(biāo)設(shè)計(jì):講解啟圖標(biāo)的相關(guān)規(guī)范,如何高效的進(jìn)行設(shè)計(jì)。

5. 圖標(biāo)應(yīng)用詳解:介紹在一個(gè)UI項(xiàng)目中,要應(yīng)用多少種圖標(biāo)規(guī)格,并如何設(shè)計(jì)出正確的圖標(biāo)


 


 

undefined


 


 

圖標(biāo),是一種圖形化的標(biāo)識(shí),它有廣義和狹義兩種概念,廣義指的是所有現(xiàn)實(shí)中有明確指向含義的圖形符號(hào),狹義主要指在計(jì)算機(jī)設(shè)備界面中的圖形符號(hào),有非常大的覆蓋范圍。

對(duì)于 UI 設(shè)計(jì)師而言,我們主要針對(duì)的就是狹義的概念,它是 UI 界面視覺(jué)組成的關(guān)鍵元素之一。

在當(dāng)下最常見(jiàn)的扁平化設(shè)計(jì)風(fēng)格中,界面的實(shí)際視覺(jué)組成只有 4 種元素,圖片、文字、幾何圖形、圖標(biāo)。

undefined

可以說(shuō),圖片、文字、幾何圖形的運(yùn)用,都只用到排版的技巧,而圖標(biāo),是 UI 設(shè)計(jì)中除了插畫(huà)元素以外唯一需要我們 “繪制”、“創(chuàng)作” 的元素,一涉及到這兩件事,難度就直線上升了。

本來(lái)往界面里丟一些方方圓圓、貼幾張圖、填一些字,就可以把界面做出來(lái)了,比如下圖中的 Clear APP,不僅工作量少,而且還符合極簡(jiǎn)原則,為什么還要吃力不討好地設(shè)計(jì)圖標(biāo)?

這就涉及對(duì)圖標(biāo)作用的探討了,為了節(jié)約篇幅,更快進(jìn)入大家最想看的重點(diǎn)干貨,我就不長(zhǎng)篇大論從上古時(shí)期人類(lèi)與圖形符號(hào)的糾葛開(kāi)始寫(xiě)了!就談對(duì)于圖形界面本身,為什么圖標(biāo)有這么重要的地位,沒(méi)它不行。有兩個(gè)原因,第一就是,文字雖然也是一種圖形符號(hào),但相對(duì)于圖標(biāo)而言,文字實(shí)在太復(fù)雜了,在識(shí)別效率上有先天的劣勢(shì)!再者,不同的語(yǔ)言,文字的長(zhǎng)度也不同,如果換成阿拉伯語(yǔ)或者俄羅斯語(yǔ),或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式,將我們想要傳遞的信息進(jìn)行濃縮,不僅易于識(shí)別,也能讓界面更簡(jiǎn)潔,利于排版,比如下方案例。

undefined

第二點(diǎn), 就是關(guān)于視覺(jué)的觀賞性上。有些頁(yè)面中,如果把圖標(biāo)去掉了,也絲毫不會(huì)影響我們的操作效率,以及對(duì)內(nèi)容的理解。但沒(méi)有圖標(biāo),缺少這些點(diǎn)綴,我們就會(huì)覺(jué)得這個(gè)頁(yè)面看起來(lái)總感覺(jué)太枯燥了,不得勁,最好的例子就是應(yīng)用的設(shè)置頁(yè)了,見(jiàn)下方案例。

既然知道了圖標(biāo)的作用和重要性,那么接下來(lái),就要進(jìn)一步了解在工作中我們要設(shè)計(jì)哪些圖標(biāo)。

可以先劃分成三種大類(lèi):


 

    • 工具圖標(biāo)

    • 裝飾圖標(biāo)

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


 

下面,我們將為對(duì)它們分別進(jìn)行介紹,以及展示相關(guān)的設(shè)計(jì)類(lèi)型,方便讀者在開(kāi)始學(xué)習(xí)具體設(shè)計(jì)前,對(duì) UI 設(shè)計(jì)會(huì)創(chuàng)作的圖標(biāo)有更全面的認(rèn)識(shí)。


 


 

1.1 工具圖標(biāo)


 

首先,我們要說(shuō)的是工具圖標(biāo)。這是我們?cè)谌粘S懻撝刑峒白铑l繁的圖標(biāo)類(lèi)型,即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識(shí)。作為最常見(jiàn)的圖標(biāo)類(lèi)型,我們就不需要做太多的說(shuō)明了。

 

雖然理解起來(lái)容易,但是它所包含的設(shè)計(jì)樣式卻并不少,可以把它們歸納成線性、面性兩個(gè)大類(lèi),再分別進(jìn)行細(xì)分。
 


 

風(fēng)格1:線性風(fēng)格


 

線性圖標(biāo),即圖形是通過(guò)線條的描邊輪廓勾勒出來(lái)的!多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓,比如上圖案例,線性圖標(biāo)的創(chuàng)作空間看似不多,但實(shí)際上有非常多的調(diào)整空間。

下面我們把它們統(tǒng)一羅列出來(lái)。


 

風(fē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)型。


 

風(fēng)格3:混合風(fēng)格
 


 

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


 

1.2 裝飾圖標(biāo)


 

和工具圖標(biāo)比起來(lái),裝飾圖標(biāo)的視覺(jué)性作用更多。對(duì)于一些比較復(fù)雜的應(yīng)用來(lái)說(shuō),過(guò)分的簡(jiǎn)約并不能彌補(bǔ)信息過(guò)多的信噪問(wèn)題,我們要通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性,減少一屏內(nèi)顯示內(nèi)容的數(shù)量。

比如在分類(lèi)列表里,是可以只使用線框和文字把大量?jī)?nèi)容濃縮到一屏以內(nèi),但實(shí)際瀏覽效率并不會(huì)增加,而且并不美觀。

還有,就是國(guó)內(nèi)的界面設(shè)計(jì)環(huán)境,會(huì)根據(jù)運(yùn)營(yíng)的設(shè)計(jì)需求進(jìn)行特殊化處理,尤其在電商領(lǐng)域,首屏的圖標(biāo)都會(huì)改成首頁(yè)風(fēng)格的樣式,增加活動(dòng)氛圍。

裝飾性的圖標(biāo)設(shè)計(jì),雖然沒(méi)有明確的規(guī)范該怎么做,效果怎么好怎么來(lái),但最常見(jiàn)的類(lèi)型有四種,下面分別進(jìn)行介紹。


 

扁平風(fēng)格


扁平風(fēng)格的裝飾圖標(biāo),通??梢岳斫獬墒怯帽馄讲瀹?huà)的方式畫(huà)出來(lái)的圖標(biāo),除了繼承扁平的純色填充特性以外,也相對(duì)于普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性。


 

擬物風(fēng)格


擬物風(fēng)格的圖標(biāo)現(xiàn)在出現(xiàn)的頻率越來(lái)越高,集中在大型的運(yùn)營(yíng)活動(dòng)中,通常這些活動(dòng)會(huì)通過(guò)擬物的方式將頭部設(shè)計(jì)成有故事性的場(chǎng)景,所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計(jì)形式會(huì)更貼合。


 

2.5D 風(fēng)格


2.5D是一種偏卡通、像素畫(huà)風(fēng)格的扁平設(shè)計(jì)類(lèi)型,在一些非必要的設(shè)計(jì)環(huán)境中,使用 2.5D 會(huì)比較容易搭配主流的界面設(shè)計(jì)風(fēng)格,有更強(qiáng)的趣味性和層次感。


 

炫彩漸變


 

這是一個(gè)拗口的原創(chuàng)名詞,找不到更合適的,還是覺(jué)得浮夸點(diǎn)符合它的氣質(zhì)。這種圖標(biāo),就是通過(guò)一系列非常激進(jìn)的漸變和撞色實(shí)現(xiàn),通常還會(huì)使用彩色的陰影。

使用這樣圖標(biāo)的區(qū)域,通常都會(huì)呈現(xiàn)出一副五彩斑斕的景象,只有在內(nèi)容非常豐富且用戶偏向年輕化的產(chǎn)品中可以使用,是一種非常難駕馭的設(shè)計(jì)風(fēng)格。


實(shí)物貼圖


最后一種,就是采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來(lái)的,但想想還是放進(jìn)來(lái)合適。因?yàn)檫@種圖標(biāo)的出現(xiàn)頻率非常高,有必要再后面掌握它的做法。


 


 

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


 

最后,就要說(shuō)說(shuō)啟動(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)。

除了必要的規(guī)范掌握以外,啟動(dòng)圖標(biāo)的主體物設(shè)計(jì)就是 LOGO 的設(shè)計(jì),已經(jīng)超出了圖標(biāo)繪制本身的知識(shí)點(diǎn)。所以,在后面我會(huì)針對(duì)這個(gè)問(wèn)題講解一些比較套路易懂的設(shè)計(jì)方案供新手學(xué)習(xí),這里我們先來(lái)了解一下它有哪幾種設(shè)計(jì)形式。


文字形式


 

適用了文字作為圖標(biāo)主體物的類(lèi)型,通常是這類(lèi)應(yīng)用本身的品牌 LOGO 就使用了文字,所以這里就把字體照搬過(guò)來(lái)。


 

圖標(biāo)形式


對(duì)于一些偏工具,適合用簡(jiǎn)單圖形傳達(dá)應(yīng)用功能的啟動(dòng)圖標(biāo),就會(huì)采取使用工具圖標(biāo)的方式設(shè)計(jì)。


 

圖形形式


 

圖形形式看起來(lái)和圖標(biāo)形式很接近,但實(shí)際上完全不屬于同一類(lèi)型,之所以它不是圖標(biāo),是因?yàn)檫@類(lèi)圖標(biāo)的主體圖形是一種經(jīng)過(guò)高度抽象化的標(biāo)識(shí),傳達(dá)的是品牌性,而不是圖形的含義。


 

插畫(huà)形式


 

對(duì)于一些比較純粹的應(yīng)用,如讀本、漫畫(huà)、幼兒類(lèi)應(yīng)用,就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計(jì)。


 

擬物形式


雖然現(xiàn)在扁平化的設(shè)計(jì)占據(jù)主導(dǎo)地位,但依舊有很多應(yīng)用的啟動(dòng)圖標(biāo)是通過(guò)擬物的方式設(shè)計(jì)的。因?yàn)閷?duì)于這些應(yīng)用來(lái)說(shuō),擬物設(shè)計(jì)所傳遞的信息往往更直觀和準(zhǔn)確。

當(dāng)然,還有其它的數(shù)之不盡的啟動(dòng)圖標(biāo)設(shè)計(jì)方式,比如明星大頭照、攝影圖、游戲原畫(huà)等,但理解上面這些類(lèi)型就夠了!

前面介紹的三種圖標(biāo),就是今后在進(jìn)入 UI 行業(yè)設(shè)計(jì)的內(nèi)容。雖然圖標(biāo)看起來(lái)簡(jiǎn)單,但可以玩出的花樣不少。除了正確設(shè)計(jì)出圖標(biāo)以外,高低階的 UI 設(shè)計(jì)師之間的區(qū)別也包含圖標(biāo)設(shè)計(jì)類(lèi)型掌握的多寡。

所以,在開(kāi)始學(xué)習(xí)前,不要將設(shè)計(jì)圖標(biāo)的目標(biāo)局限在最簡(jiǎn)單的圖形繪制上,還有很多有趣的設(shè)計(jì)形式等待你們?nèi)L試。
 


 


 

undefined


 


 

了解了圖標(biāo)的類(lèi)型,就要開(kāi)始了解做出這些圖標(biāo)應(yīng)該使用哪些軟件了!通常,UI 主要使用的設(shè)計(jì)軟件包含 PS、AI、Sketch、XD 四款,理論上,它們都包含了圖標(biāo)繪制的功能,如果我直接告訴大家去精通這 4 款軟件那么畫(huà)圖標(biāo)就一點(diǎn)難度都沒(méi)有了,這是非常不負(fù)責(zé)任的,所以為了對(duì)新人更友好一點(diǎn)(如果已經(jīng)全部精通了,就直接略過(guò)),我會(huì)分析一遍這四款軟件對(duì)于圖標(biāo)設(shè)計(jì)的優(yōu)劣,以及需要掌握的部分。


 

Sketch/XD


 

這兩款軟件是我們?cè)O(shè)計(jì) UI 界面的主力。但大家一定要記得,它們主要的功能是用來(lái)完成 UI 界面元素的排版,而不是創(chuàng)作和繪圖。

雖然它們都包含路徑、鋼筆、布爾、等功能(Sketch 相對(duì) XD 更完善一點(diǎn)點(diǎn)),想要繪制一些非?;A(chǔ)的線性或面性圖標(biāo)時(shí)沒(méi)有問(wèn)題,但只要涉及到比較復(fù)雜的圖形,往往就束手無(wú)策。

所以,我建議所有學(xué)習(xí) UI 的新人,都不要從這兩個(gè)軟件中入手,而是先掌握 PS 和 AI,后面想要快速實(shí)現(xiàn)一些簡(jiǎn)單的圖標(biāo)時(shí),自然懂得如何使用 Sketch 和 XD。

可以說(shuō),PS 和 AI 的應(yīng)用決定了我們圖標(biāo)設(shè)計(jì)的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。


Adobe Photoshop
 

undefined

PS 是一款無(wú)論什么東西都設(shè)計(jì)得出來(lái)的設(shè)計(jì)軟件,但是,它本質(zhì)上是一款 “位圖軟件”。后續(xù)的文章中會(huì)提及,在界面中采用矢量格式的圖標(biāo)是最理想的,而 PS 針對(duì)矢量的操作并不便捷,比如將矢量圖層復(fù)制到其它軟件中。

實(shí)際項(xiàng)目中,我們會(huì)用 PS 設(shè)計(jì)一些視覺(jué)表現(xiàn)相對(duì)復(fù)雜的圖標(biāo),例如啟動(dòng)圖標(biāo)、擬物圖標(biāo)、實(shí)物圖標(biāo)等等。

繪制圖標(biāo)需要用到的 PS 功能并不太多,需要在前期學(xué)習(xí)這個(gè)軟件的過(guò)程中加以篩選,重點(diǎn)是以下知識(shí)點(diǎn):


 

    • 路徑創(chuàng)建和調(diào)整
 

    • 鋼筆工具和錨點(diǎn)
 

    • 路徑圖層
 

    • 布爾運(yùn)算
 

    • 圖層屬性
 


 

雖然 PS 在實(shí)際項(xiàng)目中是用來(lái)畫(huà)復(fù)雜的圖標(biāo),但并不妨礙我們使用 PS 從最基礎(chǔ)的圖標(biāo)開(kāi)始畫(huà)起,因?yàn)橄胍炀氄莆丈戏降闹R(shí)點(diǎn),簡(jiǎn)易的工具圖標(biāo)是最好的磨刀石,之后再學(xué)習(xí) AI 的操作,就可以更快的上手。

PS:最近在準(zhǔn)備一套 PS 教學(xué),就會(huì)比較完整的講解一遍這些功能和對(duì)應(yīng)操作。


 

Adobe Illustrator

undefined

AI 也是 UI 設(shè)計(jì)必學(xué)的一款軟件,它的功能異常豐富,主要用來(lái)設(shè)計(jì)矢量圖形。對(duì)比 PS,它有更好的矢量操作支持,對(duì)于路徑細(xì)節(jié)的調(diào)整上,是最全面最細(xì)膩的軟件,并且 AI 中的圖形還可以直接復(fù)制黏貼到其它應(yīng)用的畫(huà)布中。

如果掌握了上方提及的 PS 基礎(chǔ),那么學(xué)習(xí) AI 也就輕松了不少,其中,AI 設(shè)計(jì)圖標(biāo)中有三個(gè)特殊的功能是需要重點(diǎn)掌握和學(xué)習(xí)的:


 

    • 形狀生成器
 

    • 輪廓化描邊
 

    • 路徑查找器
 


 

花幾個(gè)晚上,掌握了 PS 和 AI 的相關(guān)知識(shí)點(diǎn)以后,就可以為我們后續(xù)的學(xué)習(xí)提供良好的支持!


 


 

undefined


 


 

但是現(xiàn)在還不要迫不及待地打開(kāi)軟件,在實(shí)際上手操作繪制圖標(biāo)之前,我想先講講規(guī)范。
 

是的,現(xiàn)在還不到實(shí)操的時(shí)候,規(guī)范之于畫(huà)圖標(biāo),就好像音標(biāo)之于學(xué)英語(yǔ),都是基礎(chǔ)中的基礎(chǔ),也都是大家最容易忽略的東西。

如果對(duì)規(guī)范沒(méi)有一個(gè)清晰的認(rèn)知,那也是無(wú)法獨(dú)立畫(huà)好一套圖標(biāo)的!希望讀者千萬(wàn)不要跳過(guò)這部分的講解直接去看演示了。
 


 


 

3.1 表意的準(zhǔn)確性


 

在第一部分中,我們知道圖標(biāo)的主要作用之一就是作為文字的替代品,具有明確的寓意。比如看見(jiàn)一個(gè)放大鏡,我們會(huì)當(dāng)成那是搜索,看見(jiàn)鑰匙或者鎖,我們就會(huì)理解成是密碼,比如下面這些圖標(biāo),每一個(gè)指代的功能和寓意都是非常直白、清晰的。

 

undefined

表達(dá)的寓意清晰,是工具圖標(biāo)最基本的要求,否則它只會(huì)傳遞錯(cuò)誤的信息,造成用戶的困惑。

在常見(jiàn)的圖標(biāo)類(lèi)型里,如通知、設(shè)置、用戶、分享之類(lèi)的圖標(biāo),對(duì)于任何手機(jī)用戶來(lái)說(shuō)都沒(méi)有認(rèn)知和選擇壓力。但表意準(zhǔn)確麻煩的地方在于,一些非常規(guī)的寓意,極難用圖標(biāo)表現(xiàn)出來(lái),這才是我們使用工具圖標(biāo)的首要麻煩。

比如下方這些圖標(biāo),如果我不加上文字信息,大家能理解它們是什么嗎?

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507

那么,我們?cè)侔盐淖中畔⒀a(bǔ)充進(jìn)去,是不是就會(huì)覺(jué)得圖形挺貼合內(nèi)容的。

 

在這種案例中,我們要關(guān)注的就是,面對(duì)這樣不常見(jiàn)的內(nèi)容,設(shè)計(jì)師是怎么把圖形的創(chuàng)意和樣式想出來(lái)的!如果自己遇到一樣的問(wèn)題怎么辦?

所以,除了知道每個(gè)工具圖標(biāo)都要表意準(zhǔn)確這樣 “正確的廢話” 以后,我們?cè)摽纯慈绾瓮ㄟ^(guò)合適的創(chuàng)意將圖標(biāo)樣式確定出來(lái)。

一般抽象的圖標(biāo),難點(diǎn)在于寓意信息是非實(shí)體的,所以我們很難直接構(gòu)建對(duì)圖形樣式的聯(lián)想,所以首先我們得想辦法將抽象的內(nèi)容 “實(shí)體化”。也就是說(shuō),我們可以先把這個(gè)詞寫(xiě)到紙上,然后把和這個(gè)抽象信息相關(guān)的所有實(shí)體物寫(xiě)下來(lái)。

 

然后,我們可以挑選出某個(gè)合適的實(shí)物,以它作為原型開(kāi)始繪制。如果對(duì)這些挑選出來(lái)的實(shí)物要以什么圖形表現(xiàn)還是沒(méi)概念,那就可以借助網(wǎng)上的圖標(biāo)素材網(wǎng)站,比如 iconfont、iconfinder 等,在搜索框中輸入這些詞語(yǔ),通過(guò)別人的設(shè)計(jì)收獲靈感。

 

如果本身?yè)碛斜容^好的手繪基礎(chǔ)或是平面基礎(chǔ),也可以直接通過(guò)對(duì)照片進(jìn)行提煉的方式,設(shè)計(jì)出圖形內(nèi)容。

所以,在設(shè)計(jì)圖標(biāo)時(shí)符合表意準(zhǔn)確的概念,需要設(shè)計(jì)師不斷收集圖形,并提升對(duì)詞匯聯(lián)想的能力。很多圖標(biāo)圖形優(yōu)秀的創(chuàng)意,就是在這些基礎(chǔ)的積累之上逐漸形成的,而不是一撮而就。


 


 

3.2 圖標(biāo)的一致性


 

第二個(gè)規(guī)范,叫圖標(biāo)的一致性。即一個(gè)或一套圖標(biāo)中,應(yīng)該保持一致的細(xì)節(jié)。首先看看下面的反面案例。

 

在上面的案例中,不同圖標(biāo)間有很大的割裂感,完全不像處于同一套設(shè)計(jì)體系之下,這就是缺乏一致性的表現(xiàn)。這也是新手在設(shè)計(jì)一整套圖標(biāo)最大的難點(diǎn),要讓所有圖標(biāo)保持視覺(jué)細(xì)節(jié)上的一致。

下面對(duì)工具圖標(biāo)要保持視覺(jué)一致性有哪些細(xì)節(jié)進(jìn)行詳細(xì)的說(shuō)明。


 

類(lèi)型一致


 

前面說(shuō)過(guò),工具圖標(biāo)有線性的、填充的類(lèi)型,在正常的情況中,同一套圖標(biāo)應(yīng)該在類(lèi)型中保持相同,如果使用了線性圖標(biāo)那么后續(xù)就不要設(shè)計(jì)填充以及混合的類(lèi)型。

 


 

風(fēng)格一致


 

每一套圖標(biāo)都有自己的設(shè)計(jì)風(fēng)格,不同風(fēng)格在細(xì)節(jié)中都有不同的表現(xiàn),需要讓這些風(fēng)格特征保持高度的統(tǒng)一,看看下面這些案例。

第一,為圖標(biāo)添加缺口的設(shè)計(jì)風(fēng)格,我們要保證這個(gè)缺口的大小是一致的,并且每一個(gè)圖標(biāo)中有且只有一個(gè)缺口,而不是靠感覺(jué)隨意添加。

 

第二,在設(shè)計(jì)一套偏圓潤(rùn)可愛(ài)的設(shè)計(jì)風(fēng)格中,外輪廓使用了較大的圓角,那么我們盡可能保證圓角的大小是一致的,而不是有的用 4pt,有的用 2pt 或者直接使用直角。

 

第三,采用了填充色偏移的設(shè)計(jì)風(fēng)格中,首先要保證填充色的一致,并且偏移的距離和方向也要保持固定的規(guī)律,不能隨喜好任意制定。

 


透視一致


 

透視關(guān)系是在平面中對(duì)物體空間性質(zhì)的表現(xiàn)方式,當(dāng)我們應(yīng)用了透視時(shí),物體就有了一定的 “立體感”。

 

透視的表現(xiàn)不是繪制圖標(biāo)時(shí)必須使用的風(fēng)格,但是如果我們?cè)趫D標(biāo)中應(yīng)用了透視,就要確保我們使用的視角是一致的。要極力避免同一套圖標(biāo)中既用了正視圖又包含了斜視圖。

 


粗細(xì)一致
 


 

在圖標(biāo)中我們會(huì)應(yīng)用到矩形線段或是描邊,我們要盡可能保證它們的粗細(xì)是一致的。

比如,在線性的設(shè)計(jì)中,路徑的描邊尺寸要保持一致,不能這個(gè)圖標(biāo)用 2pt,那個(gè)圖標(biāo)用 1pt。

 

在填充圖標(biāo)中,我們會(huì)在一個(gè)矩形或是圓形中增加矩形的鏤空,比如下圖的幾個(gè)圖標(biāo),在這種情況下也要保證它們的粗細(xì)是一致的,而不是各不相同。

 


大小一致
 


 

大小一致,就是讓圖標(biāo)的視覺(jué)大小保持一致,而不是它們字面上的長(zhǎng)寬屬性保持一致。

因?yàn)檫@是一個(gè)比較復(fù)雜的知識(shí)點(diǎn),需要我們對(duì)幾何圖形的視覺(jué)差有比較完整的認(rèn)識(shí),我會(huì)在下一部分做出介紹。這些和一致性有關(guān)的特征,是一套圖標(biāo)看起來(lái)專(zhuān)業(yè)、有整體感的必要條件。但是,在真實(shí)的設(shè)計(jì)場(chǎng)景中需要靈活變通。

如果有一些特定的圖標(biāo),在保證了一致性的所有要求后卻極難被人理解,且找不到更好的設(shè)計(jì)方式,就可以差別對(duì)待。比如在一套線性的圖標(biāo)中,播放、快進(jìn)等圖標(biāo)往往都是填充類(lèi)型的,這并不會(huì)造成視覺(jué)或是使用上的困擾。


 

3.3 幾何圖形的視覺(jué)差


 

幾何圖形的視覺(jué)差,是對(duì)于工具圖標(biāo)來(lái)說(shuō)最重要的細(xì)節(jié),在上一節(jié)圖標(biāo)一致性中已經(jīng)提及,它也是平面基礎(chǔ)理論中不可忽視的內(nèi)容,這個(gè)理論要解決一個(gè)核心的問(wèn)題,即


怎么讓不同的圖形看上去一樣大?


 

可能有的讀者看到這里會(huì)輕蔑一笑,這有什么難的,通過(guò)軟件的參考線或者屬性設(shè)置,把它們的長(zhǎng)寬設(shè)置成一樣不就完事了,比如下圖這樣。

 

嗯,畫(huà)起來(lái)輕輕松松,參數(shù)上完美無(wú)缺。但等等,怎么看上去這些圖形大小有點(diǎn)不一樣,為什么正方形看起來(lái)這么大,三角形看起來(lái)這么???

恭喜你們,發(fā)現(xiàn)了這個(gè)問(wèn)題的根源,不同幾何圖形帶給我們的視覺(jué)大小是不同的。而要解決這樣的問(wèn)題,就要對(duì)它們的尺寸做出額外的調(diào)整,比如下圖這樣。

 

適當(dāng)調(diào)整完圓形和三角形以后,是不是覺(jué)得大小的感覺(jué)一致了?這就要牽扯一個(gè)更基礎(chǔ)的視覺(jué)規(guī)律,占據(jù)面積越大的圖形,給視覺(jué)的感受就越大,所以給我們感受越小的元素,就要放的越大。

并且,這個(gè)問(wèn)題在一個(gè)圖形的內(nèi)部也會(huì)產(chǎn)生影響,比如知乎 APP 下面的點(diǎn)贊、反對(duì)按鈕,都有三角形圖標(biāo)對(duì)吧,但圖形其實(shí)對(duì)于外部舉行是非居中的,我們看看下面的演示。

 

如果一個(gè)圖形其中一部分面積遠(yuǎn)大于另一部分,那么就會(huì)讓這個(gè)圖形的重心產(chǎn)生偏移,必須要往較小的部分的方向移動(dòng)才能產(chǎn)生平衡。

 

所以,在設(shè)計(jì)一整套的應(yīng)用中,如果沒(méi)有對(duì)這個(gè)理論的理解,只定義一個(gè)矩形出來(lái),把所有圖形的尺寸于矩形對(duì)齊,那么最終看到的圖標(biāo)效果一定是極度不平衡的。

 


 


 

3.4 工具圖標(biāo)的柵格


 

其實(shí),針對(duì)圖標(biāo)的規(guī)范,新人第一個(gè)想到的應(yīng)該就是參考線了,也就是所謂的柵格模版。但之所以放第二個(gè),是因?yàn)楣ぞ邎D標(biāo)的柵格規(guī)范,是根據(jù)幾何的視覺(jué)差特性衍生出來(lái)的,而不像后面會(huì)提到的應(yīng)用圖標(biāo)由官方提供出來(lái)。

我們先簡(jiǎn)單看看,常見(jiàn)的工具圖標(biāo)柵格是什么樣的。

 

里面包含了正方形、長(zhǎng)方形、圓形對(duì)不對(duì),那我們把它們分別羅列出來(lái)看看。是不是就發(fā)現(xiàn)這些圖形的視覺(jué)尺寸是非常接近的?然后再通過(guò)這樣的尺寸設(shè)計(jì)對(duì)應(yīng)的圖形,也就看起來(lái)都一樣大。

 

所以,應(yīng)用圖標(biāo)的柵格系統(tǒng)對(duì)于圖標(biāo)的設(shè)計(jì)來(lái)說(shuō),是一個(gè)用來(lái)應(yīng)對(duì)幾何圖形視覺(jué)差的“參照物”。

之所以要說(shuō)參照物,原因在于,一套圖標(biāo),不會(huì)只存在這幾種圖形的樣式,還有很多千奇百怪的形狀,但大體上我們可以識(shí)別出來(lái)它的類(lèi)似輪廓或者重心方向,于是就可以通過(guò)參照?qǐng)D形來(lái)判斷我們?cè)O(shè)計(jì)出來(lái)的圖形尺寸是否符合標(biāo)準(zhǔn)。

如果設(shè)計(jì)圖形和參照?qǐng)D形的類(lèi)似,那么尺寸就不能大于參照?qǐng)D形,如果設(shè)計(jì)圖形的寬大于參照?qǐng)D,那么高就要小于參照?qǐng)D,反之亦然。如果圖形的重心有偏移,那就要往重心偏移的反方向移動(dòng),比如搜索按鈕,Wifi 圖標(biāo)等。

 

最后,說(shuō)說(shuō)柵格系統(tǒng)的畫(huà)法,和大家想象的不一樣,想要畫(huà)一套圖標(biāo),柵格系統(tǒng)是我們自己畫(huà)出來(lái)的,不是到網(wǎng)上下載下來(lái)的,所以怎么畫(huà)也是這個(gè)知識(shí)的重點(diǎn)。


 

如何繪制圖標(biāo)柵格系統(tǒng)


 

如果我們定義一套 28pt(如果看不懂可以當(dāng)成 28px) 的圖標(biāo),那么我們首先要畫(huà)一個(gè) 28pt 的正方形,然后確定一個(gè) 2-4pt 的內(nèi)邊距,正所謂四邊留一線,日后好相見(jiàn)。

 

然后就要開(kāi)始繪制其中正方形和圓形,正方形通常在整個(gè)圖標(biāo)尺寸 1/2 的比例,可以使用 14 或 16 的偶數(shù) (為了可以居中)。然后再確定圓形的尺寸,圓肯定比正方形大 2-4 pt,于是就得到下方的圖形。

 

之后,我們?cè)俅_定橫豎長(zhǎng)方形的尺寸,可以直接頂?shù)絻?nèi)邊距的邊緣。它的尺寸不是通過(guò)數(shù)值計(jì)算的,而是要我們先畫(huà)出來(lái),把它們和前面的圓、正方形置于一條水平線上,調(diào)整出一個(gè)平衡的視覺(jué)尺寸,再和并進(jìn)柵格系統(tǒng)中,就完成了柵格系統(tǒng)的繪制,如下圖的案例。

 

這一步也旨在檢查我們的參考線系統(tǒng)是否在基礎(chǔ)結(jié)構(gòu)上經(jīng)得起考驗(yàn),是非常關(guān)鍵的一步。因?yàn)椴煌叽绲膱D標(biāo)中,參考線系統(tǒng)都是有區(qū)別的,我們不能直接按一個(gè)固定的比例來(lái)設(shè)置,要根據(jù)實(shí)際場(chǎng)景做判斷。
 

當(dāng)然,為了進(jìn)一步方便大家的學(xué)習(xí),我特意準(zhǔn)備了一套現(xiàn)成的柵格素材,包含 16、24、28、32、36、48 等六個(gè)尺寸。大家可以進(jìn)入我的主頁(yè)關(guān)注公眾號(hào)并回復(fù) “圖標(biāo)素材” 獲取。

 


 


 

3.5 像素對(duì)齊


 

在柵格的繪制中,細(xì)心的讀者肯定發(fā)現(xiàn)了幾個(gè)關(guān)鍵字,“對(duì)齊”、“偶數(shù)”,這就是在這一部分要提及的內(nèi)容。關(guān)于顯示器的倍率問(wèn)題是 UI 基礎(chǔ)知識(shí)點(diǎn)之一,可能有的同學(xué)不太了解,不過(guò)沒(méi)關(guān)系,直接看下面的內(nèi)容即可。

我們都知道像素是屏幕顯示中的最小單位,一個(gè)像素只能顯示一種顏色。小時(shí)候玩過(guò)的 GBA、FC 游戲機(jī),都是通過(guò)像素畫(huà)的形式呈現(xiàn),人物鋸齒是無(wú)法避免的。

 

而隨著技術(shù)發(fā)展,像素密度是降低了,但如果依舊是按過(guò)去這種一個(gè)蘿卜一個(gè)坑的方式顯示內(nèi)容,那鋸齒感無(wú)論如何是無(wú)法消除的。于是,開(kāi)發(fā)了次像素渲染(Subpixel Rendering)的技術(shù)。一個(gè)在顯示器中讓我們覺(jué)得平滑的圓,一直放大,就可以發(fā)現(xiàn)它的周邊充滿了飽和度較低的其它方塊色彩。

 

這項(xiàng)技術(shù),讓像素可以用特有的方式來(lái)顯示非完整的色塊,即盡可能還原我們對(duì)元素定義的小數(shù)點(diǎn)。但為什么我們還要提這個(gè)概念呢?

因?yàn)楣ぞ叩膱D標(biāo)太小了,而且 UI 的元素對(duì)精細(xì)和準(zhǔn)確度的要求都不低,如果我們沒(méi)有盡可能滿足像素對(duì)齊的要求,那么就可能導(dǎo)致元素邊緣的模糊。

 

所以要滿足像素對(duì)齊的要求,就要符合元素本身的尺寸為整數(shù)、描邊為整數(shù)、XY 軸坐標(biāo)為整數(shù)的特性。


 

AI 中的像素對(duì)齊設(shè)置


 

在 AI 中,我們可以通過(guò)兩個(gè)設(shè)定來(lái)查看和保證像素對(duì)齊,即網(wǎng)格的設(shè)置顯示,以及對(duì)齊到點(diǎn)的設(shè)置。

 

像素的對(duì)齊主要表現(xiàn)在橫線和豎線上,雖然現(xiàn)在手機(jī)顯示精度越來(lái)越高,但并不意味著我們可以無(wú)視像素對(duì)齊的規(guī)律!在線性圖標(biāo)中,類(lèi)似對(duì)于 1pt 或者 2pt 描邊的應(yīng)用,覺(jué)得不是太細(xì)就是太粗,可以用 1.5pt 的數(shù)值(1.5 pt 在 2x 中就是 3px),但切記不要出現(xiàn)類(lèi)似 1.23、2.16、3.46 這種小數(shù)。

像素對(duì)齊是一個(gè)專(zhuān)業(yè) UI 設(shè)計(jì)師對(duì)于極致追求的表現(xiàn)之一,是每一個(gè)一線大廠 UI 設(shè)計(jì)師的基本職能,所以,想要沖刺更高的段位,就不要忽視這個(gè)規(guī)范的使用。


 


 

undefined


 

這是圖標(biāo)系列文章的第一篇,信息量不算少!所以我們?cè)诮Y(jié)尾再總結(jié)一次,方便大家記憶。


 

    • 知識(shí)點(diǎn)1:在 UI 的界面中,圖標(biāo)的主要作用是用來(lái)高效的傳遞信息,以及起到美化界面的作用。

    • 知識(shí)點(diǎn)2:UI 會(huì)涉及的圖標(biāo)類(lèi)型主要有三種,工具圖標(biāo)、裝飾圖標(biāo)、應(yīng)用圖標(biāo)。

    • 知識(shí)點(diǎn)3:工具圖標(biāo),是界面中用來(lái)傳遞信息的圖形符號(hào),主要包含線性、面性、混合三種設(shè)計(jì)風(fēng)格。

    • 知識(shí)點(diǎn)4:裝飾圖標(biāo),是界面中用來(lái)提升視覺(jué)體驗(yàn)的圖形,主要包含扁平、擬物、2.5D、炫彩漸變等風(fēng)格。

    • 知識(shí)點(diǎn)5:應(yīng)用圖標(biāo),是用來(lái)啟動(dòng)應(yīng)用的圖標(biāo),主要包含文字、圖標(biāo)、圖形、插畫(huà)、擬物等設(shè)計(jì)形式。

    • 知識(shí)點(diǎn)6:學(xué)習(xí)繪制圖標(biāo),優(yōu)先學(xué)習(xí) PS、AI 的路徑相關(guān)功能,而不是 Sketch 和 XD。

    • 知識(shí)點(diǎn)7:圖標(biāo)首先要表意準(zhǔn)確,能被用戶識(shí)別并契合想要表達(dá)的寓意。

    • 知識(shí)點(diǎn)8:設(shè)計(jì)整套圖標(biāo)的時(shí)候要符合一致性原則,包含類(lèi)型、風(fēng)格、粗細(xì)、透視、大小等特征。

    • 知識(shí)點(diǎn)9:不同的幾何圖形會(huì)打給我們不同的大小視感,不能只看元素的參數(shù)。

    • 知識(shí)點(diǎn)10:我們根據(jù)視覺(jué)差的方式定義出柵格系統(tǒng),作為圖標(biāo)尺寸設(shè)定的重要參考。

    • 知識(shí)點(diǎn)11:圖標(biāo)的繪制要保證橫豎的直線對(duì)齊到像素,線性圖標(biāo)盡量采用整數(shù)粗細(xì),如果一定要用小數(shù)的話就使用 0.5 遞進(jìn)的。


 


 


 


 


 


6
評(píng)論區(qū)(0)
正在加載評(píng)論...