Android及IOS设计规范简介,交互设计干货

2019-10-01 14:35 来源:未知

关于设计规范的重要性就不多说,这篇文章主要通过举例对比,来帮助大家深刻认识两大移动平台(IOS&Android)的设计规范以及它们之间的差异。

什么是交互设计规范?

就是交互设计的统一规则,对设计风格、设计规则的约定。页面怎么布局?使用何种控件?等等

ios与Andriod的设计规范

ios端:经典的延续

图片 1

图片 2

页眉——导航栏

用于实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。

页脚——工具栏

用于防止操作当前屏幕中各个对象的控件。(想放置更多功能入口,icon是一个好的选择。但是文字能刚清晰的表达和传达。)

图片 3

页脚——标签栏

让用户在不同任务和不同界面模式中切换。

安卓:变化与统一

1.概览

图片 4

安卓的变化

2.特点

图片 5

四个操作栏的样式

下拉菜单的导航栏不好的地方,模式较重。标签式导航,滑动或者点击切换也是一个方式。

3.Meterial Design安卓5.0的时代,加入Z轴。抽屉式导航比较推崇。

图片 6

与4.0的差异在于下拉菜单的内容收放在抽屉式导航内

图片 7

二级导航在页面之中切换

控件

图片 8

两个平台的控件对比

图片 9

区别

图片 10

无限循环适用于较短的等待

手势操作

图片 11

不同平台的手势操作

首先,从平台的页面布局上看,两大平台布局方式上明显存在差异,如图:

为什么需要设计规范?

  • 快速实现产品设计
  • 统一用户在平台当中的行为习惯,就如同在交通系统中,红灯特指停,绿灯特指行,如果某个城市改变了这一规则,其他地方的人来到这里,将会引起交通瘫痪。

图1

使用设计规范时的注意点

  • 在没有更好的设计方案时,尽量遵守设计规范
  • 特殊情况下,不必拘泥于设计规范,一切以用户的使用场景为基准

我们对两大平台分别从页眉、页脚进行详细解说,先是IOS平台,

常见的设计规范

图2

页面规范

IOS的页眉,也就是我们说的导航栏,用于实现在应用不同信息层级结构间的导航,有时也可用于管理当前屏幕内容。具体效果,如图3,

IOS页面规范
  • 页眉(导航栏):

用于不同信息层级之间的导航,有时候也用于当前页的管理,比如从二级页返回至一级页,对当前页的内容的删除功能等

  • 内容区
  • 页脚(工具栏或标签栏)

工具栏主要是当前页面的一些操作,可以用icon或文字操作,操作较少时,建议用文字,较多时,建议用icon,使得页面更简洁

标签栏用于在不同的任务、界面和模式中切换,一般不超过5个

图3

Android页面规范

安卓4.0中常见页面布局

图片 12

几种常见的页面布局,图片来自网易云课堂

  1. 大而全的主操作栏
  2. 主操作栏(Action Bar)+ 顶部次操作栏
  3. 主操作栏 + 底部工具栏
  4. 主操作栏 + 刺激操作栏 + 底部工具栏
  • 页眉(操作栏 Action Bar)

实现app中内试图的切换和层级间的导航(如返回上一级),还会放置一些重要按钮

安卓5.0 (Material Design)中的一些改变

  • 页眉中的操作栏改为应用栏(APP Bar)

应用栏在以前版本中叫做操作栏,用来显示应用的标识,应用导航,内容搜索以及其他操作
如果有二级导航,可以放在页面中

在顶部放一个标题,表示当前页面的一些内容,在左侧有个返回按钮,这个按钮是依赖于当前页面是属于第一层级还是第二层级,如果属于第二层级,就需要有一个返回的按钮,以及返回上一级的标题是什么,然后右上角有个设置的入口,这样看还是抽象的话,那就直接看实际效果的,如图4,

常用控件

图4

什么叫控件?

就是控制元件,用户通过控件来操作界面状态或设定状态,打个类比,将房间比作页面,那么控件就是房间的开关、门把手等

熟悉了IOS页眉的设计,再来看页脚的,IOS的页脚,也就是我们说的工具栏,用于放置操作当前屏幕中各对象的控件,如图5,

控件库

如果控件库拥有对应控件,尽量直接调用
IOS地址:
material design控件库:

图5

常用手势

图片 13

常用操作手势

  • 使用手势操作的优势:触摸是人类天性,降低使用成本
  • 注意点:安卓是长按删除;IOS是左滑删除

工具栏上既可以放icon,也可以放文字,看个具体例子就知道怎么用了,如图6红色圈中形式,

IOS设计规范的发展历史

(略)

图6

Android设计规范的发展历史
  1. 2010年,推出安卓2.3系统,此版本设计混乱,无统一规范
  2. 2011年2月,推出为平板设计的安卓系统
  3. 2011年,推出安卓4.0,开始统一手机和平板规范
  4. 2014年,推出安卓5.0,也就是Material Design

图片 14

安卓设计规范发展史

至于选择icon还是文字,要根据实际情况抉择,如果功能入口很多,icon是更好的选择。如果功能没有那么多又想表达更加清晰的意思,建议使用文字。

TAG标签:
版权声明:本文由金沙澳门官网4166发布于世界史,转载请注明出处:Android及IOS设计规范简介,交互设计干货