中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文非常全面并且很長，建議收藏以備日后所需，看完本文基本就能了解圖標的一切，如果沒有耐心，可以拉倒底部，查看技巧。

我們的追波team鏈接，文中部分作品來自team成員。https://dribbble.com/nullest

一、圖標的歷史和它的目的

開始之前，你必須先清楚要了解什么是圖標設計以及它的來歷，下面我會簡要介紹圖標設計的歷史， 了解它在當今世界的重要性，以及未來的發展趨勢。

1.1 什么是圖標

如果我們在字典中查“icon”這個詞，會發現很多同的含義，從“ 一個神圣的人物”到“計算機命令常用的象征性符號”。

“icon”最簡潔準確的定義是，用相似的或者類比的方式來表現它所代表的對象。

1.2 圖標設計歷史

正如我之前提到的，圖標設計的歷史可以追溯到史前時代。然而在這個特定的部分我想關注近代圖標的發展史，就對圖標理解更深刻了，我這個網站寫的圖標歷史非常的棒：https://historyoficons.com/

1.3 為什么圖標很重要

隨著人們越來越忙，圖標成了我們生活的基本組成部分。它們幫助我們定位、迅速決策、發現要找的東西。

讓我們仔細看看為什么圖標在今天如此重要，以及在未來將會產生何種影響。圖標統一整個世界，無論你說何種語言，一個圖標勝過千言萬語。當你要在機場導航，在繁華的商場找一個廁所或者只是要在軟件中做一個特定的操作，圖標都是至關重要的。

1.4 圖標傳遞信息非常迅速

為什么圖標如此重要？

因為人們的平均注意力比金魚還短。，是的你沒聽錯，根據美國國家生物中心的調查：

人們的平均注意 從2000年的12秒下降到 2013年的8秒，比金魚的注意力還短1秒。

你能想象金魚的注意力比人類還長嗎？事實就是如此。

在這個充滿信息噪音的世界 ，圖標是一個救星。你只需要快速瀏覽一下圖標所代表的復雜信息，用這種方法，你可以用剩下的7秒關注真正重要的信息。無論你是需要在產品的頁面上找到某個特定的功能，或是在國外的城市找地鐵。圖標節省了你很多時間，加快了進度。

隨著人們日益繁忙，信息噪聲越來越多，越來越全球化，圖標在未來會更加重要。

二、圖標的基礎知識

如果你不了解圖標的基礎知識想取得進步非常困難， 這章就是在你設計圖標之前指導你每一個技術細節。學習圖標的類型、不同風格、不同尺寸之間的差異， 如何使用網格以及讓一套圖標看起來視覺統 。

2.1 圖標的類型

象形符號：最流行的圖標類型，象形符號代表了意義相似的對象，或者引用了物理世界的對象。 如：飛機這個象形符號可以表示飛機場。

表意符號：這種圖標更復雜點，不代表一個簡單的對象，而且還代表抽象的想法，通常表意符號所代表的意思需要學習才能明白。舉例來說：一個圓和一條穿過它的線代表“禁止”；另一個很好的例子就是：+- =這些表意符號。

備注：象形符號和表意符號經常結合在一起表達一個意思， 如：“ 文件”這個象形符號結合“+”這個表意符號就是“添加件”的意思。

2.2 圖標的風格

圖標被劃分為很多不同的風格以及很多風格的變異。

下面這些是最常見的:

線性圖標 （作者：AnyOldTime ）

面性圖標 （作者：AnyOldTime ）

擬物圖標（作者：Atom_neo ）

手繪圖標（作者：mike ）

扁平風 （作者：Evgeniy Dolgov ）

三、圖標的尺寸和比例

在設計圖標時的一個主要規則就是：你的圖標必須放個合適的方框里，不管它們現實生活中是否是不用的，比如：一個回形針和一個相機。

圖標必須放到一個特定大小的畫板中，確保它們的尺寸在視覺上是一致的，然而這意味著你的圖標需要挨著畫板的四個邊。為了讓整個圖標集看起來一樣，有些圖標可以小一點，在接下來的章節中我們將繼續討論這個。

之前有新手就一直糾結視覺上怎么統一，這個還是需要自己去多練習，文章末尾我會分享網格，確保在90%的圖標都是統一的，個別視覺需要自己另行調整。

為特定的項目選擇特定的尺寸， 如果你為iOS或是Android設計圖標，在決定尺寸之前，你應該查看圖標規范。不過我們一般移動端是sketch 里面用的是24×24，在ai里面是用的是24×24或48×48。

如果是為網頁項目創建圖標，或是練習，可以使用以下這些默認尺 16×16, 24×24,32×32, 48×48, 64×64, 96×96, 128×128,256×256, 512×512;

備注：如果你是一個初級圖標設計師，我建議避免使用較小的尺寸，因為小尺寸更有難度，64 或 96 px 的網格是不錯的選擇。

四、使用網格

其實，寫這篇文章是因為我的一個學弟問了我很多如何繪制圖標的問題，我給了他網格，但是他卻思想陷入其中，不知道如何視覺統一。其實，在你真正理解網格的時候，你要畫很多圖標才能理解網格的意義。

4.1 究竟什么是圖標網格?

把圖標網格當成一種約束，讓你的圖標集保持規范統一，網格是一個框架，讓你的圖標保持統一。

下面我分享2種常用的網格：

鏈接: https://pan.baidu.com/s/1fEz33qHOzPxkYAmejU8T5A 密碼: mutt

4.2 什么時候使用網格？

首先，如果你要創建超過50個圖標的圖標集時我認為網格很有必要。 你要使用同一種風格創建很多圖標，網格有助于保持視覺網格統一 。

另一個情況就是當你要給現有的平臺設計圖標，而這個平臺有自己的圖標網格。 如給 iOS或Android 設計圖標，你最好使用它們各自的網格，這些網格確保它們在各個平臺上保持網格統一，你應該遵循這些規則，確保和平臺的風格保持一致。

這是一個框架結構，你的圖標集將會在這個基礎一致。如果將來這些網格會被其他人維護，網格也能派上用場。比如：你要創建一個通用樣式，其他人會在這基礎上構建其他圖標集。網格很像需要遵循的規則，讓其他設計師在最開始就明白圖標的尺寸。

就像上面所說，網格被高估了它的作用，但是在有些場合仍然至關重要。

4.3 如何使網格?

大多數時候我使用最簡單的網格，就是上面網盤里面ai 文件的網格。

如下圖：

這是我經常使用的網格

五、圖標視覺統一

這個網格背后理念就是把你的圖標放到框內，盡量保持圖標的在在里面框里面，不要超過第二個框，當然如果為了視覺需要也可以出來。這個就是新手把握不準的地方了，因為如何判斷是否需要根據視覺需要，這個他們很難理解。這個需要在你的后面練習中去自己體會，這里我會分析幾種常見的視覺需要。

國外有一個文章解釋過這個原理，原文鏈接https://link.jianshu.com/?t=https://medium.muz.li/optical-effects-9fca82b4cd9a

上文翻譯版本請查看這里，這是解釋視覺統一的一些原理，如果還是看不懂，就要多加練習，才能領悟。讓你的圖標保持統一，那它們就會說話哦。

1. 使用統一風格；
2. 保持設計語言一致：這個不難解釋，就是如果都是圓角，請都保持圓角，如果粗細是2px，請都保持一樣的粗細；
3. 尺寸很重要，保持大小一致：這個就是上文提到的網格，最好在網格里面畫，就能避免90%的圖標不一致；
4. 在一個圖標集中使用相同元素：這些說的不是絕對的，比如：這個圖標里面有一個元是10px，另一個地方也需要用到類似大小的圓，請盡量用一樣大小的圓。不要用9px，這樣保持元素一致，才能整體統一；
5. 使用同一套配色方案：這點如果你看很多圖標就會發現，圖標的統一性比識別性更重要，一眼看去，顏色一樣，個別的粗細不一樣，或許你要花一點時間才能找出來，如果是顏色不一樣，一眼就看出來了。

六、軟件的使用

我一般使用的是ai ：

設置，注意要選像素

建立好以后的樣子顯示/隱藏參考線command+；

顯示/隱藏參考線command+；

準備工作，建立網格

設置參數

設置好網格以后，你可能會發現，依然沒有網格，顯示/隱藏網格 command + “

選中所有的輔助線，command+2 將輔助線鎖定住，這樣你在操作的時候，就不會選中輔助線了

隨時預覽圖標是否視覺上統一，快捷鍵 command +shift + H

知識點，畫好基礎圖形的時候，一定要查看屬性，保證寬和高，X、Y，沒有小數點，要保證是整數。

常用的功能將路徑變為形狀

另一個方法將路徑變為形狀是擴展功能，在稍微復雜一點的里面會用到

這個小的知識點，這個可以選擇圖標對其畫板，還是2形狀的對其，形狀編組快捷鍵是command +G

切換描邊和線性的快捷鍵是 shift + X，像上圖描述一樣，我們可以快速的將線性圖標變為面性圖標。

這里有一個知識點，形狀生成器，是一個比布爾運算好用100倍的工具?？旖萱I是shift + M 選中以后，按住option 就是減掉形狀，不按就是讓2個形狀合并，記住，用這個工具之前，要全選整個圖標。

七、圖標靈感網站推薦

http://www.iconfont.cn/

http://www.iconlet.com/

https://icons8.com/web-app/new-icons/ios7

http://linea.io/

部分網站需要自備梯子

7.1 圖標繪畫技巧網站

http://m.zcool.com.cn/article/ZNjgzOTky.html?from=groupmessage&isappinstalled=0

八、圖標收集整理軟件推薦

NUCLEO，這個軟件的好處是里面有自帶的icon，拖到界面就能用

eagle，圖片和icon收集軟件，缺點是不會更新icon，不過收集靈感很好用

這么長的文章，我也是碼字一天了，基本這些掌握了就可以了。稍加練習，就可以完成很好的圖標集。

補充：

有評論說sketch半像素問題，再次列出解決方案：

基本上面2個步驟就能解決了，還有一個方法是通過插件的方法，那個插件我很久沒有用了。名字叫：Pixel Cleanup For Sketch

本文由 @二哈 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議