目前用到的原型设计工具总结

目前我行手机银行项目组使用的原型设计工作主要由我和需求工程师配合完成，我主要负责原型的设计开发工作。

需求为业务部门提出，由需求工程师与业务部门确认业务逻辑，页面要素，输入输出，要素控制等方面要求，并形成需求分析工作说明书，和简化版线框图。

我的工作开始了。

先介绍一下原型的几个种类吧，我自己的理解，原型分为低保真原型，主要可以是流程图，线框图等，高保真原型，静态图片和实机效果基本八九不离十，要求高分辨率，全UI要素的呈现，目前主流的设计工具有Sketch，PS等。PS大家都耳熟能详了，非常全能。而Sketch是最近开始火的移动设计工具，相对于PS来说，更加的轻量级，并且是矢量化的。在高保真原型的基础上，还可以加上动画效果，实现真机一比一的原型，在很多情况下动画效果是可描述的，而且UI设计师的描述开发人员也是可理解的，因此在大部分情况下动画效果非必须。Sketch有一个很好的基友，叫做Flinto，用来做动效设计真的很棒。目前我们所有的高保真静态页面全部用sketch来实现，所有动效都是用flinto去呈现的。

也就是原型和UI设计界的黄金搭档，Sketch+flinto。

以下是Sketch和flinto的官网

https://www.sketchapp.com

www.flinto.com/

除了官网之外，还有很多可以推荐的网站。

sketch it‘s me http://sketch.im 上面有大量的sketch设计的原型案例，有大量的素材可以参考，上面不乏有非常好的设计，甚至有人手绘了微信的全部UI

sketch中文网http://www.sketchcn.com 上面有sketch的中文说明，比较简单，论坛不错，另外也有一些sketch资源站的导航

矢量图标库 http://www.iconfont.cn 矢量图标库，大家可以下载，但是大部分设计都趋于平庸，大同小异，大家可以下载后快速形成原型。

BTW，目前这两个工具均只有MAC版，不过做UI设计大部分都是用MAC的吧。

作为第一篇博客，先写这么多吧，希望自己能够坚持下去，每天早上班个一个小时，写点东西记录下。

加油。