网易云课堂-IOS 与Android设计规范

引入: 红灯停,绿灯行

设计规范是为了培养/适应用户的使用习惯.

1.平台页面布局规范

IOS  经典的延续

文字标识更直接,但是占用更多空间

但空间足够时,推荐使用文字,而非ICON

底部标签最多放5个(目前的屏幕)

ANDROID  变化与统一

4.0 是标志性的,平板和手机统一规范

下拉菜单的缺点: 显得非常重,在狭小的空间内放置过多操作元素

标签式导航: 把下拉菜单横排在下边

右上角操作按钮过多时, 移动到页面下端: 容易引起误操作,但是页面会更加简洁

5.0 Material Design

扁平化(IOS7 -2013)意味着所有的事物都只有x轴和Y轴

Material Design 在页面上加了一个z轴, 提升层次感

与之前的拟物化设计是存在区别的

Z轴意味着, 页面之间有一个上下的相对位置

如 一个看似悬空的按钮/ 抽屉式导航

2. 平台常用控件

控件库是规定好的  样式

做控件设计的时候,要先看看这个控件是不是平台自身所带的,

平台所带的是可以直接调用的

IOS: 页面内搜索框

Android: 搜索图标

不符合平台规范的设计会增加开发的工作量

EX: 闹钟——时间选择器

音量调节——滑块控件

开关控件

虽然操作控件不同,但是基本的交互动作是一样的.

进度读取: 无限循环指示器(短时间等待) vs. 进度条(等待时间比较长)

退出控件—— 无限循环控件

H5页面加载——进度条

3. 平台常用手势

直觉化

快捷高效

随着大屏的普及,未来的页面会变得越来越大

通过手势的滑动和捏合,会带来很多便利

一切的设计目的都是以用户的使用场景为中心