當前位置:首頁 >教程首頁 > Photoshop >11個讓圖標更精致的設計細節!

11個讓圖標更精致的設計細節!

發布時間:2022-06-02 09:12:41

大家好,今天為大家分享的是「圖標設計細節」。圖標在頁麵中的尺寸很小,卻包含著很多細節。作為通用的視覺化語言,把握住其中的設計細節至關重要。

這次總結一下圖標設計的屬性以及在圖標設計中,很重要但容易被忽略的知識點。

在 UI 設計中,圖標主要有兩大類:一類是 APP 啟動圖標,每個 APP 獨一份;另一類是係統 icon,搭配文字,方便用戶快速理解信息,也是這篇文章重點講解的內容。

1.jpg

風格

常見的圖標風格有線性、麵性、彩色、寫實、3D 等,圖標的選用因頁麵的設計風格、圖標的位置等原因會有所差異,主要的作用是反饋動作和吸引用戶更多注意力。

線形/麵性:最基本也是做常用的風格,廣泛用在頁麵設計中。

彩色:通常用於反饋用戶的操作或者增加用戶的注意力。

3D/寫實:當頁麵中的某個內容需要引起用戶高度注意時使用,一下抓住用戶的視線。

2.jpg

Tips: 現在字節、百度新推出的一些年輕化產品中,有很多精致的 3D 寫實圖標,極具個性,很好地迎合了年輕用戶的喜好。在扁平風格流行的當下,這樣的嚐試也是一種突破。

重量

簡單的線性圖標重量輕,看起來更簡約,不會給頁麵帶來太大的視覺負擔。比如當頁麵中已經有很豐富的圖片和內容,那麼更適合選用簡約的、重量輕的線性/麵形圖標,防止頁麵過於雜亂。

相反,如果當前的頁麵中隻有文字,信息量很少,那麼更適合利用重量大的彩色甚至 3D 圖標來增加頁麵的豐富性,讓頁麵看起來更有設計感,給用戶帶來視覺上的愉悅,簡約而不簡單。

3.jpg

屬性

構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等,表達式規則是統一的,以便隻給觀看者識別圖標所需的最小更改。

4.jpg

描邊粗細:手機上常用到的描邊粗細有 2px、3px、4px。2px 的看起來會顯得更加精致,4px 的描邊視覺較重,可以用在優先級較高的區域作為功能性圖標,。

端點/節點:圖標的端點有平頭、圓頭和方頭,圖標的節點有斜接連接、圓角連接、斜角連接,具體使用哪種樣式要根據頁麵的情況統一設置。

圓角半徑:方形的圖標邊角過於鋒利,用戶有時候看起來會不舒服,圓角圖標更圓滑,相對來說更容易讓用戶接受。雖然圓角用的更普遍,但具體使用哪種,還是要考慮頁麵的整體風格再決定。

網格

圖標的外形有圓形、方形、三角形甚至不規則形狀的,所以我們很難將不同形狀的圖標尺寸完全統一。

這個時候網格就起到很關鍵的作用,有了網格相當於提前將圖標限定範圍,在網格範圍內根據圖標的重量和重心靈活調整大小,這樣會讓不同形狀的圖標看起來更統一。

5.jpg

視覺校正

由於設計軟件的局限性,雖然有些圖形已經居中對齊,但有時候還需要進行視覺校正。

最典型的圖標案例是“播放”圖標,利用設計軟件對齊中間的三角形後,會發現三角形的位置看起來偏左。

利用軟件對齊後,我們還需要再用眼睛確認一遍,我們可以將三角形向右移動,保證三角形的重心與圓形的重心一致,這樣整個播放圖標看起來會更舒服。

6.jpg

角度

設計圖標時,我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視,所以大多數的圖標都沒有透視,看起來會更簡潔。

帶透視的圖標會給用戶營造一種空間感,可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注,但不建議這麼設計。

7.jpg

比例

圖標比例通常使用 8 的倍數作為基準,例如 8px、16px、24px 和 32px,以便在各種環境中進行流暢地切換。除此之外,在移動端等屏幕尺寸較小的頁麵中,還會使用 4px 的倍數,來實現多功能性。

8.jpg

清晰

圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小,要盡可能做到對用戶友好,可以使用一些簡單的隱喻設計,但含義不能過於複雜。

一個圖形能說明的問題,沒必要再添加多餘的圖形。複雜的圖標可能需要花費用戶很長時間才能理解它們的含義,這樣反而會影響用戶的操作。

9.jpg

細節

這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息,特別是對於尺寸很小的係統圖標,最好隻保留最基本的內容,移除多餘的裝飾元素。

10.jpg

一致性

這裏說得一致性,並不是指一個產品中所有頁麵都隻能使用一種圖標風格。一個產品有很多頁麵,線性、麵性等多種圖標風格可以一起使用。

但在同一個頁麵場景中,執行相同功能的圖標應該保持相同的樣式。

11.jpg

熟悉感

麵對不同的操作係統,例如 iOS 和 Android,同一功能對應的圖標也會有差異。針對不同的係統,我們可以選用大多數用戶熟悉的圖標,這樣用戶能更快地理解圖標的含義

12.jpg

最後

以上就是常用卻容易忽略的圖標設計細節,希望通過這些內容能幫助你對圖標設計有更深的認識。

作者微信公眾號:「Clip設計夾」

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定