原型设计(前端原型设计工具)

发布时间：2022-12-17 17:25 所属分类：热门主题浏览次数：

　　原型设计

　　摹客是一款专注于原型规划的生产力东西，其原型规划东西完全根据Web网页，在便携性上做到来了极致，你可以在任何有互联网的地方运用它来进行原型规划。一起它支撑将Axure、MP等原型规划文件导入，进行线上开发，可移植性也有所体现。一起其相较于其他原型规划东西最大特色即为可以多人协作开发。它支撑以团队为单位开展规划，一定程度上处理了多人进行原型规划时的协作问题。

　　运用办法

　　1、登录，挑选新建项目

　　2、挑选RP在线规划

　　3、挑选所要规划的方针设备

　　这儿挑选web

　　4、进入规划页面

　　点击1将显现一切规划的页面，点击2将显现一切可用的页面组件和元素，点击3将显现一切可用的矢量图标，点击4将展现画板的层次结构，点击5将展现项目一切运用的色彩、文字、组件款式。

　　5、规划一个主页面

　　这儿我将以我们的项目为参阅进行规划

　　5.1bar规划

　　增加了一个输入框和一个文字元素，其余运用图标元素完结规划

　　5.2主页内容规划

　　6、项目主页规划

　　增加了侧边栏和项目主页显现的时间轴，运用了热区、文字、线条等组件

　　7、增加页面逻辑跳转

　　为主页点击项目跳转到项目页这一逻辑增加交互动作

　　8、点击演示，对页面作用进行预览

　　预览链接项目预览

　　Axure

　　简介

　　AxureRP是Axure公司的一款快速原型规划软件，它相较于MockPlus可以愈加调整页面元素的款式，一起支撑导出html原型、标准说明文档以供前端参阅。

　　Axure侧重于关于页面作用的规划，而MockPlus侧重于关于初期体系原型功用的表述。

　　软件截图

　　图中3是摹客中的1，为页面管理器；图中5为摹客中的2，为组件库；图中6为摹客中的5，管理多个组件；图中右侧栏管理的是当前组件的款式和响应，与摹客中也十分相似。

　　总结

　　通过关于MockPlus的具体介绍和运用以及关于Axure的简单比较，发现了MockPlus和Axure在原型规划上的区别，MockPlus愈加合适原型规划初期，需求快速确认页面款式，组件跳转逻辑的阶段，它相对精简的组件库和跳转设置办法可以让规划师快速完结工作，并且得到一个不错的画面作用。而Axure则愈加倾向于原型规划后期，需求确认终究原型，并对原型高保真切图交由前端进行页面实现时，Axure可以对页面细节和组件细节进行微调，并可以快速导出html，所以愈加合适原型规划后期。

　　前端原型设计工具

　　1.Axure

　　AxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速产品原型东西，让担任界说需求和标准、规划功用和界面的专家能够快速创立运用软件或Web网站的线框图、流程图、原型和标准说明文档。作为专业的原型东西，它能快速、高效的创立原型，一起支撑多人协作规划和版别操控办理。

　　长处：变化无常的操作，自带组件库并支撑强壮的第三方组件库，供给强壮的交互支撑，完整的教程及支撑文档，支撑原型预览。

　　缺陷：学习曲线较高，性价比不高，专业需求度高。

　　适用人群：适用于寻求强交互作用及细节产品司理及规划师，需求具有必定经历或较强专业性。

　　axure的运用环境经过下图进行说明。

　　1、主菜单和东西栏：执行常用操作，如文件翻开、保存文件，格式化控件，主动生成原型和标准说明书等操作；

　　2、站点地图面板：对所规划的页面（包括线框图和流程图）进行增加、删去、重命名和组织页面层次；

　　3、控件面板：该面版包含线框图控件和流程图控件，另外，你还能够载入已有的部件库（*.rplib文件）创立自己的部件库；

　　4、模块面板：一种能够复用的特别页面，在该面板中可进行模块的增加、删去、重命名和组织模块分类层次；

　　5、线框图作业区：线框图作业区也叫页面作业区，线框图作业区是你进行原型规划的首要区域，在该区域中你能够规划线框图、流程图、自界说部件、模块；

　　6、页面特点：这儿能够设置当前页面的款式，增加与该页面有关的注释，以及设置页面加载时触发的事情onpageload；

　　7、部件消息交互面板：这儿能够设置部件在操作过程中的消息传递；

　　8、元件特点：这儿能够设置选中元件的标签、款式，增加与该元件有关的注释，以及设置页面加载时触发的事情；

　　9、部件办理：在这儿能够增加、删去动态面板的状况，以及状况的排序，也能够在这儿设置动态面板的标签；当制造原型动态面板被掩盖时，我们能够在这儿经过点击选中相应的动态面板，也能够双击状况进入编辑。

　　详细运用过程可参考：原型规划东西——axure知道与运用_xpbob的博客-CSDN博客

　　2.码前

　　网站地址：https://www.devbefore.com

　　作为一款高效、智能的规划东西，“码前”可将编码前的各环节紧密衔接，为各角色赋能，经过低代码东西链完结全流程灵敏开发。与此一起，“码前”内置很多职业需求库、原型库、模板库，协助企业及团队轻松整理产品需求，智能化搭建产品原型，减少了很多重复性作业，有用提高30%-60%IT项目功率。此外，“码前”可依据高保真原型主动生成1对1的UI规划源文件，并完结一键导入，为前端工程师完结主动切图标注功用，提高产设研开发团队的整体功率。

　　适用人群：规划师、企业、创业者、商务人员等

　　3.Invision

　　InVision是一款依据网页的在线原型规划和协作东西。规划师可简略上传各种原型规划界面或部件图片（当然，规划师首要需求经过其他图片软件，比如Sketch或PhotoShop等制造相关图片），为其增加热区，并依据演示需求，独自或协作制造完结多样的原型交互动画。

　　长处：主打“交互原型”和“协作”，支撑sketch和ps规划稿导入做交互。

　　缺陷：关于国内用户来说会有服务器速度的问题。

　　适用人群：规划师更多的将其作为原型演示东西，便于收集多方规划反馈。

　　4.Proto.io

　　Proto.io是一个专门用于移动运用的产品原型东西——能够构建和部署全交互式的移动运用的原型，并且能够模拟出相似的成品。依据Web的在线环境，它能够让你制造盛行的iPhone，iPad，Android手机以及任何带有屏幕界面的产品原型。并且它能够运行在大多数的浏览器中，并供给了3个重要的接口：dashboard、编辑器以及播放器。

　　长处：丰富的UI元素，且能够自界说；支撑多屏互动和组件交互，能够从Dropbox上传规划图。

　　缺陷：不支撑实时预览，交互动效较多时动画不够流畅，性价比不高。

　　价格：免费试用15天专业版（5个项目）1924RMB/人/年

　　适用人群：擅长于运用Web浏览器的产品司理或规划师。

　　5.Mockplus

　　Mockplus是一款快速简略的原型规划东西，首要适用于新手产品司理和规划师。

　　长处：封装3000个图标和200个组件，操作简略快速，学习成本低。在最近发布的版别中支撑团队协作功用，审阅和评论非常便利，听说在即将到来的3.2版别中，支撑将Sketch的规划文档导出为Mockplus的mp项目文件。导出后，你能够在Mockplus中翻开它。说了很久的页面流程图也总算要面世了。Mockplus的页面流程图能够做到：

　　–即时生成；

　　–你能够挑选展现悉数或任意多个页面的流程图；

　　–智能生成流程链接线，一起也能够手动调整；

　　–展现页面的批注信息；

　　–一次导出页面流程图。

　　缺陷：不支撑手势操作，函数和动态面板。官网教程较少，例子模板没有具体的操作过程。

　　价格：根底版永久免费，付费版118元/年，终身版：699元，无需另外付费更新版别。

　　适用人群：各阶段的产品司理及UI/UX规划师，寻求中低保真，交互作用，快速原型，新手或专业人群皆适合。

　　6.FluidUI

　　FluidUI是一款用于移动开发的原型规划东西，它能够协助规划师快速高效地完结产品原型图的规划。

　　长处：FluidUI内置超越1700款的线框图和手机UI控件，并且还会常常进行更新，适合跨渠道开发者。并且是html5版，全渠道支撑！

　　缺陷：不够直观，免费版只能创立一个1个项目和10个页面