在《用戶體驗的要素》一本書中，Jesse James Garrett 將用戶體驗分為了五個層級，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。
其中在框架層里面有一個很重要的概念就是導(dǎo)航設(shè)計，作者對導(dǎo)航設(shè)計的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。
我覺得可以把導(dǎo)航設(shè)計理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對信息架構(gòu)的一個梳理，來幫助用戶完成目標(biāo)。
通過自己手機里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計模式，包括：標(biāo)簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……
簡單介紹了它們的優(yōu)缺點，適用場景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過導(dǎo)航設(shè)計一定是視產(chǎn)品和情況而定的，并沒有確定的依據(jù)與理論）
標(biāo)簽導(dǎo)航分很多種，有底部標(biāo)簽導(dǎo)航，頂部標(biāo)簽導(dǎo)航，底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動態(tài)導(dǎo)航……
底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁面最底部，一般3-5個 tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負(fù)擔(dān)吧，如下：
而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點，缺點以及適用場景也簡單整理了：
我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會將底部標(biāo)簽導(dǎo)航進(jìn)行變體，很多人把它稱為舵式導(dǎo)航，就像這種：
中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個功能，一般都會重點突出。并且，該標(biāo)簽中很多時候會有二級導(dǎo)航，二級導(dǎo)航里可擴展性就比較強，如圖：
而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因為 Google Pixel 手機底部存在物理導(dǎo)航，所以將標(biāo)簽導(dǎo)航置于頂部不會顯得突兀。它很少用作一級導(dǎo)航，一般是二級導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航，幾乎都是純文字的形式，比如：
突然想到今天交互設(shè)計課上的時候，老師講的人機交互里，重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。
而頂部標(biāo)簽導(dǎo)航，如果是點擊標(biāo)簽進(jìn)行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動屏幕的交互來切換。
而當(dāng)標(biāo)簽類目過多的時候，可以通過左滑展現(xiàn)更多標(biāo)簽，比如很多新聞閱讀類的 app：
如果是可以滑動查看更多的話，一定要通過一些方式告訴用戶可以滑動查看更多，比如最后一個標(biāo)簽隱藏一半的方式等：
關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點以及適用場景，如下：
宮格導(dǎo)航，也是十分常見的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，并且以 icon+文字的形式居多。
如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過垂直滑動來切換，比如：
那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會采用分類展示的形式，并且通過水平滑動的方式來切換，比如：
但是上面兩種可以垂直或者水平滑動的形式，一定要讓用戶知道是可以水平或者垂直滑動的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動……
除此之外，宮格導(dǎo)航還可以在電商里面運用，在首頁的運營內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：
關(guān)于宮格導(dǎo)航的優(yōu)缺點和適用場景，如下：
有些書里面會把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會在首頁呈現(xiàn)一個主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：
而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點以及適用場景，如下：
列表導(dǎo)航也是十分常見，幾乎在每一個 app 里面都會存在，大部分時候是作為二級導(dǎo)航存在，但是也會存在于一級導(dǎo)航的時候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。
一般在列表導(dǎo)航里都會有下一個層級，可以通過箭頭來告訴用戶是否有下級菜單。
當(dāng)列表信息比較多的時候，可以對列表進(jìn)行分類，可以添加小標(biāo)題或者直接分隔開。比如：
而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個人信息里的一些基本數(shù)據(jù)展示，如下：
關(guān)于列表導(dǎo)航的優(yōu)缺點以及適用場景，如下：
其實菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計課的時候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。
Menu 是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發(fā)。
比如：
當(dāng)信息層級變多的時候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點評采取的形式：
關(guān)于菜單導(dǎo)航的優(yōu)缺點以及適用場景，如下：
還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗，高度簡潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因為輪播點的大小不會很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。
其實導(dǎo)航的類型應(yīng)該還有很多，并且在一個 app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個頁面，也會存在多種導(dǎo)航的組合形式，比如：
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
1：mutations觸發(fā)狀態(tài) （同步狀態(tài)）
2：getters計算屬性
getter不能使用箭頭函數(shù)，會改變this的指向
在store.js添加getters
//count的參數(shù)就是上面定義的state對象
3：actions (異步狀態(tài))
在store.js添加actions
在組件中使用
4：modules 模塊
適用于非常大的項目，且狀態(tài)很多的情況下使用，便于管理
修改store.js
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 //方法三 computed: mapState([ 'count' ]),
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
// 計算 const getters = {
count(state){ return state.count + 66 }
} export default new Vuex.Store({
state,
mutations,
getters
})
//getters中定義的方法名稱和組件中使用的時候一定是一致的,定義的是count方法，使用的時候也用count，保持一致。
組件中使用
<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義常量 const state = { count: 1 } // mutations用來改變store狀態(tài) 同步狀態(tài) const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} // 計算屬性 const getters = {
count(state){ return state.count + 66 }
} // 異步狀態(tài) const actions = {
jiaplus(context){
context.commit('jia') //調(diào)用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
state,
mutations,
getters,
actions
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{ // 這里是數(shù)組的方式觸發(fā)方法 ...mapMutations([ 'jia', 'jian' ]), // 換一中方式觸發(fā)方法 用對象的方式 ...mapActions({
jiaplus: 'jiaplus',
jianplus: 'jianplus' })
}
} </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} const getters = {
count(state){ return state.count + 66 }
} const actions = {
jiaplus(context){
context.commit('jia') //調(diào)用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
}
//module使用模塊組的方式 moduleA const moduleA = { state, mutations, getters, actions }
// 模塊B moduleB const moduleB = { state: { count:108
}
} export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
描邊插畫：可以簡單理解為眾多線面結(jié)合圖標(biāo)組合在一起，互相呼應(yīng)而組成一個大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。
本文內(nèi)容：文章會詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會針對一些易犯錯誤的地方添加重點標(biāo)記。
一點建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方，歡迎在我的公眾號中添加微信并附帶插畫，可給予建議。
這次插畫的主題源自于我的一個夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。
確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數(shù)位板在 ps 里面畫，按照個人習(xí)慣就好。我比較喜歡手繪，因此在紙上畫。
新建畫布1600*1200
視圖-勾選對齊點
在描邊插畫中，常見的問題之一就是描邊的粗細(xì)問題. 以及描邊間關(guān)系的處理問題。
描邊粗細(xì)問題（下圖以之前的四季插畫為例子）
描邊間關(guān)系處理
描邊設(shè)置
描邊的粗細(xì)是根據(jù)畫布大小而決定的，1600*1200的畫布，我習(xí)慣用 8pt 的粗細(xì)的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細(xì)可以根據(jù)情況而調(diào)整。
布爾運算法
形狀斷點重連法
形狀生成器
鋼筆勾勒法
鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調(diào)整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。
最近看到 kit8 大神的畫，突然想到如果白線運用在線性插畫會怎樣，就嘗試了這種風(fēng)格。把線稿復(fù)制一層置于頂上，改成白色，2px 粗細(xì)的線，然后向旁邊移動錯位，破一下畫面沉悶的感覺。
看到這里，你應(yīng)該也發(fā)現(xiàn)了，畫面是比較灰的，因為我都是選擇低飽和度的顏色，如果需要調(diào)整，就在 AI 中把插畫導(dǎo)出 SVG 格式。然后拖到 PS 里面進(jìn)行色相飽和度的調(diào)整。
在顏色調(diào)整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。
我們都知道一個版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區(qū)域，也是我們頁面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁面的版心。
知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點講就是版面的利用率。
上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。
版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時版心即整個版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關(guān)系。
說完版面率的概念我們再來說一說版面率對畫面氣質(zhì)的影響。
一般來說版面率越高，視覺張力就越大，版面也會更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會更有格調(diào)。
上圖中高版面率的海報相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。
畫冊中也是一樣的，上圖是我早些年做的一個案例。同樣的內(nèi)容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。
版面率的高低能夠影響版面的氣質(zhì)，所以我們實際工作中也要根據(jù)項目的氣質(zhì)分配合適的版面率。比方說典雅氣質(zhì)的項目我們就要用低版面率版面，如果用高版面率顯然是與項目本身的氣質(zhì)相悖的。
說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負(fù)空間。
頁面中去除內(nèi)容后的空間就是負(fù)空間，如下面這個頁面。
圖中灰色塊代表圖和文字信息等內(nèi)容，除去這些圖片和文字后，頁面中的其他空間都可以看作是負(fù)空間，也就是留白。當(dāng)然，留白并不一定是白色，所有除去頁面內(nèi)容后的空間都是負(fù)空間，如上圖右側(cè)案例，黑色部分即此頁面的留白。
負(fù)空間的多少即是留白的多少。留白的多少我們可以用留白率來表示，如上圖，負(fù)空間小的留白肯定少，留白率就低。負(fù)空間大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，實際上與版面率的概念差不多，如下。
空版留白最多，滿版留白最少。當(dāng)然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當(dāng)作留白來看待。
上面說來留白率跟版面率也有一定的關(guān)聯(lián)，所以他們對畫面氣質(zhì)的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。
通過這幾個作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強。而留白多的更雅致，更安靜典雅，更有格調(diào)跟品質(zhì)感，但親和力稍弱。
下面進(jìn)行案例演示吧，首先看一看文案。
這一步我們需要把文案的層級關(guān)系拉開，大中小區(qū)分的明顯一點。這個文案的層級關(guān)系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。
首先我們做一個有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？
首先版面率要大，其次留白要小，讓版面中的信息緊湊一點。
上圖就是對版面的布局，可以看到圖片是出血版的，沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。
布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。
上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低，如下。
做完了留白少版面率高的，我們再來做一個典雅一點的。
根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？
一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們在版面安排上要使其留白更多，同時版面率要小一點。下圖就是一個基本布局。
最后我們再根據(jù)版面布局置入圖片微調(diào)一下就可以了，如下。
版面率跟留白率都能夠影響版面的氣質(zhì)，我們做項目的時候具體問題具體分析，根據(jù)項目氣質(zhì)去設(shè)定版面率跟留白率的大小。
大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點。
主要講解的是平面設(shè)計基礎(chǔ)理論知識與實際用法，后期會講一些高階的設(shè)計思維。
本章節(jié)適合設(shè)計小白和需要填補設(shè)計基礎(chǔ)的設(shè)計師學(xué)習(xí)閱讀。
目錄
1、理解、提取與布置
2、貼近與遠(yuǎn)離
3、排列與對齊
4、視線移動方向
5、組織與重復(fù)
1、理解、提取與布置
理解、提取與布置指的是根據(jù)設(shè)計的意圖來進(jìn)行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來，最后再根據(jù)排列好的信息按個人美感和美學(xué)理念擺放到平面中。
1.1 理解部分
當(dāng)收到一個海報設(shè)計需求時，我們不是要馬上動手去做，而是要去思考需要設(shè)計的海報受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 
下面我就簡單介紹一下設(shè)計思維及方法，首先要設(shè)置定一個需求【現(xiàn)代美術(shù)館，需要設(shè)計一個簡潔大方的海報】。根據(jù)這個需求在進(jìn)行具體的思維延伸。
1.1.1 海報的受眾群體
當(dāng)我們收到設(shè)計需求時，要考慮海報的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經(jīng)歷均不同，要根據(jù)不同的受眾做合適的設(shè)計。當(dāng)我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風(fēng)格來展示海報了。
對于現(xiàn)代美術(shù)館需要一個簡潔大方的海報，這個需求所涵蓋的年齡區(qū)間比較大，基本上所有人都可以參觀美術(shù)館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。
意思就是不要加入柔美的線條（除非展品的構(gòu)成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現(xiàn)形式，用最容易讓人理解的表象形式來處理就可以了。
1.1.2 怎么展示海報
現(xiàn)代美術(shù)館，需要設(shè)計一個簡潔大方的海報這個需求，可以根據(jù)主關(guān)鍵詞“現(xiàn)代”和“美術(shù)館”，次關(guān)鍵字“簡潔”和“大方”來推斷要采用哪種設(shè)計語言?！艾F(xiàn)代”的表現(xiàn)形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術(shù)館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。
簡潔大方的設(shè)計需求可以采用直線（字有時也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時也要注意禁止添加太多顏色（如撞色）。
1.1.3 運用理解部分生成原型
根據(jù)前面的分析大概有了個原型，分為上下構(gòu)圖。上部分是美術(shù)館的部分場景圖片，下部分是具體的內(nèi)容信息部分。所有要素均以現(xiàn)代感、簡潔干練、配色不復(fù)雜、線性、整潔、清爽、專業(yè)、無太多情緒為基礎(chǔ)進(jìn)行設(shè)計的。
以上就是“信息的整理”中的“理解部分”，當(dāng)設(shè)計師收到需求時，不要馬上著手去做。先思考采用哪種表現(xiàn)形式（視覺語言）更適合需求，分析后再去做設(shè)計，這樣才能準(zhǔn)確表達(dá)具體的需求，也能做出更符合需求的設(shè)計。
1.2 提取部分
提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來。我們只需要根據(jù)優(yōu)先級進(jìn)行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來再排列優(yōu)先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個過程就叫“提取信息部分”。
1.3 布置部分
把提取并排列好優(yōu)先級的信息規(guī)整好，就可以布置在平面上了。用之前設(shè)計好的原型套用已提取好的信息就可以了。特別要注意重要的內(nèi)容放大，不重要的內(nèi)容弱化。
* 要點
理解：首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。
提?。浩浯我鞔_作品內(nèi)容中什么是最重要的、根據(jù)優(yōu)先級排序。
布置：最后把排列好的信息加以布置，重要的內(nèi)容放大，不重要的內(nèi)容弱化。
2、貼近與遠(yuǎn)離
貼近和遠(yuǎn)離的概念也是比較好理解的。與格式塔視知覺的親密性與遠(yuǎn)離性是一個道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會講。
2.1 貼近和遠(yuǎn)離的 基礎(chǔ)概念
貼近是指同類要素擺放在一起會呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則，而遠(yuǎn)離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規(guī)則。
當(dāng)把同類要素（男人女人）放到一起，會覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會覺得他們毫無關(guān)系。
我們把這種概念應(yīng)用在平面設(shè)計上，如下圖所示。
相同的要素擺放在一起會有一定的共同性，相反分開擺放則看上去沒有關(guān)聯(lián)。
貼近與遠(yuǎn)離基礎(chǔ)概念的實際案例
2.2 貼近和遠(yuǎn)離的 進(jìn)階概念
把同類要素放到一起有種井然有序的感覺。如果要處理較為規(guī)整傳統(tǒng)的版式時，可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開擺放，會感到?jīng)]有共通性和規(guī)律規(guī)則，但是能為平面增加節(jié)奏感和沖擊力。
貼近與遠(yuǎn)離進(jìn)階概念的實際案例
其次遠(yuǎn)離能使平面產(chǎn)生留白，通過留白也能使平面具有關(guān)聯(lián)性。
雖然說遠(yuǎn)離能使要素看上去沒有共同性和規(guī)則，但如果要素處在一個平面中，利用留白呈現(xiàn)出一種關(guān)聯(lián)性。這就像吵架的夫妻一樣，同在一個床上，女的偏床左側(cè)，男的偏床右側(cè)，呈現(xiàn)一種遠(yuǎn)離性。但他倆還是處在“床”這個平面中，也會呈現(xiàn)一種關(guān)聯(lián)性。
貼近與遠(yuǎn)離進(jìn)階概念的實際案例
* 要點
同類要素貼近擺放在一起相互關(guān)聯(lián)，同類要素遠(yuǎn)離擺放相互排斥。
同類要素貼近擺放在一起平面有規(guī)則，同類要素遠(yuǎn)離擺放增添節(jié)奏。
留白也能使要素有一定的關(guān)聯(lián)性。
3、排列與對齊
排列與對齊的概念比較簡單，也很容易理解。轉(zhuǎn)化一下思維，把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
3.1 排列
排列是指將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。道理與收拾屋子一樣，雜亂無章的屋子會讓人感到不舒服且很壓抑。整理的井然有序的屋子會讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”，用規(guī)則的方法來排列就叫“布置”。
排列的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會呈現(xiàn)出一種舒適感，好比自然中的和諧。
3.2 對齊
對齊也可以理解為將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎(chǔ)上進(jìn)行操作的。先將要素按照一定規(guī)則進(jìn)行排列，然后再將要素進(jìn)行對齊。排列是畫一個大體的框架，而對齊是做框架里的精細(xì)操作。
排列與對齊的實際案例
* 要點
排列與對齊的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會呈現(xiàn)出一種舒適感。
把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
4、視線移動方向
設(shè)計書籍或排版布局時，要考慮通過設(shè)計讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動的，所以在設(shè)計時要考慮到這一基本原則。閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
視線的移動方向分為三個知識點，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。
隨便補充一下啊，我讀過的設(shè)計文獻(xiàn)中提到的閱讀方法只有“Z字視線移動方向”，而沒有“T字視線移動方向”。有一種學(xué)習(xí)方法叫“T型閱讀法”，與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點。
4.1 橫排閱讀
橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的，大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時視線是從上至下【由左至右】依次閱讀的，如圖所示。
懂得了橫向排列的方式來閱讀文章會有什么用呢？由于人們的閱讀習(xí)慣，一般情況下閱讀讀物，都會遵循從左到右閱讀文章的方式，這也就間接影響了文章內(nèi)容的重要性。采用橫向排列的方式進(jìn)行排版布局，重要的內(nèi)容要放在最左面，也就是最方便引導(dǎo)人們視線方向的地方。
如果不把重要的內(nèi)容放在視線方向的地方，讀者不僅閱讀作品時會感到很吃力（可讀性），而且會不理解作品是什么含義，視線也隨之錯亂，作品也會失去原本的含義。
橫排閱讀的實際案例
4.2 豎排閱讀
橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時視線是從上至下【由右至左】依次閱讀的，如圖所示。
一定要注意，豎向排列方式內(nèi)容區(qū)在平面的最右面，與橫向排列方式不同。這個規(guī)定就像地球為什么是圓的的道理一樣。
豎排閱讀的實際案例
* 要點
閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
不要打破規(guī)則，一切以引導(dǎo)讀者視線為主。
5、組織與重復(fù)
按照一定規(guī)則構(gòu)成布局來編排要素，能使種類繁多的要素顯得整潔有序。
5.1 組織
沒有共通性的雜亂圖形匯聚一起會造成視線混亂，讀者注意力會被分散，也會降低理解力。將圖形用框圈起來，按照等距進(jìn)行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
組織規(guī)則的實際案例
5.2 重復(fù)
這里的重復(fù)不是指復(fù)制粘貼，而是元素上的重復(fù)構(gòu)成。例如重復(fù)相同的格式，風(fēng)格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風(fēng)格統(tǒng)一的要素做修飾，讓排版符合流水式，視線清晰自然。
重復(fù)規(guī)則也可以應(yīng)用在平面中、元素中、要素中、形狀中等，靈活運用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
重復(fù)規(guī)則的實際案例
* 要點
將圖形用框圈起來，按照等距進(jìn)行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
靈活運用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
去年谷歌和火狐針對WebVR提出了WebVR API的標(biāo)準(zhǔn)，顧名思義，WebVR即web + VR的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的API標(biāo)準(zhǔn)讓我們可以使用js語言來開發(fā)。今天，約克先森將介紹如何開發(fā)一個WebVR網(wǎng)頁，在此之前，我們有必要了解WebVR的體驗方式。
WebVR體驗?zāi)Ｊ?/strong>
WebVR的體驗方式可以分為VR模式和裸眼模式
一、VR模式
?滑配式HMD + 移動端瀏覽器
如使用cardboard眼鏡來體驗手機瀏覽器的webVR網(wǎng)頁，瀏覽器將根據(jù)水平陀螺儀的參數(shù)來獲取用戶的頭部傾斜和轉(zhuǎn)動的朝向，并告知頁面需要渲染哪一個朝向的場景。
?分離式HMD + PC端瀏覽器
通過佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機端的網(wǎng)頁，現(xiàn)支持WebVR API的瀏覽器主要是火狐的 Firefox Nightly和設(shè)置VR enabled的谷歌chrome beta。
二、裸眼模式
除了VR模式下的體驗方式，這里還考慮了裸眼下的體驗瀏覽網(wǎng)頁的方式，在PC端如果探測的用戶選擇進(jìn)入VR模式，應(yīng)讓用戶可以使用鼠標(biāo)拖拽場景，而在智能手機上則應(yīng)讓用戶可以使用touchmove或旋轉(zhuǎn)傾斜手機的方式來改變場景視角。
WebVR的概念大概就如此，這次我們將采用cardboard + mobile的方式來測試我們的WebVR場景，現(xiàn)在踏上我們的開發(fā)之旅。
準(zhǔn)備工作
技術(shù)和框架：three.js for WebGL
Three.js是構(gòu)建3d場景的框架，它封裝了WebGL函數(shù)，簡化了創(chuàng)建場景的代碼成本，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場景和三維動畫。
測試工具：智能手機 + 滑配式頭顯
推薦使用cardboard或者某寶上三十塊錢的高仿貨。當(dāng)然，如果你練就了裸眼就能將手機雙屏畫面看成單屏的能力也可以忽略。
需要引入的js插件：
webvr-polyfill.js
由于WebVR API還沒被各大主流瀏覽器支持，因此需要引入webvr-polyfill.js來支持WebVR網(wǎng)頁，它提供了大量VR相關(guān)的API，比如Navigator.getVRDevices()獲取VR頭顯信息的方法。
VRControls.js
VR控制器，是three.js的一個相機控制器對象，引入VRcontrols.js可以根據(jù)用戶在空間的朝向渲染場景，它通過調(diào)用WebVR API的orientation值控制camera的rotation屬性。
VREffect.js
VR分屏器，這是three.js的一個場景分屏的渲染器，提供戴上VR頭顯的顯示方式，VREffect.js重新創(chuàng)建了左右兩個相機，對場景做二次渲染，產(chǎn)生雙屏效果。
webvr-manager.js
這是WebVR的方案適配插件，它提供PC端和移動端的兩種適配方式，通過new WebVRManager()可以生成一個VR圖標(biāo)，提供VR模式和裸眼模式的不同體驗，當(dāng)用戶在移動端點擊按鈕進(jìn)入VR模式時，WebVRManager便會調(diào)用VREffect分屏器進(jìn)行分屏，而退出VR模式時，WebVRManager便用回renderer渲染器進(jìn)行單屏渲染。
具體使用方法我們將在下文說明。
3D場景構(gòu)建
首先我們創(chuàng)建一個HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<title>webVR-helloworld</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
</body>
<script src="./vendor/three.min.js"></script>
<script src="./vendor/webvr-polyfill.js"></script>
<script src="./vendor/VRControls.js"></script>
<script src="./vendor/VREffect.js"></script>
<script src="./vendor/webvr-manager.js"></script>
<script src="./main.js"></script>
</html>
接下來編寫js腳本，開始創(chuàng)建我們的3d場景。
1、創(chuàng)建場景
Three.js中的scene場景是繪制我們3d對象的整個容
1.var scene = new THREE.Scene();
2、添加相機
Three.js的相機
Three.js中的camera相機代表用戶的眼睛，我們通過設(shè)置FOV確定視野范圍，
3、添加渲染器
Three.js的渲染器用來渲染camera所看到的畫面
4、啟動動畫
產(chǎn)生動畫的原理就是讓camera持續(xù)連拍，同時每一次改變物體的屬性，通過requestAnimationFrame()方法遞歸的方式來持續(xù)更新場景對象屬性，你可以將它理解為setTimeout的優(yōu)化版。相比setTimeout函數(shù)，requestAnimationFrame可以保證動畫渲染不會因為主線程的阻塞而造成跳幀。
至此，我們已經(jīng)繪制了一個簡單的3d場景并且讓它動了起來，接下來，我們需要讓我們的場景可以支持WebVR模式。
WebVR場景開發(fā)
WebVR網(wǎng)頁的基本原理其實是通過瀏覽器的WebVR API獲取用戶輸入，進(jìn)而控制相機的視角，在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面，裸眼情況下提供全屏+touchmove/gyroscope。
現(xiàn)在我們開始分別創(chuàng)建上文所說的VR控制器和VR分屏器
然后在前面創(chuàng)建的場景渲染函數(shù)里調(diào)用
至此，我們已經(jīng)完成了一個基本的webVR網(wǎng)頁，不過少了點交互效果好像，敬請期待Web開發(fā)的新世界---WebVR之交互事件。
結(jié)語
目前，國外的谷歌、火狐、Facebook和國內(nèi)百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網(wǎng)絡(luò)極速時代的到來以及HMD頭顯的價格和平臺的成熟，WebVR的體驗方式將是革命性的，用戶通過WebVR瀏覽網(wǎng)上商店，線上教學(xué)可進(jìn)行“面對面”師生交流等，基于這種種應(yīng)用場景，我們可以找到一個更好的動力去學(xué)習(xí)WebVR。
設(shè)計工作中，你是否經(jīng)常覺得留給設(shè)計的時間不夠用？為什么會這樣？如何解決？Let’s go～
01 問題背景
設(shè)計工作中，你是否經(jīng)常覺得留給設(shè)計的時間不夠用？是否經(jīng)常遇到這樣的問題：
場景1：總感覺自己的設(shè)計差了點什么，導(dǎo)致設(shè)計上反復(fù)嘗試。終于在交稿最后一天感覺ok了，興致勃勃的拿去交工，然后得到這樣的反饋——“這個不行，這不是我想要的”。
場景2：“多久能設(shè)計完？盡快？盡快是多久”“這個需求簡單，隨便搞搞就行了！” “要設(shè)計5天？啊呀～不用那么精致，差不多就行了！”
02 為什么會這樣？
類似的事情在設(shè)計行業(yè)已經(jīng)變成了大家都懂的梗，但是為什么會這樣？
一.設(shè)計師自身原因?qū)е?/strong>
1.設(shè)計缺乏說服力導(dǎo)致無節(jié)操改稿
A.是不是設(shè)計目的不明確？
設(shè)計本身是一種解決問題的系統(tǒng)性方法，并不是一個結(jié)果，不能為了設(shè)計而設(shè)計。沒有目的性的設(shè)計會導(dǎo)致大方向出錯，就好比一把狙擊槍打錯了目標(biāo)，即使威力再大也是徒勞。
B.是不是設(shè)計思路不正確?
很多設(shè)計師在接到需求的第一時間打開ps或其他軟件直接開始試錯，缺乏目的的設(shè)計很容易在中途發(fā)現(xiàn)錯誤或更好的方法，要么推翻重改，要么將就的給上游看。當(dāng)然，結(jié)果肯定不會很理想。
C.是不是細(xì)節(jié)經(jīng)不起推敲?
細(xì)節(jié)缺乏考慮的設(shè)計，無法闡述每一處設(shè)計的目的。當(dāng)其他人提出疑問的時候，要么不能應(yīng)對，要么強行應(yīng)對，兩種一定都很負(fù)面。
2.設(shè)計師估時不精準(zhǔn)導(dǎo)致時間不夠用
A.是不是估時不夠合理？
不能精準(zhǔn)評估設(shè)計時間，導(dǎo)致估算的時間過短或過長，設(shè)計師看到界面數(shù)量直接估時。不了解需求目的以及缺少設(shè)計難點的考慮，導(dǎo)致自己不能在估的時間內(nèi)按時完成
B.是不是估時不夠精細(xì)？
需求模塊估時不精細(xì)，導(dǎo)致評估的時間不可信，對于其他崗位來說，大多不了解設(shè)計過程以及設(shè)計難點在哪，不能清晰闡述其難點在哪很容易被領(lǐng)導(dǎo)壓時間或貼上負(fù)面標(biāo)簽。
二.外界原因包括哪些
1.當(dāng)然也有不是設(shè)計師本身導(dǎo)致，比如需求方向反復(fù)變更。導(dǎo)致設(shè)計方案的不斷更改
2.需求方出方案時間過長導(dǎo)致下游全部時間不夠
3.需求方?jīng)]能全局把控時間，沒全面考慮其時間周期
所以，一套有說服力的設(shè)計以及精準(zhǔn)的設(shè)計時間評估是設(shè)計師提升自身效率的核心，而能夠發(fā)現(xiàn)項目效率問題所在是團隊提升整體效率的核心。
03 怎么辦？
那么如何讓你的設(shè)計更有說服力和精準(zhǔn)的制定你的設(shè)計時間？以及外界原因如何應(yīng)對呢？
一.讓你的設(shè)計更有說服力
A.明確設(shè)計目的
核心為提前溝通，提前了解需求。分別包括：
1.需求目的
需求目的并不是說需求方想做什么，而是做這個需求的目的是為了解決什么問題
2.數(shù)據(jù)
是否有數(shù)據(jù)支撐，證實問題的客觀存在，盡量避免出現(xiàn)偽需求
3.是否對已有的場景造成不良影響
系統(tǒng)性考慮，避免單獨需求的產(chǎn)出對系統(tǒng)級的設(shè)計造成影響，導(dǎo)致體驗不統(tǒng)一或開發(fā)難度大以及各種后期改稿問題
4.用戶與場景
需求用戶是誰，在什么場景下用，避免設(shè)計方向出錯
5.明確需求期望和時間期望
需求方是否有對設(shè)計的期望形式（包含動效期望，插畫期望）以及期望時間是多少
B.清晰設(shè)計思路
1圍繞戰(zhàn)略目的，目標(biāo)人群以及使用場景考慮
2通過其三個維度提取與篩選關(guān)鍵詞
3圍繞關(guān)鍵詞確認(rèn)設(shè)計調(diào)性
4圍繞設(shè)計調(diào)性結(jié)合具體場景思考與執(zhí)行
5具體細(xì)節(jié)打磨，基于設(shè)計調(diào)性以及場景考慮上提升品質(zhì)感與好感度
C.讓細(xì)節(jié)經(jīng)得起推敲
1.細(xì)節(jié)的客觀性
每一處的設(shè)計元素需有他的作用性，盡量避免可有可無的設(shè)計元素
2.細(xì)節(jié)服務(wù)于整體
每處細(xì)節(jié)的目的都應(yīng)服務(wù)于整體，避免對整體有負(fù)面影響的細(xì)節(jié)設(shè)計
以上可以總結(jié)為
1明確的設(shè)計目的能夠讓你的設(shè)計和需求建立極強的契合，推翻設(shè)計就等于推翻需求
2清晰的設(shè)計思路能夠讓你的設(shè)計環(huán)環(huán)緊扣
3經(jīng)得起推敲的細(xì)節(jié)能夠讓你的設(shè)計細(xì)化到每個元素都缺一不可
一套這樣的設(shè)計方案就好像一桿槍槍命中要害的“狙擊槍”，還有什么擊不碎的目標(biāo)呢？
二.如何合理的評估設(shè)計時間
A.方法時間評估
如果建立在詳細(xì)評估了需求上來說，設(shè)計師已經(jīng)能了解需求包含了什么內(nèi)容，也一定有某處在設(shè)計上很難處理的模塊，如“用戶難理解的功能如何表達(dá)清晰、難適配的功能應(yīng)該采用怎樣的展示方法、狀態(tài)太多的情況如何處理、信息過載的模塊等等等”。分別評估其設(shè)計時間。
B.執(zhí)行時間評估
如界面存在大量圖標(biāo)或需要大量圖標(biāo)、大量插畫、動效等需要執(zhí)行時間長的需求，需增加執(zhí)行時間
三.如何盡量避免外界因素？
A.提前溝通
盡可能分析需求目的的正確性以及可能遇到的問題盡早提出
B.明確職位責(zé)任
設(shè)計師沒有辦法把公司的活都干了，該是誰的鍋就該誰來背
C.如何讓其他人理解設(shè)計時間
分別闡述這套設(shè)計的時間分別耗在哪，各模塊各需要多久。的時間更有說服力
D.需不需要精細(xì)化設(shè)計到底應(yīng)該由誰決定
當(dāng)然，理論上每處設(shè)計都應(yīng)該精細(xì)化，但是由于精細(xì)化是一個永無止境的事，結(jié)合項目本身考慮，需理性一些。需不需要精細(xì)化應(yīng)該是由場景的重要程度、上線時間決定。不應(yīng)由各職位一方?jīng)Q定。一個重要的場景可能讓用戶形成對產(chǎn)品品牌認(rèn)識的第一印象，當(dāng)用戶對產(chǎn)品有了負(fù)面的印象，后期改善這個的成本會變的無窮大。作為設(shè)計師，需要嚴(yán)格把控方案的落地以及評估其體驗的風(fēng)險
04 結(jié)語
一個合理的設(shè)計過程可以減少不必要的時間浪費，一個合理的時間評估能夠保證設(shè)計工作的正常進(jìn)行。也希望每個設(shè)計師都有一個更美好的工作環(huán)境。
以上為本人的一些看法，也歡迎不同看法的伙伴相互交流，共同進(jìn)步
客戶（老板／領(lǐng)導(dǎo)）拿到軟件的第一個意見，幾乎都是關(guān)于UI的。有時得到的評價也挺簡潔明了的，一個字“矬”。
于是惶惶不安的開發(fā)小弟經(jīng)常想到的第一個解決方案：去問設(shè)計大神（美眉）要一幅詳細(xì)的標(biāo)注圖。結(jié)果他得到這么一幅標(biāo)注圖：
我們平時做設(shè)計的時候，都會遇到挑選素材這個難題。
做UI的同學(xué)，會瀏覽動效網(wǎng)站尋找靈感又或者去挑選適合的圖標(biāo)；做平面的同學(xué)，特別是電商廣告的同學(xué)，就會下載電商banner，還有高質(zhì)量的圖片；另外還有絕大部分的人都會在做報告的時候，下載漂亮的PPT和Word模版。如果剛好那時候你在找工作，還需要找精美的簡歷模版……
但這些素材到底在什么地方找呢，又在什么地方找到高質(zhì)量又免費好用的素材呢？
這次，我早已為大家準(zhǔn)備好。下面是我花費大量時間精力整理而成的素材網(wǎng)站，全部都是親身試用后的精選出來的。希望能幫大家在找素材這條路上節(jié)省更多的時間，找到更適合自己的那些素材。
懶人福利
如果你覺得這些網(wǎng)站下載太麻煩
可以直接翻到文末
專門為大家整理好的
1000G高質(zhì)量精選設(shè)計素材
免費送！
機會就一次，錯過可以不用等下年了
因為活動就這一次
常用素材
一、免費可商用圖片
1、https://pixabay.com
全網(wǎng)共一百多萬張免費圖片素材，且質(zhì)量非常高，種類繁多，適合每一個行業(yè)使用。
優(yōu)點：種類很多，質(zhì)量高
缺點：下載需注冊，加載慢
推薦指數(shù)：★★★★★ 4.5
2、https://unsplash.com
全世界的優(yōu)秀圖片網(wǎng)站，所以圖片風(fēng)格很豐富，而且大部分質(zhì)量都很高，分分種可以用來做壁紙！
優(yōu)點：質(zhì)量高且優(yōu)秀，數(shù)量多，風(fēng)格獨特
缺點：加載慢
推薦指數(shù)：★★★★ 4
3、https://www.pexels.com
每日會更新100張高質(zhì)量的照片在首頁展示，無論風(fēng)光還是人物，這里應(yīng)有盡有。
優(yōu)點：種類多，每日更新，不需注冊
缺點：加載慢
推薦指數(shù)：★★★★ 4
4、http://foter.com
網(wǎng)站開始會將素材分為商業(yè)、動物和風(fēng)景三大類，如果你需要尋找其他圖片，可以直接在搜索欄直接搜索關(guān)鍵詞。
這里的圖片給我的感覺就是有趣，獨特，有很多圖片都很適合做海報。
優(yōu)點：分類明確，質(zhì)量很高
缺點：加載超慢，種類不多
推薦指數(shù)：★★★★ 4
5、https://burst.shopify.com
網(wǎng)站最大好處在于幫你分成非常多的類別，盡管數(shù)量比不上其他網(wǎng)站那么多，但這里的圖片風(fēng)格都很統(tǒng)一，很有質(zhì)量，感覺看上去就很年輕化。
優(yōu)點：風(fēng)格獨特，質(zhì)量高，分類明確
缺點：數(shù)量不多
推薦指數(shù)：★★★★ 4
6、https://negativespace.co
7、http://superfamous.com
8、http://librestock.com
9、http://www.sozai-page.com（日本食物類網(wǎng)站）
10、https://www.foodiesfeed.com（美食）
11、https://www.sitebuilderreport.com（一次性搜索31多家免費可商用圖片的網(wǎng)站）
二、字體
1、https://fontsup.com
提供大量免費的英文字體，質(zhì)量很高，也很有特色，每個字體還有一個詳情頁，非常用心
優(yōu)點：種類多，質(zhì)量高，免費下載
缺點：加載稍慢，廣告有點多
推薦指數(shù)：★★★★ 4.5
2、http://www.myfonts.com
網(wǎng)站提供的商業(yè)字體，質(zhì)量很高很漂亮，數(shù)量也很多。
優(yōu)點：種類多，質(zhì)量高
缺點：付費
推薦指數(shù)：★★★★ 4
3、http://comicneue.com
免費手寫可愛字體下載
優(yōu)點：質(zhì)量高，字體可愛
缺點：數(shù)量較少，下載稍麻煩
推薦指數(shù)：★★★★ 3.5
4、http://www.zhaozi.cn
找字網(wǎng)，種類豐富，基本上可以找到市面上的所有字體。
優(yōu)點：種類很多，方便查閱
缺點：使用時注意商用版權(quán)，僅中文字體
推薦指數(shù)：★★★★ 4
5、http://www.17ziti.com
綜合性字體下載網(wǎng)站，里面包括英文字體、中文字體，甚至是手機字體。數(shù)量很多，唯一不足就是沒有注明版權(quán)范圍，所以商用的時候要注意。
優(yōu)點：覆蓋中英文字體、種類多
缺點：網(wǎng)站廣告稍多，沒有注明版權(quán)范圍
推薦指數(shù)：★★★★ 4
UI設(shè)計素材
一、圖標(biāo)類
1、http://www.iconfont.cn
阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺，內(nèi)含一百多萬個圖標(biāo)！
設(shè)計師將圖標(biāo)上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。
優(yōu)點：種類豐富，質(zhì)量超高，免費下載，中文界面，阿里旗下
缺點：不能打包下載、需注冊
推薦指數(shù)：★★★★★ 4.5（滿分5星，下同）
2、https://www.flaticon.com
大型圖標(biāo)網(wǎng)站，里面擁有將近50萬個圖標(biāo)，一萬多個圖標(biāo)集！種類豐富，質(zhì)量超高，且支持在線編輯。
優(yōu)點：種類豐富，質(zhì)量可靠，免費下載
缺點：英文搜索，加載稍慢，打包下載需注冊（科學(xué)上網(wǎng)）
推薦指數(shù)：★★★★★ 4.5
3、http://fontello.com
覆蓋絕大部分網(wǎng)上可能應(yīng)用到的圖標(biāo)，也就是說任何你需要的網(wǎng)站類圖標(biāo)都可以在這里找到。
優(yōu)點：網(wǎng)站圖標(biāo)齊全，質(zhì)量高，免費下載
缺點：加載稍慢，僅有黑白圖標(biāo)
推薦指數(shù)：★★★★ 4
4、https://thenounproject.com
擁有一百多萬個圖標(biāo)的大型圖標(biāo)網(wǎng)站，而且圖標(biāo)都是由全世界各地設(shè)計師設(shè)計，質(zhì)量非常高！而且里面有很多有趣的圖標(biāo)，例如下面鳥籠類圖標(biāo)集，非?？ㄍ垡?！
優(yōu)點：種類豐富，質(zhì)量超高，免費下載
缺點：英文搜索，加載慢，不能打包下載
推薦指數(shù)：★★★★ 4
5、https://icomoon.io
聚合類圖標(biāo)網(wǎng)站，里面集合了不同網(wǎng)站的不同圖標(biāo)，付費免費都有，種類超多。
優(yōu)點：種類豐富，質(zhì)量一般，免費下載
缺點：英文搜索，加載超慢，操作復(fù)雜
推薦指數(shù)：★★★★ 3.5
6、https://useiconic.com/open
7、http://dryicons.com/free-icons
8、http://www.iconarchive.com
9、http://www.entypo.com
10、http://glyphicons.com
二、其他
1、UIKIT.ME
各種免費高質(zhì)量UI資源下載，Sketch、PSD甚至AE素材都有！
這個網(wǎng)站除了提供高質(zhì)量的素材以外，還提供超人性化的下載方式：（百度云）
優(yōu)點：質(zhì)量高，免費下載
缺點：種類少，部分素材有重復(fù)
推薦指數(shù)：★★★★ 4
2、TOSKETCH.COM
網(wǎng)站給我的感覺就是干凈，高大上！里面提供了工具包，網(wǎng)頁，移動，模型和圖標(biāo)等其他素材，而且這些素材都有一個特點，就是質(zhì)量高且新鮮！所有素材都是上傳的，這個有點了不起。
優(yōu)點：質(zhì)量超高，更新快，中文界面，百度云下載
缺點：只提供Sketch資源
推薦指數(shù)：★★★★ 4
3、UI8.NET
U18是設(shè)計素材圈的網(wǎng)紅，提供大量漂亮的超高質(zhì)量商業(yè)設(shè)計素材，但并非免費，絕大部分都需要付費。
優(yōu)點：質(zhì)量超高、數(shù)量豐富、界面清爽
缺點：付費（充值是個問題），加載稍慢，下載稍麻煩
推薦指數(shù)：★★★★ 4
4、PRINCIPLEREPO.COM
高質(zhì)量Principle原型和動效設(shè)計資源的網(wǎng)站，特別是動效，每一個都非常漂亮，很有參考價值。
優(yōu)點：質(zhì)量高，數(shù)量豐富，免費下載
缺點：加載很慢，只有動效資源
推薦指數(shù)：★★★★ 3.5
5、UISHE.CN
UI社，網(wǎng)站提供主題包、圖標(biāo)、界面和樣機素材等素材，屬于綜合性的素材下載網(wǎng)站。因為國內(nèi)的網(wǎng)站，大家不用擔(dān)心加載慢等問題啦。
優(yōu)點：種類很多，質(zhì)量高，下載方便
缺點：付費
推薦指數(shù)：★★★★ 4
6、MOCKUP.ZONE
7、GRAPHBERRY.COM
8、GRAPHICTWISTER.COM
9、SKETCHAPPSOURCES.COM
10、DUNNK.COM
平面設(shè)計素材
1、千圖網(wǎng)（www.58pic.com）
國內(nèi)大型素材網(wǎng)站，素材幾乎覆蓋所有類目、廣告設(shè)計、電商設(shè)計和辦公室素材等。逢節(jié)假日都有提供主題素材提供下載，且質(zhì)量很高！
優(yōu)點：種類超多、質(zhì)量高、免費下載、主題分類
缺點：非會員每日有數(shù)量限制
推薦指數(shù)：★★★★★ 4.5
2、包圖網(wǎng)（http://ibaotu.com）
包圖網(wǎng)，大型素材下載網(wǎng)站。全網(wǎng)站提供原創(chuàng)免費可商用的素材下載，種類齊全且質(zhì)量超高，每日更新1000張！
優(yōu)點：種類齊全，質(zhì)量超高，免費下載，全站正版可商用
缺點：非會員每日有數(shù)量限制
推薦指數(shù)：★★★★★ 4.5
3、千庫網(wǎng)（http://588ku.com/）
大型素材網(wǎng)站，可能是國內(nèi)唯一一家專業(yè)設(shè)計師提供免摳圖PNG素材，全站2000萬+高質(zhì)量素材無限下載，推薦！
優(yōu)點：種類多，專業(yè)提供免摳PNG源文件
缺點：非會員每日有數(shù)量限制
推薦指數(shù)：★★★★ 4.5
另外國內(nèi)還有付費的昵圖網(wǎng)和我圖網(wǎng)，免費的有站長素材等等素材網(wǎng)站，數(shù)量很多這里就不一一舉例了。
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn