这些工具你会用吗?常见设计工具视频教程集锦

在产品开发过程中,最常用的展现构思的方式一般来说是纸笔原型,最简单也最迅速,寥寥一画,一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美,你还是有很多工作要做哒~YouTube上一位大牛在他的视频里展示了一套完整网络邮件服务的纸质原型线框图。由两个人合作完成按钮点击和网页跳转的展示,看起来逻辑思路都很清晰完整,但是对于当下的快节奏工作环境,制作和展示这样一套完整的原型还是颇为耗费时间。有网友问展示这套设计排练了多久,也有人担心纸片片的顺序被打乱,或者文件容易缺失的问题。

相较于这种传统的操作方式,更高级一点的就是借助于各种线框、原型设计工具。也看到网上有很多关于这类工具的介绍或者总结,爆炸式的陈列出大把大把的工具,但是,你真的会用吗?授人以鱼不如授人以渔。所以,这里总结了一些常见原型工具的使用教程,希望对你有用。

线框图工具 - Balsamiq

balsamiq-wiki-2

这款工具据说是首创了手绘风格。界面和操作都比较简单,只需拖出控件,调整属性就可以快速的绘制低保真的线框图,手绘风格也很讨巧。网站上很贴心的在首页展示了一个3分钟的短视频,让用户即看即学。更多更详细的使用教程YouTube上也不少,比如这个2013年11月份制作的Balsamiq Tutorial,达到了65K+的观看量。

交互式原型设计工具 - Mockplus

mockplus-3

Mockplus是一款非常简单易学的交互式原型工具,特有的链接点,让你轻松的在拖拽之间迅速完成组件、页面交互,非常直观。中文教程:10分钟教学视频,即学即用,快速上手。国外的童鞋也能在YouTube上搜到很多Mockplus的教学视频,短短几个月的时间,Mockplus的教程已经累积10K+的浏览。Mockplus在交互方面的优势可以从其中一个“30秒制作原型”的视频中充分体现。

界面编辑工具- Sketch

sketch-4

Sketch是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。如果你没有使用过Sketch也不要紧,跟着我列出来的教程视频看下去,你会收获很多的。中文视频,请移步这里:Sketch视频教程专辑。有兴趣看更多视频的同学吗,可以去YouTube看一下LevelUpTuts家的Sketch App Tutorials - Series Introduction视频,干货不少,两年多的时间有300K+的观看,相信有不少看过视频的同学都已经修炼成了大神。

界面演示工具 - Invision

Invisionapp-5

InVision 并不是一款严格意义上的交互设计工具,但它可以帮助设计师和设计团队更加高效地做原型设计。用户制作一个在线原型只需要四部:创建一个工程、上传视觉设计稿、添加链接以及生成在线原型,便于和同事、用户交流,获取反馈。与此同时,InVision拥有完备的项目管理功能,团队协作完成原型设计。3分钟视频快速了解Invision。同样,可以去YouTube找到更多详细的Invision视频教程

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/18886/

(0)
yanz kontolyanz kontol
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • 【Mockplus教程】如何创建页面的子页面?

    Mockplus中是按照分组的方式来管理页面,将多个页面放入一个分组中, 就像Windows文件夹的管理方式。具体分组的创建请参照“页面”->“分组”的讲解。

    Mockplus 2015-08-17
  • Axure rp 6.5的软件安装、汉化与注册

    第一步:从网络上下载axure安装程序到本地电脑、汉化语言包、注册码,双击安装程序,如图:

    2015-01-01
  • 如何做一个完全失败的UX设计师?

    人人都说,做一个成功的UX设计师是很难的,你认为做一个的完全失败的UX设计师就会很容易?然而事实并不是这样。如何成为一名彻底失败的UX设计师?至少,你需要做到以下几点。1. 不在乎用户反馈都说万事开头难,不过…

    2023-03-03
  • Justinmind 2015年更新回顾

      2015年是激动人心的一年!今年,我们已经推出了许多新的功能,为您带来一个更美好的原型开发工具。下面,我们回顾下2015年justinmind的改进。                 &nb…

    2016-01-06
  • 【Mockplus教程】MAC上安装Mockplus

    1 下载 进入摩客官网桌面端下载页面,选择MAC版本下载; 2 安装 下载完成后,打开dmg包,将Mockplus图标拖动到Applications快捷图标上面即可完成安装。 整个过程见下方视频:

    Mockplus 2015-08-12
  • Justinmind v6.7新功能:直接调用 ILLustrator 修改 SVG 格式的矢量图形

    原文标题:利用Justinmind 6.7 新功能编辑、制作、使用矢量图标 Justinmind 6.7 提供了对 ILLustrator 矢量图形编辑、复制粘贴的支持,便得在Justinmind中使用高保真图标成为很容易的事情。下面,介绍如何利用网上…

    JustinMind 2015-08-25
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 【Mockplus教程】怎样在Mockplus中使用图片轮播?

      1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选中的图片加载到图片轮播组件中,可以点击每张图片上…

    2015-10-28
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 关于Axure rp的相关介绍

    Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。 Axure正确的英文发音应该是(ak sh…

    2014-09-09