網(wǎng)站設(shè)計(jì)

Website development

?能幫你在設(shè)計(jì)項(xiàng)目中用好小圖標(biāo)

發(fā)布時(shí)間：2017-01-13 09:46:14

能幫你在設(shè)計(jì)項(xiàng)目中用好小圖標(biāo).jpg

圖標(biāo)是設(shè)計(jì)項(xiàng)目中幾乎必不可少的一個(gè)組成部分，但是在圖標(biāo)的具體使用上，講究并不少。如果你曾仔細(xì)瀏覽網(wǎng)站，應(yīng)該已經(jīng)看過(guò)不少圖標(biāo)設(shè)計(jì)的實(shí)戰(zhàn)案例。

就比如近的AI教程系列當(dāng)中，多數(shù)都是教你如何設(shè)計(jì)圖標(biāo)和小插畫的：

1、強(qiáng)化視覺(jué)

avenir-clinic

并不是所有的圖片都能給用戶帶來(lái)驚艷的感覺(jué)，很多時(shí)候，圖片也不足以撐起整個(gè)設(shè)計(jì)的視覺(jué)和形式感。

這個(gè)時(shí)候，圖標(biāo)的重要性就凸顯出來(lái)了。許多有趣的圖標(biāo)和圖片結(jié)合起來(lái)使用，能夠強(qiáng)化圖片的內(nèi)容，提供額外的信息，給予用戶以交互的提示，從視覺(jué)、交互、體驗(yàn)三個(gè)層面對(duì)設(shè)計(jì)進(jìn)行提升。

以上面的牙醫(yī)診所的網(wǎng)站為例，整體的設(shè)計(jì)就頗為有趣，親切，且充滿活力。網(wǎng)頁(yè)中的人物角色旁邊的燈泡圖標(biāo)中，就加入了牙齒的元素，非常點(diǎn)題。網(wǎng)頁(yè)左右側(cè)的色彩對(duì)比也平衡了整體視覺(jué)，左側(cè)偏白的部分和白色的圖標(biāo)相互呼應(yīng)。網(wǎng)頁(yè)其他的地方也合理地運(yùn)用小圖標(biāo)來(lái)強(qiáng)化視覺(jué)。

2、引導(dǎo)交互

boone-wine

盡管有許多網(wǎng)頁(yè)和APP模板中都會(huì)采用三欄式的圖片+文字的布局，但實(shí)際上圖標(biāo)并不需要在特定的地方出現(xiàn)。

圖標(biāo)本身是驅(qū)動(dòng)整個(gè)界面交互性的一個(gè)關(guān)鍵元素，它可以出現(xiàn)在各個(gè)不同的地方，也可以結(jié)合視差滾動(dòng)的設(shè)計(jì)手法，讓圖片隨著滾動(dòng)而不斷運(yùn)動(dòng)，橫跨多屏，引導(dǎo)用戶與屏幕不停地互動(dòng)。

Boone Selections 這個(gè)網(wǎng)站就使用各種圖片展現(xiàn)了葡萄酒從生產(chǎn)到運(yùn)輸?shù)牧鞒?，借助圖標(biāo)來(lái)驅(qū)動(dòng)整個(gè)視覺(jué)，引導(dǎo)用戶不停的滾動(dòng)瀏覽。隨著用戶的滾動(dòng)，圖標(biāo)和各種元素之間不斷地進(jìn)行互動(dòng)。

3、使用動(dòng)效

sweet-punk

雖然我們看到的絕大多數(shù)的圖標(biāo)都是靜態(tài)的，但是從來(lái)沒(méi)有人規(guī)定死它們必須是靜止的。那么，就讓圖標(biāo)動(dòng)起來(lái)吧！

不過(guò)，動(dòng)態(tài)圖標(biāo)的設(shè)計(jì)也應(yīng)該是有規(guī)則、有目的的。優(yōu)秀的動(dòng)態(tài)圖標(biāo)的運(yùn)動(dòng)方式和內(nèi)容應(yīng)該是有關(guān)聯(lián)的，同時(shí)它的運(yùn)動(dòng)速度應(yīng)該是適中的，因?yàn)檫^(guò)快的變化可能會(huì)讓用戶猝不及防，但是太慢了又會(huì)讓用戶等待太久?？刂坪霉?jié)奏，動(dòng)效會(huì)非常的令人著迷。

Sweet Punk 這個(gè)網(wǎng)站同樣采用了燈泡這樣的圖標(biāo)元素，但是和之前的案例不同的地方在于，設(shè)計(jì)師在其中暗藏了許多可用鼠標(biāo)光標(biāo)觸發(fā)的動(dòng)效。圍繞著燈泡的三圈線條會(huì)緩慢的浮動(dòng)，當(dāng)光標(biāo)靠近的時(shí)候會(huì)靠近光標(biāo)，如同活物一樣。而當(dāng)光標(biāo)移動(dòng)到燈泡上的時(shí)候，其中的火焰會(huì)快速地閃動(dòng)，速度非常快，和周圍的動(dòng)效形成速度差。

4、創(chuàng)建圖標(biāo)集群

bellaicons

不同形狀、不同風(fēng)格的圖標(biāo)一旦成群結(jié)對(duì)地出現(xiàn)在屏幕上，總能帶來(lái)不一樣的體驗(yàn)。雖然這樣的應(yīng)用方式常見(jiàn)于圖標(biāo)推薦類的網(wǎng)站，但是它實(shí)際上有著更為廣泛的應(yīng)用范疇。

你可以考慮將圖標(biāo)擺成不同的陣列，如果你想強(qiáng)化視覺(jué)，甚至可以將圖標(biāo)放大來(lái)使用。圖標(biāo)本身可以用作鏈接的如何，也可以單純只是當(dāng)作指引性的圖片。圖標(biāo)集群可以用很多圖標(biāo)，也可以只包含兩三個(gè)。如何使用，使用多少，更多取決于你的設(shè)計(jì)決策過(guò)程。

使用圖標(biāo)集群的一個(gè)重要好處在于，它會(huì)讓你跳出日常圖標(biāo)的使用窠臼，重新思考圖標(biāo)的使用方法。它的另外一個(gè)好處在于，你可以基于某個(gè)圖標(biāo)包來(lái)設(shè)計(jì)，也可以根據(jù)需求自定義。這個(gè)時(shí)候，你可以一邊“玩弄”圖標(biāo)，一邊做設(shè)計(jì)。

5、結(jié)合流行元素

icon-history

圖標(biāo)是整個(gè)設(shè)計(jì)項(xiàng)目的諸多組成部分之一，它需要契合整個(gè)設(shè)計(jì)策略。仔細(xì)審視你所需要設(shè)計(jì)的內(nèi)容和風(fēng)格，再將圖標(biāo)和流行的元素結(jié)合起來(lái)，營(yíng)造出符合現(xiàn)代風(fēng)格的美學(xué)特征。

圖標(biāo)的一大特色就是它的靈活性。它從形狀到細(xì)節(jié)都可以充滿藝術(shù)性，從手繪風(fēng)到扁平化，從精致擬物到藝術(shù)化處理都很容易實(shí)現(xiàn)。一旦你確定了整體風(fēng)格，設(shè)計(jì)一套風(fēng)格匹配的圖標(biāo)并不是太難的事情。

而上面這個(gè)關(guān)于圖標(biāo)歷史的網(wǎng)站就展示了多年來(lái)圖標(biāo)風(fēng)格的演變，這個(gè)網(wǎng)站本身研究的內(nèi)容就已經(jīng)很酷了，更別說(shuō)其中所承載的風(fēng)格多樣的圖標(biāo)了。這些圖標(biāo)所呈現(xiàn)出來(lái)的風(fēng)格、色彩、使用方法和規(guī)格都非常值得研究學(xué)習(xí)。

6、稍加調(diào)整

puds-co

雖然圖標(biāo)是可以自由設(shè)計(jì)的，但是許多特定功能、特定場(chǎng)合所能使用的圖標(biāo)好不要標(biāo)新立異，比如社交媒體鏈接、搜索、購(gòu)物車、導(dǎo)航箭頭等圖標(biāo)。這些圖標(biāo)的基本特征是約定俗成的，太過(guò)“富有創(chuàng)意”的構(gòu)思可能會(huì)毀掉它們的基本可用性。

不過(guò)你可以在這些圖標(biāo)的樣式上動(dòng)腦筋。調(diào)整色彩、修改形狀，甚至重新繪制。而這其中，主要的訣竅在于，保持基本的視覺(jué)識(shí)別度的前提下，加入一些獨(dú)特的構(gòu)思，確保用戶不會(huì)質(zhì)疑圖標(biāo)本身的含義。

簡(jiǎn)單的修改其實(shí)能做的事情不少。將圖標(biāo)有針對(duì)性的結(jié)合你的整體設(shè)計(jì)來(lái)進(jìn)行修改，讓它們更加貼合你的設(shè)計(jì)和風(fēng)格。優(yōu)設(shè)的這篇進(jìn)階技巧文應(yīng)該能幫到你：《提高可用性！6個(gè)新人進(jìn)階該學(xué)的圖標(biāo)設(shè)計(jì)小技巧》

Little Puds & Co. 的網(wǎng)站就是這么做的。這個(gè)品牌色本身是瑪卡龍綠，為了讓網(wǎng)站的整體風(fēng)格保持一致，設(shè)計(jì)師將社交媒體鏈接和搜索按鈕的色彩都調(diào)整成了品牌色，這樣保持了視覺(jué)的一致性，又不會(huì)質(zhì)疑圖標(biāo)本身的功能。

7、自定義手繪

infinity-food

圖標(biāo)本身可以視作為一個(gè)微縮的圖畫，雖然圖標(biāo)大多趨向于扁平風(fēng)，并且其中相當(dāng)一部分是采用線條勾勒的，但是圖標(biāo)本身還是能玩出很多花樣的，尤其是當(dāng)你想玩出屬于自己的風(fēng)格的時(shí)候。

典型的就是采用自己手繪的圖標(biāo)，這樣的圖標(biāo)通常很難劃歸到常見(jiàn)的分類中，但是他們有明顯帶有個(gè)人風(fēng)格。手繪圖標(biāo)本身就是一種帶有品牌屬性的東西。

所以，你可以參考 Infinity Foods 的設(shè)計(jì)。你可以打開(kāi)他們的網(wǎng)站，看看他們?nèi)椎膱D標(biāo)都是怎么設(shè)計(jì)的，這種個(gè)人風(fēng)格濃郁的設(shè)計(jì)，本身就足以營(yíng)造出區(qū)別于同行的特色。

不過(guò)如果你想知道那些扁平風(fēng)線性圖標(biāo)是怎么畫出來(lái)的話，這個(gè)教程就非常適合你了：《AI教程！手把手教你繪制扁平化的線性圖標(biāo)》

結(jié)語(yǔ)

雖然圖標(biāo)設(shè)計(jì)可能是設(shè)計(jì)項(xiàng)目中被考慮的少的元素，但是它們可能是有趣的設(shè)計(jì)元素之一。一套精心設(shè)計(jì)的圖標(biāo)用好了，能給整個(gè)設(shè)計(jì)增色不少。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7050,0.html

上一篇：體驗(yàn)設(shè)計(jì)能做什么

下一篇：可怕的例子，網(wǎng)站推薦做的好

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理