资讯类产品阅读列表的交互设计思考与经验分享

所属分类: 网页制作 / 应用技巧 阅读数: 355
收藏 0 赞 0 分享
资讯类产品阅读列表的交互设计思考  脚本之家
  列表,定义为:以表格为容器,装载着文字或图表的一种形式。根据产品类型的不同,大部分都有其各自样式的列表,有些成为产品的主体,有些则为其他页面的辅助。列表设计的主要目的,就是让用户快速浏览、扫描,从中选择出自己想要“费力”点击并“费时”去仔细阅读的内容。
  与传统阅读平台比较,阅读列表就像是实体书中的目录。小说的目录简洁:标题+页码;杂志的目录则相对丰富:标题、副标题、图片、摘要、页码,精致的排版,有些甚至还包括广告。每种内容都会有适合其展现的列表形式,资讯类产品的阅读列表需要考虑的几点:
  1. 视觉重心
  把产品希望用户看到的内容凸显出来,引导用户去阅读那些重点推荐的内容。
  在阅读信息的时候,常常受到周围文字和图像的干扰,并不是那么顺畅,根据人眼视觉心理,会有几种容易引导或者说干扰到视觉移动方向的特点。
  1) 视线引导
  a. 一般,暖色比冷色,鲜艳比暗淡,更容易吸引视线。
  一般阅读时,视线是从左到右从上到下的,但颜色的引导会改变视线的顺序。合理运用能给列表以重点,反之则会破坏用户的心理预期,造成阅读的负担,影响认知效率。
颜色的引导会改变视线的顺序
  b. 图片比文字更吸引人。
  图片在视觉传达上能辅助文字,帮助理解,更可以使版面立体、真实。
图片在视觉传达上能辅助文字
  大多数资讯类列表中都含有文章配图的缩略图。缩略图的摆放位置,根据产品定位也有所不同。
  更专注于资讯本身较为稳重的产品,倾向于将缩略图放在新闻标题的后面。这类资讯内容的图片质量往往较为一般,同时,能够让用户处于较平稳的心态阅读每一条标题,从而选择自己喜欢的内容,图片只期待起到辅助标题的作用。
  而对于偏娱乐化,碎片化的资讯类产品,缩略图放在标题前面能够更直观的传达出内容的含义,从而缩短用户理解文字标题的时间,让用户的时间顺着右侧的图片向下快速浏览,起到快速筛选的目的。
缩略图的摆放位置,根据产品定位也有 所不同
  c. 环形能够汇聚视线
环形能够汇聚视线
  d. 视线会随箭头,或数字或编号移动。
  规律的箭头或数字排布,容易造成页面一侧过重,或有强烈的提示意味,要注意页面的平稳。
视线会随箭头,或数字或编号移动
  2) 突出
  如果需要你认为用户会感兴趣的文章,或者花了很多功夫设计的部分真的吸引到他们的注意,那就要想办法把这些部分“突出”出来。
  最简单的方法是使用亮色的样式,或者改变该项的背景颜色。还可以为这篇文章找一个可以突出于其他层次的位置,比如在标题前面放一个缩略图之类的。但也需要考虑到页面的整体视觉效果,一个原则是“太多重点等于没有重点”。
突出你认为用户会感兴趣的内容
  3) 反馈
  给予已阅读内容相应的视觉反馈,并使用区别于“突出”内容的交互方式。比如已经使用不同颜色的圆点区别内容的重点或普通,就不要再用圆点的形式提示已读。相同的样式在人们的心中暗示相同的内容,而未读和已读则是同种内容的两种状态。
  2. 不打扰
  1) 长列表
  如果能够有效的扫视浏览,长列表并不会是种麻烦,至少它可以让浏览不用付出多少努力和代价。
  在资讯类的长列表中,没有必要使用标准的页码指示,原因如下:
  a. 从一个阅读内容的世界到一个导航的世界。
  当每一次用户都通过选择页码去看更多内容,他需要把自己从一个阅读内容的世界拖出来,再放到一个导航的世界中去。用户思考的不再是他们要阅读什么样的内容,而是怎么找到更多的东西去看。选择页码增加了自然的停顿时间,也给了用户机会能够评估他们是否想要继续阅读或者是直接离开。
  b. 另外页码没有本质的含义。
  用户按页码选择只是为了方便他们找到在第2页或者更早以前想要阅读的内容而已。给他一个更好的方法,比如按照周、月、年,分类,标签等属性的方式筛选,远比页码有效的多。也有很多的移动终端中,使用了分页的指示控件,但将页码数去掉了,这不失为一种好办法。
  2) 广告
  阅读的重点在于内容,用户并不在意看到与内容相关的广告,或不影响列表浏览的广告。
  经常使用浏览器或使用免费应用的用户应该已经较为习惯广告的存在,也能够理解广告于产品的意义,只要不太打扰他们的正常阅读就好。
  a. 不要假装广告是一则有趣的内容。
  这样做虽然可以增加广告的点击量,但是用户也会因为“受骗”而恼怒,带来不好的体验。
  b. 为内容提供相关的广告。
  数据表明,用户愿意点击与汽车相关的广告。当用户查看车型的时候,相应的专卖店推荐正好为他提供了购买的渠道,甚至比价的渠道,用户当然欣然前往。
  c. 易于忽略。
  有时为了列表的整齐和产品的美观,在设计中会将广告插在列表间,并假装它是列表中的一条项目。但应尽量减少广告的视觉效果,让其看起来不起眼,可以轻松跳过而不被意识到。
  有些将广告放在页顶部的产品,虽然位置明显,但可以通过按钮关闭或只有下拉才显示,也是种折中的选择。
用户并不在意看到与内容相关的广告,或不影响列表浏览的广告
  3. 阅读节奏
  整齐而重复的格式和产品把握“第一屏”的策略,容易使筛选阅读列表的过程产生一种类似于“白噪音”的屏蔽效果。再好的东西都会产生“审美疲劳”,在稍长时间的阅读后,用户往往会觉得内容都相对平淡无奇而离开列表。
  微博产品作为一种阅读媒介的优点在于它不时的出现亮点,让阅读保持节奏和惊喜。
  保持节奏的呼吸可以让运动更持久,保持内容的节奏也会让阅读长时间的延续下去。有趣与无趣的交替反复,给用户休息和从新提起兴趣的间歇,加上对于下一个小惊喜的期待,从而产生产品整体的舒适体验,而不是很多有趣之后与很多无趣的平均值。
让阅读保持节奏和惊喜
  4. 列表中的项目
  大部分产品都会包括的项目有:标题,摘要,发布日期,操作(点击阅读更多,查看更多);
  常见的项目:分类,缩略图,评论数,图片数,作者。
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多