当前位置:文档之家› APP如何同时设计 iOS 和 Android

APP如何同时设计 iOS 和 Android

APP如何同时设计iOS 和Android
企业通常需要同时开发运行在Android 和iOS 设备上的App。

通常情况下,我们都只设计一个App,然后在交给iOS 和Android 开发团队....顶...峰..a..p..p...之前将它们做一些微调。

要按照这种方式进行App 设计,首先我们应当预先了解这两个平台之间的差异,这样你才能够使得你设计的App 在这两个平台上的外观都能显得自然。

在设计开始之前
1.了解另外一种系统
你很可能有自己更加喜欢的一个系统,在进行跨平台设计的时候,你应当首先去做的一件事是了解另外一个系统。

2. 选择一个优先的平台
如何选择优先的平台并不在于你的个人喜好,而是在于你设计的这款app 的市场定位如何。

你所处的环境中有更多人使用Android 设备吗?它是收费App 吗?你的目标受众是谁?
问问自己这些问题有利于你决定哪一个平台应当是被优先满足的。

3. 了解设计规范
阅读iOS 和Android 的设计规范。

在过去,iOS 被认为有着更加严格的设计规范,有时候为了让App 能够上线AppStore,你需要走一个大约两周长的流程。

而在Play store 里则不存在这样的审批流程。

然而,恰恰由于App 上线如此开放,Android 平台上的App 质量一直因为良莠不齐而饱受诟病。

设计你的APP
1. 总体的样式
从iOS7 以后,Apple 就一直在采用扁平化的设计模式,去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。

Google 的新MD 设计规范有了一些更加细节的规定,通过一种叫“纸片”的方法来创造更多的层级关系。

2. 实体按钮
Android 有一个返回按钮,点击它可以返回上一个屏幕。

iPhone 上则没有这样一个按钮,所以需要有一种方式能够让用户回到先前的屏幕。

通常的解决方案是在屏幕的左上角放置一个返回键。

3. 通用元素
两种平台之间的确存在着一些通用的元素,比如说状态栏和标题栏,它们会出现在每一屏的顶部。

不同平台上的导航栏有一定的差别。

在Android 上文本是左对齐的,然而iOS 上是居中对齐的。

在iOS 上,很多企业都用它们的logo 来替换首页标题栏中的文字,但是在Android 设备上这不是一个好的主意。

状态栏(显示你的网络、电量和时间信息)是系统组件,你不需要考虑设计它,只要确保它们不会对他人造成误解就好了。

4. 导航
或许iOS 和Android 平台之间最大的区别就在于他们的导航样式了。

Android 上最主要的导航方式是抽屉菜单,Android 用户们通常在这个菜单内进行跳转。

而且在整个App 中,这种体验是一贯的。

Apple 的导航样式更倾向于tab bar,它位于屏幕的底部,并且以一种很简单的方式实现上部内容的切换。

5. 要不要用卡片式?
在UI 设计中,卡片正逐渐成为一种主要的UI 设计样式,它们可以应付多种情况,而且给用户提供了一种能够呈现有效内容的便捷方式。

视觉上,卡片非常适应于Android 的Material Design(它事实上源自于纸张的灵感)。

使用阴影和卡片之间的合理间距能够创建一种自然的外观。

在iOS 上,使用卡片设计需要更加的小心谨慎,尽管一些大型的App,诸如Facebook 和pinterest 的确使用了一种略微偏离iOS 视觉规范的设计风格。

Instagram 使用了一种完全扁平化的设计风格,尽管从结构的观点上看,用户的每一条推送都能被视为是一张卡片,instagram 的设计很值得你去花时间揣摩,它是如何遵循iOS 视觉规范的。

6. 排版
iOS 系统上的默认字体是Helvetica Neue,在Android 上则是Roboto。

尽管这两种字体在外观上有显著的差异,但是这两个字体的尺寸却是近乎相同的。

如果你想要在设计的时候节省时间,那么用一款字体就可以,但是要和开发人员沟通在不同的平台上使用对应的字体。

而在设计重要的布局结构和使用大号字体时,我建议你还是同时用这两种字体测试效果。

如果你想要精益求精,那么你就要对不同平台上的设计规范更加注意。

比如如下几条:
a.Android 的MD 设计需要用到更多的空格来进行布局
b.在MD 中字体大小的变化会更加多样
c.在iOS 上,字体没那么多大小差异,但是在字体重量上(Font weight)有更多的变化,同样允许你创建主次结构
d.两个平台都使用比较细的字体来现实正文内容,然而,在下面的例子中,Android 使用了轻(Lighr)和常规(Regular)字体,而iOS 使用了粗体(Bold)和常规字体
这是一个非常简单的例子,向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异——你能很快分辨你是在用Android 手机还是在用iPhone!
7. 网格和触摸元件
iOS(@1x 下44px)和Android(1:1 比率下48p)都有对可触摸元件的设计规范。

MD 规范同样建议对所有元素使用8dp 网格对齐。

8. 按钮样式
这里是MD 下定义的几个按钮类型:
浮动动作按钮(Floating action buttons):最传统的有边框的按钮,阴影厚重明显,将它们从页面上分离出来。

它们仅应当被用于背景,或者谨慎地在卡片上使用,不应当在警告框或者弹出框上使用,因为使用这种按钮,就会创建一层视觉深度。

这种按钮的填充颜色一般使用App 的主色,而下一种按钮,通常使用辅助的颜色。

扁平化按钮(Flat buttons):通常文本使用App 的主色,没有边框,它们通常使用间距和大写字母来强调不同内容之间的分离关系。

和MD 相比较,iOS App 在外观上是完全扁平化的,没有层级深度和阴影。

主要按钮有填充颜色,次级按钮反转颜色,也就是说,有着主色的边框和文字。

这种方案有时候会受到一定的限制,特别将它是用于标签栏等元素的时候。

要用好这种设计模式,你必须对不同的颜色在你的App 中分别代表什么有一个清晰的概念。

9. 动作表单
动作表单(Action sheets)允许用户在多项操作中进行选择。

比如,当我点击(或者长按)我想要分享、上传、复制或者删除的图片时。

iOS 和Android 用近乎相同的方式解决这种问题。

首先,动作表单都是出现在屏幕的地步,然后在主要内容上罩上一层阴影。

然而,它们在创造不同的深度和其他细节方面有着一些不同。

Android 在动作表单上加了一层厚重的阴影,表明它是脱离于原先的内容的。

iOS 的动作表单没有阴影,仅仅是在原先的背景上防止了一个有一定透明度的灰色图案。

相关主题