當前位置:
首頁 > 最新 > UI設計師直通車:超詳細的圖標基礎知識

UI設計師直通車:超詳細的圖標基礎知識

乾貨

觀點

案例

資訊

我們

豈安科技

最真誠的業務安全公眾號

擼主:

小思敏兒 豈安科技ui設計師

自我介紹不知道說啥,就是妹子一枚,剛剛入職,在設計屆屬於晉級級別,熱愛設計,我就是這樣一個耿直的girl,哈哈哈……

前言PREFACE

最近在進行項目改版,對原來所有圖標的設計做了統一規範,同時也從設計圖標的過程中總結了一些關於圖標設計規範的經驗。

圖標是當今世界上最通用的圖形語言,很容易讓人理解的語言,在如今互互聯網時代,科技感十足的智能手機讓人產生距離感,圖標的設計使得畫面不再冰冷,優秀的圖標設計讓界面更具有趣味性,拉進與用戶之間的距離,讓用戶產生愉悅感,所以圖標設計在ui界面設計中是必不可缺少的一個環節,作為ui視覺設計師,更是應該掌握的一項基本技能。在圖標設計時並不是只考慮表面形狀那麼簡單,我們更應該去了解圖標設計的風格、原則和設計要點。

圖標分類

象形圖標,是現代比較流行的圖標類型,通過其與物理對象的圖畫相似來表達其意義的表意文字。比如一個日曆造型的圖標表現的就是日曆。

表意圖標,這種類型的圖標比較複雜,需要投入學習成本來理解它,比如在學習數學的時候,要先學習並記住各種符號,通常表意文字是基本的形狀,人們一般是沒辦法一眼認出來的它的含義的,需要去學習。

圖標風格

擬物圖標

擬物,或稱擬物化,也叫做現實主義。擬物化風格是喬布斯時代的ios代表設計風格,其目的是使用戶界面簡單易懂,降低用戶學習成本。擬物圖標比較注重質感表現、構型和光影控制的這些技法。因為擬物化設計過於複雜給用戶瀏覽信息造成了不必要的干擾,所以現在的擬物圖標已經被時代所淘汰了

線性圖標

目前是最流行的圖標表現方式之一。是由一條等粗細度構成的圖形,相比面形圖標會比較有細節的表現空間,控制線條的粗細和構型能夠有很多樣的視覺表現。

面型圖標

這類圖標設計師會從現實世界中提取事物的關鍵外觀形狀特點,通過設計形式展現一個象形的剪影色塊,視覺上比較醒目,但不容易刻畫細節。

填充圖標

填充圖標是線性圖標和面形圖標的完美結合,採用線條構型在內部根據設計風格,選擇性的填充顏色,比較個性,有更多的設計發揮空間。

手繪圖標

手繪圖標一般運用在遊戲和手機主題設計中,視覺效果比較強烈,富有感染力,作為純手工繪製的圖標,很考驗設計師的手繪表現能力。

方寸之間

在動手畫圖標之前一定要選定參考線,只有這樣所有圖標才能規範統一。

這套參考線是根據尺寸1024x1024px繪製的。

在繪製圖標過程中,構圖不能太滿,要在四周要有留白,不要讓設計稿進入留白區域,不然進入留白區域的圖標會顯得很大,整體會顯得不和諧,大小不統一,所以根據不同形狀的圖標制定出了四種外輪廓的圖標參考線。

在繪製圖標過程中,為了達到視覺上的統一,可以相對的縮小外輪廓的尺寸,不用嚴格的遵循網格和參考線。網格是為了幫助你讓圖標保持統一性,如果在設計出一個偉大的圖標和遵循規則之間二選一,那就打破規則。

像素對齊

在製作圖標時,常常會碰到圖標發虛的問題,那是因為我們沒有嚴格做到像素對齊,作為一名專業的ui設計師,必須注意到這點。

多使用布爾運算

在製作圖標時能用基本形狀進行布爾運算的情況下,盡量不要使用鋼筆工具,使用布爾運算的好處有很多:

? 1.讓圖標更加規範

? 2.後期進行修改更加方便快捷

用品牌基因法做圖標

文章中使用的[ 用品牌基因法做圖標 ]理論源於菜心設計鋪,品牌基因的定義:

視覺層面的品牌基因就是通過一個事物或者提取出一個(或一組)視覺符號。

1

提取特定形狀,直接應用

最常見的方法是直接將logo作為圖標,如下圖:

2

吸取品牌顏色

從鹹魚logo中吸取品牌色,當作品牌基因,這是也常見的一種方式

3

抓取風格特點

抖音結合了「抖」的風格特色,運用在產品的各個環節,建立了品牌特色,讓人一看到這些設計就知道是抖音。

通過上面的分享不知道大家對圖標設計有沒有了大概的了解,如果大家已經對製作圖標的基本原則有了基本的了解,可以自己動手試一試,光說不練假把式,自己親自動手才能發現問題解決問題,逐漸提高自己的設計能力。如果你對圖標設計特別感興趣的話,也可以找資料深入學習,畢竟我想每一個設計師心裡都有一個大師夢~

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 bigsec豈安科技 的精彩文章:

解讀:《網路安全法》在個人信息保護方面的指導意義

TAG:bigsec豈安科技 |