【交互设计】移动设备信息架构

转载自：老二牛车教育 » 【交互设计】移动设备信息架构

移动设备同样也有自己的信息架构样式库。尽管响应式网站的结构可能更多遵从“标准化”样式，而诸如原生应用则通常采用基于标签的导航结构。

 

 

但并不存在构造移动网站或应用的“正确”方法。接下来我们会带来一些最流行的样式：层级式、辐射式、套娃式、标签视图、便当盒和筛选视图。

层级式（Hierarchy）：

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

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

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

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

辐射式（Hub-spoke）：

辐射样式向用户提供了便于跳转的中央式索引，这是iPhone的默认样式。

用户无法在分页面之间切换，而必须回到中央跳转。一直以来，这种样式主要用于工作流程受限的桌面端（通常是技术限制，诸如表单或者购买流程中受到的限制）。

然后，这种样式在移动设备上越来越流行，这是由于用户使用移动设备时会专注于单一任务，以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。

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

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

套娃式（Nested doll）：

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

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

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

标签视图（Tabbed view）：

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

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

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

便当盒/仪表盘（Bento box/Dashboard）

便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息，再把更详尽的内容链接至到索引界面。

由于这种样式很复杂，它在桌面端显示会比在移动端更为适合。这种显示醒目有力，用户只需要扫一眼就可以理解关键信息，但它严重依赖于信息清晰的设计呈现。

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

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

筛选视图（Filtered view）

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

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

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

 

转载请注明：老二牛车教育 » 【交互设计】移动设备信息架构