体验式设计
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

信息内容的组织形式

威廉·立德威尔(William Lidwell)等人创作的《通用设计法则》一书中提到,要以用户最轻松使用、最容易理解记忆的方式组织信息,就能达到最佳的用户体验,更好地为产品服务。

产品内容不同,在信息的表现形式和内容呈现上也截然不同。内容型产品重点强调内容本身、用户与内容的关系,工具型产品则更强调功能的易用性、可操作性。所以,在信息内容的组织形式上截然不同。

信息的组织形式有很多种,要根据阶段性产品需求和用户目标来决定。内容不同,就应该用不同的表现方式去设计组织,才能为用户创造最佳视觉体验和最佳舒适体验。内容组织形式是指版式设计种类,版式设计是指将视觉元素进行有序的排列组合,运用形式要素,根据特定主题与内容的需要,将文字、图片(图形)及色彩等视觉传达信息要素,进行有组织、有目的的组合排列的设计行为与过程;是将理性思维转换成一种具有个性风格和艺术特色的视觉传达方式,在传达信息的同时,产生感官上的美感。

由于移动端屏幕大小、使用场景、硬件环境等特征,移动设计有很多区别于PC端的特殊内容组织形式。展示信息的常用方式有列表、网格、轮播图、泳道和卡片等。

列表

列表是以表格为容器,装载文字或者图像的一种有限序列数据形式。列表是移动端最常用的竖向组织形式。既可以是纯文字列表、图片或者视频,也可以是上述几种形式的混合体。

列表能够在有限的高度条件下展示更多内容,在手机端一屏有限的高度内展示更多内容。如新闻列表,用户通过浏览图片、主副标题就能快速获取信息并了解主要内容,阅读的频率相对较高。列表主要按照时间线(新闻类)、距离(大众点评、美团)、位置和热度等维度排序。

纯文字类型的列表能够在竖向单屏高度内最大化地展示文字,如通讯录、最近通话等。

功能复杂的列表与文字列表最明显的区别在于,其最左侧添加了图片/图标,能更好地区分不同列表的功能;右侧用于指示性操作,如查找、插入、添加、删除等,如App Store等。

另外,包含有图片信息、视频信息或文字信息的列表相对复杂一些,如某些新闻类App的列表。

最常见的混合列表是资讯类列表。单个列表包含的信息较多,有图像、标题、来源和跟帖/点评数、点击设置功能等。列表的左侧为文字,右侧为图片信息。早期也有左侧为图,右侧为文字的列表,后来为了遵循从左向右的阅读习惯,突出文字,基本上都将图片放在右侧进行展示。

微博使用的是混合列表,这种列表难度更高,包含更多用户互动信息。单个列表又分为上、中、下3行,最上面是被关注者或者是系统推荐的账号信息;中间是发布的内容信息,也是展示的重点;底部则是转发、点评、点赞等互动功能。3块内容区分清晰。

网格

网格主要是集成各种信息和组织内容所形成的具有一定规则的行列形式,使内容看起来更有规则,入口更加清晰。网格可以集成很多信息,一般都是将缩略图/图标+文字作为入口信息。

规则网格:所有格子的权重基本相等,大小均匀分布,排列整齐,如手机桌面App的排列方式。

不规则网格:主要包括两种,一种是为了打破均衡,让格子有大小的排版变化;另一种则是为了突出权重关系,格子大的权重较高,内容更重要。

轮播图

轮播图一般以图片形式展示,多放在App首页首屏的位置,滚动展示信息。动态的图片能够快速抓住用户的眼球,常被用来充当广告位、营销活动入口或者展示重要信息。轮播图的数量一般为2~5个,过多的图片会影响用户的阅读效率或者被用户遗漏。

顶部区域轮播图是最常见的轮播图形式,清晰直观,一般为产品各大卖点、主要版本、活动、更新的主要入口。

全屏轮播图可以利用整屏空间展示内容。

移动端后台运行的App界面缩小时,也类似轮播图。

泳道

顾名思义,泳道是为了运动员在训练或者比赛时不会相互干扰,增加泳池利用率而设置的。移动端的信息呈竖向分布,为了增加内容形式的差异化,出现了横向滑动的内容展示方式。横向展示信息可以最大化地利用移动屏幕,增加信息展示利用率。

卡片

真实的卡片是用来记录各种资源以便分类检索的硬纸片。Google借用了现实世界中的信息展示原理,用虚拟现实的信息整合分类方式展示信息。卡片能够以一张或者多张图片、多种层级文字、多个按钮等复杂信息封装形式展示,在移动端狭小的屏幕空间内更具优势。

封装信息可以包含文字、图片、交互行为、视频等。卡片与卡片之间相对独立,版块信息更加清晰。

Word式

自上而下的文字、图片展示方式适合拥有大篇幅内容的详情页,如新闻详情页。Word式内容在展示的过程中要控制好断行,尽量控制为比较短的段落,方便阅读。太长的段落,没有间隔或者图片分割,阅读起来会比较吃力。

混合模式

所谓混合模式,就是以上几种形式的多种组合模式。当产品的信息比较复杂时,就需要用到多种信息展示方式去呈现。

小结

信息内容的组织形式有很多种,不能凭空去想象用户最喜欢哪种方案。要根据产品特征和信息特征有条不紊地组织信息,根据用户需求设计内容形式,才能让用户轻松理解,这是打造优秀用户体验的关键。