U姐有话要说

大多数时候，我们每天晚上都忙着画图、修改稿子，很少对工作中的一些问题和技巧进行梳理、总结和思考。 善于总结和反省，可以达到事半功倍的效果。 明天U姐会和男同伴们分享她在设计上的一些经验和方法。 本文汇集了以上6篇文章的精华，希望能给您带来一些帮助。

目前业界对于iOS的设计规范也参差不齐。 很多还是6设备和ios9系统，最新的是7和iOS10（更新真快）。 我这里说的是最新的iOS界面设计规范（设计规范，我们上次看到过）

U姐列出了一个小目录：

1、项目审批

2.预计项目时间

3. 界面设计

四、切割图表示

5. 视觉恢复

6. 启动计划

1. 项目审批

我是一名UI设计师，所以U姐这里说的就是从设计师的角度来讨论一下，在从零开始创建APP的过程中，设计师应该做什么。

如果你在一家团队比较完善的公司，当项目立项时，所有相关人员（产品王、运营猫、设计狮、程序员等）都会聚集在一起，召开产品发布会。 产品王会讲解项目原型、市场监督分析、市场需求、产品定位、盈利模式等具体功能模块和跳转逻辑，一起讨论交流原型，改进并建立不足，然后评估项目时间，然后就可以复工了

注意：在讲解产品、演示原型时，一定要仔细聆听，充分理解整个逻辑。 如果你有疑问或者不明白，一定要提出疑问并让产品来解答，否则你的设计稿可能存在逻辑错误。

这个时候我们就可以开始一个新的项目，并做好初步的计划。

我个人建立项目的习惯是用“项目名称+版本号”来命名文件夹，因为这些技巧很方便我管理和查找项目文件。 有些设计师可能会将所有文件放在一个文件夹中。 如果文件少一点就好了。 如果文件多了，那么你就会哭，甚至不知道它是哪个版本的文件。

反复修改对于设计师来说是家常便饭。 当一个页面被修改多次时（包括这样的3天2头的修改），很多设计师的源文件应该是这样的：

这里是原文链接，暂时不支持收藏

此情此景，我只想唱一首诗：乙方虐我千遍，我待乙方如初恋，终有一天我会是乙方，虐遍天下设计院。

我个人的习惯是用“文件名+修改日期+修改次数”来命名。 比如“.10”是最终版本，4月12日产品说要在首页添加通知，所以我的文件是“.12”，前后已经改了3次，也就是“.12.3”一目了然，很容易找到要改的文件。

立项的时候，我只需要向开发的男伙伴解释一下，他们自然就知道这个文件是最终版本。

在这里，U姐很严肃的提醒大家，不要把修改稿全部删除，绝对不要删除，绝对不要删除（重要的事情已经说了3遍了），每一次修改都是在文案的基础上进行的，因为我们改了很多稿子之后，乙方可能会说“第一版还好，还是回到第一版吧”（不要吐血，不要砸笔记本），所以请在文案上进行修改。

有人会说我有ctrl+Z，我不怕，姐姐你告诉你不要依赖ctrl+Z，如果你从来没有改变过偏好，默认历史记录只有20步，最大是200步，如果你设置了200步，就不怕PS卡死机那也是好事

还有一点需要补充的是，项目的版本控制也非常重要。 我使用的项目版本控制软件是SVN，管理项目文件方便高效，并且可以与本地项目文件同步。 即使我的笔记本电脑挂了，或者安装系统后误将所有C盘降级，我也不用担心。 我只需要同步更新SVN在线文件并返回即可。 关于SVN这里就不多说了。

2. 项目预计时间

目前，我们已经收到了PRD文件和原型。 不用担心打开PS图纸，因为项目的开发需要时间。 为了更高效地完成开发进度，整个团队需要估算项目时间。 作为UI来说，很简单，就是统计页数，看看总共有多少页，然后详细估算一下……

U姐举个栗子。 比如我收到的一个APP项目，总共有70页左右。 （纳尼！70页，天哪，别惊讶，70页对于一个APP来说根本不算多）

这时候，也许老板和产品会问你需要多长时间才能画完图，别急着回答，你需要先考虑所有的页面，他们会没完没了地催你，因为他们急于上线占领市场，他们恨不得你每天加班画图，然后上线； 不用担心催你，让他们怎么催就怎么催（如果你想再催你，也可以说：催你麻痹，快点，你画画，开个玩笑而已，你要是敢，那你就真的NB了）

1. 识别重要页面

什么是重要页面？ 在现在看风格的时代，面子是最重要的，首页就是一个APP的脸面； 页面布局中有许多主要部分共享相同的布局结构，这也是一个重要的页面。 以首页为例，你可能需要花费2天的时间才能完成。 一切都需要2天时间，因为你还需要确定主色调、设计风格、图标设计等，并保证质量（如果有人认为你慢，你就毁了他：如果你想快，那就提高质量。如果有问题，你负责，啦啦啦~~）

我们都知道，鱼和熊掌不可兼得。 我们既要速度快，又要高质量。 不可能同时保证两者，也很难平衡

然后选择一个重要的页面，估计一下时间，然后就这样推送。 虽然首页确定了，但是整个APP的设计风格也基本确立了，做其他页面就容易多了。

2. 过滤重复页面

在一个APP中，虽然有很多页面具有相似的部分结构，所以70个页面如果这样过滤掉，可能只是一半，而30个页面是不重复的。

插一句：在画图的过程中，你不能100%保证不会有其他任务，而且肯定会有一些额外的设计任务，所以不要把时间估计得恰到好处，除非你特别确定不会有额外的设计任务。

因此，剩下的30页，按照我的速度，如果我允许足够的时间（比实际预计时间多大约30%-50%），我需要大约2周的时间才能完成。

3. 总体预计时间

当30个主要页面的时间确定后，现在应该包括其余重复页面的时间。 剩下的40个相当于批次。 一周内就可以稳定购买。 不要把时间估计得太短，因为你不知道老板可能会扔给你一些东西让你去做，但你仍然非常急切地需要它。 最后只能哭泣

考虑原型→统计筛选页面→重要页面设计（30个）→子页面设计（40个）→审核+修改→定稿

按照我预计的时间，在订单不稳定的情况下，也能应对突发的设计任务，大约需要3周的时间才能完成。 这里U姐是没有100%加班的预估时间。

4. 网页设计预计时间

一般来说，如果是比较小的特殊页面设计，我一般估计3天，包括灵感、构思、参考、设计、修改。

如果是网站，有五级页面，大约5个页面，需要5天左右； 详细信息可以根据页数等进行估算。

3. 界面设计

我是一名UI设计师，所以U姐这里说的就是从设计师的角度来讨论一下，在从零开始创建APP的过程中，设计师应该做什么。

目前，行业内APP界面设计规范水平也参差不齐。 很多还停留在6设备和ios9系统上，最新的是7和iOS10（更新真快）。 我这里说的是最新的iOS界面设计规范（设计规范，我们上次看到过）

1.关于设计工具

古语云：工欲善其事，必先利其器。 好的工具可以让我们的工作更有效率。 我们在界面设计中使用最多的是PS和AI。 如果你是Mac用户，可以尝试一下。 软件版本其实是推荐的。 高版本，因为功能更强大，绘图速度会更快。

我个人是从8.0开始接触ps，8.0-CS4-CS5-CS6-CC--，一直到最新的。 深深的感觉到新版本更加好用了。 您也可以根据个人习惯选择适合自己的工具。

2、设计稿规格

在看设计稿的规格之前，我们先来了解一下APP界面设计的构成

界面由：布局层、图形布局层和图标层组成。

在6发布之前，所有设计稿都是用px制作的。 自6发布以来，所有设计稿规范均使用px作为设计稿规范。

U姐再给大家展示一下，目前为止的所有规格（不用考虑1-3代）：

界面设计规范：

手机型号

4/4S

5/5C/5S

6/6S/7

6P/6SS/7P

帧率

像素

像素

像素

像素

放大

@2X

@2X

@2X

@3X

逻辑帧率

点

化学规格

像素

像素

像素

像素

屏幕密度

深度PI

163

163

163

154

接口规格：

设备

帧率

质子泵抑制剂

状态栏高度

导航栏高度

标签栏高度

6P/6SP/7P

像素

60像素

132像素

146像素

6/6S/7

像素

40像素

88像素

98像素

5/5C/5S

像素

40像素

88像素

98像素

4/4S

像素

40像素

88像素

98像素

1/2/3代

像素

20像素

44像素

49像素

以其作为设计稿标准规范的原因：

1、从中间规格向下和向上适配时，接口调节范围最小，适配最方便。

2、大屏时代，仍然采用小规格作为设计规格，这会限制设计师的设计视角。

3、版本设计时，只需进行极少的设计调整，即可提高设计效率。

所以请来制作设计稿

在文档中建立参考线是一个好习惯。 我希望你也能养成这个习惯。 设置和关闭都很容易。 我习惯将左右距离设置为24px。 我和国外很多app对比了一下。 结论是24px比较合理。

然后你就可以开始你的设计了

这里U姐就为大家跳过iPad的设计规格：

设备

码率

质子泵抑制剂

状态栏高度

导航栏高度

标签栏高度

iPad3-4-5-6-Air-Air2-mini2

像素

40像素

88像素

98像素

iPad1-2

像素

20像素

44像素

49像素

小型平板电脑

像素

20像素

44像素

49像素

3. 图标设计规范

图标规格：

设备

应用商店

主屏幕

搜索

标签栏

工具栏和导航栏

6P/6SP/7P

6/6S/7

5/5C/5S

4/4S

1/2/3代

请使用光栅化系统进行图标设计

设计规格：可采用黄金比例设计

4.关于字体设计

我们来看看字体的历史演变

iOS9：中文字体为Neue

iOS9：英文字体改为Holly Black

↓↓↓

iOS10：中文字体为San

iOS10：英文字体为

关于字体大小的问题：

底部操作栏文字大小 34-38px

标题文字大小 28-34px

正文文字大小 26-30px

辅助文字大小 20-24 像素

标签栏文字大小 20px

文字大小只是一个范围，要根据设计的视觉效果来确定，不要死记硬背，但记住字体大小应该是奇数。

4. 剪图说明

切片工具和标记工具

1、切削工具：

一款PS插件，剪切图片非常方便，但是不支持红色免安装版PS，而且对PS版本要求比较高，而且还没有针对CS6进行维护和更新。 建议安装官方完整版PSCC及以上版本。 最新版本是3.2.0版本。

要安装该软件包并使用教程，请单击此处：

官方地址：

PS也是一款对PS进行切割、打标的插件，也被称为利器； 我用过，感觉还不错，而且切割打标的体验还是不高，PS的其他辅助功能还是很不错的，比如参考线辅助、圆角大小、磁铁功能等。

2. 标注工具：

（Pixel Chef）是一款用于切割图形的设计工具软件。 从2.0.0版本开始，支持手动智能识别PSD文件的文字、颜色、距离。

优点是打标和切割两种设计完成后集成在一个软件中标你妹 sketch，并且支持Mac和Mac双平台。 标注功能包括：支持宽度、颜色、面积、文字标注； 从2.0.0版本开始，整体效率大幅提升，值得推荐人工智能识别打标。

请点击此处安装包并使用教程：

，并且来自同一家公司，您可以手动估算规格、距离、文字大小、阴影、描边圆角、线条高度等信息，并根据您的需求进行标记。 大大节省了您的标记时间，大大提高了设计效率。 （U姐还是用它来标记一下）

不过它并不是免费的，而是一个收费软件，需要60元。

也是一款高效的设计稿标记工具。 支持Win/Mac，可以免费使用基本功能。 免费版的体验并不令人满意。 虽然是免费的，但如果需要中间功能，则需要支付60元。

上述工具各有优点和缺点。 选择主要看个人习惯。 选择易于使用的一款。

3. 页面标记

标签非常重要。 开发姐姐能否完美还原设计稿很大程度上取决于我们的标注； 不会标记的一定要和开发姐姐交流！

沟通是解决问题特别有效的方法！

这里我就粗略的说一下我的标注习惯。 没有必要对每个疗效图进行标注，只要你标注的页面能够保证每个页面的开发能够顺利进行即可。

以我标记的页面为例：

我们从之前的标注图中可以看出，需要标注的内容有：

① 文字：字体大小、字体颜色

② 布局控件属性：控制宽高、背景色、透明度、描边、圆角大小

③ 列表：列表高度、列表颜色、列表内容的上下宽度

④ ：控件之间的距离、左右行距

⑤ 段落文字：字体大小、字体颜色、行距

⑥所有属性：比如导航栏的文字大小和颜色、左右行距、默认宽度等，可以提前和开发姐姐约定好，不需要注明。

所有页面标记的汇总为：标记文本、标记宽度、标记大小、标记区域

注：表示颜色格式是使用16的补码（如：#），还是RGB（255,0,0）？ 你需要和开发姐商量一下，开放他的开发习惯，一般使用16补色值。

4、剪切接口

我还是以图片为例：（有图有真相）

.png→1-3代手机（已考虑）

@2x.png→/4S/5/5S/6/6S/7对应规格，这就是我们一般所说的2x图像

@3x.png→/6SP/7P使用的规格，这是3倍图

可以简单理解为多重关系。 如果用（6/6S/7）规格做设计稿，那么切块的输出是@2x，缩小2倍是@1x，扩大1.5倍是@3x。

我总结了一些切图时经常遇到的问题：

A. 哪些资源需要削减，哪些资源不需要削减？

① 只要是难以用代码实现和表达的，就需要截图

②如果你实在不知道要不要剪图，多和开发者沟通，他会告诉你需要剪什么图片

B. 我需要切割多少套？ （这里我只以iOS为标准，我会在上一期讲）

①理论上我们需要裁剪3组图片才能更好的适配。

②实际工作中，iOS只需要剪切两组图片，即：@2x和@3x

C. 剪切后的图片如何命名，不知道怎么命名怎么办？

我之前写过一篇关于界面抠图命名规范的文章，请戳：

注意：剪图时有几点需要注意：

①剪切图片输出格式必须为24位png、8位png、jpg格式。

②同一个模块中，剪切图片的大小要一致

③剪切图像的输出尺寸必须保持为奇数

④为了减小包的大小标你妹 sketch，所有切好的图片在冲印前都要尽可能的压缩（包越小，你老板越高兴，不然我就给你多发年终奖）

我还写过一篇关于图像压缩的文章，如果你还不了解，请点击下面：

这就是切割和标签的全部内容。 如果您在工作中不知道如何切割或标记，请多与开发人员沟通。 良好的沟通是解决问题的唯一途径。 不要独自思考； 如果您有疑问和疑问也可以给U留言。 上一期见！

5. 视觉恢复

一个完整的APP会经历这样的流程：立项→设计产品原型→设计疗效图→进入开发阶段→开发成功后进入测试阶段→测试并将问题反馈给开发者调试→多次测试确认没有Bug→提交市场并正式上线。

我们都知道，无论设计师的规格稿多么准确，开发出来的产品都会存在一定程度的偏差。 专业来说就是视觉效果的还原程度。 视觉还原度越高、越接近设计稿，APP越精细； 否则，情况会更糟。

所以这个时候我们就需要配合开发调整UI，从而更加接近我们做的疗效图（简单来说，就是给开发挑毛病，强调和疗效图不符的地方，很高兴吗？）

1px的差别，我也想摘下来（像素眼就是这样做出来的）

1、设计师如何进行视觉还原？

A.设计视觉调整文件

如果团队规模较大，建议设计一篇视觉调整文章，这样会提高整体的开发进度和效率。 由于团队人数较多，不可能你搬到iOS开发姐姐那里说需要调整一次，然后再告诉她一次。 你有时间，但别人可能没有时间，所以设计视觉调整优化文档是很有必要的。

视觉调整优化文档应该一目了然。 需要注明与疗效图的差异在哪里，应该改什么，是iOS调整、调整还是h5调整等。输出为png或jpg格式，最好是PDF格式，开发看起来方便。 比如写了颜色值，开发可以直接复制

B. 带上你的板凳，根据过去的开发情况调整UI

这些技术非常适合 3-4 人的小团队。 亲自上阵，口授问题，效率比较高。 您需要准备好您的疗效图和开发后的原型。 有对比就会有伤害（有图有真相，差异必须通过开发来改变）

2、如何实现疗效图的高度还原？

A. 标准可视化界面设计

需要根据各平台的UI设计规范来规范设计界面，并利用设计规范来理解开发，这是增强视觉还原的基本前提

B.可视化UI控件的规范输出

大多数情况下，为了赶上项目进度，都是先接口，后发布设计规范，所以需要尽可能保持接口设计和规范同时进行。

根据u姐目前的项目经验，可以先输出基本的控制元素规范，包括（颜色、文本、图标、遮罩、投影、按钮、输入框，或者一些控件）。 规范是一项庞大而复杂的工作，需要耐心； 流程注重每一个细节的准确性和合理性。

C. 切割规范，打标准确

我们的切割和标注是否规范、准确，直接影响视觉效果的还原程度，所以切割和标注一定要仔细，这样更有利于提高还原度

D. 多元与发展沟通

U姐还是说了一句话：沟通是解决问题最有效的方法，所以要多和开发姐接触、沟通。 如果条件允许，请坐开发； 遇到问题及时面对面协商解决，达成共识，修改、定型、解决。

6. 线上计划

当一个APP开发完成并通过测试后，就需要计划提交，很快就会上线。 在上线之前，我们的设计师也需要配合，做一些上线前的工作。 U姐带你看看需要做什么工作？

1.应用程序图标（）

A、iOS 图标：

这些是iOS开发工具Xcode提供的（应用程序图标）的规范（这是U姐专门请开发者写这篇文章的，而且U姐和开发的关系很好），乍一看是不是吓了一跳？ 开发是根据iOS系统的版本来设定的，但是你是设计师，你是根据iOS的版本来画的，所以虽然没有那么多，但实际上我的开发同学要求的是以下规格：

因为需要的图标太多了，不可能全部添加，所以只能选择最好的规格。 开发姐姐让我提供以下图标规格：

（高清屏）

（普通屏幕的）

6及以下主屏规格

6plus 的主屏幕图标规范

58x58搭配

80x80 上

注意：这里需要注意的是，iOS系统可以手动将图片裁剪成圆角，所以在提交图标时，只需要提交正圆的PNG格式即可。

我们来看看苹果官方的规范

B、图标：

的图标比 iOS 少。 我们只需要提供几个规格，还需要添加2套，一套是圆角的，一套是直角的，因为有些地方会用到。

由于的机型较多，不同屏幕密度的手机对应的图标大小也不同，所以U姐无法给你对应图标应用的位置。

2. 启动页面（图片）

这些也是iOS开发工具Xcode（启动页）提供的各种规范。 我们需要向开发工程师提供4个规格：

4/4秒

5/5s/5c/SE

6/6S/7

6plus//7plus

6plus//7plus横向规格，如果我们的APP支持横向模式，则需要创建横向启动页面。

注意：启动页必须为 PNG 格式。 建议在冲印前对所有图片进行压缩。

3. 商店页面（图片）

这是苹果官方在线提交页面，需要上传APP图标、版本号和应用描述等信息。

这是您需要添加商店页面的地方。 商店页面最多可以有5个png或jpg格式，还支持视频格式

这是化肥APP的店铺推广页面：

对于下面其他商店页面规格的添加页面，我们一开始就必须提供4组规格：

前不久，iOS开发老爷爷告诉我，现在商店页面只需要制定一套规范： ，就可以了，为我们减少了很多工作量

这是苹果官方商店页面规范：

应用市场有很多，但总体比较一致。 我们需要为商店页面提供两套规范：

,

U姐给大家回顾一下整个APP开发流程：

一个完整的APP会经历这样的流程：立项→设计产品原型→设计疗效图→进入开发阶段→开发成功后进入测试阶段→测试并将问题反馈给开发者调试→多次测试确认没有Bug→提交市场并正式上线。

当上线时，我们还需要制定一些基本计划：

设乌木案堂一间，香三炷，紫砂香炉一盏。 午时，气，拜三遍。 三炷香烧完后，就可以成功上线了。 这是必不可少的，所以不要忘记它！ ！ ！

以上就是《从0到1的APP设计》iOS系列的全部内容，希望对您有很大的帮助； U姐在这里讲的是一种工作方式，好的工作方式可以事半功倍，而且在具体工作中也要灵活运用。 一定要多和开发者沟通。 良好的沟通是解决问题的唯一途径。 如果还有疑问也可以给U姐留言。

U姐已经把所有字体、插件等都打包好了。

如有侵权请联系删除！