移动产品设计基础(1)
- 格式：ppt
- 大小：10.88 MB
- 文档页数：59
当前位置：文档之家 › 移动产品设计基础(1)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
移动产品设计基础(1)
移动产品特性
移动产品的种类
Windows Phone是微软发布的一款手机操作系统，它将 微软旗下的Xbox Live游戏、Zune音乐与独特的视频体验 整合至手机中。2010年10月11日晚上9点30分，微软公 司正式发布了智能手机操作系统Windows Phone。
Metro UI是一种界面展示技术，和苹果的iOS、谷歌的 Android界面最大的区别在于：后两种都是以应用为主要 呈现对象，而Metro界面强调的是信息本身，而不是冗余 的界面元素。显示下一个界面的部分元素的功能上的作 用主要是提示用户“这儿有更多信息”。同时在视觉效 果方面，这有助于形成一种身临其境的感觉。
移动产品设计基础(1)
界面布局 其他控件
IOS的控件还有很多很多，以上列举的是比较常见到的，是做每一个app都会 设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显 示器，搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样式， 不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂， 很多时候另外设计实现得还不如直接系统自带的）
移动产品设计基础(1)
尺寸与分辨率 iPhone
320px
640px
640px
1136px 960px 480px
iPhone-iPhone3GS
iPhone4-iPhone4S
iPhone5
移动产品设计基础(1)
尺寸与分辨率
iPad
iPad： 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的 iPad屏幕密度同样提升了两倍，分辨率达到2048*1536。最近新出的iPad mini 屏幕 尺寸为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套 缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）iPad mini由于和 iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。
界面布局 导航栏（navigation bar)
实际应用上： 页面标题和按钮一样可点击
移动产品设计基础(1)
界面布局
标签栏（tab bar)
320pt*49pt
规范里的话： 标签栏显示在屏幕的下方边缘 标签栏向用户提供了再应用的不同模式或不同视图间切换的能力。 标签栏显示图标和文本，每一个标签栏元素等宽地显示 标签栏被选择的标签需要有一个当前的高亮状态 无论横屏竖屏都不改变其高度 标签不超过5个时，可以在标签栏中等宽地展示 当标签超过5个时，系统会展示其中4个并展示一个“更多”的标签 可以在卡片栏上显示一个提醒标记
移动产品设计基础(1)
界面布局 工具栏（tool bar)
实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示
移动产品设计基础(1)
界面布局 点击区域
规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用 户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列 表的高度也不应小于44pt等等。
界面布局
工具栏（tool bar)
320pt*44pt 规范里的话： 工具栏显示在屏幕下方边缘 包含用于针对当前页面内容执行动作的按钮 在工具栏上相应的元素等宽的进行排列 工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt 设备手持方向从竖向变为横向时，会自动改变工具栏的高度
移动产品设计基础(1)
尺寸与分辨率 iPad
768px
1536px
768px
1024px 2048px 1024px
iPad1-iPad2
iPad3-iPad4
iPad mini
移动产品设计基础(1)
尺寸与分辨率 Android
Android设备： Android设备的屏幕相对复杂一些，因为它们有各 种尺寸和分辨率。 为了让各种分辨率的屏幕显示合适的大小以方便 用户阅读或者操作，同时又能满足Android设备多 样性的需求。于是，Android官方通过对各种屏幕 进行密度等级划分，最后分为“低密度 （LDPI）”、“中密度（MDPI）”、“高密度 （HDPI）”、“超高密度（XHDPI）”这四个规 格，并同时将“中密度”定义为基准线。这样， 在设计Android应用程序的界面时，我们就可以一 视同仁把中密度的屏幕作为基准进行设计，然后 给其它密度的屏幕提供相应的图片资源。最后通 过系统的适配性自动处理，一样使得相同的内容 在各种屏幕上可以显示比较接近的大小。 在太平洋，一般我们设计为480*800的尺寸。
移动产品设计基础(1)
尺寸与分辨率
移动产品使用特点
Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑， 统一使用点（Point）对界面元素的大小进行描述，例如： iPhone/iPod Touch界面描述 320点 x 480点 iPhone/iPad界面描述 768点 x 1024点 换算关系 普屏 1点（1pt) = 1像素 Retina屏 1点(1pt) = 2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚 地，并且统一地使用点对界面元素的大小进行描述了。
什么是iOS：苹果iOS是由苹果公司开发的手持设备操作 系统。苹果公司最早于2007年1月9日的Macworld大会 上公布这个系统，最初是设计给iPhone使用的，后来陆 续套用到iPod touch、iPad以及Apple TV等苹果产品上。 注意：写法是iPhone、iPad、iPod、iOS。
标签栏图标 ≤30pt*30pt
标签栏高 49pt
移动产品设计基础(1)
界面布局 状态栏 (status bar）
320pt*20pt 规范里的话： 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。 实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图 片的界面。
移动产品设计基础(1)
移动产品设计基础
界面布局
移动产品设计基础(1)
界面布局
iPhone
iPhone：
移动产品设计基础(1)
界面布局
iPhone
iPhone：
移动产品设计基础(1)
界面布局
iPad
iPad：
导航栏图标 ≤20pt*20pt 导航栏按钮 48pt*64pt
状态栏高20pt 导航栏高44pt
移动产品设计基础(1)
界面布局
导航栏（navigation bar)
实际应用上：
顶部状态栏下不一定就是导航栏，可 以没有，也可以是搜索栏等等。
导航栏大于44pt，页面标题左对齐
移动产品设计基础(1)
界面布局 导航栏（navigation bar)ຫໍສະໝຸດ Baidu
实际应用上： 不同的元素组合成导航栏
移动产品设计基础(1)
移动产品设计基础(1)
尺寸与分辨率
iPhone
iPhone： 第一代的iPhone屏幕尺寸为3.5英寸，分辨率为320*480，屏幕密度为165PPI，而从 iPhone4开始屏幕密度增加了两倍，分辨率达到640*960。而到现在iphone5的分辨 率则为640*1136。 在设计iPhone的应用程序界面时，设计师要以640*960的基准进行设计，然后制作 一套缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）因为所有 iPhone都使用了相同的尺寸，所以最终能在两种分辨率上显示的物理大小完全相同。 由于iphone5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容 露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面 640*1136（如app背景图，启动图等等）
移动产品设计基础(1)
移动产品特性 移动产品使用特点
移动设备的方便携带，也同时 带来了它浏览时间的碎片化。 以智能手机为例：我们通常在 短暂的时间里，完成一件任务 或者是进行一个娱乐事件，比 如：散步、坐公交、睡前、午 后闲暇、旅行的时候，开始拍 照、分享、做笔记、玩游戏、 购物，等等。在平均短短5-30 分钟的时间里，思路常常被打 断，手机常常被拿起放下，高 效和轻交互，就成为了移动设 计的特点。而对于平板电脑而 言，它的使用时间一般为在家 中较为安静，舒适的环境空间 下，使用时间也较为固定。
移动产品设计基础(1)
界面布局 设计区域
由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输 出一倍图的时候我们需要将两倍缩小成一倍图，因此，在两倍图的设计中， 必须保证每一个单独存在的个体的大小是双数像素，如148px*248px。这样 才能使在缩小到一倍图的时候不会出现13.5*17.5像素的情况（大家都知道 世界上是没有半个像素的存在的，像素不齐便会出现虚拟像素，图像会模 糊）
移动产品设计基础(1)
2020/11/24
移动产品设计基础(1)
移动产品设计基础
目录
CONTENTS
一、移动产品特性 二、尺寸与分辨率 三、界面布局 四、字体 五、图标 六、切图 七、总结
移动产品设计基础(1)
移动产品设计基础
移动产品特性
移动产品设计基础(1)
移动产品特性
移动产品的种类
常用的移动产品按尺寸分有手机和平板电脑等，按平台分有iOS,Android,Windows， Windows phone等.这里我们主要讲iPhone、iPad、Android手机app的设计基础知识。
移动产品设计基础(1)
界面布局
导航栏（navigation bar)
320pt*44pt
按钮可以是文 字或图标
规范里的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题
当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且 应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑，添加。
移动产品设计基础(1)
字体
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第五代以来的预设简体中文字型。
移动产品设计基础(1)
界面布局
标签栏（tab bar)
实际应用上： 并不是所有的首页都有标签栏。
当图标意义足够明确，可以不使用文字； 当标签意义过于抽象，可以全部只使用文字
移动产品设计基础(1)
界面布局 标签栏（tab bar)
实际应用上： 形状上不一定就是长方形，不一定所有标签都等宽。
移动产品设计基础(1)
什么是安卓：Android是一种基于Linux的自由及开放源代 码的操作系统，主要使用于便携设备，如智能手机和平 板电脑。Android操作系统最初由Andy Rubin开发，主要 支持手机。2005年由Google收购注资，并组建开放手机 联盟开发改良随后，逐渐扩展到平板电脑及其他领域上。 2008年10月第一部Android智能手机发布。
移动产品设计基础(1)
移动产品设计基础
字体
移动产品设计基础(1)
字体
iOS里的默认字体
在ios中默认字体分为三类： 第一种：STHeiti-Light.ttc 和 STHeitiMedium.ttc 代表的是中文字体 第二种：_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及 数字字体 第三种：LockClock.ttf 代表的是锁屏时 间字体
移动产品设计基础(1)
移动产品特性 手势对比
移动产品设计基础(1)
移动产品设计基础
尺寸与分辨率
移动产品设计基础(1)
尺寸与分辨率 移动产品使用特点
屏幕尺寸： 通常是指屏幕的物理尺寸，是屏幕 的对角线长度。 比如2.8英寸,3.7英 寸。
分辨率： 是指屏幕上拥有的像素的总数。通 常使用“宽度×长度” 来表达。 虽然大部分情况下分辨率都被表示 为“宽度×长度”，但分辨率并不 意味着屏幕的比例。
移动产品特性
移动产品的种类
Windows Phone是微软发布的一款手机操作系统，它将 微软旗下的Xbox Live游戏、Zune音乐与独特的视频体验 整合至手机中。2010年10月11日晚上9点30分，微软公 司正式发布了智能手机操作系统Windows Phone。
Metro UI是一种界面展示技术，和苹果的iOS、谷歌的 Android界面最大的区别在于：后两种都是以应用为主要 呈现对象，而Metro界面强调的是信息本身，而不是冗余 的界面元素。显示下一个界面的部分元素的功能上的作 用主要是提示用户“这儿有更多信息”。同时在视觉效 果方面，这有助于形成一种身临其境的感觉。
移动产品设计基础(1)
界面布局 其他控件
IOS的控件还有很多很多，以上列举的是比较常见到的，是做每一个app都会 设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显 示器，搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样式， 不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂， 很多时候另外设计实现得还不如直接系统自带的）
移动产品设计基础(1)
尺寸与分辨率 iPhone
320px
640px
640px
1136px 960px 480px
iPhone-iPhone3GS
iPhone4-iPhone4S
iPhone5
移动产品设计基础(1)
尺寸与分辨率
iPad
iPad： 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的 iPad屏幕密度同样提升了两倍，分辨率达到2048*1536。最近新出的iPad mini 屏幕 尺寸为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套 缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）iPad mini由于和 iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。
界面布局 导航栏（navigation bar)
实际应用上： 页面标题和按钮一样可点击
移动产品设计基础(1)
界面布局
标签栏（tab bar)
320pt*49pt
规范里的话： 标签栏显示在屏幕的下方边缘 标签栏向用户提供了再应用的不同模式或不同视图间切换的能力。 标签栏显示图标和文本，每一个标签栏元素等宽地显示 标签栏被选择的标签需要有一个当前的高亮状态 无论横屏竖屏都不改变其高度 标签不超过5个时，可以在标签栏中等宽地展示 当标签超过5个时，系统会展示其中4个并展示一个“更多”的标签 可以在卡片栏上显示一个提醒标记
移动产品设计基础(1)
界面布局 工具栏（tool bar)
实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示
移动产品设计基础(1)
界面布局 点击区域
规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用 户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列 表的高度也不应小于44pt等等。
界面布局
工具栏（tool bar)
320pt*44pt 规范里的话： 工具栏显示在屏幕下方边缘 包含用于针对当前页面内容执行动作的按钮 在工具栏上相应的元素等宽的进行排列 工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt 设备手持方向从竖向变为横向时，会自动改变工具栏的高度
移动产品设计基础(1)
尺寸与分辨率 iPad
768px
1536px
768px
1024px 2048px 1024px
iPad1-iPad2
iPad3-iPad4
iPad mini
移动产品设计基础(1)
尺寸与分辨率 Android
Android设备： Android设备的屏幕相对复杂一些，因为它们有各 种尺寸和分辨率。 为了让各种分辨率的屏幕显示合适的大小以方便 用户阅读或者操作，同时又能满足Android设备多 样性的需求。于是，Android官方通过对各种屏幕 进行密度等级划分，最后分为“低密度 （LDPI）”、“中密度（MDPI）”、“高密度 （HDPI）”、“超高密度（XHDPI）”这四个规 格，并同时将“中密度”定义为基准线。这样， 在设计Android应用程序的界面时，我们就可以一 视同仁把中密度的屏幕作为基准进行设计，然后 给其它密度的屏幕提供相应的图片资源。最后通 过系统的适配性自动处理，一样使得相同的内容 在各种屏幕上可以显示比较接近的大小。 在太平洋，一般我们设计为480*800的尺寸。
移动产品设计基础(1)
尺寸与分辨率
移动产品使用特点
Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑， 统一使用点（Point）对界面元素的大小进行描述，例如： iPhone/iPod Touch界面描述 320点 x 480点 iPhone/iPad界面描述 768点 x 1024点 换算关系 普屏 1点（1pt) = 1像素 Retina屏 1点(1pt) = 2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚 地，并且统一地使用点对界面元素的大小进行描述了。
什么是iOS：苹果iOS是由苹果公司开发的手持设备操作 系统。苹果公司最早于2007年1月9日的Macworld大会 上公布这个系统，最初是设计给iPhone使用的，后来陆 续套用到iPod touch、iPad以及Apple TV等苹果产品上。 注意：写法是iPhone、iPad、iPod、iOS。
标签栏图标 ≤30pt*30pt
标签栏高 49pt
移动产品设计基础(1)
界面布局 状态栏 (status bar）
320pt*20pt 规范里的话： 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。 实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图 片的界面。
移动产品设计基础(1)
移动产品设计基础
界面布局
移动产品设计基础(1)
界面布局
iPhone
iPhone：
移动产品设计基础(1)
界面布局
iPhone
iPhone：
移动产品设计基础(1)
界面布局
iPad
iPad：
导航栏图标 ≤20pt*20pt 导航栏按钮 48pt*64pt
状态栏高20pt 导航栏高44pt
移动产品设计基础(1)
界面布局
导航栏（navigation bar)
实际应用上：
顶部状态栏下不一定就是导航栏，可 以没有，也可以是搜索栏等等。
导航栏大于44pt，页面标题左对齐
移动产品设计基础(1)
界面布局 导航栏（navigation bar)ຫໍສະໝຸດ Baidu
实际应用上： 不同的元素组合成导航栏
移动产品设计基础(1)
移动产品设计基础(1)
尺寸与分辨率
iPhone
iPhone： 第一代的iPhone屏幕尺寸为3.5英寸，分辨率为320*480，屏幕密度为165PPI，而从 iPhone4开始屏幕密度增加了两倍，分辨率达到640*960。而到现在iphone5的分辨 率则为640*1136。 在设计iPhone的应用程序界面时，设计师要以640*960的基准进行设计，然后制作 一套缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）因为所有 iPhone都使用了相同的尺寸，所以最终能在两种分辨率上显示的物理大小完全相同。 由于iphone5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容 露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面 640*1136（如app背景图，启动图等等）
移动产品设计基础(1)
移动产品特性 移动产品使用特点
移动设备的方便携带，也同时 带来了它浏览时间的碎片化。 以智能手机为例：我们通常在 短暂的时间里，完成一件任务 或者是进行一个娱乐事件，比 如：散步、坐公交、睡前、午 后闲暇、旅行的时候，开始拍 照、分享、做笔记、玩游戏、 购物，等等。在平均短短5-30 分钟的时间里，思路常常被打 断，手机常常被拿起放下，高 效和轻交互，就成为了移动设 计的特点。而对于平板电脑而 言，它的使用时间一般为在家 中较为安静，舒适的环境空间 下，使用时间也较为固定。
移动产品设计基础(1)
界面布局 设计区域
由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输 出一倍图的时候我们需要将两倍缩小成一倍图，因此，在两倍图的设计中， 必须保证每一个单独存在的个体的大小是双数像素，如148px*248px。这样 才能使在缩小到一倍图的时候不会出现13.5*17.5像素的情况（大家都知道 世界上是没有半个像素的存在的，像素不齐便会出现虚拟像素，图像会模 糊）
移动产品设计基础(1)
2020/11/24
移动产品设计基础(1)
移动产品设计基础
目录
CONTENTS
一、移动产品特性 二、尺寸与分辨率 三、界面布局 四、字体 五、图标 六、切图 七、总结
移动产品设计基础(1)
移动产品设计基础
移动产品特性
移动产品设计基础(1)
移动产品特性
移动产品的种类
常用的移动产品按尺寸分有手机和平板电脑等，按平台分有iOS,Android,Windows， Windows phone等.这里我们主要讲iPhone、iPad、Android手机app的设计基础知识。
移动产品设计基础(1)
界面布局
导航栏（navigation bar)
320pt*44pt
按钮可以是文 字或图标
规范里的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题
当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且 应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑，添加。
移动产品设计基础(1)
字体
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第五代以来的预设简体中文字型。
移动产品设计基础(1)
界面布局
标签栏（tab bar)
实际应用上： 并不是所有的首页都有标签栏。
当图标意义足够明确，可以不使用文字； 当标签意义过于抽象，可以全部只使用文字
移动产品设计基础(1)
界面布局 标签栏（tab bar)
实际应用上： 形状上不一定就是长方形，不一定所有标签都等宽。
移动产品设计基础(1)
什么是安卓：Android是一种基于Linux的自由及开放源代 码的操作系统，主要使用于便携设备，如智能手机和平 板电脑。Android操作系统最初由Andy Rubin开发，主要 支持手机。2005年由Google收购注资，并组建开放手机 联盟开发改良随后，逐渐扩展到平板电脑及其他领域上。 2008年10月第一部Android智能手机发布。
移动产品设计基础(1)
移动产品设计基础
字体
移动产品设计基础(1)
字体
iOS里的默认字体
在ios中默认字体分为三类： 第一种：STHeiti-Light.ttc 和 STHeitiMedium.ttc 代表的是中文字体 第二种：_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及 数字字体 第三种：LockClock.ttf 代表的是锁屏时 间字体
移动产品设计基础(1)
移动产品特性 手势对比
移动产品设计基础(1)
移动产品设计基础
尺寸与分辨率
移动产品设计基础(1)
尺寸与分辨率 移动产品使用特点
屏幕尺寸： 通常是指屏幕的物理尺寸，是屏幕 的对角线长度。 比如2.8英寸,3.7英 寸。
分辨率： 是指屏幕上拥有的像素的总数。通 常使用“宽度×长度” 来表达。 虽然大部分情况下分辨率都被表示 为“宽度×长度”，但分辨率并不 意味着屏幕的比例。