重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
移动领域的两大风向标--Android和iOS,也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下,在这里,我们对比了Android和iOS之间的简单设计差异,这将帮助我们弄清一个与另一个有何不同。
创新互联公司2013年开创至今,先为蠡县等服务建站,蠡县等地企业,进行企业商务咨询服务。为蠡县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
由于碎片化的原因,安卓系统的应用设计会有细微的差异。
我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。
人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说,该方法支持极简主义,使用简洁的元素,注重排版和扁平化色彩。
简而言之,Android Material Design被认为是Flat设计的升级版,带有拟态性(一种流行的设计概念,即让所代表的物品与现实世界中的对应物相似)。
用Google设计副总裁 MatíasDuarte 的话来说,它是–
有了这些基础知识,让我们从7个方面研究两个平台之间的差异。
目录
1. 导航
2. 按钮
3. 图标和屏幕分辨率
4. 字体
5. 控件
6. 卡片
7. 警报
对于iOS应用程序,总是在“后退”按钮旁边提示上一个选项卡的名称。在中间,显示当前选项卡的名称,而在右上角则显示“编辑”或“完成”(控制按钮)。
说到Android的设计规则,应用程序通常在抽屉菜单或后退按钮(可选)之后的左上角显示标题。移至右上方,总是有一个操作项,例如搜索图标(也可以是多个,例如“收藏夹”图标),其后是溢出菜单。
在iOS中,主导航始终显示在底部,功能菜单专门用于存储一次性功能。而在Android中,通常会在功能菜单中看到主要导航,或者以搜索栏,浮动操作按钮等形式在整个界面中存在。
ios界面指南中,没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部,一般位于最末位的 "更多"标签下找到二级导航。
Android中,二次导航是一个抽屉,一旦按下功能菜单图标,就会从左到右打开,同时产生一个深色的遮罩层。
有四种方法可以在iOS应用中实现“后退”操作:
在某些情况下,Android应用程序中给出了类似后退的操作,您可以通过该操作进入前一个标签。但是,最常见和最简单的方法是使用导航栏中的后退按钮(Android 10中现在是可选的)。
iOS和Android中的按钮风格最主要的设计区别在于,iOS中的按钮遵循扁平化的设计模式,不带阴影、支持标题大小写。Android遵循Material Design,带阴影且字母大写。
另一个比较重要的按钮是Floating action button(FAB行动呼吁按钮)。例如安卓系统中Gmail的compose按钮,iOS系统中社交媒体应用的新建文章按钮。
两种系统都使用8dp的网格来构建屏幕结构,而最常见的边框是16dp。
在开发移动应用程序时,以预定义的尺寸设计图标是非常关键的。这里有一个表,描述了所有的测量。
这些表格一开始可能会让人有点不知所措,但是如果你知道基本尺寸,并且能够使用倍数进行检查和导出,会发现这并不复杂。
多年来,苹果一直是Helvetica Neue字体的粉丝,然而在2015年,苹果开始使用San Francisco,它更节省空间,非常适合手机、台式机和iOS Watch使用。
Android系统,一直使用Roboto作为标准系统字体。在可预见的未来,谷歌也没有计划改变这一深受喜爱的元素。
控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的,让我们来看看他们的位置。
搜索功能对于两个平台来说都非常重要,苹果最近还在iMessage中加入了 "搜索栏 "。
在苹果中,搜索选项有两种类型--突出和隐藏。通常情况下,搜索图标会显示在上边的选项卡上,而有时需要从上到下拖动屏幕才能显示搜索栏。此外,如果要取消搜索查询,可以按 "取消",如果要清除,可以用 "X"。
在安卓系统中,没有隐藏的搜索栏,你总能在上层标签中找到一个。如果要取消搜索,只需点击"←"图标即可,如果要清除查询,则和iOS中的一样。
浮动的动作按钮(FAB)在Android中充当主要行动按钮,可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。
不过也有一些例外,少数iOS会在底部工具栏显示CTA,而Android则在上部工具栏显示。
如果需要显示一些选项,可以在iOS平台上使用选取器控件,选取器一般出现在底部。
对于在Android平台上显示很少的选项,通常使用一个出现在原地的下拉菜单,或者一个出现在中心的模态对话框,使用模态框时应用背景变暗。
据观察,iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。
卡片是图片、文字、视频的集合,还包括按钮和评论。
在iOS中,卡片的特点是无阴影、全宽、无圆角。而在安卓系统中,卡片的设计有阴影、沟槽、圆角等功能。
安卓系统的提醒采用的是扁平化的按钮样式,具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主(全大写),让用户更容易理解。
至于iOS系统的提醒,则是用分割线隔开。它们基本采用句子或标题的形式,在独立的区块中呈现。它们被放置在弹出窗口的中心。
本文涵盖了iOS和Android所有的初步差异,希望对你有所帮助,而设计一个iOS或Android的移动应用,总是有迭代的准则,所以,一定要保持信息的更新,及时调整自己的产品设计。
Q. 为什么iOS和Android上的应用看起来不一样?
品牌和意识形态的不同,已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。
Q. 如何设计一个原生应用?
在设计原生应用时,必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外,这些平台有不同的要求,所以你的应用必须满足它们才能在应用商店上发布。
Q. iOS比Android更方便用户使用吗?
这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用,而有些人则在各方面都偏爱Android。
众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体,英文字体为robot字体。
只使用偶数单位 24 pt,28 pt,36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
讲图标之前先来分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。
px是像素的意思, 不同设备显示效果相同。
安卓各屏幕密度关系如下:
3、图标
不同手机品牌的图标的标志是不一样的,对应不同大小屏幕的尺寸如下:
系统图标的尺寸:
快捷图标的尺寸:
应用图标的尺寸:
4、应用栏的尺寸
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系,而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系,所以iPhone 6 Plus和xxhdip也可以共用一套切图,掌握好尺寸关系,能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。
如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~
安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想当然,那就别发给前端人员啦,他也看不懂。
◆组件最小间隔建议为8dp或10dp。排版/文字最小间隔建议为4dp ;
◆组件尺寸建议能被4整除;
◆组件尺寸建议为偶数(单数容易出现锯齿)。
触摸式UI组件通常使用48dp作为基准单位。
◆48dp转换为物理尺寸大约9mm左右。这是一个用户手指能够准确舒服触摸的最小寸。
◆48dp指组件最小实际尺寸也指最小触摸区域
◆状态栏: 24dp
◆操作栏: 44/48dp
侧边导航: 286 / 304dp
◆悬浮操作按钮: 56dp
◆操作栏+TAB: 36+33dp / 44+ 40dp
◆底栏: 44/48dp
屏幕水平外边距,尺寸建议为: 6dp、8dp、16dp。
操作栏/ App Bar :可放置工具栏,显示应用的LOGO、主标题、导航、菜单以及功能等。
工具栏/Tool Bar : Android5.0推出的Material Design风格导航控件,用于取代Action Bar控件。相比Action Bar , ToolBar在样式、布局、运用上更灵活: Actionbar一定要固定在Activity顶部 ,ToolBar可以放到界面的任意位置;有更多的定制修改属性:
侧边导航/ Side Nav :左侧导航和右侧导航可固定显示,也可通过侧滑显示,覆盖在应用上。左侧导航主要用于导航菜单或重要信息显示,右侧导航主要显示二级扩展内容及相关信息。
底栏/ Bottom Bar :用于展示最核心、最重要的功能、导航,方便用户快速
切换,也是用户单手操作最舒适的区域。
◆Android程序开发统- 使用虚拟尺寸单位: dp/dip. sp
dp/ dip :用于Android元素尺寸,如按钮、导航尺寸。
◆sp :用于Android字体大小尺寸。
◆按Android开发原则,文字的尺寸一-律用sp单位,非文字的尺寸一律使用dp单位。
例如textSize= "14sp" 、layout height= "40dp" 。
◆dp= dip= sp
◆px与dp单位的转换与ppi有直接关系
◆ppi指每英寸所拥有的像素数/每英寸像素。
屏幕拥有像素的总数以及屏幕水平(宽)和垂直(高)方向的像素数量。单位为像素。像素/px是组成屏幕图像的最小点, -个相对大小单位,同屏幕里越小越密越清晰。
ppi指每英寸所拥有的像素数/每英寸像素。像素密度越高,代表屏幕图像显示越清晰。
dpi平面设计/印刷计数单位,指每英寸所能印刷出来的网点数。衡量打印机打印精度的主要参数之一,,值越大,表明打印机的打印精度越高。
用户需求、体验研究
信息架构、操作流程、页面交互设计产品原型图输出,推进UI落地
交互说明文档输出,推进前端落地产品可用性测试,优化改进
当你拿的手机距离你约25- 30厘米,如果手机pp达到300以上,你的眼睛将无法分辨出像素点。这就是苹果提出的视网膜屏幕。
显示分辨率:屏幕拥有像素的总数以及屏幕水平(宽)和垂直(高)方向的像素数量。单位为像素。
ppi :屏幕像素密度,每英寸所拥有的像素数/每英寸像素
ppi = dpi
◆逗号不排在最左侧
◆左对齐优先右对齐
标题越重要、级别越大颜色越深、越突出
◆字体设计有层次,有主次
◆正文行宽建议不超过320dp
◆dp/pt与px的装换与乃配
◆Android手机竝用结杓
◆Android基本布局入冂
◆Android文本排版入冂