首页 UI设计正文

体验更好的 UI 底部导航栏是怎样设计出来的?

我是飞天兜 UI设计 2021-08-31 14:29:37 401 0 | 文章出自:我是飞天兜

设计 UI 底部导航栏可以说是绝大多数 UI 项目当中必然会遭遇的设计内容,而这篇来自设计师 Vikalp Kaushik 的文章详细梳理了底部导航栏的最佳实践:

导航在 UI 界面当中是相当常见、直接影响用户体验的基础组件。通常底部导航,会用到图标、文本标签等元素,看起来不复杂,但是想要设计出效果,在视觉、交互、体验、逻辑上确保质量,还是有很多注意事项的。这篇文章就系统梳理一下 UI 导航栏的设计。

一、为什么要设计导航栏?

1、用户可以快速检索到他们在哪个区域

2、允许用户快速在不同的功能模块间切换

3、让用户快速了解到不同界面的功能

二、导航栏的重要性

将导航栏置于底部,很大程度上是基于用户拇指交互的覆盖区域。无论使用左手交互还是右手交互,底部导航栏都处于用户拇指可以自然覆盖的区域,

除了结合汉堡包菜单之外,底部导航还需要横跨多页,保持不变。

三、底部导航栏结构

底部导航栏的基本布局结构:

1、承载导航元素的控件容器

2、激活状态下的文本标签(可选)

3、非激活状态下的文本标签(可选)

4、激活状态下的图标

5、非激活状态下的图标

 体验更好的 UI 底部导航栏是怎样设计出来的? 第1张

四、导航栏尺寸

虽然图标的形状会因为设计的差异而有所不同,但是在图标外观的现实格式和基础尺寸上,应该保持一致。

激活状态下的图标尺寸可能会有所增加,配色和轮廓会微调,以达到抓人眼球的目的,但是不应差异太大。

在具体的设计上,底部导航栏形成了如今的一套最佳实践。

1、3-5个按钮最为合适

确保底部导航的按钮控制在3-5个之间。5个按钮通常会让导航的空间比较紧凑局促,用户可能会误触,这样会让体验非常差。

如果真的有超过5个导航图标的话,建议参考 Google 的做法,使用汉堡菜单将它们隐藏在其他更加易于访问的地方。

2、尽量不要使用滚动式的导航栏

这同样是为了解决导航栏图标过多的问题而诞生的一个思路,但是这个方案其实解决不了问题,因为总会有图标被遮住,这样带来的不确定的问题更多!

3、视觉和风格需要保持一致

保持图标在设计上的一致性其实非常重要,这是保证 APP 在设计上,有着最基本的专业性。不一致的设计非常容易被用户注意到,带来的用户体验的隐患是非常之大的。比如图标的样式尽量保持一致,风格保持统一,等等等等。

4、避免多种颜色混用

作为一个对功能性要求较高的控件,导航栏本身是需要传递「触发」和「非触发」的概念的,而信息的传达更多时候是借助色彩和不透明度来呈现的,使用过多的色彩会导致导航栏失去这种基础的辨识度。

5、文本标签不要截断或换行

文本标签为导航栏提供了快速且易于理解的信息提示,尽量使用单个词汇来予以说明才符合它所处的位置,所以,尽量不要让它被截断或者换行。

结语

提供完美的导航设计并不复杂,确保导航简单、清晰,确保一致性的前提下,挑选一套精心制作的图标,通常就能很快地出效果。和很多别的设计不同,导航栏的设计通常是越简单明了,越容易出效果。


收藏(0)
UI设计图标图标库设计项目设计师
版权声明

1、本网站属于个人的非盈利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章:如果原文明确注明“禁止转载”我们一定不会转载。

2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因为信息的不正确或遗漏导致的任何损失或损害承担责任。

3、任何透过本网站网页而链接及得到资讯、产品服务,本网站概不负责,亦不负任何法律责任。

4、本网站所刊发、转载的文章,其版权归原作者所有,如其他媒体、网站或个人从本网站转载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网站注明的“稿件来源”并自负版权等法律责任。

5、本站内容为传递信息使用,仅供参考,不构成营销建议。

6、如不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!谢谢。

发表评论

评论列表(0人评论 , 401人围观)
☹还没有评论,来说两句吧...

网站建设_网站优化就上魁元网络

https://www.kuaichez.com/

| 粤ICP备2020133026号

Powered By 魁元网络 版权所有

使用微信扫描二维码

关注我们看更多资讯

欢迎您光临魁元网络