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

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

2021-4-15    周周


今天還是一篇非常干貨的原創文章。

內容分為兩點:

  • 快速繪制精致圖標的經驗與技巧,有效提升專業力
  • 團隊內有多個設計師協作的時候,如何制定圖標設計規范,讓設計更整體

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

歸納圖標設計原則

圖標的基礎特征

動手設計之前,咱們先對完整的圖標集進行分析。

弄明白在畫整體的系統圖標集合時,各個圖標得具備哪些特征,有哪些切入點,可以作為我們在實際繪制時候的依據。

先來看幾組 iconfont 的案例,看不太清的同學可以戳圖片放大。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

圍繞上面這些案例,咱們可以歸納出圖標的幾點設計原則。比如:

1. 設計圖標需要考慮延續性,圖標之間互相牽連影響

圖標幾乎不會以單個的形式出現,大多數都是以組歸類。符號整體性與統一性,都是依靠單個 icon 的共性特征建立起來的。

比如 iconfont 中的這組icon,圖標圓形的外輪廓,就保持了一致。其次用戶頭像的代表符號,也很好保持了延續性。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

正是這種小特征,共同組成了圖標庫的整體特征。

2. 設計手法趨同、圖形內容差異

第二點好理解,設計風格、手法要素需要統一,但是內容傳達的差異必須要拉開,避免圖形趨同導致功能混淆。

比如下面兩個案例,由于過于相近,導致用戶很難理解圖標含義,是天氣,還是設置按鈕,這種情況我們在設計時需要極力避免。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

總結來說,就是圖標的共性往往體現在設計手法上,比如顏色、形狀粗細、細節的一致性,這些都是設計風格的統一。

而圖標的特性,往往體現在形狀內容差異,形狀會決定圖標的信息傳遞含義。所以共性要趨同,特性要拉開,這個是設計圖標集的基本原則。

3. 功能大于形式,圖形能理解的情況下樣式越簡潔越好

不知道大家是否關注,曾經在設計圈風靡一時的MEB圖標風格,產品圈卻非常冷門,幾乎沒有產品在繼續用這種風格作為功能性質圖標。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

△ 該作品來自于網絡圖片,僅作交流使用

因為雖然圖標增加了小裝飾后,顯得有趣精致,但其實也增加了圖標的識別難度以及識別效率,反而背離了圖標的設計初衷。

所以對于系統功能圖標而言,必要的簡潔性,高效的識別率,才是關鍵。

如何制定圖標設計規范

圖標的設計約束性

聊完了設計主張及基本的特征。接下來咱們開始剖析圖標的設計細節,包括分析制定圖標的系統設計規范,應該從哪些方面入手。

規范一:基本尺寸比例

規范的第一點,就是圖標的基礎形狀比例。這個比例,主要是約束長與寬,共包含了四個關系,分別為「正方形 : 橫矩形 :豎矩形 :圓形」

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

這四個關系的約束,會讓圖標集里的所有圖標大小,看起來是一致的、統一的。橫矩形、豎矩形這兩個比例,會決定整套圖標的飽滿程度,橫豎比例越一致,圖標整體越飽滿。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

這點大家可以自己斟酌,如果是泛娛樂型的產品,icon可以更飽滿一些。如果是偏工具化產品,那么還是可以優先保障圖標的識別度,飽滿程度倒是其次。

圓潤飽滿型:

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

剛正工具型:

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

規范二:線條粗細、正負形間距

定了比例后,接下里就是對圖標的細節刻畫。對于線性圖標而言,最重要的細節就是線條粗細;對于面性圖標而言,最重要的就是正負形之間的間距。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

所以這些核心元素,在圖標的核心線條、核心區域部分,間距樣式都應當保持統一。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

通常在移動端@2x內,主流icon的粗細為3px,而4px大多數都是為功能性導航icon,細一點的圖標通常看起來會更精致一些。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

當然也有部分產品使用的是2px,比如新版的YouTube,其次還有些較為復雜的icon,單根粗細的線段不一定能滿足其需求,所以還需要制定一條副線的粗細。

細節可以根據產品的調性來定,統一即可。

規范三:圓角、角度個性化元素

大比例跟基本元素確定后,也可以制定一些圖標的個性化元素規范,比如圖標的圓角大小、角度位置,等一些特殊的樣式。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

像這些個性化的規范,顆粒度可以Case By Case來定義,圓潤還是方正,可以根據產品的視覺風格來定義就好。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

這些規范樣式定好,就可以充分的讓圖標集內的圖標,從設計上是保持一致的,且具有特色感。

圖標的設計流程

上面講了關于圖標的分析及規范。為了方便大家掌握,接下來咱們就來講講,具體動手做,流程是什么樣的。這里我給個我的步驟作為參考:

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

第一步:繪制好圖標基本網格

第一步,當然是確定好圖標icon的大小,以及上面我提到的基本尺寸比例,四個關系「正方形 : 橫矩形 :豎矩形 :圓形」的約束,構建好基本骨骼。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

我這里以圖標容器大小為 56×56,預留8px安全間距,圖標最大大小為 48×48。

由于視差關系,圓形在圖標里面的尺寸是最大的,所以圓形的大小為48×48。因為我想圖標飽滿一些,所以正方形的大小我兩邊各減去2,為42×42。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

然后再繪制出橫矩形(48×36)與豎矩形(36×48),各線段之間的間距保持一致。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

然后各個形狀居中對齊,這樣四個關系「正方形 : 橫矩形 :豎矩形 :圓形」定好后,基本的容器就制定好啦。

第二步:設定圖標基本規范

接著制定好圖標的基本規范,為了方便大家看得清,我這里設定圖標的線條粗細為3px,圓角為6px,干凈簡潔一些,讓它看起來更飽滿。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

角度、斷點啥的,我這里就不定義了,因為只是示例給大家看,講一下流程,所以盡可能簡單一些。大家在做練習的時候,也可以嘗試自己去定義一下。

第三步:繪制圖標

好了后就可以開始繪制圖標啦。我這里分別繪制十五個,作為示例

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

然后就是使用路徑工具,根據創意去繪制完善圖標了。繪制的過程中,也可以不斷調整,讓圖標看起來更協調,更飽滿,更容易識別。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

花了十五分鐘左右,簡單的十五個圖標草稿就畫好了,接下來咱們開始調整細節。

第四步:整體性調整

所有的圖標繪制好了后,咱們就可以整體性的開始打磨細節,把圖標形狀的一些折角處、大小樣式調整一致,讓圖標的節奏更清晰,整體樣式更統一。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

這樣一組精致的系統icon就繪制好啦。

接著咱們也可以加點特色風格進行嘗試,比如填充一個顏色。

研究了上百套圖標,總監卻告訴我圖標要這樣畫!

當然細看的話,圖標部分細節還是有點糙,其實還可以再調調,但這個主要做示例用,大家自己在做練習的時候,可別像我一樣偷懶嗷

圖標庫下載

上面講了很多方法經驗,文末給大家來點實際的。

我珍藏了很多較為不錯的大廠圖標集合庫,日常在畫圖標沒靈感的時候,就會打開看看這些,參考一下。

文件都是矢量格式的,編輯方便,還很全面。今天拿出來送大家白嫖了

研究了上百套圖標,總監卻告訴我圖標要這樣畫!




文章來源:優設網     作者:UX小學


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


日歷

鏈接

個人資料

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

存檔