UI設(shè)計(jì)中，圖標(biāo)基本上成為了業(yè)務(wù)的入口，他們很輕易就能組織起內(nèi)容，也往往都是輕量級(jí)的，就算已經(jīng)過(guò)去時(shí)的MP3也如此。就拿Ipod的圖標(biāo)來(lái)說(shuō)，IPod的圖標(biāo)就是傳達(dá)信息的一種快速直觀的方法。

在UI設(shè)計(jì)中幾乎從圖標(biāo)一出現(xiàn)就開始使用了，這些圖標(biāo)符號(hào)，通過(guò)使用能被用戶普遍接受的圖像（如：文件夾、打印機(jī)、鼠標(biāo)、箭頭等）這些已經(jīng)發(fā)展成自己的語(yǔ)言。而交互時(shí)代也將在本文中，分析一些圖標(biāo)的UI設(shè)計(jì)構(gòu)思。

設(shè)計(jì)風(fēng)格

那句短語(yǔ)“圖標(biāo)設(shè)計(jì)”囊括兩個(gè)UI設(shè)計(jì)方向，第一個(gè)是扁平化風(fēng)格，而另外一個(gè)是指通過(guò)Photoshop或Illustrator等軟件繪制真實(shí)感很強(qiáng)的擬物化圖標(biāo)。每個(gè)項(xiàng)目對(duì)UI設(shè)計(jì)都有不同的要求，我們通常從這兩個(gè)方向去定圖標(biāo)風(fēng)格。

流行的扁平化讓全世界大批UI設(shè)計(jì)師追隨。描邊風(fēng)格圖標(biāo)是IOS7和iOS8的主要風(fēng)格，其他的手機(jī)操作系統(tǒng)也緊跟其后。選擇用什么圖標(biāo)都沒(méi)有對(duì)錯(cuò)，只看是否合適。

交互時(shí)代覺(jué)得，該網(wǎng)站的FlatvsRealism是比較這兩個(gè)方向的最好案例。圖標(biāo)的設(shè)計(jì)結(jié)合了光線、陰影等許多原則。當(dāng)你想做擬物的圖標(biāo)的時(shí)候擬需要考慮紋理和陰影，這些雖然需要大量的工作，但是他們看起來(lái)很有意義。

公司品牌

品牌UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)的作用顯而易見，但是這是很值得一提的，因?yàn)橐恍﹥?yōu)秀的網(wǎng)站往往具有令人難以置信的品牌。圖標(biāo)的UI設(shè)計(jì)是一個(gè)與客戶溝通的好方式。如果公司的品牌標(biāo)識(shí)和吉祥物能給用戶留下一個(gè)難以忘記的印象，那么這個(gè)將會(huì)更容易打中用戶的心。

你可以為一個(gè)品牌做一套專用的圖標(biāo)。由于圖標(biāo)設(shè)計(jì)具有如此廣泛的風(fēng)格，所以你可以考慮做一套很大的圖標(biāo)合集。如果每個(gè)圖標(biāo)都很獨(dú)特，它必將提升網(wǎng)站的效果，并幫助網(wǎng)站在同類中脫穎而出。

MailBakery就是這樣一個(gè)例子，它使用了大量的圖標(biāo)去展示他們的服務(wù)。當(dāng)您單擊每個(gè)滑塊框下方的圖標(biāo)，新的內(nèi)容將出現(xiàn)在您眼簾。每個(gè)圖標(biāo)與圖形的設(shè)計(jì)風(fēng)格完全一樣，以保持整體的一致性。

也就是說(shuō)這些圖標(biāo)是專門為這個(gè)網(wǎng)站而定制的。當(dāng)然他們也完全可以使用一套免費(fèi)的圖標(biāo)，但是免費(fèi)的圖標(biāo)可能在其他多至20個(gè)網(wǎng)站上出現(xiàn)過(guò)。如果是這樣，你的網(wǎng)站的獨(dú)特性和潛在的品牌機(jī)會(huì)將丟失。

因此，我們建議有抱負(fù)的UI設(shè)計(jì)師要學(xué)習(xí)如何制作外觀類的圖標(biāo)界面，這將讓你的專業(yè)發(fā)展到另一個(gè)層次。

導(dǎo)航鏈接

在過(guò)去圖標(biāo)很多時(shí)候被當(dāng)作導(dǎo)航文字。也就是說(shuō)用圖標(biāo)來(lái)區(qū)分鏈接或按鈕?，F(xiàn)在的Facebooknavigation導(dǎo)航也遵循這個(gè)原則，這樣使得很多看上去差不多的鏈接能夠快速被區(qū)分。想了解更多有關(guān)ui設(shè)計(jì)知識(shí)培訓(xùn)班請(qǐng)關(guān)注ds798/class-ui-basis，咨詢熱線；咨詢QQ：；或者關(guān)注微信訂閱號(hào)“交互時(shí)代”；

雖然你不會(huì)這樣用，但是這確實(shí)是一個(gè)幫助用戶理解內(nèi)容的好方式。下拉菜單式一個(gè)不錯(cuò)的使用場(chǎng)景，以為用戶往往會(huì)集中精力看下拉菜單展現(xiàn)出來(lái)的內(nèi)容，但是如果下拉菜單的內(nèi)容太長(zhǎng)，使用圖標(biāo)會(huì)大大提高可讀性。

定義內(nèi)容識(shí)別度

網(wǎng)頁(yè)設(shè)計(jì)中使用圖標(biāo)的最大原因是幫助用戶理解內(nèi)容。圖標(biāo)很容易表達(dá)一個(gè)明確的信息視覺(jué)線索。它們可以讓文字篇幅很長(zhǎng)的內(nèi)容頁(yè)面獲得視覺(jué)的平衡。圖標(biāo)UI設(shè)計(jì)中最重要的一“課”是學(xué)會(huì)如何用一個(gè)單一的圖標(biāo)去表達(dá)一個(gè)明確的信息。

交互時(shí)代最喜歡的這種效果的例子可以在GitHub的教育網(wǎng)頁(yè)上找到。標(biāo)題部分使用GitHub的Octocat創(chuàng)造與黑板和粉筆字的感覺(jué)。當(dāng)你向下滾動(dòng)，每個(gè)模塊都適用了相應(yīng)的符合模塊風(fēng)格的圖標(biāo)。

請(qǐng)注意，所有的圖標(biāo)都包含手繪效果，而且他們都很搭。每個(gè)圖標(biāo)即有個(gè)性也能讓整個(gè)頁(yè)面效果統(tǒng)一。但更重要的是，圖標(biāo)幫助直觀地定義內(nèi)容。文字能直觀的傳遞消息，圖標(biāo)則幫助用戶理解。

你也可以在Glazed&Infused的首頁(yè)上看到相似的效果。小塊文字結(jié)合圖標(biāo)去解釋他們的餐飲、咖啡、禮品等。這些夢(mèng)幻般的圖標(biāo)是很必要的。他們會(huì)迅速引起用戶的注意，并提供更深層次的含義。

矢量背景

從重復(fù)平鋪背景到矢量圖形，你可以有很多選擇去制作網(wǎng)頁(yè)背景。如今的網(wǎng)站背景不僅僅是簡(jiǎn)單的循環(huán)紋理圖形了，現(xiàn)在發(fā)揮空間更大了，現(xiàn)在我們可以通過(guò)矢量圖形在背景上創(chuàng)建整改讓人震撼的場(chǎng)景。

矢量圖形很好用，但是卻很難創(chuàng)造出逼真的效果。矢量圖形不支持復(fù)雜的圖層樣式，需要不少的努力才能獲取這些訣竅，但是你學(xué)習(xí)的過(guò)程中將會(huì)覺(jué)得有趣而且充實(shí)。

BotaIusti是一個(gè)矢量圖形的典型案例。頁(yè)面本身是相應(yīng)式的，大小隨著窗口的變化而變化。矢量藝術(shù)的最大的好處是你可以讓它在任何屏幕上完美顯示，而且顯得高檔。

總結(jié)

提高自己UI設(shè)計(jì)的圖標(biāo)水平的最佳方式就是看學(xué)習(xí)，接受UI設(shè)計(jì)培訓(xùn)，學(xué)習(xí)各種軟件知識(shí)，設(shè)計(jì)技巧。要精通這項(xiàng)能力沒(méi)有快捷方式可以走。所以你能做的就是盡你的所能練習(xí)和研究。

盡管圖標(biāo)設(shè)計(jì)是一個(gè)非常大的學(xué)問(wèn)，但是用這些簡(jiǎn)單的例子讓你們開始，雖然時(shí)間總是需要擠，但是如果你真的想提高，就從現(xiàn)在開始吧！

以上，就是交互時(shí)代今天與大家分享的內(nèi)容，想要了解更多關(guān)于交互設(shè)計(jì)的內(nèi)容，就多多關(guān)注交互時(shí)代官網(wǎng)吧，也可以關(guān)注交互時(shí)代的微信平臺(tái)，接觸第一手設(shè)計(jì)資訊。

請(qǐng)聯(lián)系網(wǎng)站客服，了解詳細(xì)的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心