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

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

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

制作移动demo的app

之前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。

 

③、信息框架图:

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

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

 

④、线框图:

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

app线框图

 

⑤、视觉设计(有能力有时间也可以做成交互):

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

太来劲APP界面设计欣赏

25学堂还跟大家分享Facebook 的产品原型设计工具:Origami — Design Prototyping

以及尹广磊的原型设计外包服务。

每天更新,
全站高品质素材免费下载!