《交互数字内容设计》课件-第二章 初识移动设备的操作系统

第二章初识移动设备的操作系统本章主要讲述当前移动设备的主流操作系统Android系统（谷歌）和IOS系统（苹果），了解其设计规范。英寸

像素

点

分辨率

2.1IOS系统的组成要素及设计规范

2.1.1IOS系统简介IOS系统是由苹果公司开发的手持设备操作系统，主要应用于iPhone、

iPad和iPodTouch 等手持设备。IOS系统一直在引领移动端界面设计潮流，早期的界面采用拟物化风格，自IOS7之后一直采用扁平化风格，

设计时应使用形状工具进行绘制，这样更方便后期尺寸、颜色或形状的修改。

1.界面尺寸：3.5英寸（iPhone1/2/3/4/4S）、4英寸（iPhone5/5S/5C）、4.7英寸（iPhone6/6S）、5.5英寸（iPhone6plus/6Splus）等。2.分辨率：320*480像素（iPhone1/2/3）、640*960像素（iPhone4/4S）、640*1136像素（iPhone5/5S/5C）、750*1334像素（iPhone6/6S）、1080*1920像素（iPhone6plus/6Splus）等，2.1.2尺寸及分辨率

点击添加文本点击添加文本点击添加文本点击添加文本iOS界面尺寸设备分辨率状态栏高度导航栏高度标签栏高度Iphone6plus1080x1920px54px132px146pxIphone6/6s750x1334px40px88px98pxIphone5/5c/5s640x1136px40px88px98pxIphone4/4s640x960px40px88px98px状态栏(statusbar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px主菜单栏(submenu，tab)（标签栏）：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁。内部设计1、所有能点击的图片不得小于44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、充分考虑每个控制按钮在4种状态下的样式，如图2.1.3交互界面的组成元素

状态栏导航栏内容区标签栏Iphone6图例1.图标的圆角和光晕效果2.1.4系统图标

2.图标大小状态栏图标20—24px桌面图标120x120px导航栏、工具栏图标44x44px标签栏图标50x50px最大96x64px设置图标58x58pxSpotlight图标80x80px3.图标格式IOS系统图标和控件的标准格式为PNG格式，它是目前交互界面设计使用的主流图片格式，是一种无损压缩的图片格式。点击添加文本点击添加文本点击添加文本点击添加文本2.1.5字体一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。IOS9中文字体：苹方/PingFangSCIOS8中文字体：常州华文的黑体-简，在macosx系统中选择黑体-简IOS英文、数字：Helvetial状态栏规范用户依赖于状态栏的重要信息，如信号，时间和电池。文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。Pt和px的换算750×1334尺寸的换算关系1pt=2px，12pt的文字算过来就是24px也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。点击添加文本点击添加文本点击添加文本点击添加文本2.1.6标准色IOS提供的色值：RGB色彩模式色值标注，如：192，192，192Android提供相关颜色的16进制色值及配色方案

在photoshop软件中提取16进制色值：如：#c0c0c0。导航栏规范导航栏是用于屏幕的快速信息。左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。请注意，如果您使用这些系统图标，您不需要为它们单独设计。搜索栏工具栏Stepper控件提示框提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字，退出一定是明显。分段控制框滑块开关布局标准控件ios1334x750pxIphone6/6s标签栏点击添加文本点击添加文本点击添加文本点击添加文本2.2Android系统界面规范点击添加文本点击添加文本点击添加文本点击添加文本1.Android界面尺寸点击添加文本点击添加文本点击添加文本点击添加文本

2.界面尺寸（1280x720px）状态栏高度：50px

导航栏高度：96px

标签栏高度：96px

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96px

内容区域高度为：1038px（1280-50-96-96=1038）3.常用尺寸Android界面默认菜单栏的高度是：72px；Android界面每个元素之间最小的间距是：12px；Android界面默认btn的高度是：60pxpx=ppi/160*dp4.常用屏幕尺寸240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）点击添加文本点击添加文本点击添加文本点击添加文本5.字体规范、大小5.X版本：思源黑体/NotoSansHan5.0以下版本：DroidSansFal