想整合出一套統一的圖標,這些技巧不要錯過 - 優設網 - UISDC

想整合出一套統一的圖標,這些技巧不要錯過

2018/07/09 179798評論 27

找圖標這個事情,對于設計師而言,其實都不是太大的問題了。不僅有大把的網站提供免費的圖標下載,而且設計師自己改和設計都不是什么大事。不過,這當中涉及到一個非常現實的問題。

對于常用的那十幾個圖標,并不難找,成套的都一抓一大把,就像「設置」和「編輯」的圖標,但是,有許多圖標對于特定的項目而言,是獨一無二的,你想在通用的圖標合集中找到一個能用的,可能性并不大。如果在其他的地方找到了主題匹配的,但是在風格樣式上,又無法保持一致,這就很尷尬了。總不能直接拿來用吧?那多容易出戲。

單獨看這些圖標的時候,你可能會覺得單獨看都還行,但是放在一起就不那么合適了。

那么如何將來自不同的 UIKit 的圖標匯總整合成為一套,甚至于讓網站和 APP 等不同地方、來源不同的圖標,變成一致而令人愉悅的設計?

一、色彩

圖標所傳遞的諸多信息當中,色彩是最為直觀的一種。將不同來源的圖標先在色彩上統一起來,比如使用同一種顏色。

雖然說使用單一色彩很便捷,不過你如果能運用現有的配色方案來進行圖標的色彩統一,效果就更好了:

如果你真的喜歡你所找到的圖標,但是它們的色彩又不一樣,可以先自己調整,或者找一位專業的圖標設計師來幫你。值得注意的是,絕大多數素材的分享授權許可證是包含編輯授權的,你可以更改色彩和尺寸。

二、風格

擬物化和扁平化設計之間的斗爭已經持續多年了,目前來看扁平化設計是主流,但是我并不知道這種局面還會持續多久,因為如今的扁平化設計當中就包含了不少擬物化的設計技巧和元素。在未來的5到10年會流行什么,就很難說了。時尚和流行就是這樣。

我所知道的是,你必須挑選一種風格。要么扁平,要么擬物。

你看看這套圖標,配色是一致的,但是風格并非如此。

將扁平化和擬物的設計風格混搭到一起,必然會導致界面的雜亂無章。

不過,在大的風格設定之下,設計師依然有足夠多的選擇。比如在扁平化的設計風格當中,iOS 的 Apple Human Guideline 和 Google 所推動的 Material Design 都是非常典型的扁平化設計風格設計規范,兩者在細節和風格的把控上都非常的嚴格,甚至具體到每一條線的粗細:

基于那些專門為特定操作系統所定制的、系統化的圖標來設計新的圖標,其實是最可靠的辦法。這些被廣大設計師所接受的設計規范,在日常設計中指引著許多設計師的工作。

因此,在色彩和風格上保持一致是最重要的。此外,還有一些微妙而值得注意的細節,需要設計師特別上心。因為這些圖標的設計已經趨于經典,而重度用戶和經驗豐富的設計師,能夠一眼就分辨出不夠貼合的圖標細節。所以,設計師常常能夠聽到這樣的反饋:「我也不知道哪里不對,就是覺得不對。」

三、透視和視角

下面的5個圖標,同樣都是采用的擬物化的風格,為了統一,我細微調整了一下它們的色彩,看起來更加一致。但是不管怎么調整,它們看起來就像是5個完全不同的應用程序的圖標(事實上它們就是)。

如果,按照透視圖將這5個圖標放置進去,就可以清晰地看到,它們所處的視角和位置是截然不同的。

它們分散在透視圖的不同位置,明顯是不一致的,而這一點則完全違反了圖標設計的一致性。

圖標應該看起來就是整個界面的一部分,它們之間的關系是平等的,在視覺和感知上應該保持著同等的關系。

四、陰影

在陰影的設計上,圖標之間也應該保持這種一致性。看看下面的兩個圖標吧:

這兩個圖標源自同一套圖標,但是看起來卻只有一個圖標被太陽照到了。光的方向同樣很重要。因此,想要讓圖標保持一致,最好是讓圖標在光照角度上也保持著一致。

小貼士:雖然陰影多數情況下被認為是擬物化設計中才會用到的,但是實際上,包括 Material Design 在內的扁平化設計風格中也會用到陰影。所以原則上,它是泛用的,設計師需要保持設計上的一致。

五、視覺重量

圖標給人的大小、密度和重量感,就是我們常說的視覺重量。而在同一套圖標當中,圖標的視覺重量應該保持一個非常接近的程度。

看看下面兩個圖標:

當你瞇起眼睛感知這兩個圖標所形成的色塊的時候,就能夠更加明顯的對比兩者的視覺重量了:

差異確實非常的大。這個例子看起來非常極端,所以我們再繼續找點別的案例來進行對比:

就視覺重量而言,上面的一組明顯是不平衡的,你只需要瞇眼斜視就可以很快判斷出來。

六、細節

魔鬼藏于細節。但是細節中所藏的魔鬼類型還是非常多樣的,這個主題我們不妨展開了來說。

1. 重復的元素

有的時候,設計師會加入了一些一致的、重復的元素,來確保圖標看起來足夠獨特。

看看下面這組圖標,會在右下角加入一些像素化的元素,每個圖標都有,并且各不相同。而這組用戶頭像圖標也是如此:

重復的元素,重點在于重復的一致性。

2. 細節的數量

另外一種情況,則是細節數量上的不一致。這種不一致會擾亂整體的一致性,簡而言之,就是這組圖標應該在復雜度上保持均衡,否則,用戶將會因為混亂而難以判斷各個圖標的屬性。

結語

正如同我剛開始所說的,想要將不同的圖標納入到一個系統當中來,設計師主要的工作目標就是確保一致性。經驗豐富的設計師會從各個角度和屬性上來針對圖標進行優化,今天的文章已經將潛在的、需要關注的問題都梳理出來了,圖標的設計工作做好了,界面的設計才會更加順暢。

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.tawbbt.live/combine-icons-from-different-sets

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

二八杠千术