设为首页
收藏本站
搜索
热搜:
Java
Python
UI
人工智能
Web
影视特效
抖音
网络营销
运营
本版
文章
帖子
群组
用户
登陆
注册
首页
Portal
互联网资讯
视频教程
技术社区
BBS
IT培训
学历提升
快速发布
个人中心
今日签到
私信列表
消息中心
搜索全站
课程咨询
返回顶部
大内高手社区
›
技术社区
›
UI设计论坛
›
APP导航栏设计分析(下):5种设计样式
玫瑰黑糖
关注Ta
发帖数
24
粉丝
1
此人很懒,什么也没有留下
[UI设计论坛]
APP导航栏设计分析(上):4种交互状态
[UI设计论坛]
这些实用的排版技巧,能让你的设计更细致
[UI设计论坛]
三步教你提升B端表单设计的用户体验(一)
[UI设计论坛]
好的单选框设计具备哪些特质?
阅读作者更多精彩帖子
热门问答
更多热门问答
1
淘宝客注册流程步骤
22263人围观,发布于2021-09-26
1
APP运营核心要点有哪些
20663人围观,发布于2022-07-08
0
了解运营
13055人围观,发布于2021-09-18
0
网站的 TDK基本格式
12214人围观,发布于2021-09-23
0
SEO优化中网站地图在的主要作用
13510人围观,发布于2022-01-13
0
快速提高网站SEO优化排名的方法
16445人围观,发布于2022-01-13
技术文章
更多技术文章
告别“限速”,个人网盘进入云时代
2022-12-28
长难任务设计指南,必须收藏!
2022-12-28
新消费,走进「韧性时代」
2022-12-28
营销技能:营销4P之外,还有这些经典理论
2022-12-28
实例分享 | 社区产品编辑器的设计开发要点
2022-12-28
产品经理方法论——流程与审批流的区别
2022-12-27
返回列表
APP导航栏设计分析(下):5种设计样式
[复制链接]
玫瑰黑糖
Lv.2
显示全部楼层
发表于 2022-7-19 17:49:28
|
阅读模式
导航栏的5种设计风格 :
顶部导航栏设计风格需要与与整个产品的UI相匹配,常见的导航栏设计样式有扁平风格、阴影悬浮效果、颜色填充效果、使用半透明导航等。
1、扁平风格:
顶部导航区域完全融入到背景中,和整个页面融为一个整体,页面看起来比较简约。
2、阴影悬浮风格:
通过在导航栏下方增加一层阴影效果,让导航栏有悬浮在页面上的感觉,同时便于和页面其他内容作区分。
3、颜色填充风格:
将导航栏背景进行色彩填充,不透明度降低到8-12%,使用一些简约而高级的色彩来增加页面的丰富度,体现品牌特点。
4、深色风格:
APP页面的背景大多都是浅色,这个时候如果使用深色的导航,能够产生很强烈的对比效果,用来突出导航中的内容。比如早期的微信APP页面,顶部就是采用深色的导航,和浅色的页面作对比。
5、透明风格
图片详情页的UI设计中常用到透明的导航风格,既能避免导航栏将图片内容遮挡,还能突出页面的高级感。
导航栏交互状态分析:
1、选中状态:
当用户与导航栏交互时,导航栏上的控件要能够动态切换来为用户提供即时反馈,比如当选中页面中的内容时,导航栏要出对应的操作提示,是否删除、分享等。
2、滚动状态:
当页面上下滚动时,原本扁平的APP导航栏出现阴影悬浮的升高效果,状态的改变会让操作看起来更自然。
3、背景模糊
当页面滚动时,顶部导航出现毛玻璃的模糊效果,这是现在很流行的视觉效果,会让整体的用户体验更流程。
4、尺寸调整
当页面尺寸变小时,要考虑将多余的导航选项折叠并隐藏在“更多”图标里面,这样才会让设计更合理。
【免责声明】本文部分系转载,文章来源于公众号Clip设计夹 ,作者大Clip设计夹,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有帐号?
立即注册
x
回复
使用道具
举报
发布主题
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
返回顶部
返回列表