作为新手小白 该如何入门用户体验设计呢？

《争论点：用户体验设计师的交互指南》  我读完的感受是：

太适合新手小白了，界面中的每一个元素以及交互动作都说的很清楚，小白们看完就会对交互设计有一个清晰的思路，不过文中的很多例子需要大家自己去分析理解哦，我这边就不列出啦～

以下是我看完这本书的书摘和自己的一些理解，拿来给大家分享。

听说看书首先要了解作者和读书的目的：

作者：王争   （这本书是2019年6月出版的很新哦～）

互联网金融用户体验设计师    UI中国2018年度优秀设计师    人人都是产品经理社区年度作家   

简书优秀作者

本书主要介绍用户体验设计师需要掌握的一些技能，以及用户体验的优化策略，主要内容包括用户体验设计入门、概念、元素、体系、组件。

全书每个知识点都通过举例或者对比的形式来介绍，具有直观、易学的特点。

本书适合用户体验设计师、交互/视觉设计师、产品经理学习

 第一章  什么是用户体验 

不管是产品经理还是设计师，我们的目的都是为了提升产品的用户体验。

那么用户体验到底是什么？我们怎么衡量一款产品的用户体验水平？

本章开门见山地介绍了产品用户体验的基本概念，将用户体验分为六大基本原则：有用性、可见性、易感知、易用性、容错性和一致性，并且针对每个原则进行了详细而系统的阐述。

1 有用性

产品是功能的集合，功能的存在意义在于解决用户的痛点，满足用户的需求。

2 可见性

如何让用户快速找到目标功能呢？我们需要建立有效的产品导航体系，明确产品的功能路径。

3 易感知

互联网产品必须要思考如何提升用户对信息的感知效率，让用户在短时间内就可以获取到他们期望的信息或者我们希望他们感知到的信息。

 4 易用性

操作流程指的是用户为了达到某个目标所需要经历的操作和场景转换。产品设计中，我们可以将“操作”理解成交互方式，将“场景转换”理解成经历的页面数。

所以，优化操作流程、提升易用性可以被划分为两个方向：优化交互方式，减少不必要的场景转换（页面）。

5 一致性

一致性原则也可以被称为统一性原则。一致性原则的确立可以极大地节省功能迭代的时间。一致性可以减少用户的学习成本，更能增加用户对于产品的认可度

6 容错性

一个好的产品可以降低用户犯错的概率，以及提升解决错误的效率。

容错性原则分为三个阶段：引导、报错和解决。

看这六个特点有没有一点熟悉？ 在唐纳德 诺曼的 《设计心理学1》里面也有提到这些概念，可见这些特点真的很重要，一点要背诵下来呀～

前几天有分享的读书笔记：《五分钟带你读完设计心理学1》感兴趣的小伙伴可以去看看哦～

 微信公众号：LEO设研所

https://mp.weixin.qq.com/s/7bHS3ieM8X3xCb-y9RiJCA

 第2章 概念 

本章主要列举了几个让设计师比较头疼的问题，例如：设计规范、界面适配、手势设计、异常场景设计。

1 MD和iOS设计规范

MD和iOS风格的不同点究竟在哪里呢？

阴影 

MD风格非常喜欢使用真实世界中的元素的物理规律与空间关系来表现组件之间的层级关系。而阴影就是最常见的表现形式。

导航体系

iOS风格的导航体系主要由底部栏菜单构成，而MD风格的导航体系大量使用了顶部栏菜单和侧边栏菜单。

配色

MD风格提倡使用高饱和度的对比色来提升产品的视觉表现力，iOS风格在色彩的使用上比较克制，用一个词来形容就是“小清新”。

组件

以对话框为例，在iOS风格中，对话框的标题和按钮都是居中对齐的；而在MD风格中却是一个偏左，一个偏右。

当然，MD和iOS风格的差异不仅仅体现在以上说的这四点，还有一些小细节也非常值得我们注意。大多数人都知道在iOS系统中，用户向右滑动界面的时候会返回上一级页面。

因为苹果手机没有物理返回按键，所以这种设置非常受欢迎，但是这在一些特定的场景中就会有问题。

或许在以后iOS和MD这两种设计风格会逐渐融合，但是现在还是有很大差异的。

2 适配

像素与分辨率

适配是为了让同一个界面在不同尺寸、不同分辨率的设备上具备相同的显示效果。

像素：由一个数字序列表示的图像中的一个最小单位；

分辨率分为两种：ppi和dpi。

ppi：每英寸（长度）所包含的像素点数目；dpi：每英寸（长度）所包含点的数目。

 适配原则

适配原则很简单，只要记住一句话：所有的适配都要在同一倍率的方案下完成，同一倍率下组件的尺寸（多数情况）要保持统一。

高度不变，水平方向尺寸或间距自适应  等比缩放

全面屏手机适配

在全面屏手机中最重要的适配原则就是界面内容必须保证在安全区以内。

iPhone系列全面屏手机的安全区示意图，我们可以发现安全区的尺寸比设计尺寸少78pt，这是由“刘海”区和Home Indicator高度相加所得的。

有意思的是，iPhone XR的倍率是2倍图，它是iPhone全面屏系列手机中唯一一款采用2倍图的机型。

3 手势

手势的使用主要有两大作用：（1）节省界面空间；（2）简化交互方式。

目前来说常见的手势有：点击、滑动、拖曳、长按和多点触控等。

1 “拇指法则”

对触摸屏手机进行交互设计，主要针对的就是拇指。

我们根据各区域到拇指的距离，将手机屏幕分为容易区（容易操作）、伸展区（拇指需要伸直才能操作）和困难区（拇指比较难操作）

 2 功能可见性

隐喻设计指的是将现实生活中用户熟悉的事物映射到界面设计中，方便用户理解和记忆。

当我们上线了一些新功能或者用户首次使用功能时，我们可以考虑使用浮层进行引导；浮层的引导适用于简单易记的手势，因为浮层一般只会出现一次。

对隐藏内容进行适当展示

3 滑动优先

滑动手势更容易受到用户青睐的另一个例子是瀑布流的出现，在移动应用程序中我们很少看到分页按钮。一篇文章可以分成好几页展示或直接让用户滑动屏幕查看全文，后者肯定用户体验更佳。

4 场景

手势的设计要考虑到平台的差异性，要做到入乡随俗。在iOS系统中，用户向右滑动屏幕就会返回上一级页面，但是在不同的场景中，这个设定会发生相应的改变。

 异常场景

当检测到网络恢复正常时，页面会自动完成刷新和加载，不需要用户自己手动刷新。

这种处理方式有两个好处：（1）减少用户的操作步骤。（2）避免使用弹框。

在产品设计中，如果可以通过控件自身状态的改变而让用户感知状态的变更，那么我们就没有必要使用弹框。使用弹框来通知用户是我们最后的选项。

 第3章 元素 

界面中的元素主要分为8类：色彩、布局、文字、图标、按钮、间距、插画、动画，这些元素共同构成了产品的界面。

设计师的职责就是在界面中合理地分配这些元素，让用户更好地使用。本章主要介绍了界面设计中基本元素的设计思路。

  1 色彩

通常来说，产品配色体系的建立主要有以下三个目标：

· 视觉区分。

· 调整界面风格。

· 吸引用户的注意力。

单色搭配：

（1）避免用户的注意力被配色吸引，可以让其关注内容本身；

（2）提升用户对于品牌的感知度。

类比色搭配：

类比色搭配是指选用一款颜色作为主色调，将色轮中邻近的颜色作为辅色。因为这两种颜色在色轮中相互靠得很近，所以搭配起来不会有很突兀的感觉

2 布局

一般产品的一级页面大多使用宫格式布局，而二级、三级页面大多使用列表式布局。而以icon、插画、图像为主要表现形式的宫格式布局在视觉设计上更容易出彩。

宫格式布局更可以表现信息的优先级，我们可以通过更改宫格的尺寸来调整用户的注意力分布。

列表式布局更显得中规中矩，在表现信息的重要程度上显得力不从心，其只能通过更改信息的排列次序来表现信息的优先级。

3 文字

产品中的文字主要分为四类：标题类、正文类、提示类和交互类。

 文案的力量

1．用户视角

文案的撰写最重要也是最基本的原则就是让用户看得懂。

2．语气

我们一直提倡产品要有温度，减少“机械感”。

3．一致性

文案的一致性经常会被大家所忽视，这在第1章中也提到了。不只是文案，一致性原则的实现一直都是一个难题

4 图标

我们评价图标的首要标准就是可识别性——用户能否在极短的时间内，很容易地破译你的信息。

图标从来都不是作为个体而存在的。当我们绘制完一款产品的全部图标时，会发现这其实相当于设计了一套图标库。而在图标库中，我们把每个图标共有的元素的集合称为图标的视觉统一。

5 按钮

按钮的三大元素： 形状、填充、内容

按钮是用户使用最频繁的控件，很多的操作流程都是通过按钮触发的。按钮的作用更多的是“录入”，而不是“反馈”。

6 间距

间距的使用有三个主要作用：可以吸引用户的注意力、提升内容的可读性、阐述元素之间的关系。

间距尽量选择8或者12的倍数，这样与不同手机机型适配起来会很方便，上面提到的Airbnb APP使用的间距就都是12的倍数（12、24、36、48px等）。

当然，不一定非要是8或者12的倍数，当界面中的元素比较紧凑时，可以考虑使用4的倍数，例如京东金融APP使用的就是8、16、24、32px。

行间距会对文字的易读性产生很大的影响。这里的行间距主要是指文字之间的高度间距，我们称为行高。行高过大或过小都不利于用户阅读。一般来说，将行高设为字符高度的30%是比较合适的。

7 插画

提升信息传达效率，插画更能传递情绪。

直接配上插画则省去了联想的过程，让用户更容易感知，推送消息的打开率也会更高。

8 动画

对于某些优先级并不是非常高的功能，我们没有必要通过修改配色和界面布局来吸引用户的注意力，可以考虑使用动画来完成一次性地吸引用户的注意力任务。

  第4章 体系 

界面里的每一个元素都不是以一个独立个体而存在的，它们相互联系，相互影响。所以，设计师在设计的过程中，着眼点应该是整个产品。

本章主要通过介绍常见设计体系的构建，探讨设计师如何从产品的维度进行设计。

1 导航体系

大多数导航类应用程序都有两个最基本的功能：告诉用户当前所处的位置和规划出前往目的地的路线。

2 搜索功能

一个完整的搜索功能/流程应该由以下三个方面/阶段组成：

（1）搜索入口；（2）信息录入；（3）搜索结果。

不同产品的搜索框的展示方式存在差异

用户需要查找的内容可能属于不同的类别

3 返回功能

两种返回

我们可以将返回分为两种，一种是返回到“上一步”，另一种是返回到“上一层”。

返回路径

给用户提供两条返回路径

4 反馈机制

为什么要反馈

帮助用户随时感知系统的状态，满足用户的控制感，消减不确定性给用户带来的负面情绪。

怎么样才能设计出让用户满意的反馈体系呢？我们需要解决两个问题：

（1）什么时候给用户反馈？（2）通过什么方式给用户反馈？

常见的反馈方式有6种：弹框、页面、标签、（功能性）动画、红点和声音。

不过标签的使用场景比较单一：主要用于表单，在用户录入信息的过程可以提供逐行报错提示。

当然，表单信息录入报错也可以通过弹框来完成，但是它有两个缺点：

（1）弹框会遮挡界面中的信息，用户看不到表单内容；

（2）如果问题原因和解决方案字数过多，则用户付出的记忆成本就会很大，因为关闭之后就看不到了。

5 分享功能

用户完成任何一个既定的行为，必须具备三个元素：动机、能力和触发器。

只有用户有足够的动机，而且有能力去完成，并且有一个触发器去提醒他，一个行为才可能发生。

动机就是理由，用户做任何事情都需要一个理由，对于分享功能，我们要做的是尽量地细化，兼顾所有的“动机点”。

能力就是降低用户分享的操作成本，让分享更容易被操作。目前来说，最常见的就是点击分享按钮，分享按钮从位置上来说有三种：界面右上角、界面底部和跟随信息流。

6 引导页

引导页设计要素

以一种友好、易懂和有吸引力的方式快速告诉用户这款产品的基本信息。引导页一般有3～4页，主要由插画、图片、文字和动画组成。

1．插画

在引导页中，对于插画的要求不是很高，使用简单的icon类插画也同样出彩。插画对低年龄段的用户来说有着巨大的吸引力。特别是对青少年来说，他们很喜欢带有卡通风插画的引导页。

2．文字

在引导页中，文字并不是占主导地位的，我见过很多产品的引导页都是纯插画的，完全抛弃了文字。出现在引导页中的文字必须要短小精悍，具有概括性。

3．动画

有趣的动画在增强页面活力的同时，还可以很好地娱乐用户，提升他们对产品的第一印象

4.跳过选项

用户不喜欢被强迫看完引导页，所以最好在页面右上角提供跳过引导页的选项。

  第5章 组件 

本章主要介绍常用组件的使用方法。

很多设计师对于组件只做到了浅尝辄止：只会使用Toast通知用户，只会使用文本框让用户录入信息。他们不会深究每个组件最适用的场景。

对一名优秀的设计师来说，一旦一个功能可以由多个组件完成，他就需要选择出那个最合适的组件。

1 弹框

弹框可以分为模态弹框与非模态弹框。

两者最大的区别在于是否强制用户交互：模态弹框出现以后，如果用户不在弹框上操作，则其余功能都使用不了；而非模态弹框在出现一段时间以后会自动消失或者不影响用户的正常操作。

（1）如果需要向用户告知当前系统的状态或者用户在进行一些重要且有风险的操作时，则优先考虑使用对话框

（2）如果需要向用户展示多个操作项，则优先考虑使用底部动作栏；

（3）如果需要让用户明确不同视图之间的关系，给予用户更具指向性的提示，则优先考虑使用浮层。

2 表单

任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮

签是用来告诉用户这个列表项是什么的；

输入框是供用户完成信息录入的；

按钮是供用户完成信息录入后点击进入下一个流程的。

3 tab

根据tab在界面中所处的位置，我们可以把tab分为顶部栏tab、侧边栏tab和底部栏tab

4 标记系统

角标：表现力最强，适合展示信息层级最高或者最重要的功能；

标签：常规标记元素，适合展示不太重要且数目较多的功能；

红点：着重于展示状态的变更；

印章：是表单类多文本信息的标记首选。

5 信息录入

提升信息录入的效率，设计师要牢记一个原则——尽量避免让用户手动输入。因为每个用户都期望以最方便、最快速的方式完成信息录入，他们不愿意打开键盘自己一个字一个字地敲。

列表（下拉框）

列表主要的优点可以总结为以下三点：

（1）节约界面空间；

（2）可以无限量添加选项；

（3）可以展示多层级的选项。

但是下拉列表的缺点也是很明显的：

（1）用户必须点击才能看到所有的选项；

（2）所有的选项都是从上至下排列的，无法体现优先级。

单选按钮

在选项较少，且界面空间比较充足的情况下，推荐使用单选按钮；在选项过多，且存在层级结构关系的情况下，使用下拉列表更加合适。

Powered by Froala Editor