不知不覺(jué)的，很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡(jiǎn)潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube 的圖標(biāo)式導(dǎo)航(移動(dòng)版):

這是Squarespace的圖標(biāo)式導(dǎo)航：

AWARD的圖標(biāo)式導(dǎo)航不拘一格：

不知不覺(jué)的，很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡(jiǎn)潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube的圖標(biāo)式導(dǎo)航(移動(dòng)版):

這是Squarespace的圖標(biāo)式導(dǎo)航：

AWARD的圖標(biāo)式導(dǎo)航不拘一格：

問(wèn)題所在

問(wèn)題在于，點(diǎn)擊圖標(biāo)式導(dǎo)航之后，圖標(biāo)本身沒(méi)有任何變化。也就是說(shuō)：操作缺乏反饋。

什么是響應(yīng)式圖標(biāo)設(shè)計(jì)？

響應(yīng)式設(shè)計(jì)主要講的是布局，那么什么是響應(yīng)式圖標(biāo)？響應(yīng)式圖標(biāo)設(shè)計(jì)是一種根據(jù)屏幕尺寸來(lái)改變圖標(biāo)類(lèi)型、從而達(dá)到更好可讀性的設(shè)計(jì)。

圖標(biāo)為什么要響應(yīng)式？

怎樣閱讀內(nèi)容？時(shí)至今日，我們用來(lái)閱讀內(nèi)容的平臺(tái)越來(lái)越多。設(shè)備、屏幕分辨率、瀏覽器、平臺(tái)——我可以拿著5S+Safari+iOS7.0瀏覽網(wǎng)頁(yè)，也可以拿著1020+Chorome+WP8瀏覽網(wǎng)頁(yè)。

各種選擇，各種搭配實(shí)在是太多了，這些都或多或少的影響了內(nèi)容的可讀性。而圖標(biāo)作為一種視覺(jué)語(yǔ)言，可讀性非常重要。

圖標(biāo)設(shè)計(jì)，首先要滿足易于理解。其次，圖標(biāo)的可讀性必須高。在小尺寸的情況下，圖標(biāo)設(shè)計(jì)為了追求更高的辨識(shí)度/可讀性，可以選擇犧牲一點(diǎn)美感。

那么能不能美感、可讀性兼得呢？圖標(biāo)設(shè)計(jì)的藝術(shù)便在于二者的平衡，取與舍。怎樣設(shè)計(jì)，讓不同尺寸的圖標(biāo)均能展現(xiàn)美感，同時(shí)又具備可讀性？

我認(rèn)為，需要根據(jù)尺寸范圍進(jìn)行圖標(biāo)響應(yīng)式的優(yōu)化

這個(gè)理念不是新的。對(duì)于柵格化圖標(biāo)來(lái)說(shuō)，這種設(shè)計(jì)方法很常見(jiàn)。

在網(wǎng)上看過(guò)很多設(shè)計(jì)師的圖標(biāo)制作過(guò)程,基本都是偏向技法的介紹.其實(shí)在圖標(biāo)設(shè)計(jì)過(guò)程中除了技法之外最重要的就是圖標(biāo)創(chuàng)意了,但這方面的系統(tǒng)介紹網(wǎng)上倒是很少.借這次實(shí)際的界面設(shè)計(jì)項(xiàng)目,來(lái)分享下我自己對(duì)界面圖標(biāo)制作創(chuàng)意階段的方法的理解.并以豐富的圖例來(lái)闡釋自己的想法!以次作為圖形界面設(shè)計(jì)師交流的引子!歡迎大家進(jìn)來(lái)交流!

這個(gè)過(guò)程比較長(zhǎng),自己只能分階段的準(zhǔn)備好,發(fā)上來(lái)!快畢業(yè)了事情很多,多多諒解!
今天把部分草圖放上來(lái)!創(chuàng)意說(shuō)明后續(xù)準(zhǔn)備.

第一部分：圖標(biāo)創(chuàng)意階段

其實(shí)這個(gè)階段之前還有個(gè)重要的步驟,就是創(chuàng)意準(zhǔn)備.

根據(jù)項(xiàng)目需求,確定圖標(biāo)的風(fēng)格,這在界面設(shè)計(jì)過(guò)程中,有風(fēng)格評(píng)測(cè)的方法來(lái)確定項(xiàng)目是走什么風(fēng)格路線.這也是項(xiàng)目前期用戶研究的內(nèi)容,有潛力的公司會(huì)制定"用戶角色",

剖析社交媒體圖標(biāo)

事實(shí)上，社交媒體圖標(biāo)可以理解為社交媒體、社交網(wǎng)絡(luò)的標(biāo)志以及說(shuō)明的鏈接。

社交媒體圖標(biāo)可以表現(xiàn)出幾個(gè)不同的功能。有時(shí)，它是社交網(wǎng)絡(luò)中的公司資料頁(yè)面/帳戶的鏈接。通常情況下，你可以在它們的周?chē)吹健案S我們……”或“加入我們……”這樣的字樣。這些圖標(biāo)通常會(huì)被放在網(wǎng)頁(yè)的頂部或底部，也可以放置在側(cè)邊欄。從經(jīng)驗(yàn)來(lái)說(shuō)，它們?cè)谡麄€(gè)網(wǎng)站都是可見(jiàn)的。

Lucius

Smashing Magazine 發(fā)布了一個(gè)包含非常有用的 UI 組件和 48 個(gè)精美的矢量圖標(biāo)的素材包。界面組件包 Polaris UI Kit  里面包括編輯框，復(fù)選框，單選按鈕，頁(yè)面導(dǎo)航，菜單，按鈕等等，可以免費(fèi)用于任何項(xiàng)目。圖標(biāo)集合 Linecons 里面包含的 48 個(gè)可伸縮矢量圖標(biāo)都是 outline 風(fēng)格，提供了 AI, PNG, PSD, SVG 等多種格式。

在這篇文章中，我已經(jīng)收集了20個(gè)華麗的圖標(biāo)集，適用于幾乎任何類(lèi)型的設(shè)計(jì)。這些圖標(biāo)有一個(gè)干凈的和描述性的外觀，同時(shí)遵循良好的設(shè)計(jì)原則，相信你會(huì)喜歡。

Delicious Berries

33 Free Social Media Icons

Social Icon Set

Photoshop Rounded Corners

圖標(biāo)對(duì)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是寶貴的財(cái)富，高質(zhì)量的圖標(biāo)素材既能為設(shè)計(jì)師節(jié)省時(shí)間，又能有很不錯(cuò)的效果。網(wǎng)上的免費(fèi)圖標(biāo)素材非常多，可以說(shuō)是琳瑯滿目，那些充滿分享精神的設(shè)計(jì)師們把素材共享出來(lái)，讓更多的人可以使用他們的優(yōu)秀設(shè)計(jì)。今天這篇文章為大家收集了50套新鮮出爐的圖標(biāo)素材資源與大家分享，可以免費(fèi)下載。記得分享和推薦一下 :)

Book Icons

這次給大家分享的主題是我們讀書(shū)會(huì)“打書(shū)釘”第二期廣榮同學(xué)為我們分享的《圖標(biāo)與幾何構(gòu)成》，介紹圖標(biāo)形體的設(shè)計(jì)與幾何構(gòu)成的關(guān)系！若有不足之處，望大師指點(diǎn)。

一、產(chǎn)品的靈魂 -Logo

Logo是每一個(gè)產(chǎn)品的重要標(biāo)識(shí)，它是表明產(chǎn)品特征的記號(hào)、商標(biāo)。它以單純、顯著、易識(shí)別的物象、圖形或文字符號(hào)為直觀語(yǔ)言，除表示什么，代替什么之外，還具有表達(dá)意義、情感和指令行動(dòng)等作用。