编辑导语：现今以至遥远的将来，我们将面对一个残酷的现实问题：人口老龄化。未来将有很多人群去关注这个群体，但是在市场上，对老年人的产品还是很少的，还存在很多问题。本文应对这个问题，展示不同适应老年人的产品设计细节，我们一起来看看。

当前，我们正面临老龄化问题的严峻挑战。

统计表明，中国的老龄化人口已达到2.64亿，且这一数据仍在持续增长，而老年人在生活、情感上都面临诸多问题。

• 首先，老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化，无法平等地获取信息和服务；
• 其次，年轻人涌向大城市寻找机会，老年人被迫成为空巢者，疫情的发生更使亲人长期两地分离，老人情感孤独缺少陪伴；
• 另外，疫情的爆发也促使线下服务转为线上化，老年人不能很好适应这一转变，遇到很多困难。

但是研究发现，市场上目前没有产品很好解决了上述问题。

当下移动APP产品缺少对老年人体验的深层次关注与设计，只通过单一加大字号与简化功能等解决基础体验，缺乏通过新技术应用和更全面的适老化设计服务老年群体，老年人的需求依旧未得到关注和满足。

因此，百度基于自身雄厚的AI技术和精细、系统的适老化设计适时推出百度大字版，使老年人更平等地获取信息和服务、获得情感陪伴。

一、精细系统的适老化设计：易阅读、易收听、易操作、易理解

目前行业内缺失成体系的老年人研究报告，针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业，同时业内也缺少针对老年人系统的设计标准或设计指南。

现有无障碍设计标准针对残障人士，且部分标准只适用于PC端，不适用于老年人和移动产品。

因此在进行百度大字版的适老化设计时，我们系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料，产出了系统的移动端适老化设计标准体系，同时结合百度大字版实际场景产出了解决方案。

适老化设计包含：易阅读、易收听、易操作、易理解四个方面，后续将详细阐述。

1. 易阅读

随着年龄增长，老年人会出现视力下降、色彩感知弱、动态视觉减弱的问题。

老花眼、眼睛进光量减少等问题会导致视力下降。

眼睛晶体浑浊，晶体变黄的现象会导致色彩感知弱。视力减退，注意力降低，导致眼睛失去快速对焦的能力，动态视觉减弱。

因此为了使老年人更易获得视觉信息，我们对界面元素做了一系列的改造，使内容更易阅读。

1）增大字号

增大字号是适老化设计最有效的手段。

PC端WCAG无障碍设计标准建议字号可以放大到200%。

按不同的阅读媒介与人眼距离进行推导，移动端字号大小建议在60px-81px之间，标题、正文、辅助信息等不同信息层级采用不同的字号标准。

此字号标准经过眼动实验和用户访谈进行了双向论证，形成完整覆盖各信息层级的字号大小标准，已经在百度大字版落地。

字号与眼睛距离对照图

字号标准体系

字号应用场景

2）使用符合老年人生理、心理特征的颜色

老年人眼睛晶体变浑浊、变黄，导致对色彩的感知减弱，且研究表明老年人更喜爱温暖明亮的颜色，更希望感受到活力而不是苍老。

因此在颜色的设计上，我们通过增加色彩对比度到不小于3:1、大量使用暖色调、减少紫色和青色的使用3个手段，来进行界面色彩的设计。

颜色的选取和使用

3）提供有效的反馈提示

老年人的动态视觉减弱，对动态内容的捕捉和感知速度明显下降。

因此，对界面中短暂出现的提示性信息，我们在现有提示时长的基础上延长了一档。

例如现有提示的停留时间小于3秒时，百度大字版延长到3秒，现有提示的停留时间在3-5秒之间时，百度大字版延长到5秒。

现有提示的停留时间在5-7秒时，百度大字版延长到7秒。超出以上时间则提供适当的关闭机制，避免打扰。

提示时长适当延长

2.易收听

随着年龄增长，老年人也会逐步出现听力下降的问题，听力损失程度受地域、受教育程度、疾病等多重因素影响，且高频和低频听力损失程度更深。

因此我们通过增加音量、适当降低语速等方式帮助用户更好的获取听觉信息。

1）增大音量

针对老年人听力下降这一现象，我们适当增大了音/视频的音量。

研究表明，老年人听觉平均感知音量在67.5～75.3分贝之间，因此在视频开始播放时，我们对低于设定值的音量适当增加到约44%。

iOS系统音量分布

2）降低语速

为了保证老年人有效的接收到声音信息并进行理解，音/视频的播放速度也需要适当下降。

因此，我们减少了高档位语速，并提供了高、中、低3档语速，使老年人选择适合自己的速度，更有效的获取声音信息。

速度档位选择

3.易操作

移动应用需要通过手势交互来完成任务，但老年人的肢体运动能力也会逐渐下降。

动作精准度下降使老年人无法准确的完成手势操作，对动作的精细控制程度降低。

同时老年人相较年轻人运动更加迟缓，逐渐出现操作迟疑、犹豫或暂停，运动幅度或速度也会下降。

因此为了保证老年人可以准确的完成操作，我们采用了增大触控区、降低手指运动距离和精准度要求、提供有效的反馈提示、操作功能显性化等方式。

3）增大触控区

增大触控区是使移动应用易操作的最简单有效的方式，同时视觉设计上也需要让老年人感知到触控区增大。

我们通过对iPhone XS Max三倍屏的分辨率和物理尺寸换算，结合人拇指和食指的点击区域大小，推导出移动应用上，触控区应大于等于112px×120px。

触控区域示意

2）降低手指运动距离和操作精准度要求

老年人的肢体运动能力下降，难以完成长距离、长时间、连续、高级的操作。

因此我们集中界面的主要操作在屏幕下半部分，保证用户在使用时手指移动的距离更短，同时减少使用具有明确方向性、精准度要求的高级手势，如双击、旋转图片到正向等。

降低手势操作的精准度要求

3）提供明确的操作反馈

为了提醒老年人注意、告知其已完成操作、增强操控感，我们在特定场景增加了振动反馈，如临界值、出错、滑块、警告场景。

振动反馈

4）隐性操作显性化

为了减轻用户的学习难度，我们将所有隐性功能或需要手势操作触发的功能进行了显性化设计，如点击底bar刷新，功能隐性不易发现，百度大字版采用动态刷新图标的形式，增强底bar可点击刷新的感知。

隐性操作显性化

5）辅助用户输入

现实生活中，很多老年人不会使用输入法，而且肢体运动能力的退化也为输入带来了不便，移动设备的输入法操作区域小难以精准操作。

因此我们依托百度的AI技术，提供了语音搜索和图像搜索能力，使老年人可以方便的通过语音和图像搜索主动探索获取新知，答疑解惑，跟上时代进步。

依托百度AI技术提供语音和图像搜索能力

4.易理解

随着年龄的增长，人的认知能力也会逐步下降，老年人会出现反应慢、学习力下降、判断力下降的情况。

他们很难一遍学会新内容，也难以判断信息的真伪。因此我们通过简单直白的文案话术、清晰明确的图标设计、可信的来源设计来使内容易理解，安全可信。

1）采用通俗易懂的文案

由于老年人触网时间短、受教育程度不同，难以理解专业的互联网术语，为了帮助他们更好的使用产品，我们对专业术语都进行了简化，采用了通俗易理解的文案。

文案适配前后对比

2）提供清晰明确的图标设计

为了帮助老年人更好的理解和使用产品，百度大字版的图标设计都采用了简单易理解的图形，同时功能入口大部分采用图形和文字结合的方式，通过双重手段帮助老年人理解产品功能。

图形对比示意

3）提升信任感

在内容信息来源中或涉及经济交易的环节，百度大字版通过增加官方标签、提供官方平台保障的方式来提升产品整体的可信度，增强老年人对产品的信任感。

官方标识和保障示意

4）提供即时的帮助

为了随时解决老年人遇到的问题，百度大字版提供了暖阳热线，使老年人可以随时打电话获取专业人员的帮助和解答。

二、AI赋能，情感陪伴

由于很多年轻人去大城市寻找机会，导致产生很多空巢老人，他们情感孤独，缺少陪伴。

疫情的爆发，更使老年人在节假日也难以与家人团聚。

因此百度大字版通过语音合成等AI能力，还原儿孙亲友的真实声音，用于全局内容播报朗读，使老年人感受到至亲至爱仿佛陪伴在他们身边，缓解老年人的孤单和思念之情。

全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题，同时可以解放双手，使老年人随时随地听朗读。

语音合成

全局内容朗读场景

三、丰富内容，充盈生活

百度大字版围绕老年人的实际生活需求，依托百度的内容生态和个性化推荐技术，提供了符合老年人兴趣的图文和音视频内容，一站式满足了老年人的内容消费需求。

• 在设计上，我们通过AI技术，对视频增加智能字幕，方便老年人获取视频信息；
• 在内容流的操作上，通过统一的容器和流式交互，为老年人提供便捷的操作体验，使他们更方便、平等的获取信息和内容。

智能字幕

四、生活助手，便捷服务

百度大字版还提供了多种实用工具，满足老年人疫情时代和日常的生活诉求。

疫情导致线下服务线上化，因此为了帮助老年人适应这一生活方式的转变，百度大字版提供了在线政务工具。

很多老年人承担了教育孙辈的责任，因此我们提供了一些辅助教学工具，帮助他们带孩子。

更有疫情地图、垃圾分类等贴合日常生活场景的工具，使智能技术更贴近、融入老年人的生活。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

什么是列表构建器

在了解“列表构建器”之前，我们先来了解下什么是“列表”和“构建器”。

列表是一种数据项构成的有限序列，即按照一定的线性顺序，排列而成的数据项的集合。常见的列表有新闻流、表格、事件列表、好友列表等。

在 java 中，构建器主要用于把复杂对象的构建过程抽象出来，使得复杂对象的构建可以分部件分别创建，从而根据需要构建出来非常复杂的对象。由此我们可以推演出日常中大家口口相传的图表构建器、地图构建器等实际是在阐述图表、地图等依据某种规范或规则生成此类对象的过程。

因此，我们今天要聊的“列表构建器”就是通过某种途径，达到用户所需的列表对象的过程。

在 B 端界面中，穿梭框就是列表构建器的一种展现形式，用户从较大的数据集合中挑选出符合自己所需的较小的数据集合。通常大数据集合在左边（待选区），称之为源数据区；小数据集合在右边（已选区），称之为目标数据区。

为什么需要列表构建器

B 端界面上为何会需要列表构建器这种组件呢？从实践经验来看，无外乎以下 2 点：

1. 所见即所得

源列表和目标列表在同一个页面，用户无需通过跳转页面来回查看源和目标数据，不仅提升了用户操作效率，也提升了用户操作的愉悦性。

2. 数据展示量大

列表构建器可展示的源数据空间和目标数据空间都比 select 组件大的多，这非常方便用户在界面上自由与直观地操作。对于 B 端产品来说，数据量大是不争的事实，在展示、操作、呈现上也是急需解决的问题。列表构建器的出现在一定程度上解决了某些场景下的问题。

什么时候使用列表构建器

使用列表构建器设计模式的情景为：

1. 源数据量大，且目标数据量也大的情况下，适合使用；
2. 不想通过滚动、跳转等方式查看源和目标数据时，适合使用。

6 种常见的列表构建器

根据不同场景下的不同需求，衍生出了列表构建器的多种形态，下面分享一下 B 端常见的列表构建器场景设计模式。

1. 基础列表构建器

What 是什么

基础列表构建器是列表构建器的基础用法，展示了数据量不大的源数据，用户通过选择后确定目标数据。

When 使用场景

当源数据量小于大约 50 条时，且选择的目标数据要直接可见时，可以考虑使用。

How 如何使用

用户直接通过滚轮查看源数据中的目标数据，然后选中它们。当确认后，点击穿梭按钮将已选择的数据转入已选区。

2. 可搜索列表构建器

What 是什么

展示了数据量较大的源数据，且有搜索功能，用户通过选择后确定目标数据。

When 使用场景

当源数据量较大，用户已经无法通过在有限容器中滚动鼠标快速查阅和定位数据时，可以考虑使用。

How 如何使用

用户通过搜索确定目标数据，勾选后再通过穿梭按钮将已选择的数据转入已选区。

3. 可排序列表构建器

What 是什么

该列表构建器可对数据进行排序，让用户将自身关心的数据前置。

When 使用场景

当目标数据量较大，用户需要将自身所关心靠前展示，进行查看、对比、分析等操作时，可以考虑使用。

How 如何使用

用户通过搜索确定源数据中的目标数据，勾选后再通过穿梭按钮将已选择的数据转入已选区；再在已选区中将某些数据进行置顶展示或前置展示。

4. 可自动穿梭列表构建器

What 是什么

该列表构建器可直接将源数据穿梭到目标数据区。

When 使用场景

当勾选的源数据无需反复确认时，可以考虑使用，这大大加快了用户的操作速度。

How 如何使用

用户点击待选区数据的添加按钮，直接可将数据添加到已选区；点击已选区数据的删除按钮，也可将数据回归到待选区。

5. 表格式列表构建器

What 是什么

顾名思义，表格式列表构建器以表格的形式展现，方便用户多维度确认数据范围。

When 使用场景

当用户选取的结果数据需要数据本身的多维度属性来确定时，可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据，然后选中它们。当确认后，点击穿梭按钮将已选择的数据转入已选区。

6. 标题式列表构建器

What 是什么

标题式列表构建器除了展现普通的数据，还有图片等信息。

When 使用场景

当源数据的展现需要更加丰富时，可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据，然后选中它们。当确认后，点击穿梭按钮将已选择的数据转入已选区。

除了以上常用场景的列表构建器设计模式，根据业务的需求大家可以在此基础上继续拓展和衍生，丰富 B 端界面的表现力，及满足业务日益丰富的场景需求。

列表构建器以及衍生案例

基于基础的常用列表构建器，不同产品根据自身的实际需求衍生出了多类构建器，我们一起来感受下吧。

1. sketch 常用功能构建器

在 sketch 界面中，工具栏被设计成只显示用户认为常用的功能。用户只需通过拖拽添加的方式从工具集合中将常用的功能添加到工具栏上。

2. sketch 常用色彩构建器

sketch 提供了常用色彩构建功能，对于设计师常用的颜色可以自行添加出来，形成一份常用色彩库。

3. 应用参数关联构建器

应用需要在关联参数后才可运行。右边为参数集合，左边为应用与待关联参数列表，用户只需要从参数集合里面选择目标参数拖拽到对应的应用容器中，即可完成应用与参数的绑定。

4. 表格列显示字段构建器

当表格列非常多时，用户可以选择列显示字段构建器来将常用列字段选取出来。如此表格会变得轻盈，且数据加载变快。

5. word 底部栏元素构建器

鼠标右键点击 word 底部栏，会出现底部栏上可展现的所有元素。用户点击勾选后，元素被展现到了底部栏上。

6. 自定义模块构建器

富途牛牛允许用户自定义界面模块，方便用户按自身的习惯查看行情和操作等。用户只需从富途牛牛提供的组件库中挑选出自己需要的，配置成自己想要的模块界面即可。

7. 选成员构建器

很多 B 端产品的成员管理模块都需要涉及到添加成员，这时候会用到选成员构建器，将成员从一个池子添加到另一个池子。

总结

列表构建器在 B 端必不可少，产品经理和设计师根据产品本身的业务诉求，基于基础的列表构建器衍生出了很多种玩法，以不断提升 B 端的用户体验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

了解对比如何在设计中发挥作用，在用户界面中可以找到哪些类型的对比，以及为什么它对积极的用户体验很重要。

一般而言，“对比”一词用于描述彼此截然不同的对象。谈到视觉感知，对比度基本上与颜色或光线的差异有关，可以使物体清晰可辨。

为什么对比度很重要？因为人眼自然会捕捉到对比度。图像的最高可能对比度称为对比度或动态范围。更重要的是，对于色盲等视力不佳的人来说，对比度成为他们看到的物体的核心特征，并让他们能够区分它们。

在学术艺术中，对比处理对立元素和效果的排列，例如明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下，对比不仅可以用来吸引注意力，还可以设置情绪和氛围，在艺术品中创造多样性、视觉趣味和戏剧性。

在设计中，对比度是影响效果的关键因素之一。 可扫描性网页或移动屏幕的视觉层次结构。它使设计师能够以一种方式呈现布局，告知用户哪些交互点是重要的，哪些是次要的。对比度可以有效地吸引用户的注意力并将其吸引到特定元素上，因此它在支持数字产品的直观导航和可用性方面发挥着重要作用。

Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例，为页面构建了坚实的视觉层次结构。

UI设计中的对比类型

对比可以基于 UI 元素的不同特性，包括：

A. 颜色：这种类型是人眼最自然和最明显的对比之一；它适用于颜色明显不同的情况，例如，通过互补、分裂互补或三元方案组合，这种类型的对比最广泛地用于制作按钮和其他关键导航元素。在网页布局或应用程序屏幕中立即看到，支持清晰直观的导航。

B. 大小：这种类型的对比是基于首先引起注意的元素明显大于其他元素。

C. 形状：通过使一个元素的形状与其他元素不同来吸引用户的眼球。

D. 位置：在这种类型中，设计师以这种方式更改一个元素的位置，使其看起来不同，例如，文本片段的新段落以缩进开头。

E. 纹理：这里的差异是由于使用彼此明显区分的纹理而建立的。

F. 方向：改变元素的物理位置，使其在其他方向，这样以不寻常的方式吸引用户的注意力。

经常想到的关于对比度的第一个想法是黑白的东西。在没有阴影和多种颜色的情况下，单色图像使用对比度作为表现潜力的主要助推器。这在用户界面中的工作方式相同。更重要的是，与艺术品或摄影作品相比，对比度不仅会影响美感，而且对布局的可用性也有重大影响。因此，深思熟虑的对比度使用是使网站和应用程序用户友好且易于使用的强大方法。

排版对比

另一种特定类型的对比是排版对比，它基于设计作品文本部分所用字体的区别特征的差异。

加拿大字体设计师卡尔·戴尔定义了 7 种核心类型的排版对比：

A. 尺寸对比：它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。

B. 重量对比：粗体在同款较轻的对比中突出。它有助于将注意力吸引到文本的特定部分，并让用户了解它们的重要性。

C. 形式对比：这里的形式是指大写字母和小写字母之间的区别，或者罗马字母和它的斜体变体，压缩和扩展版本，与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。

D. 结构对比：结构意味着不同类型字体的不同字母形式，例如单线无衬线与高对比度现代，或斜体与黑体。

E. 纹理对比：这是关于字体的线条如何看起来像一个整体，这部分取决于字体本身，部分取决于它们的排列方式。

F. 颜色对比：第二种颜色通常不如基本的白底黑字（或黑底白字）强调，因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。

G. 方向对比：这种类型是关于垂直和水平之间的对立以及它们之间的角度。出文本块也有它们的垂直或水平方面，将宽的长线块与高的短线列混合可以产生对比。

另外，还有一些不太流行的对比，比如所谓的孤立对比，就是把一个词或词组放在远离其他元素的地方，这样就可以从人群中脱颖而出，以及对比按节奏（空间间隔）——破碎的部分形成对比并吸引注意力。

对比辅助功能

阅读上面提到的所有内容，很容易假设这里的经验法则是对比度越高，设计越好。然而，事实并非如此：以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读，但过高的对比度会引起眼睛疲劳，使交互更加困难。

根据网页内容无障碍指南 2.0，文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度，以下情况除外：

大文本：大文本和大文本图像的对比度至少为 4.5:1；

装饰：作为界面组件的一部分的文本或文本图像，作为装饰没有对比度要求。

标识：作为徽标或品牌名称一部分的文本没有最低对比度要求。

注意留白

空白是留空的布局区域，不仅在对象周围，还包括对象之间和内部。空白是页面或屏幕上所有对象的一种呼吸空间，因此它极大地影响了 UI 中应用的不同类型对比度的有效性。

总结

生活充满了对比，无论你会采取什么方面。对于所有的生命，我们必须学会如何接受这一点，并尝试享受如此多样化和不可预测的生活。与现实相呼应，设计也充满对比，并尽可能多地借鉴。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

  在生活中，有一些规则是你绝对不能打破的，如果你打破了，将会付出惨痛的代价。在用户界面设计中，也有一些必须遵守的规则。它们被称为“启发式”或提高用户界面可用性的一般原则。这些是经过了长时间测试的可重复的模式，可以帮助用户更好地浏览界面。一个良好的设计一定会考虑到以下原则，一个不那么好的设计总是会缺少其中的一个或多个原则，那么作为一个UI设计师，为什么要忽略这些原则让你的用户如此头疼呢？

1.系统状态的可见性

该系统应在合理的时间内通过适当的反馈使用户了解正在发生的事情。

你要不断地给你的用户展示适当的信息、提示和背景，使他们在任何时候都知道他们在系统中的位置。这可以让用户感觉自己处于控制之中，知道下一步该做什么。这个项目被添加到购物车了吗？编辑的内容被保存了吗？这个过程需要多长时间？我的订单的状态是什么？现在正在发生什么？不断地为用户回答这样的问题，不要让他们猜测或蒙在鼓里。

2.将系统与现实世界相匹配

你设计的系统应该使用用户熟悉的语言，使用用户熟悉的单词、短语和概念，而不是使用专业地术语。你要遵循现实世界的惯例，使信息以自然和逻辑的顺序出现。

使用熟悉的词语和语言，不要让措辞过于复杂。屏幕上的单词或图标的含义应该对目标受众清晰易懂。人们还带有心理模型和经验，可以让他们解释图标。

技术的最大进步之一是图形用户界面的出现。在图形用户界面之前，计算机屏幕上只有晦涩难懂的文字命令，每当你想执行一个动作时都要记住并重复。然后，一切都改变了。屏幕上显示的是文件夹和文件的小图像以及一个手形光标。这些都是人们能够立即理解的视觉符号。不需要解释，因为它引用了现实世界的心理模型。

3.一致性和标准

用户不应怀疑不同的词语、情况或行动是否意味着同样的事情。

有两种类型的一致性：内部和外部。内部一致性是指你的网站或应用程序中的模式要一致。这很简单，比如在所有的页面上保持相同颜色的链接，或者在每个屏幕上对相同的概念使用相同的图标，比如HOME。外部一致性是指大多数人使用的其他软件和系统中的惯例，如购物车。大多数人都熟悉购物车的使用方式。你不需要重新发明什么东西。如果你这样做，你可能会让你的用户更难学会你的购物车如何工作。保持一致，为用户节省不必要的混乱。

4.用户控制&自由

用户经常会错误地选择系统功能，并且需要一个明确的“紧急出口”提示才能离开不需要的状态，并且无需通过扩展对话就能支持撤销和重做。

始终为用户提供一条出路。不要强迫用户执行他们不需要的功能，或者把他们引向死胡同。例如，如果你正在设计一个结账流程，如果用户愿意，就让他们继续购物。如果他们试图在一个应用程序上执行一个动作，当他们在最后一刻不确定是否要继续时，就让用户取消。

5.错误预防

比起错误提示信息更好的是一个精心的设计，它可以从一开始就防止问题的发生。要么消除容易出错的条件，要么检查这些条件，并在用户承诺行动之前向他们提供一个确认选项。

当系统操作到很关键的一步时，如删除文件或向1000个收件人发送电子邮件，要确保用户知道他们将做一些重大的事情。向他们展示确认对话或提供额外的信息，清楚地定义在行动之后将发生什么。这将防止他们在不确定自己的行动时进一步行动。这也将为他们省去大量的遗憾。

6.利用识别而减少回忆

通过使对象、行动和选项可见，尽量减少用户的记忆负荷。用户不应该记住从对话的一个部分到另一个部分的信息。在适当的时候，系统的使用说明应该是可见的或容易检索的。

作为UI设计师，我们的目标之一是减少用户的认知负荷。记忆以两种方式工作：识别和回忆。识别是指你立即熟悉的东西。比如一个人的脸。你看着一个朋友的脸，你马上就知道你以前见过他们。回忆的作用则不同。它是你必须从记忆中检索出来的东西，比如一个人的名字。回忆通常需要更多的时间和工作，因为你的大脑必须处理更多的信息来破译它所看到的东西。

另一方面，识别是即时的。我们希望在我们的用户界面上具有更多的识别，而减少回忆。实践这个原则的一个很好的例子是使用普遍可识别的按钮和图标来表示功能，例如用房子表示 "家"，用铅笔表示 "编辑"。如果你必须为你的用户界面设计新的图标，而大多数人以前从未见过这些图标，那么请使用文本描述符来澄清并减少认知的负担。

7.使用的灵活性和效率

新手用户看不到的加速器通常可以加速深度用户的交互，这样系统就可以同时满足没有经验和有经验的用户的需求。允许用户定制频繁的操作。

当某些任务在你的应用或系统中反复出现时，你可能想让用户更有效地进行互动。例如，使用滑动手势来保存或删除移动应用程序上列表中的项目。删除一个项目的正常方式是打开一个项目，然后按下删除按钮。专业的方式（也是更有效的方式）是通过简单的滑动并立即从列表中删除项目。

8.极简主义的设计和审美

对话不应包含不相关或很少需要的信息。对话中每一个额外的信息单元都会与相关的信息单元竞争，并降低它们的相对可见度。

当为艺术而设计时，如果我们走巴洛克风格，可以用人工制品、纹理和图像填满屏幕。但是当为交互而设计时，我们的目标是降低信噪比。这样做会使我们的界面对用户来说更容易理解。你可以应用这个原则，把屏幕上显示的内容减少到最低限度，不管是图像还是文字，这样用户就可以专注于手头的工作而不会分心。

9.帮助用户识别、诊断和恢复错误

错误信息应该用简单的语言表达，精确地指出问题，并建设性地提出解决方案。

错误会发生，那是不可避免的。用户遇到错误后发生什么是UI设计师的责任。因此，我们应设计可以理解的错误页面和提醒来帮助用户，并提供解决问题的选项或方案。例如，让我们来看看无处不在的404页面。作为设计者，我们知道错误的404页面意味着什么，但用户一般都不知道。为了帮助用户，我们必须把404翻译成简单的语言，加入一些文案，使其清楚地知道刚刚发生了什么，比如 "对不起，我们找不到你要找的页面。这里有一些具有类似内容的页面建议......"。

10.帮助&文件

尽管系统不需要说明就能使用的话会更好，但可能还是有必要提供帮助和说明。任何这样的信息都应该易于搜索，集中在用户的任务上，列出要执行的具体步骤，而且不要太多。

始终让人们能便捷地获得帮助，把帮助放在顶栏或主导航区的显要位置。当用户遇到问题而不能轻易找到解决方案时，他们必须被引导到一个可以解决问题的地方。这可以采取FAQ页面的形式，用一个搜索框提供可能的建议和答案。在没有答案的情况下，系统必须有一个选项，可以通过支持在线询问或电子邮件或电话，直接与支持部门联系以获得额外的帮助。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：磨刀modao

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

第一：你对于互联网好产品的关注度。

第二：你是否有足够好奇心去研究体验产品

第三：你的审美，美感如何？

因此作为一个设计师，必须不断去把玩使用各种APP才能让眼界打开。如果说Pin是去构建设计灵感库，那么每个人还需要有一个App图书馆，当你设计灵感枯竭时候；可以去尝试体验更多好的产品提升自己眼界，今天就分享几个小方法帮你打开全球视野。

第一个神器

▲APP的全部页面状态，以及里面各种场景，按照用户的体验流程一一的截图展示。

▲点击后可以查看大图模式，点击旁边的列表标签，能够搜索很多列表的效果图。

▲点击标签后全网所有关于列表相关的设计截图，都给你找出来了，然后 你就可以找到你想要的图片，顺藤摸瓜，找到更多的APP。

第二个工具：Senstower

第三个工具：producthunt

前言：如何让你的设计更有价值，设计有价值代表你的方案有价值，你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现，归根到底，说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看，在公司里，属于站在用户体验上的提出的设计建议或者设计方案，基于“以用户为中心”理念和交互设计原则，通过自己的设计思维与专业能力，为公司创造更大的价值，不单只是一个美观的输出。

目录：

一、设计行业的发展趋势

a）设计与产品的关系

b）找到自身价值的重要性

二、了解设计师的价值分层

a）设计协同

b）推动业务增长

c）设计驱动产品

三、设计师需要具备的哪些思维？

a）双钻模型解决问题

b）“五度”设计成果评估模型

c）培养数据思维，利用数据提升设计的价值

一、设计行业的发展趋势

a）设计与产品的关系

以前，设计师在团队里的位置会比较尴尬，因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临，设计的价值变得显性化，作为与用户关系密切的设计师，善用好数据，可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力，为公司创造更大的价值，不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切，是整个行业发展的必然趋势。

举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多，甚至有时候需要滑动寻找。寻找点击率大概是不到16%，改动后提高到了40%，不消耗任何其他人力、物力成本，就可以用设计让CTR翻倍。

设计目标：减少首页模块寻找的时间，加大成功点击率，考虑延展性发展

现有问题：主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案：1、主次布局调整，主上次下；2、面积放大提高模块命中率；3、色彩区分主次按钮；4、添加“➕”自定义配置首页主功能，加入人性化设计理念。

b）找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值，按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现，但是这里注重成果的价值，设计师的成果更多是设计方案，方案成果的价值的接受度也是需要从易到难的渐进的。

举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性，且减少用户在使用过程中的行为认知负担，快速同事达成合作，还可以减少不必要的操作和排查，提高易用性。

设计目标：保持产品的统一性，减少认知负担，降低时间和人力成本，提高易用性

现有问题：同个功能存在组件多样、组件学习成本高、反复修改，

优化方案：1、建立组件库；2、功能类型划分，采用同一个组件的变形处理；3、组件集中化； 

二、了解设计师的价值分层

设计师的价值可以分为以下三层：设计协同、设计推动业务增长、设计驱动产品。

a）设计协同

一个完美的执行者，能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力，良好的沟通能力，并参与到产品的探索与构思中来。

举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范，有助于开发高效实现，实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点，由于自己写的数字组件具有局限性，导致体验上无法满足部分需求，如：输入框的定位在数字键盘之上。基于这个问题点，我们提出A/B方案，A方案是自己写的数字组件，B方案是自己写的数字组件延用原生的逻辑，从用户测试得出，A方案是更符合用户操作习惯。

设计目标：组件高效快捷输入，侧重交互体验提升，视觉优化，提高易用性

现有问题：学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案：1、划分主次信息，阅读更直观；2、建立设计规范；3、组件优化，符合用户操作习惯；4、图文结合，按钮优化，加强页面指导性

b）推动业务增长

这个阶段的设计师，会比上一个阶段更能体现设计师的设计价值，并对产品产生一定的影响力。能在以用户为中心的基础上，推动业务的增长，所以这个阶段的设计也被称为UGD（User Growth Design）。

需要设计师具备用户洞见力，数据分析能力，从这两个维度出发，去熟悉业务、分析业务，从而推动业务。

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整，其实在用户调研阶段的热力图数据和观察法分析得出，工具类移动端侧重点在功能区，需要一目了然知道我的当前任务数是很重要的信息，且是高频操作，所以放置顶部；标签栏的添加功能是为了快速添加采购单据和询价为目的，用户群体特殊性，需要一键新建添加的需求。

设计目标：侧重交互体验提升，提高工作效率，提高易用性

现有问题：学习成本高、缺少设计基础、操作路径长、体验差

优化方案：1、操作路径简化，采用路径集合弹框；2、建立设计规范；3、组件优化，符合用户操作习惯；4、一键新建“➕”的功能，达到快速新建

体验连接：http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login（账户/密码zhangsan0001/ liuge1)

c）设计驱动产品

这个阶段的设计师，在团队中的价值可以说是非常大了。从被动的需求接收方，转化为从战略层，能主动提出需求的一方。也是UXD发展的终极方向。

三、设计师需要具备的哪些思维？

a）双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出，该设计模型的核心是：发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。

双钻设计模型把设计过程分成4个阶段：发现问题（挖掘）、定义问题（创意）、构思方案（制作）和交付方案（落地）。

采购APP进行双钻模型思维构建的基础，提供交互迭代的底层设计理论支持，在挖掘需求阶段，属于用户调研阶段；创意阶段，关注点在于问题梳理、实现目的、设计层面；制作阶段，寻找潜在的解决方案；落地阶段，解决方案的分析和验证，输出最适合一个。

b）“五度”设计成果评估模型

用户体验周期（由阿里巴巴UED提出概念）

用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段，每个阶段中有不同的细分。

• 「当前」阶段，分为 3 个过程：

• 触达：用户来访问网站，包括第一次访问网站的新用户和再一次访问网站的老用户；

• 行动：用户在网站上进行相关操作；

• 感知：用户在操作完成后对产品形成的主观感受。

• 「长远」阶段：分为 2 种表现：

• 回访：用户自己再次使用该产品；

• 传播：用户推荐给其他人使用该产品。

如何在具体项目中体现呢？下图，运用一个具体项目举例：

c）培养数据思维，利用数据提升设计的价值

项目与需求上线后，去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较，没有比较就不能进步。

关于数据的用处有很多，举个例子，当两个人对各自的方案争执不休，分别觉得对方不好，但站在各自的逻辑上似乎都能说得通，那怎么办呢？分别做一个A/B测试，数据不会说谎，哪一个方案更有效，一目了然。

那么如何将数据结合到我们的设计中呢？首先在设计前,我们需要先定一个目标，而每一个目标就应有一项对应的数据指标。比如，提高了某一块的CTR（点击通过率），提高CVR（转化率），提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。

拿到了数据之后，还需要分析数据。不管是有没有达到目标，都要去分析原因，进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因，方便以后避开同样的错误；成功了就分析成功的原因，并将成功的策略复制运用到今后的工作中，增加以后的成功率。如此，不管有没有成功，都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。

小结：

以上就是今天所要分享的全部内容。再带大家回顾一下，一共分为三部分：第一个是了解设计师的发展趋势，第二个是趋势下的设计师价值分层（设计协同、设计推动增长、设计驱动），第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

1、ERR引发的思考

创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动...如下

npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log

2、dev build serve?

其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。
npm run XXX是执行配置在 package.json 中的脚本，比如：

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value；

比如，npm run serve 实际运行的是 vue-cli-service serve；

而放在 3.0 以前运行的则是 node build/dev-server.js 文件；

这时候我们再来看上边的问题是不是豁然了呢， scripts 中并没有配置 dev ，所以控制台报了 [ missing script: dev ] 的错误 ；

3、总结

npm run xxx，并不是你想运行就运行的，只有在 package.json scripts 配置了，你才能 run 的，所以不是所有的项目都能 npm run dev/build。

要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。

这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令（比如 serve 那行）

一般项目都会有 build, dev, unit 等，所以起名，最起码要从名字上基本能看出来是干什么的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一. 什么是Vuex?

Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

Vuex核心

上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解.

二. 为什么要使用Vuex?

试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:

组件通讯

• A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App
• App老大说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
• B小弟说: "信息已收到", 它需要on监听App组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.

Vuex就是为了解决这一问题出现的

三.如何引入Vuex?

1. 下载vuex: npm install vuex --save
2. 在main.js添加:

import Vuex from 'vuex' Vue.use( Vuex ); const store = new Vuex.Store({ //待添加 }) new Vue({ el: '#app', store, render: h => h(App) }) 

四. Vuex的核心概念?

在介绍Vuex的核心概念之前, 我使用vue-cli初始化了一个demo, 准备以代码的形式来说明Vuex的核心概念, 大家可以在github上的master分支进行下载.这个demo分别有两个组件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存着共有的商品列表, 代码和初始化的效果如下图所示:

初始化效果

//App.vue中的初始化代码 <template> <div id="app"> <product-list-one v-bind:products="products"></product-list-one> <product-list-two v-bind:products="products"></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' import ProductListTwo from './components/ProductListTwo.vue' export default { name: 'app', components: { 'product-list-one': ProductListOne, 'product-list-two': ProductListTwo }, data () { return { products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] } } } </script> <style> body{ font-family: Ubuntu; color: #555; } </style> 

//ProductListOne.vue <template> <div id="product-list-one"> <h2>Product List One</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-one{ background: #FFF8B1; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-one ul{ padding: 0; } #product-list-one li{ display: inline-block; margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #E8800C; } </style> 

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-two{ background: #D1E4FF; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-two ul{ padding: 0; list-style-type: none; } #product-list-two li{ margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #860CE8; display: block; } </style> 

核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

• 此时我们就可以把App.vue中的两个组件共同使用的data抽离出来, 放到state中,代码如下:

//main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' Vue.use( Vuex ) const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] } }) new Vue({ el: '#app', store, render: h => h(App) }) 

• 此时,ProductListOne.vue和ProductListTwo.vue也需要做相应的更改

//ProductListOne.vue export default { data () { return { products : this.$store.state.products //获取store中state的数据 } } } 

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products //获取store中state的数据 } } } 

• 此时的页面如下图所示, 可以看到, 将公共数据抽离出来后, 页面没有发生变化.

  
  
  

  state效果

到此处的Github仓库中代码为: 分支code01

核心概念2: Getters

我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• 此时,我们可以在main.js中添加一个getters属性, 其中的saleProducts对象将state中的价格减少一半(除以2)

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ //添加getters saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } } }) 

• 将productListOne.vue中的products的值更换为this.$store.getters.saleProducts

export default { data () { return { products : this.$store.getters.saleProducts } } } 

• 现在的页面中,Product List One中的每项商品的价格都减少了一半

getters效果

到此处的Github仓库中代码为: 分支code02

核心概念3: Mutations

我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

• 下面,我们在main.js中添加mutations属性,其中minusPrice这个回调函数用于将商品的价格减少payload这么多, 代码如下:

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ //添加mutations minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } } }) 

• 在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPrice方法

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">减少价格</button> //添加按钮 </ul> </div> </template> 

• 在ProductListTwo.vue中注册minusPrice方法, 在该方法中commitmutations中的minusPrice这个回调函数
  注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload为2 } } } 

• 添加按钮, 可以发现, Product List Two中的价格减少了2, 当然你可以自定义payload,以此自定义减少对应的价格.
  
  

  mutations效果

(Product List One中的价格没有发生变化，原因是getter 监听的是map方法产生的新对象)

到此处的Github仓库中代码为: 分支code03

核心概念4: Actions

actions 类似于 mutations，不同在于：

• actions提交的是mutations而不是直接变更状态

• actions中可以包含异步操作, mutations中绝对不允许出现异步

• actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

• 此时,我们在store中添加actions属性, 其中minusPriceAsync采用setTimeout来模拟异步操作,延迟2s执行 该方法用于异步改变我们刚才在mutaions中定义的minusPrice

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } }, actions:{ //添加actions minusPriceAsync( context, payload ) { setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000) } } }) 

• 在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPriceAsync方法

<template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">减少价格</button> <button @click="minusPriceAsync">异步减少价格</button> //添加按钮 </ul> </div> </template> 

• 在ProductListTwo.vue中注册minusPriceAsync方法, 在该方法中dispatchactions中的minusPriceAsync这个回调函数

export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); }, minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数 } } } 

• 添加按钮, 可以发现, Product List Two中的价格延迟2s后减少了5

  
  
  

  actions效果

到此处的Github仓库中代码为: 分支code04

核心概念5: Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 

---

作者：EduMedia_熠辉

链接：https://www.jianshu.com/p/a804606ad8e9

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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