关广辉博客 - 关注营销,关注被社会洪流裹挟的你和我。

原型图制作技巧!2个工具让你快速制作原型图

新媒体营运

  昨天的文章不会做H5,H5页面制作思路及方法!我们讲了H5的操作思路及方法,那么还有一个很重要的问题,当我们做了一个方案,想要呈现给客户、老板和同事,该如何呈现呢?

  文字描述,那可能达不到我们想要的效果,PS出一张效果图,那可能会花费很长的时间,今天就教大家制作手机效果图的方法。

  一、Axure RP

  

  Axure RP是一个专业的快速原型设计工具,需下载。下载完成启动软件。

  

  界面可以分为9个部分:

  (1) 菜单栏

  (2) 工具按钮栏

  (3) 页面地图栏:此栏显示你设计的页面及页面之间的树状关系,页面的上下文菜单可以删除页面,改名等。

  (4)
页面工作区:页面设计区,可以打开多个页面,点击页面标签,右键上下文菜单包括了打开关闭页面的操作。双击页面地图栏的页面,工作区打开该页面。

  (5) 页面属性栏:输入页面注释,设置页面事件,页面属性。

  (6) 控件栏:构成页面的元素,各种控件,拖动到页面上需要的位置。

  (7) 控件属性栏:每个控件的属性设置栏,包括三项:A:控件说明B: 事件设置 C控件属性:包括位置、字体、对齐、分组。

  (8) 模板栏:在整个系统界面的设计中,有一些内容可能会在多个页面中重复出现,这些内容可以被组织成一个Master

  (9)
动态面板管理栏:动态面板是Axure的核心概念,使用好可以做出很好的效果。动态面板包括多个状态,每个状态里边可以放置不同的内容,通过事件切换状态,使页面表现不同状态的内容。

  看起来有些复杂,但只要用过PS,打开Axure RP,点点每个模块,就会知道每个模块的作用了。

  二、墨刀 modao.cc

  

  1、快速创建应用

  注册/登录墨刀后,首先到达的是「项目管理页」,创建的项目都会展示在这个页面。

  点击右侧的按钮「创建应用」,可以选择空白应用,也可以直接套用模板。

  选择空白应用:有iPhone、ipad、Android、Web四种平台,选择后进入项目属性设置页,可设置不同的设备型号,也可选择Android的Customize来自定义原型尺寸。还可根据需要,上传个性化图标和启动界面图。点击创建,就进入到了工作区。

  

  直接套用模板:墨刀推出了丰富的模板应用,可先预览模板效果,挑选成功后点击「创建应用」即可。通过编辑模板你可以更快地掌握页面设计、交互设计的方法,也可在此基础上完善个人产品原型。

  

  2、创建页面结构

  良好的页面结构如同一个清晰的脑图,能够帮助制作者在复杂的产品原型中理清思路。墨刀创建页面结构的界面位于页面编辑器的右侧,可以快速添加新页面,并且添加多级子页面,最高可达5级。

  鼠标悬浮于页面列表上,点击三个点的省略符,可以调出「增加子页面」、「复制」、「项目间页面转移」、「删除」按钮,进行更多操作。在页面列表下方,有「页面回收站」,误删除的页面可以在回收站进行找回。

  

  

  3、创建页面内容

  墨刀创建页面非常的简单,从左边组件区拖拽组件到页面设计区,然后点击设计区上方的属性面板及工具栏编辑其细节就可以了。

  主工具栏,可对组件进行对齐、置顶/置底、组合、横竖屏、网格线等操作。

  副工具栏及属性面板,点击对应属性,可设置其位置、颜色、圆角、透明度、动效等属性。

  

  4、添加页面交互

  页面交互

  页面设计好以后,建立页面间的交互就更容易了,在墨刀点击组件,将组件旁边的虚线小锁链,将其链接到相应的页面就可以啦!

  在添加链接时,还可根据需求,设置不同的触发手势、定时器及动效。

  

  组件动画

  选中组件后,可以在状态设置面板上设置弹入、缩放、旋转等几十种动效。

  

  5、应用预览、分享及下载

  原型制作过程中,不但可以随时检查原型在pc或移动设备上的真实运行效果,还可以将原型分享给你的同事或朋友,让大家第一时间看到你的成果。

  项目预览

  点击工作区右上角的运行按钮,即可预览项目。

  

  分享

  在运行页面右侧列表有分享按钮,扫描二维码或者链接,就可以查看项目了。在这里,您还可以设置项目的访问密码、设置边框类型以及其他播放细节。

  

  下载/导出

  当你需要使用离线文件时,就需要用到下载/导出功能了,该功能是付费功能,墨刀支持导出以下几种格式的离线文件:HTML压缩包、全部PNG图片、当前页PNG图、安卓APK文件以及苹果IPA安装文件(IPA导出需单独付费申请)。离线文件可供演示、查看,但是不能用于编辑,墨刀的文件必须在线编辑。

  

  这款软件,小编亲身体验,比Axure
RP简单好用,大家可以试一试哦,最近介绍的都是一些实用工具,如果你在工作中遇到操作难题,可以留言给我们哦,我们会尽力帮您解答。祝周末愉快!

  关注昂云会公众号xinmeixuehui,回复【加粉】2个字,我们将免费教你如何给你的个人微信添加朋友,让你更好的做朋友圈营销。

本文信息
继续阅读
  • 上一篇 >:排除170/171虚拟号段手机号码正则表达式
  • 下一篇 >:新媒体营运技巧:新媒体营销内容的制作思维及方法
相关推荐
    新媒体运营必备的9种能力,不知道会吃大亏! IT行业营运人员福利,10个在线充电网站 微信增粉实操:微博热门话题操作步骤 7个公众号裂变涨粉工具,快速涨粉吧! 一张图带你全面认识微信 求赞、求转、求评、求阅、刷的方法提高文章阅读量的优劣