移动产品设计基础

1、移动产品设计基础目录一：移动产品特性二：尺寸与分辨率三：界面布局四：字体五：图标六：切图七：总结移动产品的种类 常用的移动产品按尺寸分有手机和平板等，按平台分有ios,Android,Windows,Windows phone 等，这里我们主要讲iphone、ipad、Android手机app的设计基础知识。 什么是ios:苹果ios是由苹果公司开发的手持设备操作系统。苹果公司最早于2007年1月9日的Macworld 大会上公布这个系统，最初是设计给iphone使用的，后来陆续套用到iPod touch、iPad以及、Apple TV等苹果产品上 注意：写法是iPhone 、iPad、iPo

2、d、iOS 什么是安卓:Android是一种基于Linux 的自由及开放源代码的操作系统，主要使用于便携设备，如智能手机和平坝电脑。Android操作系统最初由 Andy Rubin开放，主要支持手机。2005年由google收购注资，并组建开放手机联盟开发改良随后，逐渐扩展到平板电脑及其领域上。2008年10月第一部Android智能手机发布 Windows Phone是微软发布的一款手机操作系统，它将微软旗下的Xbox Live游戏、Zune音乐与独特的视频体验整合至手机中，2010年10月11日晚9点30分，微软公布正式发不了智能手机操作系统Windows Phone. Metro UI

3、 是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉移动产品特性移动产品使用特点： 移动设备的方便携带，也同时带来它浏览时间的碎片化。以智能手机为例：我们通常在短暂的时间里，完成一件任务或者是进行一个娱乐事件，比如：散步、坐公交、睡前、午后闲暇、旅行的时候，开始拍照、分享、做笔记、玩游戏、购物，等等。在平均短短5-30分钟的时间里，思路常常被打断，手机常常被拿起放

4、下，高效和轻互动，就成为了移动设计的特点。而对于平板电脑而言，它的使用时间一般为在家中较为安静，舒适的环境空间下使用，使用时间也较为固定。移动产品特性手势对比尺寸与分辨率移动产品使用特点： 屏幕尺寸： 通常是指屏幕的物流尺寸，是屏幕的对角线长度。比如2.8英寸。3.7英寸。 分辨率： 是指屏幕上拥有的像素的总数。通常使用“宽带x长度”来表达。虽然大部分情况下分辨率都表示为“宽度x长度”，但分辨率并不意味着屏幕的比例。 Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑，统一使用点（point）对界面元素的大小进行描述，例如： iPhone、iPod Touch界面描述320点

5、x480点 iPhone、iPad Touch界面描述768点x1024点 换算管理普屏1点（1pt）=1像素 Retina屏1点（1pt）=2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚地，并且统一地使用点对界面元素的大小进行描述了尺寸与分辨率移动产品使用特点：尺寸与分辨率iPhone 第一代的iPhone屏幕尺寸305英寸，分辨率为320 x480,屏幕密度为165PPI，而从iPhone4开始屏幕密码增加了两倍，分辨率达到640 x960。而现在iPhone5的分辨率则为640 x1136。 在设计iPhone的应用程序界面时，设计师要以640 x960

6、的基准进行设计，然后制作一套缩小2倍的图片资源（未缩的我们叫2倍图，缩了得叫一倍图）以为所有iPhone都使用了相同尺寸，所以最终能在2种分辨率上显示的物理大小完全相同。 由于iPhone5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面640 x1136（如app背景图，启动图等等）尺寸与分辨率尺寸与分辨率iPad 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的iPad屏幕密度同样提升了2倍，分辨率达到了2018*1536。最近新出的iPad mini屏幕尺寸为7.

7、9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套缩小2倍的图片资源（在为缩的我们叫2倍图，缩了的叫一倍图）iPad mini由于和iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。尺寸与分辨率尺寸与分辨率 Android设备： Android设备的屏幕相对复杂一些，因为它们有各种尺寸和分辨率。为了让跟中分辨率的屏幕显示合适的大小以便用户阅读或者操作，同时又能满足Android设备多样性的需求，由于，Android官方通过对各种屏幕进行密度等级划分，最后分为“低密度（LDPI）”、“中密度（MDPI）”

8、、“高密度（HDPI）”、“超高密度（XHDPI）”这四个规格，并同时将“中密度”定义为基准线。这样在设计Android应用程序的界面时，我们就可以一视同仁把中密度的屏幕作为基准进行设计，然后给其他密度的屏幕提供相应的图片资源，最后通过系统的适配性自动处理，一样使得相同的内容在各种屏幕上可以显示比较接近的大小。 在太平洋，一般我们设计为480*800的尺寸。界面布局iPhone界面布局iPhone界面布局iPad界面布局规范的话：状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。实际应用上：一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图片的界面

9、。界面布局规范的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题 当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑添加。导航栏（navigation bat)界面布局实际应用上： 顶部状态栏不一定就是导航栏，可以没有，也可以是搜索栏等等。 导航栏大于44pt,页面标题左对齐导航栏（navigation bar)界面布局实际应用上：不同元素组合成导航栏导航栏（navigation bar)界

10、面布局实际应用上：页面标题和按钮一样可点击导航栏（navigation bar)界面布局规范里的话：标签栏显示在屏幕的下方边缘 标签栏向用户提供了再应用的不同模式或不同视图间切换的能力标签栏显示图标和文本，每个标签栏元素等宽地显示 无论横屏竖屏都不改变其高度标签栏不超过5个时，可以再标签栏中等宽地展示当标签栏超过5个时，系统会展示其中4个并展示一个“更多”的标签可以再卡片栏山显示一个提醒标记导航栏（tab bar)界面布局规范里的话：并不是所有的首页都有标签栏标签栏（tab bar)当图标意义足够明确，可以不使用文字当标签意思过于抽象，可以全部只使用文字界面布局标签栏（tab bar)实际应用

11、上：形状不一定就是长方形，不一定所有标签都等宽。界面布局规范里的话：工具栏显示在屏幕下方边缘包含用于针对当前页面内容执行动作组的按钮在工具栏上相应的元素等宽的进行排列设备手持方向从竖向变为横向时，会自动改变工具栏的高度导航栏（tool bar)界面布局实际应用上：家居杂志和太平洋电脑网客户端内页工具栏展示导航栏（tool bar)界面布局规范里的话：在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用户点击，因此在设计规范里，任何可点击的不见，大小都不应该小于44pxt*44pt因此，按钮不应小于44pt*44pt;app的banner广告图高度也不应小于44pt;列表的图高度也不

12、应小于44pt等等点击区域界面布局 由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输出一倍图的时候我们需要将2倍图缩小成一倍图，因此在2倍图的设计中，必须保证每个单独存在的个体大小是双数像素，如148px*248px。这样才能使用在缩小一倍图的时候不会出校13.5*17.5像素的情况（大家都知道世界上市没有半个小苏存在的，像素不齐便会出现虚框像素，图像会模糊）设计区域界面布局 iOS的控件还有很多很多，以上列举的是比较常见到的，是做每个app都会设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显示栏，搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样

13、式，不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂，很多时候另外设计实现还不如直接系统自带的）设计区域字体在iOS中默认字体分为三类：第一种：STHeiti-Light.ttc和STHreiti-Medium.ttc 代表的是中文字体第三种：_H_helvetica.ttc 和_H_HelveticaNeue.ttc 代表的是英文以及数字字体第三种：LockClock.ttf代表的是锁屏时间字体iOS 里默认字体字体 苹果默认的中文字体是Heitis SC（黑体-简，黑体-简的英文名称为Heiti SC）heiti为黑体的拼音，SC代表简体中文（Simplified Chin

14、ese），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPod nano 第五代依赖的预设简体中文字型。 当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。在iOS中里的中文字体在iOS中里的中文字体 相对中文而已，iOS里的英文和数字的字体样式就比较多了，在设计的时候可以挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系统能够通用。字体在iOS中里的中文字体字体 中文应用在界面上面时，一般我们用方正黑体简体做设计。而且不能够带有任何的设计效果和样式（智能是纯色，可以带有阴影，

15、由技术来实现） 但也有例外，例如是写在图片上面的文字；一些比较特殊的不会更改的词句这时可以用其他字体和使用样式，由切图来实现。实际应用字体 我们在设计时，重要的视觉部分可以做文字的样式（前提是这部分不会改变）例如首页的标题，底部标签的文字（他们一般都是固定不会更改的）改变的文字切图实现。但二级页面及之后的标题就会由技术来实现了。 个人经验一般字体最小不小于24px，标题等可到38px-44px。实际应用图标导航栏和工具栏的标准按钮图标图标导航栏和工具栏的标准按钮图标图标标签栏的标准按钮图标图标App icon 设计尺寸我们一般设计最大尺寸的1024px*1024px再缩小为各个尺寸的图标iPh

16、one app 图标iPad app 图标图标图标图标输入：iOS会为图标自动生成圆角高光带投影（也可设置不生成高光），所以提交的时候提交直角图标即可，直接输PNG：1024px（不要使用alpha透明度）切图1.切方法1：直接在psd上切图。方法2：新建透明图层，拖进该部件。2.输出切好后选择：“储存为web和设备所用格式”图片格式PNG24,保持透明度图形用户界面中的图形有两种实现方式，一种是用代码画出来，另一种则是使用图片。在直接使用之前，有一个psd到png 的切图过程。切图在缩小为一倍图进行切图的时候，如果该元素使用的像素不是双数，或者坐标不在双数坐标上，就会出现虚拟像素，此时需要进

17、一步调整。切图一般相同关系和曾经排列的图标或元素，不管他们各自的尺寸是多少，都切成相同的切片（alt拖动即可复制单签切片）除切片外，另外一个需要输出的是颜色。一般给程序RGB值和颜色代码2个数值。切图在太平洋，移动产品的切图是由我们设计这边完成的（安卓除外）流程：设计师发出设计稿给程序员查看：-程序员根据设计稿编写输出切图文档（文档包括页面链点（名称）、该切图截图、命名方法、切图尺寸大小、相关设备）-设计师根据文档进行切图，最后打包发给程序员。）切图时一般需要切一倍图和2倍图，两倍图是在相应的一倍图命名后加2x.因为app在实际运用时，如果发现当前的设备是Retina屏，会自动需找图片“pic2x.png”,自动加载针对Retina屏的图片素材切图文档里若没有特别表面改切图的尺寸，则完全按照设计稿元素的实际尺寸进行切图。对于点击元素不足44pt*44pt的情况，一般切图时需要切上旁边的空白像素以满足此标准。查看文档时需要留意程序员是否漏掉某些按钮或点击区域的选中状态、按下状态或不可以点击状态。一般按钮上的文字不切出，由程序员实现。总结app设计和网络设计，专题设计很不一样，因为操作和显示空间比较小，所以必须要有一定的规范和约束去统一用户的体验。但是在实际设计和开发上，我们可以尽量围绕非凡做出创新，带来新的体验和新鲜感。设计稿出来之后，一定要放在