集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

成都ui设计师培训:手机APP的底部导航有什么用,怎么设计更好

发布者: 成都达内     浏览次数:     发布时间:2018-11-15 10:17:12

底部导航,是页面切换的操作按钮,过去的底部导航...

  底部导航,是页面切换的操作按钮,过去的底部导航,大部分都是白底、图标、文字。随着技术、设计、运营的发展,底部导航的视觉发展也开始丰富多彩~

  然而设计师灵机一动,开始丰富底部导航的设计,成果出来后,却发现用不上。所以在设计之前,达内成都ui设计培训小编先来给大家说一下底部设计的规则:

  目录

  一、按钮分析1、文字+图标2、文字3、图标

  二、技术规则1、图标超出原背景高度2、背景有透明感3、图标的不同格式

  ......

  一、按钮分析

  1、文字+图标

  大部分平台还是遵循现有的扁平风格,而丰富多彩的风格,一般会在各大小节日、周年庆等活动动频繁出现。

  多数情况下,我们常见的底部导航图标+文字,选中的状态下,设计师会根据对整体设计风格和自己的理解,给图标增加一些质感。

成都ui设计培训

  2、文字

  当抖音火了以后,我们注意到,底部导航直接使用文字作为按钮,小红书、美图秀秀也是同样展示形式,那...谁先用文字的,我就不知道了。但是,我们能从这3款产品中,可以找到共同点--画面(图片、视频)为主。

  找到共同点后,我们发现在使用过程中,会更能关注于阅读内容,底部导航基本不会影响浏览视觉。并且,文字按钮,也更便于用户的理解~

  大众点评现有的设计很时尚,很吸引眼球,首页内容视觉也是以画面为主,在(各大小屏幕--移动端)浏览完功能区和活动区后,视觉很快被底部图标吸引,所以我使用文字按钮尝试一下,底部视觉轻了很多,效果还是很明显的~

  3、图标

  除了独立文字按钮,还有独立图标的,单图标按钮是很少见的,很多图标并没有普及到各类用户群众去,会造成用户的认知负担,不建议使用独立按钮。

  优灵产品,为何特立独行?其实从整个产品的结构,和用户群体分析便能够理解平台设计的初衷。该产品结构只有两个部分,设计内容和我的,该行业用户是从事APP产品与设计的同学,对图标理解更容易。

  小结

  底部导航使用文字+图标、文字按钮,是保障的。但是使用文字按钮也需要考虑到整个页面的视觉,比如知乎、微博等以文字内容为主的界面,底部导航就需要文字+图标的形式来综合一下视觉。

  二、技术规则

  一到某个节日前半个月到一个月,我就开始着手设计底部导航图标,但是我又不甘于局限在48px大小的图标范围里,所以我就按照我的想法设计,再去逐步的向前端人员了解技术匹配情况。

  1、图标超出原背景高度

  ios、Android的原生图标和文字都有有默认的数值,而在实际的设计中,几乎是不用原生的底部控件默认值的,底部的按钮都是可以自定义高度样式的,背景的高度也可以调整,文字的大小也可以变动。

  以下两个例子,可以看到底部导航图标超过了背景的高度,这样的情况,我们该如何定义图标的设计范围?

  大多数设计师的切图方式是下图①,直接切图标,文字前端写。②、③图标与文字组合切也是可以的,这种方式,在未来多样化设计中,可绘制范围会更大。上图爱奇艺的底部按钮的设计范围就是③的方式,设计范围超过背景高度。图标的高度在技术上是没有限制的,在合理范围内即可。

  注意:点击效果和未点击效果的设计范围一定要一样大,内部图标尺寸、文字在设计范围内自定义。

  2、背景有透明感

  底部透明模糊的样式,ios原生是可以自带的,安卓是没有的。

  底部有透明感,会让用户感觉内容区域是从顶部到底部的,所以我开始散发我的设计想法,将底部背景设计成几乎全透明。

  当我沾沾自喜拿着设计样式给前端看的时候,前端告诉我可视内容的设置相当于遮罩,在有顶部状态栏和底部导航栏的时候,内容的可视高度是顶部状态栏的底部到底部导航的顶部距离。可视高度延伸到最底部,是能够实现我需要的透明看到内容的效果,但是会出现2个明显的问题:

  1、遮挡加载反馈2、最后一个内容回到底部

  我们来看一下不同可视高度内容的动效结果:

  用户在浏览内容,手指在屏幕滑动的距离大概在100px-200px(未找到官方研究数据,自己尝试个大概),所以右图的的加载反馈会被底部导航遮挡。

  前面有说到微博也是有透明效果,我还是带着疑问询问前端,前端的解释是ios有自带的这个处理效果,但是内容可视区域还是除去头部状态和底部导航距离的。

  3、图标的不同格式

  当初在设计底部图标的时候,我只设置了png的格式,在后来的体验优化中,团队决定将底部的静态图标处理成动画图标,(底部图标是支持多格式的,但是每一种格式都需要前端添加,但需要技术时间,所以底部导航图标的格式支持上,一定要提前告诉前端多格式支持,一般支持png、jpg、json即可,后续可以根据发展需要酌情添加,如果只支持json格式,未来图标的设计将无法添加更多效果)。

  后来我们选用了AE+bodymovin插件导出的json文件,制作图标动画,使用bodymovin实现动画是现在非常方便的一种方法,设计师专注动画制作,最后导出json文件给前端,对于前端而言只需要调用即可。但是有一个缺点:设计图必须是矢量,还都必须是独立的纯色矩形格式。不支持任何渐变、投影等附加的视觉样式。

  版权声明:文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与达内成都ui培训机构网站联系删除或授权事宜。

(责任编辑:徐老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56