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