UI实战教程！做设计稿前应该做哪些准备工作？

前面几篇讲了《一款APP设计的从0到1》这些系列文章，总共6部分，目前为止已经讲了前4个部分，还剩下视觉还原和上线准备篇，今天插播一下关于APP设计时该做的准备工作和一些设计师必须要知道的UI常识。

往期回顾：

1. 《从零开始做APP 系列之项目立项+预估时间篇》
2. 《从零开始做APP 系列之界面设计篇》
3. 《UI实战教程！从零开始做APP 系列之切图标注篇》

一般来说，移动UI界面设计包括两个方向，分别是图形（视觉）设计和交互设计：

• 视觉设计主要负责这个UI看起来是否美观，是否有设计感等等。
• 交互设计主要负责这个UI用起来顺不顺手，上手容不容易等等。

更重要的是移动APP UI 设计的魅力在于，你不仅需学会使用一些合适的技巧，更要有效的理解用户与程序的交互关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都需要完整一致。

一. 如何进行一些基本的准备工作？

• 一定要玩机器，玩APP。包括iOS、Andorid、ipad、watch等等智能设备。
•  熟悉各个平台的界面设计规范。
• 学会欣赏几款不错的APP设计或者是好的APP设计模板。
• 无论是你设计多大尺寸的UI,一定要有一台测试机也就是说必须真机测试。
• 将review做为移动UI工作的一个阶段。（备注：review就是评论、反馈的意思。这就是说，我们移动APP UI设计完成一些模块之后，一定要进行阶段性的评审和总结，修改、反馈。）
•  培养一个靠谱的程序小伙伴。向一些有经验的客户端程序员学习和了解更深的设计规范。

二. 必须了解的一些APP UI设计原则

UI设计的一致性

用户来到你的APP，脑子里会保持着一种思维习惯，你的 UI 需要保持一致，以免用户的思维方向被打乱。

UI设计的流畅性

你应当分析一下，自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为，确保他们能从某个地点跳出，能够毫无障碍地退出。不会让你的用户在你的设计作品当中迷路。

UI设计的群体特征

要设计有效的移动 UI界面，必须对你的用户群有所了解，不同的用户阶层对不同的设计元素有不同的理解，17~25 岁年龄段的人，和 40~55 年龄断的人有不同的喜好。

UI设计的简洁性

UI 设计越简单，用户体验越好，不要滥用设计元素，不要使用拥挤的界面。目前来说，很多手机APP设计的非常简约，简约设计可以增强 UI 的易用性，可以让用户不必关心那些无关的信息。

UI设计交互要合理性

最好的设计不是用来看的，是用来体验的。如果交互做的很差，谈何体验。而且不要混杂多种交互效果在一个页面，会让用户感觉太“刺激”而反感。

三. 设计师必须要知道的一些常识

我觉得设计师都应该要知道一些公司其他部门的工作内容，起码找人讨论不会抓错对象。本文整理出较常见的各种缩写和定义。主要是给设计师看的所以简单说明，想深入理解可以参考 SA 、 SD 、 RD 、 PG 、 PM 、 DBA 、 MIS （自备梯子）这篇和 Wiki，网络上也有许多文章介绍各个职务的工作内容。

PM：Product Manager 产品经理

针对某一项或是某一类的产品进行规划和管理的人员，主要负责产品的研发、制造、营销、渠道等工作。（管进度、各部门沟通协调、被客户骂、和程序各种撕）

SA：System Analyst 系统分析师

通过需求分析确认系统的需求，并进而形成系统产品设计的人。 通常他们也会涉及可行性评估、项目管理、开发前评估、需求验证等工作。（简称：这个系统要做什么？）

SD：System Designer 系统设计师

根据领域模型，再配合实体的平台，考虑其效能、稳定、分散与安全性等，所建构而得的软件规格。（简称：这个系统要怎么做？）

PG：Programmer 程序设计师

从事软件撰写，程序开发、维护的专业人员。以某种程序语言为工具，给出这种语言下的程序。包括分析、设计、编码、测试、排错等不同阶段。（最常被叫做码农或程序猿的职业。）

RD：Research & Development engineer 研发设计工程师

广义：是一种工作类型，凡是研究或开发的人员都算，包含 SA、SD、PG。

狭义：真正在作研发的单位，搞创新，很烧钱，还不能确定产出。

MIS：Management Information System 网管人员

工作范围包含利用计算机硬件、软件和网络装置，进行讯息的收集、传递、储存、加工、整理的系统，以提高组织的经营效率等等。（俗称管机器的，大至主机断线小至个人计算机蓝白画面四国语言都会出动他们。）

QA：Quality Assurance 质量保证工程师

通过建立和维持质量管理体系来确保产品质量没有问题。

QA的目的，是要在产出产品的过程中，使用正确的方法来进行，而 QC 的作用，则是当产品完成时，会去检查所产出的产品是否正确。

Planner：企划

负责构思目标、分析现况、归纳方向、判断可行性，一直到拟订策略、实施方案、追踪成效与评估成果。（如果懂技术和实作会让很多人不用加班加到死。）

Sales：业务

专门做销售营销的工作者，负责将公司之产品销售给客户。（某些时候要把产品卖掉会夸大其词，然后实作人员就哭了。）

F2E：Front-End Developer 前端工程师

主要负责写 Html、CSS、Javascript，接 API…等等。（要和设计师合作、常常想翻设计师的桌，偶尔会拿到 PS 直出的 HTML，比表格排版还惨…基于上述原因，切图常常变成是 F2E 的工作。）

UX/UE：User Experience Designer 用户体验师

设计流程包括：目标用户设定，满意度的范围和主题设定，用户需求的功能，互动研究，系统回馈和最终的报告与成果。（应该是整天和数据玩、做实验、写报告的一群人，不过都大多抓去画 Flow 和 Wireframe。）

UI：User Interface Designer，用户界面设计师

应该是画 Flow 和 Wireframe、设计接口的人。（常常和 VD、UX 混在一起讲，能明确定义并区分的人和公司很少。）

VD：Visual Designer

拥抱Photoshop、Illustrator、Sketch…绘图软件的人，退件修改和熬夜是基本。

希望这篇文章大家可以学以致用。

因为设计师不是艺术家，不像搞艺术的那么随性。因为设计师设计的产品是给人们用的，关乎每个使用者的感受。艺术家不用考虑观者的感受，只管倾述自己的内心世界并充分展示个性。设计师注定背上神圣的使命——设计，让生活更美好。

最后，附上完整的APP设计和开发流程：

项目启动→建立产品原型→形成效果图→进入研发阶段→研发成功后进入测试阶段→测试过后将问题反馈给研发人员进行调整-→多次测试确认没有bug。

欢迎关注作者公众号：UI妹儿

「从零开始设计App 之UI规范系列」

1. 《一份超实用的设计规范制定指南》
2. 《实用必收！如何建立一套UI设计规范？（附众多神器）》
3. 《基础小课堂！从零开始教你做高保真原型图+UI 设计规范》
4. 《UI丨历经实战，我总结了这四个界面设计规范的经验》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com