APP原型设计：高效制作APP DEMO的五个步骤

众所周知，目前国内外的原型设计工具很多，找一款适合自己的才是最好的。做原型之前头脑要有自己的思路和框架，包括可以借鉴的产品、需要的素材等。

25学堂推荐给大家的用的通用的原型工具是Axure，移动端可用Justinmind、 墨刀 。

之前25学堂的一名网友说道，试了各式各样的APP原型设计工具，最终在墨刀我完成了第一个完整的APP原型，使用过程中轻便易用，基本上大部分的效果都可以轻松实现，而且导出的html5原型还原度很不错。这款工具虽然是面向设计师的，但是小白用户也很容易上手，很节省时间呀！

移动APP设计师们特别是交互设计师往往需要承担制作Demo的工作，而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织，甚至向下涉及到视觉风格和互动反馈等各个环节;

打交道的人可能包括了产品经理(提供原始的产品概念，用户需求分析或者是功能完整的产品文档)，视觉设计师(提供UI风格和设计稿)，用户研究员(提出测试用例或者研究需求)。

25学堂特别推荐的视频教程：

1、 justinmind最新版发布和justinmind视频教程大全

2、 手机上快速制作APP Demo的交互神器-App.eal

3、 用Axure制作APP交互原型的视频教程【共6节课】

 

下面重点介绍高效制作APPDEMO的五个步骤：

①、脑图（思维导图）把讨论的结果理清：

功能模块，逻辑关系，信息架构，业务流程；

25学堂脑图制作工具推荐： 百度脑图（naotu.baidu.com）和思维导图。

②、流程图：

产品功能的流程，从注册-各功能使用图表的形式来说明这一过程；

流程图制作工具也可以用以上工具或者是word。

 

③、信息框架图：

这样比较直观的显示这款产品的结构；

功能设计是具体而言,一个用户如何使用一款产品,可以看做是对信息结构和流程的具体           体现。

 

④、线框图：

低保真的设计图（内容大纲、信息结构、交互行为）。

 

⑤、视觉设计（有能力有时间也可以做成交互）：

高保真的产品静态设计图（页面(流程)跳转逻辑和明确的文案设计及释）。