IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

浅谈iOS与Android设计规范:6类交互设计规范对比

Catherine • 2017-05-03 23:44 • 交互设计

iOS和Android两个不同的平台,肯定是有很多区别的,下面就从交互的角度,谈谈区别。

文章目录[隐藏]

  • 一、全局导航
  • 二、二级导航
  • 三、工具栏
  • 四、提示框
  • 五、警示框
  • 六、手势定义
  • 结语

iOS和Android两个不同的平台,肯定是有很多区别的,下面就从交互的角度,谈谈区别。

浅谈iOS与Android设计规范:6类交互设计规范对比

以前就读过IOS和Android的规范,但是觉得没啥大用处,因为现在APP为了保持一致性,通常在IOS和Android上的设计是一样的,而且一些小公司只设计IOS的交互原型,因为只要IOS上能用,安卓上肯定没问题,前段时间,和一个人聊,问我它俩的区别,当时一脸懵逼,不知从何说起。毕竟是两个不同的平台,肯定是有很多区别的,下面就从交互的角度,谈谈区别。

一、全局导航

  • IOS:通常放在底部,方便用户点击
  • Android:通常放在上面,下面有物理按键,防止误操作。

浅谈iOS与Android设计规范:6类交互设计规范对比

浅谈iOS与Android设计规范:6类交互设计规范对比

解析:因为Android比IOS多了物理按键,为了防止误操作,所以只能将全局导航放在上面,但是随着屏幕越来越大,上面是手指无法触及的区域,所以切换起来相对成本较高。

二、二级导航

  • IOS:通常放返回、上一级标题、标题(居中),操作通常只有一个
  • Android:通常返回控件、logo、下拉菜单、重要操作、更多操作

浅谈iOS与Android设计规范:6类交互设计规范对比

浅谈iOS与Android设计规范:6类交互设计规范对比

解析:IOS显示了上一级的名称,让用户点击返回后,心里有预期,Android放了APP的logo,增加了品牌性,但是就使用来讲,用户不知道点击会回到哪,下拉菜单和更多操作都需要点击才能显示,增加了操作步骤。

三、工具栏

  • IOS:通常放在最下面,方便操作
  • Android:放在导航栏里,将重要操作放在外面,其他放在更多里。

浅谈iOS与Android设计规范:6类交互设计规范对比

浅谈iOS与Android设计规范:6类交互设计规范对比

解析:IOS将操作都放在底部,区域更大,操作更方便。Android将操作放在了顶部,显得很拥挤,并且还收起了一部分,需要用户查找,但是却节省了空间,让内容显示区更大。

四、提示框

  • IOS:出现在屏幕中间,可以带图标,可以不带,可以是静态的,也可以是动态的。
  • Android:不可以带图标,不能是动态的,最多只可以带一个操作按钮,最多只能出现一个提示,不能和低端的悬浮按钮重合。

浅谈iOS与Android设计规范:6类交互设计规范对比

浅谈iOS与Android设计规范:6类交互设计规范对比

解析:IOS的设计理念是尽量不打扰用户,只要用户能看见变化,轻易不会出现提示,只有一些用户无法感知时,才会出现提示框,所以可以是动态的,像调节音量。Android的提示要比IOS重一些,因为它可以带一个按钮。

五、警示框

IOS:标题和按钮是必须的,可以有内容和输入

浅谈iOS与Android设计规范:6类交互设计规范对比

浅谈iOS与Android设计规范:6类交互设计规范对比

Android:主要有四种:用途、内容、事件、表现。

1、用途包含了标题,内容和事件。

浅谈iOS与Android设计规范:6类交互设计规范对比

2、内容:只包含标题和内容

浅谈iOS与Android设计规范:6类交互设计规范对比

3、事件:标题、内容、更多操作按钮(不只是接受不接受)

浅谈iOS与Android设计规范:6类交互设计规范对比

4、表现:有标题、可输入、可操作、有按钮。

浅谈iOS与Android设计规范:6类交互设计规范对比

解析:警示框按钮的排列是一致的,左侧是消极的,右侧是积极的。IOS的警示框划分要少一些,构成就是标题和按钮,也可以解释和输入。但是,Android要复杂的多,分了4种情况,但是我觉得第一种和第三种差不多,标题和内容是必须的,按钮和输入可以选择。

六、手势定义

IOS的手势规定有8种,如下:

浅谈iOS与Android设计规范:6类交互设计规范对比

Android:将手势进行了单指和双指的划分,有14种。

  • 单次触击(Touch):一只手指按下,提起
  • 双次触击(Double Touch):两只手指按下,提起,其中一只手指按下,提起
  • 拖拽(Drag),轻滑(Swipe)和快掷(Fling):一只手指按下,移动再提起
  • 长按:一只手指按下,稍后再提起
  • 长按拖动:一只手指按下后稍后,移动,再提起
  • 双触拖动:一只手指按下后提起,再按下后,拖动,再提起
  • 捏放(Pinch Open):双指按下,向外移动,再提起
  • 捏合:双指按下,向内移动,再提起
  • 双指触击:双指快速按下,提起
  • 双指拖拽,轻滑和快掷:两指按下,移动后提起
  • 双指长按:双指按下,稍后提起
  • 双指长按拖动:双指按下,稍后移动,再提起
  • 双指双次触击:双指快速按下提起,重复一次该动作
  • 旋转:双指按下,以指间中点为圆心快速转动,再提起

解析:IOS只有8种手势,Android有14种,但是很多都不常用,个人感觉IOS的8种已经完全够用了,定义那么多种,用户的学习成本就会提高,而且Android的有些手势并没有定义可以做什么,所以给出这么多手势也没有用。

结语

本文对IOS和Android的规范进行了对比,Android的规范那是相当详细,但是IOS的只给出了设计原则,所以,一些是我自己总结的,可能对比的还不够全面,欢迎大家一起讨论。

 

本文由 @设计Zan 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23076/

AndroidioslogoUEDUX交互交互设计交互设计规范产品产品经理原型图标用户设计设计原则设计规范转载
赞 (0)
CatherineCatherine
0
生成海报
认知设计论:关于认知最全面的一篇
上一篇 2017-05-03 22:33
视觉设计师需要懂的4个设计原理
下一篇 2017-05-04 00:53

相关推荐

  • 交互设计

    [译]可用性之外:使用劝导式模式设计(下)

    上篇文章为:[译]可用性之外:使用劝导式模式设计(上)用户注册了你的产品之后,是时候给他们一个良好的第一手经验了。你的目标是让用户掌握你产品能提供的所有功能。让我们来看看你能做些什么来使用户体验到产品的真正价值。

    2017-05-27
  • apple watch 中文手册:Apple Watch Xcode项目 配置过程 交互设计

    apple watch 中文手册:Apple Watch Xcode项目 配置过程

    Xcode会将Watch应用和WatchKit应用扩展打包,然后放进现有的iOS应用包中。Xcode提供了一个搭建Watch应用的模板,其中包含了创建应用、glance,以及自定义通知界面所需的所有资源。该模板在现有的iOS应用中创建一个…

    2015-06-15
  • APP细节打磨绝招 “微交互动画” IxD案例

    APP细节打磨绝招 “微交互动画”

    著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

    2016-09-08
  • 微信热点

    2018’IIDC信息与交互设计教学研修班开始报名了!

    点击信息与交互设计关注我们!资深教授的专业教学指导+行业专家的实际案例分享力求打造最有深度的课程培训5.10-5.12信息与交互设计专业委员会联合广州美术学院定于5月10日~12日在广州美术学院举办"信息与交互设计教学研修班"。本次研修班将特别邀请清华大学美术学院基础部主任、国家社科基金重大项目首席专家邱松教授就国家社科基金项目申报工作进行详细的解析与交流,同时邀请广州美术学院工业设计学院院长陈江教授;武汉理工大学艺术与设计学院副院长方...

    2018-04-20
  • 微信热点

    《用户体验可视化指南》视频讲书(3)

    《用户体验可视化指南》书中第一章的第二部分。客户旅程是一条线路,用户地图是多条线路的集中展示,专注于服务蓝图的交互可视线之上的部分。心智模型本质是聚类,空间地图用于更复杂的系统去表达信息流和内容之间的关系。点击视频观看(大约10分钟)兰静同学听后分享这节视频有3个内容,其中有个非常重要的内容,解决了我也疑虑已久的问题:客户旅程图和体验地图,到底有什么区别?视频中详细的说明了二者的区别:一条线和多条线。客户旅程图强调了用户是怎么一步一步做...

    2018-04-01
  • 微信热点

    线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • APPLE WATCH 中文手册:WatchKit Apps--App概要 交互设计

    APPLE WATCH 中文手册:WatchKit Apps--App概要

    原文:Apple Watch Programming Guide:App Essentials Xcode支持用storyboard来创建Watch app的界面。当你在工程中新建一个Watch app,Xcode提供会提供一个storyboard来实现你的UI。这个Storyboard至少有一个Watch…

    2015-06-15
  • 微信热点

    "用户体验“真是个万恶的东西。

    前些天跟一个在央企大鳄担任要职的朋友聊天,说起某互联网新闻媒介公司被责令整改的事情,(其实我都不确定每天操劳四化建设工作的他知道不知道这件事)我本人并没有什么观点,只是看周围的人都在吐槽说国家管的太碎了,于是就想听听他怎么说。没想到君付之一笑,言道”活该,就应该封了它,它那么大的用户群体,它那么强的社会传播性,它不负责传播正能量谁负责?难道让警察叔叔们一张张发传单传播吗?你做产品做好了挣钱了就应该想想怎么对社会发展负责,不然国家和这个世...

    2018-05-05
  • [sketch组件库] iOS 10 GUI for sketch iOS

    [sketch组件库] iOS 10 GUI for sketch

    今天给大家推荐的是 iOS 10 GUI 交互规范组件 for sketch ,大小有93M,需要下载 Sketch 源文件。

    2016-09-13
  • 交互设计

    一“平”到底

    随着 IOS8 的更新,以及更多 APPLE 产品的出现,扁平化设计已经成为了 UI 类设计的大方向。抛开扁平大战拟物的观点,让我们看看扁平设计之路应该如何越走越远。正好因为这个风格的流行,花瓣上也积累了非常多设计师朋友们的 素材 ,来看看他们都收藏了哪些精致好素材吧。

    2015-01-04
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress