介绍五款主流原型设计工具junnie

介绍五款主流原型设计工具,分别是Axure、BalsamiqMockups、墨刀、Justinmind和iClap。

AxureRP是美国AxureSoftwareSolution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、VisualStudio、FireWorks要快速、高效。

功能:用于制作快速原型的软件。也可以绘制中保真原型草图。

应用人群:产品经理、交互设计师、UI设计师、网页设计师。

优点:

应用灵活,可拓展性强,拥有超级强大的交互制作能力。

高保真的原型设计工具,名声大,专业性高。

缺点:

规范性较差。编辑能力着实强大,变相导致规范性差,管理不便。

难度稍大,入门较慢。鉴于其比较复杂,学习难度较大,新手劝退。

本地型软件,可以下载html文档预览,手机预览不方便。

基本使用方法:

1.元件的使用:在RP中使用软件需要选择后拖拽到工作区使用即可。

拖拽矩形左上角的三角就可以进行圆角设置。

点击右上角的圆可以更改它的形状。左上角的三角形消失。

旋转,绘制好元件后选择它,按ctrl键,键直接拖拽定界框周围即可。

2.图片的使用:

直接双击当前图片元件即可。也可以在选择元件后的右侧的属性中导入即可。

可以直接复制粘贴到AX中进行使用,支持GIF格式。

3.占位符的使用:直接在里面写入内容,双击即可。

4.放大与缩小:按CTRL键前后滚动。

5.页面对齐:页面的内容在生成原型时在浏览器的左侧或中间。一般情况下是在中间,但是一定要取消选择后方可以更改页面对齐方式。

6.分割图片:选择图片,在右侧属性中选择裁切工具,点击需要切除的部分。也可以在图片上点击右键分割图片。选择那部分就切除那一部分。

BalsamiqMockups出自加利福尼亚州的Balsamiq工作室,创始人Peldi在2008年6月推出了这款手绘风格的产品原型设计工具,并广受好评。在Web产品设计中,BalsamiqMockups是产品设计师绘制线框图或产品原型界面的利器。在产品设计的需求阶段,低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间,在BalsamiqMockups出现之前,流程图可以使用Visio,高保真DEMO可以使用Axure,但并没有好用的草图设计工具;在产品设计管理中,我们通常在产品的业务流程和数据流转已经相当明确时才开始进一步考虑产品的结构层和框架层,虽然此时纸、笔、白板都是非常简单方便的交流工具,但是他们的最大劣势就是——很难将有价值的原型保存下来。BalsamiqMockups的出现完美的解决了这个问题。

优点和特色:

易用:UI控件支持自动拖拽,并且可以实现自动对齐;

美观:手绘风格,简约清爽;

丰富:从按钮到输入框,从导航条到页面、表格,甚至包括了最潮的Iphone元素;

方便:对元素的修改除了工具栏外,还可以使用隐藏编辑框,支持快捷键;

兼容:可使用XML语言保存元素,也可以导出PNG图片,可以插入到任何项目;

跨平台:Windows、MacOS、Linux下都可以使用,还有能集成在Confluence,JIRA,和XWiki中的版本,如果没下载桌面版,还可以直接使用网页版的BalsamiqMockups。

应用范围:BalsamiqMockups最好用于商用web产品设计中的低保真线框图或者草图设计,相对于纸和笔,它不够灵活;相对于Axure,它不够精确。

窗口中间是画布,上方是工具栏(支持拖拽和快捷搜索工具),左侧是在不同的画布间进行切换,右边是显示和调整选中控件的参数。

新建控件:在工具栏中找到“Browser”并将其拖拽到画布中

单机画布空白处显示窗口效果

要想在浏览器窗口中显示文字,我们需要“Title”和“Text”控件,在右上角快捷搜索工具中输入名称以找到该控件,并拖拽到浏览器中,双击控件即可编辑内容

锁定/解锁控件:右键点击控件菜单中第一项可锁定控件,右键点击被锁定控件菜单中第一项即可解锁。

组合/取消组合:选中第一个控件,按住Ctrl选中第二个控件,再按Ctrl+G即可快速组合,再按Ctrl+Shift+G可取消组合。

保存/导出:

Ctrl+S可快速保存工程.bmpr文件,打开时仍然可以编辑

Ctrl+R可快速导出.png图片,不可编辑仅可查看

墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。

适用平台:浏览器注册使用,Windows、Mac桌面客户端,同时支持iOS、Android端预览;

适用范围:墨刀为企业级用户提供权限控制、项目管理及基础项目数据统计等功能。

功能介绍:

操作简单:简单拖拽和设置,即可将想法、创意变成产品原型。

演示:真机设备边框、沉浸感全屏、离线模式等多种演示模式,项目演示效果逼真。

交互简单:简单拖拽就可实现页面跳转,还可通过交互面板实现复杂交互,多种手势和转场效果,可以实现一个媲美真实产品体验的原型。

素材库:内置丰富的行业素材库,也可创建自己的素材库、共享团队组件库,高频素材直接复用。

非常容易做交互,操作简单,效率极高,适合初学者。

界面优美整洁。简洁的界面在一定程度上有助于提高开发人员的效率。

强大的演示能力。墨刀在轻量级的移动端原型制作更加迅速,展示更加方便。

应用局限性。墨刀专注于app原型设计,在后台和网页稍有乏力。

归档能力不足。墨刀更倾向于链接、二维码形式输出,不能以文档输出

空白项目:

模板项目:

创建模板项目有包含各应用组件的模板页面,十分便于我们借鉴与修改;

空白项目的创建操作:在下方输入项目名以及选择原型的平台后,点击创建,进入项目首页,

中间的是项目的编辑页面,中部的左侧以及顶部边框标注着的数字是像素,用来准对页面的宽度与高度以及页面内组件的位置;最左侧一列素材工具栏——用于直接将素材拖入页面中,页面栏——用于编辑和切换各页面:

右侧工具栏包含组件及图标等素材,最右侧外观栏——当选中某个组件时可在其中编辑外观的各种参数:

上方工具栏最右侧的运行按键可以模拟运行时的页面操作:

Justinmind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。

JustinMind的一些特性:

使用JustinMind,你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状,如矩形和文本,还有特定的组件,如菜单,表单或数据列表。

关于手势的交互效果:JustinMind提供了多种触屏的交互效果,例如滑动、缩放、旋转,甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。

可以创建自己的组件库,JustinMind为iPhone,iPad,黑莓,Android提供了多样的组件。你可以创建自定义组件库,方法是将排列好的单个组件放在一起,并将它们集体框选拖动到组件库。

更为便捷的定义样式:相比Axure,JustinMind更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性。

JustinMind可以导出原型的所有信息到MicrosoftWord,能够一键生成及其规范的文档。

共享原型进行测试:JustinMind支持将原型上传到服务器并提供给他人进行测试,为产品的改进做出了良好的贡献。最为特别的是,基于usernote的服务允许你将原型放到移动设备上进行测试。

更友好的定义交互方式:在JustinMind中,你可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观,如进度条。

同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。

全球范围内的复用、数据共享。每一个模板都让这一套组件有不同的视觉风格,变量允许将数据从一个屏幕迁移到另一个,甚至使用它们来检查是否满足条件。

事件与交互:事件是JustinMind的一个关键功能,JustinmindPrototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义,一个特定的元素,这将作为事件的触发源。

关于链接的设置

使用链接最简单的操作就是,例如,点击Button跳转到Screen3,那么直接将Button拖拽到Screen3上面就可以了。

iClap是一个以产品为基础,集成员工日常所需工具,打通项目工作流程,实现员工自我工作管理、项目管理和企业管理三个体系协同的管理规范系统。iCLap,以产品自身为出发点,通过不同职位的准数工具彻底串联企业人员,再将工作产生的内容进行沉淀、处理、归档、共享,打造一个沟通与协作的闭环,以实现对产品,项目以及企业的规范化运营管理。

iClap的主要功能:

在线批注:APP运行中直接将批注生成任务,处理任务时将场景还原,直观高效。

语音任务:将语音精确转换为任务,自动识别任务紧急程度与对接人。

即点即用:多个APP项目同一客户端管理,无需逐一下载。

简单发布:版本升级只需后台上传一次数据,客户端自动更新。

Bug跟踪:自动检测APP漏洞并生成报告,让bug无可遁形。

插件管理:多元化模块插件管理,满足企业多方面需求。

会议纪要:项目组进行实时、群组沟通,自动生成会议纪要。

人才培养:以DevStore为平台提供技能培养,智能匹配发送给各岗位人员,有效提高人员综合素质。

1.通过iClapSDK进行产品管理

下载iClap产品管理SDK:进入iClap官网页面,点击“下载”模块,选择对应的SDK下载。

将SDK嵌入你的APP:SDK下载成功之后,即可将iClap的产品管理SDK嵌入到你的APP内。SDK嵌入有详情的说明文档。注:每个项目的APP都有唯一对应的appkey和secret,不可交互使用。

打开APP进行产品管理:SDK成功嵌入你的APP之后,在手机桌面打开你的APP,即可见iClap悬浮图标,点击可打开管理菜单,即可进行产品管理和项目协作操作了。

2.通过iClap客户端进行产品管理

上传APP安装包:项目创建成功之后,进入项目页面,点击上传新版本,上传一个项目最新的安卓或者是IOSAPP版本,也可以上传效果或者原型图,原型图建议适配手机格式,效果更佳。

下载iClap客户端:APP版本上传成功后,在iClap官网扫描二维码下载iClap客户端

在iClap客户端打开APP:打开iClap客户端,进入“我的项目”,点击APPicon,即可直接打开APP,点击批注图标,即可进行批注操作。

在iClap客户端进行产品管理:批注完成后,可在iClap客户端项目管理详情内查看,并且进行包括任务、批注、项目、成员和文件等产品管理工作。

通过查询收集这些资料,了解到很多主流原型设计工具的特点和用法,在软件开发时可以根据不同的需求选择不同的原型设计工具,像Axure内容精确,使用率也很高;BalsamiqMockups内容更加美观和丰富;墨刀非常容易做交互、操作简单、效率极高、适合初学者;JustinMind相比Axure更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性。iClap主要是用来软件测试的,通过对这些工具的了解,知道了更多关于软件开发的知识,明白了原型设计在软件开发中的重要性,原型设计是软件开发的初始阶段,根据需求为软件创建原型的过程,原型通常用于演示,测试,沟通等。原型通常只是表现了产品的一部分特性,但原型设计的投入在整个的软件开发过程占比较小,且直接确定了之后的软件开发方向,投入产出比非常高,所以这个过程非常重要。

THE END
1.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
2.自媒体运营辅助工具汇总大全史上最全自媒体运营辅助工具汇总20.美图秀秀 21.可牛影像 22.天天P图 23.光影魔术手 24.photoshop 25.视频剪辑软件 26.xmind(思维导图软件) 27.ulesd 28.gif动画制作软件 29.gidot 30.typesetter排版助手 31.网络编辑超级工具箱 十、新添加工具 01.免费在线制作思维导图、流程图、UML图、界面原型设计、组织结构图 https://www.wandongli.com/news_detail.html?id=27545
3.→MarvelApp(原型编辑器Marvel(交互设计工具))v2.0.1安卓版原型编辑器Marvel帮助用户快速设计网页和手机界面,操作简单,易上手,支持多种移动端设备,支持绘图、从相册中导入、从云中添加等多种添加方式,用户可以自由调整图片大小,不写代码,也能轻松创建自己的原型APP了。 使用说明 打开Marvel,点击右上角的加号就能开始创建项目了。首先要选择App 的使用设备,包括 Nexus 5、HTC https://www.fxxz.com/azsoft/136169.html
4.2024年度原型图工具TOP10,超实用!原型图工具是设计师们的利器,它们可以帮助我们在早期阶段就理解和预览我们的设计。并且,通过原型工具的使用,我们能更准确地交流设计思路,节省我们的时间和资源。近年来,许多优秀的原型图工具进入了市场。以下是我们认为将在2024年最突出的实用的10款原型工具,每一款都有自己独特的特性和优势。 https://pixso.cn/designskills/2024-top-10-prototyping-tools/
5.什么是原型设计?入门最全讲解指南在产研工作环境中,原型设计的本质是一种交流工具,通过原型设计,产品经理可以准确地向设计师以及开发人员传达产品定位、目标、功能、构架、流程等信息,还可以与客户、投资者和利益相关者进行沟通和反馈,从而改进产品设计并增加其市场竞争力。 伴随互联网的发展,目前最常见的原型设计方式是通过原型设计工具创建原型图。原型https://www.douban.com/note/850214495/
6.2024年界面原型设计软件TOP10排行榜!2024 年界面原型设计软件排行榜:即时设计、Adobe XD、Axure RP、Mockplus、Figma、Balsamiq、Origami Studio 、InVision Studio、Proto.io、Marvel。本排行榜旨在评估和推荐在当前市场上表现突出的界面原型设计软件,帮助用户快速选择适合他们需求的工具。https://js.design/special/article/interface-prototyping-software.html
7.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
8.Pencil原型图绘制工具下载Pencil原型图绘制工具最新版是一款原型图绘图软件。Pencil原型图绘制工具最新版的界面已经达到主流的绘图软件的标准了,常见的功能有画笔工具、图形、图标、跨页超链接、剪切浏览器、多背景文档以及各种原型设计模板等。Pencil原型图绘制工具的图标模型都是设计好的模板,直接拖拽到工作区域进行编辑即可,很适合制作流程图或者http://mip.downza.cn/soft/289358.html
9.神器一箩筐:创建高保真的移动Demo(工具篇)优设网神器一箩筐:创建高保真的移动Demo(工具篇) Zoey:学习交互设计的童鞋,都躲不过画原型图这个必考科目。如何创建保真度(视觉、交互、内容)都较高的 Demo 呢,今天腾讯设计师分享的好文,除了推荐很多简单易上手的画图神器,更宝贵更值得细读的是她的思路,完全体现了一个设计师该有的严谨与细致。童鞋们感受一下。https://www.uisdc.com/fidelity-mobile-demo-tools
10.原型图都可以用什么软件制作?推荐这9款原型图用什么软件做原型图都可以用什么软件制作?推荐这9款 对于设计师来说,一个有用的原型设计工具可以大大提高他们的工作效率,节省很多时间。当然,不同的原型设计工具有一定的差异!那么哪个原型设计工具更好呢?以下是一些有用的原型设计软件,有需要的朋友可以根据自己的需要进行参考。https://blog.csdn.net/weixin_44070413/article/details/134957069
11.中文版Dreamweaver/Firew通过本书的学习,读者可以学会应用这些软件工具进行网页编辑、网页效果图设计、网页图像处理、网页动画制作等,并能综合应用这些软件工具来创建个人站点或其它各类网站的前端页面。 书名 中文版Dreamweaver/Firew 类型 计算机与互联网 出版日期 2014年1月1日 语种 简体中文 ISBN 7121220695 作者 张江波 王海荣 出版社 电子https://baike.sogou.com/v84478517.htm
12.实体店搭建小程序流程2. 制作原型图 使用设计工具(如Sketch、Adobe XD、Figma等)制作小程序的原型图,包括首页、商品列表页、商品详情页、购物车页、订单页、个人中心页等。原型图应包含所有页面的布局和交互设计。 3. 设计UI界面 根据原型图设计UI界面,包括页面布局、按钮样式、文字排版等。可以使用设计工具制作高保真效果图,确保界面美观https://aliyunyh.com/4387.html
13.9款原型设计工具与Sketch的强强组合,轻松构建交互原型!Sketch相关资源:2018年不可错过的19款Sketch线框图套件 2. Mockplus + Sketch Mockplus是更快更简单的原型设计工具。自发布以来深受国内外用户喜爱,适合软件团队、个人在软件开发的设计阶段使用。简单快速的交互功能,能够很好地表达设计,帮助设计师「关注设计,而非工具」。随着越来越多设计师对协作功能的需求,他们也https://cloud.tencent.com/developer/article/1387446
14.产品经理必备14大效率工具人人都是产品经理作为一名互联网产品经理,在创造一款产品时,从了解需求、验证需求、做原型、评审到写PRD、跟进开发、测试……面对这漫长复杂的工作流,必须要使用一些工具软件辅助自己的工作,比方说思维导图、文档写作、原型设计方面的工具。今天就为大家分享一些产品经理常用的工具。 原https://www.woshipm.com/pmd/250261.html
15.耐下载安装耐app下载v1.5.6安卓最新版摹客由1个平台(摹客协作)和2个工具(原型工具摹客RP、UI工具摹客DT)构成, 产品研发团队可以使用摹客进行原型设计、UI设计以及交付Figma/Sketch/PS/XD/Axure设计稿,在线评审设计,自动标注切图,团队高效协作。 摹客APP 是摹客官方出品的助手工具。通过 摹客APP 可以在手机端实时查看原型,更好地掌握项目进度。 摹客app功https://m.qqtn.com/q/813532
16.收藏大牛设计师常用的资源站原型设计 InVision?—?www.invisionapp.com Mixture?—?www.mixture.io Flinto?—?www.flinto.com Gridset?—?www.gridsetapp.com Marvel?—?www.marvelapp.com Webflow?—?www.webflow.com Red Pen?—?www.redpen.io https://www.imooc.com/article/details/id/11643
17.15款在线画图软件深度测评:第一款绝对不要错过在当今数字化时代,在线画图软件成为了创作、设计和表达创意的重要工具。无论您是专业设计师还是创意爱好者,这些在线画图软件都将帮助您实现创意的无限可能。本文将为您介绍15款在线画图软件,从功能特点、优缺点和适用场景三个方面深度测评,助您找到最适合您需求的工具。 1. 流程图和图表软件 (1)博思白板boardmix 博https://boardmix.cn/article/15-online-drawing-softwares/
18.ProcessOn思维导图流程图在线画思维导图流程图ProcessOn是一款专业在线作图工具和知识分享社区,提供AI生成思维导图流程图。支持思维导图、流程图、组织结构图、网络拓扑图、鱼骨图、UML图等多种图形,同时可实现人与人之间的实时协作和共享,提升团队工作效率。https://www.processon.com/
19.几个常用的产品原型设计工具有人说产品经理是产品的灵魂,有人说产品经理是企业的核心。对于我们未来想要做产品经理,获得较高的收入,实现自己对产品的诠释,原型图是肯定绕不开的。即便刚毕业我们去做产品助理,原型设计也是产品助理的主要工作。 下面跟大家聊聊几款产品经理常用的原型设计工具,产品工作感兴趣的同学可以用来熟练下使用技巧,未来也提https://www.jianshu.com/p/9d9bbd31b0b5
20.前QQ浏览器产品负责人:从0到1深度认识产品经理三、设计产品-如何设计一款APP 产品需求文档=简单的描述产品功能架构、市场背景、用户需求情况、版本管理和规划。 用户原型图=产品经理会借助工具简单画产品的交互原型,给交互设计师参考。交互设计师会在这个基础上通过专业的知识再去细化,降低错误,或者通过界面的标准,再去优化。同时,视觉设计师会根据产品的原型图考虑https://www.digitaling.com/articles/20887.html
21.原型设计工具用哪个比较好?4种原型设计工具优缺点对比分析作为专门的原型设计工具,它比一般创建静态原型的工具,如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks等要快速、高效。它专为Rapid Prototype Design而生,可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如UI、UE等等https://www.niaogebiji.com/article-105555-1.html