界面布局
工具栏（tool bar)
实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示
界面布局
点击区域
规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用 户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列 表的高度也不应小于44pt等等。
字体
iOS里的中文字体
苹果默认的中文字体是Heiti SC（黑体-简，黑体-简的英文名称为Heiti SC。 Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本 4.0后改名为iOS）及iPod nano第五代以来的预设简体中文字型。
字体
字体 实际应用
中文应用在界面上面 时，一般我们用方正 黑体简体做设计。而 且不能带有任何的设 计效果和样式（只能 是纯色，可以带有阴 影，由技术来实现）
但也有例外，例如是 写在图片上的文字； 一些比较特殊的不会 更改的词句这时可以 用其他字体和使用样 式，由切图来实现。
字体
我们在设计时，重要 的视觉部分可以做文 字的样式（前提是这 部分不会改变）例如 首页的标题，底部标 签栏的文字（它们一 般都是固定不会更改 的）改变的文字切图 实现。但二级页面及 之后的标题就会由技 术来实现了。
尺寸与分辨率
移动产品使用特点
Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑， 统一使用点（Point）对界面元素的大小进行描述，例如： iPhone/iPod Touch界面描述 320点 x 480点 iPhone/iPad界面描述 768点 x 1024点 换算关系 普屏 1点（1pt) = 1像素 Retina屏 1点(1pt) = 2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚 地，并且统一地使用点对界面元素的大小进行描述了。
界面布局
标签栏（tab bar)
实际应用上： 并不是所有的首页都有标签栏。
当图标意义足够明确，可以不使用文字； 当标签意义过于抽象，可以全部只使用文字
界面布局
标签栏（tab bar)
实际应用上： 形状上不一定就是长方形，不一定所有标签都等宽。
界面布局
工具栏（tool bar)
320pt*44pt 规范里的话： 工具栏显示在屏幕下方边缘 包含用于针对当前页面内容执行动作的按钮 在工具栏上相应的元素等宽的进行排列 工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt 设备手持方向从竖向变为横向时，会自动改变工具栏的高度
界面布局
导航栏（navigation bar)
实际应用上：
顶部状态栏下不一定就是导航栏，可 以没有，也可以是搜索栏等等。
导航栏大于44pt，页面标题左对齐
界面布局
导航栏（navigation bar)
实际应用上： 不同的元素组合成导航栏
界面布局Байду номын сангаас
导航栏（navigation bar)
实际应用上： 页面标题和按钮一样可点击
状态栏高20pt 导航栏高44pt
标签栏图标 ≤30pt*30pt
标签栏高 49pt
界面布局
状态栏 (status bar）
320pt*20pt 规范里的话： 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。 实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图 片的界面。
界面布局
其他控件
IOS的控件还有很多很多，以上列举的是比较常见到的，是做每一个app都会 设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显 示器，搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样式， 不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂， 很多时候另外设计实现得还不如直接系统自带的）
移动产品特性 移动产品使用特点
移动设备的方便携带，也同时 带来了它浏览时间的碎片化。 以智能手机为例：我们通常在 短暂的时间里，完成一件任务 或者是进行一个娱乐事件，比 如：散步、坐公交、睡前、午 后闲暇、旅行的时候，开始拍 照、分享、做笔记、玩游戏、 购物，等等。在平均短短5-30 分钟的时间里，思路常常被打 断，手机常常被拿起放下，高 效和轻交互，就成为了移动设 计的特点。而对于平板电脑而 言，它的使用时间一般为在家 中较为安静，舒适的环境空间 下，使用时间也较为固定。
移动产品设计基础
移动产品设计基础
目录
CONTENTS
一、移动产品特性 二、尺寸与分辨率 三、界面布局 四、字体 五、图标 六、切图 七、总结
移动产品设计基础
移动产品特性
移动产品特性
移动产品的种类
常用的移动产品按尺寸分有手机和平板电脑等，按平台分有iOS,Android,Windows， Windows phone等.这里我们主要讲iPhone、iPad、Android手机app的设计基础知识。
尺寸与分辨率 iPhone
320px
640px
640px
1136px 960px 480px
iPhone-iPhone3GS
iPhone4-iPhone4S
iPhone5
尺寸与分辨率
iPad
iPad： 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的 iPad屏幕密度同样提升了两倍，分辨率达到2048*1536。最近新出的iPad mini 屏幕 尺寸为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套 缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）iPad mini由于和 iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。
尺寸与分辨率
iPhone
iPhone： 第一代的iPhone屏幕尺寸为3.5英寸，分辨率为320*480，屏幕密度为165PPI，而从 iPhone4开始屏幕密度增加了两倍，分辨率达到640*960。而到现在iphone5的分辨 率则为640*1136。 在设计iPhone的应用程序界面时，设计师要以640*960的基准进行设计，然后制作 一套缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）因为所有 iPhone都使用了相同的尺寸，所以最终能在两种分辨率上显示的物理大小完全相同。 由于iphone5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容 露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面 640*1136（如app背景图，启动图等等）
尺寸与分辨率 iPad
768px
1536px
768px
1024px 2048px 1024px
iPad1-iPad2
iPad3-iPad4
iPad mini
尺寸与分辨率 Android
Android设备： Android设备的屏幕相对复杂一些，因为它们有各 种尺寸和分辨率。
为了让各种分辨率的屏幕显示合适的大小以方便 用户阅读或者操作，同时又能满足Android设备多 样性的需求。于是，Android官方通过对各种屏幕 进行密度等级划分，最后分为“低密度 （LDPI）”、“中密度（MDPI）”、“高密度 （HDPI）”、“超高密度（XHDPI）”这四个规 格，并同时将“中密度”定义为基准线。这样， 在设计Android应用程序的界面时，我们就可以一 视同仁把中密度的屏幕作为基准进行设计，然后
界面布局
设计区域
由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输 出一倍图的时候我们需要将两倍缩小成一倍图，因此，在两倍图的设计中， 必须保证每一个单独存在的个体的大小是双数像素，如148px*248px。这样 才能使在缩小到一倍图的时候不会出现13.5*17.5像素的情况（大家都知道 世界上是没有半个像素的存在的，像素不齐便会出现虚拟像素，图像会模 糊）
界面布局
导航栏（navigation bar)
320pt*44pt
按钮可以是文 字或图标
规范里的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题
当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且 应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑，添加。
当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。
iOS里面的中文字体是比较少的，看上去都差不多，总结起来就是黑体，粗 黑体和斜黑体三种。
iOS里的英文/数字字体
相对中文而言，iOS里的英文和数字的字体样式就比较多了，在设计的时候可以 挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系统能够 通用。
什么是iOS：苹果iOS是由苹果公司开发的手持设备操作 系统。苹果公司最早于2007年1月9日的Macworld大会 上公布这个系统，最初是设计给iPhone使用的，后来陆 续套用到iPod touch、iPad以及Apple TV等苹果产品上。 注意：写法是iPhone、iPad、iPod、iOS。
给其它密度的屏幕提供相应的图片资源。最后通
过系统的适配性自动处理，一样使得相同的内容 在各种屏幕上可以显示比较接近的大小。
在太平洋，一般我们设计为480*800的尺寸。
移动产品设计基础
界面布局
界面布局
iPhone