加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_泰州站长网 (http://www.0523zz.com/)- 视觉智能、AI应用、CDN、行业物联网、智能数字人!
当前位置: 首页 > 运营中心 > 建站资源 > 策划 > 正文

iOS 平板与 Android 平板的交互与动画

发布时间:2016-09-28 13:59:03 所属栏目:策划 来源:人人都是产品经理
导读:副标题#e# 苹果和谷歌对开发者发布的 iOS 8 与 Android 5.0 设计规范为的就是帮助开发者所开发的应用能够尽量与系统应用得到一致的体验。因此,下面试图通过两者的设计规范粗浅地对比 iOS 平板(iOS 8)与 Android 平板(Android 5.0)的交互与动画: 设计
副标题[/!--empirenews.page--]

苹果和谷歌对开发者发布的 iOS 8 与 Android 5.0 设计规范为的就是帮助开发者所开发的应用能够尽量与系统应用得到一致的体验。因此,下面试图通过两者的设计规范粗浅地对比 iOS 平板(iOS 8)与 Android 平板(Android 5.0)的交互与动画:

设计原则界面设计中的隐喻用户使用平板时的输入方式平板响应这些用户行为的输出效果(动画)iOS 平板与 Android 平板的设计原则

iOS 8 的设计原则在我的理解是:

充分利用整个屏幕(所谓「沉浸式」)、弱化拟物设计、使用毛玻璃底板等方式去突出主体内容,以内容为主通过留白、不同状态的颜色、排版及无边框的按钮保证内容显示的清晰度利用毛玻璃、重叠效果及空间的大小关系(如日历中「年」与「月」)表达空间中的层级关系。

而要讲 Android 5.0 设计原则就必须说到谷歌推出的全新设计语言 Material Design 。Material Design 的设计原则在我的理解里是这样的:

通过纸面质感的设计效果(包括排版、网格、空间、比例、配色、图像使用)让用户感到自然(明白隐喻)突出核心功能,引导用户操作对用户的行为进行统一的、恰当的反馈两者的区别

由于 iOS 的操作一般只有三种:点击进入下一层、返回上一层、按 home 键返回桌面,操作相对简单而统一,因此 iOS 8 的设计以突出内容为主。

而 Android 的操作相对复杂一些,因此通过纸面质感的设计效果以引导操作成为设计重点。

其次,iOS 8 通过透视下层内容的方式(毛玻璃)表达空间层级关系,而 Android 5.0 通过光影效果表达。

iOS 平板与 Android 平板界面设计中的隐喻

iOS 的界面通常由顶部导航栏和底部 Tap 组成的 Bar、内容、控制按钮,以及及警告提示等消息提示组成,iOS 平板亦同。这里拿 iPhone 的界面描述 iOS 平板中的举例说明。

1

1

iPhone 界面

这个界面中底部 Tap 和位于顶部导航栏中的分段控制按钮均以鲜明的颜色表示被选中的状态,而且分段控制按钮以按钮形式出现,暗示这是需要点击切换而不是滑动切换

2

2

底部 Tap 和位于顶部导航栏中的分段控制按钮

顶部导航栏中出现了标题和两个控制按钮,他们则是以颜色不同暗示是否可以点击

3

3

标题与控制按钮

而在内容区域,则通过添加边框或背景表示可以点击

4

4

内容区域

另一方面在界面布局上,最明显的针对 iPad 的优化有:

「设置」中一级菜单在左侧显示,二级菜单在右侧显示的抽屉式设计控制中心新的排列方式

相比之下,Android 的界面较 iOS 更为复杂。对比 iOS,Android 较为突出的区别有两个:一种是通过条形的颜色「滑块」暗示可以左右滑动切换的顶部 Tap,另一种是左边抽屉式导航面板。这两种导航方式本身的主要区别在于,前者可承载的层级结构更加扁平简单而且 Tap 数量较少,后者可承载层级结构较为复杂而且用户需要从某一 Tap 较深的层级直接返回到首层。

5

5

左右滑动切换的顶部 Tap

6

6

左边抽屉式导航面板

另一方面界面中使用出现较多的,带有鲜明颜色的悬浮响应按钮能够突显当前最核心的功能

7

7

悬浮响应按钮

(编辑:云计算网_泰州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读