文档介绍：APP设计流程
APP设计流程
第1页
1
项目立项
APP设计流程
第2页
完善企业会把项目相关人员聚集起来，产品经理会把产品详细用原型展示出来，包含产品定位，市场需求，主打卖点，产品性质以及各模块详细功效，逻辑跳转要并不像手册上提供尺寸那么多，所以工作之中，和你工程师搭档去沟通，你要知道是你们企业开发所用数据，而不是苹果提供给你数据。
APP设计流程
第11页
3
页面标注
APP设计流程
第12页
标注是重中之重，工程师能不能完整还原设计稿，很大一个别取决于标注；假如不清楚你该怎么标，一定要和工程师沟通！
每个工程师实现效果方法不一样，我在这里所说，是我标注****惯，但应该适合用于大个别设计师和工程师。
不需要每一张效果图都进行标注，你标注页面能确保工程师开发每个页面时候都能顺利进行即可；
这里标注软件使用是PxCook，先标一个空白文档，看看都需要什么吧
页面标注
APP设计流程
第13页
这里要说一句，PxCook即使能够自动读取颜色，不过还不能对PSD文档里设置透明度读取，所以假如你用了透明色，推荐你用文字标注直接写出来原色值以及透明度。
基础上我并不使用PXCook里面颜色标注工具，而是使用文字标注工具，因为要标识两种色值，PxCook只能显示一个色值。
普通我****惯是PS和标注软件同时打开，因为有时候标注软件并不能完全把PSD文件里东西标注出来，所以标注也要灵活利用，假如无法标注，就到PS里查看一下，然后再使用文字标注说明一下。
页面标注
APP设计流程
第14页
：字体大小(px),字体颜色(提议标注颜色时，两种色值表示都标上(16进制&RGB)。)；
，透明度；
bar上方其实有一条分割线，需要提供色值；
(假如是全部页面白色，那就和工程师说一句就行)；
bar背景色值。
因为页面种类成千上万，我想每种页面都讲一下，不过不现实，希望能够举一反三。下面是一个比较普通首页页面，不过基础上一款APP中应该标元素都有了~
页面标注
你需要标注内容
APP设计流程
第15页
普通页面你需要标注这些地方：
：背景色，标题栏文字大小，文字颜色(不再赘述)；
：全部撑满横屏大图，不需要横向尺寸，把高度标出了就能够了;
：图标大小和图标可点击区域不一定一致,也就是说，图标能够做很小，不过为了确保点击准确性和流畅性，工程师能够把可点击区域设置很大，这么标注和切图时候就要注意，标注是可点击区域大小，切图切也是可点击区域大小，也就是用透明区域去补上，不然图片会含糊。
在设计时候就要考虑可点击区域范围，比如X宝购物车页面左侧小圈，可点击区域要比实际小圈尺寸大很多。
页面标注
APP设计流程
第16页
这种类型图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下距离。至于图标间距，因为有些时候可能设计师不能完全做到1px不差，所以我基础不标，交给工程师让他们去处理，其实等距排列图标不需要标间距，因为工程师还要动态适应不一样屏幕，标了间距也是白标(还是要和你搭档沟通怎么去标注）；
：这个位置其实不是太主要，我****惯标注上这里，麻烦能少则少。
+文字：这个应该比较常见，只标注一个单位(图+文)就能够了。
图片需要标注宽高，因为工程师要设置图片区域，从后台调取，能够这么说，软件里除了横屏撑满图，基础上全部图片都要标注宽高。
图片距离上下左右距离，文字大小颜色，这里文字其实算两个控件，标题文字以及说明文字，需要单独标出。
页面标注
APP设计流程
第17页
Tab Bar：
这个位置其实比较特殊，你能够单独标注图标大小+文字大小；还能够图标文字算作一个控件，整个切出来；
咱们工程师****惯是用整个，也就是图标+文字算作一个ICON，所以我基础不怎么标注单独图标(这里能够和你搭档去沟通一下，看他是什么开发****惯)。
页面标注
APP设计流程
第18页
普通列表有两种方法(去问你搭档，他喜欢用什么方法)：
，行内元素居中；
，元素上下间距，确定行高；
每种元素位置怎样确定：通常标注都是元素距离屏幕最左侧距离，比如上图图标元素距离左侧24px，文字元素距离左侧100px。
标注这个东西没有固定方法，工程师开发****惯不一样，标注方法也不一样。该怎么标注即使能够在网上找到方法，但那不一定适合你，一定和自己搭档勤沟通全部页面标注总结起来就是：标文字，标图片，标间距，标区域；
(下列图表出现了45px单数，因为软件自动吸附上去了显示了图标本身尺寸，切图时候记得输出个偶数尺寸切片)
页面标注