众所周知，相较于平淡无奇，毫无重点的网页UI设计，具有良好视觉层次结构的网页UI设计更受用户青睐。为什么呢？答案其实很简单。极赋视觉层次感的页面设计不仅极具设计美感，取悦用户身心。而且还建立了清晰直观的视觉层级， 方便用户简单快速的识别和读取需要的页面内容，从而提升用户体验，降低跳出率。

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的，百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为：

用户在使用某个硬件产品，软件产品或者服务系统来完成自己目标的过程中，用户情感地图曲线的波峰（体验最好）、波谷（体验最差）、结束点的体验，决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重，好与不好体验的时间长短，对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定，一个是「高峰」，一个是「结束」。

把用户情感地图曲线和峰终定律结合起来，简单画一张图：

既然用户整体体验与整个过程中好坏综合无关，只跟几个关键点有关，那么可以得到一个公式：

用户整体体验评价（E）=（y1-y2）+y3

y1，y2，y3 可以称为关键时刻 MOT（Moment Of Truth）

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律，突然明白了为什么我们有些课程调研，大家都喜欢去宜家调研了。

虽然它的店员很少，找货物也要自己找椅子搬下来，就算只买一件家具也需要逛完整个商场，但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀，这就是它的「终」。

而在逛的过程中，就像包子讲的，它的体验模式很棒，把产品作为空间的一部分。曾经有一位宜家的老顾客也说，宜家商品物有所值，展区实用，产品随意试用，大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析：

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话，可以先举几个体验差的例子。

很多时候，用户在某个平台完成某个任务后，会出现很多引诱用户点击的赞助商的内容。比如问卷星，每次填完，任务结束的时候，它还会打着抽奖的名义接广告……

再举个例子，你有没有过在某些 app 注册账号，登录 or 注册很多次却失败的情况，或者花了很久时间才注册 or 登录成功？原因可能是账号密码错误，可能是注册流程过多跳出率过高，可能是填写信息冗杂……

如果这款产品不是用户刚需的话，最终会导致很多用户卸载它，就算你之后流程的体验再好，用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」，也能刺激用户的「痒点」，更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」，提升用户体验。

如果用外卖这个来举例子的话，应该算是一个大的服务系统，它会涉及到很多方，比如消费者，商家，骑手等，而这一整个服务系统的设计，只针对消费者而言，流程也会十分复杂，其中利用峰终定律考虑的就更多了。

那就其中用户（消费者）与饿了么 app 的交互流程来举例的话，用户点外卖这个任务：

从打开 app——选择店——选择美食——付款，用户的任务已经结束了，但是饿了么会在结束的时候，给用户一个分享领取红包的福利，用户会觉得自己获得了很大的优惠，体验会十分好，这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的，曾经玩过 lol，王者荣耀，吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候，那大概是：比赛过程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是，杀人后系统直接提示「您已经杀灭了一名敌人」，但是它会去强化这种杀人的体验，将杀人的场景分为多种类型，通过视觉上的弹框击杀提示与配音上的激励叠加，把杀人的体验不断深化，做到，另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢？我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候，比如 lol 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。

王者荣耀，吃鸡这类在游戏结束的时候也会给用户很多激励，明明可以在结束后直接回到大厅，但它们会延长这些胜利或者失败的体验，如果胜利，当然是爽，还想再拥有这样的体验，继续打；如果是失败，那再接再厉，想拥有赢的体验，继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到，在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤：

• 进行可用性测试；
• 绘制用户旅程图；
• 找到「峰」，「终」时刻；
• 通过用户研究的方法找到用户心中的关键时刻；
• 将「峰」、「终」，「用户心中关键时刻」的体验优化至。

在《用户体验的要素》一本书中，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%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。

二、版面率对画面气质的影响

说完版面率的概念我们再来说一说版面率对画面气质的影响。

一般来说版面率越高，视觉张力就越大，版面也会更活泼与热闹；反之，版面率越小，给人感觉就越典雅与宁静，版面也会更有格调。

上图中高版面率的海报相对于低版面率的更热闹与活泼；低版面率的则更典雅。

画册中也是一样的，上图是我早些年做的一个案例。同样的内容跟图片，只是版面的利用率不同，我们可以发现右边低版面率的作品更安静和典雅。

版面率的高低能够影响版面的气质，所以我们实际工作中也要根据项目的气质分配合适的版面率。比方说典雅气质的项目我们就要用低版面率版面，如果用高版面率显然是与项目本身的气质相悖的。

三、留白率

说完版面率我们再来说一下留白，留白的概念大家都懂。而这里所说的留白更多的是指页面的负空间。

页面中去除内容后的空间就是负空间，如下面这个页面。

图中灰色块代表图和文字信息等内容，除去这些图片和文字后，页面中的其他空间都可以看作是负空间，也就是留白。当然，留白并不一定是白色，所有除去页面内容后的空间都是负空间，如上图右侧案例，黑色部分即此页面的留白。

负空间的多少即是留白的多少。留白的多少我们可以用留白率来表示，如上图，负空间小的留白肯定少，留白率就低。负空间大的的留白肯定多，留白率就高。

留白率就是版面留白的多少，实际上与版面率的概念差不多，如下。

空版留白最多，满版留白最少。当然这也不是绝对的，有的作品中虽然是满版，但空间广阔，比如天空什么的，都可以当作留白来看待。

四、留白率对画面的影响

上面说来留白率跟版面率也有一定的关联，所以他们对画面气质的影响也是如出一辙的。我们可以先来看一下低留白率与高留白率的几个作品。

通过这几个作品我们可以看出留白少的信息更丰富，版面更有活力，也更热闹，亲和力也更强。而留白多的更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。

五、案例演示

下面进行案例演示吧，首先看一看文案。

这一步我们需要把文案的层级关系拉开，大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是无尽的森林 ＞ 小文字信息的。

首先我们做一个有张力的版面，那么我们可以想一想什么样的版面是有张力的呢？

首先版面率要大，其次留白要小，让版面中的信息紧凑一点。

上图就是对版面的布局，可以看到图片是出血版的，没留天头与左右页边距。这样做的目的也是使版面率更大。

布局做好之后我们把图片与编排好的文字放置上去就可以了，如下。

上图可以看到留白比较少，符合留白率低的理论，虽然具备张力，但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低，如下。

做完了留白少版面率高的，我们再来做一个典雅一点的。

根据本篇文章的内容思考一下什么典雅与安静的的排版版面率与留白率分别是什么样的？

一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多，同时版面率要小一点。下图就是一个基本布局。

最后我们再根据版面布局置入图片微调一下就可以了，如下。

总结

版面率跟留白率都能够影响版面的气质，我们做项目的时候具体问题具体分析，根据项目气质去设定版面率跟留白率的大小。

大家好，从今天开始我要以大白话且通俗易懂的方式，来与大家分享我的知识和观点。

主要讲解的是平面设计基础理论知识与实际用法，后期会讲一些高阶的设计思维。

本章节适合设计小白和需要填补设计基础的设计师学习阅读。 

目录

1、理解、提取与布置

2、贴近与远离

3、排列与对齐

4、视线移动方向

5、组织与重复

1、理解、提取与布置

理解、提取与布置指的是根据设计的意图来进行信息的整理，然后再将整理好的信息中重要和不重要的信息按照优先级排列出来，最后再根据排列好的信息按个人美感和美学理念摆放到平面中。

1.1 理解部分

当收到一个海报设计需求时，我们不是要马上动手去做，而是要去思考需要设计的海报受众群体是哪些人，具体要怎么展示它，它展示的目的是什么。 

下面我就简单介绍一下设计思维及方法，首先要设置定一个需求【现代美术馆，需要设计一个简洁大方的海报】。根据这个需求在进行具体的思维延伸。

1.1.1 海报的受众群体

当我们收到设计需求时，要考虑海报的受众群体，男人/女人，少年/青少年/中年/老年，每种受众群体接受教育的程度和经历均不同，要根据不同的受众做合适的设计。当我们按照具体需求定义好受众群体后，就可以考虑推断用哪种风格来展示海报了。

对于现代美术馆需要一个简洁大方的海报，这个需求所涵盖的年龄区间比较大，基本上所有人都可以参观美术馆。那我们只要避免使用“个性化”的表象特征元素就可以解决这个问题了。

意思就是不要加入柔美的线条（除非展品的构成是柔美的线条），游戏和女妆这类具有一定代表性的象征元素，不要夹杂太多表现形式，用最容易让人理解的表象形式来处理就可以了。

1.1.2 怎么展示海报

现代美术馆，需要设计一个简洁大方的海报这个需求，可以根据主关键词“现代”和“美术馆”，次关键字“简洁”和“大方”来推断要采用哪种设计语言。“现代”的表现形式是无衬线体、干练（有棱角）、简洁、没有太多情绪。而“美术馆”只要在图片的处理上让主题与图片串联共通就可以了。

简洁大方的设计需求可以采用直线（字有时也是线）或大留白、配色多些白色、舒适的高纯度高明度、整体干净清爽，同时也要注意禁止添加太多颜色（如撞色）。

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。