如何做一套设计稿兼容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。