ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

主流原型设计工具的介绍及其使用方法

2022-05-08 01:31:09  阅读:238  来源: 互联网

标签:主流 原型 组件 设计 工具 交互 墨刀 页面


一、原型设计

1、原型设计是什么

 

原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言,原型是一种沟通工具。

 

线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。

 

原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致。

2、原型设计的目的

很难想象一个没有原型的产品是如何诞生的。

原型设计的核心目的在于测试产品,没有哪一家互联网公司可以不经过测试,就直接上产品和服务。

原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

虽然需求文档也是可以满足沟通需求的,通过用例将交互写到设计描述文档中,但是原型可以更详细地解释交互。

你可以用屏幕录制软件或者用一只手机对着屏幕拍摄下你操作原型的过程,边录制可以边评论,比如:“我现在有点晕了,不知道该怎么操作,或许点击这里看看……哎呀,好像点错了。”

3、原型设计的流程

开始做原型之前,请先考虑清楚以下几个要素:

  • 做这个原型的目的是什么?
  • 这个原型的受众是谁?
  • 这个原型有多大效率帮助我传达设计或测试设计?
  • 有多少时间做原型?需要什么级别的保真程度?

二、原型设计工具

下面列举几种常见的原型设计工具的优缺点及其使用方法

Axure RP

Axure RP,即Axure RapidPrototyping是最常用的快速原型设计工具之一,能够快捷而简便的制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML模版以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。 应用于产品设计包括Web/移动端/客户端的产品,支持多人协作设计和版本控制管理。将设计、研发、产品、用研融为一体的快速工具。

适用人群:

主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等。

优点:

1、操作复杂度介于Keynote/PPT和Adobe 家族之间;

2、拥有全套web控件库,直接拖拽即可快速制作网站原型;

3、丰富的动态面板可以用来模拟各种复杂的交互效果;

4、导出HTML后可以更加准确的传达信息架构和页面跳转;

5、便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品。

缺点:

1、Axure的动态面板、中继器等功能都是强大的,但是不容易做到娴熟。

2、AXURE的素材这方面也是一个问题,大部分PM 都会在AXURE原型库、素材库去寻找相应的第三方素材库,进行载入,需要花费相应的时间。

 

使用方法:

用Axure RP 9对热力学计算的界面实现三种风格的改造:对话框方式、菜单方式、Tab栏方式

 

 上图为菜单方式,点击开始按钮即可选择功能

上图为对话框方式,点击中央三个按钮即可弹出相应的对话框。

上图为Tab栏方式,直接输入数据即可。

墨刀

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

 

适用人群:

产品经理、开发师、运营、销售、开发及创业者群体

 

优点:

1、拥有PC端、手机端、网页版,让你随时随地可以进行产品原型设计;

2、其定位是主要用于设计移动APP原型,其控件的拖拉、大小的调整,都会自然去匹配相应的母版大小,非常人性化;

3、提供了强大的共享创建功能,方便用户的手机上预览原型。

 

缺点:

1、对交互效果、控件组合、操作面板的选择都不如Axure灵活;

2、内置交互效果包括点击、滑动、滚动等,做高保真原型的时候不够用;

3、效果切换因为是采用连线的方式,有时会让用户产生错乱的感觉。

 

使用方法:

一、创建新的应用
访问墨刀官网,登录之后会看到如下的页面:

 

 点击右上方的创建应用,可以选择不同的模板和设备类型,填写应用名称之后即可完成应用的创建,比方说上图的泡影就是我创建的一个应用,然后我们可以随时编辑应用或者与他人共同编辑和分享应用。

 

 


二、编辑应用
点击我们创建的对应应用进行编辑,进去之后会看到下图,其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是组件栏,我们可以在这里选择需要的组件,然后拖拽到中间编辑栏中进行设计;中间编辑栏里可以对选取的组件进行编辑;右边是预览排列,就是最终我们看到的页面的基本排列。

 

 


1、组件使用
如图,我们把左边组件栏中的一些组件拉到这个中间的编辑栏,通过双击对应的组件进行文字或者颜色的编辑:

 

 

 

2、页面管理
对于页面的管理,我们可以在最右边的页面管理栏进行新建或者复制页面,这样我们的原型也可以在不同页面之间跳转,如下图所示是一个原型部分页面树图:

 

 

3、页面跳转
如果要进行页面之间的跳转,可以点击组件,然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能,如下图所示:

 

 

部分内容引自:

(4条消息) 软件原型设计实验报告 - CSDN

(4条消息) 墨刀使用总结_sysulmh的博客-CSDN博客_墨刀使用教程

 

标签:主流,原型,组件,设计,工具,交互,墨刀,页面
来源: https://www.cnblogs.com/lizhi1701/p/16244685.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有