浅谈iOS和Android的产品交互设计:iPhone和Android的控件对比

一、
前言

开发者在产品上同时覆盖iOS平台和Android平台时,则会遇到同一个功能在不同平台中界面和交互如何展现的问题。

了解两个平台间的控件对应关系和异同点,对同时面向两个平台的产品和交互设计是有帮助的。

此部分就两个平台的控件进行对应,并辅以一定的描述,更详细的控件说明和适用的场合请直接参阅参考资料中的相关文档。

说明:Android中的系统控件会根据不同的ROM和操作系统版本有所变化,本文中Android控件以《Android Design》为主要参考。

二、目的

本文期望表达的含义,集中于如下三个方面:

√ iOS和Android的的控件在目标上是趋同的,但形式则有较大区别,因此Android产品符合Android本身的风格,不建议直接沿用iOS风格。

√ 了解iOS和Android控件的对应关系,有助于在产品设计时,既能利用现有的思路,又能符合相应平台的风格

√ Android因为各设备商自定义ROM、不同系统版本之间的不同、设备物理属性的多样化等原因,造成Android本身的风格有多种,设计优秀的">Android应用,是一件不容易的事情。

三、功能栏3.1 状态栏(Status Bar)

iPhone的状态栏系统提供了3种样式,分别为浅色、深色、深色半透,高度固定。

Android的状态栏根据各个手机厂商自定义的ROM不同,会有多种样式,在MIUI中还可以根据主题不同也会变化。

3.2导航栏(Navigation Bar)

iPhone的导航栏高度固定,放置在界面顶部,导航栏中部一般放置标题,但也可以被用来放置其他内容,左侧一般放置导航或者其他按钮,右侧一般放置按钮。

Android的导航栏会根据情况不同而承担导航、操作栏(Acton Bar)、情景操作栏(Contextual Action Bars)的功能。

当承担导航功能时,出现的元素包含标题,左箭头(代表上一级),这些元素联合界面、系统返回键(硬返回键或软返回键)一起构成了导航。

当其承担操作栏功能是,出现的元素有操作图标(有时候是平面的纯文字,包括更多图标)、Spinners下拉菜单、选项卡等,如果操作栏图标过多,会在界面最下方提供另外一条操作栏。

情景操作栏的出现场景包括文本选择、内容的选择等,一般是通过对当前内容长按出现。此控件是Android 4.0,用来一定程度上代替长按的弹出菜单。

3.3工具栏(Tool Bar) vs 操作栏(Action Bar)

iPhone的工具栏高度固定,放置在界面底部,界面上一般放置图标或者按钮。

Android的当顶部操作栏空间不够无法放置更多按钮时,会出现在底部,但在有菜单键的手机上,会通过菜单弹出放不下的操作栏按钮。

另外,底部操作栏是在Android 4.0中引入的。

3.4标签栏

iPhone的标签栏放置在底部,样式固定。

Android的标签栏包括位置可变和固定的两种,在Android 2.x的系统中,还有图文并排的标签,在Google自身的应用中,就有多种标签风格。

在Android 4.0中的标签,基本上都是可以左右拖动切换标签的,也可以直接点击切换。

四、 列表4.1列表

iOS的列表包括普通的表格、带索引的表格、分组的表格。

Android的列表则也普通的表格、带分组的表格,有横线占满和不占满的区别,不占满的和iOS的分组表格比较类似。

4.2 表格控件

在这些iOS的表格控件中:

ü Android的单选多选通过右侧的复选框和Radio Box来实现;

ü Android无展开指示符;

ü 其他的“详情指示按钮、添加、删除”等操作,可以以下方类似Spinners的标记点击后通弹出操作列表来完成。

Android因为本身没有提供这样的表格控件,但因为有类似有需要的场合,所以即使是google官方的应用,也扩展出不少非标准的控件,比如表格空间中Google Doc右侧的按钮、Google Music右侧的Spinners等等。

4.1
开关

iPhone中的开关只有一种样式。

Android 则提供了类似iOS的开关、复选、单选 等开关。

五、对话框、动作列表5.1 对话框

这点主要是风格不同,作用比较类似。

另外Android 4.0之前,确定一般在左侧,Android 4.0中,确定变到了右侧。

5.2 带文本输入框的对话框
5.3 动作列表

iOS上的动作列表,Android中没有直接对应的元素,但有类似的元素

六、其他系统控件6.1 选择器

iPhone和Android分别提供了不同样式的选择器。

Android中的选择器不同ROM和不同系统版本风格不同。

6.2页面指示器

iPhone页面指示器在应用和主界面一致。

Android的页面指示器主要用于桌面页面的切换, 不同ROM和不同系统版本风格不同。

6.3滑块

iOS滑块一种风格,Android不同ROM和不同系统版本风格不同。

6.4进度条

Android的进度条依然因为不同ROM和不同系统版本风格不同

6.5单选和复选

iOS的单选和复选都可以通过列表中的“对号”来处理,也有类似右图的样式。

Android的基本上是Radio Box和Checkbox的风格,当然,风格一如既往的和ROM以及系统版本号有关系。

七、特有控件7.1 Android特有的控件

此处只列出了部分Android特有的控件。

左侧是Spinners,在iOS中没有直接原生对应的,但会有应用会尝试使用类似的,比如新浪微博的客户端有类似用法。

右侧是toast,会显示几秒钟消失,常用来做某些没有重要到直接通过对话框来程度的提示,此控件在iOS中也没有原生对应的,但一样会有应用尝试使用,比如不少应用的网络错误提示。

7.2 iOS特有的控件

分段控制器,是在Android中缺失的控件。

分段控制器在Android中没有太好的替代选择,google原生应用中会用标签栏或九宫格来一定程度上达到分段控制的作用。

(完)

版权声明:转载时请以超链接形式标明文章原始出处和作者信息
本文链接:http://www.penddy.com/%e6%b5%85%e8%b0%88ios%e5%92%8candroid%e7%9a%84%e4%ba%a7%e5%93%81%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e4%b8%89iphone%e5%92%8candroid%e7%9a%84%e6%8e%a7%e4%bb%b6%e5%af%b9%e6%af%94.html

时间: 2024-11-02 12:38:25

浅谈iOS和Android的产品交互设计:iPhone和Android的控件对比的相关文章

浅谈iOS Crash(一)

本文讲的是浅谈iOS Crash(一),一.捕获iOS Crash 1.设置异常断点并运行 设置异常断点.png 说明:设置Xcode异常断点后运行程序,发生Crash时,断点会定位到出错的代码行,但仅适用于开发阶段.线上APP的Crash还需要通过收集Crash机制来捕获Crash并记录在日志中. 2.Mach异常 和 Unix信号 iOS Crash发生时,先产生Mach异常(最底层的内核级异常),然后Mach异常在host层被ux_exception转换为相应的Unix信号,并通过thre

浅谈iOS Crash(二)

浅谈iOS Crash(一) 一.僵尸对象(Zombie Objects) 1.概述 僵尸对象:已经被释放掉的对象.一般来说,访问已经释放的对象或向它发消息会引起错误.因为指针指向的内存块认为你无权访问或它无法执行该消息,这时候内核会抛出一个异常( EXC ),表明你不能访问该存储区域(BAD ACCESS).(EXC_BAD_ACCESS类型错误) 调试解决该类问题一般采用NSZombieEnabled(开启僵尸模式). 2.使用NSZombieEnabled Xcode提供的NSZombie

手机端产品交互设计:手机端产品翻页控件的设计

文章描述:对手机端产品翻页控件做的一些粗浅整理归纳.具体到设计应用中,我们需要根据产品性质.用户操作使用情景.手机和操作平台本身的特性等具体情况来考虑设计使用翻页控件. 翻页控件在很多手机端产品中属于容易被忽视但又不可或缺的一部分,今天就手机端产品翻页控件的分类和使用谈谈自己一些粗浅的看法. 在手机端产品中,翻页控件的展示形式五花八门:以所展示信息内容的性质和用户的使用情境作为维度划分的话,大致可以分为这样几个类型: A:时效类翻页控件 产品所展示的信息在"时效性""关联度&

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

LBS产品交互设计:人们为什么签到?

文章描述:LBS产品交互设计:人们为什么签到? 打开微博.开心.人人网上,不经意间会看到诸如下面类型的信息: 这是什么信息呢?心中好奇,打开一看,原来这就是从LBS产品同步过来的签到信息,即使用LBS产品的用户在某地点留下的到此一游印记. 1 有这些LBS产品 从Foursquare推出以后,LBS (基于位置的服务) 产品以新的方式走进我们的视线,也出现了切客(check的音译)一族. 目前主要有3种类型的LBS产品: 1. 签到互动类:以foursquare.whrrl为代表,该类产品以签到

类O2O概念产品交互设计的体会和探讨

开文估计少不了做一下概念的名词解释,我就引用下网络的解释吧,O2O(Online To Offline),将线下商务的机会与互联网结合在一起,让互联网成为线下交易的前台.线下服务就可以用线上来揽客,消费者可以用线上来筛选服务,可以在线成交结算.特点:推广效果可查,每笔交易可跟踪.这概念模式无形中给用户提供了更多的选择和便利,也给线下商务带来商机.O2O概念,包括衍生出来的新概念产物或许真如诸多互联网预测所说的会成为电商下一座金矿挖掘地吧-- 为什么要说是类O2O概念的产品呢?这里说的"类&quo

浅谈12306核心模型设计思路和架构设计

原文:浅谈12306核心模型设计思路和架构设计 春节期间,无意中看到一篇文章,文章中讲到12306的业务复杂度远远比淘宝天猫这种电商网站要复杂.后来自己想想,也确实如此.所以,很想挑战一下12306这个系统的核心领域模型的设计.一般的电商网站,购买都是基于商品的概念,每个商品有一定量的库存,用户的购买行为是针对商品的.当用户发起购买行为时,系统只需要生成订单并对用户要购买的商品减库存即可.但是,12306就不是那么简单了,具体复杂在哪里,我下面会进一步分析.   另外一个让我写这篇文章的原因,是

类O2O概念产品交互设计的几点体会和探讨

开文估计少不了做一下概念的名词解释,我就引用下网络的解释吧,O2O(Online To Offline), 将线下商务的机会与互联网结合在一起,让互联网成为线下交易的前台.线下服务就可以用线上来揽客,消费者可以用线上来筛选服务,可以在线成交结算.特点:推广效果可查,每笔交易可跟踪.这概念模式无形中给用户提供了更多的选择和便利,也给线下商务带来商机.O2O概念,包括衍生出来的新概念产物或许真如诸多互联网预测所说的会成为电商下一座金矿挖掘地吧-- 为什么要说是类O2O概念的产品呢?这里说的"类&qu

edittext bitmap-我想在Android中利用EditText(TextView)实现在控件的最右边添加一张位图。。

问题描述 我想在Android中利用EditText(TextView)实现在控件的最右边添加一张位图.. 解决方案 外面一个FramLayou框起来就解决了 解决方案二: 最好的是自定控件,通过canvas画上去,或者再简单点就是做个背景图你懂的 解决方案三: 给你的edittext设置一个下面这个属性,试试 android:drawableRight="@drawable/right_icon" 解决方案四: Android控件之TextView和EditTextAndroid系统