×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > Android和iOS设备上的App设计

Android和iOS设备上的App设计

2015-07-131022分享

随着互联网的发展,越来越多的企业都设计爱屁屁。为了满足多样化的顾客需要,一般都需要同时开发运行在 Android 和 iOS 设备上的 App。如果要给两种设备都做设计那需要的时间成本就太高了,那么样才能设计出一种就能同时在两个平台上都显得很自然呢?

据经验你只要遵循这些步骤,你的 App 就能同时在 iOS 和 Android 保持完美!

1.设计一个总体的样式

从 iOS7 以后,Apple 就一直在采用扁平化的设计模式,去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定,通过一种叫“纸片”的方法来创造更多的层级关系。

2.Android 实体按钮

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

实体按钮

iPhone 上则没有这样一个按钮,所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。

3.通用元素设计

两种平台之间的确存在着一些通用的元素,比如说状态栏和标题栏,它们会出现在每一屏的顶部。你不应当改变导航栏的高度,如果你想让 App 看起来更加原生的话。所以,我推荐你在设计的第一页就定义好标题栏的样式,然后在其他的屏幕上使用一个占位的方框来替代,这样能省下不少时间,但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。

不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的,然而 iOS 上是居中对齐的。在 iOS 上,很多企业都用它们的 logo 来替换首页标题栏中的文字,但是在 Android 设备上这不是一个好的主意。状态栏(显示你的网络、电量和时间信息)是系统组件,你不需要考虑设计它,只要确保它们不会对他人造成误解就好了。

通用元素设计

4.导航设计

或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单,Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中,这种体验是一贯的。Apple 的导航样式更倾向于 tab bar,它位于屏幕的底部,并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候,你可以为不同的平台设计不同的导航样式。

navigation.png

5.排版

iOS 系统上的默认字体是 Helvetica Neue,在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异,但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间,那么用一款字体就可以,但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时,我建议你还是同时用这两种字体测试效果。

6.网格和触摸元件

iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。

在最近的项目上,我发现遵守 Android 的这些设计规范会更加安全,因为大一些的 48px 的按钮在两个平台上都表现良好,而且 MD 的规范更加全面,还经常更新。不管怎么说,你都应该在设计中使用网格,但是我们发现定义更加明确的 Android 网格会更好用一些。

7.按钮样式

这里是 MD 下定义的几个按钮类型:

  1. 浮动动作按钮(Floating action buttons):最传统的有边框的按钮,阴影厚重明显,将它们从页面上分离出来。它们仅应当被用于背景,或者谨慎地在卡片上使用,不应当在警告框或者弹出框上使用,因为使用这种按钮,就会创建一层视觉深度。这种按钮的填充颜色一般使用 App 的主色,而下一种按钮,通常使用辅助的颜色。

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

8.动作表单(Action sheets)设计

动作表单允许用户在多项操作中进行选择。比如,当我点击(或者长按)我想要分享、上传、复制或者删除的图片时。

iOS 和 Android 用近乎相同的方式解决这种问题。首先,动作表单都是出现在屏幕的地步,然后在主要内容上罩上一层阴影。然而,它们在创造不同的深度和其他细节方面有着一些不同。

下拉按钮

只存在于 Android 上,它允许用户快速选择功能。然而,记住,这并不是 iOS 原生的控件之一。在下面的例子中,用户点击 profile,然后弹出了一个下拉菜单,提供了几个选项。

特殊数据输入

像特定的一些数据的输入,比如日期和时间,Android 现在有了原生的对话框,虽然它们看起来像是警告弹出框,一个例子是日历输入。iOS 使用完全不同的方式解决这个问题,它会在屏幕的底部弹出一个转轮让用户进行选择。在设计这些东西的时候要小心,并且和开发人员做好沟通。

9.分类控制

分类控制允许用户以一种简单的方式在不同内容之间进行跳转。在不同的平台上,该控件的使用方式是完全相同的,但是在视觉上有着显著差异,因此要注意使用正确的形式。在 iOS 上,分类控制控件的外观很像我们刚才提到的按钮。而在 Android 上,通过间距来展现它们的分离关系,同时用下划线来标明目前所处的位置。

分类控制

10.弹了框

正确地处理这一类型的控件十分重要,因为他们也许会涉及到一些很重要的操作,例如注册,确认条款,甚至是确认支付。我们需要让他们看起来是原生的,以便产生一种安全感和信任感。

Android 的警告框使用的按钮样式,就是我们先前提到过的扁平按钮,你可以在 MD 说明文档中找到它们应有的尺寸。动作按钮位于卡片的右半部分。实际上,所谓的按钮其实就是一个文本。它们使用大写字母将它们和其他内容区别开,并且使用 App 的主色。

11.ico

不管你是使用免费的 icon,和专门的 icon 设计师合作,还是自己设计 icon,不同的平台上对 icon 都有特别的样式要求。即使你要自己绘制 icon,或者是请专门的 icon 设计师帮你绘制,你也有可能用到它们(做你的占位符吧!)。

12.面包菜单、载入图片

不幸的数字 13(注:最后的晚餐的在场人数)。通常来说,警告框和表示载入的图标留给开发者做决定。你或许已经经历过弹出框和警告框的设计和 App 的其他部分样式完全脱节的情况。那是因为通常 iOS 和 Android 平台都有对这些情况的默认的处理方案,但是你也可以利用你的方案进行替代。在这里,让你的设计能被真实还原的最好的方式就是和开发人员多进行沟通。

13.通用ui控制

复选框,单选框和输入框,以及开关都是应该有着原生感觉的控件。像警告框和对话框一样,这些控件保持默认样式的话能够给用户带来熟悉感和信任感。尽可能多地使用原生控件,用户自然知道如何使用他们,并且在涉及到敏感信息和支付事宜的时候能够更信任你的 App。

在下面的例子中,我们可以看到两个平台上的差异其实是很小的,小到你在设计的时候可以忽略这些差异,用其中一种形式设计,但是不要忽略细节上的差异所带来的原生的感觉。使用你的 UI 库,并且在开发的早期和开发人员做好说明。

inputs

在同一个设计稿中同时呈现出原生 iOS 和 Android 的感觉也并非一件不可能的任务。尝试在设计之初就注意到这些差别,并且注意对控件的使用,并且在设计过程中和开发人员保持紧密的联系。


本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:http://www.mcykj.com/show-19-254-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

智慧社区建设:如何打造智慧社区
智慧社区建设是智能建筑的扩展的延生,借助物联网、传感网,网络通讯技……
福田网站建设:网站建设心得
福田网站建设:网站建设心得从事福田网站建设行业已经很多年了,有一些……
物业系统开发:应该如何开发物业系统
用软件操作的小区物业管理系统是为、作而开发的管理软件,根据需求分析……
兼职网站制作:制作网站基本功
兼职网站制作
在线考试系统设计:看完你就懂了
一、在线考试系统的背景当今社会,考试已经是我们必不可少的东西了,从……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.