UI設計培訓班 圖標的設計風格
來源:
奇酷教育 發表于:
根據UI設計風格的不斷演變,圖標設計也產生了很多種不同的風格變化,今天奇酷UI設計培訓班老師給大家分享下: 面性圖標:穩定、安全
根據
UI設計風格的不斷演變,
圖標設計也產生了很多種不同的風格變化,今天奇酷
UI設計培訓班老師給大家分享下:
面性圖標:穩定、安全、強調分量感,體量較重;往往用于分割層次,區分信息的重要程度; 使用時需要仔細考慮信息層級與文字搭配時的體量比例

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