首頁

用品牌基因法做圖標(biāo)設(shè)計(jì)，高級UI設(shè)計(jì)師才會的手法！（實(shí)戰(zhàn)篇）

資深UI設(shè)計(jì)者

1. 收到任務(wù)

我們每天都可能收到不同的設(shè)計(jì)任務(wù)，作為設(shè)計(jì)師，順利的完成這些任務(wù)是我們最基本的能力，那我們今天要講的任務(wù)是什么呢？

嘿嘿！一套天氣圖標(biāo)。

認(rèn)真的構(gòu)思中…..

2. 找參考

算了，還是先看看別人都是怎么做的吧！

我找了一堆參考，隨機(jī)選幾個展示下，如下圖（圖片采集于花瓣網(wǎng)）：

評論(0) 瀏覽(4213)

前端Boostrap系列之一：稀世珍寶：270款圓滑的 Twitter Boostrap 矢量圖標(biāo)

藍(lán)藍(lán)設(shè)計(jì)的小編



如果你不那么在意許可證，那么還有很多類似的字體圖標(biāo)庫可以使用，最引人注目的是 Font Awesome。下載此字體時，你還會收到所有 SVG 格式的矢量圖標(biāo)，這樣你就可以修改這些字體，使其更加完善，并貢獻(xiàn)到 Github 上面。

 



評論(0) 瀏覽(3210)

一站式圖標(biāo)設(shè)計(jì)指南

用心設(shè)計(jì)

這是一篇由國外萬粉dribbble大神Justas
Galaburda免費(fèi)提供的圖標(biāo)設(shè)計(jì)指南，在國外的UI設(shè)計(jì)圈子里算是引起了不小的關(guān)注。與一些小伙伴所期待的可能不一樣的一點(diǎn)是，這是一篇側(cè)重于方法論方面的指南，涵蓋了從設(shè)計(jì)第一枚圖標(biāo)開始到完成一整套圖標(biāo)所需要的一切，而不是一篇側(cè)重于軟件技術(shù)方面的指南。

一站式圖標(biāo)設(shè)計(jì)指南

評論(0) 瀏覽(4560)

巧奪天工！50枚來自Behance、DRIBBBLE的超精致圖標(biāo)

藍(lán)藍(lán)設(shè)計(jì)的小編

自從蘋果iOS系統(tǒng)推出后，擬物化圖標(biāo)設(shè)計(jì)逐漸風(fēng)靡全球（好吧！讓我們暫時別提iOS7的扁平風(fēng)），隨著技術(shù)發(fā)展，設(shè)計(jì)師們也越來越厲害，圖標(biāo)做得愈加精致。如果你是一個移動界面設(shè)計(jì)師，或者你對圖標(biāo)設(shè)計(jì)感興趣，那就千萬不要錯過接下來的這50枚精致圖標(biāo)！希望它們能給你帶來創(chuàng)意與靈感。

多嘗試，多練習(xí)，多模仿，你也可以的！
PS+AI制作精致可愛的毛線風(fēng)格圖標(biāo)
在PHOTOSHOP中創(chuàng)建精細(xì)的工具圖標(biāo)

Minion App Icon by CreativeDash

iOS Icon by Eugene Zolotco


評論(0) 瀏覽(3495)

導(dǎo)航設(shè)計(jì)趨勢！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

為導(dǎo)航瘦身！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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


為導(dǎo)航瘦身！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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

評論(0) 瀏覽(3689)

導(dǎo)航設(shè)計(jì)趨勢！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

為導(dǎo)航瘦身！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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

為導(dǎo)航瘦身！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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

為導(dǎo)航瘦身！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

問題所在

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

 

評論(0) 瀏覽(3432)

學(xué)點(diǎn)新技能！玩轉(zhuǎn)響應(yīng)式圖標(biāo)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

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

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

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

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

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

sizes

這個理念不是新的。對于柵格化圖標(biāo)來說，這種設(shè)計(jì)方法很常見。

評論(0) 瀏覽(3891)

界面圖標(biāo)創(chuàng)意設(shè)計(jì)教程

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

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

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

評論(0) 瀏覽(4817)

社交媒體共享圖標(biāo)在網(wǎng)頁設(shè)計(jì)中的作用

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

社交媒體圖標(biāo)可以表現(xiàn)出幾個不同的功能。有時，它是社交網(wǎng)絡(luò)中的公司資料頁面/帳戶的鏈接。通常情況下，你可以在它們的周圍看到“跟隨我們……”或“加入我們……”這樣的字樣。這些圖標(biāo)通常會被放在網(wǎng)頁的頂部或底部，也可以放置在側(cè)邊欄。從經(jīng)驗(yàn)來說，它們在整個網(wǎng)站都是可見的。

Lucius

Social media sharing icons influence web designs

評論(0) 瀏覽(5530)

Polaris UI Kit：精美的 UI 組件包和矢量圖標(biāo)(AI, PNG, PSD, SVG)

藍(lán)藍(lán)設(shè)計(jì)的小編

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

評論(1) 瀏覽(4336)

日歷

鏈接

個人資料

存檔