作者:跳跃望猎豹 发布时间: 2023-01-28 17:32:28 浏览量:545次
安卓与iOS一直都是占据市场主流的两大系统。大家可能都用过这两个手机系统,但是对于它们各自的特性却不太了解,今天就带大家先了解一下安卓系统的“真面目”。
Google在推出Android Lillipop(5.0)时,正式介绍名为Material Design的设计语言,其包含了视觉、动效和交互设计,并支持多平台的综合规范。
Android的市场占有率是很高的,除了智能手机,还有智能电视、穿戴设备以及市面上很多的电子终端都是Android操作系统。由于Android的开放性,所有品牌商都可以基于原生的系统进行重新的设计,不仅是视觉表现多样性,交互形式也略有不同所以大家看到的Android设备可能是以下的样式:
再次设计开发,某一程度都会遵循Android的基本规范的。而官方的设计指南里里提供很多值得参考的设计方法,但是由于客观的因素影响(墙太厚 - -!),导致很多人没有直接接触到Android的原生系统,这次就想通过这篇文章,大概地说说,从视觉设计方面,我对Android原生系统的看法。由于Material Design包含的内容较多,网上也有很多相关的资料,包括Google的官方网站https://material.io目前也可以直接访问,不需要翻墙了,所以这次我只选取两个比较有Android特色的控件来说说我的看法。它们分别是底部导航和卡片,前者是最新规范才有的内容,后者是Android的形象代言人。
底部导航(Bottom Nabigation Bar)
底部导航是Google最新的设计规范才有的内容,以前是不建议在安卓手持设备设置底部导航(也就是IOS中常见的底部标签栏),因为会容易跟功能按键冲突,而且视觉效果也较差,但是从交互体验来说,人的手部操作热区都集中在手机下部,所以在基于用户体验,把传统的底部导航做了优化,方便用户在顶级试图地内容切换,同时也尽大可能避免跟功能按钮的冲突,确保提供更好的操作体验的同时兼顾视觉展示效果。
底部导航设计指南:
1、标签的数量控制在3~5个之间,并显示完整。
2、标签必须直接跳转到目标页面;
3、标签的样式:设计样式必须与功能按钮有明显的区分,避免把底部导航跟功能按钮混淆。
a)图标与描述文本:
①当标签是选中状态时,建议显示图标和文本。
②当只有3个标签时,同时显示图标和文本。
③如果标签的数量在4·5个,只需显示图标。
④文本不能换行、不能只显示局部或大小不一,避免如下设计:
b)颜色:选中状态的标签元素颜色必须是app的主色调,如果导航栏运用的其他颜色,标签元素建议使用白色或黑色;不能使用多种色彩,如图:
4、标签的尺寸:
a)宽度(包括视觉大小和可操作大小):以标签数量均分,建议80dp~168dp;
b)高度:56dp
c)图标:24x24dp
d)间距:
图标上边距:选中时:6dp;默认:8dp
文本下边距:10dp;
文本左右间距:12dp;
e)文本大小:
默认状态:14sp;
选中状态:12sp;
5、交互行为
a)向下滑动,浏览内容时,暂时隐藏底部导航,网上滑动时,显示底部导航;
b)避免使用横向滑动进行视图切换;
c)模态视图必须在底部导航之上,如下弹式菜单、虚拟键盘等;
以上是Google在Material design里给出的设计规范,其实不仅在Android平台可以使用,在其他平台设计时,也可以做参考。另外在做设计设计时,也可以用8点栅格作为基准值,定制比较精准、专业的移动端页面。
优秀作品赏析
作 者:李思庭
所学课程:2101期学员李思庭作品
作 者:林雪茹
所学课程:2104期学员林雪茹作品
作 者:赵凌
所学课程:2107期学员赵凌作品
作 者:赵燃
所学课程:2107期学员赵燃作品
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!