安卓巴士Android开发者门户

简介:

要创建最佳的原生应用程序设计,您应该牢记iOS和Android平台之间的差异。这些平台不仅在原生应用程序的外观方面有所不同; 它们在结构和交互方面也有所不同。您需要牢记这些差异,以通过原生应用程序设计给用户提供最佳用户体验。

iOS和Android的原生移动应用程序具有各自操作系统平台特殊的功能。Apple和Google的设计指南建议尽可能使用平台标准导航控件:页面控件,选项卡,分类控件,表视图,组合视图和拆分视图。用户熟悉这些控件是如何在每个平台上运行的,因此如果您使用标准控件,您的用户将直观地知道如何操作您的应用程序。我们专注于iOS和Android上的交互设计模式之间的主要区别,以阐明iOS和Android上的应用程序看起来不同的原因 - 以及它们为什么应该这样做。我们还提供原生应用程序设计模板和原生移动应用程序示例,以帮助您可视化我们正在谈论的内容。

导航模式的差异

在屏幕之间跳转是移动应用程序中的常见操作。在设计导航模式方面,考虑到iOS和Android不同的应用程序设计指南是非常重要的。Android设备底部有一个通用导航栏。使用导航栏中的后退按钮非常简便的返回上一个屏幕或步骤,它几乎适用于所有Android应用程序。

98c527c33f6f0e9a21f46f043d80f885f9406a4b

全局导航条(Android)

另一方面,Apple的设计方法却截然不同。没有全局导航栏,因此我们无法使用原生iOS应用程序设计中的全局后退按钮返回。这会影响iOS移动应用程序的设计。屏幕内部应该有一个左上角是一个返回按钮的原生导航栏。

302ee7feab7e8d324f3424bd2d0e7a05bab94e9c

返回按钮(iOS)

Apple还在应用程序中引入从左到右的滑动手势,以跳转到上一个屏幕。此手势几乎适用于所有应用。

9b87a0f7d43386f6aa741e937c77458859e6ec88

从左向右滑动手势 - 返回(iOS)

在这种情况下,iOS和Android之间的区别在于,在iOS设备上的原生应用程序中,从左向右滑动手势将返回到上一个屏幕。相同手势在Android设备上通常用于切换选项卡。但与iOS不同的是,Android设备上有一个底部导航栏,后面的按钮会返回上一个屏幕。

记住平台之间的这种差异以保持与其他移动应用程序的一致性始终很重要。

9ec5debc50976d0b7db888cee194c67e0d8b4579

从左向右滑动手势 - 在标签之间切换(Android) iOS和Android中应用内导航模式有所不同

“Material Design Guidelines” 中有一些不同的导航选项。Android应用程序中使用的一个众所周知的导航模式是抽屉导航和选项卡的组合。

抽屉导航是一个通过点击汉堡菜单图标从左侧或右侧滑入的菜单。选项卡位于屏幕标题的正下方,内容组织处于较高级别,允许用户在应用中切换不同的视图,数据集和功能。

ac2b10bd53b2101a97f6678b7aaaf96fa6849dbb

左—抽屉导航菜单, 右—选项卡

Material Design中还有一个名为bottom navigation的组件。此组件对于Material Design应用程序也很重要。底部导航栏使您可以轻松浏览和切换顶级视图。Material Design Guidelines不建议同时使用底部导航和选项卡,因为它可能会在导航时造成混淆。

1e700447b6f4f7d88899f37fd2891f257d45d683

底部导航(材料设计)

在Apple的UI指南中,没有与抽屉导航菜单类似的标准导航控件。相反,Apple的指南建议将全局导航放在选项卡中。选项卡显示在应用程序屏幕的底部,可以在应用程序的主要类别之间快速切换。

通常,选项卡包含的类别不超过五个。我们可以看到,此组件类似于Material Design中的底部导航,但更常用于iOS应用程序中。

7a924eb42ed6e45ee3ccd21b231f6b3707b67b91

左上角 - iOS分段控制; 右下角 - iOS标签栏(HIG)

虽然在两个操作系统中都有类似的功能(选项卡和类别控制,底部导航和标签栏),但导航仍然是iOS和Android之间的主要区别之一。存在两个客观差异,例如Android中的全局导航栏及其在iOS中的缺乏,以及这两个系统的视觉差异。

Apple认为主要导航元素应位于前台,汉堡包菜单应仅用于存储不是用户执行的日常任务的功能。不同的是,Android应用程序通常的做法是在汉堡菜单中隐藏主导航。

自定义标准控件需要额外的开发时间,并且对于用户来说是不熟悉的

如果您希望应用程序中的每个元素在不同平台上看起来相同,那么您需要进行额外的开发工作才能创建最佳的移动应用程序设计。最复杂的用例涉及默认控件,如单选按钮,复选框,切换按钮等,并且需要自定义视图实现,以在iOS上显示类似iOS的控件或类似Android的控件。

每个平台都有其独特的交互。在每个操作系统中尊重用户习惯的设计是良好的设计。在为iOS和Android设计移动应用程序时,牢记平台之间的差异非常重要,这样您就可以设计出满足用户期望的应用程序。

在两个平台上的一个不同的元素的设计示例是日期选择器。Android用户不熟悉iOS中常见的老虎机卷轴式日期选择器。在Android中使用这种样式的日期选择器需要自定义视图,这可能会变得复杂,增加了开发的复杂性和持续时间,并使您的应用程序设计看起来与Android平台不同。

1385a55a95054ea93d61929560fabf64d269c3ce

iOS和Android中的按钮样式

“Material Design Guidelines”中有两种类型的按钮 - 平面和凸起。这些按钮用于不同的情况。Material Design中按钮上的文本通常都是大写的。有时我们在本机iOS应用程序中也会找到大写按钮文本,但通常我们找到的是标题大小写。

e0d00565a29643d959b299f3fad813b14395320e

左 - 标准材料设计按钮; 右 - 标准的HIG按钮

还有一种类型的按钮 - Android上的浮动操作按钮和iOS上的呼叫操作按钮。浮动操作按钮表示应用程序中的主要操作。例如,邮件应用程序中的撰写按钮或社交网络应用程序中的新帖子按钮可以是浮动操作按钮。iOS应用程序中主要操作的类似设计是行为按钮,该按钮位于标签栏的中心。

ad04605935bdb4762a87b39e15a430133d33ddbb

左侧 - iOS中的标准CTA按钮; 右 - Android中的标准浮动操作按钮

Android中的原生底部列表与iOS中的活动视图操作列表之间的差异

Android中有两种类型的底部列表:list列表和表格列表。list底部列表有两种类型的内容:具有不同情景操作的列表和在用户点击“共享”图标后显示的应用程序列表。我们可以在iOS活动视图操作列表中找到相同类型的内容。但这些组件看起来与Android底部列表不同。

618725536f2176288ce9b56223d92740c2dfb80c

左 - 标准材料设计底部列表; 右 - iOS应用中的操作表 分辨率的差异

iOS和Android的分辨率指南略有不同(iOS为44px @ 1x,Android为48dp / 48px @ 1x)。Material Design Guidelines还建议将所有元素与8dp方形基线网格对齐。

排版差异

San Francisco是iOS中的系统字体。Roboto是Android中的标准字体。Noto是Chrome和Android不支持的所有语言的标准字体。您需要密切关注每个平台的排版和布局规范。

e0873ae9a88eff79cefd610a51abf3de42b65793

左 - 材料设计排版; 右 - HIG排版 Microinteractions

在设计方面,第一印象通常是用户的最后印象。

这就是为什么从一开始就吸引用户的注意力如此重要。在应用程序设计和开发过程中,我们可以通过微交互和动画为用户创建一个非常着迷的体验。

让我们明确关于两个平台的交互和动作的主要规则和建议,并查看详细示例。

重点和重要性 - 交互将用户的注意力集中在应用程序中真正重要的内容上,因此只有在真正需要时才需要使用它们。两个平台都不鼓励过多的动画,因为它们会分散用户的注意力并使用户感到紧张。

一致性和层次结构 - 请务必记住,交互通过显示元素彼此之间的关系来帮助用户在应用中定位自己。从一个屏幕到另一个屏幕的自然,流畅的过渡使用户保持沉浸其中。动作向导为如何执行操作提供了有用的建议。

尽管使用微动画的基本建议在“Material Design Guidelines”和“人机交互指南”中非常相似,但仍有一些明确定义的差异。用户习惯于这些特定于平台的过渡,并觉得十分自然。

这就是为什么要特别注意熟悉的交互是十分重要的,这将改善用户体验并在每个平台上看起来自然。

iOS

iOS用户习惯于iOS中使用的微妙动画,例如平滑过渡,设备方向的流畅变化和基于物理的移动。当移动没有意义或似乎违反物理定律时,iOS用户会感到迷失方向。例如,如果用户通过从屏幕顶部向下滑动来显示视图,则他们希望能够通过向后滑动来退出视图。HIG强烈建议,除非您正在创建诸如游戏之类的沉浸式体验,否则您可以使自定义过渡动画与内置动画相媲美。

Android

根据“Material Design Guidelines”,在转换期间,转换的界面元素分为传出,传入或固定。项目所属的类别会影响其转换方式。

动画引导用户注意。当UI改变外观时,动作在转换之前和之后提供元素的放置和外观之间的连续性。导航转换是与界面进行整体交互的重要元素。它们通过表达应用程序的层次结构帮助用户定位自己。例如,当元素扩展以填充整个屏幕时,扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

导航转换是与界面进行整体交互的重要元素。它们通过表达应用程序的层次结构帮助用户定位自己。例如,当元素扩展以填充整个屏幕时,扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

636576e485b5f5bea585a505726858fea1a0242b

父级视图对子视图过渡的例子(Material Design Guidelines)

在父屏幕上,嵌入的子元素在触摸时会抬起并在适当的位置展开。

过渡将重点放在子屏幕上,同时加强了父子视图之间的关系。

共用相同父级的屏幕(例如相册中的照片,个人资料中的部分或流程中的步骤)一致地移动以加强他们的关系。视图从一侧滑入,同时同级的视图在相反方向上离开屏幕。

9f10b2c0c17b2c935ce80eb3af1f43bdb8c6359e

选项卡位于同一高度,并在水平方向上一起移动

在应用程序的顶层,选项通常被分组为主要任务(可能彼此不相关)。这些屏幕通过更改不透明度和比例等值来转换。

结论

当然也有例外:一些iOS应用程序遵循Material Design Guidelines(如Gmail),一些Android应用程序遵循人机交互指南(如Instagram)。

96f939f1f6e5bfbc36be260f39181998980c0b3f

左-Instagram on iO;右 -Instagram on Android

但有一点是显而易见的 - 使用原生组件为两个操作系统设计移动应用程序要快得多。因此,最好花时间对应不同的系统平台设计而不是开发一个应用程序模型,因为一个应用程序模型是Apple的人机交互指南和Google的Material Design组件的混合,然后由于自定义元素而花费大量时间进行开发。

想要查看本机设计应用示例,其中我们使用本机元素以及具有强大样式的自定义界面?访问我们的Dribbble 和Behance 页面,以更好地了解我们的能力。


原文发布时间为:2018-10-18

本文作者:SteelKiwi Inc.

本文来自云栖社区合作伙伴“安卓巴士Android开发者门户”,了解相关信息可以关注“安卓巴士Android开发者门户”。

相关文章
|
1天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
14 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
2天前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
34 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
14天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
73 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
2月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
90 11
|
2月前
|
安全 Android开发 iOS开发
深入探索iOS与Android系统架构差异及其对开发者的影响
本文旨在通过对比分析iOS和Android两大移动操作系统的系统架构,探讨它们在设计理念、技术实现及开发者生态方面的差异。不同于常规摘要仅概述内容要点,本摘要将简要触及核心议题,为读者提供对两大平台架构特点的宏观理解,铺垫
|
3月前
|
安全 Java Linux
深入解析Android系统架构及其对开发者的意义####
【10月更文挑战第21天】 本文旨在为读者揭开Android操作系统架构的神秘面纱,探讨其如何塑造现代移动应用开发格局。通过剖析Linux内核、硬件抽象层、运行时环境及应用程序框架等关键组件,揭示Android平台的强大功能与灵活性。文章强调了理解Android架构对于开发者优化应用性能、提升用户体验的重要性,并展望了未来技术趋势下Android的发展方向。 ####
84 0
|
程序员 Android开发 开发者
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    Android历史版本与APK文件结构
    121
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121