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

Posted 2020-08-21

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

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

线框图工具 - Balsamiq

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

交互式原型设计工具 - Mockplus

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

界面编辑工具- Sketch

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

界面演示工具 - Invision

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