感谢沙洋信息网的投递
新闻来源:盆地观察
开发者在产品上同时覆盖iOS平台和Android平台时,则会遇到同一个功能在不同平台中界面和交互如何展现的问题。了解两个平台间的控件对应关系和异同点,对同时面向两个平台的产品和交互设计是有帮助的。
新闻来源:盆地观察
开发者在产品上同时覆盖iOS平台和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.3开关
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原生应用中会用标签栏或九宫格来一定程度上达到分段控制的作用。
开发者在产品上同时覆盖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中还可以根据主题不同也会变化。
![clip_image002[4]](http://static.cnbetacdn.com/newsimg/120509/14341301298511438.gif)
3.2导航栏(Navigation Bar)
iPhone的导航栏高度固定,放置在界面顶部,导航栏中部一般放置标题,但也可以被用来放置其他内容,左侧一般放置导航或者其他按钮,右侧一般放置按钮。
Android的导航栏会根据情况不同而承担导航、操作栏(Acton Bar)、情景操作栏(Contextual Action Bars)的功能。
当承担导航功能时,出现的元素包含标题,左箭头(代表上一级),这些元素联合界面、系统返回键(硬返回键或软返回键)一起构成了导航。
当其承担操作栏功能是,出现的元素有操作图标(有时候是平面的纯文字,包括更多图标)、Spinners下拉菜单、选项卡等,如果操作栏图标过多,会在界面最下方提供另外一条操作栏。
情景操作栏的出现场景包括文本选择、内容的选择等,一般是通过对当前内容长按出现。此控件是Android 4.0,用来一定程度上代替长按的弹出菜单。
![clip_image004[4]](http://static.cnbetacdn.com/newsimg/120509/1434131412595720.gif)
3.3工具栏(Tool Bar) vs 操作栏(Action Bar)
iPhone的工具栏高度固定,放置在界面底部,界面上一般放置图标或者按钮。
Android的当顶部操作栏空间不够无法放置更多按钮时,会出现在底部,但在有菜单键的手机上,会通过菜单弹出放不下的操作栏按钮。
另外,底部操作栏是在Android 4.0中引入的。
![clip_image006[4]](http://static.cnbetacdn.com/newsimg/120509/1434142264354778.gif)
3.4标签栏
iPhone的标签栏放置在底部,样式固定。
Android的标签栏包括位置可变和固定的两种,在Android 2.x的系统中,还有图文并排的标签,在Google自身的应用中,就有多种标签风格。
在Android 4.0中的标签,基本上都是可以左右拖动切换标签的,也可以直接点击切换。
![clip_image008[4]](http://static.cnbetacdn.com/newsimg/120509/1434143485118525.gif)
四、 列表
4.1列表
iOS的列表包括普通的表格、带索引的表格、分组的表格。
Android的列表则也普通的表格、带分组的表格,有横线占满和不占满的区别,不占满的和iOS的分组表格比较类似。
![clip_image010[4]](http://static.cnbetacdn.com/newsimg/120509/14341442109549155.gif)
![clip_image012[4]](http://static.cnbetacdn.com/newsimg/120509/14341551251712670.gif)
4.2 表格控件
在这些iOS的表格控件中:
ü Android的单选多选通过右侧的复选框和Radio Box来实现;
ü Android无展开指示符;
ü 其他的“详情指示按钮、添加、删除”等操作,可以以下方类似Spinners的标记点击后通弹出操作列表来完成。
Android因为本身没有提供这样的表格控件,但因为有类似有需要的场合,所以即使是google官方的应用,也扩展出不少非标准的控件,比如表格空间中Google Doc右侧的按钮、Google Music右侧的Spinners等等。
![clip_image014[4]](http://static.cnbetacdn.com/newsimg/120509/1434156213290906.gif)
4.3开关
iPhone中的开关只有一种样式。
Android 则提供了类似iOS的开关、复选、单选 等开关。
![clip_image016[4]](http://static.cnbetacdn.com/newsimg/120509/14341571781544412.gif)
五、对话框、动作列表
5.1 对话框
这点主要是风格不同,作用比较类似。
另外Android 4.0之前,确定一般在左侧,Android 4.0中,确定变到了右侧。
![clip_image018[4]](http://static.cnbetacdn.com/newsimg/120509/14341682070707056.gif)
5.2 带文本输入框的对话框
![clip_image020[4]](http://static.cnbetacdn.com/newsimg/120509/1434169909114024.gif)
5.3 动作列表
iOS上的动作列表,Android中没有直接对应的元素,但有类似的元素
![clip_image022[4]](http://static.cnbetacdn.com/newsimg/120509/14341610157080213.gif)
六、其他系统控件
6.1 选择器
iPhone和Android分别提供了不同样式的选择器。
Android中的选择器不同ROM和不同系统版本风格不同。
![clip_image024[4]](http://static.cnbetacdn.com/newsimg/120509/143416111707860305.gif)
6.2页面指示器
iPhone页面指示器在应用和主界面一致。
Android的页面指示器主要用于桌面页面的切换, 不同ROM和不同系统版本风格不同。
![clip_image026[4]](http://static.cnbetacdn.com/newsimg/120509/14341712984369703.gif)
6.3滑块
iOS滑块一种风格,Android不同ROM和不同系统版本风格不同。
![clip_image028[4]](http://static.cnbetacdn.com/newsimg/120509/143417131207650652.gif)
6.4进度条
Android的进度条依然因为不同ROM和不同系统版本风格不同
![clip_image030[4]](http://static.cnbetacdn.com/newsimg/120509/14341714271299138.gif)
6.5单选和复选
iOS的单选和复选都可以通过列表中的“对号”来处理,也有类似右图的样式。
Android的基本上是Radio Box和Checkbox的风格,当然,风格一如既往的和ROM以及系统版本号有关系。
![clip_image032[4]](http://static.cnbetacdn.com/newsimg/120509/143417151628846897.gif)
七、特有控件
7.1 Android特有的控件
此处只列出了部分Android特有的控件。
左侧是Spinners,在iOS中没有直接原生对应的,但会有应用会尝试使用类似的,比如新浪微博的客户端有类似用法。
右侧是toast,会显示几秒钟消失,常用来做某些没有重要到直接通过对话框来程度的提示,此控件在iOS中也没有原生对应的,但一样会有应用尝试使用,比如不少应用的网络错误提示。
![clip_image034[4]](http://static.cnbetacdn.com/newsimg/120509/143418161381506896.gif)
7.2 iOS特有的控件
分段控制器,是在Android中缺失的控件。
分段控制器在Android中没有太好的替代选择,google原生应用中会用标签栏或九宫格来一定程度上达到分段控制的作用。
![clip_image036[4]](http://static.cnbetacdn.com/newsimg/120509/14341817601573340.gif)