大内高手社区

标题: APP导航栏设计分析(下)：5种设计样式 [打印本页]

作者: 玫瑰黑糖 时间: 2022-7-19 17:49
标题: APP导航栏设计分析(下)：5种设计样式

　　导航栏的5种设计风格：顶部导航栏设计风格需要与与整个产品的UI相匹配，常见的导航栏设计样式有扁平风格、阴影悬浮效果、颜色填充效果、使用半透明导航等。

　　1、扁平风格：

　　顶部导航区域完全融入到背景中，和整个页面融为一个整体，页面看起来比较简约。

　　2、阴影悬浮风格：

　　通过在导航栏下方增加一层阴影效果，让导航栏有悬浮在页面上的感觉，同时便于和页面其他内容作区分。

　　3、颜色填充风格：

　　将导航栏背景进行色彩填充，不透明度降低到8-12%，使用一些简约而高级的色彩来增加页面的丰富度，体现品牌特点。

　　4、深色风格：

　　APP页面的背景大多都是浅色，这个时候如果使用深色的导航，能够产生很强烈的对比效果，用来突出导航中的内容。比如早期的微信APP页面，顶部就是采用深色的导航，和浅色的页面作对比。

　　5、透明风格

　　图片详情页的UI设计中常用到透明的导航风格，既能避免导航栏将图片内容遮挡，还能突出页面的高级感。

[attach]554[/attach]

　　导航栏交互状态分析：

　　1、选中状态：

　　当用户与导航栏交互时，导航栏上的控件要能够动态切换来为用户提供即时反馈，比如当选中页面中的内容时，导航栏要出对应的操作提示，是否删除、分享等。

　　2、滚动状态：

　　当页面上下滚动时，原本扁平的APP导航栏出现阴影悬浮的升高效果，状态的改变会让操作看起来更自然。

　　3、背景模糊

　　当页面滚动时，顶部导航出现毛玻璃的模糊效果，这是现在很流行的视觉效果，会让整体的用户体验更流程。

　　4、尺寸调整

　　当页面尺寸变小时，要考虑将多余的导航选项折叠并隐藏在“更多”图标里面，这样才会让设计更合理。

　　

【免责声明】本文部分系转载，文章来源于公众号Clip设计夹，作者大Clip设计夹，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与联系我们，我们会予以更改或删除相关文章，以保证您的权益!

欢迎光临大内高手社区 (https://bbs.tedu.cn/)