移动产品设计基础教材1

《移动产品设计基础教材1》由会员分享，可在线阅读，更多相关《移动产品设计基础教材1（59页珍藏版）》请在金锄头文库上搜索。

1、移动产品设计基础,移动产品设计基础,一、移动产品特性 二、尺寸与分辨率 三、界面布局 四、字体 五、图标 六、切图 七、总结,CONTENTS,目录,移动产品设计基础,移动产品特性,移动产品特性,移动产品的种类,常用的移动产品按尺寸分有手机和平板电脑等，按平台分有iOS,Android,Windows，Windows phone等.这里我们主要讲iPhone、iPad、Android手机app的设计基础知识。,什么是安卓：Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于便携设备，如智能手机和平板电脑。Android操作系统最初由Andy Rubin开发，主要支持手机。

2、2005年由Google收购注资，并组建开放手机联盟开发改良随后，逐渐扩展到平板电脑及其他领域上。2008年10月第一部Android智能手机发布。,什么是iOS：苹果iOS是由苹果公司开发的手持设备操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等苹果产品上。 注意：写法是iPhone、iPad、iPod、iOS。,移动产品特性,移动产品的种类,Metro UI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象

3、，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。,Windows Phone是微软发布的一款手机操作系统，它将微软旗下的Xbox Live游戏、Zune音乐与独特的视频体验整合至手机中。2010年10月11日晚上9点30分，微软公司正式发布了智能手机操作系统Windows Phone。,移动产品特性,移动产品使用特点,移动设备的方便携带，也同时带来了它浏览时间的碎片化。以智能手机为例：我们通常在短暂的时间里，完成一件任务或者是进行一个娱乐事件，比如：散步、坐公交

4、、睡前、午后闲暇、旅行的时候，开始拍照、分享、做笔记、玩游戏、购物，等等。在平均短短5-30分钟的时间里，思路常常被打断，手机常常被拿起放下，高效和轻交互，就成为了移动设计的特点。而对于平板电脑而言，它的使用时间一般为在家中较为安静，舒适的环境空间下，使用时间也较为固定。,移动产品特性,手势对比,移动产品设计基础,尺寸与分辨率,尺寸与分辨率,移动产品使用特点,屏幕尺寸： 通常是指屏幕的物理尺寸，是屏幕的对角线长度。 比如2.8英寸,3.7英寸。 分辨率： 是指屏幕上拥有的像素的总数。通常使用“宽度长度” 来表达。 虽然大部分情况下分辨率都被表示为“宽度长度”，但分辨率并不意味着屏幕的比例。,尺

5、寸与分辨率,移动产品使用特点,Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑，统一使用点（Point）对界面元素的大小进行描述，例如： iPhone/iPod Touch界面描述 320点 x 480点 iPhone/iPad界面描述 768点 x 1024点 换算关系 普屏 1点（1pt) = 1像素 Retina屏 1点(1pt) = 2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚地，并且统一地使用点对界面元素的大小进行描述了。,尺寸与分辨率,iPhone,iPhone： 第一代的iPhone屏幕尺寸为3.5英寸，分辨率为320*48

6、0，屏幕密度为165PPI，而从iPhone4开始屏幕密度增加了两倍，分辨率达到640*960。而到现在iphone5的分辨率则为640*1136。 在设计iPhone的应用程序界面时，设计师要以640*960的基准进行设计，然后制作一套缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）因为所有iPhone都使用了相同的尺寸，所以最终能在两种分辨率上显示的物理大小完全相同。 由于iphone5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面640*1136（如app背景图，启动图等等）,尺寸与分辨率,iPh

7、one,320px,480px,iPhone-iPhone3GS,iPhone4-iPhone4S,iPhone5,640px,960px,640px,1136px,尺寸与分辨率,iPad,iPad： 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的iPad屏幕密度同样提升了两倍，分辨率达到2048*1536。最近新出的iPad mini 屏幕尺寸为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套缩小两倍的图片资源。(未缩的我们叫两倍图，缩了的叫一倍图）iPad mini由

8、于和iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。,尺寸与分辨率,iPad,768px,1024px,iPad1-iPad2,iPad3-iPad4,iPad mini,1536px,2048px,768px,1024px,尺寸与分辨率,Android,Android设备： Android设备的屏幕相对复杂一些，因为它们有各种尺寸和分辨率。 为了让各种分辨率的屏幕显示合适的大小以方便用户阅读或者操作，同时又能满足Android设备多样性的需求。于是，Android官方通过对各种屏幕进行密度等级划分，最后分为“低密度（LDPI）”、“中密度（MDPI）”、“高密度（HD

9、PI）”、“超高密度（XHDPI）”这四个规格，并同时将“中密度”定义为基准线。这样，在设计Android应用程序的界面时，我们就可以一视同仁把中密度的屏幕作为基准进行设计，然后给其它密度的屏幕提供相应的图片资源。最后通过系统的适配性自动处理，一样使得相同的内容在各种屏幕上可以显示比较接近的大小。 在太平洋，一般我们设计为480*800的尺寸。,移动产品设计基础,界面布局,界面布局,iPhone,iPhone：,界面布局,iPhone,iPhone：,界面布局,iPad,iPad：,状态栏高20pt,导航栏高44pt,导航栏图标 20pt*20pt,导航栏按钮 48pt*64pt,标签栏高 4

10、9pt,标签栏图标 30pt*30pt,界面布局,状态栏 (status bar）,规范里的话： 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。 实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图片的界面。,320pt*20pt,界面布局,导航栏（navigation bar),规范里的话： 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题 当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且应该提供包含上一位置的后退按钮。

11、除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑，添加。,320pt*44pt,按钮可以是文字或图标,界面布局,导航栏（navigation bar),实际应用上： 顶部状态栏下不一定就是导航栏，可以没有，也可以是搜索栏等等。,导航栏大于44pt，页面标题左对齐,界面布局,导航栏（navigation bar),实际应用上： 不同的元素组合成导航栏,界面布局,导航栏（navigation bar),实际应用上： 页面标题和按钮一样可点击,界面布局,标签栏（tab bar),规范里的话： 标签栏显示在屏幕的下方边缘 标签栏向用户提供了再应用的不同模式或不同视图间切换的能力。 标签栏显示

12、图标和文本，每一个标签栏元素等宽地显示 标签栏被选择的标签需要有一个当前的高亮状态 无论横屏竖屏都不改变其高度 标签不超过5个时，可以在标签栏中等宽地展示 当标签超过5个时，系统会展示其中4个并展示一个“更多”的标签 可以在卡片栏上显示一个提醒标记,320pt*49pt,界面布局,标签栏（tab bar),实际应用上： 并不是所有的首页都有标签栏。,当图标意义足够明确，可以不使用文字； 当标签意义过于抽象，可以全部只使用文字,界面布局,标签栏（tab bar),实际应用上： 形状上不一定就是长方形，不一定所有标签都等宽。,界面布局,工具栏（tool bar),规范里的话： 工具栏显示在屏幕下方

13、边缘 包含用于针对当前页面内容执行动作的按钮 在工具栏上相应的元素等宽的进行排列 工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt 设备手持方向从竖向变为横向时，会自动改变工具栏的高度,320pt*44pt,界面布局,工具栏（tool bar),实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示,界面布局,点击区域,规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列表的高度

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

15、以直接使用系统提供的样式，不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂，很多时候另外设计实现得还不如直接系统自带的）,移动产品设计基础,字体,字体,iOS里的默认字体,在ios中默认字体分为三类： 第一种：STHeiti-Light.ttc 和 STHeiti-Medium.ttc 代表的是中文字体 第二种：_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及 数字字体 第三种：LockClock.ttf 代表的是锁屏时间字体,字体,iOS里的中文字体,苹果默认的中文字体是Heiti SC（黑体-简，黑体-简的英文名称为Heiti

16、 SC。Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPod nano第五代以来的预设简体中文字型。 当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。 iOS里面的中文字体是比较少的，看上去都差不多，总结起来就是黑体，粗黑体和斜黑体三种。,iOS里的英文/数字字体,相对中文而言，iOS里的英文和数字的字体样式就比较多了，在设计的时候可以挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系统能够通用。,字体,字体,实际应用,中文应用在界面上面时，一般我们用方正黑体简体做设计。而且不能带有任何的设计效果和样式（只能是纯色，可以带有阴影，由技术来实现） 但也有例外，例如是写在图片上的文字；一些比较特殊的不会更改的词句这时可以用其他字体和使用样式，由切图来实现。,字体,我们在设计时，重要的视觉部分可以做文字的样式（前提是