圖標(biāo)是設(shè)計項目中幾乎必不可少的一個組成部分，但是在圖標(biāo)的具體使用上，講究并不少。如果你曾仔細瀏覽優(yōu)設(shè)的網(wǎng)站，應(yīng)該已經(jīng)看過不少圖標(biāo)設(shè)計的實戰(zhàn)案例。
1、強化視覺
并不是所有的圖片都能給用戶帶來驚艷的感覺，很多時候，圖片也不足以撐起整個設(shè)計的視覺和形式感。
這個時候，圖標(biāo)的重要性就凸顯出來了，許多有趣的圖標(biāo)和圖片結(jié)合起來使用，能夠強化圖片的內(nèi)容，提供額外的信息，給予用戶以交互的提示，從視覺、交互、體驗三個層面對設(shè)計進行提升。
2、引導(dǎo)交互
盡管有許多網(wǎng)頁和aPP模板中都會采用三欄式的圖片+文字的布局，但實際上圖標(biāo)并不需要在特定的地方出現(xiàn)。
圖標(biāo)本身是驅(qū)動整個界面交互性的一個關(guān)鍵元素，它可以出現(xiàn)在各個不同的地方，也可以結(jié)合視差滾動的設(shè)計手法，讓圖片隨著滾動而不斷運動，橫跨多屏，引導(dǎo)用戶與屏幕不停地互動。
BooneSelections這個網(wǎng)站就使用各種圖片展現(xiàn)了葡萄酒從生產(chǎn)到運輸?shù)牧鞒蹋柚鷪D標(biāo)來驅(qū)動整個視覺，引導(dǎo)用戶不停的滾動瀏覽。隨著用戶的滾動，圖標(biāo)和各種元素之間不斷地進行互動。
3、使用動效
雖然我們看到的絕大多數(shù)的圖標(biāo)都是靜態(tài)的，但是從來沒有人規(guī)定死它們必須是靜止的。那么，就讓圖標(biāo)動起來吧!
不過，動態(tài)圖標(biāo)的設(shè)計也應(yīng)該是有規(guī)則、有目的的。優(yōu)秀的動態(tài)圖標(biāo)的運動方式和內(nèi)容應(yīng)該是有關(guān)聯(lián)的，同時它的運動速度應(yīng)該是適中的，因為過快的變化可能會讓用戶猝不及防，但是太慢了又會讓用戶等待太久。控制好節(jié)奏，動效會非常的令人著迷。
SweetPunk這個網(wǎng)站同樣采用了燈泡這樣的圖標(biāo)元素，但是和之前的案例不同的地方在于，設(shè)計師在其中暗藏了許多可用鼠標(biāo)光標(biāo)觸發(fā)的動效。圍繞著燈泡的三圈線條會緩慢的浮動，當(dāng)光標(biāo)靠近的時候會靠近光標(biāo)，如同活物一樣。
而當(dāng)光標(biāo)移動到燈泡上的時候，其中的火焰會快速地閃動，速度非常快，和周圍的動效形成速度差。
4、創(chuàng)建圖標(biāo)集群
不同形狀、不同風(fēng)格的圖標(biāo)一旦成群結(jié)對地出現(xiàn)在屏幕上，總能帶來不一樣的體驗。雖然這樣的應(yīng)用方式常見于圖標(biāo)推薦類的網(wǎng)站，但是它實際上有著更為廣泛的應(yīng)用范疇。
你可以考慮將圖標(biāo)擺成不同的陣列，如果你想強化視覺，甚至可以將圖標(biāo)放大來使用。圖標(biāo)本身可以用作鏈接的如何，也可以單純只是當(dāng)作指引性的圖片。圖標(biāo)集群可以用很多圖標(biāo)，也可以只包含兩三個。如何使用，使用多少，更多取決于你的設(shè)計決策過程。
使用圖標(biāo)集群的一個重要好處在于，它會讓你跳出日常圖標(biāo)的使用窠臼，重新思考圖標(biāo)的使用方法。它的另外一個好處在于，你可以基于某個圖標(biāo)包來設(shè)計，也可以根據(jù)需求自定義。這個時候，你可以一邊“玩弄”圖標(biāo)，一邊做設(shè)計。
5、結(jié)合流行元素
圖標(biāo)是整個設(shè)計項目的諸多組成部分之一，它需要契合整個設(shè)計策略。仔細審視你所需要設(shè)計的內(nèi)容和風(fēng)格，再將圖標(biāo)和流行的元素結(jié)合起來，營造出符合現(xiàn)代風(fēng)格的美學(xué)特征。
圖標(biāo)的一大特色就是它的靈活性。它從形狀到細節(jié)都可以充滿藝術(shù)性，從手繪風(fēng)到扁平化，從精致擬物到藝術(shù)化處理都很容易實現(xiàn)。一旦你確定了整體風(fēng)格，設(shè)計一套風(fēng)格匹配的圖標(biāo)并不是太難的事情。
6、稍加調(diào)整
雖然圖標(biāo)是可以自由設(shè)計的，但是許多特定功能、特定場合所能使用的圖標(biāo)最好不要標(biāo)新立異，比如社交媒體鏈接、搜索、購物車、導(dǎo)航箭頭等圖標(biāo)。這些圖標(biāo)的基本特征是約定俗成的，太過“富有創(chuàng)意”的構(gòu)思可能會毀掉它們的基本可用性。
不過你可以在這些圖標(biāo)的樣式上動腦筋。調(diào)整色彩、修改形狀，甚至重新繪制。而這其中，最主要的訣竅在于，保持基本的視覺識別度的前提下，加入一些獨特的構(gòu)思，確保用戶不會質(zhì)疑圖標(biāo)本身的含義。
簡單的修改其實能做的事情不少。將圖標(biāo)有針對性的結(jié)合你的整體設(shè)計來進行修改，讓它們更加貼合你的設(shè)計和風(fēng)格。
LittlePuds&Co.的網(wǎng)站就是這么做的。這個品牌色本身是瑪卡龍綠，為了讓網(wǎng)站的整體風(fēng)格保持一致，設(shè)計師將社交媒體鏈接和搜索按鈕的色彩都調(diào)整成了品牌色，這樣保持了視覺的一致性，又不會質(zhì)疑圖標(biāo)本身的功能。
7、自定義手繪
圖標(biāo)本身可以視作為一個微縮的圖畫，雖然圖標(biāo)大多趨向于扁平風(fēng)，并且其中相當(dāng)一部分是采用線條勾勒的，但是圖標(biāo)本身還是能玩出很多花樣的，尤其是當(dāng)你想玩出屬于自己的風(fēng)格的時候。
最典型的就是采用自己手繪的圖標(biāo)，這樣的圖標(biāo)通常很難劃歸到常見的分類中，但是他們有明顯帶有個人風(fēng)格。手繪圖標(biāo)本身就是一種帶有品牌屬性的東西。
所以，你可以參考InfinityFoods的設(shè)計。你可以打開他們的網(wǎng)站，看看他們?nèi)椎膱D標(biāo)都是怎么設(shè)計的，這種個人風(fēng)格濃郁的設(shè)計，本身就足以營造出區(qū)別于同行的特色。
雖然圖標(biāo)設(shè)計可能是設(shè)計項目中被考慮的最少的元素，但是它們可能是最有趣的設(shè)計元素之一，一套精心設(shè)計的圖標(biāo)用好了，能給整個設(shè)計增色不少。

網(wǎng)站名稱：為網(wǎng)頁增加趣味性，看這7個小圖標(biāo)使用思路
URL地址：http://m.newbst.com/news48/141698.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、用戶體驗、網(wǎng)站設(shè)計公司、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)