移动产品设计基础教材(PPT 59页)
合集下载
中国移动通信新产品介绍PPT模板
Nhomakorabea输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
2
请输入你的题目
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请输入你的题目
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。请在此处添 加详细描述文本，尽量与 标题文本语言风格相符合， 语言描述尽量简洁生动。 请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。 请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请输入你的题目
请在此处添加详细描述文本，尽量与标题文本 语言风格相符合，语言描述尽量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
2
请输入你的题目
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
请输入你的题目
请输入你的题目
请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。请在此处添 加详细描述文本，尽量与 标题文本语言风格相符合， 语言描述尽量简洁生动。 请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。 请在此处添加详细描述文 本，尽量与标题文本语言 风格相符合，语言描述尽 量简洁生动。
移动产品设计
6、PCB:
TEST PORT
BUZZER
LCD与金属外框一体，显得很结实。
7、ANT:
ANT
TEST PORT COVER
这是一款内置天线的手机，上图天线为一块薄铜片与塑 料壳热融在一起，再通过弹片与PCB连接。
二、人与物的关系
1、功能
手机随着通讯科技的发展进入人们的生活，如今几 乎已经成为一件必不可少的个人物品，这归根结底是 由现代人对远距离移动通讯、以及娱乐等工作、生活 需求所决定的。 已经出现的手机的功能有：语音通话、文字信息、 健康管理、游戏、网络、电视、拍照、录音等。
5、KEY PAD:
这款手机的KEY PAD最据特色，字键同时也作为方向键（2、4 、6、8）大大增加了可操作性。KEY PAD与 METAL DOME、PCB 板成为一体，箭头所指10个PIN再通过导电橡胶（是否为导电 橡胶还值得研究）与主PCB板上相对应的PIN相连接。
这一块板安装在KEY PAD 与PCB板之间。红色箭头所指就是上 面提到的导电橡胶。蓝色箭头所指为MIC,不过VIBRATER也与 它集成在一起。
２、外形 手机的外形根据结构的形式可以分为直板机、 折叠机两大类。 外形的差异使之成为不同细分消费者群体选 择手机的关键性因素。 决定手机外形的因素有：机型、颜色、天线、 屏幕、按键等。
３、人机 手机是一种典型的个人物品，又具有较高的 技术含量，其使用操作的人机效能可以分为软 件和硬件两个方面。 硬件的人机效能与手机的尺寸、形状、屏幕 的大小、按键大小排布、响铃性质、携带方式 有关。 软件的人机效能主要决定于手机的菜单设计， 图标的识别性、命令的归类、输入法的设计等。
4、 Dome 按下去后，它下面的电路导通，表示该按键被按下。 材料：有两种，Mylar dome和metal dome，前者是聚 酯薄膜，后者是金属薄片。Mylar dome 便宜一些。 连接：直接用粘胶粘在PCB上。
移动端UI界面设计介绍课件
设计工具
Sketch：矢量图 形设计工具，适用 于iOS和Android 平台
Adobe XD：矢量 图形设计工具，适 用于iOS和 Android平台
Figma：矢量图形 设计工具，适用于 iOS和Android平 台
InVision Studio： 矢量图形设计工具， 适用于iOS和 Android平台
03
提高开发效率：合理的UI设计可以降低开发 成本和维护成本
04
适应多种设备：移动端UI设计需要适应各种 屏幕尺寸和分辨率，满足不同设备的需求
移动端UI设计的基本原则
01
简洁明了：界面设计应简 洁明了，让用户能够快速 找到所需功能。
02
易于操作：界面设计应易
于操作，让用户能够轻松
完成各种任务。
03
响应迅速：界面设计应响 应迅速，让用户能够快速 得到反馈。
04
保持一致性：界面设计应
保持一致性，让用户能够
快速熟悉并适应界面。
移动端UI设计的发展趋势
1 扁平化设计：简洁明了，易于理解 2 响应式设计：适应各种屏幕尺寸和设备 3 手势操作：更直观、自然的交互方式 4 动态效果：增强用户体验，提高用户参与度 5 人工智能与机器学习：提高个性化和智能化水平 6 隐私与安全：保护用户隐私和数据安全，提高用户信任度
- 设计要点：个性 化推荐算法、用户 界面设计、交互设
计
- 设计要点：导航设 计、搜索功能、商品
展示
案例四：美团外卖界 面设计
案例三：网易云音乐 界面设计
- 特点：个性化推荐， 注重用户体验
- 特点：快速下单， 方便快捷
- 设计要点：菜单设计、 下单流程、支付方式设计移动端UI来自面设 计优化用户体验优化
手持移动设备UI设计第一节(3次课)精品PPT课件
手持移动设备UI设计
第一节 关于UI设计
一、什么是UI
通过什么操作汽车？
通过什么操作ATM机？
通过什么控制电视机？
通过什么控制数控车床？
通过什么操作Photoshop程序？
通过什么操作手机？
UI即User Interface(用户界面)的简称。广义 上来讲，UI界面是人与机器进行交互的操作 方式，即用户与机器相互传递信息的媒介， 其中包括信息的输入和输出。
GUI 是一种结合美学、计算机科学、心理学、 行为学、人机工程学以及市场的综合性学科， 强调人—机—环境三者作为一个系统进行总 体设计。
思考常见的GUI界面。
• UI的本意是用户界面，是英文User 和 interface的缩写。从字面上看是 用户与界面2个组成部分，但实际上 还包括用户与界面之间的交互关系， 所以这样可分为3个方向，他们分别 是：
2、计算机技术
UI界面的互动必须要通过计算机技术来实现， 例如用FLASH做的互动程序，必须要用AS语 言才能够实现。
3、人机工程学
人机工程学就是应用人体测量学、人体力学、 劳动生理学、劳动心理学等学科的研究方法， 对人体结构特征和机能特征进行研究，提供人 体各部分的尺寸、重量、体表面积以及人体各 部分在活动时的相互关系和可及范围等人体结 构特征参数；分析人的视觉、听觉、触觉以及 肤觉等感觉器官的机能特性；探讨人在工作中 影响心理状态的因素以及心理因素对工作效率 的影响等。
4、按钮
菜单中，利用程度高的命令用图形表示出来，配置在 应用程序中，称为按钮。
应用程序中的按钮，通常可以代替菜单。一些使用程 度高的命令，不必通过菜单一层层翻动才能调出，极 大提高了工作效率。但是，各种用户使用的命令频率 是不一样的，因此这种配置一般都是可以由用户自定 义编辑。
第一节 关于UI设计
一、什么是UI
通过什么操作汽车？
通过什么操作ATM机？
通过什么控制电视机？
通过什么控制数控车床？
通过什么操作Photoshop程序？
通过什么操作手机？
UI即User Interface(用户界面)的简称。广义 上来讲，UI界面是人与机器进行交互的操作 方式，即用户与机器相互传递信息的媒介， 其中包括信息的输入和输出。
GUI 是一种结合美学、计算机科学、心理学、 行为学、人机工程学以及市场的综合性学科， 强调人—机—环境三者作为一个系统进行总 体设计。
思考常见的GUI界面。
• UI的本意是用户界面，是英文User 和 interface的缩写。从字面上看是 用户与界面2个组成部分，但实际上 还包括用户与界面之间的交互关系， 所以这样可分为3个方向，他们分别 是：
2、计算机技术
UI界面的互动必须要通过计算机技术来实现， 例如用FLASH做的互动程序，必须要用AS语 言才能够实现。
3、人机工程学
人机工程学就是应用人体测量学、人体力学、 劳动生理学、劳动心理学等学科的研究方法， 对人体结构特征和机能特征进行研究，提供人 体各部分的尺寸、重量、体表面积以及人体各 部分在活动时的相互关系和可及范围等人体结 构特征参数；分析人的视觉、听觉、触觉以及 肤觉等感觉器官的机能特性；探讨人在工作中 影响心理状态的因素以及心理因素对工作效率 的影响等。
4、按钮
菜单中，利用程度高的命令用图形表示出来，配置在 应用程序中，称为按钮。
应用程序中的按钮，通常可以代替菜单。一些使用程 度高的命令，不必通过菜单一层层翻动才能调出，极 大提高了工作效率。但是，各种用户使用的命令频率 是不一样的，因此这种配置一般都是可以由用户自定 义编辑。
产品设计基础ppt课件
精选课件ppt
2
2.1.1 生产者
• 这里的生产者指生产流程中各种角色的“人”。人在生产过程中工作的 效率和质量，将关系到产品的成败，而设计则是影响质量和效率的前 提条件，如在设计时充分考虑生产线和装配流程，以及工艺的特点和 生产管理方式，最大限度地与之相适应。
• 同时，还要考虑人在这些过程中进行操作的特点，尽可能简化装配操 作，优化装配方法，降低组装难度等。
相同或相似的单体，大小变化、位置变化、数量变化、方向上的变化。可 利用构成骨骼式排列法则，采用渐变式排列、发射式排列和特异式排列等 形式综合运用这三种变化。
通过对同一立方体的不同积聚方式产生出不同的立体形态
精选课件ppt
60
积聚
精选课件ppt
61
积聚
精选课件ppt
62
合并
4. 合并
由不同单体形共同参与，通过相切、相交、叠加等创造新的形态。
—－—－ = —－—－— = —－—－——－=0.618
总长
后悬长度
车身下半部
轿车： 轴距﹕总长=1﹕1.618~精选课件ppt Nhomakorabea50
分割
光滑面积
粗糙面积
1
材料质感的面积比例产生和谐感：—－—－— = —－—－——－= —－－
粗糙面积 光滑+粗糙面积 1.618
精选课件ppt
51
分割
M600
精选课件ppt
原则：和谐，有运动感，趋势感明显。 原理：疏密、错落有致、形之间衔接流畅。 方法：渐变、积聚。
精选课件ppt
28
精选课件ppt
29
精选课件ppt
30
第一部分 小结
明确： • 造型以满足功能为前提 • 造型要符合形式美法则
01 移动UI设计基础
1440×2960px
华为Mate10系列 三星Galaxy S7、S6
1440×2560px
OPPO R15、VIVO X21 iPhone X
iPhone 8/7/6 Plus iPhone 8/7/6
1080×2280px 1125×2436px 1080×1920px 750×1334px
屏幕密度 568ppi/532ppi
优势 1. 采用无损压缩，可以保证图像的品质 2. 支持256种真彩色 3. 支持透明存储，失真小，无锯齿 4. 体积教小，被广泛的应用于网络传输
缺点
1. 不支持动画
2. 在存储无透明区域，颜色极其复杂的图像时，文件体积 会变得很大，不如JPEG
3. IE 6不支持PNG的透明属性
常见的图片格式
JPG
UI设计概论
什么是APP
APP即手机软件，也就是安装在手 机上的软件，完善原始系统的不足与个 性化。
不同系统下载的APP其文件格式也 各不相同。iOS系统和Android系统是 目前主流的两大手机APP平台。
UI设计概论
移动APP UI与平面UI的区别
移动UI的平台主要是手机的APP 客户端上。而平面UI的范围则非常广 泛，包括了绝大部分UI的领域。手机 UI的独特性，比如尺寸要求、控件和 组件类型是的很多平面设计师要重新 调整审美基础。
优势 1. 支持高级别无损耗压缩 2. 支持Alpha通道透明度 3. 支持伽玛校正 4. 支持交错 5. Web浏览器支持
缺点 1. 较老的程序或浏览器不支持 2. PNG提供的压缩量较小 3. 对多图像文件或动画文件不提供支持
常见的图片格式
Gif
图形交换格式简称GIF，是CompuServe公司在 1987年开发的图像 文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损 压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几 乎所有相关软件都支持，公共领域有大量的软件在使用GIF图像文件。
移动产品设计基础
尺寸与分辨率
移动产品使用特点：
Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的 迷惑，统一使用点（point）对界面元素的大小进行描述，例如： iPhone、iPod Touch界面描述320点x480点 iPhone、iPad Touch界面描述768点x1024点 换算管理普屏1点（1pt）=1像素 Retina屏1点（1pt）=2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可 以清楚地，并且统一地使用点对界面元素的大小进行描述了
图标
导航栏和工具栏的标准按钮图标
图标
标签栏的标准按钮图标
App icon 设计尺寸 iPhone app 图标
图标
iPad app 图标
我们一般设计最大尺寸 的1024ox*2014px再缩 小为各个尺寸的图标
图标
图标
图标
输入：iOS会为图标自动生成圆角高光带投影（也可设置不生成高 光），所以提交的时候提交直角图标即可，直接输PNG：1024px （不要使用alpha透明度）
动，就成为了移动设计的特点。而对于平
板电脑而言，它的使用时间一般为在家中 较为安静，舒适的环境空间下使用，使用 时间也较为固定。
移动产品特性
手势对比
尺寸与分辨率
移动产品使用特点：
屏幕尺寸：
通常是指屏幕的物流尺寸，是屏幕
的对角线长度。比如2.8英寸。3.7 英寸。
分辨率：
是指屏幕上拥有的像素的总数。通 常使用“宽带x长度”来表达。虽然 大部分情况下分辨率都表示为“宽 度x长度”，但分辨率并不意味着屏 幕的比例。
什么是安卓:Android是一种基于Linux 的自由及开放源代码 的操作系统，主要使用于便携设备，如智能手机和平坝电 脑。Android操作系统最初由 Andy Rubin开放，主要支持 手机。2005年由google收购注资，并组建开放手机联盟开 发改良随后，逐渐扩展到平板电脑及其领域上。2008年10 月第一部Android智能手机发布
移动界面交互设计PPT课件
将状态栏和导航栏合在了一起
第3页/共59页
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
第13页/共59页
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iPhone的APP界面一般由四个元素组成，分别是： 状态栏、导航栏、主菜单栏、内容区域
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的
第16页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
WEB端界面元素的布局 F式布局
第17页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
WEB端界面元素的布局 F式布局眼动热点图
热区（途中红色、黄色、橙 色部分）代表用户注意力最 集中的地方。
第18页/共59页
在右手持机的状况下，有效触控区域位于屏幕的左下方。
第24页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
移动设备小屏幕的准确率问题、热区和死角
底部原则：移动系统或应用中一些重要的工具栏或导航结 构通常被放置在界面底部.
底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏 幕上进行操作的时候，手指下方的内容部分将会被遮挡住； 只有将交互控制元素放在内容区域的下方，才能让这种负面 效应降至最低。
第3页/共59页
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
第13页/共59页
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iPhone的APP界面一般由四个元素组成，分别是： 状态栏、导航栏、主菜单栏、内容区域
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的
第16页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
WEB端界面元素的布局 F式布局
第17页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
WEB端界面元素的布局 F式布局眼动热点图
热区（途中红色、黄色、橙 色部分）代表用户注意力最 集中的地方。
第18页/共59页
在右手持机的状况下，有效触控区域位于屏幕的左下方。
第24页/共59页
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
移动设备小屏幕的准确率问题、热区和死角
底部原则：移动系统或应用中一些重要的工具栏或导航结 构通常被放置在界面底部.
底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏 幕上进行操作的时候，手指下方的内容部分将会被遮挡住； 只有将交互控制元素放在内容区域的下方，才能让这种负面 效应降至最低。
移动UI设计基础入门课件PPT模板
03
第3章第三章移动端设计案例演示
第3章第三章移动 端设计案例演示
3聆听
202x
移动ui设计基础入门
演讲人
2 0 2 x - 11 - 11
目录
01. 第1章课程介绍 02. 第2章第二章移动端设计布局入门 03. 第3章第三章移动端设计案例演示
01
第1章课程介绍
第1章课程介绍
1-1移动端设计必学 1-2移动端设计壁咚的基础单位 1-3android单位转换 1-2移动端设计壁咚的基础单位 1-3Android单位转换
02
第2章第二章移动端设计布局入门
第2章第二章移动 端设计布局入门
2-1iphone分辨率与单位转换 2-2android手机应用结构 2-3android基准布局入门 2-4android文本排版入门 2-2Android手机应用结构 2-3Android基准布局入门 2-4Android文本排版入门
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
界面布局
工具栏（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