如何做一套设计稿兼容Android和iOS双*台，IOS和安卓UI的区别（转载／学习用）

 来源：视觉中国   作者：热心网友   发布时间：2015-05-27

来自：http://www.17xsj.com/UIsheji/lilunjiqiao/2221.html

 

 

现在许多公司都需要设计可以同时运行于Android和 iPhones*台的App。在理想状态下，我们应该单独花数月时间分别设计两个app。然而在现实中，设计一个app的时间就已经很紧了。更通行的做法是设计一个app，然后把它交给两个不同的团队去开发。如果你也按这种方式开发app的，那么提前了解一下Android和 iPhones*台的差异是很有必要的。

1.了解对手

通常的情况是每个人都有自己偏爱的系统。那我自己来说，我觉得iPhones给我的感觉更自然一些。但要了解另一个*台，最好的办法就是买一台支持该*台的设备。如果可以的话，最好一直坚持使用这个设备，直到这个app项目结束为止。如果你是个自由设计师，新设备的价格也许会让你心疼，但与它能带给你带来的长远收益相比，这是值得的。

2.选择*台

因为设计app的日程通常非常紧张，而我们又只能选择其中一个*台的app，所以从开始我们应该根据市场需求，决定究竟以哪种app开始。诸如这款app将更多用于安卓手机吗？这款app是否需要付费？目标人群有哪些？研究一下这些问题有助于我们做出正确的选择。

3.熟悉规则

在开始设计之前，首先要了解Android 和iOS*台的官方设计指南。在过去，一款app在进入苹果的应用商店之前，通常需要两周时间等待审核。相对而言进入谷歌Play的门槛要低一些。但随着谷歌Material Design设计指南的完善，这一情况也在逐渐改变。

安卓和IOS系统的区别分为以下几点：

1. 总体风格

从iOS7开始，苹果摒弃了尝试在早期的iPhone中使用的拟物化（skeuomorphic）设计风格，转向扁*化设计。而谷歌的情况却相反。谷歌新推出的Material Design指南倾向于营造更接*真实世界的效果。

2. 真实按钮

安卓手机有一个“后退（back）”按钮，在app界面中，它可以让用户回到早先的界面。

iPhones上没有这个按钮，回到上个界面的操作一般是通过屏幕左上角的“返回上一级”图标实现的，但但使用时需要考虑app界面的不同路径。

3.全局元素

有一些全局性图标（如状态和首标）会出现在所有界面中。如果想你的设计看起来很自然的话，就不要去改动这些条形的高度和风格。我建议在你设计第一个界面时就将这些元素定义好。在后续设计中，你可以在模拟文件中使用占位图形（或OS中的状态和首标）来代替它们，但一定要告诉开发人员，在所有页面中这些元素都应该保持一致。

 

两个*台在导航设计上略有不同。在安卓系统中，标题文字是左对齐的，而在iOS中，文字是居中的。在iOS中，很多公司都会将标题替换为公司图标，但在安卓系统中，这却并非是一个好的策略。因为状态条（包括信号，电池和时间等信息）是原生系统自带的，无需考虑它的设计。需要保证的是在制作模拟文件时，要使用正确的图标以免造成误解。

4. 导航

或许安卓与iOS最大的不同之处体现在各自的导航上。安卓*台的主要导航方式是一个抽屉式目录。在用户使用app的整个过程中，他似乎始终出现在界面里。而苹果的导航使用的是标签栏的模式，它位于屏幕的下方，允许用户查看app中不同的一级活动区。所以在设计app的一级活动区时，应该分别针对两种*台设计不同的目录。

从整体上考虑，app的结构或许比导航目录更为重要。如果app的整体结构良好，那么导航条也会较为出色。正如我们刚才说过的，你要面对的导航模式有两种，Android中的抽屉式目录和iOS中的标签栏。在设计单独的页面时，有时把导航层直接隐藏也不失为一个办法。

5. 是否使用卡牌界面

卡牌式界面（Cards）正在逐渐成为数字设计中重要的UI类型。他们用途灵活，便于用户快速理解界面中的内容。从视觉效果上讲，卡牌式界面也与安卓material design的理念非常一致。卡牌之间的阴影使它看起来感觉非常自然。

在iOS中，使用卡牌界面则需要审慎行事。即便是像Facebook 和Pinterest这样的大公司，当他们使用卡牌设计时，也给人以不太符合iOS设计指南的感觉。

iOS建议设计师使用幻灯片和层叠效果，但其基本试图则更为贴*扁*化设计风格。Instagram的app全部采用了扁*化风格的设计，虽然从总体结构上讲，它的每个帖子更应该被看成是卡牌界面。因此如果你想在iOS*台下使用卡牌式界面的话，一定要小心使用阴影效果，并尽可能使阴影看起来十分柔和。

6. 排版

iOS系统使用的字体是Helvetica Neue，而安卓使用的是Roboto。虽然两种字体的风格各不相同，但它们的规格是接*的。如果想保证速度的话，也可以选择一种字体使用。但需要与开发者做好沟通，选择的字体大小要适用于*台中。在处理较为重要的布局或极端大小的字号时，建议对两种字体都进行测试。

如果想追求效果的话，则需要你根据两种*台的不同特点，做出进一步的优化。以下仅是一些需要注意的要点：

安卓的Material Design在布局中使用了大量的白空间

在 material design中，字体的使用更为大胆.。造型夸张的标题配合以大量的空间往往能起到分层的作用。

在iOS中, 缺少戏剧性的变化。但通过调节字号的大小。同样能起到分层的作用。

在典型情况下，两个*台使用的都是字体库中较小的字号。然而在下面的示例中我们也可以看到，安卓使用的是较小的规范字体，而iOS 使用的却是加粗的Helvetica Neue规范字体。这个简单的示例说明，即使是非常简单的排版，在安卓和iOS 中呈现出的效果也是截然不同的。

7. 分层和触控目标

iOS (44px @1x)和 Android (48dp - 48px at 1:1 比例)对于触控目标的设计指南有所不同。Material Design建议将所有元素按8dp 方形基线网格（square baseline grid）对齐。

根据我从最新项目中获得的经验，我认为遵循安卓的设计指南更为可靠一些，因为(a) 48px的触控目标更大，因此在两个*台中的应用更为可靠(b) Material design的布局更符合当前的设计趋势。总之，你需要一个可靠的网格，但安卓的定义更为严格，我们发现在安卓*台下，8dp的网格效果良好。这意味着为了创建一个瓦片网格（tiled grid）布局，你需要将垂直面和水*面都设置为8dp变量（ increments）。

8. 按钮风格

Material Design定义了几种不同的按钮风格： 1.浮动式活动按钮: 这是最传统的按钮样式。它投下的阴影很重，看起来就像浮在页面上。这类按钮应该仅仅应用于背景中，在卡牌式界面中使用时应该非常谨慎。不应在弹出式提示中使用这类按钮，因为会创造太多分层。主要活动按钮应使用强调色，而次级活动按钮使用稍弱一些的颜色。

2.扁*按钮: 关键文本使用强调色，没有任何界限清晰的元素。这类按钮使用边距和所有的大写字母来形成结构。

与Material Design设计相比，iOS app采用的是典型的扁*化风格，不使用分层或阴影效果。主活动按钮采用填充色，而次级活动按钮则采用同一色调的反白（reversed out）。为了将扁*化风格设置的恰到好处，一定要保证颜色的使用清晰，一致。iOS*台下也有简洁文字风格的按钮，但它并不具备安卓按钮的大写字母风格，字号相对也较小一些。

9. 行动表单

行动表单允许用户从一个UI中选择不同的操作。例如，当我触控一张图片时，我可以进行分享，上传，复制或删除等不同操作。

iOS 和Android系统对这一情况采取的方法是不同的。尽管两个*台都使用了*似的行动表单，这种表单一般在屏幕下方，并会部分地覆盖当前页面。

但安卓和iOS使用了不同的细节来显示分层。

 

Android的分层使用单色，并略带阴影， 为的是提示用户当前界面被一层“纸”覆盖住了。

iOS的分层没有阴影，但带有透明度很低的背景。

10、下拉按钮

下拉按钮只存在于安卓系统中，它的作用是让用户快速做出选择。要注意的是，原生的iOS系统中没有与之对应的按钮。在下面的截图中，如果用户按住步骤1中的“资料”（ profile）按钮，那么该位置就会显示出一个简单的目录，供用户选择一份可以查看的个人资料。这些目录也常被用于行动条区域叠加层的按钮中，三个垂直排列的黑点显示了它们的存在。

11、特殊数据输入

对于像事件和日期这样的特殊数据，目前安卓已经开发出内置的对话系统。它在形式上很像弹出式提示框，但UI是专门针对此类型的数据输入开发的。例如日期的输入，安卓有专门针对日期输入的优化界面。而iOS的方法是一个从底部显示的圆盘。这是在设计之初就需要注意的。

12、.分段控件

分段控件的作用是在同一个视图下切换不同的内容。它们的作用是相同的，但在视觉上又各不相同，所以我们在针对不同的*台设计时要注意到这一点。在iOS系统下有三个标签，样式大致相同，并排排列在我们前面提到过的按钮上。在安卓系统下，则是用一条简单的下划线标出了他们的位置，其余充足的负空间是为了提示用户它们之间存在互动。

13. 提示消息

提示消息在整个设计中占有重要的位置，因为它们控制着一些关键的操作，如注册，接受协议甚至是确认付款，所以务必要确保它们的样式是合适的。

安卓系统下的提示消息采用的是我们前面讨论过的扁*风格按钮。material design的设计指南中规定了他们的尺寸。操作按钮一般是位于提示信息的正下方。这里的“按钮”其实全部是文本。它们一般都是大写字母，以营造一种均衡感，它们的颜色一般是与app主要操作按钮的颜色一致。

 

在iOS系统中，操作按钮之间有分隔线。它们在形式上通常是一句话或大写标题，分隔开的区域同样给人一种稳定之感。它们一般位于屏幕正中央，在颜色上也与主操作按钮颜色一致。

14. 图标

图标是UI中需要专业人士设计的部分之一。无论打算采用免费图标，还是请专业的设计师来设计，都要注意安卓*台和iOS下图标的不同特点。iOS中的图标是简洁的线条，笔触较为轻盈。而安卓系统的图标笔触较为浓重，有时甚至是完全实心的图标。在过去，安卓曾使用特殊视角和三维的图标，但现在改用二维图标了。以下就是这两个*台中一些图标的对比。

13. 小图标和加载图像

在设计中，我们可能会忽视一些微小的UI细节。有一些图标，如提示和加载图标通常是由开发者自己解决的。你可能就遇到过与当前的app风格截然不同的奇怪提示。它们可是源于原生系统的默认提示，但同样是可以通过改动，使之与app风格一致的。在处理这种情况时，需要开发者与设计师密切合作。

14.通用UI控件

单选按钮，复选框，切换按钮等实用的元素也应该被赋予自然的风格。正如提示消息和对话框一样，这些元素控制的一些在用户看来代表着信任和友好的区域。这些元素应该尽量实用原生系统的元素，这样至少有两个好处：(a)用户知道如何使用它们 (b)让用户处理敏感数据或确认支付时感到放心。

从下面的示例图中我们可以看到，开关和单选按钮在Android和iOS中几乎是一样的。在这里，设计师可以先做出一个设计，然后根据不同的*台进行微调。但即便是外观上的细微差异，也能体现出这些元素是否符合各自*台的风格。因此在设计这些元素时应该多使用你的UI工具包，并且在设计的早期阶段就与开发人员做好沟通。

Android (左) 和 iOS (右)

结语

设计出在两种*台下都与原生系统在风格上协调一致的app并非不可能。并且现在的app设计风格基本上是你中有我，我中有你的情况，安卓的app中也有借鉴IOS的设计。我们需要做的就是从设计开始就密切留意两种*台在设计元素上的差异，为以后的微调留出余地，还要注意与开发者密切沟通，这样才能做出一款不错的app。