很多人不善于整理自己的網(wǎng)站資源，沒(méi)有系統(tǒng)的分門(mén)別類(lèi)，都是一些零散的收藏，在用的時(shí)候找起來(lái)很麻煩。雖然有很多優(yōu)秀的設(shè)計(jì)導(dǎo)航已經(jīng)幫助大家分好類(lèi)別，比如優(yōu)設(shè)網(wǎng)的導(dǎo)航分類(lèi)，但我覺(jué)得還是自己總結(jié)出來(lái)的更加適合自己，那今天就來(lái)分享一下我是如何來(lái)將這些設(shè)計(jì)網(wǎng)站來(lái)進(jìn)行分類(lèi)整理的（場(chǎng)景可能不全，大家自行補(bǔ)充）。

優(yōu)設(shè)網(wǎng)址導(dǎo)航：http://hao.uisdc.com/

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

我經(jīng)過(guò)簡(jiǎn)單的調(diào)研總結(jié)得到大綱如下（軟件部分我就不多說(shuō)了）：

1. 靈感
2. 圖標(biāo)
3. 素材模板
4. 圖片
5. 配色
6. 規(guī)范
7. 文章教程

1. 靈感

在做作品之前，我們需要找大量靈感參考。這樣的設(shè)計(jì)網(wǎng)站不計(jì)其數(shù)，我個(gè)人覺(jué)得用好幾個(gè)就足夠了，收藏的太多其實(shí)也看不過(guò)來(lái)，主要還是自己一些素材庫(kù)的積累。

我將設(shè)計(jì)網(wǎng)站分為三類(lèi)：

第一類(lèi)：可以上傳作品

作為視覺(jué)設(shè)計(jì)師，有空的時(shí)候整理整理作品并進(jìn)行分享無(wú)疑是一件好事！例如：

• Behance
• Dribbble
• 站酷
• UI中國(guó)

第二類(lèi)：用于整理素材庫(kù)

下面這兩個(gè)是有畫(huà)板功能的設(shè)計(jì)網(wǎng)站，可以對(duì)自己的素材行進(jìn)更好的分類(lèi)整理，使用花瓣進(jìn)行素材分類(lèi)是不錯(cuò)的選擇，而且花瓣可以批量采集，十分方便。

第三類(lèi)：僅僅用于分類(lèi)瀏覽

之前有推薦過(guò)這個(gè)網(wǎng)站，是按照UI各個(gè)類(lèi)別來(lái)進(jìn)行分類(lèi)的，比如你想看登錄注冊(cè)頁(yè)，直接找這個(gè)類(lèi)別，里面全是這個(gè)屬性的參考，碉堡了！

Collect UI

2. 圖標(biāo)

圖標(biāo)你可以分兩個(gè)層面來(lái)整理，一個(gè)層面是下載圖標(biāo)的網(wǎng)站、另外是制作圖標(biāo)的教程。

圖標(biāo)下載網(wǎng)站

iconfont

icomoon

iconfinder

Thenounproject

說(shuō)真的，后面這幾個(gè)網(wǎng)站上面圖標(biāo)質(zhì)量非常高，你可以找到很多靈感與啟發(fā)。

圖標(biāo)教程?

接下來(lái)就是收藏一些關(guān)于制作圖標(biāo)的教程與經(jīng)驗(yàn)，我簡(jiǎn)單推薦幾個(gè)。

學(xué)習(xí)圖標(biāo)設(shè)計(jì)的同學(xué)，建議先掌握設(shè)計(jì)流程：《聊聊圖標(biāo)設(shè)計(jì)流程及小技巧》

設(shè)計(jì)完成后從這四個(gè)方面來(lái)審視你的圖標(biāo)：《好圖標(biāo)怎么做？教你從四個(gè)方面來(lái)評(píng)價(jià)圖標(biāo)設(shè)計(jì)的質(zhì)量》

想讓圖標(biāo)出彩，可以從頂尖設(shè)計(jì)師的分享汲取經(jīng)驗(yàn)：《頂尖設(shè)計(jì)師分享的6個(gè)圖標(biāo)設(shè)計(jì)優(yōu)化指南》。

動(dòng)效圖標(biāo)已是趨勢(shì)，來(lái)這看基礎(chǔ)的圖標(biāo)動(dòng)效設(shè)計(jì)：《高手常用的六種圖標(biāo)動(dòng)效設(shè)計(jì)思路（附大量實(shí)例）》

還有我之前寫(xiě)的關(guān)于圖標(biāo)制作的注意事項(xiàng) ：《從零基礎(chǔ)到合格，我總結(jié)了這5個(gè)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)方法》

當(dāng)然你還可以收藏很多對(duì)你有價(jià)值有幫助的教程與資源，好的文章多看幾遍沒(méi)啥壞處。

3. 素材

好的素材可以讓我們快速高效完成設(shè)計(jì)作品，所以收藏好的素材網(wǎng)站也是十分重要的 部分推薦如下;

PSD 類(lèi)別

Freebiesbug

sketch類(lèi)別

SketchApp ?Sources

（需搭梯子，有很多漂亮的sketch設(shè)計(jì)稿源文件）

綜合素材類(lèi)別

千圖網(wǎng)、優(yōu)界網(wǎng)

4. 圖片

Unsplash

Pexels

Pixabay

5. 配色

關(guān)于配色，你需要收藏一些配色的基礎(chǔ)知識(shí)，配色的方案及配色的工具

基礎(chǔ)知識(shí)

1. 《看過(guò)那么多UI 配色指南，這篇可能是最全面的（附大量實(shí)例）》
2. 《騰訊好文！配色新人應(yīng)該學(xué)會(huì)的6個(gè)色彩知識(shí)點(diǎn)》
3. 《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》

配色方案

http://huaban.com

配色工具

Adobe kuler?

MD?

6. 規(guī)范

很多同學(xué)問(wèn)我規(guī)范到底該怎么做，總是摸不清頭緒，其實(shí)我們之所以會(huì)迷茫就是因?yàn)榭紤]的事情是一個(gè)面（整套規(guī)范），而不是一個(gè)點(diǎn)（具體的某個(gè)控件規(guī)范），大家知道一套app的視覺(jué)規(guī)范里面有多少內(nèi)容嗎？ 這幾天我們團(tuán)隊(duì)也在做規(guī)范，僅僅整理一個(gè)按鈕的規(guī)范，如果你想吃透，都至少要做一個(gè)星期，所以你現(xiàn)在需要做的是將這個(gè)“面”拆解成多個(gè)“點(diǎn)”，然后去突破每一個(gè)“點(diǎn)”，雖然每個(gè)“點(diǎn)”也不是那么容易攻破的，但至少你的方向會(huì)清晰很多。 下面推薦幾個(gè)收藏：

最新Android&iOS設(shè)計(jì)尺寸規(guī)范：http://www.shejidaren.com

微博設(shè)計(jì)規(guī)范：http://open.weibo.com

設(shè)計(jì)規(guī)范大全：http://huaban.com

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com