原型图


原型图

文章插图
如何用axure画app原型图:
原型图

文章插图
多学习,多练手



【原型图】画好原型后
1.下载Axure
2.如果是给itouch或者iPhone用的,比较好办,直接用320×480的分辨率画好辅助线,然后画原型
3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型
4.设置说明见下图:





5.用你的移动设备访问你生成的原型链接

6.把该页面创建一个桌面快捷方式7.完成


另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁 。



ui和画原型图的区别:
原型图

文章插图
一、主体不同
1、UI:是指对软件的人机交互、操作逻辑、界面美观的整体设计 。
2、原型图:是交互设计师与PD、PM、网站开发工程师沟通的最好工具 。
二、定位不同
1、UI:好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点 。
2、原型图:设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品 。利用交互设计师专业的眼光与经验直接导致该产品的可用性 。


三、作用不同
1、UI:在UI设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求 。用户交互要考虑到目标用户的不同引起的交互设计重点的不同 。
2、原型图:系统分析员,用来了解用户界面如何影响系统分析;设计员,用来了解用户界面如何施加影响及它对系统“内部”的要求 。


参考资料来源:百度百科-UI设计
参考资料来源:百度百科-原型设计
ui原型图用什么软件做:
原型图

文章插图
一、快速原型
快速原型的重点在于快速输出线框原型,交互功能匮乏,也可以说是低保真的原型 。其中常用到的工具有:
1、Pencil 。它是一款开源的手绘风格原型图绘制工具,部件比较丰富 。除了使用超链接没有其他交互,只能用于快速画出界面 。可以导出为PNG、pdf、web格式 。
2、lumzy 。无需注册、无需下载,直接在浏览器上打开即可进行原型设计的工具(英文网站) 。主要是用于设计草图 。功能较简单,交互少,部件不多 。虽然lumzy相对简单,但是上手快,适用于快速原型,也有很多UI设计师在使用 。它可以导出为pdf、jpg文档 。
3、MockupCreater 。能做界面原型无法做交互,即输出仅为概念草图 。目前只支持PNG、RTF和PDF三种静态文件格式导出 。
4、MockupBuilde 。它同样也是草图原型,部件相对lumzy、MockupCreater要多一些,只能使用超链接实现交互效果 。目前只能导出PNG、PDF格式
二、交互原型
交互原型相对快速原型而言,除了能做出线框原型,还能实现丰富的交互功能,在项目排期时间充裕的情况下,建议采用交互的原型设计 。此外这些交互原型也可以舒服功能高保真的原型 。其中代表工具有:
1、腾讯UIDesigner 。它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型 。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗 。2.0版本功能交互全面,响应速度也较快,但是针对PC平台应用设计的 。UIDesigner预览很方便,可以导出exe文件 。
2、Flash 。从曾经最流行的Flash MX、Flash 8.0一直到现在的CSN,迭代了各种版本,像PS一样历史悠久 。它功能强大,熟练情况下几乎能做出想要的各种效果甚至UI,甚至可以直接做开发,但是对技术要求高,做出好的效果需要懂点AS脚本 。导出方便,除了本身的swf格式,exe、图片格式乃至web形式都可以导出 。
3、Axure 。是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档 。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 。
三、高保真原型

推荐阅读