這些UI設計技巧不要錯過
來自專欄玲瓏設計
找圖標這個事情,對於設計師而言,其實都不是太大的問題了。不僅有大把的網站提供免費的圖標下載,而且設計師自己改和設計都不是什麼大事。不過,這當中涉及到一個非常現實的問題。
對於常用的那十幾個圖標,並不難找,成套的都一抓一大把,就像「設置」和「編輯」的圖標,但是,有許多圖標對於特定的項目而言,是獨一無二的,你想在通用的圖標合集中找到一個能用的,可能性並不大。
如果在其他的地方找到了主題匹配的,但是在風格樣式上,又無法保持一致,這就很尷尬了。總不能直接拿來用吧?那多容易齣戲。
單獨看這些圖標的時候,你可能會覺得單獨看都還行,但是放在一起就不那麼合適了。
那麼如何將來自不同的 UIKit 的圖標匯總整合成為一套,甚至於讓網站和 APP 等不同地方、來源不同的圖標,變成一致而令人愉悅的設計?
一、色彩
圖標所傳遞的諸多信息當中,色彩是最為直觀的一種。將不同來源的圖標先在色彩上統一起來,比如使用同一種顏色。
雖然說使用單一色彩很便捷,不過你如果能運用現有的配色方案來進行圖標的色彩統一,效果就更好了:
如果你真的喜歡你所找到的圖標,但是它們的色彩又不一樣,可以先自己調整,或者找一位專業的圖標設計師來幫你。
值得注意的是,絕大多數素材的分享授權許可證是包含編輯授權的,你可以更改色彩和尺寸。
二、風格
擬物化和扁平化設計之間的鬥爭已經持續多年了,目前來看扁平化設計是主流,但是我並不知道這種局面還會持續多久。
因為如今的扁平化設計當中就包含了不少擬物化的設計技巧和元素。在未來的5到10年會流行什麼,就很難說了。時尚和流行就是這樣。
我所知道的是,你必須挑選一種風格。要麼扁平,要麼擬物。
你看看這套圖標,配色是一致的,但是風格並非如此。
將扁平化和擬物的設計風格混搭到一起,必然會導致界面的雜亂無章。
不過,在大的風格設定之下,設計師依然有足夠多的選擇。比如在扁平化的設計風格當中。
iOS 的 Apple Human Guideline 和 Google 所推動的 Material Design 都是非常典型的扁平化設計風格設計規範,兩者在細節和風格的把控上都非常的嚴格,甚至具體到每一條線的粗細:
基於那些專門為特定操作系統所定製的、系統化的圖標來設計新的圖標,其實是最可靠的辦法。這些被廣大設計師所接受的設計規範,在日常設計中指引著許多設計師的工作。
因此,在色彩和風格上保持一致是最重要的。此外,還有一些微妙而值得注意的細節,需要設計師特別上心。
因為這些圖標的設計已經趨於經典,而重度用戶和經驗豐富的設計師,能夠一眼就分辨出不夠貼合的圖標細節。
所以,設計師常常能夠聽到這樣的反饋:「我也不知道哪裡不對,就是覺得不對。」
三、透視和視角
下面的5個圖標,同樣都是採用的擬物化的風格,為了統一,我細微調整了一下它們的色彩,看起來更加一致。但是不管怎麼調整,它們看起來就像是5個完全不同的應用程序的圖標(事實上它們就是)。
如果,按照透視圖將這5個圖標放置進去,就可以清晰地看到,它們所處的視角和位置是截然不同的。
它們分散在透視圖的不同位置,明顯是不一致的,而這一點則完全違反了圖標設計的一致性。
圖標應該看起來就是整個界面的一部分,它們之間的關係是平等的,在視覺和感知上應該保持著同等的關係。
四、陰影
在陰影的設計上,圖標之間也應該保持這種一致性。看看下面的兩個圖標吧:
這兩個圖標源自同一套圖標,但是看起來卻只有一個圖標被太陽照到了。光的方向同樣很重要。因此,想要讓圖標保持一致,最好是讓圖標在光照角度上也保持著一致。
小貼士:雖然陰影多數情況下被認為是擬物化設計中才會用到的,但是實際上,包括 Material Design 在內的扁平化設計風格中也會用到陰影。所以原則上,它是泛用的,設計師需要保持設計上的一致。
五、視覺重量
圖標給人的大小、密度和重量感,就是我們常說的視覺重量。而在同一套圖標當中,圖標的視覺重量應該保持一個非常接近的程度。
看看下面兩個圖標:
當你眯起眼睛感知這兩個圖標所形成的色塊的時候,就能夠更加明顯的對比兩者的視覺重量了:
差異確實非常的大。這個例子看起來非常極端,所以我們再繼續找點別的案例來進行對比:
就視覺重量而言,上面的一組明顯是不平衡的,你只需要眯眼斜視就可以很快判斷出來。
六、細節
魔鬼藏於細節。但是細節中所藏的魔鬼類型還是非常多樣的,這個主題我們不妨展開了來說。
1. 重複的元素
有的時候,設計師會加入了一些一致的、重複的元素,來確保圖標看起來足夠獨特。
看看下面這組圖標,會在右下角加入一些像素化的元素,每個圖標都有,並且各不相同。而這組用戶頭像圖標也是如此:
重複的元素,重點在於重複的一致性。
2. 細節的數量
另外一種情況,則是細節數量上的不一致。這種不一致會擾亂整體的一致性,簡而言之,就是這組圖標應該在複雜度上保持均衡,否則,用戶將會因為混亂而難以判斷各個圖標的屬性。
結語
正如同我剛開始所說的,想要將不同的圖標納入到一個系統當中來,設計師主要的工作目標就是確保一致性。
經驗豐富的設計師會從各個角度和屬性上來針對圖標進行優化,今天的文章已經將潛在的、需要關注的問題都梳理出來了,圖標的設計工作做好了,界面的設計才會更加順暢。
推薦閱讀:
※超酷炫的各種創意產品,設計師們太牛了!
※25個省空間的床頭櫃設計,太美了!
※書房設計之色彩搭配 打造獨具韻味的書房
※分享成人打底褲裁剪圖 服裝設計與剪裁技術交流(男裝、女裝、童裝、衣服等相 手工交流區
※美到讓你面壁思過的外牆設計
TAG:設計 |