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

在产品开发过程中,最常用的展现构思的方式一般来说是纸笔原型,最简单也最迅速,寥寥一画,一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美,你还是有很多工作要做哒~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教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • 爱上Axure设计原型的十大理由

    10. 你的需求说明从未看起来如此的棒 让我们勇敢的面对吧,无论你对商业和系统的需求是多么的了解,写出所有相关人员都能够认真阅读并且确认的需求文档从来不是一件简单的事情。冗长而低效的会议让你无法忍耐,于是…

    原型设计教程 2014-09-12
  • 低保真原型初级指南

    发布者: mobileui 前言: 设计师Paul Rand曾说:“理解人最本质的需求,并且认识到必须寻找一个合适的场景以满足这些需求,是设计师教育的基础。”使用设计原型为我们揭示并探索这些需求,为我们提供有意义的交互及友…

    原型设计教程 2014-12-22
  • 【Mockplus教程】怎样在Mockplus中使用图片轮播?

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

    2015-10-28
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • axure日常使用问题集锦,不断更新!

    1. axure生成的原型文件,如何自动隐藏sitemap和page notes 答:axure默认打开的都是index为索引的文件,我们只需要打开其他的页面文件,就可以自动隐藏sitemap和page notes 2. axure 6.5版 如何让一个部件在页面向…

    原型设计教程 2014-09-12
  • 也许你根本不会用百度搜索

    在谷哥被河蟹之后,大部分时间只有依靠度娘了,一直觉得度娘不好用,其实度娘也是有隐藏秘籍的——左右左右,上下上下BABA。   搜索引擎可以帮助使用者在Internet上找到特定的信息,但它们同时也会返回大量无关…

    原型设计教程 2014-12-08
  • 照虎画虎——简单WeUI模板UX设计学习

    艺术虽然分为独立的各个领域,但是总有相通之处。UI/UX设计也是一种艺术,就像美术一样,UI/UX的设计也需要大量的临摹其他优秀作品来提高自己的水平。不过俗话说:“照猫画虎”,如果你临摹的对象不合适,很有可能只…

    2023-03-03
  • AxureRP7.0扩展元件库

    1、本元件库仅适用于Axure rp7.0以上版本; 2、本元件库已集成Axure rp7.0自带元件,避免使用中元件库的切换; 3、本元件库中所有元件均可设置,设置选项一般与元件使用说明在同一位置,使用说明一般在某个动态面板…

    2014-09-28
  • Axure RP 9 最新版汉化包下载-小楼

    【汉化包下载】Axure RP 9测试版汉化包V1.8版 For 3623下载 【使用方法】 1、将汉化压缩包解压缩。 2、将解压缩后的lang文件夹和dll文件全部复制粘贴到软件安装根目录下。 【Windows系统汉化路径】 以Win7-64位系统…

    Axure 2018-09-18