Android Studio 选项菜单和动画结合_Android 应用与iOS 应用之间的设计差异对比!

同一个App,为什么iOS 和Android 的交互操作有那么大的区别?本文将用大量原生设计案例,为你一一说明它们为什么应该这样做,赶紧学起来!

了解并适当结合平台规范与优势,才能做到最佳的用户体验。

为了创建最佳的原生 APP,就需要你牢记 iOS 和 Android 平台之间的差异。这些平台差异不仅在视觉层面有所不同,在结构和流程上也有区别。牢记这些差异,才能给原生应用以最佳的用户体验。

适用于 iOS 和 Android 的原生应用具有特殊的系统内置功能。 Apple 和 Google 的规范建议尽可能使用平台标准控件:页面布局,标签栏,分割线,表格视图,集合视图和拆分视图。 用户熟悉这些控件在每个平台上的一般操作方式,因此如果使用标准控件,用户将会非常直观的知道如何使用。 本文将聚焦于 iOS 和 Android 上的交互设计模式之间的区别,阐明 iOS 和 Android 上的应用看起来不同的原因,以及它们为什么应该这样做。 另外,本文还将提供原生应用设计示例,以帮助你更好的理解本文所写的内容。

一、导航模式的差异

在界面之间切换是移动应用中的常见操作。考虑 iOS 和 Android 原生应用控件规范的差异,对于导航模式的设计很关键。 Android 设备底部有一个全局导航栏, 使用导航栏中的后退按钮是返回上一个界面或步骤的简便方法,它适用于所有 Android 应用。

eee8fc505207152e6337a9912dd275b1.png

△ 全局导航栏(Android)

对比 Apple,设计方法却截然不同。 iOS 没有全局导航栏,因此我们不能指望像 Android 原生控件那样能支持全局返回。 这个特性就会影响到 iOS 应用的设计,应用中需要设计一个导航栏,并在左上角加上一个返回按钮。

038b98d67b280c71a97af6f100dba243.png

△ iOS上的返回按钮

严格来说,iOS 也有一个返回的全局操作,直接在界面上右滑即可返回上一级页面。(译者注:这个特性我原来还真不知道,现在已经用的很顺手了。)

17edf681d5723510d9c8b4b8c85bed78.gif

△ 全局返回操作(iOS)

在这种情况下,iOS 和 Android 之间的区别在于,在 iOS 设备上页面的右滑是返回上一级,而在 Android 上则是切换标签。

为了保持与其他移动应用的一致性,一定要记住平台之间的差异。

e1c319798c727e5bf2a19b3a87fb0542.gif

△ 左滑操作切换标签(Android)

二、应用内部的导航模式在iOS和Android上是不同的

在 Material Design 设计规范中有一些不同的导航模式。在 Android 应用中被大家熟知的导航模式是抽屉和标签形式的组合。

抽屉导航其实是一个菜单,通过点击汉堡图标,然后从左侧或右侧滑出。标签栏一般位于标题栏的下方,使得内容能够很好地被管理,通过标签栏,用户可以对应用的视图,数据集和功能进行切换。

7cad4186beac9ed5ef82a2176e5410b9.png

△ 左侧就是抽屉导航;右侧是标签栏

在 Material Design 中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。但是安卓规范其实不建议同时使用底部导航和标签,因为它可能会在导航时引起混乱。

da2f37754ad15092bc9b0e1f42025e4b.png

△ 底部导航(Material Design)

在 Apple 的人机交互规范中,没有类似抽屉菜单的标准导航控件。相反,Apple 则建议将全局导航放在标签栏中。标签栏放在应用的底部,让应用的核心功能能够快速切换。

通常,底部栏标签不会超过5个。正如你看到的那样,这个组件非常像安卓端的底部导航,只是在 iOS 中这种形式的导航更加常用。

9eb56dc0cb991d2066878d683d0c7e31.png

△ iOS的两种常见导航形式,分段控制和底部标签栏

虽然在两个操作系统中都有类似的功能(切换标签和分段控制,底部导航和标签栏),但导航形式仍然是 iOS 和 Android 之间的主要区别之一。 两者之间存在一些客观差异,例如 Android 中有全局导航栏而在 iOS 中却没有,以及两者在视觉上的差异。

Apple 认为,常用导航入口应该尽可能的外置,一些用户不常用的功能才需要被放进汉堡菜单中。而对比安卓规范,通常会把主要导航也放在汉堡菜单中。

三、改造标准控件需要额外的开发时间,用户也缺乏使用经验

如果希望应用中的每个元素在各个平台上看起来都一样,那么将需要额外的开发工作来创建最佳的移动应用设计。最麻烦的是涉及到默认控件,比如单选按钮、复选框、tab切换等等,这些控件需要一个定制的视图来实现显示 Android 上类似 iOS 的控件或 iOS 上类似 Android 的控件。

每个平台的交互方式各有其独特性。好的设计是尊重不同平台用户习惯的设计。在为 iOS 和 Android 设计移动应用时,一定要记住平台之间的差异,这样才能设计出满足用户期望的应用。

两个平台差异的一个例子是日期选择器。安卓用户对 iOS 中常见的老虎机形式的日期选择器并不熟悉。在 Android 中使用这种类型的日期选择器还需要重新布局,这样无形中增加了开发的难度和时间,并使界面看起来与系统风格格格不入。

83c266c1ba266e33cd647fd47ee6da0c.png

△ 左边是iOS标准日期选择器; 右边是Android标准日期选择器

d6d801281b58f374993c1f8b2868488f.png

△ 左边是iOS标准选择器;右边是Android标准选择器

四、iOS和Android中的按钮样式

在 Android 设计规范中有2种不同样式的按钮——扁平的和凸起的。这些按钮分别用在不同的场景下。在 Android 中,按钮上的文字一般都是全大写。在 iOS 原生应用的按钮中有时也能找到大写的文字,但更多的情况是出现在标题上。

89de61a7b464f79d2070ba996a26bcc4.png

△ 左边是标准的Android按钮;右边是标准的iOS按钮

还有一种非常有特点的按钮类型——在 Android 上叫做浮动按钮,在 iOS 上叫做活动按钮。浮动按钮用来展示应用的主要操作。例如,在邮件 APP 中写邮件,或者在社交 APP 中发状态都会用到这个浮动按钮。而在 iOS 中与之类似的按钮则叫做活动按钮,通常会放在底部导航的中间。

ef86d36e29df92a0c5b5d089aec8ac85.png

△ 左边是标准的iOS活动按钮;右侧是标准的Android浮动按钮

五、iOS与Android底部操作视图的差异

在 Android 中有两种不同类型的底部操作视图:模态视图和常驻视图。模态视图又有两种不同类型:具有不同操作内容的模态列表和用户点击「共享」图标后显示的应用列表。在 iOS 上也能找到类似的组件,但是在设计风格和布局上差异比较大。

e0756e7f47ab0840f95bb7f6c3b442f7.png

△ 左边是标准的Android底部菜单视图;右边是标准的iOS标准菜单视图

六、在触摸范围和系统网格之间存在的差异

iOS 和 Android 的触摸范围略有不同(iOS 最小的触摸范围为44px @1x,Android 为48dp/48px @1x)。Android 规范还建议将所有元素以 8dp 作为规范基线来设计。

七、字体差异

iOS 的系统默认字体是 San Francisco 而 Android 系统默认字体则是 Roboto。Noto 是能在 Android 的所有界面中都适用的字体,包括那些不支持 Roboto 字体的语种。正是因为有差异,所以需要密切关注不同平台的排版和布局规范。

1c141e9ef761ba1c80406b69aa11e566.png

△ 左边是Android字体; 右边 是iOS字体

八、交互细节差异

给用户的第一印象通常都是建立在设计层面。

建立用户的第一印象对产品来说很重要。在 APP 开发设计过程中,我们可以通过做好微交互和动画来为用户创建一个有吸引力的体验。

让我们明确下两个平台的交互和动画的规则和建议,并查看官方给出的一些标准示例。

焦点和优先级——交互设计的目的是将用户的注意力集中在应用中对他真正重要的事情上, 两个平台都不鼓励滥用动画,因为过多的动画容易分散用户的注意力,也会让用户感到焦虑。

一致性和层级结构——请务必记住,交互设计最重要的是通过确定元素之间的层级关系,帮助用户在应用中找到他们想要的。贴心,流畅,不突兀的页面跳转才能保证用户能轻松操作。对于这一点来说,两个平台都对动画规范做了一些合理的建议。

尽管 Android 的 Material Design(材料设计规范)与 iOS 的 Human Interface(人机交互规范)在使用动画方面的规范非常相似,但仍有一些明确的差异。 用户会习惯于特定平台的动画跳转方式并认为只有他们习惯的那些才是最自然的。

这就是为什么要特别注意平台间的交互形式,这些小的细节可以很好的提升用户体验,使得在不同平台上都能给用户带来自然的体验。

九、iOS

iOS 用户习惯于 iOS 中的微动画,像平滑过渡,横竖屏转向以及模拟物理规律等等。当应用出现无意义的或者违反物理常识的动画时,用户就会感到困惑。 例如,用户希望通过下拉来刷新界面,希望通过右滑来返回。iOS 设计规范强烈建议,除非正在创建诸如游戏之类的沉浸式体验,否则还是尽可能的按照官方给出的动画规范来设计。

十、Android

依照 Material Design 规范,一个元素在转换过程中分为传出,传入或常驻,不同的元素也会有不同的转换方式。

动画能够引导用户的注意力。当界面发生变化时,动画建立了过渡前后的连续性。导航的切换是界面中非常重要的元素。它们通过清晰的结构来帮助用户找准自己的方向。例如,当一个 UI 元素展开以填充整个屏幕时,展开后的新界面是点开元素的子级,返回可以回到父级。

6aa827cc3633d1a5a13799d24cb75067.gif

△ 子父级切换的例子(Android设计规范)

在父级界面上,嵌入的子元素会在点击时抬起并在适当的位置展开。将过渡的重点放在子界面上,明确子父级之间的关系。

共享相同的父级界面(例如标签切换时的内容)一致性的移动能够强化他们的关系。

992bbd9f61d67ea7f4cde7ba393dc1ba.gif

标签选项卡固定在一个位置不变,内容界面在水平方向上进行移动。

在应用的最上层,切换目标通常被分在主要任务(这些任务可能彼此不相关)上。这些界面通过改变不透明度和缩放值来进行适当的转换。

总结

当然也有例外:一些 iOS 应用遵循 Android 设计规范(比如 Gmail)而一些 Android 应用则遵循 iOS 设计规范(比如 Instagram)。

b106ed05bfed3684b5f3e09c8113a366.png

△ 左边是iOS版的Gmail,右边是Android版的Gmail

6aa43227d932d2eaf7730921cf8ce0a0.png

△ 左边是iOS版的Instagram,右边是Android的Instagram

但其实显而易见——使用两个平台系统自身的组件设计应用,流程要快很多。因此,最好是花些时间了解下两个平台不同的设计规范,而不是混合 iOS 和 Android 的组件模型,然后还得花很多力气在开发上。

555004970546e33e18985f3e5793a961.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图片操作案例:python 批量更改图像尺寸到统一大小的方法

一、需求: 批量修改该图片长与宽尺寸 二、素材: 三、代码: from PIL import Image import os.path import globdef convertjpg(jpgfile,outdir,width512,height512):imgImage.open(jpgfile)try:new_imgimg.resize((width,height),Image.BI…

LeetCode 753. 破解保险箱(DFS)

文章目录1. 题目2. 解题1. 题目 有一个需要密码才能打开的保险箱。 密码是 n 位数, 密码的每一位是 k 位序列 0, 1, …, k-1 中的一个 。 你可以随意输入密码,保险箱会自动记住最后 n 位输入,如果匹配,则能够打开保险箱。 举个例子&#x…

windows副本不是正版怎么解决_解决Windows沙盒怎么联网问题

windows 沙盒简单来讲就是一款沙盒虚拟化的Windows系统,而最近还蛮多小伙伴来问小编说,Windows沙盒能够联网吗?Windows沙盒怎么联网?针对这个问题,接下来小编就来和大家好好的说说关于windows沙盒的情况吧。1、首先我们…

西瓜视频(头条)解析并利用IDM工具下载

一、西瓜视频网址解析完整代码: import requests import urllib3 urllib3.disable_warnings() import re import json import base64cookie你的cookie headers{"user-agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like…

天池 在线编程 寻找字母(计数)

文章目录1. 题目2. 解题1. 题目 给定一个字符串str&#xff0c;返回字符串中字母顺序最大的而且同时在字符串中出现大写和小写的字母。 如果不存在这样的字母&#xff0c;返回‘~‘。 please return uppercase |str|<1000示例 例 1&#xff1a; 输入:"aAbBcD" 输…

电脑硬件检测_【学无止境】电脑硬件维修测试学习资料(附送各类PC检修资源)...

大橙子资源驿站『 电脑硬件维修测试学习资料』多年的PC硬件检修工具和资料&#xff0c;都是本人一年年亲测积累起来的&#xff0c;安全无毒。打包上传分享给大家。—— 资源分享者语关于『 电脑硬件维修学习资料 』这是甛橙从论坛搬运的&#xff0c;因为看着评分挺高&#xff0…

加速国内 Github 访问,下载的9种方案!

1、GitHub 镜像访问 ​​​​​​​这里提供两个最常用的镜像地址&#xff1a; https://github.com.cnpmjs.org https://hub.fastgit.org 也就是说上面的镜像就是一个克隆版的Github&#xff0c;你可以访问上面的镜像网站&#xff0c;网站的内容跟Github是完整同步的镜像&…

天池 在线编程 三等分(模拟)

文章目录1. 题目2. 解题1. 题目 给定一个由 0 和 1 组成的数组 A&#xff0c;将数组分成 3 个非空的部分&#xff0c;使得所有这些部分表示相同的二进制值。 如果可以做到&#xff0c;请返回任何 [i, j]&#xff0c;其中 i1 < j&#xff0c;这样一来&#xff1a; A[0], A…

Python设计模式之模板方法模式实例详解

1、模板方法模式定义 定义一个操作中的算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定的步骤。 子类实现的具体方法叫作基本方法&#xff0c;实现对基本方法高度的框架方法&#xff0c;叫作模板方…

小米2s自带rec刷root_刷Magisk模块开机卡Logo了怎么办?两种方法教你轻松解决

虽然&#xff0c;Magisk由于工作原理的不同&#xff0c;其模块对系统的兼容性相比较于此前的Xposed框架模块要好得多&#xff0c;但是依旧有可能出现刷了模块之后&#xff0c;卡Logo&#xff0c;无法开机的情况。今天&#xff0c;小编就提供两种方式解决刷Magisk模块卡开机Logo…

proteus如何添加stm32_电路仿真软件详谈(六),Proteus电路仿真软件的超级应用

一款优秀的电路仿真软件&#xff0c;可帮助用户更好实现相应功能&#xff0c;而Proteus电路仿真软件便是这样一款利器。本文中&#xff0c;将讲解基于Proteus电路仿真软件的SPI接口的设计与实现。通过本文&#xff0c;希望大家对Proteus电路仿真软件的应用具备深层次的理解。1、…

LeetCode 803. 打砖块(并查集)

文章目录1. 题目2. 解题1. 题目 有一个 m x n 的二元网格&#xff0c;其中 1 表示砖块&#xff0c;0 表示空白。 砖块 稳定&#xff08;不会掉落&#xff09;的前提是&#xff1a; 一块砖直接连接到网格的顶部&#xff0c;或者至少有一块相邻&#xff08;4 个方向之一&#x…

python设计模式之享元模式

一、享元模式定义&#xff1a; 享元模式是一种用于解决资源和性能压力时会使用到的设计模式&#xff0c;它的核心思想是通过引入数据共享来提升性能。 在开发3D游戏时&#xff0c;例如有成千上万的士兵或者有成千上万棵树&#xff0c;如果一个3D地带的每个对象都单独创建&…

allegro多版本安装_Homebrew 安装旧版本软件包马克

大家好我叫乌图米&#xff0c;我会在这里陆续跟大家分享一些有的没的数码体验、软件技巧、系统知识&#xff0c;欢迎大家留言与我交流&#xff5e;如果你喜欢文章的内容&#xff0c;可以在文末点个赞 &#xff0c;你的支持就是我最大的动力 &#xff01;这篇文章介绍一下 Homeb…

利用Python实现PDF转文本,就是如此简单!

一、前言 对很多人来说&#xff0c;将PDF转换为可编辑的文本是个刚需&#xff0c;却苦于没有简单的方法。发现 pdf 幻灯片&#xff0c;效果还不错。 传统的讲座通常伴随有很多pdf幻灯片。一般来说&#xff0c;想要对自己的讲座做笔记&#xff0c;需要从pdf复制、补充大量内容…

LeetCode 1725. 可以形成最大正方形的矩形数目

文章目录1. 题目2. 解题1. 题目 给你一个数组 rectangles &#xff0c;其中 rectangles[i] [li, wi] 表示第 i 个矩形的长度为 li 、宽度为 wi 。 如果存在 k 同时满足 k < li 和 k < wi &#xff0c;就可以将第 i 个矩形切成边长为 k 的正方形。 例如&#xff0c;矩形…

Python实现给指定的微信朋友发信息

一、环境准备 1、Python3.6 2、itchat第三方库 pip install itchat-uos 3、pyinstaller第三方库 pip install pyinstaller 二、核心代码 import itchatimport timeprint("请扫描弹出的扫二维码")itchat.auto_login(hotReloadTrue)boom_name input("请输…

LeetCode 1726. 同积元组(排列组合)

文章目录1. 题目2. 解题1. 题目 给你一个由 不同 正整数组成的数组 nums &#xff0c;请你返回满足 a * b c * d 的元组 (a, b, c, d) 的数量。其中 a、b、c 和 d 都是 nums 中的元素&#xff0c;且 a ! b ! c ! d 。 示例 1&#xff1a; 输入&#xff1a;nums [2,3,4,6] 输…

vuedraggle choose_如何拆分员工工资条,教你一招一学就会。(五)函数CHOOSE

作为人事管理者&#xff0c;我们最重要的一个工作就是工资表&#xff0c;那么如何将工资表拆分成工资条呢&#xff1f;我们最后看一下函数CHOOSE对函数MOD、ROW、OFFSET 、INT的嵌套使用。第一步&#xff0c;我们输入函数CHOOSE&#xff0c;第一个值是序号&#xff0c;我们将之…

用pythone画棵圣诞树,祝大家圣诞快乐

一、python环境&#xff1a; 根据电脑的情况去下载对应的python安装包&#xff0c;我使用的是python3.7.0的版本 二、python编译器&#xff1a; 打开pycharm&#xff0c;然后我们创建一个project&#xff0c;在project下创建一个python file&#xff0c;建议取名字不要使用中…