浅谈iOS和Android的产品交互设计(三)

　　一、前言

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

互联网的一些事

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

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

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

　　二、目的 yixieshi.com

　　本文期望表达的含义，集中于如下三个方面： yixieshi.com

　　√ 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)的功能。

互联网的一些事

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

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

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

　　3.3工具栏(Tool Bar) vs 操作栏(Action Bar) 互联网的一些事

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

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

　　另外，底部操作栏是在Android 4.0中引入的。 yixieshi.com

　　3.4标签栏 yixieshi.com

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

互联网的一些事

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

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

互联网的一些事

　　四、 列表 yixieshi.com

　　4.1列表 互联网的一些事

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

互联网的一些事

　　Android的列表则也普通的表格、带分组的表格，有横线占满和不占满的区别，不占满的和iOS的分组表格比较类似。 互联网的一些事

　　4.2 表格控件

　　在这些iOS的表格控件中:

互联网的一些事

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

　　ü Android无展开指示符; 互联网的一些事

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

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

　　4.3 开关

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

yixieshi.com

　　Android 则提供了类似iOS的开关、复选、单选 等开关。 互联网的一些事

　　五、对话框、动作列表 yixieshi.com

　　5.1 对话框

互联网的一些事

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

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

　　5.2 带文本输入框的对话框

互联网的一些事

　　5.3 动作列表

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

　　六、其他系统控件 互联网的一些事

　　6.1 选择器 互联网的一些事

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

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

互联网的一些事

　　6.2页面指示器

互联网的一些事

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

yixieshi.com

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

yixieshi.com

　　6.3滑块 yixieshi.com

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

yixieshi.com

　　6.4进度条 yixieshi.com

　　Android的进度条依然因为不同ROM和不同系统版本风格不同 互联网的一些事

　　6.5单选和复选 互联网的一些事

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

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

　　七、特有控件 互联网的一些事

　　7.1 Android特有的控件

yixieshi.com

　　此处只列出了部分Android特有的控件。 互联网的一些事

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

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

　　， yixieshi.com

　　7.2 iOS特有的控件 互联网的一些事

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

yixieshi.com

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

　　(完)

yixieshi.com