原标题：小白设计师看完一本书嘚观后感

今天为大家分享的是来自UI中国用户-咩咩ye看《争论点：用户体验设计师的交互指南》这本一书的观后感

作为新手小白 该如何入门鼡户体验设计呢？这是一篇用户体验设计的读书笔记5分钟就能看完～

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

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

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

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

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

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

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

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

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

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

第一章 什么是用户体验

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對隐藏内容进行适当展示

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

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

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

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

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

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

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

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

· 吸引用户的注意力。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

给用户提供两条返回路径

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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