《瞬间之美》读书笔记

写在前面

一个WEB网站,一个APP,或是一个微信服务号。用户使用一款互联网产品,大多是为了完成某件事情,达到一个目的,比如要在下雨天打一辆出租车。他拿出手机,打开滴滴打车的APP,经过一些简单操作,等待5分钟,最终乘车到达他想去的目的地。

假如有时间隧道,可以放慢用户使用的整个过程。从用户下载APP的那一瞬间起,有无数与这款APP互动的瞬间。打开APP看到引导页面,注册,登录,点击某个按钮展开新的页面,诸如此类。而这些瞬间,也决定了用户是否能够合理、顺利地完成他的目的,

设计并实现这些瞬间,则需要进入这条时间隧道,拆解用户整个过程,深入思考每一个瞬间。用户想要什么?如果能更好地呈现信息以便用户可以所想要的目的?

希望自己可以成为这个时间隧道里的一名匠人。

笔记部分

一、人生若只如初见

——用户打开一个新网页在前30秒内要做的事情

1、设计页面布局

方法:1)将所有内容放置在页面上2)不断调整让彼此协调。

笔记:作者强调的是“发现”页面布局,即设计页面布局是一个自然的过程,根据不同内容的重要程度和要达到的效果不同,不断调整各部分在整体页面所占的大小比重、位置、颜色。最终使页面布局清晰明了。整个过程,对于成熟的设计师来说有一种很自然的节奏。

2、导航

人们初次使用某个产品时

熟悉产品的关键:是否是否能够理解整个网站的内部结构。

方式:粗略扫一遍页面的主要区域,找出与自己目的相关的部分,再从中找出关联性更强的部分。

3、菜单

把操作选项分组,同一分类标签下的选项之间有关联性

菜单选项的命名:使用动宾词组,如保存更改、阅读更多,而不是单一的名词,因为用户想要进行的是对某对象进行操作,且可以让人感觉有指挥权。

确保产品的每一个细节都是正确的,eg. Login  VS  log in(sign in),登陆VS登录

4、链接生来不平等(不同重要度的信息展示)

放说明性文字:不是最好的解决方式,需要用户进行不必要的阅读

环境提示:字体大小、颜色深浅程度不同(但不要滥用,仅仅在真正起作用的时候使用)

5、关于“标签云”

不要强迫用户去思考,如为什么标签云里的标签大小不同、各自的含义是什么。

6、其他

创造良好的第一印象还需要知道什么该展现,什么不该展现,有所取舍

一个人不可能知道所有事情,不管学识有多渊博,最重要的是不断自我检验自己做事情的方式,尽可能确保所做的设计正逐步向预期靠拢。

设计中不要留任何漏洞,每个细节都很重要

二、两人对酌山花开

——用户在深入使用网站时所做的事情

1、信息开门见山

给出正确的信息,并且尽可能简明清楚。

为“扫描”而设计:用户使用时只是在扫描信息,而不是阅读信息,短的文字才有可能吸引一部分注意力。

重要的不是信息量有多大,而是我们是否提供给用户真正需要的信息。

2、不要假设用户对了解产品

检查每一个控件,一个从没见过这个产品的人是否也能明白它的意思。如果不,修改使其变得通俗易懂,或加上说明解释。

需要假设用户毫不了解我们的产品,给他们足够的信息以便帮助他们理解。

3、搜索

搜索联想机制:

1)好处:避免用户打错字,使输入更有效率。

2)局限性:盯着键盘输入的用户不一定能注意到推荐列表;用户往往会因为推荐而放弃自己原来更有效的搜索词

3)解决方式:输入一定的字符数后再显示推荐词,3~4个字符(适用于英语)

高级搜索

1)递进显示:人们通常只需要高级搜索中的某几个选项(留一行在快捷搜索中输入过的内容,再加上一行待输入的选项,以告诉用户如何增加搜索条件)

2)重置选项通常没有用。

3)使用高级搜索时,记得让快捷搜索的按钮失效

4)递进显示还可以用来隐藏各种少用的高级功能OR对付BOSS

4、表单填写

布局:相比两列布局,单列布局可以让用户花最少的时间将标签和输入域对应。

确定/取消按钮

1)按钮:文案的意义要明显,帮助用户建立对点击的预期。

2)根据重要程度区分两个按钮,其中一个可用链接(或其他形式显示),

建立清晰的预期

1)使用描述标题栏(进度条)/说明性文字,为接下来的步骤建立清晰预期。将所有步骤的名称都展现给用户,可让用户知道自己正处在哪个阶段。

2)确保每个步骤都很短,每个步骤/填写区域设定一个固定的高度

3)把每个已访问过的面板改为链接形式,用户可返回之前的面板去修改已输入的信息。

即时校验(输入出错时的处理、正确的反馈)

1)慎用弹出的警告对话框,用得越多越没有效果

2)在错误发生的第一时间做出响应,使用醒目的方式提醒用户,并加以意思清晰的提示信息。

3)用户输入完成之后(输入框失去焦点),再显示错误提示。

4)用户输入正确时给予反馈(绿色对勾)

输入框字符数的计算

1)加一条说明性文字,向用户解释输入的字数不能超过的字符数。

2)根据用户的输入,动态显示剩余可输入的字符数。

3)可以到剩余输入字符数较少时再提醒,如120字时不提醒,20字时再提醒。

5、创建个人资料

显示

1)递进显示:对将要填写的信息进行分层

2)空白页面可以鼓励人们行动。

编辑

1)可折叠面板控件:只显示与当前任务相关的工具;隐藏无关工具的同时,保证所有的工具在任何时间都能被用户找到。

2)递进显示

6、对待用户

不要控制任何东西。

抱怨声最大的人、欢呼最热烈的人、有人需要解答时尽自己所能帮助的人、总是在你身边告诉你他们正在想什么的人——最可能成为Otaku

满怀激情的憎恶比毫不关心的冷漠好得多。这部分人也可能转变为坚定的拥护者。

(参考小米)

7、评分:清晰>效率

每个步骤都清晰易懂,即便步骤变长。

8、交互的三种状态

邀请:邀请用户采取行动,即用户看到后能明白自己下一步的动作

操作:用户的操作,重点在于简单又清楚(有时意味着需要更多简单的步骤)

实现:操作完成后给予用户反馈,让用户知道他的交互已经实现了(容易被遗漏)

三、曾经沧海难为水

——用户离开网站,暂时OR永久

1、简单

不要把退出过程做得太复杂或有太多文字

2、动员用户返回

退出后,回到登录页面

简单的登录界面+一些希望用户深入了解的功能(需要简短)

3、尘封的用户

通过邮件(或其他方式)提醒用户

1)告诉用户使用的理由:新功能,提供的价值等;

2)信息应富有人情味,而不是呆板、营销的语气

3)不应太频繁造成骚扰

调查用户离开的原因

1)与离开的用户进行沟通,了解产品不足;

2)组成小组,限制人数,造成排外的感觉

4、若是坚决离开,就随他们去吧~

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 125,067评论 16 537
  • 全书总共有七个部分,前三部分讲的是用户打开一个新的网页前30秒所做的事情,第四部分到第六部分讲的是用户深入网站要做...
    mooons阅读 78评论 0 1
  • 四到六部分 视频播放器的标准化。文字、控件要大;显示已播放和未播放的时间;视频标题嵌入到播放器里;显示录制和发布的...
    mooons阅读 93评论 0 1
  • 《瞬间之美-Web界面设计如何让用户心动》------Robert Hoekman,Jr. 1.布局 布局是内容组...
    胖一回阅读 44评论 0 0
  • 本文转自浙江日报 (文 金梁) 一个微信公众号,打开了自媒体创业的大门。 得粉丝者得天下。只要有精准用户画像的庞大...
    云粉吧阅读 56评论 0 0