这是一本很经典的书,无论你是产品经理、交互设计师、UI设计师、体验设计师...都想推荐给你,这本书的篇幅很短,如果快速看的话,二三个小时就可以看完,但其中的内容却总是让我停下来思考,我看的很慢,很细,甚至觉得作者写的每个字都不想遗漏掉,每当他写到的内容跟我工作中遇到的问题很相似或能给我启发的时候,会停下来思考和回忆,之前在这个地方我是怎么做的,是怎么想的,如果是现在再去做,会有什么不一样。
只是有些遗憾,我现在还不是一名设计,只是一名普通的前端开发人员,没有做过产品,也没有研究过交互设计和用户体验设计。所以我具不出什么好的例子,更没有办法像设计师一样说的很专业,只是仅凭前端开发工作中的遇到的需求,谈谈自己的感受,文字内容很不专业,也没有什么借鉴的意义。
这份笔记只是对自己体会的一点梳理,以后会不断的学习交互设计类的专业知识,希望以后每次看这本书的时候,会有更深的体会和感想,甚至再回过头来笑自己当初真的很傻很天真。
所以,如果您还想继续看下去,请尽量只看引用部分的内容,但如果您看到我自己的心得体会中有哪些错误的地方,请您一定一定帮我提出来,在此先真诚的对您衷心的感谢,我一定会尽快回复您,并及时改正。
搞清状况 > 第 22 页
每当纠结于某个设计时,我都会后退一步,想一想:“用户在这里真正想干的是什么?”答案就是简单设计的指南针。这个办法很管用,特别是在做一些小设计(比如网站中的一个页面),或者在我大概知道要设计什么的情况下。
提问的方式非常重要。比如,可以问:“我在这里打算干什么?”换句话 说,就是“我正在设计什么”。这么一问,答案就清晰了,设计也会变简 单。这是个好的开始。
然而,关键在于我基于什么来做设计。如果用户重要,我就关注用户是否觉得简单,那么更好的提问方式就是“用户在这里要干什么”。比如,用户在这一步要注册网站,那我的任务就是让用户感觉注册很简单。
但是还可以再深入一层来提问:“用户在这里真正要干的是什么?”这样问很厉害,因为它会引发我思考“为什么”。
用户注册是因为他们想要保护重要的东西(比如他们的银行账户信息)? 想得到你的奖励(这个理由比较弱)?还是因为我们让他们那么做的,其实是我们设置了障碍? 不管问题大还是小,你的愿景都应该聚焦于用户,应该能帮你理解发生了 什么,以及为什么。
在工作中,最常遇到的就是产品提了需求,UI设计师发来了设计稿,每当这个时候,总要盯着眼前的设计稿看一会,然后就会在心里问几个问题:
这个需求的目的是什么?
如果用户注册了,就拥有了不一样的权限,有更多的优惠,更好的用户体验,能保存自己比较私密的内容,等等。当遇到需求的时候,我们要把用户做这件事情的原因列出来,做这件事情之后的结果列出来。还要考虑很多其他的可能性,以及做完这件事情之后的结果真的会是我们预想到的吗?
要问的问题太多了,每一个小的环节,思考的过程就是在一个接一个的问问题,然后通过数据、依据甚至经验来回答你的问题,慢慢的,整个需求的脉络就清楚了。
到底想让用户做什么?
分享功能,相信很多人都用过,当这个需求是希望用户去分享,然后获得对应的优惠时,用户很可能就会去分享,而点击哪里分享,分享的流程,分享时显示的内容,分享之后对方点击之后会看到什么,而用户的界面上又会发生哪些变化,这些都是我们需要认真去思考的,这个流程如果换作是你来,你会很反感吗?还是觉得很顺利,顺手就做了呢?
还是能帮用户解决什么问题?
当用户在平台上消费了,需要开发票,这个时候我们就需要给他提供开发票的功能,开发票的流程往往有点繁琐,因此我们更应该要把整个流程梳理清楚,让用户每一次都觉得很简洁明了,虽然过程有点多,但很容易成功,提升用户体验,下一次再要消费的时候,他就会首先考虑这个平台了。
有时候我也会鼓起勇气问产品,你确定要这样做吗?这样真的合适吗?
现在,我不会在问他这个问题了,但是我会在心里问自己。如果是我来设计,我应该怎么做。
走出办公室 > 第 26 页
很少有用户是在这种安静的环境下使用 产品的。即使是在工作中,他们也经常会被打断,漏掉某些信息,改变自己的 想法。用户体验是否简约,必须要在纷乱、多变的环境中才能考察出来。
如果你想给所有人设定一个愿景,那需要先到用户实际使用你产品的环境中做个调查。实地调查经常会转变你的设计思路。
到用户日常的工作环境中进行短暂的拜访参观,你能通过几个小时的观察 收获很多。
前不久,我的老板给我们分享了不同的用户在不同状况下对同一件事情有不同的反应或想法。
比如电梯,大人每次走到电梯前,如果你是想下楼就会按向下键,上楼就会按向上键,而老板家的孩子如果想下楼,却会按向上键,老板问她为什么按向上键而不是向下键呢,她说因为要先让电梯上来啊。
你看,我们坐电梯是我要怎样怎样,而孩子则想的是电梯要怎样怎样。
比如在公交车上,你是站着的,手里拿着手机,正在查接下来要走的路线,你打开了地图,要进行放大或缩小,这个时候,你需要一只手抓住头顶上的扶手,另一只手在操作地图。公交车正在运行中,人本身都站不稳了,还要对地图界面进行操作。按照我之前了解到的,如果放大,需要两个手指在地图上撑开,如果缩小,需要两个手指靠拢。这样的操作会拿不稳手机,很容易就掉到地上了。有很多不知道,还有更简便的方式,只需要单个手指,双击就是缩小,双击的同时按住拖动就可以放大,这时候,操作地图的难度就降低了,手机也能拿的更稳了。
作为一个互联网行业的从业者,我们每天做的东西,很多时候,就是我们自己生活中也需要用到的,很多场景在我们自己的生活中都会遇到,我们甚至不用去想用户会在什么糟糕的环境在使用我们做的东西,只要回忆一下自己那些不太方便的使用场景下使用自己开发的或设计的产品就能有很多很多可以优化的点。而如果你设计的产品是给特定一群人用的时候,那最好能去到客户的现场,至少也应该跟他们聊一聊,问问他们有哪些地方是他们特别在意的,哪些问题影响了他们。
总之,多思考,多问。
正确选择“做什么” > 第 44 页
记住,你最应该关注的是用户行为而不是你的设计。如果在这个阶段过多地描述自己的解决方案,就会把自己绕进去。正确的做法是只描述一定程度的细节,能说清楚就行了。比如,一开始可以写“快速拍摄并分享照 片”,然后列出用户要执行的每一个步骤,详细程度要前后一致。
描述用户体验 > 第 46 页
故事应该用三言两语把核心体验表达出来。对于一个视频应用来说,可以这样写: 你站在城市街头,忽然一阵骚乱:詹妮弗 • 劳伦斯正向你走来。你 迅速从口袋里掏出手机,把它交给一位路人,请他帮忙拍了一段 你和詹妮弗的视频。然后你把视频分享到 Facebook。
很多创业者,他们都希望自己会讲故事,能把自己项目,以很精彩的故事形式讲给投资者听,继而希望他们能给自己的项目投资。我想这或许是会讲故事非常重要的一个体现吧。我也希望自己会讲故事,希望在这方能有所提升。
砍掉残缺的功能 > 第 90 页
问题绝非“为什么应该去掉它”,而是“为什么要留着它”。
聪明的默认值 > 第 112 页
有的人可能会修改默认选择的车型,但提供默认值总比提供一张空表要好。
视觉混乱 > 第 118 页
以下是一些减少视觉混乱的方法。
• 使用空白或浅背景色来划分页面,不要使用线条。
为什么?
因为线条在 前景中,而空白和颜色在背景上,前景会更多地吸引人的注意力。
• 尽可能少使用强调。
如果仅加粗就行了,就不必又加粗、又放大、又变 成红色。
• 别使用粗黑线,匀称、浅色的线更好。
• 控制信息的层次。如果页面中信息的层次超过了 2 或 3 个层次,就会导 致用户迷惑。比如说,要少用数字、大字体或粗字体,最好总共不超过 3 个层次:标题、子标题和正文。
• 减少元素大小的变化。例如,如果你在设计某个报纸的电子版,可能会 有一大块放置头条新闻,另有 5 小块放置次要一些的新闻,千万不要让 版面上出现大小都不同的 6 个区块。
• 减少元素形状的变化。整个界面中最好只使用一种按钮样式,使用 3 或 4 种按钮样式就太花哨了。
删减文字 > 第 120 页
删除文字有下列三大好处。
• 重要的内容“水落石出”。
• 消除了分析满屏内容的麻烦。
• 读者会对自己看到了什么更有自信。
使用描述性链接。通常位于标题下面的“单击这里”或者“更多内容”链 接都想说明要把读者带去哪里。把标题本身作为链接可以让页面更清爽。
精简句子 > 第 122 页
不使用介词(“对于 / 根据 / 为了 / 基于 / 通过 / 关于”)。
这些词会弱化句 子的谓语,因此要尽量省略。
• 不使用is的动词形式(“正在消耗时间”),尽你所能使用其他表述方式(“花 时间”)。
• 把被动句式(“时间是被这个项目所需要的”)转换为主动句式(“这个项 目需要时间”)。
• 删掉索然无味的开头(“大家都很容易看到这一点,……”),开门见山。
• 减少废话。在表达相同意思的前提下,用“每天”代替“在每天的基础上”。
之前工作的那家公司在这一点上做的特别特别差,每次有重要活动需要做H5页面的时候,整个页面上全部分都是文字,有的时候还要分好几屏才能放完,当你点击按钮进入二级页面的时候,又是通篇的文字。
当我站在用户的角度时,要看完这样一大篇文字,最少需要十几二十分钟,他们大部分是公司的创业者或合伙人,即使是手下的员工,他们的时间也是非常宝贵的,根本不可能认真看文字,有的时候员工为了省事,根本不会认真看,因此转化率一直都非常的低,很多订单都是靠销售人员在线下跟客户沟通才签约的。
在做开发的时候,有的前端同事为了图方便,就直接切成图放在页面里,有几大段就切几张图片,如果图片压缩了,清晰度也会降低,用户体验变差,而页面加载的时候,图片太大影响了加载速度,打开页面的时间变长了,用户体验又变差了。当产品说这个地方的文字需要替换时,先让设计修改设计稿,然后让前端切图替换页面上的图片,需要至少两个人配合才能完成,费时费力,真的是有点想不通。
当然,他们之所以一直这样做的原因,是因为访问量非常的低,有的时候一天可能不到100次,而且是销售人员单独发给用户,用户才会去打开的,所以才会用这种最简单的方式。
这样的情况在我们的工作中可能遇到的还不少,有些事情真的很需要改变,变的更专业,更合理,那就先从自己开始吧。
组织 > 第 136 页
十年的设计。如果把设计比喻成谈话,那么起头总是最难的环节。好的设计深谙此道,它会告诉你:“嘿,从这里开始。”
分块 > 第 138 页
有关分块的经典建议是把项组织到“7 加减 2”个块中。理论上讲,这个数 字是人的大脑瞬间能够记住的最大数目。如果眼前有一个包含 10 项的列 表,那么你很可能会像“狗熊掰棒子”一样,前脚看完后脚就忘了。
字母表、热门程度和格式 > 第 144 页
关键在于根据相关索引来组织项目。字母顺序适合人名,热门程度适合排 名前 100 的电影,格式分类适合某些大会议程。选择与任务相关的索引很 重要。
分层 > 第 156 页
感知分层借助于颜色很容易实现。除了颜色之外,使用灰度、大小缩放, 甚至形状变化,都可以实现感知分层。
以下是几点提示。
• 尽可能使用较少的层。内容越复杂,所需的分层反而越少。
• 考虑把某些基本元素放在常规背景层,因为一个元素很难放在两层里。
• 尽量让任意两层之间的差别最大化。20% 的灰度和 30% 的灰度很难让人 分清。类似地,在选择颜色时不能忘记色弱的用户。
• 对于相对重要的类别,使用明亮、高饱和度的颜色,可以让它们在页面 上更加突出。
• 对于同等重要的类别,利用感知分层技术,使用相同的亮度和大小,只 是色调要有所区别(就像伦敦地铁图中的地铁线路那样)。
要想知道设计是否成功,可以眯起眼睛来观察屏幕,看是否能区分出不同 的层。
非结构化数据 > 第 204 页
我曾遇到过一个最令人讨厌的表单,该表单要求我在输入信用卡信息时不能使用空格,而且不让我在电话号码中使用括号。实际上,只要编写几行代码,就可以在后台解决这些问题。这完全是那些公司在强迫客户不折不扣地遵守他们的数据格式规则,是懒惰和无礼的表现。
这种情况在工作中也很常见,表单验证不够精细,常常当用户输入了文字之后不管怎么改都提交不了,而且错误提示还不能实时显示出来。
例如用户要对酒店提一个问题,一般这种时候用户可能是投诉或者比较关键但又不是特别急的问题,可能会有一些不常见的标点符号,表情等,用户删来删去,改来改去,都是提交失败,到最后生气了,就直接放弃了。
我不明白为什么标点符号不能输入,如果是需要转义的,可以获取到用户的内容之后进行转义一下,如果是表情,实在不能用表情,可以直接去掉表情去提交,最主要的是把用户的意思传达过。但怎么改都提交不了是真的很难让人接受。有的时候就是开发懒,或者是产品不负责,像这样的需求,提出来都是错误的,更别说还允许上线。
取得共识 > 第 214 页
不要尝试说服别人,听他们说,让他们自己判断,让他们自己承认问题。
参考书目
《思考,快与慢》(Daniel Kahneman 著,2012)探讨了人们如何 决策,以及偏见对下意识决定的影响。理解人们什么时候、什么 情况下会依赖不理智的决定,对设计让人觉得简单且不会误导人 的系统非常重要。