2021-4-12 ui設(shè)計(jì)分享達(dá)人
圖標(biāo)風(fēng)格匯總
圖標(biāo)設(shè)計(jì)流程
案例講解
圖標(biāo)資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點(diǎn)
該風(fēng)格設(shè)計(jì)感和個(gè)性都極強(qiáng),很考驗(yàn)設(shè)計(jì)師對(duì)造型繪制的把控,功底不夠就很容易導(dǎo)致設(shè)計(jì)后出現(xiàn)識(shí)別問(wèn)題。所以設(shè)計(jì)難度較大,且延展性較弱,難以表達(dá)復(fù)雜語(yǔ)義,使用需謹(jǐn)慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側(cè)(2.5d)
漸變
新擬態(tài)
輕質(zhì)感
明暗質(zhì)感
寫實(shí)
抽象
卡通插畫
像素風(fēng)格
面型不透明度風(fēng)格,通過(guò)調(diào)節(jié)前后不透明度可以帶來(lái)較強(qiáng)的空間感,使用場(chǎng)景較廣泛。
晶白嚴(yán)格來(lái)說(shuō)也算質(zhì)感圖標(biāo)(白色質(zhì)感)的一種,常見(jiàn)于品類圖標(biāo)設(shè)計(jì),通過(guò)透明度、投影、漸變等參數(shù)調(diào)節(jié),使整體立體感和空間感都很強(qiáng)。
又叫毛玻璃風(fēng)格,是通過(guò)背景模糊,或剪切模糊圖層的技法來(lái)表達(dá)通透、有層次、精致的視覺(jué)感受,但由于容易與淺色背景相融,造成對(duì)比度不足難以識(shí)別的問(wèn)題,所以在使用中需要注意無(wú)障設(shè)計(jì)。
也叫2.5d,有很強(qiáng)的趣味性,及識(shí)別度,適合重要入口或運(yùn)營(yíng)設(shè)計(jì)。但這類風(fēng)格較為卡通,且表現(xiàn)花哨。使用需要注意應(yīng)用場(chǎng)景及目標(biāo)人群年齡段,避免干擾信息閱讀和不符和產(chǎn)品風(fēng)格。
這類風(fēng)格可以很好的吸引用戶注意力,在電商、美食類產(chǎn)品中較常見(jiàn),主要注意配色干凈協(xié)調(diào)。
新擬態(tài)圖標(biāo)色彩相對(duì)單一,與背景融合度較高,通過(guò)高光、投影表現(xiàn)一定的立體感。通常是整個(gè)產(chǎn)品就是新擬態(tài)風(fēng)格時(shí)才使用。所以該風(fēng)格局限性較大,再有這類風(fēng)格與背景對(duì)比較弱,無(wú)障設(shè)計(jì)問(wèn)題較大。
通過(guò)大量漸變、投影來(lái)表現(xiàn)立體感,整體風(fēng)格偏年輕化,常見(jiàn)在教育類產(chǎn)品中,使用注意配色干凈和諧。
通過(guò)調(diào)節(jié)同一色相不同明度、飽和度來(lái)營(yíng)造前后空間感,整體風(fēng)格統(tǒng)一。
這類圖標(biāo)特點(diǎn)很明顯,有極高的識(shí)別度,目前美團(tuán)外賣品類區(qū)入口就是該風(fēng)格,整體偏年輕化。主要考驗(yàn)設(shè)計(jì)師造型繪制、技法表現(xiàn)能力。
通過(guò)幾何圖形組合、色彩使用來(lái)表達(dá)美的視覺(jué)感受。這類圖標(biāo)藝術(shù)(裝飾)價(jià)值更大,不追求識(shí)別度,美觀即可。
這類風(fēng)格既可以做圖標(biāo)又可以做空狀態(tài)插圖,設(shè)計(jì)美觀有特色即可。
這類移動(dòng)端界面較少見(jiàn),目前只在一個(gè)海外電商產(chǎn)品(Jollychic)中看過(guò),還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。
線面
描邊插畫
粗線
細(xì)線
圓角
直角
力量感、穩(wěn)重、男性等感受
安全、親和、年輕
由于圖標(biāo)風(fēng)格繁多,所以以上列舉并不包含所有圖標(biāo)風(fēng)格。
明確語(yǔ)義
關(guān)鍵詞詳解發(fā)散
確定風(fēng)格
提取造型
創(chuàng)意輸出
圖標(biāo)存在的目的是起引導(dǎo)作用,在豐富頁(yè)面視覺(jué)的同時(shí),幫助用戶更快的獲取信息(當(dāng)然圖標(biāo)的使用意義還有很多)。設(shè)計(jì)師在將文字翻譯成圖標(biāo)前,必須先理解其文字含義。因?yàn)樽罱K呈現(xiàn)的圖標(biāo),需要用戶一眼能準(zhǔn)確反翻譯其中含義(藝術(shù)抽象、裝飾類圖標(biāo)除外)。
在C端設(shè)計(jì)中,以Tab為例,一些常見(jiàn)文案:首頁(yè)、分類、發(fā)現(xiàn)、我的,這類語(yǔ)義還算比較清晰的。但在B端設(shè)計(jì)或工具類APP中就會(huì)遇到一些復(fù)雜語(yǔ)義。以我的工作來(lái)說(shuō),目前在做一款網(wǎng)站搭建工具,后臺(tái)常會(huì)需要設(shè)計(jì)組件及對(duì)應(yīng)的圖標(biāo),比如:滑動(dòng)商品、多圖列表、上拉圖文列表這些語(yǔ)義比較復(fù)雜的圖標(biāo),在一定程度上會(huì)比較難精準(zhǔn)傳達(dá)文案。
這一步有點(diǎn)類似情緒版使用,但不同的是:我們需要將確定的詞(A)進(jìn)行詳細(xì)解釋,再將解釋文案中關(guān)鍵的詞語(yǔ)進(jìn)行發(fā)散,得出一系列相關(guān)聯(lián)的詞(A1、A2、A3…)。有時(shí)間還可以根據(jù)這些詞找到對(duì)應(yīng)的圖片,再看在這些相關(guān)聯(lián)的圖片中,有哪些細(xì)節(jié)可以傳遞最開(kāi)始我們確定的那個(gè)詞(A)的意思。
我們可以借助情緒版,根據(jù)產(chǎn)品定位和目標(biāo)用戶描述,再結(jié)合應(yīng)用場(chǎng)景,在目前已有的風(fēng)格中找到符合產(chǎn)品氣質(zhì),符合當(dāng)前模塊視覺(jué)層級(jí)的圖標(biāo)風(fēng)格。
前面我們已經(jīng)了解了目前常見(jiàn)的圖標(biāo)風(fēng)格有三大類:線性、面型、線面,其中還有很多細(xì)分,比如在線性中又分粗線(沉穩(wěn)、力量)、細(xì)線(品質(zhì))、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創(chuàng)意前期,我們將每個(gè)點(diǎn)合理進(jìn)行隨機(jī)組合(如下圖)即可創(chuàng)造一種更新穎的風(fēng)格。
經(jīng)過(guò)關(guān)鍵詞詳解發(fā)散,其實(shí)我們已經(jīng)獲得了很細(xì)節(jié)點(diǎn),接下來(lái)將這些細(xì)節(jié)點(diǎn)進(jìn)行合理融合后,就可以得到代表同一語(yǔ)義但形式各異的基礎(chǔ)圖標(biāo)樣式(此時(shí)還只是想法階段,可以通過(guò)手繪方式記錄組合形式,不用特別精細(xì)化)。
圖標(biāo)設(shè)計(jì)規(guī)范
圖標(biāo)設(shè)計(jì)注意點(diǎn)
常見(jiàn)圖標(biāo)尺寸
圖標(biāo)盒子使用
在界面圖標(biāo)設(shè)計(jì)中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)
圖標(biāo)盒子即圖標(biāo)約束網(wǎng)格,來(lái)源于Material design。使用圖標(biāo)盒子有利于使我們創(chuàng)造的系列圖標(biāo)保持規(guī)范與統(tǒng)一。
簡(jiǎn)潔美觀
易于識(shí)別
細(xì)節(jié)統(tǒng)一
像素對(duì)齊
視覺(jué)大小一致
飽滿透氣
融入品牌基因
圖標(biāo)是否美觀,會(huì)受設(shè)計(jì)師對(duì)圖標(biāo)造型把控、圖標(biāo)構(gòu)成元素比例、配色等設(shè)計(jì)能力影響。在UI界面功能圖標(biāo)設(shè)計(jì)中,通常會(huì)盡量減少不必要的細(xì)節(jié),降低圖標(biāo)復(fù)雜度,來(lái)幫助用戶快速識(shí)別。當(dāng)然圖標(biāo)也有豐富細(xì)節(jié)的做法,常見(jiàn)在一些重要運(yùn)營(yíng)入口上。
識(shí)別度的問(wèn)題,在最前面明確語(yǔ)義中就有提到過(guò),這里就不贅述。
在細(xì)節(jié)中包含:表現(xiàn)風(fēng)格、描邊粗細(xì)、端點(diǎn)類型、圓角大小、斜角角度、配色、投影參數(shù)等(不同風(fēng)格圖標(biāo)的細(xì)節(jié)不同,這里只是列舉部分),上述細(xì)節(jié)在系列圖標(biāo)中都應(yīng)保持一致。
在圖標(biāo)繪制中,需盡量避免坐標(biāo)位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點(diǎn),以此保證最終導(dǎo)出的圖標(biāo)是清晰的。
由于不同圖標(biāo)外輪廓不同,就會(huì)導(dǎo)致哪怕在物理大小上相同的圖標(biāo)(假設(shè)都是24x24),但視覺(jué)上可能還是會(huì)給人大小不一致的感受,因此我們需要借助前面提到的圖標(biāo)盒子進(jìn)行約束調(diào)整。
圖標(biāo)的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細(xì)節(jié)。而是盡可能在形成風(fēng)格的同時(shí),簡(jiǎn)化能影響識(shí)別度的關(guān)鍵筆畫,通過(guò)調(diào)節(jié)筆畫大小、長(zhǎng)短、位置使圖標(biāo)達(dá)到一個(gè)最平衡狀態(tài)。
以如下途牛_我的頁(yè)面_功能區(qū)圖標(biāo)為例:
圖中標(biāo)紅圖標(biāo)就存在飽滿度不足,及內(nèi)部較擁擠的情況,第一感受是看起來(lái)不舒適,品質(zhì)感比較低。除此外,還存在如下問(wèn)題:
圖標(biāo)大小很明顯不一致
設(shè)計(jì)語(yǔ)言不統(tǒng)一,有圓角有直角
圖標(biāo)風(fēng)格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問(wèn)、我的收藏)、還有其余單色實(shí)心形式
在圖標(biāo)中融入品牌基因可以有效的提升產(chǎn)品品牌感,作為高階設(shè)計(jì)師必備技能之一,常見(jiàn)提取維度:
顏色
設(shè)計(jì)語(yǔ)言
以我之前的豆果美食項(xiàng)目為例,提取到如下細(xì)節(jié):
根據(jù)提取到的基因,最終得到如下兩套風(fēng)格不同,但語(yǔ)言相同且都具備品牌感的圖標(biāo)。
Logo輪廓:在圖標(biāo)中融入品牌logo外輪廓(Google Play),或根據(jù)logo輪廓結(jié)合應(yīng)用特性進(jìn)行延展(Microsoft)。
根據(jù)文案進(jìn)行詳細(xì)翻譯,幫助我們充分理解文案。
釋義:有專門的知識(shí)或經(jīng)驗(yàn),受聘為機(jī)關(guān)團(tuán)體或單獨(dú)個(gè)人提供專門咨詢的人。
提取釋義中關(guān)鍵信息,生成關(guān)鍵詞:專業(yè)、專人,再根據(jù)關(guān)鍵形容詞發(fā)散一系列具象名詞。
根據(jù)產(chǎn)品調(diào)性和模塊視覺(jué)層級(jí)以及考慮延展性,初步確定如下風(fēng)格組合起來(lái)是比較適合:
在實(shí)際查看中,發(fā)現(xiàn)Tab的風(fēng)格為單色+不透明度+斷點(diǎn)風(fēng)格。
為了和Tab拉開(kāi)差異,最終確定以如下風(fēng)格進(jìn)行組合表現(xiàn)比較符合產(chǎn)品調(diào)性:
線性:雙色
面性:?jiǎn)紊㈦p色、不透明度、輕質(zhì)感、明暗質(zhì)感
線面:線面
通過(guò)手繪或大腦想象進(jìn)行造型構(gòu)思,這里我就不展示手繪過(guò)程(行吧,我承認(rèn)就是畫的太丑了不敢放)。
由于不同風(fēng)格對(duì)圖標(biāo)造型構(gòu)思有所影響,且圖標(biāo)類型很多,不同特點(diǎn)組合起來(lái)樣式更多。案例精力有限,所以只以線性雙色風(fēng)格做演示,希望大家靈活使用。
這一步就是將手繪圖形矢量化,在矢量化創(chuàng)意過(guò)程中,我們可能會(huì)對(duì)手繪的圖形進(jìn)一步簡(jiǎn)化細(xì)節(jié)或新增造型,這都很正常。只需注意在整個(gè)繪制過(guò)程中遵循圖標(biāo)設(shè)計(jì)規(guī)范,以及注意圖標(biāo)設(shè)計(jì)注意事項(xiàng)即可。
圖標(biāo)盒子使用
創(chuàng)意輸出
Tips:
1or2?
最后對(duì)專屬客服進(jìn)行多風(fēng)格嘗試,最終效果如下:
附上部分繪制過(guò)程中的淘汰稿:
SVG:縮放無(wú)損、體積小、支持前端樣式修改參數(shù)、單色情況下方便前端修改顏色來(lái)表達(dá)圖標(biāo)狀態(tài),減少重復(fù)上傳。
PNG:支持透明格式
JPG:兼容性強(qiáng),適合大尺寸高飽和度圖像
GIF:動(dòng)態(tài)圖標(biāo)使用,缺點(diǎn)是透明情況下邊緣容易出現(xiàn)鋸齒。
這里主要介紹靜態(tài)圖標(biāo)中,svg格式在工作中如何輸出給前端同學(xué)使用(借助iconfont)。
1、圖標(biāo)資源優(yōu)化
在iconfont官方繪制指南中有描述,在導(dǎo)出前需要按如下規(guī)則優(yōu)化圖標(biāo)資源:
2、選中圖標(biāo)導(dǎo)出svg格式
以Figma為例,優(yōu)化圖標(biāo)資源后,選中圖標(biāo)將輸出格式選擇為導(dǎo)出svg。
3、上傳iconfont
在資源管理下,選擇需要上傳的位置。
去除顏色并提交:適合單色圖標(biāo),去除顏色提交可以方便前端使用代碼修改參數(shù),減少不同狀態(tài)圖標(biāo)重復(fù)上傳。
保存顏色并提交:適合多色圖標(biāo)(注意:在單色情況下,選擇保留顏色提交,前端則無(wú)法通過(guò)代碼修改圖標(biāo)顏色)。
最后當(dāng)我們把圖標(biāo)都上傳好后,就可以將前端同學(xué)拉入團(tuán)隊(duì)項(xiàng)目中開(kāi)心進(jìn)行玩耍。
文章來(lái)源:站酷 作者:幺零三
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com