国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

詳解|圖標設計,精致的體力活兒!

2021-6-30    seo達人


對于一套圖標來說,能讓用戶記得住,源于圖標的與眾不同;而能讓用戶覺得有專業感,其實是源于圖標的整齊劃一。圖標設計本身也有自己一套規范,在設計圖標的過程中遵循一定規范去工作,不僅可以使圖標看起來更美觀,而且還可以體現出設計師的專業和價值。作者在本文中以1024px下的設計規范給出詳細的說明和解釋,歡迎大家討論。

 

很多設計平臺都推薦設計師在 1024 X 1024px 的網格中繪制組件,且圓角的大小保持 8 的倍數關系。例如 Ant Design 給出的圖標繪制網格規定:

圖片

關于圖標設計,你大概也有思考過這樣的問題:

  • 為什么圖標要使用 1024 X 1024px 的網格進行繪制?
  • 設計頁面的時候,如果需要的圖標大小是 16 X 16px,為什么不推薦直接使用 16 X 16px 的網格繪制圖標呢?

對于這類問題,本文解答如下 ——

 

1 . 可以「精確」繪制細節

下面這張圖你可以很清楚的看到網格的用法:圖中放大的圓圈中的一個藍色的小方格是 32 X 32 px,也就是說,這個藍色小方格里面還是一個 32 X 32 的格子盤:

圖片

你可以想象,當你在繪制一個圖標時,其實是在一個布滿了小格子的紙上進行繪制,這樣做我們在繪制圖標的時候可以很精確,每一個圓角的大小、每一根線條的粗細、每一個斜線的角度等等,都有嚴格的數量規范,以確保圖標造型的統一和精確

關于圖標的精確規范,我們以 Ant Design 的圖標系統中的部分細節規范為例:

 

(1)圓角:

圓角的規格采取 8 的倍數原則,最常用的尺寸是 3 種,分別是 8px、16px、32px,它們之間是兩倍數的關系。而圖標內部空間的圓角則保持直角(0px)的處理方式。

圖片

 

(2)點的直徑:

點是非常常用的元素。Ant Design 對于點的尺寸選擇上會保持 16 的倍數這一原則。在點的選擇中常用四種尺寸,分別為 80px、96px、112px、128px。當出現特殊尺寸的需求時,會按照 16 的倍數進行延展。

圖片

 

(3)線寬:

Ant Design 的線條寬度之間的關系采用 8 倍數原則,從小到大以 8 的規律遞增。常用的規格也是 4 種,分別為 56px、64px、72px、80px。

圖片

你會發現,在 16 X 16px 的畫板中肯定是可以畫出來圖標的,只是圖標的形狀并不是單一的圓形或是方形,一旦出現多種樣式的線和點,你是無法精確控制繪制的規律的。

當然,1024px 也并不是絕對的數值,你也可以在 800 X 800px 或是 960 X 960px 的網格中進行繪制,網格數量越多,你的繪制就會越精確。

 

2 . 圖標造型「靈活性」更高

使用 1024 X 1024px 的網格時,可以預留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的畫板邊緣預留了 64px 的出血位,也就是說,真正用來畫圖標的常用畫板尺寸是:1024-64-64 = 896,即:896 x 896px。

圖片

在圖標的設計過程中預留出血位,可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險;同時在設計過程中,也為設計師把握圖標間平衡留下了進退的余地,為圖標賦予更多靈活性

圖片

 

而如果你使用的是 16 X 16px 大小的網格繪制圖標,則很難設置出有效的出血位。

 

3 . 「縮放」游刃有余

按照上文所述,當你在 1024 X 1024px 的網格中畫好圖標后,再將圖標等比例縮小,就變成了我們通常看到的界面上的圖標。通常情況下,界面上使用的圖標的大小不會超過 1024 X 1024px,因此基本上都是對圖標進行縮小變換,在縮小圖像時可以保持銳利的邊緣和正確的對齊方式。

圖片

而如果你使用的是 16 X 16px 大小的網格畫出來的圖標,如果需要放大的場景,在圖標放大之后會有很多細節無法處理和補充。

 

4 . iOS 平臺標準

以蘋果公司為例, iOS 7 及之后版本 iOS 的圖標網格均采用 1024 X 1024px 的網格作為基準。向 App Store 應用商店提交的 iOS 應用圖標必須使用 1024 X 1024 分辨率的高清圖標。Retina 視網膜屏幕也為高清圖標帶來極佳的顯示效果,更好的考慮到用戶的體驗感受。

圖片

本文講解的問題看上去很基礎,但很多同學其實都是“揣著糊涂裝明白”。繪制圖標其實是一個“精致的體力活”,一套真正優秀的圖標,在細節上是值得放大 10 倍來進行推敲的。

 

原文鏈接:長弓小子(公眾號)

作者:元堯

轉載請注明:學UI網》詳解|圖標設計,精致的體力活兒!

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:陳皮Celia 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔