提升用户体验:利用转场动画来削弱人们对时间的感知

在各大公司的产品当中,利用转场动画来削弱人们对时间的感知的例子比比皆是,其中最为明显的就属 iOS 系统了。

转场动画可以削弱人们对时间的感知

有用过 iOS 设备的人都知道,每当你点开一个文件夹或者应用的时候,都会有一个非常自然、华丽且流畅的转场动画,其作用不仅仅是为了好看,更是为了掩盖应用启动所花费的时间,而这个时间可长可短,依系统的优化程度而定。

细心的朋友会发现,iOS 7.1.x 的速度要比 iOS 7.0.x 快不少,其具体表现就是 —— 同样点开一个文件夹,前者的转场动画时长要比后者短了不少,给人最直观的感觉就是速度变快了。iOS 7 发布一段时间后,优化工作做足了,就可以把转场动画的时间设定的短一些,同时不会影响到操作的流畅度。

由于用户将注意力都集中在转场动画上了,因此不会有“空等”的感觉(空等让人感觉时间很漫长,让人不安、焦虑),尤其是在生活节奏不断加快的今天,“空等”容易让人产生罪恶感(我不要再浪费时间了)。

转场动画还有什么作用?

转场动画除了能消除人们“空等”的感觉,还能起到强调事物、体现事物间关联的作用,先来看看几个例子。

例1:输入

上图中的转场动画足矣说明动画对于用户的实用性。点击“Remenber me”的选框,输入联系方式的选框随着转场动画逐渐展开。动画的发生会强化用户清晰地意识到“单机选框”和“输入联系方式”之间是有联系的,并且是直接的因果关系。

例2:抖动

当我们在填写表单的时候,经常容易忽略一些细小的错误,这也使得我们往往需要将可能出错的地方从头到尾都梳理一遍。然而很多时候,系统提醒我们信息错误的时候(尤其是在支付环节中),报错信息会让用户感到沮丧,检查的过程会令人无所适从,最终会有用户直接因此而放弃继续填写表单。小幅震动的界面,配合着错误内容的标识会明确地告诉用户,信息有误。这种类似摇头的交互行为会更加人性化,从而降低了用户流失率。

例3:错觉

用好转场动画,可能会让用户感觉时间过的比实际的更快。谁都明白,当用户在等待的时候,时间会慢如蜗牛。可是当等待过程中有动画效果的时候,即使等待时长不会改变,人的注意力会被吸引过去,自然而然地会感觉时间一会儿就过去了。这种动画效果就是利用了人对于时间的错觉。

例4:转换

上图中从Payment Info转换到Pay $25.00使用了轻微的色彩转变和滑动特效,提醒用户这个过程正在推进。而当支付完成之后,色彩从蓝色转为绿色,转变明显而醒目。在点击了Pay之后,伴随颜色变化的还有一个显示支付成功的短暂的动态图标,提醒用户支付完成。我特别喜欢这个设计,因为它会让用户感到支付完成的快感,让他们觉得完成支付是一件轻松愉悦的事情。

总结

无论你在构建怎样的应用程序,合理地使用动画效果,会让用户更明白操作的结果,改变他们对于时间的感知,并且令他们愉快。

(转载) 通过设计让APP变快

apphead20131212-624x201

一、后台的执行

核心思想:通过在状态栏运行加载的程序的同时,可以使用户可以做其他的事情

举例说明:

app2013121201

Instagram

当点击“赞”的按钮后,按钮的字样立马就变成了“已赞”的状态;其实看图中的红色框的加载图标,它只是在后台运行默默的加载程序;这样做的好处就是让用户不需要一秒钟的等待,避免了当网络不好的时候那个圈一直在转的情况。

app2013121202

发微博平台

例如:我刚发表了一条评论,右边红色框的区域立马显示在评论列表,但实际上我回复的这句评论,对方不能立即收到消息提醒;是因为在看状态栏的​,我发的那句话正在后台程序默默的加载运行呢;这样后台执行它的任务,我可以继续查看其他的评论内容,也不耽误事。

二、在载入前显示内容

核心思想:让用户感觉很快想看到相关产品的信息

举例说明:

app2013121205

Appstore详情页

当用户从列表进入详情页的时候,最上面也就是左边图红色框的区域,毫无加载状态,立马有产品的信息显示,让人感觉点击后内容立马就出来了。

三、充分利用好缓存

核心思想:利用缓存机制,提高页面的打开速度

举例说明:

app2013121206

蝉游记的“游记”和陌陌的“添加微博好友”等页面,都利用了缓存

缓存可以把网络数据保存在本地,下次打开时无需要再次向网络请求,减少流量并减少等待时间。在设计时,可以先显示缓存内容,同时后台到网络上拉取新内容,若有新内容立即换或下次访问时替换。

四、界面先行,网络随后

核心思想:对于一些数据量很小,且失败可能性较小的网络交互,或者是在没有网络的情况下,用户也能够顺畅地使用APP

举例说明:

app2013121207

微信朋友圈的“发图片”和微博的“收藏”功能

朋友圈即使在没有网络的情况下,也可以发布图片,等有了网络之后自动上传刚发布的内容,这一点体验做的很棒(PS:希望微信可以快点更新ios7扁平化)

微博的收藏,当不想收藏的时候,再次点击,帮你可以做其他的事情了,此时会在状态栏自己努力加载。

五、预测用户行为,提前开始任务

核心思想:预测用户下一步操作是什么,提前为用户铺好道路

举例说明:

app2013121208

网易云阅读

当用户从列表页进入详情页,查看一条信息之后往下拉就会看下一条,并且内容已经加载出来,往上拉就会回到上一条,这样很符合大众的习惯;这样做避免看完一条之后点击返回在从列表点击进去看另外一条。

app2013121209

Android的更新提醒

它是在安装包自动下载完成之后提示,避免了让用户等待下载的过程。

六、尽量少的让用户输入,输入时尽量多给出参考

核心思想:移动端的虚拟键盘既有它的优点,又有它的缺点,缺点主要有:
虚拟键盘的空间限制,手指的点击经常造成误按;
输入定位无法反馈(比如说我输入丁丁,结果搜索列表出现丁丁历险记,其实我是想搜索中国好声音的丁丁啊,嘿嘿)

举例说明:

app2013121210

百度地图

例如:我想找万达国际影城,当在输入框搜索「wand」几个字母的时候就会列出所有关于万达方面的内容,很容易就找到​,这样避免用户多输入的状况,很贴心。

原文作者:亚茹有李,转载地址:http://www.uisdc.com/app-user-experience

(转载) 别让用户发呆:设计中的防呆策略

Fool-Proofing-01

暴雪:生活中总会有些状况让我们无所适从摸不着头脑:面对一排电灯或空调的按钮,哪个才是控制我想要的?开锁时掏出一把钥匙,哪个才是正确的?拿起U盘插入电脑,朝那个方向才是对的?……类似的犹豫充分说明,你呆住了。现在,是需要”防呆设计”来拯救你了。

防呆定义

防呆(日语:ポカヨケ;英语:Fool-proofing)是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,让操作者不需要花费注意力、也不需要经验与专业知识即可准确无误完成正确的操作。广义来讲,防呆就是如何设计一个东西,而使错误发生的机会减至最低的程度。避免工作错误的发生,进而达到”第一次就把工作做对”之境界。

防呆与设计

最常见的防呆设计在电脑中,为了让普通用户在组装电脑时不会出错,相关零组件大都有形状相符的防呆设计。生活中也不乏防呆设计的应用,下面这款2013年iF获奖作品微笑钥匙(Smile Key)就通过防呆设计解决了关于钥匙的4大难题。自然的弧度,更加贴合拇指和食指,用着更舒服;更容易分辨钥匙的朝向—再不用去记忆哪面是正确的朝向,自然贴合拇指与食指的那面,便是正确的;钥匙平放的时候,因为这弧度,更容易被拿起来;钥匙上面有数目不等的凸起小颗粒,用于区分谁是谁,比如说,1个小颗粒是办公室的,2个是自家大门的。这在晚上看不到的时候尤其方便,再不用一串钥匙挨个尝试了。

Fool-Proofing-02

防呆设计经常使用感官替换的方式来进行设计。如下面这款杯盖,通过视觉替代触觉进行防呆。可以感应杯中液体的温度显示不同的颜色。通过视觉的警示提醒人们此时的饮品很是烫口,避免一时糊涂拿起就喝了。

Fool-Proofing-14

再如下图所示的路边的压痕,则刚好相反,通过触觉代替视觉提醒对驾驶到路边的车辆进行防呆提醒:你的车辆已经偏离主行车道了。通过行驶过程中车辆的颠簸感,比视觉引导更有效的指示驾驶员尽快调整方向。

Fool-Proofing-03

防呆设计的重要目标是避免错误。喝咖啡留到桌子上是不是很懊恼?那就别让这个错误发生:来自设计师Kim Keun Ae的创意,防污渍咖啡杯在杯子的腰线上开了一条环状凹槽,于是,顺着杯子边沿淌下的咖啡渍,流到这里就会横向发展,再不会继续往下弄脏桌子~

Fool-Proofing-04

另外,防呆还会通过设计在适当的时候对用户进行提醒,帮助用户完成任务。来自设计师Risako Matsumoto(松本理紗子)的创意平衡花瓶也利用了防呆的理念:优雅的提醒你浇花。一根木头支架,一头嵌着花瓶,另外一头则是可以移动的配重滑块,整个结构通过挂钩固定在墙上,形成一个类似天平的结构。当花瓶中的水减少,支架就会开始倾斜,水减少得越多,也就倾斜得越厉害,从而醒目地提醒你,它该加水了。

Fool-Proofing-15

夜间的提醒也很重要。停电了,却怎么都找不到蜡烛?澳大利亚工作室Den Studio带来的荧光蜡烛(Blackout Candle),通过防呆设计试图解决这个问题:它采用了特殊材质的石蜡和发光粉混合制作,白天发光粉吸收光的能量,晚上发出荧光;其次,造型方正,在底部有个小开口,刚好可以塞进去一盒火柴——于是,即便突然的停电让你措手不及,但是找到了蜡烛,你就能找到火柴~

Fool-Proofing-16

从上面几个案例中可以总结出防呆设计的原则:”避免错误,无需思考”,细化如下:

  1. 即使有人为疏忽也不会发生错误──不需要注意力。
  2. 外行人来做也不会错──不需要经验
  3. 不管是谁、无论何时都不会出差错──不需要专门知识与高度的技能。

从用户层面分析,防呆设计就是以非专业、无经验的用户角度出发,通过设计引导这类用户正确的操作。工业设计如此,交互设计也不例外,下面就是笔者对交互中的防呆策略的一些思考。

交互中的防呆

简单地说,防呆设计就是如何去防止错误发生的方法。人们总是在怪罪一件错误的发生,而较少去动脑筋想想如何去设计一些方法来避免错误的发生。所以我们需要正视错误,面对错误,想方设法的避免错误或缓解错误。在交互设计中,用户可能的错误正是我们应该预防的方向,我们可以参考防呆设计的思路,通过设计,引导用户正确的操作。

1.限制操作

想象一下:点击某个功能按钮,然后提示不能使用,应该怎么怎么样先……此时你是否会呆住:既然不能用,为啥要放出来做烟雾弹?所以,当用户当前状态不能进行一些操作时,把这些操作隐藏起来吧。给予用户适当的行为约束——为用户封闭掉不正确的道路。下图所示,如果浏览器中已安装Evernote Web Clipper,该页面对应按钮显示为灰色不可用状态,避免用户重复安装。

Fool-Proofing-17

根据用户的使用状态,对应进行功能项的展示和隐藏,是有效避免用户误操作的常用手段。由状态所限制操作的设计在很大程度上预防了用户可能发生的操作失误。

另外,通过有趣的形式提醒用户达到限制也是一个友善的防呆做法。Feathers是一个第三方Twitter 客户端,点击那个可爱的 Twitter 鸟发推。随着用户逐渐输入内容 Twitter 鸟会逐渐变绿,防止用户输入超过140 个字符限制。

Fool-Proofing-05

2.预见错误

给予用户必要的预判性错误提示——在用户出错发呆之前,告诉用户,这样走可能会出错。
当用户在午夜提到”明天”时,siri会询问用户具体的时间,以防用户错误的做出对明天的定义。

Fool-Proofing-06

当电量不足时,Dropbox会自动停止正在进行中的照片上传动作。这个贴心的设计让用户避免了因上传而耗尽电量手机关机的囧态。

Fool-Proofing-07

当用户的一个行为很可能会引发预见性的错误,越早提示用户,并给出可行性的建议,错误越容易被接受和改正,用户的损失也就越小。

3.跳出空白

空白页面一定是空白的吗?NO。单纯的空白页面会让用户焦躁不安:发生什么了?我现在该怎么办?……无路可走的焦虑肯定是很难受的,为避免这种心理,我们需要给到用户适当的出口,让用户在空白页面也有路可走。
例如在空白页面,提供用户解决办法,或提供给用户其他出口,引导用户接下来的操作,让用户不在空白页发呆,帮助让用户快速离开空白。

Fool-Proofing-08

又或者,给用户以与众不同的空白页,让用户可以在空白中思考。Clear中,当用户删除所有list或新建一个空白项时,页面展示出一些有意思的语句,让用户不再空白。

Fool-Proofing-18

4.步骤状态

在一些复杂的操作时,用户会产生一定的心理疑问:什么时候才是个头呢?此时,为了避免用户发呆,需要告诉用户操作所处的状态和接下来的操作步骤。

对用户在这个页面需要做什么、已经做了什么有清晰的划分,对现在需要进行的、当前所处的操作阶段予以高亮显示,吸引人进行操作;对于还未进行到的操作阶段也预先做了一个介绍,很清晰的介绍了完整的任务流程。

Fool-Proofing-09

Fool-Proofing-10

另外,对状态的巧妙标识也是防止用户发呆的一个有效途径。操作过多,用户可能已经遗忘了一些状态,比如浏览网页时哪些看过哪些未看过。Opera 在新开网页标签上设计了折角处理,提醒用户这个页面还未浏览。

Fool-Proofing-19

无确切进度时,随着时间的增加改变wording,以提醒用户当前页面仍在努力加载,避免用户误认为页面卡住。

Fool-Proofing-11

5.唯一操作

不具备专业的知识、对操作的流程没有预期的普通用户,在一些流程复杂的交互操作前总会或多或少的迷茫。如何降低这种迷茫?解决方法就是让用户单次只需执行唯一操作,不要把复杂的选择题抛给用户,让用户发呆。

Fool-Proofing-20

例如在电脑杀毒这个相对复杂的任务中,一次只提供给用户唯一明显按钮,避免用户在选择时左右为难。把简单留给用户,把复杂留给自己。用户只给用户唯一的推荐,别让用户思考。

6.想你所需

用户在操作时不会保持高度的谨慎和耐性,所以必要时要帮助用户思考。帮用户想他没想到的,帮用户想他所需要的。如新浪微博使用邮箱做为登录名,用户在输入@ 后,将会出现输入建议,输入建议里有常用邮箱的后缀以辅助输入。此时用户就可以直接选择无需输入。

Fool-Proofing-12

根据用户场景设计用户想不到的需求是防呆设计的较高境界。当你使用手机竖屏浏览时想将内容放大你会怎么做?没错,将屏幕翻转至横屏显示,之后触控放大。谷歌翻译对这一场景进行了延伸设计:当翻译完句子后,如果将设备横屏旋转其界面会自动全屏并放大,方便展示给旁边的人观看。这个贴心的细节提前考虑到用户使用翻译的场景,帮助用户省去一步操作。

Fool-Proofing-13

替用户思考,帮用户想他们所想不到的,不局限与让用户停止发呆,还要让用户意想不到。

结语

防呆设计就是如何去防止错误发生的方法,让非专业、无经验的用户可以第一时间完成正确操作。最后,总结下防呆在交互设计中的应用。

避免错误

  1. 限制操作:将暂时不可用的操作隐藏起来;
  2. 预见出错:将用户可能的错误提前展示,比事后诸葛要好;
  3. 跳出空白:别让用户止步与空白,空白应有更广的发挥空间;

无需思考

  1. 状态指引:让用户了解当前的状态和未来的进程,防止用户迷失;
  2. 唯一操作:复杂的任务流中不要让用户过多选择,简单唯一就好;
  3. 想你所需:用户是匆忙的,我们要替用户想到他们想不到的事情。

总之,我们应该抛开自己的高级用户视角,在用户可能”发呆”的各个时刻精雕细琢。深入挖掘用户行为习惯和心智模型,真正从用户的角度去分析使用上可能会出现问题,通过系统的设计去尽量避免错误的发生——把简单留给用户、把复杂留给自己,让发呆成为不可能。

原文地址:cdc.tencent

作者:暴雪

初次使用 Axure RP Pro 为 Weico+ 改进界面及交互设计

Axure RP Pro 是一个产品经理必备的交互原型设计工具,能够高效率制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML 模版等。

Axure RP Pro 是专为 Rapid Prototype Design 而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如 UI、UE 等等,并在讨论中不断完善。

今天初次接触 Axure RP 这个软件,发现它真是一大神器啊!超喜欢,用它可以将我头脑中构想好的界面和交互动作表现出来,比手工画原型图方便多了!

这次拿前几天介绍的微可拍(Weico+)来练手,现在我已经画出它的主界面,进一步的交互和更多的界面还有待完善。

axurerp01

效果图:

axurerp02

这仅仅是一个开始,后续我会将更多改进后的界面展示出来,并且有能力的话,我会自己设计一款软件。

细节对比 微可拍 与 Instagram 的交互设计

昨天,我介绍了一款能与 Instagram 媲美的高品质摄影分享社区软件:微可拍(Weico+),今天我们来对比一下微可拍与 Instagram 在细节交互设计上有什么不同,微可拍与 Instagram 的差距在哪里?(毕竟 Instagram 是老外出品,且已经存在很长一段时间了,所以有差距也是正常的)

此次是在 Android 平台下对比,iPhone 下可能也类似,由于本人买不起 iPhone,所以就没法在 iPhone 下测试了。

为什么不是直接拍照啊?

在摄影分享类软件中,拍照或者选取照片功能是软件最核心的功能之一,然而就在这点上,Instagram 就做的比微可拍好。

1)在微可拍中,触摸主界面右上角的添加作品按钮,会弹出个选择框,你可以选择是马上拍照还是从相册添加你的作品。

weicoplus_main weicoplus_choosemethod

如果我需要马上拍照,我需要依次 “触摸‘添加作品’ —— 选择‘拍照’ —— 取景拍照” 才能完成操作,共 3 步;

如果我需要从相册中选择,我需要依次 “触摸‘添加作品’ —— 选择‘从相册添加’ —— 选择照片” 才能完成操作,共 3 步。

2)在 Instagram 中,触摸底部中间的‘拍照’图标就能直接进入取景界面,如果需要从相册选取,则只需要再触摸一下左下角的‘相册’图标即可。

instagram_photo instagram_postnew

如果我需要马上拍照,我需要依次 “触摸‘拍照’按钮 —— 直接取景拍照” 才能完成操作,共 2 步;

如果我需要从相册中选择,我需要依次 “触摸‘拍照’按钮 —— 触摸左下角的‘相册’按钮 —— 选择照片” 才能完成操作,共 3 步。

☆ 由此可见,如果作品是从相册中选取的,那么无论使用微可拍还是 Instagram,所需的步骤总数为 3 步,而如果作品是现场马上拍摄的,在 Instagram 我只需要 2 步就可以完成,而在微可拍中需要 3 步。

★ 这也是 Instagram 胜出的地方,它胜出的原因不只是少了一步,而是在于它帮助用户节省了拍照的时间。在 Instagram 中,那个‘添加作品’的按钮功能默认为‘取景拍照’,而微可拍中那个‘添加作品’的按钮功能却是弹出子菜单,同样两个按钮都是‘相机’的图标,为什么微可拍中点进去却是一个菜单?

这还不是最重要的,因为那个‘添加作品’的图标是一个相机的图标,因此用户首先的直觉就是触摸完那个按钮以后就摆出取景准备拍照的姿势了,没想到在微可拍中却出现了另外一个菜单,这让用户有点措手不及,或许就是因为这个菜单的弹出,让用户错失了抓拍美丽瞬间的良机。

这样带来的后果不仅是用户的流失,还有可能是微可拍中优秀作品的减少,因为优秀作品很多是通过抓拍瞬间得来的,一旦用户发现了好的景物,用户的头脑里就只有这景物,其它都是一片空白,在这种情况下用户凭着直觉点了那个‘相机’图标,没想到出现的竟然是一个菜单?用户不得不回过神来看看菜单上写着什么,等看懂了,美丽的瞬间也就过去了。

快给我出来,我要搜索!

在摄影分享类软件中,用户的第一需求是“看” —— 欣赏他人发布的摄影作品,除了看“关注的人”所发布的作品外,用户还希望搜索与他们兴趣爱好相关的作品。比如我就喜欢搜索“大黄蜂”、“Camaro”、“奥迪R8”、“变形金刚”、“钢铁侠”之类的,所以“没有搜索功能”也可能会成为我卸载这个软件的理由之一。

微可拍和 Instagram 都有搜索摄影作品的功能,那么我们分别来看看它们是怎么设计的。

1)在 Instagram 的主界面中,底部工具栏每个按钮的分工明确,第一个按钮是用来看好友们都分享了什么照片;第二个按钮相当于“发现”,一切未知尽在这里;中间那个按钮是“拍照”;第四个按钮是“与我相关”,可以看到什么人关注了你,什么人评论了你,什么人喜欢你的照片;第五个按钮是“个人中心”,里面可以看到你自己的资料和你的照片。

在知道 Instagram 中不同区域的作用以后,我们就能清楚的知道,想要搜索,就必须到“发现”那里,非常自然,没有任何生涩的感觉。

instagram_whatnew instagram_find

Instagram 中的“发现”栏目,右上角有一个“放大镜”的按钮,那个按钮很明显这是在告诉你:“点我可以搜索”。

instagram_search

2)在微可拍中,我实在没有搞明白第一个标签“全部”和第二个标签“动态”有什么区别,按照正常人的思维,“动态”这一栏目可能更类似与 QQ 空间的“好友动态”和“与我相关”的集合,那么“全部”标签呢?它是做什么的呢?展示一些我们没有关注的摄影师的优秀作品?如果是这样的话,它为什么不和“发现”栏目合并起来呢?这有点匪夷所思!

说真的,在使用微可拍的第一个小时里,我确实不知道如何使用它的搜索功能,因为找不到“搜索”按钮,按理说这个按钮应该放在“发现”栏目中,因为这是属于猎奇的一部分,或者也应该放在“全部”栏目里,这样正好也意味着从全部作品中搜索,可是在这两个栏目中我确实没发现这个神秘的搜索按钮。它到底在哪里呢?

weicoplus_findnew weicoplus_tosearch

后来我在软件右上角的 “…” 更多功能中找到了“搜索”按钮。“搜索”啊“搜索”,你能藏得更深一点吗?

weicoplus_searchnew

在摄影分享类软件中,用户的第一需求就是欣赏作品啊,而欣赏作品中,搜索功能也是重要的一个环节,为什么连这么重要的功能都要藏得这么深呢?

我认为这是微可拍在交互设计中做的不好的另一个方面。

我赞过的照片爱上了小齿轮?

我从来没有怀疑过微可拍设计团队的逻辑,可为什么“我赞过的照片”和“提到我的照片”会被收纳在“设置”中,难道是我赞过的照片爱上了小齿轮(“设置”)?

weicoplus_settings

这其实应该放在“个人中心”里。

instagram_more

微可拍出彩的意见反馈功能

对于新推出的软件,用户的反馈很重要,微可拍的“意见反馈”系统做的非常好,我非常满意。

在微可拍中,我可以方便的找到意见反馈的入口,并且它的意见反馈功能不会像其它软件那样要求用户填写联系方式等信息,在微可拍的意见反馈中,只需输入反馈的内容就可以提交了,而且提交后还有一个非常华丽的动画。动画内容大概是这样的,你写的反馈内容被装在一个信封里,然后被送了出去。这样的动画给人的感觉就是我的意见和建议被成功的送往微可拍的设计中心了。就冲这点,赞一个!

weicoplus_feedback_entrance weicoplus_writefeedback

在我提交意见反馈没多久,微可拍官方客服就以私信的形式给了我回复。回复的内容不重要,重要的是我收到了回复,这让我感到制作团队是很用心在做这款程序的,让我对这款软件信心满满的,我以后会继续使用这软件。

weicoplus_feedbacksent weicoplus_feedbackreply

(转载) 把握5元素!让页面文字阅读更舒适

文章转载自:优设网
转载地址:http://www.uisdc.com/page-read
文章出处:百度无线 用户体验部
原文地址:http://mux.baidu.com/?p=4943

以下是原文:

page-read-01

byby:上网在线阅读,是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面,有没有人抱怨过:“这样的页面还需要出效果图啊?”作为网页设计师的你是怎样处理这样的界面的?

  • 是习惯性的使用宋体字或者微软雅黑?
  • 是直接设为12px或者14px的字号?
  • 你有想过为什么要使用这种字体、字号吗?你有考虑过文字排布与阅读效率的关系吗?
  • 你的页面背景会影响到用户的浏览舒适度吗?

让我们从以下5个元素具体分析。

page-read-02

字体、字号

字体和字号这两个元素必须捏在一起说。

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说,衬线体(serif)就是带有衬线的字体,笔画粗细不同并带有额外的装饰,开始和结尾有明显的笔触(如下图)。常用的英文衬线体有Times New Roman和Georgia,中文即是我们在windows下最常见的中易宋体。

与衬线体相反,无衬线装饰,笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。

page-read-03

在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目,常用做标题或者用于较短的段落。

很长一段时间里,在互联网上我们会注意这样的一个现象,国外网站大部分以非衬线体为主,而中文网站基本就是宋体。其实不难理解,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字体在显示器上是相当难辨认的(见下图);同字号的非衬线体笔画简洁而饱满,更适于做网页字体。windows下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清晰美观,便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大,分辨率越来越高,经常会觉得看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不那么协调,特别是这款点阵字在ClearType(http://baike.baidu.com/view/755822.htm) 强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。

英文以Times和Verdanad为例,中文以宋体和微软雅黑为例。

page-read-04

page-read-04a

行长

我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。这是因为如果每行文字过长,读者会不停的转动脖子,感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首,也很容易串行,影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的,我们更要注意划分阅读区域。

  • 文本宽度控制在450-700px为宜,此范围内参照字号大小;
  • 英文每行80-100个字母(空格算一个字母)为宜;
  • 中文每行30-40个汉字为宜。

间距

通过设置间距,我们就可以控制文字的密度。如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不够连贯。

间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。

如(图)所示,1.5-1.8em的行距的确是非常适于阅读的文字密度。

关于段距,我们要考虑一下具体实际情况。比如文章篇幅较短,就不需要很宽的段距;二文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。

page-read-05

背景

白色是全频光,全放射光对人眼睛的最有刺激,所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光,所以同是纯白色背景的文字,在电脑上比在纸上阅读会使眼睛更容易疲乏,另有研究表明:在电脑上阅读只有在纸上阅读速度的78%,阅读效率大大减低。因此,为了提高页面浏览的舒适度和效率,越来越多的页面采用浅灰色和淡黄色做为页面背景。

另外,印刷品以文字为主的出版物往往会采用低光泽度的纸张,也是因为光泽度高的纸张反射度高,导致阅读质量下降,容易使人视觉疲劳。页面背景仿造低光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?

我曾做过这样一个小调研,同样一段文字放在不同颜色的背景上(仅考虑自然光源),其中有两个背景加了纸张纹理的效果。结果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。

page-read-06

结语

实际工作中,我们需要思考的更多,仅仅这5个元素是不够的。浏览环境、设备、网站特点、用户人群、个人偏好等等都需要设计师根据具体情况来把握界面文字的展示效果。差别也许是细微的,就像蝴蝶效应,多一点点的思考,就能为用户带来更好的体验感受。

WordPress 博客用户体验改善计划之文章排版

在我身边不少朋友都拥有一个属于自己的 WordPress 博客,但近来他们普遍都向我抱怨博客访问量低,我去看了下,发现了几个与文章排版相关问题:

1)文章字体过小

2)段落中行距过小

3)段落间距离过小

这样的文章排版是怎样的?如下图所示:

bad-exp-01

这样差的文章排版无疑是导致博客访问量低的重要原因之一,字体小、行距小和段距小会给人带来一种极为不舒适的阅读体验,因为人在阅读这种文章时会耗费大量的精力去区分每一个字,所以读这样一篇文章是很费劲的,如果这篇文章的专业性还特别强,且文章的长度还特别长的话,那么能够耐心阅读下去的人就少之又少了。

对于文章排版的问题,我给出以下几种解决方法:

1)适当增加文字的字号,一般博客的字号是 12px 或 13px,你可以将其提升至 15px 或 16px。

2)增加段落中的行距,最好采用百分比的形式,如 line-height: 175%;

3)增加段落间的距离,最好采用百分比的形式,如 padding: 1% 0px 0.5% 0px;

由于每个博客主题的结构不同,如果细讲操作方法的话不具备通用性,因此有需要的同学可以留下你的网址,我可以帮你提出修改建议。

除了上面所说的,还有以下几种方法可以提高文章的阅读体验:

1)如果是个人博客的话,建议将文章(或者是整个页面的字体)更改为“微软雅黑”,因为“微软雅黑”字体比常规的“宋体”更加清晰和优雅。(注意:“微软雅黑”在 XP 下的显示效果并不好,在更换字体前请先统计一下使用 Windows XP 的访客多不多)

2)如果你写的文章大部分是中文的,那么建议你设置“段首缩进两个汉字字符的大小”,因为中国人的阅读习惯就是如此。

按以上建议修改后,最终的效果图:

good-exp-01

 

声明:

文章截图取自道哥的黑板报,且目的是为了举例,若有不妥,请留言告知。

(转) 产品设计新思路 —— 让产品适应人,而不是人适应产品

这篇文章是我在极客公园上看到的,觉得非常典型,且代表了今后产品设计的一个方向,故我将其转载。以下是原文:

没有交互才是最好的交互

product-design-01

案例:Samsung Eye Pause

说明:“没有交互才是最好的交互。”这是网易CEO 三石哥在送给 IxDC 的视频里面说的一句话,说实话一开始听到这句话很不以为然,话有点虚。不过后来偶然看到三星的 Eye Pause(也有叫 Smart Pause)的技术改变了我的看法。所谓 Smart Pause 就是指当你在手机上观看视频时,一旦(摄像头)检测到你的视线离开了屏幕,视频自动暂停。

举个用户场景的例子,当你在手机上看最近很火的《中国合伙人》,正看到高潮的时候,有人喊你的名字你很自然的回头看看是谁,当你视线离开手机屏幕的瞬间视频自动暂停了。听到别人喊你名字你回头是很自然的反应,这时候你与手机并没有任何刻意的交互,但通过摄像头检测视线离开自动暂停毫无疑问是最贴心最自然的交互。这个设计在某种程度上是对没有交互是最好的交互这句话很好的解读。不过奉劝胆小的人别在这类手机上看恐怖片,不然还真恐怖,哈哈。

让产品适应人,而不是人适应产品

product-design-02

案例:感应电梯

说明:我经常坐公交车,发现在杭州黄龙公交中心站乘坐的电梯是感应式的。(电梯两边立柱上安装了红外探头)没有人的时候,感应电梯是不运行的,等有人走上电梯后,电梯才开始运行。这种设计很巧妙,一方面避免了电力资源的浪费,另一方面也让用户在使用时更自然,因为没有人时电梯是不动的,我上电梯的时候只需要直接走上去而不需要像乘坐普通的阶梯式电梯那样深呼吸然后刻意选择一个合适的时机去做好准备。

这传达了一个设计理念:让产品适应人,而不是人适应产品。各类感应门、感应灯等传感设备也都应当基于这一理念设计,让我们无需任何的交互操作和适应,一切由传感器根据我们的状态、情绪和周围环境的情况来自动调节以适应我们

最小化注意力

product-design-03

案例:Google Glass

说明:诺贝尔经济奖获得者赫伯特·西蒙曾经指出:“随着信息的发展,有价值的不是信息,而是注意力。”这就是所谓的“注意力经济”,在IT行业更为明显。信息爆炸式增长,以前困扰我们的信息的生产已经不是问题,注意力成为了最稀缺的资源,无论是微博上凭借特色点评火爆的留几手,还是最近借助微信朋友圈分享获得广泛关注的百度魔图和疯狂猜图,无不印证了这一点。

从市场推广和产品营销层面来说这并没有错,但从产品设计层面来说,交互和视觉应当最小化注意力,毕竟产品的核心目的是帮助用户解决问题。交互、视觉应当始终围绕着这一点来展开,而不是喧宾夺主,通过炫酷的效果和视觉设计让用户过多地注意产品本身而影响功能操作。用户可能会被一时的宣传和炫酷的产品效果吸引使用,但真正能够长期让用户使用的一定是为他们实实在在解决实际问题带来价值的。

Google Glass 在很大程度上就是承载着这种理念,希望最小化人们的注意力,解放人们的双手,让人们不再因为低下头关注自己的手机而忽视了身边的人和环境,希望通过 Google Glass 这种方式让用户和别人交谈时保持注视,更好的融入生活。这也是很多的穿戴式设备的目标之一:你无需过多地关注,只要戴上我,一切由我来解决。至于 Google Glass 能否完成这一使命还不得而知,但至少这种尝试却值得肯定。

结合用户场景和情感

product-design-04

案例:蓝牙音箱淋浴喷头

说明:快节奏的现代生活,音乐在很大程度上舒缓了我们紧绷的神经。有不少人喜欢边听音乐边洗澡,可隔着浴室的门总让人不能尽兴。科勒的设计师针对这一情况设计蓝牙音箱淋浴喷头,通过蓝牙播放手机的音乐。当然蓝牙的设置连接还是太过麻烦,最简单的方式就是喷头水流打开时自动连接无线网络随机播放(另外可预先存储喜欢的音乐方便没有网络时播放),并且可以根据喷头水流的急缓的判断分别播放欢快、舒缓的音乐。让一切就像打开水龙头一样简单。

随着各种新技术的突破和井喷,让产品更自然地融入到人的生活中将越来越重要,这对设计师能力和素质也提出了更高的要求。

文章作者:zchening
文章出处:极客公园
原文地址:http://www.geekpark.net/read/view/183470