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

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

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

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

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

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

公司品牌

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

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

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

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

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

導(dǎo)航鏈接

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

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

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

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

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

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

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

矢量背景

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

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

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

總結(jié)

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

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

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

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

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