首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

​你认识Android“真面目”吗

更新时间:2023-10-19

无私向斑马

ui

910

Android的市场占有率是很高的,除了智能手机,还有智能电视、穿戴设备以及市面上很多的电子终端都是Android操作系统。由于Android的开放性,所有品牌商都可以基于原生的系统进行重新的设计,不仅是视觉表现多样性,交互形式也略有不同所以大家看到的Android设备可能是以下的样式:

​你认识Android“真面目”吗.jpg

再次设计开发,某一程度都会遵循Android的基本规范的。而官方的设计指南里里提供很多值得参考的设计方法,但是由于客观的因素影响,导致很多人没有直接接触到Android的原生系统,这次就想通过这篇文章,大概地说说,从视觉设计方面,我对Android原生系统的看法。由于Material Design包含的内容较多,网上也有很多相关的资料,包括Google的官方网站https://material.io目前也可以直接访问,不需要翻墙了,所以这次我只选取两个比较有Android特色的控件来说说我的看法。它们分别是底部导航和卡片,前者是最新规范才有的内容,后者是Android的形象代言人。

​你认识Android“真面目”吗.jpg

一、底部导航(Bottom Nabigation Bar)

底部导航是Google最新的设计规范才有的内容,以前是不建议在安卓手持设备设置底部导航(也就是IOS中常见的底部标签栏),因为会容易跟功能按键冲突,而且视觉效果也较差,但是从交互体验来说,人的手部操作热区都集中在手机下部,所以在基于用户体验,把传统的底部导航做了优化,方便用户在顶级试图地内容切换,同时也尽大可能避免跟功能按钮的冲突,确保提供更好的操作体验的同时兼顾视觉展示效果。

底部导航设计指南: 

1、标签的数量控制在3~5个之间,并显示完整。

​你认识Android“真面目”吗.jpg

​你认识Android“真面目”吗.jpg

2、标签必须直接跳转到目标页面;

3、标签的样式:设计样式必须与功能按钮有明显的区分,避免把底部导航跟功能按钮混淆。

a)图标与描述文本:

①当标签是选中状态时,建议显示图标和文本。

②当只有3个标签时,同时显示图标和文本。

③如果标签的数量在4·5个,只需显示图标。

④文本不能换行、不能只显示局部或大小不一,避免如下设计:

​你认识Android“真面目”吗.jpg

b)颜色:选中状态的标签元素颜色必须是app的主色调,如果导航栏运用的其他颜色,标签元素建议使用白色或黑色;不能使用多种色彩,如图:

​你认识Android“真面目”吗.jpg

4、标签的尺寸:

a)宽度(包括视觉大小和可操作大小):以标签数量均分,建议80dp~168dp;

​你认识Android“真面目”吗.jpg

b)高度:56dp

c)图标:24x24dp

d)间距: 

图标上边距:选中时:6dp;默认:8dp 

文本下边距:10dp;

文本左右间距:12dp;

e)文本大小: 

默认状态:14sp; 

选中状态:12sp;

​你认识Android“真面目”吗.jpg

5、交互行为

a)向下滑动,浏览内容时,暂时隐藏底部导航,网上滑动时,显示底部导航;

b)避免使用横向滑动进行视图切换;

c)模态视图必须在底部导航之上,如下弹式菜单、虚拟键盘等;

以上是Google在Material design里给出的设计规范,其实不仅在Android平台可以使用,在其他平台设计时,也可以做参考。另外在做设计设计时,也可以用8点栅格作为基准值,定制比较精准、专业的移动端页面。

版权声明 | 文章配图仅供学习参考,引用图片版权归属原作所有

               如有问题,请及时与我们联系,我们将第一时间做出处理

上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • 剪映和PR的短视频剪辑技巧

    剪映和PR的短视频剪辑技巧

    3小时22分钟26秒

  • Stable Diffusion - 2024全新AI绘画系统教学

    Stable Diffusion - 2024全新AI绘画系统教学

    1小时40分钟49秒

  • UE5游戏开发黑科技-四大So Easy插件,从菜鸟到大师仅一步之遥!

    UE5游戏开发黑科技-四大So Easy插件,从菜鸟到大师仅一步之遥!

    37分钟30秒

  • AE软件入门基础课

    AE软件入门基础课

    3小时48分钟27秒

  • PS海报创意设计课

    PS海报创意设计课

    4小时55分钟26秒

  • Q版角色三头身设计课

    Q版角色三头身设计课

    3小时9分钟29秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答