2022-05-25 分類: 網(wǎng)站設(shè)計(jì)
找圖標(biāo)這個(gè)事情,創(chuàng)新互聯(lián)感覺對(duì)于設(shè)計(jì)師而言,其實(shí)都不是太大的問題了。不僅有大把的網(wǎng)站提供免費(fèi)的圖標(biāo)下載,而且設(shè)計(jì)師自己改和設(shè)計(jì)都不是什么大事。不過,這當(dāng)中涉及到一個(gè)非常現(xiàn)實(shí)的問題。
對(duì)于常用的那十幾個(gè)圖標(biāo),并不難找,成套的都一抓一大把,就像「設(shè)置」和「編輯」的圖標(biāo),但是,有許多圖標(biāo)對(duì)于特定的項(xiàng)目而言,是獨(dú)一無二的,你想在通用的圖標(biāo)合集中找到一個(gè)能用的,可能性并不大。如果在其他的地方找到了主題匹配的,但是在風(fēng)格樣式上,又無法保持一致,這就很尷尬了。總不能直接拿來用吧?那多容易出戲。
單獨(dú)看這些圖標(biāo)的時(shí)候,你可能會(huì)覺得單獨(dú)看都還行,但是放在一起就不那么合適了。
那么如何將來自不同的 UIKit 的圖標(biāo)匯總整合成為一套,甚至于讓網(wǎng)站和 APP 等不同地方、來源不同的圖標(biāo),變成一致而令人愉悅的設(shè)計(jì)?創(chuàng)新互聯(lián)根據(jù)多年的從業(yè)經(jīng)驗(yàn)得出如下幾點(diǎn):
圖標(biāo)所傳遞的諸多信息當(dāng)中,色彩是最為直觀的一種。將不同來源的圖標(biāo)先在色彩上統(tǒng)一起來,比如使用同一種顏色。
雖然說使用單一色彩很便捷,不過你如果能運(yùn)用現(xiàn)有的配色方案來進(jìn)行圖標(biāo)的色彩統(tǒng)一,效果就更好了:
如果你真的喜歡你所找到的圖標(biāo),但是它們的色彩又不一樣,可以先自己調(diào)整,或者找一位專業(yè)的圖標(biāo)設(shè)計(jì)師來幫你。值得注意的是,絕大多數(shù)素材的分享授權(quán)許可證是包含編輯授權(quán)的,你可以更改色彩和尺寸。
擬物化和扁平化設(shè)計(jì)之間的斗爭(zhēng)已經(jīng)持續(xù)多年了,目前來看扁平化設(shè)計(jì)是主流,但是我并不知道這種局面還會(huì)持續(xù)多久,因?yàn)槿缃竦谋馄交O(shè)計(jì)當(dāng)中就包含了不少擬物化的設(shè)計(jì)技巧和元素。在未來的5到10年會(huì)流行什么,就很難說了。時(shí)尚和流行就是這樣。
我所知道的是,你必須挑選一種風(fēng)格。要么扁平,要么擬物。
你看看這套圖標(biāo),配色是一致的,但是風(fēng)格并非如此。
將扁平化和擬物的設(shè)計(jì)風(fēng)格混搭到一起,必然會(huì)導(dǎo)致界面的雜亂無章。
不過,在大的風(fēng)格設(shè)定之下,設(shè)計(jì)師依然有足夠多的選擇。比如在扁平化的設(shè)計(jì)風(fēng)格當(dāng)中,iOS 的 Apple Human Guideline 和 Google 所推動(dòng)的 Material Design 都是非常典型的扁平化設(shè)計(jì)風(fēng)格設(shè)計(jì)規(guī)范,兩者在細(xì)節(jié)和風(fēng)格的把控上都非常的嚴(yán)格,甚至具體到每一條線的粗細(xì):
基于那些專門為特定操作系統(tǒng)所定制的、系統(tǒng)化的圖標(biāo)來設(shè)計(jì)新的圖標(biāo),其實(shí)是最可靠的辦法。這些被廣大設(shè)計(jì)師所接受的設(shè)計(jì)規(guī)范,在日常設(shè)計(jì)中指引著許多設(shè)計(jì)師的工作。
因此,在色彩和風(fēng)格上保持一致是最重要的。此外,還有一些微妙而值得注意的細(xì)節(jié),需要設(shè)計(jì)師特別上心。因?yàn)檫@些圖標(biāo)的設(shè)計(jì)已經(jīng)趨于經(jīng)典,而重度用戶和經(jīng)驗(yàn)豐富的設(shè)計(jì)師,能夠一眼就分辨出不夠貼合的圖標(biāo)細(xì)節(jié)。所以,設(shè)計(jì)師常常能夠聽到這樣的反饋:「我也不知道哪里不對(duì),就是覺得不對(duì)。」
下面的5個(gè)圖標(biāo),同樣都是采用的擬物化的風(fēng)格,為了統(tǒng)一,我細(xì)微調(diào)整了一下它們的色彩,看起來更加一致。但是不管怎么調(diào)整,它們看起來就像是5個(gè)完全不同的應(yīng)用程序的圖標(biāo)(事實(shí)上它們就是)。
如果,按照透視圖將這5個(gè)圖標(biāo)放置進(jìn)去,就可以清晰地看到,它們所處的視角和位置是截然不同的。
它們分散在透視圖的不同位置,明顯是不一致的,而這一點(diǎn)則完全違反了圖標(biāo)設(shè)計(jì)的一致性。
圖標(biāo)應(yīng)該看起來就是整個(gè)界面的一部分,它們之間的關(guān)系是平等的,在視覺和感知上應(yīng)該保持著同等的關(guān)系。
在陰影的設(shè)計(jì)上,圖標(biāo)之間也應(yīng)該保持這種一致性。看看下面的兩個(gè)圖標(biāo)吧:
這兩個(gè)圖標(biāo)源自同一套圖標(biāo),但是看起來卻只有一個(gè)圖標(biāo)被太陽(yáng)照到了。光的方向同樣很重要。因此,想要讓圖標(biāo)保持一致,最好是讓圖標(biāo)在光照角度上也保持著一致。
小貼士:雖然陰影多數(shù)情況下被認(rèn)為是擬物化設(shè)計(jì)中才會(huì)用到的,但是實(shí)際上,包括 Material Design 在內(nèi)的扁平化設(shè)計(jì)風(fēng)格中也會(huì)用到陰影。所以原則上,它是泛用的,設(shè)計(jì)師需要保持設(shè)計(jì)上的一致。
圖標(biāo)給人的大小、密度和重量感,就是我們常說的視覺重量。而在同一套圖標(biāo)當(dāng)中,圖標(biāo)的視覺重量應(yīng)該保持一個(gè)非常接近的程度。
看看下面兩個(gè)圖標(biāo):
當(dāng)你瞇起眼睛感知這兩個(gè)圖標(biāo)所形成的色塊的時(shí)候,就能夠更加明顯的對(duì)比兩者的視覺重量了:
差異確實(shí)非常的大。這個(gè)例子看起來非常極端,所以我們?cè)倮^續(xù)找點(diǎn)別的案例來進(jìn)行對(duì)比:
就視覺重量而言,上面的一組明顯是不平衡的,你只需要瞇眼斜視就可以很快判斷出來。
魔鬼藏于細(xì)節(jié)。但是細(xì)節(jié)中所藏的魔鬼類型還是非常多樣的,這個(gè)主題我們不妨展開了來說。
1. 重復(fù)的元素
有的時(shí)候,設(shè)計(jì)師會(huì)加入了一些一致的、重復(fù)的元素,來確保圖標(biāo)看起來足夠獨(dú)特。
看看下面這組圖標(biāo),會(huì)在右下角加入一些像素化的元素,每個(gè)圖標(biāo)都有,并且各不相同。而這組用戶頭像圖標(biāo)也是如此:
重復(fù)的元素,重點(diǎn)在于重復(fù)的一致性。
2. 細(xì)節(jié)的數(shù)量
另外一種情況,則是細(xì)節(jié)數(shù)量上的不一致。這種不一致會(huì)擾亂整體的一致性,簡(jiǎn)而言之,就是這組圖標(biāo)應(yīng)該在復(fù)雜度上保持均衡,否則,用戶將會(huì)因?yàn)榛靵y而難以判斷各個(gè)圖標(biāo)的屬性。
正如同創(chuàng)新互聯(lián)剛開始所說的,想要將不同的圖標(biāo)納入到一個(gè)系統(tǒng)當(dāng)中來,設(shè)計(jì)師主要的工作目標(biāo)就是確保一致性。經(jīng)驗(yàn)豐富的設(shè)計(jì)師會(huì)從各個(gè)角度和屬性上來針對(duì)圖標(biāo)進(jìn)行優(yōu)化,今天的文章已經(jīng)將潛在的、需要關(guān)注的問題都梳理出來了,圖標(biāo)的設(shè)計(jì)工作做好了,界面的設(shè)計(jì)才會(huì)更加順暢。創(chuàng)新互聯(lián)專注于用色彩、線條、結(jié)構(gòu)、文字、靈感和創(chuàng)造力為客戶提供一個(gè)有價(jià)值,有靈魂的網(wǎng)站,而不僅僅是一個(gè)擺設(shè)!創(chuàng)新互聯(lián)專注于深圳網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì),期待與你合作!
分享名稱:深圳網(wǎng)站設(shè)計(jì)談做網(wǎng)頁(yè)設(shè)計(jì)
分享地址:http://m.newbst.com/news23/158773.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容