装饰杂志,《装饰》杂志社, 立足当代 关注本土 www.izhsh.com.cn

基于鱼骨形信息构架的数字阅读应用跨屏设计研究

  • Update:2014-09-02
  • 赵丽维、季 铁,湖南大学设计艺术学院
  • 来源: 《装饰》杂志第6期
内容摘要
终端设备的日益分化为数字阅读产品的跨屏浏览体验带来了巨大挑战。为了适配不同终端设备的硬件特性和使用情景,应用设计开发者有的开发多个版本,有的采用自适应策略,但无论哪种解决方案,其动态的适配性都无法使用户获得一致性的跨屏体验。本文对数字阅读现有的跨屏设计策略进行了比较分析,探讨了多终端通用信息构架的可能性,并提出一种鱼骨形通用信息构架。该信息构架不仅能满足多种终端的适配需求,而且能保证跨屏浏览体验的一致性。*课题编号:2012BAH85F02,课题名称:基于数字化的文化内容、生产到传播的国际化合作系统研发

 随着媒体技术和电子设备的迅猛发展,阅读的载体由传统介质进入数字化时代,而日益分化的终端也在改变着人们的阅读习惯。如今用户大部分的电子媒体消费行为都是在手机、平板电脑、电脑以及电视这四个屏幕上进行的[1],可见跨屏获取信息是数字化阅读时代的最大特征。对大多数阅读服务的提供方来说,这意味着他们不再是为单一目标设备设计一个产品,而应该是跨屏幕的一套服务,确保用户在频繁切换设备时也获得最流畅的阅读体验。面对不同终端设备的物理特性和使用情景,如何提高跨屏浏览的一致性阅读体验是当前数字化阅读的一个重要课题。

1. 网易新闻导航参考


2.Smashing magazine 导航参考


3 .“鱼骨形”通用信息构架


4. New channel 跨屏界面设计


5. New channel 界面设计高保真图


表1. 在不同屏幕尺寸下交互模式的转换

一、数字阅读应用的跨屏设计策略
1. 信息架构与跨屏的一致性
信息架构的概念源自数据库设计领域,是组织信息和设计信息环境、信息空间和信息体系结构的科学和艺术,其核心思想是让信息易于访问和理解。信息架构关注内容结构,即如何将信息内容组织好并进行标注以便用户容易找到所需的信息。[2] 信息架构的核心任务是建立方便、快捷和合理的导航系统,使海量信息经过组织和有序化,在用户与信息之间建立一个通道,将相关信息快速呈现给目标用户。用户使用数字阅读产品的主要目的是获取信息,只有使用合理的信息构架,才能为用户提供可用、易用和爱用的界面。
一致性是指尽管受到环境因素的变化, 用户仍然能感知设备之间的支持,能迅速在不同的平台上学会使用这个服务。[3] 然而设备的碎片化导致跨屏应用界面设计缺乏一致性的体验,那么如何设计能够提供一致性阅读体验的界面呢?在2006 年,CHI 的工作坊“The many face of consistency in cross-platform design”提出了内容、结构、导航、布局等是影响跨屏设计一致性的几大重要维度,并认为导航设计和布局设计的一致性是判断跨屏界面设计是否一致的重要因素。[4] 而导航设计和布局设计恰恰是信息构架的重要组成部分。所以笔者认为,数字应用界面设计应该从信息架构方面来探讨跨屏的一致性。
2. 策略A :开发多个版本
针对跨屏浏览问题,其解决思路之一是为每个目标平台单独开发一个版本。例如网易云阅读,就为其服务开发了PC 版、iPad 版、iPhone版、Android 版、Android Pad 版、Windows Phone 版、Windows 8 版等多个版本,网易的另一个产品网易新闻不仅有传统PC 平台的网站和针对不同操作系统的客户端应用,还为移动设备开发了wap 版和触屏网站。
3. 策略B :采用自适应策略
另一种方法即采用自适应策略,即将不同设备的适配逻辑包含在一个版本中。如在web 端就有响应式设计技术,(图2)它使用流体布局和媒体查询来支持不同尺寸的屏幕设备,其原理是:页面的设计与开发根据用户行为以及设备环境( 系统平台、屏幕尺寸、屏幕定向等) 进行相应的响应和调整,无论用户正在使用笔记本还是iPad,页面都能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。换句话说,页面应该有能力去自动响应用户的设备环境。这方面的方法很多,如在跨平台中利用界面模式的转换来进行自适应的设计方法。[5]
4. 两种策略的缺陷
上述这两种策略虽然在某种程度上解决了跨屏的问题,且在外观设计上也很相似,但从信息架构来看仍有不足,因而无法带给用户跨屏浏览一致性的最佳体验。在策略A 的案例中,由于目标设备物理尺寸和硬件性能的差异,导致使用策略A 的产品在不同平台上的导航和布局均有较大出入。如图1 所示,网易新闻的导航板块不仅顺序不一致,文案也不一致,如在PC 版的导航里就没有“头条”这一栏目,当读者由移动端3G 版转向PC 版时便找不到原先的“头条”。可见导航信息结构的不一致,会造成用户在不同设备上浏览时的逻辑混乱,因而不能感知品牌和服务的一致性。策略B 虽然在各平台上使用了类似的导航结构,但是其流动式的布局通常会将重要的导航元素隐藏起来或者挤压到页面的下方,容易导致用户迷失方向,无法顺利完成浏览。
导致以上两种跨屏策略体验不一致的原因是由于动态的适配性。动态的信息架构是设计向技术妥协的结果,并非完美。那么在跨屏应用设计中是否能采用通用的信息构架呢?而通用的信息构架该如何设计并运用到阅读产品服务中呢?带着这些疑问,笔者尝试了多终端通用信息构架的可能性。

二、鱼骨形通用信息架构
1. 鱼骨形通用信息架构
本文提出的“鱼骨形”信息架构是对信息组织形式和布局形式的一种形象描述,由于其外观似鱼骨,故命名为“鱼骨形”。(图3)鱼骨可分为三层:推荐文章位于鱼头,属于最重要最需要突出的部分;主体内容处于中间层,可划分为多个栏目,栏目又由一系列同类别的文章组成,越新的文章位置越靠前;附属信息位于底部,可以放诸如版权信息、联系方式等。鱼骨形架构的最大优点是不同平台上界面元素的外观和位置都保持着高度统一,整体架构提供了自上而下的线性阅读顺序。
鱼骨形构架下的布局主要由导航、大图展示、文章列表等元素构成,每个栏目下有一排文章,其数目根据屏幕分辨率的宽度而定,文章元素的高度是固定的,但宽度却可以灵活地横向拓展,进行横向操作就能加载更多该栏目下的文章,所以页面不需要跳转就可以在当前页看到栏目下的所有文章信息。
交互模式不仅仅指输入、输出方式,也包括了布局使用的模式,以下是鱼骨形构架在不同环境下交互模式的变化规律:
文章列表:在环境变化时,布局模式不变,网格单元格大小、间隙、栏位列数会有所调整。在鼠标交互环境下,须增加翻页控件,而在触屏环境下,使用手势翻页,但须增加当前进度提示。
大图展示:在不同环境下,这种全屏大图的展示主要通过缩放大小和适当剪裁来适应不同尺寸的屏幕。
整页线性浏览:鼠标交互的PC 环境下,既可以直接使用鼠标滑轮,也可以通过鼠标点击scroll bar 进行上下调整。触屏环境下只能使用手势,而TV 环境下可使用遥控或者体感操作。
导航:导航使用Tab 模式,条目太多时在小屏幕环境下采用画布之外的规则,通过scroll 的方式查看完整导航。PC 端有悬停反馈,在小屏幕端须将导航按钮热区面积放大。

2. 鱼骨形通用信息框架的实践
以下实践案例是笔者以跨屏的阅读应用“New channel”作为设计对象,将“鱼骨形”通用信息架构运用到其中进行界面设计,旨在求证此架构的可行性并总结其优缺点,以及对该架构进行补充说明。“New channel”基于湖南大学在湖南省通道县开展的社会创新活动,作为一个知识平台来承载和传播当地特色的传统民族文化。笔者根据项目文献资料将应用的主体内容分为4 个栏目:风景、物语、人文、社区,采用了3 个信息层级:导航—栏目—文章,所有文章都可以归类在这4 个类目中。采用一页式布局,在顶部的视觉中心区域放推荐文章,风景、物语、人文、社区4 个栏目则随后由上至下排列。每个栏目下有一排文章,程序会根据屏幕分辨率的宽度来自动调整文章的篇数,如在< 1200宽度时,每一个栏目下可显示4 篇文章,在≥ 1200 时,只可显示3 篇,最新上传的文章始终出现在前面,查看更多文章只需要左右滑动。界面的页尾则放New channel 项目的一些附属信息。具体设计如图4-5 所示。

三、不足之处与后续研究方向
通过以上设计实践可以看出,鱼骨形构架在跨屏阅读产品设计中具有一定的应用价值:一方面它大大降低了开发和设计的投入,提高了工作效率;另一方面,当读者从一个设备转移到另一个设备时,应用的外观和逻辑能保持基本一致,使读者能在不同平台上迅速学会使用,促进了跨屏浏览的一致性。而线性的阅读顺序、简洁的信息层级和交互都增强了读者阅读的沉浸式体验。
然而该信息构架也存在一定的局限性,它注重的是内容的展示,强调的是沉浸式的阅读,所以在阅读内容的选择上更适合慢阅读内容;它要求简单的信息层级,所以不能满足数据过于庞大、内容过于复杂的应用。而且该方法仅仅考虑到跨屏的信息构架的浏览体验问题,缺少对跨屏的使用情景和设备的研究,未来应该从更全面的角度来完善跨屏通用信息构架。


注释:
[1]Google Think Insights. The New Multi-Screen World Study.http://www.google.com/think/research-studies/the-newmulti-screen-world-study.html.2012
[2] 李世国、靳文奎、孙辛欣:“ 智能手机浏览器信息架构设计研究”,《包装工程》,2013•34(6)。
[3]Minna Wäljas1, Katarina Segerståhl2,Kaisa Väänänen-Vainio-Mattila,etal.Cross-Platform Service User Experience:A Field Study and an Initial Framework.Proceedings of the 12th international conference on Human computer interaction with mobile devices and services,ACM New York, NY, USA,2010,pp.219-228
[4]Jeffrey Nichols,Kai Richter,Krzysztof Gajos:The Many Faces of Consistency in Cross-Platform Design: A Whitepaper Proceedings of CHI 2006 Workshop“ The Many Faces of Consistency in Cross-Platform Design”
[5] 贺兆达、季铁、袁翔:“跨平台数字阅读的‘通用’界面模式设计探索”,《包装工程》,2013•34(18)。

评论

暂无评论!
填写评论
用户名 密码 匿名发表   没有用户名?
[发言请遵循国家相关法律]