首页 > 其他分享 >原型设计工具介绍

原型设计工具介绍

时间:2023-05-16 19:15:33浏览次数:38  
标签:介绍 原型 组件 设计 工具 交互 墨刀 页面

  原型是整个产品面市之前的一个框架设计。设计师可以利用它引导每个人都参与到项目中来。原型展示了各个部分之间的比重以及各个部分之间的联系。原型不仅仅只是表面的东西,它能够说明用户将如何与产品进行交互。与其他工作一样,完成原型设计需要相应的工具协助。

  本文将主要介绍3种主流的原型设计工具的特点和使用方法。

  • Mockplus

  • Axure

  • 墨刀

 

 

  • Mockplus

 

 1.Mockplus

 

  Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。

Mockplus支持在浏览器在线设计,可以使用户摆脱设备,时间,空间的限制,随时随地的进行设计工作。

  Mockplus的易用性还表现在创建原型的速度。如果使用其他工具,可能需要花大量的时间完成一个原型。但使用摩客,只需5分钟。此外,用户还可以通过扫描二维码,在手机上快速的预览原型。

功能:用于制作快速原型的软件。

优点:界面简洁,可快速上手,演示方便支持在线创作与团队创作。

缺点:基础版本素材库丰富度一般

基本使用方法:以本小组作业的停车场预约管理APP进行简要举例说明。

  1.注册账号后进入设计界面,点击新建,选择新建项目,编辑项目名称。

 

 

  2.进入编辑界面后选择设计的设备的界面大小即可开始进行编辑,我组的设计主要用于移动端,在这里选择了华为P30的界面大小。

 

 

  3.左上可新建页面与分组,或进行图层的编辑。

 

 

  4.右侧对页面的属性及组件的交互等进行编辑。

 

 

  5.在左侧素材库选择组件与图标进行界面的简单设计。

 

 

  6.通过拖拽图标或组件上方的小圆点到指定位置设计交互内容

 

 

  7.点击右上角的箭头进行演示

 

 

  8.可以在演示界面进行交互

 

 

 

  • Axure

 2.Axure

 

  Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

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

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

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

主流的原型设计软件之一,高保真的原型设计工具,名声大,专业性高。 

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

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

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

基本使用方法:

  1.元件的使用:在RP中使用软件需要选择后拖拽到工作区使用即可(以矩形为例)。

 

拖拽矩形左上角的三角就可以进行圆角设置。点击右上角的圆可以更改它的形状。左上角的三角形消失。

 

 

 

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

 

 

 

  2.图片的使用:

 

直接双击当前图片元件即可。也可以在选择元件后的右侧的属性中导入即可。 可以直接复制粘贴到AX中进行使用,支持GIF格式。

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

 

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

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

  6.组件交互:通过右侧的交互选项设计组件的交互效果或交互链接,如本项目设计用户界面,先点击图标,选择点击跳转链接,再选择链接到page2即可。

 

 

 

  7.预览结果:点击右上角的启动按钮就可以在浏览器中预览结果

 

 

 

 

  • 墨刀

 3.墨刀

 

  墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。

功能介绍:团队协作:与同事共同编辑原型,效率提升;一键分享发送给别人,分享便捷;还可在原型上打点、评论,收集反馈意见,高效协作。

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

自动标注及切图:将 Sketch 设计稿墨刀插件上传至墨刀,将项目链接分享给开发人员,无需登录可直接获取到每个元素宽高、间距、字体颜色等信息,支持一键下载多倍率切图。

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

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

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

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

分享方便。反馈及时。墨刀不仅上手快,还可以快速分享,快速查看应用在手机上的效果。反馈回复很及时,产品改进速度也很快。

可以通过浏览器在线编辑。

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

需要收费。墨刀本地下载功能需要注册购买,无法直接分享给他人。

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

基本使用方法:

  1.选择空白项目:

 

 

  2.选择模板项目:

 

 

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

 

 

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

 

 

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

 

 

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

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

 

 

 2023-05-16

 

标签:介绍,原型,组件,设计,工具,交互,墨刀,页面
From: https://www.cnblogs.com/Y-M-Y135/p/17406512.html

相关文章

  • 大数据测试学习笔记之监控工具Dr.Elephant
     这是2018年度业余主要学习和研究的方向的笔记:大数据测试整个学习笔记以短文为主,记录一些关键信息和思考预计每周一篇短文进行记录,可能是理论、概念、技术、工具等等学习资料以IBM开发者社区、华为开发者社区以及搜索到的相关资料为主我的公众号:开源优测大数据测试学习笔记之监控......
  • ETL测试工具和面试常见的问题及答案
     概述        商业信息和数据对于任何一个企业而言都是至关重要的。现在很多公司都投入了大量的人力、资金和时间对这些信息、数据进行分析和整理。数据的分析和整理已经获得了巨大的潜在市场,因此为了使得这个过程更为简单,越来越多的软件供应商引入了ETL测试工具。目前,有......
  • Restful规范,drf安装和介绍和使用,APIView源码分析
    1Restful规范#RESTful是一种定义API接口的设计风格,AIP接口的编写规范,,尤其适用于前后端分离的应用模式中这种风格的理念认为后端开发任务就是提供数据的,对外提供的是数据资源的访问接口,所以在定义接口时,客户端访问的URL路径就表示这种要操作的数据资源我们可以使用任何一个......
  • Ext.Net-----GridPanel (属性|方法|配置|详细介绍)
    1、Ext.NET----GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm、colModel:表格的列模式,渲染表格时必须设置......
  • SAP Fiori Tools 里 proxy 中间件的使用场景介绍
    使用proxy中间件可以让开发人员通过配置的方式连接不同的后台系统,或者是切换不同的SAPUI5版本。下面是一个典型的ui5.yaml里的proxy配置文件的例子:-name:fiori-tools-proxyafterMiddleware:compressionconfiguration:backend:-path:/sapur......
  • npm 工具库 yenv 简介
    "yenv"是一个JavaScript库,它是在Node.js环境中使用的npm包之一。它的目的是从环境变量中加载配置,以便在Node.js应用程序中使用。使用yenv,您可以在不同的环境中配置不同的变量,并根据需要轻松地加载这些变量。这些环境可以是开发、测试、生产等等。它也支持默认值和类型......
  • Linux基础21 进程介绍, 进程监控状态ps, 进程相关命令pstree,pgrep,pidof, 动态进程监
    1.进程的管理:当我们运行一个程序,那么我们将该程序叫进程 进程线程协程 linux起服务会有给这个服务预分配的内存结构,windows没有 2.为什么要学进程管理?为了管理架构的服务 3.程序和进程的区别1)程序:开发写出来的代码,程序是永久存在的。 2)进程:它会随着程序的终止而销......
  • 构造函数、实例、原型对象三者之间的关系
     实例.__proto__ ===原型原型.constructor===构造函数构造函数.prototype===原型实例.constructor===构造函数(其实就是实例ldh.__proto__通过ldh.__proto__指向Star原型对象,原型对象通过constructor指向Star构造函数)constobj=newObject()obj.__proto__===Ob......
  • SAP Fiori Tools 的 Application Reload Middleware 介绍
    通过applicationreloadmiddleware的帮助,开发者可以在进行FioriElements开发的过程中,即时预览这些尚未完全完成开发的应用。即时的意思是,一旦有FioriElements项目相关的文件发生变化,ApplicationReloadmiddleware会自动刷新应用。npx是一个Node.js工具,它可以让......
  • c-for-go cgo 绑定自动生成工具
    c-for-go可以快速的生成cgo绑定代码的工具,目前有不少golang项目使用了此工具,比如cloudflare/ipvs也使用了此工具参考处理 参考使用这个是libvpx的一个项目yaml定义文件---GENERATOR:PackageName:vpxPackageDescription:"Packagevpxpro......