首页

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

博博


听云 2016-04-18 10:49:28

早在1995年，尼尔森的十大可用性原则就已问世，虽然当时针对的是web交互设计，但易用性对任何拥有用户界面的东西来说都适用。不管是网站，程序，移动页面或其他，具体的规则可能不同，但总的原则都源自人类上万年进化所形成的思维方式。

1、可见性原则

用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。保证页面内容的可见性、状态的可见性、状态变化的可见性。

在用户与应用的交互过程中，系统需要即时的给予用户反馈。如果用户在操作过程中，页面出现一片空白，不清楚应用是否给予了用户反馈，这时候用户就会感到焦虑、恐慌，这些都是不符合可见原则的。看起来非常基础的要求，其实很多产品都做不到或者没做好。

有一部分App，在弱网情况下信息未加载完成时，显示空白页，无法给用户任何信息。

现在来看一款可见性做的比较好的App

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

如上图，关掉WIFI在2.5G的网络情况下首次进入这个App，主页面内容虽然迟迟加载不出内容，但是有一个提示能够告诉用户，当前正在做什么，是怎样的进度。并且“内容炼成中”这句有二次元味道的提示，使App的整体感非常好，而且图片一定程度上分散了注意力，使用户对加载的时间不那么的敏感，为弱网环境下内容的加载争取了时间。

2、场景贴切原则

网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景）。此外，还应该使用易懂和约定俗成的表达。

在做产品设计的时候，主要考虑到的是用户使用场景。产品的功能要贴近目标用户的真实使用环境，这一点非常重要。用两款导航类产品举例：

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

还原一下导航时部分使用场景，比如在一个陌生的城市开车，需要使用导航，输入目的地，大部分的情况下手机不是手持状态，观察的模式也是以眼睛扫描为主。

在这个页面上的设计，大部分的信息对我第一诉求导航并没有直接的帮助，如果要输入一个目的地，需要用寻找的方式去使用它。输入框非常窄，不好找到，使用场景下导航并不贴切。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

相比之下看到锤子驾驶的界面，作为一款导航类的应用，它教科书式的讲解了什么是场景贴切原则。在开车的时候只要用眼睛扫一下手机屏幕就可以知道要导航的功能位置，并且可点击区域巨大，非常容易选中。

选中导航后优先用语音搜索目的地，这样可以减少对驾驶的影响。下方巨大的List也让用户比较容易的去点击最近去过的地方。这样就非常符合用户在驾驶中，或者说非手持状态的使用习惯。

3、可控原则

为了避免用户的误用和误击，网页应提供撤销和重做功能。用户对当前的状况很好地控制了解和掌控，并且有足够的自由。

掌握、可控、自由是人类安全感的重要来源，如果使用一款产品的时候提心吊胆的，生怕点击了某个按钮就发生了错误，很难相信这样的一款App有好的用户体验。有一个用户交互的金句：操作前可预知、操作中可有反馈、操作后可撤销。

像iPhone 的出现，为可控原则做了最好的注解，Home键也是教科书式的可控原则的体现。无论你在哪里，遇到了什么问题，一键回到桌面，一切重新开始。

4、一致性原则：

同一用语、功能、操作保持一致。用户需要在同一个产品中，接受同一套规范、逻辑。

这样做的一个好处是可以让用户对App有一个整体的感知，在相同的背景下做相同的操作会有可预期的结果，这样大大的降低了用户的学习成本。如下图这个出行类App，点击了旅行休闲，结果跳转了一个莫名其妙的页面。内容与旅行没有关系，违背了一致性。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

5、放错原则

通过网页的设计、重组或特别提醒或安排，防止用户出错。

这方面很多成熟的实体产品都比较好。App中这种防错设计随处可见，比如订票软件，已经过去的日期显示为灰色，以防订错机票的错误。

6、协助用户记忆原则

在需要记忆某些信息时，产品功能上要帮助用户记忆。尽可能减少用户回忆负担，把需要记忆的内容摆上台面。

7、灵活的原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活。

移动端的用户大多数不是专家级用户，也不是小白用户。对页面的设计要更侧重于满足对大多数用户的需求，不宜复杂，也不宜过于简单无提示。

8、易扫原则

互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。

在时候用一款陌生产品的时候，用户绝大多数是使用扫描的方式而不是阅读的方式来理解内容。如果想让用户快速发现想要的信息，就一定要保证页面足够清晰，简约。如果有较多的信息需要展示，那么一定要分清主次，要求界面足够简单，突出重点，内容易读。

9、容错性

帮助用户从错误中恢复，将损失降到。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。

例如各类应用中要恢复出厂设置，是一个比较重大的操作

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

所以在恢复出场设置前需要输入解锁图案。这就是容错性的一个体现。对于用户正在进行的操作有着明显的提示，避免了误按误点操作造成的损失。

10、人性化帮助原则

帮助性提示最好的方式是：1、无需提示2、一次性提示3、常驻提示4、帮助文档。

一个系统或者是产品，如果不需要文档或是提示是最好的，一切都是自然而然发生的。但是在很多情况下，需要对内容做一个提示或者帮助，来便于用户更好的使用App。

帮助和提示在哪里用的比较多呢？设置。在设置页面里，可以看到无线网络、定位服务等是否打开，而中间遇到比较复杂的操作，用户对此一知半解，这时候就需要有相关的帮助提示。

现在几乎所有的移动端交互设计全部基于用户体验，而在定位准、细分市场准，遵守了尼尔森十大原则的情况下，还有一些问题是每个产品研发团队不能避免且无法解决的。

在每个产品的不同生命周期中，侧重点也会不同。初期注重种子用户的培养与新功能的增加。到了成长期会经历版本的频繁发布，系统不够稳定。这时候就需要用到更加专业的第三方工具去帮助应用发布后的性能问题进行管理。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

在产品真正上线后可以及时进行崩溃分析、网络请求与错误分析，交互分析等等通过App的总体性能评分与在同行业竞争中所处的位置来不断迭代产品，改进用户体验。

评论(0) 浏览(4544)

设计规范 | Web端设计组件篇－反馈类

博博


企服盒 2018-04-08 10:52:48

本篇讲述的是feedback反馈类；反馈就是用户做了某项操作之后，系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

设计规范 | Web端设计组件篇－反馈类

设计规范中最重要的部分就是组件规范了，制定组件的规范有哪些好处呢？

  1. 简单：熟悉了解组件的用法之后，在做界面设计时，只需要合理运用组件就可以快速搭建web端界面，无差错。由于有成套的组件规范，所以在交互设计和视觉设计过程中无需每次都重复劳动。

  2. 统一用户体验：由于使用了统一的组件规范，所以保证了的视觉和交互设计统一性，保证整体的用户体验性。

  3. 提升设计综合能力：由于减少了做组件重复性劳动，交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。

根据组件的用途，可以分为六大类：Feedback 反馈、from 表单、basic 基础、data 数据 、navigation 导航、other 其他。

设计规范 | Web端设计组件篇－反馈类

本篇讲述的是feedback反馈类；反馈就是用户做了某项操作之后，系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

toast

定义：用户产生操作，出现toast提示，一般2-3s消失；通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。

使用场景：

  1. 可提供成功、警告或错误等反馈信息。

  2. 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

例如简书在没有上传专题封面时就点击创建专题按钮，出现toast提示，提示用户要先上传专题封面才能创建专题。

设计规范 | Web端设计组件篇－反馈类

toast的消息提示分类一共有三种类型：成功类、失败类、常规类。

组件样式有两种：可以点击操作使其消失、不可点击操作使其消失。

设计规范 | Web端设计组件篇－反馈类

alert 警示提示

定义：当用户进行某种操作时，网站会出现对应的警告信息提示用户，该提示信息的状态不会主动消失。

使用场景：

  1. 当某个页面需要向用户显示警告的信息时。

  2. 非浮层的静态展现形式，始终展现，不会自动消失，有的组件用户可以点击关闭。

例如淘宝购物车，删除之后，会出现alert警示提示，淘宝的例子属于alert的变种，用户可以点击“撤销本次删除 ”进行还原之前的毁灭性操作。

设计规范 | Web端设计组件篇－反馈类

alert警示提示的消息分类一共有三种类型：成功类、失败类、常规类。当然也可以不含有icon操作，含有icon操作的话警示性会更强。

alert警示组件样式有两种：带有删除操作，不带有删除操作。

设计规范 | Web端设计组件篇－反馈类

dialog对话框

定义：用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式，也可以是自定义复杂的模式，例如表单的填写。

使用场景：

  1. 用户在进行重要操作的时，需要进行二次确认。

  2. 用于重要的反馈提示，让用户知道信息提示。

  3. 承载少量的表单填写类，减少页面的跳转。

windows系统的确定按钮一般在左边，而Mac OS的确定一般在右边。因为这个原因，导致我们平时看到的确定有时候在左边，有时候在右边。

微博和微信公众号后台的的对话框，确定在左边，而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗，避免了遮罩出现，同时对话框也出现在操作按钮的附近，对用户的干扰性也是最弱的。

dialog对话框，有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。

设计规范 | Web端设计组件篇－反馈类

Notification通知提醒框

定义：悬浮出现在网页右上角，用于全局的提醒式通知。常见于服务器异常、操作失败等

使用场景：

  1. 较为复杂的通知内容。

  2. 带有交互的通知，给出用户下一步的行动点。

  3. 系统主动推送。

Notification通知提醒框出现在网页右上角，一般4-5s消失，也可以点击叉号进行关闭。

设计规范 | Web端设计组件篇－反馈类

tooltip 文字提示

定义：简单轻量的的文字提示。

使用场景：

  1. 鼠标移入则立即显示提示，移出则立即消失，不承载复杂文本和操作。

  2. 常用于解释操作按钮的文字说明。

还有一种tooltip是浏览器自带的，浏览器自带的和本篇的tooltip的区别是：浏览器自带的鼠标移入一般2s才显示，多用于折行打点的文字提示。例如简书，而本篇的tooltip鼠标移入就出现，切组件风格和浏览器自带完全不一样。

设计规范 | Web端设计组件篇－反馈类

tooltip组件按照需要解释说明的对象位置不同，可以有以下不同的样式。

设计规范 | Web端设计组件篇－反馈类


评论(0) 浏览(3214)

UI设计的4个角度与14点思考

博博


设计师柠檬 2018-04-26 15:22:57

写在前面的话：文章内容源于网络，由柠檬整理发布，如有侵权请联系设计师柠檬删除

都说UI设计是用户看到产品的第一个门，从进入手机应用商店到下载界面再到产品的首页，设计师不考虑一下真的用交互稿和产品直接做么，从图标在应用商店的吸引展示力和用户的软件留存率，这些哪个不是和UI设计师有关系？

本文重点：1.学着像产品经理的角度思考

2.学着像交互设计师的角度思考

3.学着在用户的角度思考

4.学着在自己的角度思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考


评论(0) 浏览(3387)

2018网页UI设计：轻松搞定视觉层次感

蓝蓝设计的小编

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

评论(0) 浏览(4001)

如何利用 “峰终定律” 改善用户体验？

涛涛

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 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 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。

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

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

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

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

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

移动端的导航设计模式

涛涛

在《用户体验的要素》一本书中，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 系统；
  • 导航设计必须传达出它的内容和用户当前浏览页面之间的关系；
  • 能够引导用户以很好的体验完成目标的导航设计都是优秀的。
评论(0) 浏览(3225)

关于Vuex的全家桶状态管理（二）

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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
        
    •

2：getters计算属性

getter不能使用箭头函数，会改变this的指向

在store.js添加getters 

 // 计算 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
        
    •

//count的参数就是上面定义的state对象 
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。 
组件中使用 

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

3：actions (异步状态)

在store.js添加actions 

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
        
    •

4：modules 模块

适用于非常大的项目，且状态很多的情况下使用，便于管理

修改store.js 

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,
  }
})
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3211)

如何画好一张描边插画？

涛涛

描边插画：可以简单理解为众多线面结合图标组合在一起，互相呼应而组成一个大画面。画面中的元素除了面以外，还具有描边，因此也叫描边插画。

本文内容：文章会详解如何画一张描边插画，教程素材没有用我之前的插画来做步骤分解，而是新画了一张插画以作示范，绘画原理都一样，理解原理就好。除了具体步骤以外，会针对一些易犯错误的地方添加重点标记。

一点建议：看完文章后，可以按照我分享的方法来临摹一遍，但我更趋向于小伙伴们能够发挥自己的想象力，做一张属于自己的原创插画。画完后若有不清楚的地方，欢迎在我的公众号中添加微信并附带插画，可给予建议。

一、草图阶段

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. 保存喜欢的配色

在颜色调整过程中，遇到喜欢的配色就保存下来，这样一张插画就完成了。

评论(0) 浏览(4659)

聊聊排版中的版面率和留白率

涛涛

一、何为版面率

我们都知道一个版面中必定有版心的概念。何为版心呢？版心就是除去天头、地脚和左右页边距余下的区域，也是我们页面内容的摆放空间。下图中灰色块的区域就是此页面的版心。

知道了版心，那么何为版面率呢？版面率就是版心所占页面的比例，通俗一点讲就是版面的利用率。

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

版面中也有满版与空版的概念。如上图，满版就是没有天头地脚与左右页边距的，此时版心即整个版面，版面利用率为100%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。

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

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

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

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

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

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

三、留白率

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

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

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

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

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

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

四、留白率对画面的影响

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

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

五、案例演示

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

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

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

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

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

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

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

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

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

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

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

总结

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

评论(0) 浏览(4936)

动画笔记06《文字路径书写MG动画》

涛涛

推荐一个做路径动画的脚本，还不错，看看吧。

undefined

评论(0) 浏览(3719)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档