为移动而设计,第一部分:信息架构

译者注:本文从设计人员的角度出发,提出了移动端设计与传统桌面端设计的不同之处,同时归纳总结并比较了多种主流的设计模式和信息架构,旨在帮助设计、产品、开发相关人员更好的思考移动端设计。分享给大家,希望有所帮助和启发。

英文原文: http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

----------------------------------------------------

大约在1993年,我父亲带回家一部体型硕大、形似砖头的移动电话。当时,我们全家人都对这个稀物表示难以置信的兴奋,但是没有人会认为它会对我们的生活产生巨大影响。几年后,当我的一些朋友决定购买它时,我仍然会把它看作是一种花样和噱头。

如今全世界共有60亿移动订阅用户,意味着如果人手一部移动电话,那么世界上87%的人便拥有移动电话。然而,将近有30亿人使用台式电脑,这和移动电话使用情况差别很大。

移动设备存在于我们的生活中,随之而来也为移动端设计带来了一系列新的限制和机遇。让我们来看看设计方法会如何得以更新。

移动有何不同?

关于移动设计,我们最先需要了解的是它的不同之处,这并不仅仅指尺寸的不同。移动设备的属性与规格也带来了不同的设计启示和要求。由于移动设备更轻更便携,我们通常觉得它们更便于使用。通过频繁使用移动设备,我们与它们之间建立了独特而富有情感的联系。

属性与规格

绝大多数移动设备配有触摸屏,用户主要通过手势以及一些简单的界面元素进行操作。由于受限于屏幕尺寸,有时我们希望屏幕中的显示内容结构更简单精致。同样由于受限于带宽和连接速度,移动端上的设计需要优化加载时间,减少数据请求。

为何,何地与何时

由于需要不间断查看手机信息,我们往往会更频繁地使用手机。乘坐公交车时、街上漫步时或看电视时,它们都无处不在。甚至,我们通常“做”一些其他事情时也在使用。这意味着我们可能在一些复杂的视觉环境下或是一系列干扰条件下使用手机。

我们如何行动和感知

使用移动设备时,我们有不同的态度、行为和优先级。作为Going Mobile 2012研究的一部分,用户体验设计机构Foolproof 指出移动设备赋予我们一种新的自由感和控制感。还有一些用户反而对他们的移动设备产生了非常真实的情感。Foolproof指出当智能电话不在身边时,63%的人会感到失落不安。他们把这些设备描述为“有生命的”,是他们身体和人格的一种延伸。

移动设备从根本上改变了用户的期望,因此对于设计师而言,非常重要的一点是遵从以用户为中心的设计流程来进行设计。但存在的问题在于:以往那些最佳的传统实践方法并不总是可以参照。

移动如何影响设计师

移动设备的差异化直接作用于以用户为中心的设计的整个过程:从用户研究到最终的开发和实现方案的测试。而实现方法和信息架构是整个设计流程中受到最大影响的。

移动设计实现方式

不同于传统网站,移动设计的实现存在四种主流方式。移动用户最希望在浏览器上浏览,移动式网站(为移动设备而特地优化的网站)或者响应式网站(根据设备重新排列布局的网站)的内容。而那些在设备上安装了应用程序的人会选择原生应用或混合模式应用。原生应用是独立存在的:每一个应用的界面都被定义在平台层上方。混合模式应用提供了更为灵活的方式,从网络中获取内容,(即通过浏览器进行阅读),但也提供了类似于原生应用的界面。

每一种实现方式都有正反两面。选择哪种样式取决于项目的设计背景。(下面的表单中,星星越多,效果越好)

移动信息架构

移动设备同样也有自己的信息架构样式库。尽管响应式网站的结构可能更多遵从“标准化”样式,而诸如原生应用则通常采用基于标签的导航结构。但并不存在构造移动网站或应用的“正确”方法。接下来我们会带来一些最流行的样式:层级式、辐射式、套娃式、标签视图、便当盒和筛选视图。

层级式(Hierarchy):

层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站,你可能会受限于此,然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。

Luke Wroblewski在博文《移动为先》( Mobile First)中帮助我们首先关注于重要的内容:可以帮助我们创造更好的用户体验的产品特性和用户使用过程。

适用项:整理需要跟桌面端网站保持一致结构的复杂站点。

注意项:多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。

辐射式(Hub-spoke):

辐射样式向用户提供了便于跳转的中央式索引,这是iPhone的默认样式。用户无法在分页面之间切换,而必须回到中央跳转。一直以来,这种样式主要用于工作流程受限的桌面端(通常是技术限制,诸如表单或者购买流程中受到的限制)。然后,这种样式在移动设备上越来越流行,这是由于用户使用移动设备时会专注于单一任务,以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。

适用项:多功能工具,其中每个都有不同的内部导航和目标。

注意项:这种样式不适于用户进行多任务操作。

套娃式(Nested doll):

套娃样式采用渐进式导航引导用户查看到更详细的内容至。当用户操作不方便时,这是一种快速简单的导航方法。通过点击“前进”或“后退”,用户可以强烈感知自己所处何处。

适用项:应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式,诸如标准的层级样式式和辐射样式。

注意项:用户无法在不同内容中快速切换,因此需要考虑这种样式是否方便查找,而不能让它成为查找内容的绊脚石。

标签视图(Tabbed view):

这是一种普通应用用户熟悉的样式。这种形式通过工具栏菜单集合为一系列的内容。这样用户可以在第一次打开应用时,便能快速扫过并了解应用的全部功能。

适用项:基于一个相似主题的工具项和多任务情况。

注意项:这种样式不太适合复杂类结构,较为适用于非常简单的内容结构。

便当盒/仪表盘(Bento box/Dashboard)

便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息,再把更详尽的内容链接至到索引界面。由于这种样式很复杂,它在桌面端显示会比在移动端更为适合。这种显示醒目有力,用户只需要扫一眼就可以理解关键信息,但它严重依赖于信息清晰的设计呈现。。

适用项:主题相似的多功能工具和基于内容的平板电脑应用程序。

注意项: 尽管平板电脑的屏幕提供更多空间承载这种样式,但更为重要的是我们要理解用户如何与每块内容互动,以及我们要确保应用简单、有效、使用愉悦。

筛选视图(Filtered view)

最后,筛选视图样式允许用户通过选择筛选项来切换不同视图从而在一系列的数据中进行导航。筛选同分面搜索方法一样,是一种很棒的适合用户查询内容的方法。

适用项:内容数量庞大的应用或网站,诸如文章,图像和视频。它可能为杂志样式的应用或网站提供了好的基础,或者是它可以作为另一个导航样式内的子样式。

注意项: 移动设备上,由于筛选和分面搜索很复杂,所以很难在较小的屏幕上展示。

下一步

自从我第一次看到大型的砖头式移动电话起,已经过去了将近二十年,(而我买第一步移动电话也有大约十二年了)。如今我、我父亲和我认识的人几乎都有一部智能电话,我们习惯于频繁地使用它们沟通、交流并且管理我们的生活。每一年科技都有一次飞跃,因此我们要清楚地认识到我们需要与时俱进。设计友好的移动和桌面信息架构正是创建伟大的移动体验的第一步。在第二部分-设计考量 中,我将解释移动内容的差异性如何影响最终方案的设计。

了解“CDC翻客”,请移步:【CDC翻客 】翻客来袭!Fanke is coming!(链接:http://cdc.tencent.com/?p=6518)

(本文出自Tencent CDC Blog,转载时请注明出处)

时间: 2024-10-10 06:51:10

为移动而设计,第一部分:信息架构的相关文章

信息架构能帮助哪些网站产品?

文章描述:信息架构能帮助哪些网站产品? 关于信息架构,其实我也不大懂,我就看过两本中文翻译书和一本很学术的中文书,我一直认为信息架构是数据结构的另外一种叫法. 结合Tony的信息架构扫盲贴,我也扯扯信息架构的东西:(顺序可能不妥,请见谅) 每个网站产品都需要规划信息架构,包括检索.标记.导航.展示等,在产品最开始规划时就需要做,且后边规划功能时针对需求进行调整. 信息架构需要和真实信息尽量匹配,比如做个游戏信息库,每条游戏信息需要完整还原真实的游戏信息结构,包括名称.开发商.上市时间.分类.题材

信息架构

写几篇关于信息架构的文章,系统地输出我理解的信息架构. 写在前面的话 发了一篇关于招信息架构实习生的博客,收到不少简历.但谈起信息架构,多数不了解,稍微了解的扯了很多很偏的东西. 随手搜索了一下,我发现了原因:1 <web信息架构>这本书太概念,太学术.多数人不知道如何指导实践.2 有人绑架了"信息架构"这个词,拿出去唬人,内容都是皮毛或者是根本和信息架构不沾边的东西. 另外一个理由是,<web信息架构>06年出第一版,而这本书的最早版本是1998年,而真正的理

信息架构,互联网营销

写几篇关于信息架构的文章,系统地输出我理解的信息架构. 写在前面的话 发了一篇关于招信息架构实习生的博客,收到不少简历. 但谈起信息架构,多数不了解,稍微了解的扯了很多很偏的东西. 随手搜索了一下,我发现了原因: 1. <web信息架构>这本书太概念,太学术.多数人不知道如何指导实践. 2. 有人绑架了"信息架构"这个词,拿出去唬人,内容都是皮毛或者是根本和信息架构不沾边的东西. 另外一个理由是,<web信息架构>06年出第一版,而这本书的最早版本是1998年,

设计好的互联网产品:根据内容整理信息架构

文章描述:互联网产品的设计方法-搭建架构. 根据内容整理信息架构 三个内容模块,模块之间的信息组成是多变的. 客户的需求会有很多,或者只有一个.当一个客户有多个潜在需求,其中有1个或几个需求下单时,客服人员根据需求的关联性,给客户下一张订单. 代练人员根据订单,按照实际代练工作的状况,转化为生产单. 一个订单中可能转化为多个不同的生产单,每个生产单对应不同的生产线. 多个订单中可能转化为一个生产单来完成. 依据现实的操作,系统起初按照内容模块的特性,信息架构的主要层级,第一个层级分支为三个节点:

在信息架构层次对比开心网和Facebook的设计

如果在信息架构的角度来观察用户体验,那么最重要的问题是:"如何在有限的页面里更多的呈现用户需要的信息".对于SNS,还多出了一个问题是:"如何增加用户间的交互".作为一次实践,这篇http://www.aliyun.com/zixun/aggregation/9435.html">blog拿出开心网和Facebook这两个流行的网站来对比一下它们设计上的优劣. 内容框抬头 显然的两处失败设计,1处显示了大量用户自身的信息,这是一个基本的错误:不要把页

互联网产品设计:优化信息架构和框架图

文章描述:框架图需要的东西很简单,在这样的电子系统中,使用相近的元素去表达界面最终的大致展现,会更容易让人理解,也可以开始进行小范围的用户调查,最终通过不断优化信息架构和框架图,形成策划阶段清晰的交互原型,最终可以进行相关设计.开发等工作. 通过基础的信息架构图,框架图是最能把信息树演变成为真实思维联想的一种方式. 框架图需要的东西很简单,在这样的电子系统中,使用相近的元素去表达界面最终的大致展现,会更容易让人理解,也可以开始进行小范围的用户调查,最终通过不断优化信息架构和框架图,形成策划阶段清

网站信息架构设计:分类方式

信息架构的组件可以拆分成四类 组织系统 如何组织信息,例如,依据主题或年代顺序. 标签系统 如何表示信息,例如,科学术语("Acer")或通俗术语("maple"). 导航系统 如何浏览信息,例如,通过等级体系的点击. 搜索系统 如何搜索信息,例如,对索引系统进行搜索的查询. 分类信息架构的方式 浏览Browsing Aids 这些组件会展现一些预设的路径给用户看,协助他们浏览网站.用户无需清楚地说出查询的内容,而是通过菜单和链接找出他们要的东西.浏览帮手的种类包括

导航设计与信息架构

大部分时候我们讲导航,讲的是导航对内容和结构的一种表现.就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看.但是导航,不仅仅局限于交互方式和视觉形式. 被狭义化的导航 回想一下我们是如何设计导航的?难道不正是根据内容.根据内容的结构去设计?最终,导航可能包含了三方面的功劳:交互设计.视觉设计,别忘了,还有信息架构.是信息架构决定了导航的设计. 信息架构决定了我们是用几级分类,一个项目是否可以属于两个或多个分类,等等.信息架构里面,有很大一部分工作是分类.分类,就是对已有的

BrnShop开源网上商城第一讲:架构设计

原文:BrnShop开源网上商城第一讲:架构设计 首先在此感谢大家对BrnShop项目的支持和鼓励!我们在发布BrnShop以前曾推测项目会受到不少园友的支持,但没想到园友们的支持大大超过我们的预测.4天6000次浏览,140个推荐,170个评论,8000次下载.看到这些数据后我们内心除了激动外,更多了一份责任.无论将来遇到多大的困难,我们一定要坚持把BrnShop坚持到底!! 如果你还不知道BrnShop是什么或还没有下载源码的可以点此下载,如果下载源码后发现商城有bug,也可以点此下载(什么