在《用戶體驗的要素》一本書中，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 里面幾乎不可能只使用一種導航，哪怕只是一個頁面，也會存在多種導航的組合形式，比如：

總結

• 導航的形式一定是根據你的產品的諸多因素進行選取，并不能完全按照我上文的適用場景為依據；
• 幾乎每一個 app，每一個 app 的每一個頁面，都會涉及到多種導航模式，需要結合具體場景進行組合選?。?
• 導航的具體展現可以通過：文字，icon，文字+icon 的形式；
• 有些導航比如標簽導航在設計的時候有多種狀態，比如 unselected，selected 等狀態；
• 導航在 iOS 和 android 里面的應用會不一樣，比如標簽導航適配 iOS系統，側邊導航適配 android 系統；
• 導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關系；
• 能夠引導用戶以很好的體驗完成目標的導航設計都是優秀的。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1：mutations觸發狀態 （同步狀態）

<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>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

    

 // 計算 const getters = {
  count(state){ return state.count + 66 }
} export default new Vuex.Store({
  state,
  mutations,
  getters
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

    

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
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

    

<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>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

    

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,
  }
})

描邊插畫：可以簡單理解為眾多線面結合圖標組合在一起，互相呼應而組成一個大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。

本文內容：文章會詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會針對一些易犯錯誤的地方添加重點標記。

一點建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發揮自己的想象力，做一張屬于自己的原創插畫。畫完后若有不清楚的地方，歡迎在我的公眾號中添加微信并附帶插畫，可給予建議。

一、草圖階段

1. 確立主題，畫草稿

這次插畫的主題源自于我的一個夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。

確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數位板在 ps 里面畫，按照個人習慣就好。我比較喜歡手繪，因此在紙上畫。

2. 打開AI，調整設置

新建畫布1600*1200

視圖-勾選對齊點

3. 把草圖拉到畫面中，調整大小

二、線稿

1. 描邊設置及要注意的問題

在描邊插畫中，常見的問題之一就是描邊的粗細問題. 以及描邊間關系的處理問題。

描邊粗細問題（下圖以之前的四季插畫為例子）

描邊間關系處理

描邊設置

描邊的粗細是根據畫布大小而決定的，1600*1200的畫布，我習慣用 8pt 的粗細的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細可以根據情況而調整。

2. 線稿畫法

布爾運算法

形狀斷點重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調整線條的平滑度. 弧度，使其規整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調整

4. 高光與暗部

5. 經過高光與暗部塑造后的畫面

四、 風格塑造與整體調整

1. 風格塑造

最近看到 kit8 大神的畫，突然想到如果白線運用在線性插畫會怎樣，就嘗試了這種風格。把線稿復制一層置于頂上，改成白色，2px 粗細的線，然后向旁邊移動錯位，破一下畫面沉悶的感覺。

2. 整體調整

看到這里，你應該也發現了，畫面是比較灰的，因為我都是選擇低飽和度的顏色，如果需要調整，就在 AI 中把插畫導出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調整。

3. 保存喜歡的配色

在顏色調整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。

一、何為版面率

我們都知道一個版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區域，也是我們頁面內容的擺放空間。下圖中灰色塊的區域就是此頁面的版心。

知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點講就是版面的利用率。

上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。

版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時版心即整個版面，版面利用率為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插件：

• three.min.js
• webvr-polyfill.js
• VRcontrols.js
• VReffect.js
• webvr-manager.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確定視野范圍，

• //定義一個60°的視角，視線范圍在1到1000的透視相機
• var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
• scene.add(camera);
  

3、添加渲染器

• Three.js的渲染器用來渲染camera所看到的畫面

  
  

• //初始化渲染器 antialias參數為ture表示開啟抗鋸齒策略
• var renderer = new THREE.WebGLRenderer({ antialias: true } );
• //設置渲染器渲染尺寸
• renderer.setSize(window.innerWidth,window.innerHeight);
• //設置渲染背景為白色
• renderer.setClearColor(0xeeeeee);
• //將渲染場景的canvas放入body標簽里
• document.body.appendChild(renderer.domElement);
  
  

• 添加一個立方體網格
  
  

• // 創建立方體
• var geometry = new THREE.CubeGeometry( 10,10,10);
• var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
• var cube = new THREE.Mesh( geometry, Cubematerial );
• cube.position.set(0,100,-50);
• cube.rotation.set(Math.PI/6,Math.PI/4,0);
• scene.add(cube);
  
  

4、啟動動畫

• 產生動畫的原理就是讓camera持續連拍，同時每一次改變物體的屬性，通過requestAnimationFrame()方法遞歸的方式來持續更新場景對象屬性，你可以將它理解為setTimeout的優化版。相比setTimeout函數，requestAnimationFrame可以保證動畫渲染不會因為主線程的阻塞而造成跳幀。

  
  

• function animate() {
•     //讓立方體旋轉
•     cube.rotation.y += 0.01;
•     //渲染器渲染場景，等同于給相機按下快門
•     renderer.render(scene, camera);
•     //遞歸運行該函數
•     requestAnimationFrame( animate );
• }
• animate();//啟動動畫
  
  

      至此，我們已經繪制了一個簡單的3d場景并且讓它動了起來，接下來，我們需要讓我們的場景可以支持WebVR模式。

WebVR場景開發

       WebVR網頁的基本原理其實是通過瀏覽器的WebVR API獲取用戶輸入，進而控制相機的視角，在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面，裸眼情況下提供全屏+touchmove/gyroscope。

       現在我們開始分別創建上文所說的VR控制器和VR分屏器

• //初始化VR控制器需要傳入場景相機
• var vrControls = new THREE.VRControls(camera);
• //初始化VR渲染器需要傳入場景渲染器
• var vrEffect = new THREE.VREffect(renderer);
• //初始化VR適配器，傳入渲染器和分屏器
• var vrManager = new WebVRManager(renderer, vrEffect);
  
  

      然后在前面創建的場景渲染函數里調用

• function animate() {
•     cube.rotation.y += 0.01;
•     //實時更新相機的位置和轉角
•     vrControls.update();
•     vrManager.render(scene, camera);
•     //遞歸運行該函數
•     requestAnimationFrame( animate );
• }
  
  

       至此，我們已經完成了一個基本的webVR網頁，不過少了點交互效果好像，敬請期待Web開發的新世界---WebVR之交互事件。

• 完整代碼：在文章基礎上添加了天空和地面相關代碼，以及下篇文章將講到VR凝視交互事件。
• demo演示地址 ：手機瀏覽需設置允許橫屏。
  
  

結語

        目前，國外的谷歌、火狐、Facebook和國內百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網絡極速時代的到來以及HMD頭顯的價格和平臺的成熟，WebVR的體驗方式將是革命性的，用戶通過WebVR瀏覽網上商店，線上教學可進行“面對面”師生交流等，基于這種種應用場景，我們可以找到一個更好的動力去學習WebVR。

客戶（老板／領導）拿到軟件的第一個意見，幾乎都是關于UI的。有時得到的評價也挺簡潔明了的，一個字“矬”。

于是惶惶不安的開發小弟經常想到的第一個解決方案：去問設計大神（美眉）要一幅詳細的標注圖。結果他得到這么一幅標注圖：

UI妹兒 2018-02-22 11:13:02