移动端设计总结.pdfVIP

移动端设计总结 东东导读 ：常在河边走哪有不湿鞋的 ，比喻环境对人的影响 做了五年的产品就算不刻意的 去学习 ，也多少耳濡目染的了解其它角色的“语言” 常在河边走哪有不湿鞋的 ，比喻环境对人的影响 做了五年的产品就算不刻意的去学习 ，也多少耳 濡目染的了解其它角色的“语言” 下面就做下关于移动端设计方面的总结 iPho ne使用字体 ： iO S9使用的西文字体由Helvet ica Neue变更为San Francisco , iO S9中文字体由此前的黑体-简变更为苹方黑体 现在常用的几种设计尺寸 1.64 0*9604 时代的尺寸 ，刚接触 PP设计用的是这个尺寸 ，拟物盛行的时代(现在用这个尺寸设计 的应该比较少了吧) ； 2.64 0* 11365/5S/5C ，IPho ne更新 ，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸) ，进入 扁平的时代了 ； 3.750* 1334 6 目前我做设计稿的设计尺寸 ，IPho ne6的尺寸 ，向下可以适配4 ，5 ，向上可以适配6 plus ；我记得IP6推出后 ，我问总监应该用什么尺寸设计 ，他说用IP6的吧 ，好适配 ，切出来就 是@2x了 ，改一改上下都能照顾到。 页面标注 （参考 ） 需要标注的内容有 ： 1.文字需要提供 ：字体大小(px),字体颜色 ； 2.顶部标题栏的背景色值 ，透明度 ； 3.标题栏下方以及Tab bar上方其实有一条分割线 ，需要提供色值 ； 4 .内容显示区域的背景色(如果是全部页面白色 ，那就和工程师说一句就行) ； 5.底部Tab bar的背景色值。 因为页面的种类成千上万 ，我想每种页面都讲一下 ，但是不现实 ，希望可以举一反三。 下面的是一个比较普通的首页页面 ，但是基本上一款 PP中应该标的元素都有了 一般页面你需要标注这些地方 ： 所有元素统一距离屏幕最左24 px(全局性的数据可以直接和工程师沟通 ，也可以标注 ，推荐标注 出来) 1.标题栏 ：背景色 ，标题栏文字大小 ，文字颜色(不再赘述) ； 2.Banner ：所有撑满横屏的大图 ，不需要横向尺寸 ，把高度标出了就可以了; 3.菜单图标 ： 图标的大小和图标的可点击区域不一定一致 也就是说 ，图标可以做的很小 ，但是为了保证点击的准确性和流畅性 ，工程师可以把可点击区域设 置的很大 ，这样标注和切图的时候就要注意 ，标注的是可点击区域的大小 ，切图切的也是可点击区 域的大小 ，也就是用透明区域去补上 ，否则图片会模糊。 在设计的时候就要考虑可点击区域的范围 ，比如X宝购物车页面左侧的小圈 ，可点击区域要比实际 小圈尺寸大很多。 这种类型的图标需要标注图标点击区域大小 ，图标距离屏幕最左最右以及上下的距离。至于图标的 间距 ，因为有些时候可能设计师不能完全做到1px不差 ，所以我基本不标 ，交给工程师让他们去 处理 ，其实等距排列的图标不需要标间距 ，因为工程师还要动态适应不同的屏幕 ，标了间距也是白 标(还是要和你的搭档沟通怎么去标注 ）； 4 .模块间隔 ：这个位置其实不是太重要 ，我习惯标注上这里 ，麻烦能少则少。 5.图片+文字 ：这个应该比较常见 ，只标注一个单位(图+文)就可以了。 图片需要标注宽高 ，因为工程师要设置图片区域 ，从后台调取 ，可以这么说 ，软件里除了横屏撑满 的图 ，基本上所有的图片都要标注宽高。 图片距离上下左右的距离 ，文字大小颜色 ，这里的文字其实算两个控件 ，标题文字以及说明文字 ， 需要单独标出。 Tab Bar ： 这个位置其实比较特殊 ，你可以单独标注图标大小+文字大小 ；还可以图标文字算作一个控件 ，整 个切出来 ； 我们工程师的习惯是用整个的 ，也就是图标+文字算作一个ICO N ，所以我基本不怎么标注单独的图 标(这里可以和你的搭档去沟通一下 ，看他是什么开发习惯)。 图标该切几套 ？ 举个例子 ico_car.pngIPho ne2G ，3G ，3GS使用(好像没人用这手机了吧) ico_car@2x.pngIPho ne4 ，5 ，6优先加载此尺寸图片(不是必须使用这个尺寸 ，是优先加载调用这个 尺寸) ico_car@3x.pngIPho ne6 plus使用的尺寸 图标触击区域 ： IO S人机指导手册里推荐的最小可点击元素的尺寸是44*44 po int (点) ，在设备上1 po int 等于1像素 ， 所以转换成像素就是44*44像素 ，换算成物理尺寸大概是7mm左右吧 （人机工效学研究中得出的 结论 ：用食指