引用锤子科技视觉设计总监——罗子雄在重庆TEDx活动上说的一小段话

每当看到美妙的设计的时候，很多人心里面会有一种冲动，这种冲动会让 们想去创造新的东西，创造美妙的事物

常说用户体验用户体验，用户使用 的软件，第个会接触的是什么？没错，图形化界面(GUI)，简称UI，对于用户而言，最直观，给用户留下第一印像的是往往是程序的界面，而非功能！人，总喜欢美的东西，对吧？假如一样的功能，决定用户取向的，往往是UI！精美的UI！当然还有贴心的人性化操作等！下图两个计算机的App界面

先不说功能，从UI上讲， 喜欢哪个？由此，个产品的UI是非常重要的，而产品的界面原型设计 是由公司的产品经理+美工来完成的，需求分析 ->界面原型设计 ->来写代码！可能 觉得界面原型对而言并不没什么作用，但假如 以后想自己开发App呢？又或者 升做产品经理呢？嘿嘿！世事无绝对，以后的事，谁知道呢？公司的话，大部分使用的都是Axure Rp，但是这个东西比较难用！除了这个以外还有其他很多的原型设计工具

• Pencil
• Framer
• Shireframe
• UIDesigner
• Balsamiq Mockups
• Mockup Builder
• Mockup
• FrameBox
• iPhone Mockup
• GOOFLOW
• WireframeSketcher
• FluidIA
• Indigo Studio
• Origami
• Quartz Composer
• Justproto
• Avocado
• PaintCode
• Mockplus(摩客)
• 墨刀等....

使用过的是两个国产的界面原型设计工具，他们分别是Mockplus(摩客)和墨刀本文会简要的介绍下Mockplus的用法！

Mockplus原型工具的使用

有网页版以及客户端版供 选择Mockplus官网

Step 1注册个 自己的账号，然后新建文件进入编辑界面！(时间关系，这里 直接试用)然后弹出个原型风格的对话框给选择素描跟线条！

选择线条

要做的就是从左边的组件栏中啦控件到手机界面上， 可以双击某个控件，自定义的样式，比如颜色，背景图片等！

Step 2交互实现界面原型除了界面外，肯定是少不了交互的，这里做个简单的新闻应用的交互例子给 体验下在其中个新闻类别中添加跳转链接，

接着可以点右上角的播放按钮

就可以看具体的交互了，PS:这里可能是网页版的问题，有些图片显示不出来！

大概的用法就这些， 可以自己摸索摸索，另外，若生成文档是要升级为付费用户的哦！个月6元不贵，就个早餐钱，当然若是自己玩玩而已就没必要开了！

Android自带DroidDraw工具设计Android界面

其实Android也给提供了个"老掉牙"的界面设计工具，跟上面这些高大上的界面原型工具相比，差几十条街，可以理解成个分离的ADT，比ADT高级一点的功能就是自动生成代码...对于很少接触原型设计的朋友来说，花1，2分钟就可以掌握这个工具，还是比较值得！

工具界面

图示已经写明相关的操作了,很简单,实践是检验真理的唯一标准,自己下来试试吧!!

软件下载droiddrawr.jar

本节小结

介绍了下界面原型设计的概念，轻量级Mockplus(摩客)的简单实用，以及Android自带的DroidDraw工具，内容比较简单，还需 自行实践理解！