柯寨王郜门户网站 > 科技 > 关于底部导航栏设计,你忽略了哪些?

关于底部导航栏设计,你忽略了哪些?

发布时间:2019-12-02 21:48:26 | 来源 :柯寨王郜门户网站

本文翻译了材料设计规范中底部导航的规范概要,希望能给你带来更多的帮助。

本文翻译了材料设计规范中底部导航的规范概要,希望能给你带来更多的帮助。

注:以下内容在翻译过程中已根据阅读习惯进行了调整。如果有什么问题,请根据官方网站链接进行比较。

在移动应用中,底部导航栏可以在目标选项之间自由切换。

底部导航栏在屏幕底部显示3到5个目标选项。每个选项都由图标和文本标签显示。单击底部导航图标将引导用户找到与其相关联的视图。

人机工程学:底部导航栏可以在手持移动设备上轻松访问。

一致性:使用时,底部导航栏显示在每个屏幕的底部。

相关:底部导航栏上的选项必须同等重要。

底部导航适用于:

底部导航不应用于:

对于少于三个目标选项,不要使用底部导航栏(改用标签选项卡)。

避免使用5个以上的目标选项(在这种情况下,尝试标签或抽屉导航)。

底部导航和选项卡的组合可能会导致混淆,因为它们与内容的关系不够清楚,选项卡具有相同的主题,而底部导航是顶层功能,彼此不相关。

底部导航目标选项的显示方式取决于使用的目标选项数量:

底部导航有三个目标,每个目标都有一个图标和一个文本标签。

底部导航目标总是包含一个图标。最好的方法是将图标与文本标签结合显示,尤其是当图标没有明确的含义时。

图标与文本标签一起显示。

文本标签使用简短且对底部导航功能有意义的文本。

使用短文本

避免截取文本。拦截可能会掩盖重要的目标信息。

避免缩小单行文本

避免文本折叠显示

活动和非活动图标和文本标签应该与导航栏的底部块形成鲜明对比。根据组件的配色方案,活动图标应以应用程序主题颜色或高强度选定颜色显示。非活动图标和文本标签可以以中等强度的选定颜色显示。

底部导航活动标签使用应用程序主题颜色或高强度选定颜色显示

避免使用不同的颜色或低强度的选定颜色来显示图标和文本标签,因为这使得用户难以区分活动图标和导航到其他目标视图。

安卓和ios系统的底部导航会有不同的显示。当您选择底部导航选项(当前未选择)时,每个系统将有不同的显示结果:

android:

应用程序导航到目标顶级视图界面;重置任何以前的用户交互和临时屏幕状态,如滚动位置、标签选择和内嵌搜索。

ios:

目的地反映了用户先前的交互。如果用户先前已经访问了应用程序的这一部分,他将返回到他最后一次查看的视图(如果可能,保持他先前的状态);否则,应用程序导航到顶级视图。

当需要改善用户体验时,可以覆盖默认平台导航。例如,需要频繁切换部件的android应用程序可以保持每个部件的状态。或者,如果更适合用例,ios应用程序可以将用户返回到顶层视图(或者重置他们的滚动位置)。

在android上,重新访问一个部分会重置应用程序,并将用户返回到它的顶层视图。

在ios上,当用户重新访问界面时,他将返回界面停止的位置,例如详细信息视图界面。

当向下移动应用程序的层次结构(从父屏幕到子屏幕)时,底部导航栏可以永久显示,以便在应用程序的各个部分之间快速导航。

肩部标记:

底部导航图标可以在其右上角使用肩部标记。这些标签可能包含动态信息,例如一些挂起的请求。

滚动:

滚动时,底部导航栏可以显示或隐藏。

过渡:

建议使用淡入动画在底部导航目标之间过渡。横向运动(从一侧到另一侧)的转变可能意味着项目之间不存在对等关系,或者误导用户认为他们可以使用手势在部件之间导航。

使用淡入动画在活动和非活动底部导航目标之间转换。

避免使用横向运动在视图之间切换。横向运动被保留用于对等目标之间的导航。

底部导航可以暂时被对话框、底部表单、抽屉导航、屏幕键盘或完成该过程所需的其他元素覆盖。它们不应永久显示在任何屏幕上。

“收音机”屏幕的搜索功能触发屏幕键盘暂时覆盖底部导航栏,直到搜索过程完成。

底部导航栏的目标选项有固定的位置,它们不会水平滚动或移动。

避免使用滚动底部导航。

在移动设备(水平屏幕)或平板电脑上,底部导航目标可以保持与纵向模式相同的间距,而不是均匀分布在底部导航栏上。

在移动设备(水平屏幕)或平板电脑上,底部导航目的地可以水平放置,而不是折叠。在这种情况下,推荐选项均匀分布在底部导航栏上。

底部导航目标可以是活动的、非活动的、聚焦的或选定的。

底部导航使用不透明度和文本来显示选项何时处于活动状态。该状态用于显示按下、聚焦和未选择的状态。

非活动目标会降低透明度,而活动目标会全部显示。

如果不总是显示文本标签,则仅显示活动目标的文本。

标注:

最小宽度

最大宽度

布局

今天的分享到此结束,更多相关的扩展可以在官方网站上看到。

原始链接:https://material . io/design/components/bottom-navigation . html #行为

地址:https://mp.weixin.qq.com/s/q1pw0aw2ntcqdihfydy2aw

作者:豪华轿车,公共号码:线路视觉

这篇文章由@ limo发表。每个人都是产品经理。未经作者许可,禁止复制。

主题地图来自unsplash,基于cc0协议。

江西11选5开奖结果 黑龙江快乐十分 黑龙江快乐十分

新闻排行榜
相关新闻
热点新闻



© Copyright 2018-2019 mucrazzy.com柯寨王郜门户网站 Inc. All Rights Reserved.