Get best of the week

如何通过移动应用程序中的导航进行思考



重要的是，仅将按钮放置在需要的地方，以免堵塞界面并且在视觉上不会对用户造成负担。为用户提供决定是否单击现有按钮的必要信息非常重要。现在介绍导航。我试图推测为什么应用程序中的某些元素是这样实现的。

汉堡包


在“汉堡包”类型的下拉菜单中，放置很少请求的非目标菜单项是有意义的，因为您需要单击按钮才能访问这些项目。这减少了用户原则上会识别出按钮（如果这不是界面中的唯一按钮）后面那些菜单项的存在的可能性。同样，根据此按钮在屏幕上下文中的引人注意，还有很多事情开始。在汉堡包中，您通常会看到用户很少要求的政策和用户协议，帮助，常见问题解答以及详细的技术信息。同时，目标按钮位于下部菜单中-对用户而言尽快。

只需单击一下-如果只单击一次，则需要几秒钟。而且，当您每次要使用应用程序的目标功能时都需要进行此单击时，可能会导致总计数小时的浪费时间。我们关心我们的用户。


图。1.汉堡菜单示例

轮廓


用户喜欢个性化。因此，配置文件的存在在社交取向的一小部分应用中非常普遍。那些。如果应用程序暗示要交换信息或其他涉及将您标识为另一个人之前的人的信息，则自动暗示该应用程序还必须具有配置文件，并且可以进行灵活设置。如果用户没有机会纠正在注册诸如登录或电子邮件之类的个人数据时形成的错字，或者没有改变向其他用户显示的个人资料图片，这将带来痛苦和痛苦。通常用用户设置的带有人形图标或头像的配置文件来指定。

您应该注意Instagram的工作方式。为了不使一个带有彩色配置文件图标的已连接帐户分散用户的注意力，该配置文件由与主菜单颜色相同的标准图标表示。当连接了多个帐户时，您将从哪个帐户进行操作-它变得非常重要，可以更加强调用户当前使用的配置文件。因此，“活动”配置文件图标已经在菜单中可见。


图。 2. instagram底部菜单的屏幕截图。左侧-一个用户个人资料，右侧-两个已连接的个人资料到一个帐户

我还注意到，我看到了一些应用程序，这些应用程序并不意味着在其他人面前识别用户身份，但是与此同时，过多的空间和注意力集中在用户的头像上。而且，当然，在这种情况下，人们很少会用个性化的东西替换它，因为除了他们之外，没有人看到这个化身。这通常发生在面向技术的系统中，例如用于在某些仓库中核算某些物品或跟踪任何统计信息的应用程序。在这种情况下，确实值得提出一个问题：“这里需要此功能还是需要如此功能？”。

下层菜单


目前最常见的菜单形式。而这种流行有一个基础。

它方便，易读，在android和ayos设计指南中对此进行了介绍。它已经确立了自己的地位，并已确认经过长时间的使用是方便和可理解的。

通常，我会指出此菜单的几个阶段。对于完全创新的应用程序而言，图标的不寻常用户仍在使用它们来指示菜单项，例如，当应用程序的受众打算进行积极的营销时，第一次是像Ticktok那样使用菜单项上的签名。菜单项的签名也应留给具有复杂导航或广泛功能的应用程序，在这些应用程序中很难明确地解释一个或另一个图标。

当形成了针对重点狭窄的应用程序的很大一部分受众，然后由口口相传和不太积极的营销活动时，您可以删除菜单项的铭文，并为应用程序的主要内容分配更多的空间。例如，减少菜单下早些时候分配的空间。对于标准的标准应用程序，或者已经聚集了不断活跃的观众的应用程序，可以使用不带签名的菜单。


图3。 Ticktock应用程序屏幕截图

在某些情况下，习惯上以视觉方式突出显示最基本的目标动作。在菜单的每个部分中，我们可以继续进行内容的创建，因为每个菜单项都以某种方式与内容相关，并且应用程序的全部本质就是内容的创建和交换。一个示例是Ticktock的屏幕截图。

我注意到菜单看起来很不寻常，并且在设计网站上颇受欢迎，但与此同时，在拥有大量观众的实际应用程序中，菜单很可能不会普及。因为不方便阅读菜单项。


图4。垂直菜单

该部分中的标签



如果数据属于一个部分，但同时有一些差异。

例如，在面向设计师的Dribble应用中，Feed中您关注的人，热门出版物和最新出版物之间都有切换。那些。信息是相同的，但是分别进行了排序和过滤，并且提供的服务有所不同。一个类似的示例是在Ticktock中的订阅和精选视频之间切换。

选项卡在Instagram上的使用略有不同。借助选项卡，您可以在配置文件中的小节之间切换。通常，这也是合乎逻辑的，因为我们转到个人资料与特定对象进行交互-无论是我的帖子，其他人出版物中提到的菜单还是其他内容。

并以instagram为例，很容易证明不需要向所有用户显示某些部分。特别是在遮罩部分的示例上。在我知道它们的存在并且可以自己创建它们之前，我没有这个部分。当我将第一个面具上传到该社交网络后，此部分便开始出现在我体内。对于不了解口罩但将Instagram用于其他目的的人来说，这是没有用的。这些用户不需要使用不必要的信息来使屏幕超载。对于那些发现了这种机会的人，因此需要此部分。


图。5.当我上传蒙版时以及在上传第一个蒙版之前，Instagram

后退箭头/十字


例如，如果我们在一个小节的框架内披露了详细信息，那么最好以动画方式显示该小节已被打开。十字或后退箭头用于折叠详细信息并返回上一屏幕。

从列表或产品卡切换时，这通常很有意义，以便用户理解他将返回到从列表移出的位置。并且用户将能够继续继续浏览分类，而不必滚动到他进入详细部分的目录的所需级别。在Wildberries，Ozon，Lamoda等应用程序中可以轻松查看示例。


图。6.动画打开卡的详细信息并通过箭头返回列表

面板从下面出来


它的工作方式与向详细信息的过渡类似，但用于需要可视化访问进行过渡的部分的情况。因此，它经常用在地图上，到目前为止，您可以决定要去的地方以及需要克服的距离，并且可以根据地点描述中的一些更详细的信息来确定。另外，该技术还用于食品应用中。当您保留对在致电表格之前张贴的信息的访问权时，您需要在其中输入订购的食物数量。Ticktock中的旅行评论面板也是一个很好的例子。我们留下了“记住”发表评论的机会，实际上，当我们在面板上添加评论时，可以看到该视频的一部分。


图。7.左侧是Google地图的屏幕截图，中间是Yandex食物，右侧是Ticktok


关于它们具有什么影响以及多少取决于它们有很多讨论。但是，尽管人们在寻求社会认可并且没有提出其他形式，但社会认可按钮仍会保留在应用程序中。

有些按钮本身会执行操作，有些则滚动到可以执行此操作的位置。在这种情况下，焦点将直接移至执行动作的空间。作为示例，在第一种情况下，就像。我们单击一下，立即看到它们的数量增加了，心脏也变色了。作为第二个选项的示例，这些是注释。当您单击评论时，我们要么展开出版物的评论，要么立即专注于输入字段以留下评论。那些。很小但发生重定向。

结论


在应用程序中构建导航是一件需要专心，恒心和逻辑存在的事情。

用您的同意，不同意写，这可能值得在文章中添加一些内容。

More articles:


All Articles