移动产品设计基础

尺寸与分辨率
移动产品使用特点：
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智能手机发布
移动产品特性
移动产品使用特点：
移动设备的方便携带，也同时带来它浏览 时间的碎片化。以智能手机为例：我们通 常在短暂的时间里，完成一件任务或者是 进行一个娱乐事件，比如：散步、坐公交、 睡前、午后闲暇、旅行的时候，开始拍照、 分享、做笔记、玩游戏、购物，等等。在 平均短短5-30分钟的时间里，思路常常被 打断，手机常常被拿起放下，高效和轻互
切图
一般相同关系和曾经排列的图标或元素，不管他们各自的尺寸是 多少，都切成相同的切片（alt拖动即可复制单签切片）
Windows Phone是微软发布的一款手机操作系 统，它将微软旗下的Xbox Live游戏、Zune音乐
与独特的视频体验整合至手机中，2010年10月
11日晚9点30分，微软公布正式发不了智能手 机操作系统Windows Phone.
Metro UI 是一种界面展示技术，和苹果的iOS、 谷歌的Android界面最大的区别在于：后两种都 是以应用为主要呈现对象，而Metro界面强调的 信息本身，而不是冗余的界面元素。显示下一 个界面的部分元素的功能上的作用主要是提示 用户“这儿有更多信息”。同时在视觉效果方 面，这有助于形成一种身临其境的感觉
2018*1536。最近新出的iPad mini屏幕尺寸
为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以 2048*1536的基准进行设计，然后制作一套
缩小2倍的图片资源（在为缩的我们叫2倍图，
缩了的叫一倍图）iPad mini由于和iPad比例 一样，不需要另外设计，直接可以使用相应 的一倍图适配到设备中。
切图
图形用户界面中的图形有两种实现方式，一种是用代码画出来，另一种 则是使用图片。在直接使用之前，有一个psd到png 的切图过程。 1.切 方法1：直接在psd上切图。
方法2：新建透明图层，拖进该部件。
2.输出 切好后选择： “储存为web和设备所用格式” 图片格式PNG24,保持透明度
切图
在缩小为一倍图进行切图的时候，如果该元素使用的像素不是双 数，或者坐标不在双数坐标上，就会出现虚拟像素，此时需要进 一步调整。
移动产品设计基础
一：移动产品特性 二：尺寸与分辨率 三：界面布局
目录
四：字体 五：图标 六：切图 七：总结
移动产品的种类
常用的移动产品按尺寸分有手机和平板等，按平台分有 ios,Android,Windows,Windows phone 等，这里我们主要讲 iphone、ipad、Android手机app的设计基础知识。
界面布局
iPhone
界面布局
iPhone
界面布局
iPad
界面布局
规范的话： 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。 实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示 图片的界面。
界面布局
导航栏（navigation bat)
在iOS中里的中文字体
字体
苹果默认的中文字体是Heitis SC（黑体-简，黑体-简的英文名称为Heiti SC） heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS
高密度（XHDPI）”这四个规格，并同时将“中密度”
定义为基准线。这样在设计Android应用程序的界面时， 我们就可以一视同仁把中密度的屏幕作为基准进行设 计，然后给其他密度的屏幕提供相应的图片资源，最
后通过系统的适配性自动处理，一样使得相同的内容
在各种屏幕上可以显示比较接近的大小。 在太平洋，一般我们设计为480*800的尺寸。
什么是ios:苹果ios是由苹果公司开发的手持设备操作系统。 苹果公司最早于2007年1月9日的Macworld 大会上公布这
个系统，最初是设计给iphone使用的，后来陆续套用到
iPod touch、iPad以及、Apple TV等苹果产品上 注意：写法是iPhone 、iPad、iPod、iOS
界面布局
由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输出 一倍图的时候我们需要将2倍图缩小成一倍图，因此在2倍图的设计中，必须 保证每个单独存在的个体大小是双数像素，如148px*248px。这样才能使用在 缩小一倍图的时候不会出校13.5*17.5像素的情况（大家都知道世界上市没有 半个小苏存在的，像素不齐便会出现虚框像素，图像会模糊）
在iOS中里的中文字体
字体
实际应用
字体
中文应用在界面上面时，一般 我们用方正黑体简体做设计。 而且不能够带有任何的设计效 果和样式（智能是纯色，可以 带有阴影，由技术来实现） 但也有例外，例如是写在图片 上面的文字；一些比较特殊的 不会更改的词句这时可以用其 他字体和使用样式，由切图来
实现。
实际应用
界面布局
导航栏（navigation bar)
实际应用上：
顶部状态栏不一定就是导航栏，可 以没有，也可以是搜索栏等等。
导航栏大于44pt,页面标题左对齐
界面布局
导航栏（navigation bar)
实际应用上：
不同元素组合成导航栏
界面布局
导航栏（navigation bar)
实际应用上： 页面标题和按钮一样可点击
iOS 里默认字体
字体
在iOS中默认字体分为三类： 第一种：STHeiti-Light.ttc 和STHreitiMedium.ttc 代表的是中文字体 第三种：_H_helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及 数字字体
第三种：LockClock.ttf代表的是锁屏时间字体
字体
我们在设计时，重要的视觉部分可 以做文字的样式（前提是这部分不 会改变）例如首页的标题，底部标 签的文字（他们一般都是固定不会 更改的）改变的文字切图实现。但 二级页面及之后的标题就会由技术 来实现了。 个人经验一般字体最小不小于24px， 标题等可到38px-44px。
图标
导航栏和工具栏的标准按钮图标
界面布局
导航栏（tab bar)
规范里的话： 标签栏显示在屏幕的下方边缘
标签栏向用户提供了再应用的不同模式或不同视图间切换的能力
标签栏显示图标和文本，每个标签栏元素等宽地显示 无论横屏竖屏都不改变其高度 标签栏不超过5个时，可以再标签栏中等宽地展示 当标签栏超过5个时，系统会展示其中4个并展示一个“更多”的标签 可以再卡片栏山显示一个提醒标记
设计区域
界面布局
iOS的控件还有很多很多，以上列举的是比较常见到的，是做每个app度显示栏， 搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样式，不需要 另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂，很多时 候另外设计实现还不如直接系统自带的）
界面布局
标签栏（tab bar)
当图标意义足够明确，可以不使用文字
规范里的话：
当标签意思过于抽象，可以全部只使用文字
并不是所有的首页都有标签栏
界面布局
标签栏（tab bar)
实际应用上： 形状不一定就是长方形，不一定所 有标签都等宽。
界面布局
导航栏（tool bar)
规范里的话： 工具栏显示在屏幕下方边缘
尺寸与分辨率
iPhone
第一代的iPhone屏幕尺寸305英寸，分辨率为320x480,屏幕 密度为165PPI，而从iPhone4开始屏幕密码增加了两倍，分 辨率达到640x960。而现在iPhone5的分辨率则为640x1136。 在设计iPhone的应用程序界面时，设计师要以640x960的基 准进行设计，然后制作一套缩小2倍的图片资源（未缩的我 们叫2倍图，缩了得叫一倍图）以为所有iPhone都使用了相
同尺寸，所以最终能在2种分辨率上显示的物理大小完全相
同。 由于iPhone5只是高度发生变化，在适配时一般保持设计控 件大小不变，只是内容露出增多。但对于一些满屏设计的界
面则需要考虑是否需要另外设计一份页面640x1136（如app
背景图，启动图等等）
尺寸与分辨率
尺寸与分辨率
iPad 第一代的iPad屏幕尺寸为9.7英寸，分辨率为 1024*768，屏幕密度为132PPI。全新的iPad 屏幕密度同样提升了2倍，分辨率达到了
包含用于针对当前页面内容执行动作组的按钮
在工具栏上相应的元素等宽的进行排列 工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt 设备手持方向从竖向变为横向时，会自动改变工具栏的高度
界面布局
导航栏（tool bar)
实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示
点击区域
尺寸与分辨率
尺寸与分辨率
Android设备： Android设备的屏幕相对复杂一些，因为它们有各种尺 寸和分辨率。为了让跟中分辨率的屏幕显示合适的大 小以便用户阅读或者操作，同时又能满足Android设备 多样性的需求，由于，Android官方通过对各种屏幕进 行密度等级划分，最后分为“低密度（LDPI）”、 “中密度（MDPI）”、“高密度（HDPI）”、“超
3.0（版本4.0后改名为iOS）及iPod nano 第五代依赖的预设简体中文字型。
当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。
在iOS中里的中文字体
相对中文而已，iOS里的英文和数字的字体样式就比较多了，在设计的时候
可以挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系 统能够通用。。
规范的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当 前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的 标题 当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并 且应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题 右侧包含第二个按钮，如编辑‘添加。
界面布局
规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用户点击，
因此在设计规范里，任何可点击的不见，大小都不应该小于44pxt*44pt
因此，按钮不应小于44pt*44pt;app的banner广告图高度也不应小于44pt;列表的 图高度也不应小于44pt等等
设计区域