在設計中制定統一的icon元素規範[原創]
在WEB和APP設計時,如果說兩者都有且意義相似的一個元素,那肯定就是icon了。
icon是什麼?icon,中文翻譯為圖示。是物件的影象表示,指用圖形指代某些名詞,是上世紀九十年代伴隨IT 產業出現的一個技術詞彙,原指計算機軟體程式設計中為使人機介面更加易於操作和人性化而設計出的標識特定功能的圖形標誌;它與logo的區別是icon是功能識別圖示,logo是身份識別圖示。
在日常生活中,我們每天都在與icon打交道,例如:
電子裝置圖形介面
計算機中的桌面圖示,手機介面中的應用啟動圖示,導航欄和工具欄圖示,標籤欄圖示等
產品表面
電腦開機鍵上的圖示,USB介面圖示,耳機插口圖示,易碎物品包裝上的易碎標識圖示,向上圖示等。
日常生活
公路上的交通指示圖示,公共廁所的性別區分圖示,商場、機場、火車站等公共環境中的電梯、安全出口圖示等
然而在UI設計中,小小icon雖然看著簡單,其實也是有著自己的規範,如果不遵守規範,那麼繪製出的icon一定是不協調,不具有美感和準確的含義的。
如上圖,就是一套比較完整的icon繪製圖標,每個icon的含義明確,顏色統一,形狀統一,應用在專案中時,可以完美的與專案協調存在。
對於icon的定義,不是要顯眼,奪目,很炫,而是要準確的表達出要表達的含義,並且一組icon的要有統一性。所以icon在app中應該是很安靜的存在,不應該喧賓奪主,有時候即使消失了,也不會讓人發現。
也因此,icon在整體頁面中通常都不太突出,所以這也限制了icon的表現手法,主流的繪製方法,一般有下三種:
同時由於icon在頁面中經常成組出現,,彼此間的統一性也就顯得尤為重要,什麼是統一性?就是icon的表現形式,視覺大小,描邊粗細,顏色是否都在一箇中心上,如果不注意icon的統一性。那麼繪製出的icon有可能就千姿百態:
所以我們在日常工作中,繪製icon,一定要注意整體的統一性,和專案本身的協調性,以達到icon的繪製符合整體規範
轉載時請註明出處及相應連結,本文永久地址:https://blog.yayuanzi.com/24800.html
微信打賞
支付寶打賞
感謝您對作者Leo的打賞,我們會更加努力! 如果您想成為作者,請點我