產品設計都應該知道的ICON知識
圖標是UI設計師必會技能之一,而一個好的icon是怎么設計出來的呢? 今天我們來給大家一個圖標設計的全面知識匯總: 首先,在制作圖標前要考慮以下幾點(拿張紙默默寫下來): 接下來我們進入設計過程: 針對不同的設計我們會運用不同大小的網格。我們這里以32*32的網格為例。 網格邊緣的2px是我設計中不可觸及的,也就是留白邊緣。如果沒有特殊情況的話,我一定不會讓我的設計圖形進入這個邊緣界限。而留白的目的也是為了讓設計看著不會太滿給用戶一定的呼吸感。 圖標的結構分為形狀和方向兩部分。如果你的圖標有邊框,一般會在邊界框位置畫出像正方形,圓形,三角形,矩形等圖形作為邊框。 圓形圖標會在網格中成居中狀。在圓形圖標設計中四個邊緣會觸及到內容區域的邊緣,但不會到留白區域。一些小的圖形和邊邊角角部位會超出圓形,但不用擔心,這是一個常見的現象。 方形圖標一般也會在網格中居中,但大多數情況也會觸及到內容區域的邊緣。我們看下下面這張圖:圖中分三個方形區域(藍色、橙色和綠色),圖標中的大部分圖形在中間橙色區域內。每個區域內的圖形占比取決于圖標整體的視覺效果,而這個把控需要你不斷地練習找一些感覺才能自如的運用。 在32px的網格中,你會注意到從28px中垂直和水平的分出20px區域,一般在設計圖標時會試圖遵循這樣的規矩。 不規則的圖標設計會用一個圓形來去對齊,如下圖。你看一看到圖形已經觸及到圓形的邊緣,這里你不用特別精確的卡邊,只要接近就可以了。 但你要記住網格規矩不是所有設計都要遵循的,一個圖標的本質遠遠超過了這種規矩的設定。網格會幫助你提高圖標設計的一致性,但是如果在設計一個牛逼圖標和遵循規則中選擇的話,相信你也會選牛逼設計的。 設計圖標跟畫草圖一樣:從一個簡單而粗糙的圓形、長方形又或是三角形開始。在設計小圖標的時候,手繪的表現方式可能會看著不那么精致,所以用AI做設計是個更好的選擇。用一些基本的幾何圖形進行設計會更加準確(尤其在曲線邊緣部分),在調整的時候會更快,同時也能更精確的適應網格模式。 盡可能在設計時邊緣、邊角、曲線及角度遵循一些數學規范的同時又不失有趣。換句話說就是不要太相信自己的眼球,在一些細節上需要遵循規范,因為如果這些元素不一致的話會很影響圖標的質量。 在設計中,大多情況我會使用45度角或者它的倍數。45度角會顯得很均勻(在像素下會表現得更強),這種完美的對角線會讓人眼很舒服也很清晰。這種模式同時也可以建立一組圖標的統一性。如果我要打破這種規則我可能會使用減半角度(22.5或者11.5度)或者15的倍數,當然也會根據情況進行調整。使用45度的好處是即使反角度用也是不打亂規則的。 曲線是個特別考量技術的地方,即使圖片質量很差,一看曲線就知道設計師的能力怎樣。而且人眼的測量總也一些小的誤差,大多數人眼睛和手協調能力達不到那么高層次,所以用軟件的形狀工具和一些數字來創造曲線從而達到效果。 圓角可能用的并不多,2px半徑的圓角就很顯然是個圓形了。你要根據你的設計總特征來選擇是否用圓角,并且要用多大的圓角。 圖標的像素效果在用戶界面中是很重要的一部分,尤其在小尺寸設計中很影響整體視覺。如果像素網格中行間距不對齊,會導致邊緣出現鋸齒在小圖標上會看起來很模糊。要是調整圖標的像素網格會使直線變得單薄,角度與曲線的精確度就沒那么精確。這也是為什么建議大家用45度角的原因,比較好掌握,更加精準容易對齊。 說到線的粗細,2像素應該是最理想的,可3像素是最通用的。我個人更傾向2PX和4px,理想狀態下我會用2的倍數比較多。在大多情況下字和扁平的圖標是要避免特別細的線條,除非你是為了做出一些期望效果。如果你想定義線條的形狀,一般設計師會通過光線和陰影的方法。 設計師會通過某一個元素讓一系列設計更統一,像荷蘭設計師在2015年圖標沙龍上談到他為荷蘭政府做的項目,在設計中他跟伙伴運用了“缺口“的元素,不是每一個圖標都有這個元素,但是大多數的統一讓這一系列有了自己的特色,也真正的把它們融合了起來。 圖標的目的與讓用戶的溝通,讓他們想到并且進行選擇。太多的細節會增加圖標的辨識復雜度,尤其是小尺寸更會成為累贅。當然,細節的復雜程度也會影響單個或者整個系列圖標的效果。所以當你拿不準細節輕重的時候,最好的方法是考慮最低限度的保證細節,但要保證高質量的明確圖標含義。 雖然我們能看到很對牛逼設計師在制作高質量的圖標,但是他們過于注重設計趨勢和其他高端設計師的風格模仿。作為一個設計師來說,創造可能是我們應該更看重的,我們可以從結構、字體、工業、心理、自然等其他領域尋找靈感。千篇一律的圖標我們都見過,可是特立獨行的你才是用戶真正認可的風格。 圖標最重要的作用就是它的辨識度是否讓用戶易理解,人們需要在小圖標中做出他們的選擇是件很困難的事,所以對于品牌來說,大部分的圖形設計是為了展現品牌logo或者是一個標志性的形象。當然對于一個新的或者小的品牌來說也會通過一些其他方式來展現。 圖標可以包含圖像,但也可能是一個文本,一個logo又或是這些元素的組合。圖像圖標在其他適應設備上會不易閱讀,而圖形的話可以攜帶更多的視覺感。 對于一個圖標而言,不會使用單詞作為內容,因為空間本身就不大,而內容不多又不易用戶理解。這也是一則經驗:如果這個文本不是你logo的一部分,那么請盡量避免。如果是,也要慎重考慮一下。 此外,很多圖標實際使用是在一定的環境下,大多數包括一行描述性文本在圖標下面。設計時,字母的顏色和圖標的類型或者網站也要保持一致,這樣才能建立品牌的統一性。 想讓你的圖標脫穎而出?那么請大膽的用色。選擇一個充滿活力的顏色可以幫你抓住用戶注意力,讓你的品牌更有特點。比如藍色,特別是天空藍和海軍藍,你可能會回避因為這種大眾色并不吸引人。但如果藍色是你的主要logo色,你可以嘗試一些新的偏中性的顏色,像石灰綠,或者選擇一個季節性色調比如夏天選擇亮橙色、春天選擇粉紅色之類的。 你的品牌會有它的logo,可一旦它變成了圖標,更像是一個標志。這個標志可以是一個簡單的logo或者圖像,它需要表現的更直接更能讓客戶記住它。而品牌也希望將logo和圖標建立一些聯系,讓自身達成統一。 圖標不止限于手機或者電腦桌面上,所以在設計時也要顧及到它的大小和應用,所以在做大圖標后縮小是個更好的方式。圖標設計涉及到它的規模和大小,格式也成為了一個重要的因素,為了方面運用,矢量圖是你最佳的選擇。 最近有很多圖標運用單色背景加白色圖標,扁平化設計與陰影結合,這種趨勢雖然很流行,但不要局限在這種設計里,在你的圖標中做一些不一樣的設計。當大多數人考慮用方形的設計,也許你該考慮些別的方式。在背景中加入紋理效果就會在人家單色中脫穎而出。 有一個有趣的小竅門設計師們多年用來測試設計的有效性——單色模式。在單色設計中,如果你的設計傳達同樣的信息,那么它是個有效設計;如果沒有顏色它變得很弱甚至影響用戶識別,那么請繼續修改。也有些設計師會先用黑白色進行設計,建立一個堅實的框架后,然后再添加顏色。 來源: IDC創新設計中心
設計從網格開始
從一個簡單的幾何圖形下手
邊緣、邊角、曲線及角度規范
角度
曲線
邊角
像素效果
線的粗細
通過設計元素及圖標特點來達成統一性
有節制的使用細節與裝飾
獨特性
下面講一些設計過程中你需要注意的:
讓用戶更容易理解
圖標并不是圖像
避免文字
用鮮亮的顏色
做一個logo的延伸
圖標的用途
內容外面的世界
單色挑戰
還望能仔細傳授45℃角的真諦!