平台页面布局规范
ios(总结:经典的延续)

页眉——导航栏
用于实现再应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。
页脚——工具栏
用于防止操作当前屏幕中各对象的控件。
页脚——标签栏(最多承载5个)
标签栏让用户在不同的任务、界面和模式中进行切换
Andriod(总结:变化与统一)

页眉——操作栏(Action Bar)

两种快速界面切换的规范

操作栏也可以转移到下面,界面会变得更简洁干净。但是会增加误操作的风险,操作栏用于实现APP内视图的切换和层级间的导航
(返回上层),还会防止一些重要控件。
操作栏也可以转移到下面,界面会变得更简洁干净。但是会增加误操作的风险,操作栏用于实现APP内视图的切换和层级间的导航
(返回上层),还会防止一些重要控件。
安卓5.0在扁平化的基础上增加了了一个z轴变化,增加了页面的质感和层次感
安卓5.0的规范

页眉——应用栏(APP Bar)
应用栏在以前的安卓版本中被叫做操作栏,是用来显示应用的标识,应用导航,内容搜索以及其他操作。例如:

界面切换放到了抽屉式的导航里面(安卓5.0)


二级界面可以直接加载抽屉式导航的下面,但是这样对用户来说切换不是很好切换,也不好点击。这个时候我们可以参照上图所示的方式将二级页面放到二级导航栏里面。
平台常用控件
控件——控制元件,用户通过控件来操作界面状态或设定状态

在两个平台里面,搜索框的控件也是不一样的。

当用户等待时间比较短时,我们使用无限循环指示器,如果我们等待时间有可能比较长时,我们则使用进度条告诉用户我们当前所执行的进度时怎么样的。

平台常用手势
优势:直观化和快捷高效

例如ios端删除右滑,而安卓则是长按出现删除按钮
文章整理自网易云课堂学习笔记
网友评论