規則和內容詳見:每周臨摹練習第六期:icon
本次一共交了32份作業,以下是大家的部分練習。
還是鼓勵大家能夠自己做系統的總結,比如這位小夥伴。
連結傳送門:http://www.ui.cn/detail/233112.html
什麼是圖標?
圖標是21世紀的洞穴巖畫。icon一詞來源於拉丁語「eikon」,意思是「相似,形象」,可以追溯到公元1565年。人類從很早以前就用圖標來與他人溝通,比如巖畫,埃及的象形文字等都屬於圖標。它是世界上最通用的語言,可以無障礙的在不同的民族,年齡之間傳遞。
時至今日,大家一提到icon主要想到的是界面中的icon,但其實icon在生活中無處不在。交通標誌,運動會的標誌,就連你天天在廁所見到的標誌都屬於icon的範疇。
到了現代,GUI是圖標設計史上一個巨大的章節,它涵蓋了圖標設計史上所有的裡程碑,早期的計算機界面是純文字沒有圖標的,從沒有圖標到有圖標,從簡陋的圖標到精緻的擬物化圖標,再從擬物化到現在的扁平化圖標。整個GUI圖標的演變史可以在下面這個網站看到:https://historyoficons.com/
另外還推薦兩本關於圖標的書:一本是《The.Icon.Handbook》,另外一本是《零ZEЯRO》。
ICON和LOGO的區別
LOGO是品牌設計的一部分,而圖標是功能可視化的方式。但是現如今很多應用的大圖標也兼具品牌識別的功能。簡單總結一下LOGO和圖標的差別:
圖標通過視覺設計提供信息和引導,而LOGO則是品牌信息的展示
並不是每一個企業都需要圖標,但是每個企業都需要LOGO
圖標是品牌LOGO的伴生產物,並且作為視覺CTA而存在
LOGO可以縮放,而圖標通常是像素精準的(不可縮放),圖標需要製作成特定尺寸大小的,縮放會導致信息丟失
圖標是用來豐富並簡化用戶體驗的一種導航工具
拓展閱讀:《LOGO和圖標,你真的明白兩者的異同點麼?》
ICON設計指南
1、視覺規範
GUI上的ICON分為功能圖標和應用圖標,應用圖標限制不大,大部分的擬物化的圖標也都是應用圖標。而功能圖標中又分為:可以點擊的按鈕圖標和不可點擊的展示圖標。一套視覺統一的功能圖標需要按照給定的圖標參考線繪製,如下圖:
圖標的繪製規範的相關文章:
http://www.uisdc.com/icon-design-rules
http://www.uisdc.com/6-icon-design-advanced-skills
http://www.zcool.com.cn/article/ZNDAzMDQ0.html
http://www.ui.cn/detail/122905.html(擬物化圖標的一些繪製原理)
優質icon設計的6個簡單步驟(上)優質icon設計的6個簡單步驟(下)
2、好ICON的評判標準
我們在應用上大量使用的圖標是否可用?唯一的方法就是對這些圖標進行用戶測試。不同方法可以解決圖標可用性的不同方面,判斷圖標是否可用可以從以下4個量化指標來測量:
發現性:用戶能否發現頁面上的圖標;
理解性:用戶能否理解圖標的意義;
預測性:用戶能否猜到圖標點擊會發生什麼;
吸引力:圖標是否美觀;
篇幅有限,具體的測試方式,可以看這篇文章:
《好圖標怎麼做?教你從四個方面來評價圖標設計的質量》
http://www.uisdc.com/good-icon-evaluation-standard
3、ICON設計的常見問題
Q1. 如何製作大小統一的圖標:運用網格以及進行視覺矯正
Q2. 如何製作風格統一的圖標:只使用一種風格的圖標、技巧,採用相同的大小,元素,顏色。
Q3. 製作的流程、方法是怎麼樣的:AI 用於創建基本的形,PS用於設定樣式
Q4. icon需要配上文字麼?附帶識別icon含義的小測試 http://www.motionbrothers.co.uk/signified/(需翻牆)
問題的解決辦法,詳見這篇:
《在畫圖標的時候你會遇到的一些問題》
http://www.ui.cn/detail/205455.html
4、IconFont是什麼?
大家都知道阿里巴巴的 www.iconfont.cn/ 上有很多圖標資源下載,但是卻不一定清楚IconFont真正的意義。icon-font,從字面上理解就可以看出,把圖標和字體結合的一種技術。它主要應用於現在越來越多的跨平臺設備中。其實它用到的是SVG矢量圖形,其實很早就存在,只是設計同學沒有怎麼接觸。
IconFont主要有以下幾個優點:
無論你是什麼解析度,是否retina,無論你怎麼放大(一定極限內),它可以保證圖標不會出現任何模糊;
可以通過css直接控制圖標大小、色彩甚至是投影和浮雕等效果;
一份字體文件可以存放很多圖標,調用管理非常方便;
容量非常小,30個圖標只有20k不到的文件大小;(因為它是矢量的)
具體的製作方式可以參考以下幾篇文章:
http://www.ui.cn/detail/120674.html
https://zhuanlan.zhihu.com/p/19564505
https://www.zhihu.com/question/25952487
http://www.iconfont.cn/help/platform.html
ICON資源網站
最後再給大家推薦幾個icon下載資源網站吧。
https://icons8.com/
擁有 42,800 個免費圖標,提供各個平臺的基礎圖標與分類圖標,其特色是大小和顏色隨意自定義。
https://www.iconfinder.com/
哥本哈根一個團隊做的 icon 專業圖標網站,擁有 1563889 個圖標和37058圖標集,是最專業的 icon 圖標網站之一。
http://iconfont.cn/
國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能,是阿里媽媽 MUX 組業餘時間做的的矢量圖標管理、交流平臺。
https://thenounproject.com/
國外三位設計師 2010 創建一個收錄、並可免費使用高清符號圖示的媒體庫,包含25個語言版本,每天都有來自世界各地的設計師提交新 icon。
http://www.flaticon.com/
搜索海量扁平化圖標,讓圖標搜索和轉換變得非常簡單和快速,並提供常用格式 SVG、PSD 源文件和 PNG 下載。
https://iconstore.co/
Icon Store 提供高質量的免費的/收費的圖標,包括卡通風格圖標,極簡主義圖標,扁平化設計風格圖標,手繪風格圖標,像素風格圖標等等,也包括各種類型主題圖標,比如聖誕節主題圖標,情人節主題圖標,天氣圖標,辦公室圖標,動物圖標,美容美髮圖標等等。
最後
強調下通過臨摹自學的方法:
找到想臨摹的圖 → 搜集很多張同類的圖 → 從中總結規律 → 按照自己總結的規律開始臨摹 → 遇到各種問題 → 通過自己找教程、問人等方式解決問題 → 臨摹完成
你遇到的問題都將變成了自己的能力