行动设计第一步:资讯架构

收藏:362

行动设计第一步:资讯架构

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

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

行动装置存在于我们的生活中,随之而来也为行动版设计带来了一系列新的限制和机遇,来看看我们是不是应该更新一下自己的设计方法吧。

行动有何不同?

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

行动设计第一步:资讯架构
 
属性与规格

绝大多数行动装置配有触控萤幕,使用者主要藉由手势及一些简单的界面元素进行操作。由于受限于萤幕尺寸,有时我们希望萤幕中的显示内容结构更简单精緻。同样由于受限于频宽和连线速度,行动版上的设计需要改善载入时间,减少资料传输量。

为何,何地与何时

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

我们如何行动和感知

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

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

「行动」概念如何影响设计师

行动装置差异化直接影响了以使用者为中心的整个设计过程:从使用者研究到最终的开发和实现方案的测试。而实现方法和资讯架构是整个设计流程中受影响最大的。

行动设计实现方式

不同于传统网站,行动设计有四种主流方式。浏览器中显示的网站可区分成行动版网站或 responsive design 网站的内容。人们安装的 app 不是原生 app 就是混合型 app。混合型 app 提供更加灵活的方式,从网页上读取内容,,同时提供了类似原生 app 的界面。

每一种方式都有正反两面。选择哪种样式取决于项目的设计背景。

行动设计第一步:资讯架构
行动资讯架构

行动装置同样也有自己的资讯架构样式库。尽管 responsive design 网站的结构可能更多遵从「标準化」样式,而诸如原生 app 则透过採用标籤试的导航结构。建构行动网站或 app 并没有所谓「正确」的方法。接下来我们会看到一些最流行的样式:阶层式、辐射式、「俄罗斯娃娃式」、Tabbed view、便当盒/仪表板和筛选器样式等。

阶层式
行动设计第一步:资讯架构

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

Luke Wroblewski 在 〈 行动优先〉 中告诉我们要先关注重要的内容:可以帮助我们创造更好的使用者体验的产品特性和使用者使用过程。

适用範围: 整理需要跟桌面版保持一致结构的複杂网站。
注意事项: 多方位的导航结构用在小尺寸萤幕上可能会给使用添麻烦。

辐射式
行动设计第一步:资讯架构

辐射样式为使用者提供便于跳转的中央式索引,这是 iPhone 过去主画面的模式。使用者无法在分页之间切换而必须回到中央跳转。一直以来,这种样式主要用于工作流程受限的桌面版。然后,这种样式在行动装置上越来越流行,这是由于使用者使用行动装置时会专注于单一任务,以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈来愈难用。

适用範围: 多功能工具,其中每个都有不同的内部导航和目标。
注意事项: 这种样式不利于使用者进行多工操作。

俄罗斯娃娃:
行动设计第一步:资讯架构

这种样式採用渐进式导航以引导使用者查看更详细的内容。当使用者操作不方便时,这是一种快速简单的导航方法。点击「前进」或「后退」,使用者可以强烈感知自己所处何处。

适用範围:app 或网站的主题奇特或者主题之间密切相关。它们也是和在其他样式底下使用,诸如标準的阶层式或辐射样式等等。
注意事项: 使用者无法在不同内容中快速切换,因此需要考虑这种样式是否方便查询,而不能让它成为搜寻内容的绊脚石。

Tabbed view
行动设计第一步:资讯架构

这是 app 使用者熟悉的样式。这种形式透过工具栏目录集合为一系列的内容。这样使用者便可以在第一次打开 app 时快速看过、了解 app 的全部功能。

适用範围:基于一个相似主题的工具项和多工情况。
注意事项:这种样式不太适合有複杂结构的 app,较为适用于非常简单的内容结构。

便当盒/仪表板
行动设计第一步:资讯架构

便当盒/仪表盘样式透过元件展示相关工具或内容的部分讯息,再把更详尽的内容连结到索引介面。由于这种样式很複杂,它在桌面版显示会比在行动版更为适合。这种显示醒目有力,使用者只需要扫一眼就可以理解关键讯息,但它非常依赖讯息清晰的设计呈现。

适用範围: 主题相似的多功能工具和以内容为主的平板电脑 app。
注意事项: 儘管平板电脑的萤幕提供更多空间承载这种样式,但更为重要的是我们要理解使用者如何与每个部分的内容互动,以及我们要确保 app 简单、有效、使用愉快。

Filtered view
行动设计第一步:资讯架构

最后,Filtered view 让使用者用筛选的方式来切换不同内容,从而在一系列的数据中导航。筛选同分面搜索方法一样,是一种很棒的适合使用者查询内容的方法。

适用範围: 内容数量庞大的应用或网站,诸如文章,图像和视频。它可能为杂志样式的应用或网站提供了好的基础,或者是它可以作为另一个导航样式内的子样式。
注意事项: 行动装置上,由于筛选和分面搜索很複杂,所以很难在较小的萤幕上展示。

下一步

自从我第一次看到大型的砖头式行动电话起,已经过了将近二十年,。如今我、我父亲和我认识的人几乎都有一支智慧型手机,我们习惯频繁地使用它们沟通、交流并管理我们的生活。每年科技都会进步,因此我们要清楚地知道自身需求并与时俱进。设计友好的行动和桌面资讯架构正是创造绝佳行动体验的第一步。