无论您是在内部工作，与承包商签订合同，还是为代理商工作，公司都有许多不同的原因需要应用程序。 既有的公司尤其需要迎合现有客户及其使用的设备。 通常，这意味着同时为Android和iPhone开发了一个新应用。
在理想的世界中，我们将花数月时间设计两个应用程序。 但实际上，许多项目不允许那么多时间。 对于我从事过的任何应用程序，截止日期已经足够设计一个应用程序，更不用说将项目一分为二了。
通常，您在设计一个应用程序时需要进行一些调整，然后再将其移交给两个开发团队。 如果您是以这种方式设计应用程序，那么一定要及早了解两个平台之间的差异，以及使每种体验都具有原生体验的快速方法，这一点很重要。
开始之前：选择您的方法
1.靠近敌人
您可能会对一个系统有自己的偏好。 我一直使用iPhone，因此对iOS上的UI模式有更自然的理解。 首先要做的是与其他平台保持联系，而做到这一点的最佳方法是购买另一台设备，以我为例。 最好在整个项目过程中将其用作主要设备，以真正了解该平台。
如果您是在内部工作，请让他们为您购买测试设备。 如果有任何问题，请与管理层沟通，了解替代平台将增加您的设计工作的价值（两个设备的成本非常昂贵，但与企业相比，这笔费用相对较低，设计和开发新应用）。 如果您是自由职业者，则应该可以将其与税单核销。
2.选择潜在客户
当我们同时为两个平台设计时，在处理时间有限的现实世界时，您将不得不接受一开始就优先考虑一个平台的现实。 做出此决定不是根据您的个人喜好，而是根据您的应用市场。 您市场上有更多人在使用Android手机吗？ 它是付费应用吗？ 目标受众是什么？ 提出这些问题将帮助您决定哪个更可取。
3.了解规则
阅读有关Android和iOS的 UI指南。 过去，Apple以严格的指导方针着称。 要在应用商店中获取应用，需要经过大约两个星期的审批过程。 Play商店没有批准程序。 但是，由于进入Android的门槛较低，因此传统上设计的质量要差一些。 Google希望通过其《 材料设计指南》来改变这种情况。
您可以在项目中使用很多不错的免费UI套件（在本文结尾处列出了一些）。 使用这些组件自然会给您的应用带来自然的感觉。 但是，即使您获得了UI套件，也要知道平台之间的区别和区别，这很棘手，因此我想为您提供帮助。
设计您的应用
请按照以下简单步骤进行操作，您的应用将处于正确的轨道上，以适合Android和iOS设备。
1.一般风格
自iOS7以来，苹果已转变为更扁平的设计风格，并摒弃了iPhone早期的拟影阴影，纹理和效果。 Android从一开始就更加系统化，而反之则略有不同。 Google的新《材料设计指南》使用分层的“纸”方法提供了更多层次结构，从而为现实世界提供了更多微妙的参考。
2.实按钮
Android手机具有后退按钮，可用于返回到应用程序中的先前屏幕。
iPhone没有此按钮，因此需要有一种方法可以返回上一个屏幕。 这通常是通过屏幕左上方的“后” V形完成的，但在应用程序的各个过程中都需要加以考虑。
3.全球要素
在设计的所有页面上都会显示全局元素（例如状态栏和标题）。 如果您想让应用程序看起来像是原生的，则根本不应该更改这些条的高度或样式，因此，我建议在每个平台的首页设计中一次定义它们。 然后，您可以在每个模型上使用一个占位符（或主操作系统的状态和顶部栏），但要向开发人员指示其在所有方面应相同。
每个平台上的导航栏之间都有细微的差异。 在Android上，文本保持左对齐，而在iOS上，文本居中。 在iOS上，许多公司都用其公司徽标替换主页标题，但这并不是Android上的最佳做法。 状态栏（带有网络，电池和时间信息）是一个本地组件，您无需考虑设计。 只要在提交样机时确保使用正确的样机，就可以避免任何混乱或干扰。
4.导航
iOS和Android平台之间最大的区别可能就是导航。 Android上的主要导航模式是抽屉菜单。 Android用户自然会选择菜单项，并且在整个体验中它无处不在。 苹果公司的指南更倾向于使用位于屏幕底部的标签栏，并允许轻松访问应用程序的顶级区域。 在确定应用程序的顶级体系结构时，可以为两个平台计划两个单独的菜单。
可以说，思考应用程序的体系结构比菜单的布局更为重要，这是我在另一篇文章中谈到的一些问题的观点。 如果您的结构声音良好，将进行导航。
如您在此处看到的，有两种导航模式：Android的抽屉菜单和iOS的标签栏。 在处理单个视图时，有时只隐藏导航层会更容易。
5.卡还是不？
卡正在成为数字设计中的主要UI模式。 它们用途广泛，并允许用户以适合移动行为的方式快速消费内容。 从外观上看，卡片与Android的材质设计非常吻合（受纸张启发）。 在卡之间使用阴影和合理的装订线可以自然地创建本机外观。
在iOS上，使用卡需要更多的注意和考虑。 甚至Facebook和Pinterest之类的大型应用程序也以与iOS准则不符的方式使用卡。 iOS指南建议在透明胶片和覆盖图中使用深度，但基本视图通常更平整。 Instagram使用完全平面的设计风格，尽管从建筑的角度来看，每个帖子都可以视为一张卡片。 值得一提的是，Instagram如何在iOS风格中获得相同的组件感觉。 如果您要在iOS上使用卡，请在使用阴影时格外温和，并尝试使其尽可能微妙。
6.版式
iOS上的系统字体家族是Helvetica Neue。 在Android上是Roboto。 尽管字体的样式明显不同，但是字体的度量却非常相似。 如果您节省时间，则可以安全地只使用一种字体，但可以与开发人员进行交流以为系统实现正确的字体。 当使用重要的布局和极端的字体时，建议至少测试两种字体的布局。
如果您想加倍努力，则需要进一步注意每个平台上的印刷和布局约定，请再次参考上述指南。 一些概括：
- Android Material Design在布局中使用了足够的空白
- 在材料设计中，字体大小调整的使用也更加引人注目。 具有大量空格的醒目的标题提供了层次结构
- 在iOS上，大小调整没有太大的变化。 但是字体粗细会有更多变化，这仍然允许您创建层次结构。
- 通常，两个平台在字体系列中都使用较轻的粗细。 但是，在下面的示例中，Android设计使用的是Roboto的轻巧和常规重量，而iOS设计使用的是Helvetica Neue的粗体和常规重量。
这是一个非常简单的示例，旨在强调即使使用简单的方式，排版也可以立即告诉您是要处理Android还是iOS应用。
7.网格和触摸目标
iOS（44px @ 1x）和Android（48dp-1：1比例为48px）的触摸目标准则略有不同。 材料设计指南还建议将所有元素对齐到8dp 方形基线网格 。
在我从事的最新项目中，我们发现遵循这些Android准则会更安全，因为（a）较大的48px触摸目标对于两个平台都是安全的，并且（b）材质设计的布局更加定义并且是最新的。 无论哪种方式，您都需要使用网格，但是由于对Android的定义更为严格，因此我们发现8dp可以很好地工作。 这意味着在水平和垂直平面上以8dp的增量设置文档以创建平铺的网格布局。
8.按钮样式
在“材料设计”中定义了几种按钮样式：
- 浮动动作按钮：形状最传统的按钮。 阴影非常重，将其抬离页面。 这些仅应在背景上使用，或仅在卡片上使用。 不应在警报或弹出窗口上完全使用它们，因为这样做会造成太多的深度层。 主要动作采用您的强调色，而次要动作通常采用不太突出的颜色。
- 平面按钮 ：基本上是带有您强调色的文本，没有任何边界元素。 他们使用填充和全部大写形式来赋予它们结构。
与Material Design相比，iOS应用程序通常外观平坦，不使用深度或阴影。 主要按钮具有填充色，而次要按钮使用相同颜色的笔划反转。 这种隐喻可能会受到一定程度的限制，尤其是与制表符和其他后续元素相比时。 为了使这种非常扁平的样式正确，重要的是要对应用程序中的颜色表示清楚且一致的隐喻。
iOS还具有纯文本样式按钮，但不共享Android的大写样式，并且字体较轻。
9.行动表
操作表允许用户从一个UI项中选择多种操作。 例如，当我触摸（或长按）图像时，我可能想要共享，上传，复制或删除图片。
iOS和Android在处理方式上略有不同。 首先，有类似的操作表从屏幕底部显示，作为当前视图的覆盖图。
通过操作表，叠加层和警报，iOS和Android使用不同的详细信息来指示图层的深度：
- Android叠加层为纯色，带有轻微的阴影，表示它是上方的“纸”层。
- iOS叠加层没有阴影，但是背景略微透明。
下拉按钮
这些仅存在于Android上，是一种快速的选择方法。 但是请记住，没有本机iOS等效项。 在下面的示例中，用户在步骤1中按下“个人资料”，并在该位置显示一个简单菜单，以选择可用的个人资料之一。 这些菜单也经常通过操作栏中的叠加按钮使用，由三个垂直点表示。
特定数据输入
对于日期和时间等特殊输入， Android现在带有内置对话框 。 这些看起来像警报弹出窗口，但是UI特别适合输入这种类型的数据。 显示了日历输入的示例。 Android提供了用于输入日期的优化叠加层。 iOS处理此问题的方式截然不同，就像一个轮子一样，就像底页一样。 在计划这些时要小心，并尽早在输入组件上与开发人员进行沟通。
10.分段控件
分段控件用于在单个视图中的不同内容之间切换。 它们的用法大致相同，但是在每个平台上在视觉上都非常有特色，因此使用正确的样式很重要。 在iOS上，共有三个标签，其样式与之前讨论的“线路”按钮相似。 在Android上，它们用简单的下划线表示，并留出更多空白来表示其交互。
11.警报
掌握正确的样式非常重要，因为它们可能会控制重要的动作，例如注册，接受条款，甚至确认付款。 我们希望他们感到值得信赖和本土。
Android警报使用前面显示的平面按钮样式，其尺寸可以在材料设计准则中找到。 操作位于警报的右下角。 “按钮”实际上完全基于文本。 他们使用所有大写字母来赋予它们更多的结构，并且带有应用程序的主要操作颜色。
在iOS上，操作由分隔符分隔。 它们通常采用句子或标题形式，因为它们从单独的模块中获取了结构。 它们集中在该字段中，它们将再次继承您的活动颜色。
12.图标
图标设计是UI设计中的专业领域。 无论您是使用免费的图标，委托图标设计器还是自己设计图标，每个平台都有其独特的风格。 iOS普及了线条图标，笔触非常细。 Android系统图标的笔触较粗，或完全是实心图标。 过去，Android图标使用透视图或三维扭曲，但现在其准则指定了直接查看的二维图标。 这是一个带有几个图标进行比较的快速示例，或者使用直接链接指向Android或iOS的图标准则
13.小吃店，敬酒，加载图像
不幸的是13.有些UI细节可能会漏掉裂缝。 常见的警告和加载图标通常留给开发人员。 您可能经历过流氓旋转器和奇怪的警报，这些警报与该应用程序的其余部分格格不入。 这些往往有本机解决方案，但可以根据您的应用程序样式进行调整。 与开发人员进行协作绝对是决定您的工作方式的最佳方法。
14.常见的UI控件
单选按钮，复选框，字段和开关是应赋予本机感觉的功能组件。 与警报和对话一样，这些控件和输入对于用户来说是信任和熟悉的领域。 尽可能使用本机组件，以便人们（a）知道如何使用它们，以及（b）凭借其敏感数据或付款明细信任您的应用。
在下面的示例中，我们看到了Android和iOS的等效开关和单选按钮。 同样，差异很小，足以让您继续进行一种设计，并在以后进行另一种设计，但是细微的差异对于本机外观至关重要。 对于这些组件，请尽可能使用UI工具包，并在此过程的早期与开发人员再次进行沟通。
摘要
使用一种设计在iOS和Android上为您的应用程序创建原生感觉并不是一项不可能的任务。 从一开始就尝试掌握这些调整，密切关注在一个平台上感觉不同步的组件，并始终与开发人员保持尽可能紧密的合作。
资源资源
希望本文将为您提供在两个应用程序的设计差异化方面的快速解答，但是您还需要一些工具和模板来正确执行设计。 您可以将许多常用资源用作起点，以下是一些最佳资源：
指导方针
如果您想了解更多信息，可以在平台指南中找到我提供的很多信息。 它们非常广泛，因此我只列出了比较重要的部分。 但是，如果您有更具体的问题，这是最好的起点：
UI套件
这些UI套件将节省您重新创建基本的本机控件和匹配大小的麻烦。 您可以拔出所需的部分，然后在设计的Android和iPhone输出之间进行切换。
图示
即使您正在制作自己的图标或调试图标，在工作时将它们用作占位符也很有用。 图标设计本身就是一件工作，并且您不希望图标在让您对应用程序有整体感觉的同时放慢脚步。 我最近发现，icons8上的以下链接看起来不错，或者flaticon.com非常适合用于更常规的图标。
样机
使用设备模型来展示您的应用总是很有用的。 这些有很多类别。 您可能想要一个用于上下文的基本设备模型，一个让您的应用程序发光的简化平面设备，或者一个生活方式模型来呈现用例。 这是我发现有用的一些资源，还有更多资源。 对于Android设备，请谨慎选择。 我倾向于Nexus系列，因为它们是Google自己的手机，不会暗示偏爱其他制造商。
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
