Android与iOS：应用程序用户界面设计的差异和比较

Posted 2023-03-28

参考技术A

移动领域的两大风向标--android和ios，也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下，在这里，我们对比了Android和iOS之间的简单设计差异，这将帮助我们弄清一个与另一个有何不同。
由于碎片化的原因，安卓系统的应用设计会有细微的差异。

我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。

人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说，该方法支持极简主义，使用简洁的元素，注重排版和扁平化色彩。

简而言之，Android Material Design被认为是Flat设计的升级版，带有拟态性（一种流行的设计概念，即让所代表的物品与现实世界中的对应物相似）。

用Google设计副总裁 MatíasDuarte 的话来说，它是–

有了这些基础知识，让我们从7个方面研究两个平台之间的差异。

目录
1. 导航
2. 按钮
3. 图标和屏幕分辨率
4. 字体
5. 控件
6. 卡片
7. 警报

对于iOS应用程序，总是在“后退”按钮旁边提示上一个选项卡的名称。在中间，显示当前选项卡的名称，而在右上角则显示“编辑”或“完成”（控制按钮）。
说到Android的设计规则，应用程序通常在抽屉菜单或后退按钮（可选）之后的左上角显示标题。移至右上方，总是有一个操作项，例如搜索图标（也可以是多个，例如“收藏夹”图标），其后是溢出菜单。

在iOS中，主导航始终显示在底部，功能菜单专门用于存储一次性功能。而在Android中，通常会在功能菜单中看到主要导航，或者以搜索栏，浮动操作按钮等形式在整个界面中存在。

ios界面指南中，没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部，一般位于最末位的 "更多"标签下找到二级导航。
Android中，二次导航是一个抽屉，一旦按下功能菜单图标，就会从左到右打开，同时产生一个深色的遮罩层。

有四种方法可以在iOS应用中实现“后退”操作：

在某些情况下，Android应用程序中给出了类似后退的操作，您可以通过该操作进入前一个标签。但是，最常见和最简单的方法是使用导航栏中的后退按钮（Android 10中现在是可选的）。

iOS和Android中的按钮风格最主要的设计区别在于，iOS中的按钮遵循扁平化的设计模式，不带阴影、支持标题大小写。Android遵循Material Design，带阴影且字母大写。

另一个比较重要的按钮是Floating action button（FAB行动呼吁按钮）。例如安卓系统中Gmail的compose按钮，iOS系统中社交媒体应用的新建文章按钮。

两种系统都使用8dp的网格来构建屏幕结构，而最常见的边框是16dp。
在开发移动应用程序时，以预定义的尺寸设计图标是非常关键的。这里有一个表，描述了所有的测量。

这些表格一开始可能会让人有点不知所措，但是如果你知道基本尺寸，并且能够使用倍数进行检查和导出，会发现这并不复杂。

多年来，苹果一直是Helvetica Neue字体的粉丝，然而在2015年，苹果开始使用San Francisco，它更节省空间，非常适合手机、台式机和iOS Watch使用。

Android系统，一直使用Roboto作为标准系统字体。在可预见的未来，谷歌也没有计划改变这一深受喜爱的元素。

控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的，让我们来看看他们的位置。

搜索功能对于两个平台来说都非常重要，苹果最近还在iMessage中加入了 "搜索栏 "。

在苹果中，搜索选项有两种类型--突出和隐藏。通常情况下，搜索图标会显示在上边的选项卡上，而有时需要从上到下拖动屏幕才能显示搜索栏。此外，如果要取消搜索查询，可以按 "取消"，如果要清除，可以用 "X"。

在安卓系统中，没有隐藏的搜索栏，你总能在上层标签中找到一个。如果要取消搜索，只需点击"←"图标即可，如果要清除查询，则和iOS中的一样。

浮动的动作按钮（FAB）在Android中充当主要行动按钮，可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。

不过也有一些例外，少数iOS会在底部工具栏显示CTA，而Android则在上部工具栏显示。

如果需要显示一些选项，可以在iOS平台上使用选取器控件，选取器一般出现在底部。
对于在Android平台上显示很少的选项，通常使用一个出现在原地的下拉菜单，或者一个出现在中心的模态对话框，使用模态框时应用背景变暗。

据观察，iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。

卡片是图片、文字、视频的集合，还包括按钮和评论。
在iOS中，卡片的特点是无阴影、全宽、无圆角。而在安卓系统中，卡片的设计有阴影、沟槽、圆角等功能。

安卓系统的提醒采用的是扁平化的按钮样式，具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主（全大写），让用户更容易理解。

至于iOS系统的提醒，则是用分割线隔开。它们基本采用句子或标题的形式，在独立的区块中呈现。它们被放置在弹出窗口的中心。

本文涵盖了iOS和Android所有的初步差异，希望对你有所帮助，而设计一个iOS或Android的移动应用，总是有迭代的准则，所以，一定要保持信息的更新，及时调整自己的产品设计。

Q. 为什么iOS和Android上的应用看起来不一样？
品牌和意识形态的不同，已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。

Q. 如何设计一个原生应用？
在设计原生应用时，必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外，这些平台有不同的要求，所以你的应用必须满足它们才能在应用商店上发布。

Q. iOS比Android更方便用户使用吗？
这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用，而有些人则在各方面都偏爱Android。

通过微信Android和iOS版看两大系统差异

由于设计师或者产品经理使用的移动设备大部分是iPhone，所以在做设计时，容易忽略Android和iOS的差异，按照自己的使用习惯进行设计，导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯。而安卓则照搬iOS。这对于安卓开发而言是个灾难，很多组件本可以直接调用系统，由于按照IOS的设计，则需要开发自己写，研发成本变得很高。

如果设计师或者产品经理有的异常场景状态没有想到，导致安卓开发没有组件调用，为了省事就直接调用安卓自带组件，导致整个产品在视觉风格上面既有产品风格的组件又有安卓系统的组件 ，统一性很差。所以做一款产品，最好要做两套设计稿（iOS、Android各一套）。

本文以微信为载体，通过微信Android和iOS版，来一起看Android和ios的两大系统的差异。

1. 消息提醒机制的差异

iOS版

用户首次进入微信，微信会弹出消息通知的权限选择，用户如果选择不允许的话，那么用户想开启消息推送的权限就必须到ios系统设置里面开启。注意微信消息设置界面，接受新消息通知和接收语音和视频聊天邀请通知开关关闭而且置灰，点击无反应。

用户只有进入设置-通知-微信，打开允许通知开关打开则微信才能发送消息推送的通知。同时这个权限给了微信之后，微信就可以像安卓一样，在微信消息设置界面设置关闭和打开，不在需要系统的制约了（前提ios系统设置通知已经打开）。

Android版

Android版微信消息提醒设置就简单了。用户只需要在微信设置界面设置就可以了。

分析总结：

1.iOS系统对权限控制比较严，例如用户如果要调用相册权限、相机、麦克风、位置等都需要用户选择确定，用户点击不允许。就没法调取。这也就是为什么ios消息设置相对来说复杂一点，根本原因是iOS系统。

2.由于Android开源，Android开发在用户安装微信就获取了很多权限，用户安装微信后，对于消息提醒的设置只需要在微信设置界面设置就可

2. 手势操作的差异

由于安卓用户习惯长按操作，iOS用户习惯左右滑动。所有涉及到更多功能的操作时，安卓用户会尝试长按，而iOS用户会尝试左右滑动。

但是由于Android和iOS两个系统不断的迭代，在设计上有些地方也趋于相似，例如网易邮箱也可以左右滑动，微信iOS版也有长按功能。

3. 组件风格的差异

大部分App在组件设计方面都是在iOS和Android版官方组件的基础上做了一点改变。框架结构等都不变。改变的大部分是视觉风格。

警告框

iOS版的警告框的文字和按钮都是左右居中对齐，Android版的警告框的文字是左对齐，按钮是右对齐。

更多操作选择时

iOS版用的组件是“上滑列表”，用户对功能的进一步选择。Android用的是“操作列表”。

iOS设计规范里面，如果涉及到多项操作时，多用下滑列表。而Android设计规范多用操作列表

搜索栏

iOS规范一般都是直接把搜索栏展示在导航栏下，而Android规范一般都是在导航栏里面（右侧）。

当然一些大厂App的ios版把搜索放在搜索放在状态栏里面（右侧），Android版把搜索展示在导航栏下。只能说官方推荐只能作为参考，具体看业务需求和用户目标来做设计，例如手机淘宝Android版的用户对搜索过度依赖，如果按照Android官方推荐的搜索标准来，那么对搜索过于弱化，用户使用起来会变得麻烦，从商业上来说也是一种巨大的损坏。

4. 信息发送按钮不一致

Android版微信信息发送的按钮放在了工具栏上，ios版微信的信息发送按钮内嵌在键盘上。出现这两个不一致的原因，应该是Android输入法没法做到内部定制。

总结：如果想快速且详细了解IOS和Android版组件的差异化，可以在sketch上面New From Template 里面找到  iOS UI Design 和Material Design 查看

5. 导航栏的不一致

Android版的返回icon，通常用左箭头（中间有一杠）。同时导航栏的标题位于左边箭头之后，标题为当前界面的标题。

iOS版的返回箭头（中间没有一杠），返回箭头之后为上一级界面的标题。导航栏中间的标题为当前界面的标题。

6. 返回上一级界面的差异

除了左上角的返回箭头，Android手机都可以点击虚拟返回键返回上一级界面。

iOS版App都可以从左边缘向右滑动返回上一级界面，部分App的Android版也做了从左边缘向右滑动返回上一级界面。

总结

做设计，有一个很简单的办法就是先借鉴官方、行业主流的设计，在学习和借鉴的过程中总结分析别人设计背后的逻辑。官方、主流设计已经将用户的认知和使用习惯培养起来了。正如交互之父Alan Cooper所说：如果你找不到更好的设计方案，就按照目前的标准来做，强打差异化有违背用户习惯的，可能这对用户价值是有伤害的。

这就是为什么我以微信为载体对比iOS和Android两大系统的差异。

当设计能力到达一定的水平，同时目前市场的解决方案都满足不了现有的业务需求，就可以学会创造，但是在创造过程中最好依据现有标准设计来改变与创造。

学UI网26群：569558041

老虎帮第10期 laohubang.cn帮助新手转行UI设计，最终辅导每个学员做出2套优质作品，有作品心里踏实，找工作不发愁。预计十一长假后开课，报名前需要做测试题考核基础。
长按二维码 快速加群咨询

▼ 点这儿，查看老虎帮优秀作品集。