UI設(shè)計(jì)培訓(xùn)班 圖標(biāo)的設(shè)計(jì)風(fēng)格
來源:
奇酷教育 發(fā)表于:
根據(jù)UI設(shè)計(jì)風(fēng)格的不斷演變,圖標(biāo)設(shè)計(jì)也產(chǎn)生了很多種不同的風(fēng)格變化,今天奇酷UI設(shè)計(jì)培訓(xùn)班老師給大家分享下: 面性圖標(biāo):穩(wěn)定、安全
根據(jù)
UI設(shè)計(jì)風(fēng)格的不斷演變,
圖標(biāo)設(shè)計(jì)也產(chǎn)生了很多種不同的風(fēng)格變化,今天奇酷
UI設(shè)計(jì)培訓(xùn)班老師給大家分享下:
面性圖標(biāo):穩(wěn)定、安全、強(qiáng)調(diào)分量感,體量較重;往往用于分割層次,區(qū)分信息的重要程度; 使用時(shí)需要仔細(xì)考慮信息層級與文字搭配時(shí)的體量比例
線性圖標(biāo):性質(zhì):輕盈、連貫、精致,體量較輕;往往用于整體觀感精致簡約風(fēng)格的頁面設(shè)計(jì);但是過大面積的使用容易使頁面產(chǎn)生過于輕浮沒有重心的感覺
線+面:在線性圖標(biāo)的基礎(chǔ)上填色或者局部填色,使圖標(biāo)更加個(gè)性化,可拓展且靈活, 相較于單純線性或單純面性icon來說更具有特色、年輕化;通常適用于需要強(qiáng)調(diào)的入口,相對于純線性或面性icon較復(fù)雜,不適合小體量場景使用
面+面:采用配色與其他視覺元素呈現(xiàn)出的稍復(fù)雜圖形,與線+面的形式類似,與審美氣質(zhì)與設(shè)計(jì)風(fēng)格的選擇有較強(qiáng)關(guān)聯(lián),設(shè)計(jì)師在其中可以更加靈活的運(yùn)用色彩;相對于功能性圖標(biāo)來說更適用于裝飾性圖標(biāo)。
2.5D 圖標(biāo):也是運(yùn)用配色搭建的圖標(biāo),整體相較于扁平圖標(biāo)有了立體感,使得對于物象的表達(dá)更加清晰不趨同;同樣也趨于裝飾性圖標(biāo)
擬物:手機(jī)界面興起伊始的風(fēng)格,對現(xiàn)實(shí)事物元素的超級詳細(xì)的模仿與拷貝;用于最初在界面設(shè)計(jì)中對于用戶的教育,模擬更真實(shí)的實(shí)用場景?,F(xiàn)在多用于更加個(gè)性及細(xì)節(jié)化的展示,目前仍廣泛用于游戲場景中
在了解了圖標(biāo)的功能分類與圖標(biāo)的設(shè)計(jì)風(fēng)格之后,我們再來了解一下圖標(biāo)的使用場景
底部標(biāo)簽欄
圖標(biāo)使用案例:
1、線性圖標(biāo) 插入高亮線性圖標(biāo),強(qiáng)調(diào)精致、輕盈、連貫
2、在一排空心圖標(biāo)中插入一個(gè)實(shí)心圖標(biāo),視覺會明顯聚焦到面性icon上,視覺注意力更有力度
3、面性圖標(biāo)里插入高亮面性圖標(biāo),強(qiáng)調(diào)整體分量感;穩(wěn)重、安全、分量
4、線性圖標(biāo)插入線性填色的雙色圖標(biāo),小眾、個(gè)性
底部標(biāo)簽欄常配小字號文字說明,文字起到輔助圖標(biāo)的作用,輔助圖標(biāo)的記憶
導(dǎo)航欄
導(dǎo)航欄處于頁面頂端,由于扁平化設(shè)計(jì)使用場景:同級別內(nèi)容列表
列表里的圖標(biāo)要求簡潔,不用太過搶眼。多以面性或線性圖標(biāo)為主,拒絕花哨,要求視覺風(fēng)格統(tǒng)一,主要用于對于文字的輔助解釋風(fēng)格以及視覺瀏覽順序,頭部多較為輕盈,目前多選擇用線性icon來使得頭部的視覺體量不至于過重。
處于導(dǎo)航欄的圖標(biāo)多為簡單語義【添加】【相機(jī)】【消息】【菜單】【掃一掃】【添加好友】等
由于ios11的設(shè)計(jì)規(guī)范采用靠左側(cè)標(biāo)題,操作居于導(dǎo)航欄右側(cè),當(dāng)操作為兩個(gè)以上時(shí)也多用圖標(biāo)來表達(dá)
但是,也不是導(dǎo)航欄所有的操作都要用圖標(biāo)來表示的,當(dāng)導(dǎo)航欄操作為強(qiáng)調(diào)性操作或較抽象語義時(shí),如【保存】【發(fā)送】【管理】【編輯】等,則選用文字來轉(zhuǎn)達(dá)最準(zhǔn)確的表意
分類區(qū)
分類頁中,圖標(biāo)排列整齊,圖標(biāo)下方會有文字的輔助說明,多為三到四個(gè)圖標(biāo)一排。要求圖標(biāo)語義明確清晰,可以充實(shí)豐富頁面,可輔助用戶快速定位到自己要找的模塊,與金剛區(qū)圖標(biāo)有類似的地方;語義要求更加明確,以及一定的裝飾性
輔助說明圖標(biāo)分兩類:
1、局部突出重點(diǎn):當(dāng)需要在頁面固定的區(qū)域中突出展示某一點(diǎn)時(shí),通常會增加圖標(biāo)在文字前面來進(jìn)一步強(qiáng)調(diào)補(bǔ)充內(nèi)容;
2、用于豐富頁面:相對于功能說明更加注重美觀裝飾的訴求,用于增進(jìn)用戶的友好度。常用于促銷彈窗、說明頁、紅包等頁面。
綜上所述是我個(gè)人對于圖標(biāo)的使用的一些心得體會。圖標(biāo)是在
頁面設(shè)計(jì)中占有較大比重的地方,為功能服務(wù)、為整體頁面信息展示服務(wù)。需要我們仔細(xì)思考,謹(jǐn)慎使用。