规范的UI设计流程是怎样的

第一个：用户故事  User Story
这一步是确定功能的。用户要用产品来做什么？如果一个产品要服务不同身份的用户，这些用户需要的功能也不一样，那就要一个个来分析了。

第二个：功能地图 Functional Map
写完用户故事以后，就知道要做哪些功能了，接下来就是梳理一下故事中涉及的功能，归纳出他们的关系。
并不是所有梳理出来的功能都要开发，这里可以引入一个产品研发的 MVP 方法，即最小可行化产品。比如你现在要做一个知乎，肯定是先做问答相关的核心功能，能满足早期用户最核心的需求即可，什么会员系统、关注系统、推荐系统等等看似必不可少的功能，都可以先不做。
第三个：功能流程图  Flow Chart
作为开发者，你知道了用户想要什么，也明确了要做哪些功能，接下来就是思考用户怎么操作才能完成他的任务或达到目的。有的产品逻辑会很复杂，所以这一步梳理清楚了，对于程序开发也很重要。
第四个：UI 流程图 UI Flow

经过上一步，你知道用户会怎么使用一项功能了，这就可以规划操作动线了，UI 流程图，就是在页面和页面之间的跳转流程，明确用户想完成任务，要经过多少个页面。 

第五个：线框图  Wireframe
线框图和前面的 UI 流程图有什么关系？看着很像啊。前面说了 UI 流程图是梳理页面之间的跳转关系，而线框图的信息就要详细多了，除了组件要画得更细致，所有的交互都要用文字详细标注出来，比如触发、回馈、状态变化等等。后面 UI 设计师看着这个能做视觉稿，程序开发看着这个能明白具体的交互方式。
第六个：视觉稿 Mockup
这部分设计师就很熟了，该怎么整就怎么整啦，只是注意一点要关注设计规范，你在这方面注意的越多，最后开发实现出来的效果就跟你的设计稿越接近。
第七个：原型  Prototype
用线框图可以做低保真原型，用视觉稿可以做高保真原型，这里推荐大家做的是，可以操作的高保真原型。既然要做高保真原型了，那肯定要做可操作的，你去找程序员帮忙做也可以，不过现在有很多好用的原型动效工具，你自己做也很方便，比如我下面这个可操作原型，就是用即时设计做的。
做可操作的高保真原型，用处有很多，设计师和产品经理可以用来测试和验证产品设计有没有问题，工程师可以看看各种交互效果到底是怎样的，或者给用户操作一下试试，看看他的反应。
以上 7 个步骤走完，一个完整的 UI 设计流程也出来了。

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设