移动产品设计基础教材.pptVIP

界面布局 工具栏（tool bar)  实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示 界面布局 点击区域  规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列表的高度也不应小于44pt等等。 界面布局 设计区域  由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输出一倍图的时候我们需要将两倍缩小成一倍图，因此，在两倍图的设计中，必须保证每一个单独存在的个体的大小是双数像素，如148px*248px。这样才能使在缩小到一倍图的时候不会出现13.5*17.5像素的情况（大家都知道世界上是没有半个像素的存在的，像素不齐便会出现虚拟像素，图像会模糊） 界面布局 其他控件  IOS的控件还有很多很多，以上列举的是比较常见到的，是做每一个app都会设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显示器，搜索栏，滑动调节器等等。这些一般可以直接使用系统提供的样式，不需要另外设计（当有需求的时候也可以设计，不过由于其操作比较复杂，很多时候另外设计实现得还不如直接系统自带的） 移动产品设计基础 字体 字体 iOS里的默认字体  在ios中默认字体分为三类： 第一种：STHeiti-Light.ttc 和 STHeiti-Medium.ttc 代表的是中文字体 第二种：_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及 数字字体 第三种：LockClock.ttf 代表的是锁屏时间字体 字体 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第五代以来的预设简体中文字型。 当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。 iOS里面的中文字体是比较少的，看上去都差不多，总结起来就是黑体，粗黑体和斜黑体三种。 iOS里的英文/数字字体 相对中文而言，iOS里的英文和数字的字体样式就比较多了，在设计的时候可以挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系统能够通用。 字体  字体 实际应用  中文应用在界面上面时，一般我们用方正黑体简体做设计。而且不能带有任何的设计效果和样式（只能是纯色，可以带有阴影，由技术来实现） 但也有例外，例如是写在图片上的文字；一些比较特殊的不会更改的词句这时可以用其他字体和使用样式，由切图来实现。 字体  我们在设计时，重要的视觉部分可以做文字的样式（前提是这部分不会改变）例如首页的标题，底部标签栏的文字（它们一般都是固定不会更改的）改变的文字切图实现。但二级页面及之后的标题就会由技术来实现了。 个人经验一般字体最小不小于24px，标题等可到38px-44px。 移动产品设计基础 图标 图标 导航栏和工具栏的标准按钮图标  图标 导航栏和工具栏的标准按钮图标  图标 标签栏的标准按钮图标  图标 App icon 设计尺寸  我们一般设计最大尺寸的1024px*1024px,再缩小为各个尺寸的图标。 iPhone app 图标 iPad app 图标 图标  图标  图标  输出：iOS会为图标自动生成圆角带高光带投影（也可设置不生成高光），所以提交的时候提交直角图标即可，直接输PNG：1024px * 1024px（不要使用alpha透明度） 移动产品设计基础 切图 切图  图形用户界面中的图形有两种实现方式，一种是用代码画出来，另一种则是使用图片。 在直接使用之前，有一个PSD到png的切图过程。 方法2.新建透明图层，拖进该部件 方法1.直接在psd上切图。 1.切 2.输出 切好后选择：“储存为Web和设备所用格式 ” 图片格式png24，保持透明度 切图  在缩小为一倍图进行切图的时候，如果该元素使用的像素不是双数，或者坐标不在双数坐标上时，就会出现虚拟像素，此时需要进一步调整。 切图  一般相同关系和层级排列的图标或元素，不管它们各自的尺寸是多少，都切成相同大小的切片(alt拖动即可复制当前切片）。 除切片外，另外一个需要输出的是颜色。一般给程序员RGB值和颜色代码两个数值。 切图  在太平洋，移动产