書接前文描馅,這是《設計師必看的圖標設計指南》系列之「中」篇
?
功能圖標的設計規(guī)范及應用
除了產(chǎn)品圖標竖伯,還有一種圖標被稱為功能(或系統(tǒng))圖標蜡镶,功能圖標指的是擔負一定功能和含義的圖形茫舶,一般來說需要像文字一般地被人迅速理解烂瘫,所以表達方式上不適合特別復雜,如微信底部四個系統(tǒng)圖標就使用了比較簡潔的線性風格奇适。
功能圖標在UI設計中占據(jù)非常重要的作用坟比,幾乎存在于每一個應用界面中,無論是在導航欄嚷往、工具欄或標簽欄葛账,還是在首頁、詳情頁或個人中心頁皮仁,都隨處可見功能圖標的身影籍琳。功能圖標具有明確的表意功能菲宴,其作用在于替代文字或輔助文字來指引用戶進行快速導航,它具有圖形化的符號趋急,比文字更加直觀喝峦,符合普羅大眾的認知習慣,有助于用戶形成記憶思維呜达,提高應用的易用性谣蠢。同時設計精致、風格統(tǒng)一的功能圖標提升了產(chǎn)品視覺效果查近,不但給用戶帶來視覺上的愉悅感眉踱,還帶來了良好一致的使用體驗。
4.1 圖標的規(guī)范
圖標是任何設計系統(tǒng)或產(chǎn)品體驗的重要組成部分霜威。圖標能夠幫助我們快速導航谈喳。他們與語言無關。最重要的是:他們非常小戈泼,所以他們不占用很多區(qū)域婿禽。圖標是良好設計系統(tǒng)的基本組成部分,對營銷材料非常有幫助大猛。他們是插畫內(nèi)容的基礎構(gòu)建塊扭倾,但他們也具有很高的技術性。
?
4.2 圖標尺寸
一致性是設計圖標的關鍵胎署,在繪制時吆录,一定要確保所有的圖標都相同大小窑滞。在UI界面設計中琼牧,網(wǎng)格的大小必須要是4或12的倍數(shù)(安卓是8的倍數(shù),iOS是4的是倍數(shù))哀卫。@2x下作圖要保證是4的倍數(shù)巨坊,這樣可以整除2,適配@1x的屏幕此改;@3x下作圖就需要是12的倍數(shù)了趾撵,這個數(shù)值可以整除2、3共啃、4占调,適配@1x和@2x的屏幕,界面中通常使用的圖標尺寸24*24px移剪、48*48px究珊。這里建議用48px做為常規(guī)圖標設計尺寸。
?
通常我們只需要選擇一個通用的尺寸來繪制纵苛,然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可剿涮,這樣就不用一遍又一遍的去繪制不同大小的相同圖標了言津。
不過當我們的圖標涉及一些復雜的細節(jié)時,還是需要根據(jù)尺寸大小單獨繪制取试。比如我們的系統(tǒng)圖標可能是24px悬槽,但是營銷圖標是80px,兩者的使用差別會很大瞬浓,那么我們就需要為那些較大的尺寸添加一些細節(jié)初婆。
?
?
這里建議從最大的尺寸開始,然后依次繪制小一點的瑟蜈。因為刪除和簡化細節(jié)要比添加容易得多烟逊,也能最大程度的保留圖標原始狀態(tài)。
圖標繪制基于48x48px畫布繪制的線性圖標铺根,線寬默認為4px宪躯,不同場景縮放比例使用:
圖標為32x32px時,線寬3px(基準線寬)
圖標為24x24px時位迂,線寬2px(基準線寬)
圖標為16x16px時访雪,線寬2px(基準線寬)
......
如果你要繪制描邊圖標,那么需要保證所有的筆畫都是相同的粗細掂林,并且筆畫之間的間距不要比筆畫本身更細臣缀。
?
4.3 圖標的keyline
圖標網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則,keyline是網(wǎng)格的基礎泻帮。通過使用這些核心形狀作為知道精置,你可以跨系統(tǒng)保持一致的視覺比例。
?
4.4 圖標關鍵圖形
圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界锣杂,關鍵線有助于促進圖標統(tǒng)一性脂倦,簡化設計過程中比例調(diào)整成本,繪制小圖形需要參照小正方形的keyline元莫。
?
4.5 圖標的拐角
?
直角拐角:當基礎圖形為滿容器正方形時赖阻,建議使用3X圓角,當基礎圖形為滿高(寬)矩形時踱蠢,建議使用2X圓角火欧。當基礎圖形為較小(小于1/2寬高)矩形時茎截,建議使用1X圓角苇侵。
?
非直角拐角:根據(jù)圖標場景,通常情況下無論角度企锌,默認均為1X圓角榆浓;特殊弧度的曲線“拐角”情況除外,根據(jù)圖標設計需要單獨考慮霎俩。
?
4.6 圖標區(qū)域 封閉和非封閉
封閉區(qū)域哀军,有閉合曲線構(gòu)成的為封閉區(qū)域沉眶,可以進行獨立顏色填充;
非封閉區(qū)域杉适,由非閉合曲線構(gòu)成的非封閉區(qū)域谎倔,原則上是不能進行獨立的顏色填充;
封閉區(qū)域為曲線形狀且有相交線段時猿推,原則上是不能進行獨立的顏色填充片习;
?
4.7 ?圖標繪制規(guī)則
當線段與曲線相交或者與直線非垂直相交時,線段末端用圓頭端點蹬叭;
當線段與直線垂直相交時藕咏,線段末端用方頭端點;
當圓點的直徑與線寬一樣時秽五,圓點用圖形繪制孽查,不用線段;
當圓形和方形在小于16px時建議用圖形繪制坦喘,不要用線盲再;
?
4.7.1 傾斜角度
根據(jù)像素的網(wǎng)格線來設置一條線的起點和終點,會讓你的圖標看起來更清晰瓣铣。圖標中的傾斜角度應為45的倍數(shù)答朋,保持與keyline中的對角線或十字垂直相交線保持平行關系,若是矩形外框棠笑,傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系梦碗。應避免用13.7°,81°等這些奇怪的數(shù)值蓖救。
?
4.7.2 線段和端點
為保證風格的整體一致性洪规,圖標所有線段端點默認均應為與線段同寬的圓角端點,通常情況下線段端點和可編輯節(jié)點坐標以整數(shù)坐標為佳藻糖。默認基于48px畫布繪制的線性圖標淹冰,線寬默認為4px库车,無論直線和曲線在任何時候線寬都應均保持一致巨柒。
?
4.7.3 圖標斷口與間距
內(nèi)部結(jié)構(gòu)與外框的間距不得不小于線寬,內(nèi)部元素之間的間距不得不小于線寬的1/2px柠衍。
外形框的端口尺寸關系:4px洋满、8px、12px珍坊,建議尺寸為4的倍數(shù)牺勾。
?
4.7.4 圖標風格變換
圖標在特定規(guī)律下允許不同風格之間的變換,分別為線性風格(默認)阵漏、填充風格驻民、混合風格翻具、多色混合風格。
?
4.7.5 單雙像素描邊
如果為圖標設置1像素的邊框回还,邊框應該使用外部或內(nèi)部的描邊樣式裆泳,但是不建議居中描邊樣式,居中描邊的1px邊框柠硕,雖然在放大它們的時候工禾,它們看起來很清晰。但在100%比例大小顯示的時候蝗柔,它們會模糊闻葵。雙數(shù)用居中描邊,單數(shù)用外描邊癣丧,所有錨點要與網(wǎng)格對齊不能出現(xiàn)偏移槽畔。
?
4.7.6 線段閉合
所有線段結(jié)合處應為閉合狀態(tài),避免錯位出現(xiàn)胁编。
?
4.7.7 統(tǒng)一透視
如果圖標有透視需求的話竟痰,就要統(tǒng)一透視角度,例如圖標透視方向朝左掏呼,那就統(tǒng)一所有圖標的透視角度都朝左邊坏快。
?
4.8 視覺柵格
除了像素柵格,還有視覺柵格憎夷。視覺柵格可以幫助我們找出圖標的中心在哪里莽鸿,以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小拾给。因此我們應該在繪制圖標時設定一個固定大小的容器祥得,這樣它們在導出時就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標在視覺上看起來更加平衡蒋得,避免以后開發(fā)時還需要重新調(diào)整级及。
?
4.9 視覺重量
繪制圖標不光要滿足物理上大小統(tǒng)一,還要實現(xiàn)視覺上大小統(tǒng)一额衙。設計師要懂得調(diào)節(jié)圖標大小以避開視覺上的覺錯饮焦。
UI界面的圖標通常可以近似的看做以下的基本格式之一:橫向矩形窍侧,縱向矩形县踢,對角矩形,圓形伟件,三角形硼啤,正方形。 如果把它們做成高斯模糊效果斧账,你就會發(fā)現(xiàn)它們具有相同的視覺重量谴返,因為它們變成或多或少相同的斑點效果煞肾。
?
根據(jù)圖標形狀,將它們放在相應的框架中嗓袱。你就會發(fā)現(xiàn)扯旷,方形圖標比三角形或細長圖標更緊湊。
4.10 圖標繪制細節(jié)
清晰是圖標的基本要素索抓,在sketch中钧忽,參數(shù)不要有小數(shù)點,讓圖標占滿像素網(wǎng)格逼肯。因為計算機不能識別小數(shù)點耸黑,導出圖標時計算機會把不能識別參數(shù)的部分拉伸填滿像素網(wǎng)格,導致圖標出現(xiàn)虛邊篮幢。
?
通常從一套圖標中最復雜的那個開始大刊,因為它會幫助我們定義相同的視覺重量,讓所有的圖標視覺重量保持一致三椿。因為當圖標具有不同的細節(jié)層次時缺菌,更復雜的圖標會吸引用戶更多的注意力,而且視覺上看上去更重搜锰。
?
4.11 圖標的顏色
默認顏色:如果是功能圖標伴郁,那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜蛋叼,不利于和其他設計師協(xié)作焊傅。而對于營銷圖標,出于品牌宣傳的目的狈涮,你可能會想要使用兩種顏色狐胎,個人認為圖標最好是單一顏色的,3種或3種以上顏色的東西都是插圖歌馍,而不是圖標握巢。
選擇狀態(tài)顏色:未選擇圖標顏色為#000000,透明度為87%松却;未激活圖標顏色為#000000暴浦,透明度為54%;禁用圖標顏色為#000000玻褪,透明度為38%肉渴。
?
4.12 功能圖標的風格
功能圖標在UI設計中占據(jù)非常重要的作用公荧,幾乎存在于每一個應用界面中带射,無論是在導航欄、工具欄或標簽欄循狰,還是在首頁窟社、詳情頁券勺、或個人中心頁,都隨處可見功能圖標的身影灿里。功能圖標具有明確的表意功能关炼,起作用在于替代文字或輔助文字來指引用戶進行快速導航,它具有圖形化的符號匣吊,比文字更加直觀儒拂,符合普羅大眾的認知習慣,有助于用戶形成記憶思維色鸳,提高應用的易用性社痛。同時,設計精美命雀、風格統(tǒng)一的功能圖標提升了產(chǎn)品視覺效果蒜哀,不但給用戶帶來視覺上的愉悅感,還帶來良好一致的使用體驗吏砂。
常見的功能性圖標風格大致有三種:線性圖標撵儿、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式狐血,所以歸根到底淀歇,基礎的圖標風格有兩大類:「線性圖標」和「面型圖標」;
?
4.12.1 線性圖標
線性圖標是通過線條來表現(xiàn)物體的輪廓匈织,它比面形圖標更能塑造優(yōu)美的外觀房匆,且作為貫穿圖標繪制的線條本身就是一種設計語言,因此繪制整套線性圖標會更加統(tǒng)一报亩,具有整體感浴鸿。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標弦追,如果線條粗細不一致岳链,會給人一種權重上存在差異的感覺。所以劲件,在繪制線型圖標時掸哑,通常會使用統(tǒng)一粗細的線條。
?
線性圖標具有辨識度高零远,清晰苗分,簡約易識別等優(yōu)點活尊,線性圖標不會對頁面造成太多的視覺干擾锌钮。缺點是:線性圖標的創(chuàng)作空間較少,太復雜的線性圖標對識別性產(chǎn)生較大的困擾襟交。
?
常用的App圖標設計線的粗細一般有2PX或者3PX,不同的線條粗細 ICON 所帶來的視覺感受也不同择浊,細線顯得精致戴卜,粗線視覺面積大,顯得厚重琢岩。圓角粗線條的 ICON 顯得飽滿而可愛投剥,個別 App 的底部標簽欄圖標采用粗線條設計,但粗線條的 ICON 圖形較為極簡才適用担孔。
線性圖標根據(jù)樣式還可以分為:雙色線性圖標江锨、線面填充圖標、線性漸變圖標糕篇。
?
線性圖標使用場景
在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計泳桦,很多APP產(chǎn)品的標簽欄都選擇用線性風格的圖標設計。無疑娩缰,線性圖標可以減少視覺干擾灸撰,讓用戶集中在產(chǎn)品核心功能上,同時輕量化的視覺語言也與扁平化的設計風格更為融合拼坎。它比面形圖標更能塑造優(yōu)美的外觀浮毯,且線條本身就是一種設計語言,因此繪制整套線性圖標會更加統(tǒng)一泰鸡,具有整體感债蓝。
?
通常,在UI設計中盛龄,線性圖標很少和背板同時存在饰迹,因為線條的圖形視覺表現(xiàn)力較弱,容易埋沒在背景色中余舶,但也不是必須的啊鸭,如果掌握好一定的規(guī)則,一些簡單的線性圖標和背板的組合也會很協(xié)調(diào)匿值。
4.12.2 面形圖標
面形圖標是以面為主要表現(xiàn)形式的圖標赠制,通過線或者面去切割基礎輪廓面,通過分型來塑造圖標的體積感挟憔。不同的切割手法造成了面性圖標設計感的差別钟些。在「微信」底部標簽欄中,未選中的圖標是線性圖標绊谭,而選中的圖標則是面形圖標政恍,同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標占用的面積要比線性圖標多达传,所以更加顯眼篙耗。實際上迫筑,蘋果在新的設計規(guī)范中也建議開發(fā)者在APP底部標簽欄中全部使用面形圖標,是否處于點擊態(tài)通過改變填充圖標的顏色進行區(qū)別鹤树。這是因為填充圖標看上去像可點擊的铣焊。
?
面形圖標具有表意能力強逊朽,細節(jié)豐富罕伯,情緒感強,視覺突出叽讳,創(chuàng)作空間大等優(yōu)點追他。面性圖標可以讓用戶迅速定位圖標位置,預知點擊后的狀態(tài)岛蚤。但是面性圖標在頁面中不可過多出現(xiàn)邑狸,否則會造成頁面臃腫,難分主次涤妒,用戶視覺疲勞单雾。
面性圖標根據(jù)不同的配色樣式可以分為:單色飽和度填充圖標,純色漸變圖標和多色漸變圖標她紫。
?
基于最基本的「線性圖標」和「面型圖標」硅堆,通過不同的形態(tài)和風格的組合,再結(jié)合豐富的 表現(xiàn)手法贿讹,就可以設計出形形色色的圖標風格了渐逃。比如:不同粗細線條線性圖標的組合,或者面面組合民褂,或者線面組合茄菊。大家在設計圖標的時候,需要根據(jù)自己的產(chǎn)品特征赊堪、受眾和使用場景面殖,去選擇適合自己的表現(xiàn)形式。
面形圖標使用場景
面形圖標具有廣泛適用性哭廉,通常在運動畜普、時尚類應用的標簽欄出現(xiàn)。由于面形圖標的視覺占比最大化群叶,具有強烈的視覺表現(xiàn)力吃挑。
?
功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標街立,正形即圖標直接填充色彩且無背板舶衬。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例,雖沒有嚴格的繪制標準赎离,但從整體視覺效果上考慮逛犹,圖標尺寸最好不低于背板直徑但1/2,最大不超過背板直徑的0.618(黃金比例),同時還要考慮所有圖標的視差一致虽画。
?
4.13 扁平圖標的使用場景
扁平化圖標實際上是線性圖標和面形圖標的一種組合形式舞蔽,這種類似插畫感覺的圖形一開始多用于引導頁、空狀態(tài)也的情感化設計码撰,后來逐漸在標簽欄渗柿、首頁主要功能入口也出現(xiàn)了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目脖岛,拉近了與用戶之間的距離朵栖,從而建立起良好的用戶印象。
?
4.14 品類區(qū)圖標
品類區(qū)圖標的衛(wèi)視通常是位于搜索框柴梆、banner之下(也俗稱“金剛區(qū)”)陨溅,而且品類區(qū)區(qū)域通常會占屏幕22%-25%不等,且位于屏幕頭部绍在,從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關重要门扇,而且是聚合各類子版塊的入口,為各個子版塊分發(fā)內(nèi)容引導流量偿渡。所以其重要性不言而喻臼寄,產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應的功能,而圖標具備精煉高度概括內(nèi)容的特性卸察,識別度也大于文字脯厨,所以「金剛區(qū)」的圖標設計通常以圖標+說明文字為主。
?
常見的設計手法有:圓形底板+45度漸變+白色面形+微投影坑质;45度漸變+扁平圖標+微投影合武;簡單線性;45度漸變+不透明度+面形圖標涡扼。
?
4.15 文字圖標
文字圖標是指用文字直接表示特定含義的圖標符號稼跳。由于文字本身就是一種演化而來的符號,英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性吃沪,因此在某些場景下汤善,采用文字或字符作為圖標,是一種很不錯的表現(xiàn)手法票彪。
?
比如「提示」圖標红淡,使用一個圓圈包裹一個英文字母「i」,意為 information降铸,表示「注釋信息」的含義在旱;比如停車場直接使用「Parking」中的首字母 「P」,這些都是比較約定俗稱的使用方式推掸。還有一些場景桶蝎,很難用象形或者表意的方式進行表達驻仅,那么就很適合使用文字符號,例如京東/天貓某些商品具備「正品保證」的標識登渣,這個概念太抽象了噪服,很難用象形去概括,創(chuàng)造新的表意符號又很難被大眾接受胜茧,這時「正」字就很適合作為這個場景特定的圖標符號粘优,作為針對中國用戶群體的產(chǎn)品圖標,簡單粗暴且有效竹揍。
?
如果可能的話敬飒,盡量避免在圖標中使用文字邪铲。因為圖標應該是全球性的芬位。如果你確實需要文字圖標(例如貨幣符號等等),那么請你自己繪制带到,而不是直接使用字體昧碉。
4.16 動態(tài)圖標
這幾年動效設計的熱度穩(wěn)定增長,只有靜態(tài)排版的時代正在過去揽惹。動效的出現(xiàn)被饿,也讓圖標擁有了更多的可能性。動態(tài)圖標可以讓你的app或網(wǎng)站生動有趣搪搏,在我們所常見的各種數(shù)字產(chǎn)品當中狭握,UI組件和各色元素都已經(jīng)動畫化了。
?
運動中的物體比靜態(tài)的物體更能快速引起人們的注意疯溺,在UI設計中嘗試添加一些動畫及動畫圖標论颅,不僅能在視覺上快速吸引用戶,還能使產(chǎn)品更具交互性囱嫩,提升產(chǎn)品的趣味性恃疯。分享幾個動態(tài)圖標資源網(wǎng)站:
useAnimations:支持所有設備、網(wǎng)站墨闲、Android和iOS今妄,可以免費用于個人和商業(yè)用途。
?
Lordicon:每一個圖標都提供線性輪廓和面形剪影兩種風格樣式鸳碧,并且圖標是基于Lottie動畫引擎的矢量動畫圖標盾鳞,大小完全可擴展,兼容所有主流瀏覽器瞻离。
?
Icons8 Animated icons 2.0:提供的動態(tài)圖標格式包括 Lottie 適用的 JSON腾仅、GIF 和 After Effects 格式,透過網(wǎng)頁可以搜尋琐脏、預覽動態(tài)圖標效果攒砖。
?
△https://icons8.com/animated-icons
Feather:設計師Cole Bemis制作的一個開源圖標庫缸兔,可自行調(diào)節(jié)圖標大小和線條粗細。
?
4.17 圖標命名規(guī)則
科學和高效的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標吹艇,并且?guī)椭_發(fā)縮短命名時間惰蜜,加強團隊寫作效率。切圖可按照“業(yè)務_類型_功能_大小_狀態(tài)”的格式進行命名受神。
?
切圖命名的格式建議為全英文抛猖,可在切圖之前對圖層進行命名,常用切圖命名對照表如下所示鼻听。
?
中篇就到這里财著,關注持續(xù)更新。
小手一贊撑碴,年薪百萬撑教!