资讯类产品阅读列表的交互设计思考

标签: 产品 阅读列表 交互设计 | 发表时间:2012-08-11 15:32 | 作者:xning
出处:http://ucdchina.com/rss/all

列表,定义为:以表格为容器,装载着文字或图表的一种形式。根据产品类型的不同,大部分都有其各自样式的列表,有些成为产品的主体,有些则为其他页面的辅助。列表设计的主要目的,就是让用户快速浏览、扫描,从中选择出自己想要“费力”点击并“费时”去仔细阅读的内容。

与传统阅读平台比较,阅读列表就像是实体书中的目录。小说的目录简洁:标题+页码;杂志的目录则相对丰富:标题、副标题、图片、摘要、页码,精致的排版,有些甚至还包括广告。每种内容都会有适合其展现的列表形式,资讯类产品的阅读列表需要考虑的几点:

1.    视觉重心

把产品希望用户看到的内容凸显出来,引导用户去阅读那些重点推荐的内容。

在阅读信息的时候,常常受到周围文字和图像的干扰,并不是那么顺畅,根据人眼视觉心理,会有几种容易引导或者说干扰到视觉移动方向的特点。

 1)   视线引导

a.   一般,暖色比冷色,鲜艳比暗淡,更容易吸引视线。

一般阅读时,视线是从左到右从上到下的,但颜色的引导会改变视线的顺序。合理运用能给列表以重点,反之则会破坏用户的心理预期,造成阅读的负担,影响认知效率。

颜色的引导会改变视线的顺序

b.   图片比文字更吸引人。

图片在视觉传达上能辅助文字,帮助理解,更可以使版面立体、真实。

图片在视觉传达上能辅助文字

大多数资讯类列表中都含有文章配图的缩略图。缩略图的摆放位置,根据产品定位也有所不同。

更专注于资讯本身较为稳重的产品,倾向于将缩略图放在新闻标题的后面。这类资讯内容的图片质量往往较为一般,同时,能够让用户处于较平稳的心态阅读每一条标题,从而选择自己喜欢的内容,图片只期待起到辅助标题的作用。

而对于偏娱乐化,碎片化的资讯类产品,缩略图放在标题前面能够更直观的传达出内容的含义,从而缩短用户理解文字标题的时间,让用户的时间顺着右侧的图片向下快速浏览,起到快速筛选的目的。

缩略图的摆放位置,根据产品定位也有所不同

c.   环形能够汇聚视线

 

 

环形能够汇聚视线

d.  视线会随箭头,或数字或编号移动。

规律的箭头或数字排布,容易造成页面一侧过重,或有强烈的提示意味,要注意页面的平稳。

视线会随箭头,或数字或编号移动

2 )   突出

如果需要你认为用户会感兴趣的文章,或者花了很多功夫设计的部分真的吸引到他们的注意,那就要想办法把这些部分“突出”出来。

最简单的方法是使用亮色的样式,或者改变该项的背景颜色。还可以为这篇文章找一个可以突出于其他层次的位置,比如在标题前面放一个缩略图之类的。但也需要考虑到页面的整体视觉效果,一个原则是“太多重点等于没有重点”。

突出你认为用户会感兴趣的内容

3 )   反馈

给予已阅读内容相应的视觉反馈,并使用区别于“突出”内容的交互方式。比如已经使用不同颜色的圆点区别内容的重点或普通,就不要再用圆点的形式提示已读。相同的样式在人们的心中暗示相同的内容,而未读和已读则是同种内容的两种状态。

 

2.    不打扰

1)   长列表

如果能够有效的扫视浏览,长列表并不会是种麻烦,至少它可以让浏览不用付出多少努力和代价。

在资讯类的长列表中,没有必要使用标准的页码指示,原因如下:

a.   从一个阅读内容的世界到一个导航的世界。

当每一次用户都通过选择页码去看更多内容,他需要把自己从一个阅读内容的世界拖出来,再放到一个导航的世界中去。用户思考的不再是他们要阅读什么样的内容,而是怎么找到更多的东西去看。选择页码增加了自然的停顿时间,也给了用户机会能够评估他们是否想要继续阅读或者是直接离开。

b.   另外页码没有本质的含义。

用户按页码选择只是为了方便他们找到在第2页或者更早以前想要阅读的内容而已。给他一个更好的方法,比如按照周、月、年,分类,标签等属性的方式筛选,远比页码有效的多。也有很多的移动终端中,使用了分页的指示控件,但将页码数去掉了,这不失为一种好办法。

2)   广告

阅读的重点在于内容,用户并不在意看到与内容相关的广告,或不影响列表浏览的广告。

经常使用浏览器或使用免费应用的用户应该已经较为习惯广告的存在,也能够理解广告于产品的意义,只要不太打扰他们的正常阅读就好。

a.   不要假装广告是一则有趣的内容。

这样做虽然可以增加广告的点击量,但是用户也会因为“受骗”而恼怒,带来不好的体验。

b.   为内容提供相关的广告。

数据表明,用户愿意点击与汽车相关的广告。当用户查看车型的时候,相应的专卖店推荐正好为他提供了购买的渠道,甚至比价的渠道,用户当然欣然前往。

c.   易于忽略。

有时为了列表的整齐和产品的美观,在设计中会将广告插在列表间,并假装它是列表中的一条项目。但应尽量减少广告的视觉效果,让其看起来不起眼,可以轻松跳过而不被意识到。

有些将广告放在页顶部的产品,虽然位置明显,但可以通过按钮关闭或只有下拉才显示,也是种折中的选择。

用户并不在意看到与内容相关的广告,或不影响列表浏览的广告

3.    阅读节奏

整齐而重复的格式和产品把握“第一屏”的策略,容易使筛选阅读列表的过程产生一种类似于“白噪音”的屏蔽效果。再好的东西都会产生“审美疲劳”,在稍长时间的阅读后,用户往往会觉得内容都相对平淡无奇而离开列表。

微博产品作为一种阅读媒介的优点在于它不时的出现亮点,让阅读保持节奏和惊喜。

保持节奏的呼吸可以让运动更持久,保持内容的节奏也会让阅读长时间的延续下去。有趣与无趣的交替反复,给用户休息和从新提起兴趣的间歇,加上对于下一个小惊喜的期待,从而产生产品整体的舒适体验,而不是很多有趣之后与很多无趣的平均值。

让阅读保持节奏和惊喜

4.    列表中的项目

大部分产品都会包括的项目有:标题,摘要,发布日期,操作(点击阅读更多,查看更多);

常见的项目:分类,缩略图,评论数,图片数,作者。

 

源地址: http://mued.sohu.com/2012/07/list-interaction/

相关 [产品 阅读列表 交互设计] 推荐:

资讯类产品阅读列表的交互设计思考

- - 所有文章 - UCD大社区
列表,定义为:以表格为容器,装载着文字或图表的一种形式. 根据产品类型的不同,大部分都有其各自样式的列表,有些成为产品的主体,有些则为其他页面的辅助. 列表设计的主要目的,就是让用户快速浏览、扫描,从中选择出自己想要“费力”点击并“费时”去仔细阅读的内容. 与传统阅读平台比较,阅读列表就像是实体书中的目录.

交互设计,产品设计与用户体验设计

- 章明 - 所有文章 - UCD大社区
交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;. 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:. 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域.

诺基亚设计主管谈交互、设计和产品

- - WPDang
不久之前,WPDang曾报道 《不获格莱美的总统儿子不是好设计师:Marko Ahtisaari晋升核心管理层》,文章提及诺基亚管理层的变动,而正是这次管理层的变动,让类似阿赫蒂萨之辈脱颖而出,成为广为关注的焦点,而近期关于阿赫蒂萨的采访亦为之不断,以下是科技媒体ifanr对阿赫蒂萨接受采访整理原文:.

2011交互设计体验日-用讲故事的方式来做手机产品交互设计

- leeking001 - 落花流水——elya妞╰_╯
2011中国交互设计体验日在北京举行,elya和Alex代表百度MUX出席并主持了“用讲故事的方式来做手机产品交互设计”的工作坊. A5 交互设计体验日-用讲故事的方式来做手机产品交互设计. 下载链接:http://www.slideshare.net/cyelya/a5-9374817/download.

5月7日交互设计师和产品经理沙龙后记

- sayhelen - Taobao UED Team
这次淘宝碳酸饮料会和pmcaff产品经理沙龙联合举办《产品经理和交互设计换位思考》,已经顺利的结束了. 这次活动下来,得到的总结如下:. 一、 大多数交互设计师,认为产品经理需要:. 1、学会做人— 尊重是第一,不管你能力或强或弱. 2、信任团队— 很大交互细节,可以让专业的人操心;. 3、擅长沟通— 要做啥,为什么做啥,多讲讲,讲清楚;.

交互设计的前奏——了解产品背景及限制条件

- 淼 - 所有文章 - UCD大社区
一个再优秀的交互设计师,如果不了解项目的相关背景及特殊限制,也难以做出好的设计. 举个例子:我们都知道,演员在上场前都需要熟读剧本,不可能什么都不了解就完全凭经验临场发挥(除非是导演特殊要求). 优秀的演员除了读剧本,还会做一些其他工作,比如读一些相关历史书籍,体验角色生活等. 交互设计师也是一样,好的交互设计师,在正式开始设计前也会去了解产品的相关信息,这样在开始设计时才会做到胸有成竹.

用讲故事的方式来做手机产品交互设计

- Lamo - 互联网的那点事
随着移动互联网浪潮滚滚来袭,移动设备交互设计师是时代的弄潮儿. 你需要知道怎样为真正的目标用户做设计;需要知道真实用户的使用场景;需要知道怎样让你的产品变得用血有肉;需要知道怎样用讲故事的方式来做产品;需要知道怎样将讲故事的方法贯穿到设计循环中去,本次工作坊也是力求通过一些我们尝试过的方法,跟大家一起展开探讨.

类O2O概念产品交互设计的几点体会和探讨

- - 互联网的那点事...
开文估计少不了做一下概念的名词解释,我就引用下网络的解释吧,O2O(Online To Offline),. 将线下商务的机会与互联网结合在一起,让互联网成为线下交易的前台. 线下服务就可以用线上来揽客,消费者可以用线上来筛选服务,可以在线成交结算. 特点:推广效果可查,每笔交易可跟踪. 这概念模式无形中给用户提供了更多的选择和便利,也给线下商务带来商机.

交互设计在产品设计中的工作流程小议

- - 互联网分析沙龙
当产品的用户体验要求越来越高时,交互设计师的职责也越来越明晰了. 交互设计师除了自身的基本功外,还需要有一个规范的流程,才能够使工作完整有序. 图1 交互设计在产品设计中的流程图. 版本计划是指在产品或项目立项时,对产品的一个总的规划,通常包括产品的需求与目标,比如能够实现哪些功能,性能上如何. 这一过程,交互很少直接参与,或者列席一下发版立项,对计划情况有所知晓.