热门文章
服务热线
- 电话 :
- 手机 : 18151678776
- 邮箱 : 858469966@qq.com
- 地址 : 南京市江宁区天元中路99号武夷广场518室(1号线竹山路站2号口)
培训动态
概述:在移动端导航设计上,想要找到一个万能的解决方案是不可能的,采用什么样的导航,始终还是取决于你的产品、用户以及上下文背景。
今天小编主要给大家分享导航栏的ui设计方式,希望对你们有帮助!
1.标签式导航栏
如果你的网站或应用程序上的导航条目数量相对有限,并且大多数都是常用的,此时你可以选择标签式导航栏。无论标签式导航栏是在页面的顶部还是底部,对用户来说都是一目了然的。
一标签式导航栏似乎是最简单的导航模式。然而,即使如此,在使用时也应注意以下常见问题:
1.标签式导航栏通常只能显示不超过5个的标签。
2.使用标签式导航栏时,至少有一个标签始终处于活动状态,并且活动标签通过颜色对比突出显示。
3.第一个标签页通常作为主页存在,标签页中的内容应该根据用户使用的优先级进行排列。
4.在标签式导航栏中,最好以图标+文本的形式呈现,例如,搜索应用程序中的搜索按钮、Instagram中的拍摄按钮,这种常见和众所周知的操作只需要通过图标来显示。
提示:为了节省空间,导航栏可以在页面滚动时隐藏,并在页面静止时显示。
2.标签栏+更多选项
当导航栏中的类目太多,但你仍然希望采用标签式导航时,可以在标签栏中显示优先级最高的4个选项,而最后一个选项使用更多按钮,单击后,可以显示优先级较低的隐藏选项。这种设计仍然比汉堡包菜单要好,虽然它仍然隐藏了一些选项,但是绝大多数重要的选项可以显示出来。点击更多选项按钮后,可以将其设计为下拉菜单或链接到单独的菜单页面,具体设计策略可以根据实际情况灵活处理。
3.渐进收缩式菜单
这种渐进收缩式菜单也被称为优先级+菜单,这是一种符合响应式设计规则的智能菜单设计。它将根据屏幕的宽度和大小,以相对较高的优先级显示尽可能多的导航条目,而无法显示的内容将包含在更多按钮中。可以在更多按钮中承载的条目数也取决于屏幕的宽度。该解决方案的灵活性,比相对固定的标签栏+更多按钮更灵活、更自然,提供了更好的体验。
4.滚动式导航
与前两种模式相似,滚动式导航是另一种解决方案。如果你的导航包含许多条目,并且优先级没有很大差异,例如音乐流派分类,你可以使用滚动式导航来呈现所有类目。用户可以滚动浏览导航条目并单击以切换类目。
这种解决方案的缺点是,在视野中显示的条目仍然有限,其它条目不滚动就在屏幕之外,用户仍然需要进行适当的探索才能发现。然而,总的来说,这仍然是一个比汉堡菜单更好的导航设计。
下一篇: 南京壹捌壹教育告诉你为什么要学CAD
相关新闻
- 部分校外培训机构违规办“全日制”学校 11-29
- 机械CAD的发展趋势 11-22
- 机构、构件、零件的概念 11-15
- AutoCAD的功能特点与实际运用领域 11-02
- 本科生想要获得“保研资格”,需要达到什么条件 10-26
- CAD软件绘制室内施工图时的基本设置操作(下) 10-19
- CAD软件绘制室内施工图时的基本设置操作(上) 10-19
- 机械零件的种类及其零件的三视图 09-25
- CAD的种类及功能特点 09-23
- 机械设计是做什么用的? 09-22