《瞬间之美》读后随笔一

利用好web应用中用户操作的所有交互,因为每个交互都可以成为一个完美的瞬间。本书列举了从用户进入页面到完成一系列操作后退出页面的30多个细微但很重要的交互,并展示出了如何才能把握好这些看似简单但又经常被忽略的问题,所以我认为实用是本书最大的卖点。

接下来我会将书中经典的案例一一列举出来,并加以自己的理解,希望可以让本文读者快速的了解到本书的精华。

一、古藤堡图标

1、原文内容

古腾堡图表中,左上角是第一视觉落点区(POA),右下角是最终视觉落点区(TA)。遵循这个原则,我们可以看到首页左上角基本都是放的LOGO和重要提示,而右下角则是为了让用户做出动作的内容,比方说购买、操作、注册等。

古腾堡图表

2、读后感

在一个页面上,人的眼睛是从上到下,从左到右移动的,基于这个特点才有了古腾堡图表。在web应用中,我们可以看到很多相关的实例。

网易交友类web应用花田的个人主页,就遵循了这样的布局。左上角是个人资料,用户可以一目了然的看到自己的信息,右下角是客户端下载,是为了让用户进行下载的操作。

我们常见的注册页面,基本都是这样的布局:左上角是LOGO和产品简介,右下角是登录和注册信息。看似简单的页面,实际上也有其如此布局的道理。

即便如此,基于产品的特性,并不是所有的web应用都遵循此规则,有的站点的登录信息是放在右上角的,有的站点重要的信息是放在头部的,所以这样的准则并不是通用的,不能一概而论!根据产品的特性合理的布局才是王道。

二、导航设计

1、原文内容

导航是用户浏览网站最重要的向导,设计的合理与否直接决定这用户对网站的印象。导航设计遵循几个原则:合理布局、清晰展示、主动引导。合理布局,用户的操作动作有不同分类,一个分类应该分在一个组里,而不是大杂烩的展示在一起。清晰展示,分类后好如何更好的展示给用户,如果是下拉菜单,是鼠标滑过的时候展示还是点击的时候。用户操作,每个人都想当指挥,所以在在导航文案设计上可以考虑动词,比方说新建、管理、设计等。

清晰合理的导航设计

2、读后感

对于web产品来说,导航是用户接触网站的第一步,清晰明了的导航设计可以让用户乐在其中。

豆瓣的导航分为社区、读书等,而每个一级导航下还有二级导航,其它的信息放在更多,点击更多后显示出来。这里有几个问题,豆瓣二级导航并不清晰,友邻广播、我的豆瓣和小组小站,各自的定义不清晰,如果是新用户,很难理解小站和小组的区别。另外,鼠标滑过更多后出现信息和点击后,哪个更方便些。

除了web产品,客户端的导航设计也同样重要,我们拿word2007版来说,菜单栏包括了开始、插入、页面布局等,其字样上运用了动词,比方说插入、审阅等,这样会让用户有种主人翁的感觉。

三、链接展示

1、原文内容

从一个长的一模一样的链接列表转变成一个有层次关系的链接列表,其过程采用了一种叫做环境提示的手段,文字从大到小,从深到浅,让用户体会到哪个链接是网站想让你看到的,也是最重要的。

修改前的链接列表

修改后的链接列表

2、读后感

我们看到现在很多web应用中都有链接列表,而且它们的展示方式都比较单一。芒丁的近期文章,这些文章都是按照时间进行排序的,而现在给用户的感觉是权重相同,其实它们的权重一样吗?很明显第一篇的权重要高。所以如果采用上述方式,其第一篇的点击量会不会更高些呢!

四、标签云

1、原文内容

标签云,很帅的一个东西,一大堆标签按照它的权重(包括点击量、时间、关注度等)显示出不同的大小、颜色等,是标签列表的升级版。

修改前

修改后

帅,确实很帅,但是用户会理解吗?除非是迫不得已,最好不要让用户去学习新的东西,因为他会想,为什么有的大有的小,甚至颜色还不一样,这都是什么乱七八糟的。如果出现这种情况,那就悲剧了。所以在引用这个很帅很潮的东西之前,你最好想清楚用户会不会买账。书中讲到,用户如果是暂时进入,浏览资讯的话,就直接是列表显示,如果是用户在其中停留的时间较长,而且是专业类的站点,可以引用标签云。

2、读后感

我记得第一次见标签云是在同行的名片上,写着N个标签,然后大小颜色都不同,第一感觉就是好帅!在web应用中,标签云随处可见。

新浪微博中个人信息的修改,自己可以为自己添加标签。这里是以行的形式展示的,并不是真正的标签云。

下面是真正的标签云,每个标签的大小颜色都有区别,热度越高,字体越大,颜色越深。另外,在应用市场的应用推荐、百度影音客户端的默认页面的信

息都是以标签云的形式展示的。在应用标签云的时候,要考虑到用户的学习成本、标签的定义等。

http://aiyou.me/

五、页面标记

1、原文内容

“呀!怎么不对?”我们在有些网站上进行操作的时候时常会这么想,为什么我输入的东西无效,为什么会有错误提示。页面提示在这个时候显得特别重要。

修改前

修改后

注意到变化了吗?在每个字段后面都跟着一句解释,用户ID长什么样子,用户可以依葫芦画瓢,很快的完成操作。

2、读后感

友好的提示可以减少用户操作过程中的犯错次数,降低用户因此而离开的几率。

如图所示,在密码、昵称后面都有相关提示,密码的要求、昵称的要求。

有的站点是在获得焦点后提示用户此字段应该输入什么。

六、自动输入

1、原文内容

在搜索引擎中,当用户输入一个词后,系统会推荐相关的搜索词供用户选择,这个瞬间,很爽,这是一种Poka-yoke机制。如下图,当用户输入Ad的时候,搜索框会出现相关的搜索词。

确实很爽,但是世事总有两面性,这种机制也带来了一些问题,用户会放弃自己本来想输入的关键词而改用系统推荐的,同时有些推荐词可能并不是用户想要的。

2、读后感

Web应用中很多地方都用到了这个机制。

登录过程中,系统记录的用户曾经输入的登录邮箱:文本框获得焦点后,系统出现用户的一系列邮箱供用户选择,这一点做的非常好。

这里有一点,有的站点会记录登录邮箱对应的密码,方便吧!但也有安全隐患,如果非本人的话就悲剧了! 再来看看度娘:

七、页面分页

1、原文内容

分页看似简单,但如果细细的品味,里面还是有很多东西值得推敲的!先看看下面几个分页状态的变化。

好的分页交互应该要考虑以下几点:当前页面页数为不可点状态、当前页面页数要特殊的标识出来、首页的左向箭头为不可点状态或没有、末页的右向箭头为不可点状态或没有、页数字体要够大、显示出此页面一共有的页数,中间可以用省略号代替。

最的比较好的比方说百度的分页:

2、读后感

我们可以先看下几个网站的分页设计:

55步的分页设计,这里的问题:1、当前页面还是可点状态。2、前后箭头和页数字体不够大,很难点到。

中国移动CTC的分页,设计上没有问题,而且多了个跳转到N页的交互,你觉得它有用吗?我觉得没用,多此一举!用户会在这个框里输入个13,然后点击转到吗?除非是非常了解他想要找的内容在哪一页的!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,612评论 4 59
  • 《摔跤吧!爸爸》讲的是印度一个全国摔跤冠军爸爸,毕生的梦想,就是为国争光,站到世界的领台上,.然而他因生活所...
    伏羲妈妈刘金梅阅读 375评论 0 0
  • 每到月初,我的心里总是多了一份期待,期待着“梦想清单大实验”的学习攻略揭晓的那一刻,这个月的学习书单是《改变现在的...
    优质写作侠阅读 641评论 1 7