最专业的八方代购网站源码!

资讯热点
iOS和Android规范解析:导航设计摘要

发布时间:2020-2-26 分类: 电商动态

本文主要介绍如何在iOS和Android的两个设计规范中设计导航,享受〜

在过去的几周里,我们在iOS和Android设计规范中介绍了导航控件的内容。对照的比较如下表所示:

掌握了这些导航控件,今天我将讨论如何在两个设计规范中设计导航的介绍。

 Material Design Guideline

导航可以组织内容,以便用户可以在应用中更轻松地找到所需内容。导航的设计可以包括频繁访问的页面,设置选项或您希望用户执行的操作。

您如何选择最适合您应用的导航类型?您需要首先确定您的用户是谁,他们如何使用您应用的典型路径,以及您希望他们做什么。

例如,如果您正在设计餐馆应用程序,应用程序的用户可能需要执行以下操作:进行预订,转到在线po菜单(中文更可能是po菜的照片,饲料),或撰写评论。通过确定大多数用户的目标,您可以更好地设计导航结构以满足他们的首要任务。

以下详细说明了如何确定应用程序的导航结构。

 制作任务清单

了解您的用户是谁以及他们的角色,例如消费者,酒店所有者或记者。找出他们都想要执行的最常见任务。

找出您拥有哪些关键用户以及他们可能会做些什么。

 确定优先级

为用户确定任务的优先级:高,中,低。在UI界面中,为这些用户提供经常使用或优先处理具有更突出设计的功能。

根据用户需求的变化确定优先级。

在为餐馆应用程序设计导航时,优先级最高的任务包括:查看酒店信息或查找新酒店

 分组和排序

找出用户在您的应用中处理的所有流程路径,并通过研究这些路径来确定您的导航设计:

&ndash的;将用户常用的功能放在导航中的显着位置;

&ndash的;对关联任务进行分组并使用这些组来确定导航的结构。

无论用户想要找到新餐馆还是查看他们的餐馆集合,这两个操作都指向查看酒店信息。因此,我们需要允许用户在用户搜索或查看集合的过程中轻松查看酒店信息。

 拆解

将复杂,大型或混淆的用户任务分解为较小的用户任务。这些较小的用户任务可以更常见,更易于理解,或更好地满足用户目标。

例如,搜索这个大任务,分为“按名称”,“按位置”或“按受欢迎程度”这三个较小的操作,可以作为导航的一部分显示,您需要添加这些页面三个操作。

“找一家餐馆”的大任务实际上包含许多较小的任务,例如浏览附近的餐馆,按姓名搜索和按人气搜索。这些较小的任务更易于用户搜索。因此,它们应该添加到您的导航设计中。

 iOS Human Interface Design Guideline

在导航不符合人们的期望(人们感到沮丧)之前,人们不会注意到导航的设计。设计人员的任务是设计一个支持应用程序的体系结构和目的的导航,以便用户不会注意到它。导航的设计应该是自然和​​熟悉的,不应该主导界面或吸引用户的注意力远离内容。在iOS中,有三种主要的导航形式:

 层级导航

在页面的每个级别只选择一个条目,直到用户到达其目标页面。如果要转到另一个目标页面,用户必须逐步返回或从头开始重新选择。系统中的设置和邮件使用这种导航形式。

分层导航手势

 扁平导航

平面导航允许用户在多个内容类别之间切换。系统的音乐和App Store使用这种导航形式。

平面导航手势

 内容驱动或体验驱动导航

这种类型的导航允许用户自由地在内容之间切换,或者内容本身定义导航。游戏,书籍和其他沉浸式应用程序通常使用这种形式的导航。

内容驱动或体验驱动的导航手势

某些应用程序结合了多种导航形式。例如,应用程序的大型框架使用平面导航,并且在每个类别中使用分层导航。

关于导航,Apple Design Specification提供了以下建议:

总是提供清晰的路径。用户应该始终能够知道它们的位置以及如何到达目标页面。无论使用何种类型的导航,内容的路径在逻辑上都清晰,可预测且易于掌握,这是至关重要的。通常,为每个页面指定唯一的路径。如果您需要让用户在不同情况下看到同一页面,请考虑使用上拉菜单,警告框,弹出窗口或模态视图。

设计一个能让用户快速、容易地到达内容的信息结构。仔细组织应用程序的信息结构,以使用最少的交互和页面(可以携带所有信息)。

使用手势来创造流畅的体验。允许用户在操作期间体验最小的阻力。例如,设计者可以让用户从屏幕边缘滑动以返回到上一页。

使用标准的导航控件。用户已经熟悉导航控件,这使他们可以快速了解如何使用您的应用程序。

以上部分介绍了Apple和Google的设计规范中的导航设计。讨论让人们更加了解,欢迎留言。

专栏

新设计青年,微信公众号:新设计青年。每个人都是产品经理专栏作家,并获得“2017年作家奖最佳人气奖”。爱奇艺高级互动设计师。德国海龟曾为腾讯微生活,网易,信贷和其他公司工作过。

这篇文章最初发表。未经许可,禁止复制。

该地图来自Unsplash,基于CC0协议

« Seo博客优化:排名只是一个频道,流量转换为王道。 | 控制分析系列《警告框》 »