97超精品视频在线观看_91人人在线_亚洲精品国产综合一线久久_日本最新免费二区

當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

史上最完整最詳細(xì)的圖標(biāo)教學(xué)

2019-05-20 1858 0


 


 


 

前面已經(jīng)說完了工具圖標(biāo)相關(guān)的設(shè)計規(guī)范和方法,本章就開始進入下一個主題,關(guān)于裝飾圖標(biāo)的設(shè)計。


 

 

在裝飾圖標(biāo)中,就沒有工具圖標(biāo)那么嚴(yán)謹(jǐn)?shù)囊?guī)范需要遵循,也就意味著自由度越高,可以任意發(fā)揮。顯然,想要通過一篇文章掌握所有的裝飾圖標(biāo)視覺設(shè)計方法,并不現(xiàn)實,新手只要將精力聚焦在最常用的幾種圖標(biāo)風(fēng)格的設(shè)計上即可。

裝飾圖標(biāo)最主要的應(yīng)用區(qū)域,集中在首頁的快速入口上,也是今天多數(shù)應(yīng)用中會使用的組件。下面,我們會通過講解國內(nèi)主流應(yīng)用中的幾種裝飾圖標(biāo)的設(shè)計。


 


 

8.1 扁平插畫風(fēng)格


 

裝飾圖標(biāo)的主要作用是豐富視覺體驗,對于識別性的要求較弱,所以我們可以在這里應(yīng)用更復(fù)雜的圖形和添加更多的細(xì)節(jié)。在這里的扁平插畫風(fēng)格設(shè)計更具象,而不是像工具圖標(biāo)一樣的抽象化,所以完整的采用扁平插畫的設(shè)計是沒問題的。

例如在肯德基客戶端首頁的服務(wù)分類中,使用的圖標(biāo)就是依據(jù)扁平插畫的形式設(shè)計的,有較多的色彩和完整的細(xì)節(jié)。

 

這類圖標(biāo)設(shè)計的并不困難,只要具備了工具圖標(biāo)的設(shè)計基礎(chǔ),就可以很快學(xué)會并運用。它的設(shè)計特征是這樣的,先通過繪制具體的圖形輪廓,然后為這個輪廓內(nèi)添加細(xì)節(jié),并對不同的面填充不同的色彩進行區(qū)分。

下面,我們通過講解幾個圖標(biāo)的設(shè)計過程,幫助大家學(xué)習(xí)這種設(shè)計風(fēng)格。


 

1. 優(yōu)惠券圖標(biāo)


 

通過模擬現(xiàn)實世界的優(yōu)惠券樣式,確定出基本的線性輪廓。

但作為裝飾圖標(biāo)來說,這樣的設(shè)計目前有點簡陋,左側(cè)空出了大量的留白,所以我們要考慮如何增加細(xì)節(jié)來豐富這個區(qū)域。于是,使用 % 號就可以比較好的標(biāo)示折扣。

最后,開始為圖標(biāo)填色。因為在這套圖標(biāo)中,紅色是主要基調(diào),所以我們不能大面積的使用其它顏色,于是就將其中一側(cè)進行留白處理,只修改了它描邊的色彩。并且還在票據(jù)兩側(cè)的連接處添加了一個用來標(biāo)示陰影的豎線。

 


2. 店鋪圖標(biāo)


 


 

3. 我的卡包圖標(biāo)


 


 


 

8.2 漸變幾何背景風(fēng)格


 

和其它風(fēng)格比較,在快速入口中,線上案例應(yīng)用得最多的風(fēng)格其實是漸變幾何背景的設(shè)計方案,即在一個應(yīng)用了漸變色的背景上帖了一個線性或面性的圖標(biāo)。

這種風(fēng)格的設(shè)計,主要在于背景漸變色的應(yīng)用上,通常,在一組彩色快速入口的圖標(biāo)中,要讓它們的漸變色看起來自然和諧,是需要技巧的。

例如有四個圖標(biāo),首先要定義出不同的色相,然后再對它們應(yīng)用相同的漸變模式。例如,使用相同的漸變角度,然后在漸變的起始色使用該色相,在結(jié)尾使用不同明度、飽和度的色彩。

之后,再在上方置入圖標(biāo)的圖形,并為它們添加適當(dāng)?shù)年幱凹纯伞?/p>

 

如果在這個基礎(chǔ)上,還想再添加細(xì)節(jié),那么就可以在上方的圖形中添加一些折疊的陰影效果,強化立體感。


 


 

8.3 炫彩漸變風(fēng)格


 

這是一個比較奇特的設(shè)計風(fēng)格,在過去只存在于飛機稿中,是一種單純?yōu)榱俗非笠曈X表現(xiàn)力的設(shè)計形式,通過高飽和的漸變、撞色,抓取瀏覽者的眼球。

undefined

這類風(fēng)格的設(shè)計,在確定了圖形以后,就是為它們填充高飽和度的漸變色。和扁平插畫比較不同的是,色彩的填充不是用來描繪物體的顏色,而僅僅是視覺表現(xiàn)的一種方法,所以顏色的添加追求的不是 “合理”,而是純粹的 “好看”。

并且,通常這類圖標(biāo)還會使用前兩年開始流行的彩色投影,增加界面本身的層次感。下面,我們也通過 3 個案例,為大家演示一下這類圖標(biāo)設(shè)計的過程。

案例1:

案例2:


 

案例3:


 


 


 


 

 

8.4 實物貼圖風(fēng)格


 

最后,講講實物貼圖的圖標(biāo)風(fēng)格。這種圖標(biāo)出現(xiàn)在涉及到實物產(chǎn)品的應(yīng)用中,例如電商應(yīng)用,智能硬件控制應(yīng)用等等。

這類設(shè)計看起來很簡單,只要畫出一個幾何的背景,并建立蒙版將實物圖置入進去即可,但還是有不少新手會犯的錯誤,下面我們主要說說常見的問題有哪些。

第一,就是物體的透視。和工具圖標(biāo)一樣,我們要盡可能的保證整組圖標(biāo)中圖形的形狀和透視可以統(tǒng)一,如果實物圖采用的透視不一致,那么空間的對立感就更強,也有更容易被用戶覺察到的違和感。

undefined


 

第二,形體和比例。當(dāng)我們采用實物照片時,該物體完整的形狀我們往往不能控制,但切記的是,不是物體本身是什么形狀我們都要完整的置入進去。

比如如果入口中有口紅和香水兩種,口紅是細(xì)長的而香水是圓形,那么我們可以做的就是要放大口紅,最終只展示它的局部,否則它們的對比會完全失衡。

第三,圖形的質(zhì)感。實物的圖形,還有一個非常重要的細(xì)節(jié),就是它們的質(zhì)感。這種質(zhì)感指的不是物體本身的材質(zhì),而是攝影、后期產(chǎn)生的質(zhì)感。如下圖的對比,同一件商品,手機直出的圖,和經(jīng)過商品精修的圖,展現(xiàn)出來的質(zhì)感是完全不一樣的。

如果強行將有精修痕跡和普通照片摳出來的商品放到一起,也只能給用戶產(chǎn)生巨大的違和感。所以,如果提供給我們的素材本身質(zhì)感不同,那么我們就要在 PS 中對它們進行調(diào)試,盡可能保證它們的一致。

第四,前后對比。因為是攝影圖,所以圖形本身包含的細(xì)節(jié)會非常豐富,而且色彩也可能比較多。在采用了幾何背景時,就要保證它能更好的襯托主體物。如果使用較強的顏色,或是太多細(xì)節(jié),就會導(dǎo)致前后元素的分離度不足,無法凸顯物體本身。所以,多數(shù)采用這種風(fēng)格的設(shè)計案例中,背景用色都使用飽和度偏低的配色。

只要能保證不犯上面 4 種錯誤,那么設(shè)計這類圖標(biāo)時,就能保證最終的效果不會太差。


 


 


 


 

 

 

 

本節(jié)我們開始講解最后一種類型的圖標(biāo)——啟動圖標(biāo)。在第一章我們已經(jīng)對啟動圖標(biāo)有了基礎(chǔ)的認(rèn)識,所以下圖再簡單回顧一遍。

想要在啟動圖標(biāo)設(shè)計上入門,就要先從規(guī)范開始學(xué)習(xí),然后了解不同的風(fēng)格以及對應(yīng)風(fēng)格的設(shè)計過程。如果沒有比較明確的學(xué)習(xí)目標(biāo),就會和學(xué)習(xí) LOGO 設(shè)計一樣無從下手。


 


 

9.1 啟動圖標(biāo)的設(shè)計規(guī)范


 

說到啟動圖標(biāo)的規(guī)范,首先會想到的,就是 iOS 提供的圖標(biāo)柵格。通過這個柵格,會規(guī)范圖形的尺寸,以及所處的位置。

這個模板和工具圖標(biāo)的使用方法類似,我們在后面的案例進一步講解。接著,來說明一個更重要的問題,就是啟動圖標(biāo)畫布的尺寸。

默認(rèn)的情況下,我們使用 1024 * 1024 尺寸來設(shè)計啟動圖標(biāo),這個參數(shù)在 iOS 和 Android 中都適用。

之所以使用這么大的尺寸,是由屏幕分辨率的差異和使用場景導(dǎo)致的。

第一,在手機硬件中,根據(jù)屏幕規(guī)格的不同,展示圖標(biāo)的實際像素量也不同,即圖標(biāo)的尺寸會發(fā)生改變。

例如在 1x 的屏幕中,圖標(biāo)使用 60×60px,在 2x 的屏幕中,就使用 120×120pt,3x 則是 180×180。

第二,不同設(shè)備和顯示場景里,應(yīng)用的圖標(biāo)尺寸也不一樣。對于一個真實的項目來說,圖標(biāo)不是只放在手機上運行,無論 iOS 和 Android 的 APP 都可以在 PAD 上安裝,圖標(biāo)尺寸規(guī)格就不同。并且,在網(wǎng)頁或者手機應(yīng)用商店里,也需要展示啟動圖標(biāo),顯示的規(guī)格和真實應(yīng)用列表中又不同。

所以,在 iOS 官方的圖標(biāo)模版中,我們會看見里面羅列了非常多的圖標(biāo)尺寸,我們只需要設(shè)計第一個 1024 規(guī)格的,將這個圖標(biāo)置入到 PS 的智能對象,或者 Sketch 的 Symbol 中,就可以一次性生成所有尺寸,不需要我們自己手動調(diào)整各種規(guī)格的圖標(biāo)輸出。

應(yīng)該有同學(xué)這時候還會產(chǎn)生疑問,模版里的畫布就是一個正方形,但是大多數(shù)手機的 APP 圖標(biāo)使用的是圓角,所以,應(yīng)該如何制作這個圓角,以及它的相關(guān)參數(shù)呢?

真實項目中,除非項目的特定要求**,只需要提交正方形的圖形即可**,之后無論是 APP Store,還是多數(shù)安卓應(yīng)用商店,都會自動對該圖形進行裁切,生成符合自己系統(tǒng)的圓角圖標(biāo)。

如果我們想要在設(shè)計出正方形圖形后預(yù)覽真實的效果,就可以用我們準(zhǔn)備的 PSD 模版,將正方形置入到模版中即可。

在設(shè)計已經(jīng)確認(rèn)以后,我們就要導(dǎo)出這些圖標(biāo)。因為啟動圖標(biāo)有很多擬物的設(shè)計或會使用真實的攝影素材,所以應(yīng)用商店提交的格式會選用位圖格式而不是矢量格式,所以導(dǎo)出啟動圖標(biāo),只需要導(dǎo)出對應(yīng)尺寸的 PNG 即可。

在規(guī)范中我們提到的這些素材和模版,我們提前整理出來了,獲取方法:

在公眾號 超人的電話亭 中回復(fù) “啟動圖標(biāo)” 即可。


 


 

9.2 啟動圖標(biāo)的設(shè)計演示


 

9.2.1 圖標(biāo)形式


 

在一些比較基礎(chǔ)的應(yīng)用類型中,通常會直接使用工具圖標(biāo)的圖形設(shè)計啟動圖標(biāo)。因為基礎(chǔ)的 APP 服務(wù)大多有表意極其清晰的工具圖標(biāo)與之對應(yīng),例如郵箱、計算器、音樂、地圖等類型應(yīng)用,企業(yè)往往在使用一些抽象的品牌化圖形與表意更清晰的工具圖標(biāo)中選擇后者。

工具圖標(biāo)的設(shè)計其實很簡單,就是在畫板中完成兩種元素的設(shè)計,一個是背景,一個是上方圖標(biāo)。

背景的設(shè)計,有比較常見的就兩種類型,純色、漸變。而上方圖標(biāo)的設(shè)計里,包含的類型就是我們前面講過的幾種常見的工具圖標(biāo)。所以你看,只要將它們組合,就可以很輕松的設(shè)計出符合主流特征的啟動圖標(biāo)。

所以,如果我們要設(shè)計一款筆記應(yīng)用,那么就可以先畫一個線性的筆記圖標(biāo),然后再將它置入格線模版中確認(rèn)大小,再分別為它們上色,就可以完成設(shè)計了。


 

9.2.2 文字形式


 

 

文字形式的設(shè)計,背景和上方一樣,也只使用純色和漸變,但這種設(shè)計的主要難點在與字體的設(shè)計上。

想要放文字,大家首先想到的肯定是直接用字體打進去,但是切記,字體的商業(yè)版權(quán)問題是不能視而不見的。選擇字體前,一定要關(guān)注該字體是否是免費,百度或者官網(wǎng)都可以查詢。或者一開始就在免費字庫中挑選,如思源黑、思源宋、王漢宗系列等等。

如果覺得直接使用字庫文字太沒有設(shè)計感,那可以選擇做一次字體的二次創(chuàng)作,對于新手來說簡單一點。即一開始挑選一個合適的字體,然后在 AI 中對該字體進行臨摹,再對細(xì)節(jié)進行重新加工,比如襯線的調(diào)整,壁畫粗細(xì)的調(diào)整等等。

比如要設(shè)計一個我的應(yīng)用,那么我可以取 “超人的電話亭” 的第一個字——超,作為圖標(biāo)上方的文字。然后我選用 “方正蘭亭大黑” 作為基礎(chǔ)字形,對它進行重構(gòu)即可。

最后建議,如果不是一些比較嚴(yán)肅或是傳統(tǒng)的題材,盡量不要選用宋體或是楷體進行設(shè)計。


 

9.2.3 擬物形式


 

雖然現(xiàn)在整體設(shè)計環(huán)境中,擬物已經(jīng)被扁平取代,但不代表它已經(jīng)消失,或是在形式上不合理。適當(dāng)?shù)臄M物設(shè)計會讓我們對應(yīng)用功能的認(rèn)識更清晰,且更有趣味性。

還是老慣例,我們從簡單的擬物設(shè)計入手。目前擬物的領(lǐng)域中,使用最普遍的風(fēng)格也是新手最容易學(xué)習(xí)的風(fēng)格,即 “輕擬物” 的設(shè)計。這種風(fēng)格需要刻畫的細(xì)節(jié)相對較少,更易于我們掌握,只要能用好漸變即可。

比如,iOS 的官方應(yīng)用——文件,圖標(biāo)的形式就符合輕擬物的特征。簡單分析一遍,即在確定完輪廓后,通過漸變填充來表示物體本身的高光和陰影,并添加投影來制造立體感。

如果要設(shè)計一些更復(fù)雜的擬物圖形,可以通過多做擬物圖標(biāo)的教學(xué)會更有幫助。在今天扁平化圖形當(dāng)?shù)赖沫h(huán)境中,設(shè)計得精良的擬物圖標(biāo)往往可以在滿屏的扁平圖標(biāo)中脫穎而出,助于吸引用戶啟動應(yīng)用。


 


 


 

undefined


 

前面的章節(jié),已經(jīng)系統(tǒng)的講解了圖標(biāo)的設(shè)計方法,相信認(rèn)真學(xué)習(xí)并實踐的同學(xué),已經(jīng)可以設(shè)計出優(yōu)秀的圖標(biāo)了。

但是,在 UI 設(shè)計中,圖標(biāo)不是孤立存在的。我們學(xué)習(xí)圖標(biāo)的設(shè)計,不是為了畫一組套圖,然后上傳到設(shè)計平臺中分享或求贊,而是要在真實的項目中發(fā)揮作用。如果不了解圖標(biāo)應(yīng)用到項目中的知識點,那么真實的圖標(biāo)設(shè)計水平就會在項目設(shè)計過程中被損耗。

所以,最后一章,說的就是工具圖標(biāo)在項目中應(yīng)用的方法,我相信這是在網(wǎng)上很難找到的分享,建議仔細(xì)閱讀。


 


 

10.1 一套應(yīng)用中的圖標(biāo)規(guī)格


 

圖標(biāo)是一個應(yīng)用不能或缺的組成元素,在應(yīng)用的界面中隨處可見。也因為圖標(biāo)的常見性,我們往往需要在一個應(yīng)用應(yīng)用多套圖標(biāo),這和崇尚簡約的第一印象是有背離的。

很多新手,都以為我們只要設(shè)計一套大而全的圖標(biāo),在項目中對應(yīng)提取即可。但有很多場景,如果只使用一種圖標(biāo)類型,那么效果會非常差勁。比如 ,我們看看下面的淘寶設(shè)置頁,前后包含了 6 種以上的圖標(biāo)。是太復(fù)雜了沒錯,但如果我們把圖標(biāo)都替換成同一套呢?

可以看見,右側(cè)替換后的案例,效果非常的不理想,缺乏對比和趣味性。交互規(guī)則中說:如無必要,勿增實體,但對于圖標(biāo)的使用來說,這就是必要。

應(yīng)用內(nèi)的圖標(biāo)規(guī)格不同,可以用兩個屬性來劃分,大小和風(fēng)格。


 

10.1.1 圖標(biāo)的尺寸


 

大小就是圖標(biāo)的尺寸規(guī)格,有些界面的元素權(quán)重低,圖標(biāo)的尺寸就小,有些權(quán)重高的則反之。比如在 Apple Music 的播放界面,播放快進等按鈕,作為頁面最重要的按鈕,尺寸非常大,其它可以點擊的圖標(biāo)次之,而表示音量的兩個按鈕則最小。

確定圖標(biāo)尺寸,是我們在項目中進行圖標(biāo)設(shè)計的第一件事。但尺寸的確定,不是我們憑空制定出來的,我們要先構(gòu)建出實際的 “場景“ 進行分析,即先完成了界面的高保真原型或交互原型。

下方是我自己課程中給學(xué)生做的原型演示,在構(gòu)建了這樣的頁面以后,我會在原型中檢查,我總共用了多少種圖標(biāo)的尺寸,它們分別會應(yīng)用在哪些場景中,然后整理出來。如果出現(xiàn)了一些覺得沒有必要的,可以將它們進行調(diào)整合并成一種尺寸。

所以,在這個案例中,我整理出了 4 種圖標(biāo)的尺寸:


 

  • 48pt:分類、快速入口大圖標(biāo)

  • 32pt:底部 TabBar 圖標(biāo)

  • 24pt:常規(guī)工具圖標(biāo)

  • 16pt:小型提示圖標(biāo)


 

定好了這 4 種規(guī)格,我們在后續(xù)的設(shè)計上才有明確的設(shè)計方向。再復(fù)習(xí)一遍,為什么我們需要先定尺寸再設(shè)計,而不是統(tǒng)一設(shè)計一套很大的圖標(biāo)進行縮小。

因為圖標(biāo)要盡可能滿足像素對齊的要求,通過縮小的圖標(biāo)往往在細(xì)節(jié)上會發(fā)生錯位、模糊、丟失等問題。且在大畫布上設(shè)計圖標(biāo)和一開始就在小畫布中設(shè)計,兩者在過程中得到的視覺反饋是完全不一樣的,先在大畫布畫完,再縮小到 16pt、12pt 的規(guī)格時往往會顯得太復(fù)雜,或描邊太粗。

所以,新手盡量不要犯這種初級的錯誤。


 

10.1.2 圖標(biāo)的風(fēng)格


 

圖標(biāo)風(fēng)格確認(rèn)完以后,下面就是確認(rèn)圖標(biāo)的風(fēng)格了,和尺寸一樣,我們要應(yīng)用什么風(fēng)格的圖標(biāo),是需要在已經(jīng)具備視覺雛形的頁面中對比確定的,而不能提前開始設(shè)計。

在我的設(shè)計流程中,通常會將圖標(biāo)放在項目的最后再開始設(shè)計,原因就是圖標(biāo)的視覺樣式風(fēng)格是取決于所處位置和環(huán)境的,是先有界面樣式,再有圖標(biāo)風(fēng)格的。

在常規(guī)情況下,如果一個應(yīng)用中有多套圖標(biāo),那么普通的中小尺寸圖標(biāo)使用一般的線性或面性風(fēng)格即可。而在分類、快速入口這些具備裝飾性、大尺寸的類型中,就應(yīng)該使用一些更激進的設(shè)計風(fēng)格。比如下圖是 58 同城客戶端應(yīng)用圖標(biāo)案例:

通常,一種風(fēng)格會應(yīng)用在一種 “類別“ 的圖標(biāo)種。上放案例屬于比較理想的狀態(tài),一種類別的圖標(biāo)對應(yīng)一種尺寸,但是在一些更復(fù)雜的環(huán)境種,往往會同一種尺寸下還會包括不同類別的圖標(biāo)。這點大家知道即可,我們會在后面的章節(jié)中有所涉及。


 


 

10.2 圖標(biāo)的不同狀態(tài)


 

圖標(biāo)在一個產(chǎn)品中,除了充當(dāng)裝飾以外,往往也可以作為按鈕來使用。每個應(yīng)用中都有大量的圖標(biāo)可以進行點擊和交互,比如底部導(dǎo)航欄,頭部的消息圖標(biāo)、發(fā)布圖標(biāo)等等。

當(dāng)一個圖標(biāo)能被操作后,那么我們就要注意到它的狀態(tài)變化。從導(dǎo)航欄圖標(biāo)舉例,常規(guī)的選中狀態(tài)是更換色彩,但也有越來越多的應(yīng)用會在選中狀態(tài)采取不同的設(shè)計風(fēng)格,通過更豐富的樣式表現(xiàn)來提升可看性。比如淘寶、QQ 的底部導(dǎo)航欄。


 

還有,一些包含在控件內(nèi)的圖標(biāo),也會跟隨控件狀態(tài)的變更發(fā)生變更。例如在賬號輸入框中,如果選中了輸入框,那么圖標(biāo)的色彩也得到變更,如果輸入框目前處于不可輸入狀態(tài),那么圖標(biāo)也會對應(yīng)置灰。

合格的 UI 設(shè)計師會充分考慮到圖標(biāo)所變換的各種狀態(tài),并在提交給開發(fā)的過程中會進行詳細(xì)的說明、歸類。以及,充分運用 Sketch 等軟件中的組件功能,提升項目的效率和最后的產(chǎn)出成果。

 


 

10.3 圖標(biāo)的標(biāo)注和切圖


 

在我們完成了界面和圖標(biāo)的設(shè)計以后,要提交我們的設(shè)計給開發(fā)人員。其中,包含我們的標(biāo)注和切圖。拋開其它設(shè)計元素不談,我們就講講圖標(biāo)的切圖需要遵循哪些規(guī)范,它和字體都是在這個過程中最容易出錯的地方。

應(yīng)用圖標(biāo)的導(dǎo)出我們已經(jīng)在上一章提到過,所以下面還是以工具圖標(biāo)的說明為主。


 

10.3.1 圖標(biāo)的邊界


 

我們要回到第二章工具圖標(biāo)的規(guī)范中,當(dāng)我們確定出圖標(biāo)的尺寸時,不是要把圖形設(shè)計得正好撐滿這個尺寸,而是利用格線系統(tǒng)來定義它們的大小。

很多新人會在這個過程中產(chǎn)生疑惑,那么在標(biāo)注的過程中,我們標(biāo)注的到底是圖形到其它元素的距離,還是圖標(biāo)外輪廓到別的圖形的距離。所以,要重點強調(diào):

圖標(biāo)的距離是根據(jù)外部輪廓進行計算的!雖然這個輪廓我們?nèi)庋鄄豢梢姡膬?nèi)在規(guī)律可以幫助我們忽略一些不必要的小問題。

所以,要讓標(biāo)注有效,就一定不要偷懶只把圖標(biāo)置入畫布中,而沒有透明矩形背景。


 

10.3.2 圖標(biāo)的畫布


 

現(xiàn)在有很多幫助我們進行標(biāo)注和切圖的協(xié)作工具,比如藍湖或是 Zeplin 等。我們只要將設(shè)計稿上傳,程序員可以自行獲取圖標(biāo)對應(yīng)的切圖。

在這裁切一些特定元素時很好用,但通過線上頁面導(dǎo)出圖標(biāo)的方法,是非常不牢靠的。我們說過,一個應(yīng)用中可能出現(xiàn)多種規(guī)格的圖標(biāo),所以合理的圖標(biāo)切圖,要根據(jù)不同的規(guī)格進行導(dǎo)出和整理 (如下圖),而不是讓程序員自己在線上工具中下載,這樣不僅操作起來困難,而且圖標(biāo)間不同的狀態(tài)難以被輕易獲取。

所以,要在項目設(shè)計過程中,創(chuàng)建不同規(guī)格的畫布(Symbol)并將它們分類排列,不僅利于我們對以后圖標(biāo)的調(diào)用,也方便在最后批量導(dǎo)出切圖到對應(yīng)文件夾中。


 

10.3.3 圖標(biāo)的命名


 

涉及到切圖的導(dǎo)出,我們也就不得不提圖標(biāo)命名相關(guān)的規(guī)范了,我之前寫過一篇關(guān)于命名相關(guān)的文章中有比較詳細(xì)的提到圖標(biāo)命名的方法,大家有空可以擴展閱讀:

https://www.zhihu.com/question/20800182/answer/522552729

下面我們簡單講講圖標(biāo)的命名規(guī)則。有很多新手和剛?cè)肼殘龅?UI 設(shè)計師會不明就里的強調(diào)圖標(biāo)一定要用英文命名,并且各種收集常見的英文命名詞匯,我首先要指出這種做法是錯誤的。

因為涉及到整個應(yīng)用的圖標(biāo)系統(tǒng)時,會出現(xiàn)大量寓意 “抽象” 的圖標(biāo),比如在我上方案例中,有一個啟動圖標(biāo)的中文名是 “中二”,那么這個詞應(yīng)該如何翻譯?即使不受制于英文水平的發(fā)揮,但是你寫的英文不代表開發(fā)人員能看得懂,而大量抽象詞匯的堆積最后導(dǎo)致命名無法成為有效的索引條件,因為沒人看得懂,開發(fā)每次需要查找一個圖標(biāo)的時候依舊是通過縮略圖而不是命名。

所以,在內(nèi)部沒有具體的命名規(guī)范,亦或是程序員沒有特殊要求的情況下,我更建議使用中文命名系統(tǒng),因為國內(nèi)多數(shù)程序員的習(xí)慣會將獲取的圖標(biāo)進行二次命名(所以你做的英文命名到頭來還是會被改掉),所以不要做無用功,學(xué)會 “說人話”。

命名的格式可以分成 3 級,格式大致為:模塊_名稱_狀態(tài)@1x,比如下面的案例:


 

  • 設(shè)置_錢包_高亮@1x.png

  • 動態(tài)_評論_默認(rèn)@1x.png

  • 登錄_按鈕_點擊@2x.png


 

當(dāng)然,這不是唯一準(zhǔn)確的命名方式,我們可以根據(jù)實際場景自由調(diào)整,但大家要牢記,圖標(biāo)的命名是為了方便我們查找、檢索的,而不是使用一堆英文和簡寫感動自己。

最后,圖標(biāo) Symbol 的命名,要和圖標(biāo)的命名保持一致,這樣才能起到事半功倍的效果。


10.3.4 圖標(biāo)的格式


 

上一章啟動圖標(biāo)的導(dǎo)出格式,會根據(jù)不同設(shè)備、場景導(dǎo)出不同的尺寸,并且使用 PNG 的格式。不要擔(dān)心,工具圖標(biāo)雖然也面臨設(shè)備不同的問題,但不需要導(dǎo)出這么多的規(guī)格。下面講講兩種圖標(biāo)的導(dǎo)出類型。


位圖格式


 

最常用的導(dǎo)出格式就是位圖 PNG 格式,因為顯示器顯示倍率的不同,所以我們要導(dǎo)出 1x、2x、3x 三種倍率規(guī)格的圖片,即設(shè)計了 16pt 的圖標(biāo)的話,我們需要導(dǎo)出 16pt、32pt、48pt 三種尺寸。并在導(dǎo)出的文件名后綴上標(biāo)有 @1x、@2x、@3x 的標(biāo)注。


 

這個規(guī)格對于 iOS 還是 Android 都是通用的,雖然還有 3x 以上的設(shè)備,但是那些設(shè)備只要調(diào)用 3x 的規(guī)格即可。

雖然后面會提圖標(biāo)可以使用矢量格式導(dǎo)出,但對于使用了漸變、投影或者擬物風(fēng)格的圖標(biāo),必須使用位圖的格式,否則無法完整記錄圖形的細(xì)節(jié)元素。


矢量格式


 

導(dǎo)出 3 種規(guī)格的圖標(biāo)很麻煩,而且位圖占用的空間往往較大。所以,iOS 和 Android 為了優(yōu)化這個問題,在之前的系統(tǒng)更新中都默認(rèn)支持了矢量格式的切圖文件:


 

  • iOS 使用 PDF 的 1x 切圖

  • Android 使用 SVG 的 1x 切圖


 

當(dāng)然,如果使用矢量格式導(dǎo)出,那么切記在分類文件夾的時候 ,要將 iOS 和 Android 分開保存,而不是混合在一起。

完成以上步驟,我們就完成了一個項目中所有和圖標(biāo)相關(guān)的工作,可以放松一下了…


 


 


 


 


 

這里就是本系列圖標(biāo)相關(guān)文章的真正結(jié)尾了,雖然還有不少干貨可以寫,但實在是寫不動了,真的一滴也沒有了…前后耗費的時間加上助手至少超過 100 小時,有大量配圖是獨立設(shè)計的。

相信這已經(jīng)是全網(wǎng)最完整最詳細(xì)的圖標(biāo)教學(xué)了,希望各位能有所收獲,并能掌握入門圖標(biāo)設(shè)計的正確姿勢。如果喜歡我們的內(nèi)容的話,請多多分享和點贊對我們進行一些微小的鼓勵。

后面,我們還會將本系列文章合成成一篇完整的 PDF 文件提供下載和保存,以及錄制對應(yīng)的系列教學(xué)視頻,敬請關(guān)注"超人的電話亭"獲取后續(xù)更新以及其它干貨。

 

謝謝各位!


 


 


 


 


 


 


 


 


12
評論區(qū)(0)
正在加載評論...
相關(guān)推薦