发布时间:2022-1-20 分类: 电商动态
的导航类本文将详细介绍组件控制结构中的导航系统,分为7类:底部选项卡式导航,分段导航,列表导航,下拉菜单导航,抽屉导航,宫廷格式导航和卡片导航。
什么是控件?什么组件?两者有什么区别?
控制转换为控件,组件转换为组件。
流行的说法是组件是多个元素的组合,控件是单个元素的组合。
如果你只是通过组件控制,很难满足功能划分的要求,所以我将扩展这个范围。分类不仅包含组件和控件,请不要关心细节。
以下脑图是设计规范的重点,是系统学习组件控件和功能类别的目录。
导航类
导航的作用是什么?
1.结构化产品内容和功能
导航系统相当于APP的骨架,支持内容和功能的血肉。导航系统起着组织内容和功能的作用,允许他们根据产品的信息结构图进行连接,呈现在用户面前,导航将是分散的内容,功能组织成为一个完整的结构化系统。
2.突出核心功能
导航在核心功能中起着重要作用,并适度隐藏次要功能。核心功能对目标用户来说是最重要的。
3.展平用户任务路径
信息层次结构可以很好地展平,同时提供对不同信息类别或条目的访问。用户可以快速切换不同模块,而不会失去方向。
底部标签式导航
定义:
位于页面底部的主目录的导航可以告诉用户当前位置以及用户切换级别之间的不同模块,通常不超过五个标签。
特性:
标签导航是目前最常见的导航形式。最常见的原因是标签式导航可以增加流量并区分流量,因此每个模块都有机会获得流量以改善页面流量的转换。
无论用户是单手操作还是双手操作,将常用导航放在底部,您都可以轻松地在功能模块之间进行单击。
选项卡式导航具有底部导航和顶部导航,底部导航用于全局导航,顶部导航用于辅助导航(Material Design规范除外)。
优点:
它可以承载具有相同重要性和频率的功能模块,信息或任务。
它可以支持用户在第一时间获取最重要和最频繁的信息或任务。
它使用户能够在不同的模块,信息和任务之间快速切换。
它具有包容性,可以解散其他信息的框架,以构建更大容量的模块,信息或任务架构。换句话说,许多应用程序的整体架构是表格结构,然后其他架构用于在界面中携带特定信息。
缺点:
由于尺寸限制,标签导航的最大数量优选为五个,并且超过五个应考虑产品是否需要分组是合适的还是考虑更换框架。
标签栏占用一定的空间,从而减少了页面上携带的信息量。为了更好地显示页面信息,某些产品使用隐藏的标签栏,当用户在幻灯片上滑动时将隐藏标签栏,然后在幻灯片返回时显示。这种方法确实处理了页面上显示的信息,但在特定产品上也应谨慎对待,因为它可能使导航不方便并降低切换效率。
舵导航
底部选项卡式导航的变体。为突出中间功能,中间标签图标的设计更加突出,鼓励用户更多地使用此功能。
除了侧面的四个标签之外,其他重要的标签隐藏在方向舵导航中,或者那些重要且经常使用的标签放在里面。
然而,方向舵导航本身就是矛盾的。在方向舵导航中,位置应该是重要性和使用频率的函数。既然它如此重要,为什么它应该隐藏在方向舵导航中呢?这些功能相当于埋在辅助接口中,这将增加用户。内存负担和运营负载。
分段控制导航
定义:
通常用于在同意模块下显示有关不同类别的信息或过滤有关未使用模块的信息。
功能:
一般用于二次导航。
优点:
信息层次结构可以很好地展平,同时提供对信息分类或模式的访问。
用户可以在同一模块下快速切换不同类别的信息,而不会丢失方向。
缺点:
分段控制导航位于顶部,切换不方便。尽管iOS有左右滑动手势,但很多用户都不知道。
占用空间,导致屏幕显示较少的区域。
表格导航
定义:
特定模块内容的信息通常被分类并以列表的形式呈现。
功能:
特定模块的结构以列表的形式分类和显示,并且结构清晰且易于用户理解。
它主要用于协助主导航呈现信息甚至更多级别的内容。
它适用于大量的信息分类和呈现,空间利用效率高,可以显示大量项目。
优点:
表格结构具有高度可塑性,可以不断增强信息。一般来说,其信息格式相对一致,调整灵活性高,信息抗拒能力强。
它具有很高的导航效率,可以编制索引。
它可以很容易地分类。
适用于广泛而深入的信息层次结构。
缺点:
该功能比表格更重要,所携带的信息类型也相对简单,容易使用户感到单调,用户很难长时间停留。
如果列表中包含的信息量很大,则通常需要添加搜索功能或索引,否则用户将难以找到信息。
下拉菜单导航
定义:
通常用于在同一模块下过滤不同类别的信息,或者快速启动一些常用的功能模块。
功能:
为了让更多用户能够在有限的屏幕空间上执行更多操作,请减少对用户查看信息的干扰。
可以对同一模块的信息进行分类,以便用户更清楚地了解该模块为我们提供的信息或分类。
这种导航形式通常不用于全球导航。它主要用于浏览APP的辅助导航。用户通常一次只浏览一种类型的内容。就像微博一样,女孩们在化妆时总会刷牙。继续。菜单导航的另一个优点是可以节省屏幕空间。它使用扩展图标将几个甚至几十个类别组合在一起。在英寸的移动屏幕上尤其重要。
微博国际版和无秘密的二级导航都采用菜单导航的形式。
抽屉导航
定义:
通常,在产品沉浸式读取的情况下,其他模块的切换频率较低,并且可以采用该导航形式。
特性:
通常与底部选项卡式导航相结合,第一页中的信息被细分以提供清晰的演示。
如果产品追求卓越的核心内容。当其他信息的呈现可以被削弱时,可以使用这种形式的导航。
抽屉意味着放在一起。它将除核心功能之外的低频操作放入抽屉,使用户可以获得身临其境的体验,并且可以集中用户的注意力,让用户更好地完成核心功能,而不会受到干扰。我们可以将抽屉导航与极简主义生活方式进行比较,只显示必要的东西,其余的将被丢弃或整理出来。
优点:
用户可以专注于主页,减少对其他类型导航的需求,从而分散用户注意力,让用户更加身临其境地感受操作和阅读。
充分利用您的屏幕空间。
缺点:
废物流量,其他模块的流量将被包含。它不利于最大化整个产品的页面流量。
如果产品框架很大,则需要同时进行升级。此导航不适用。
宫殿格式导航
定义:
类似于手机桌面的每个应用程序门户的导航方法。每个条目通常是相对独立的信息内容。用户输入条目后,仅处理与条目相关的内容。如果要跳转到其他门户,必须先返回门户界面。
功能:
信息的呈现相对较小,但多项的效率相对较高。
优点:
宫殿格式结构可以作为信息或平台的入口点,为产品或项目信息提供聚合载体。
它适用于托管订阅产品或具有许多不同属性差异的分类信息。
它可以划分多个内容,多个模式,每个模块由不同的团队独立开发进行聚合。
凭借强大的可扩展性,您可以无限扩展内容。
缺点:
用户选择了很大的压力。
用户无法在第一时间看到这些信息。由于宫殿格式结构是信息或平台的入口,因此具体信息往往隐藏在下一级界面中。
卡片导航
定义:
更加可视化的导航,可以根据页面内容的变化更新图片,适用于基于图像的内容,例如新闻,食物,旅行,视频图片等,通常用作辅助导航。
功能:
宫廷格式导航的扩展形式。每个条目都可以提供更多信息。
优点:
对流量的要求相对较低,并且相应地增加了单个条目的转发率。如果产品运行能力低或需要高进入转换率,则可以使用此功能。
缺点:
当操作量很大时,这种结构会降低用户查找信息的效率。