::
—
原型小白逆袭指南
Prototype beginnerCounterattack guide
- 在制作作品集的时候你是不是常常因为自己 “没有编程基础”，“没有手绘能力”就只停留在设计阶段?
- 你可能也不知道有哪些 高效对口的制作工具，可以让你快速地展示交互原型，搞不清楚自己的idea的制作难度到底属于菜鸟级还是地狱级?
- 更要紧的是你可能从根本上就 缺乏一个清晰的原型构建思路，每次信心满满地想要大展身手，最后却遗憾败北、仰天长啸，在尝试的过程中直接从入门到放弃！
以上这些拦路虎都有可能让你在面试或者项目展示时相比其他人处于劣势地位！
本期内容满满当当，将为你搭建原型制作的框架，带你在零编程的情况下，一键踏入专业级原型的初阶门槛，为你搜罗汇总史上最全的无需代码的原型工具，**绝对是手残党的作品集逆袭指南****！！**
—**从自身专业背景出发**!Image纸质模型制作过程
首先，在学习制作之前，我们有必要了解交互原型的分类。这要求我们从原型的制作目的出发，明确自身的身份定位，全面分析自己的动手基础、擅长的材料与软件，同时考虑原型的制作周期与精度要求，为后续的执行剔除不必要的困难模式，找到最适合自己制作方法。
譬如工业设计专业的同学，可能接触过泡沫类的模型，木制模型等实体的模型；数字媒体方向的同学，可能就更偏向装置类以及使用AE之类的软件；而机械设计类的同学，一定对电子电器原件就会更加熟悉；学建筑的同学可能就很擅长用一些建筑设计里面的Rhino、Sketch Up之类的软件来建模或者做动画；而学习平面设计的同学对视觉的把握可能就更出彩，更容易上手Photoshop、CorelDraw之类的软件……
用Arduino控制的小车
这就体现了不同专业背景的同学动手基础以及擅长使用的软件和材料的不同，我们可以先从中挖掘出自身背景的优势，与后续原型制作所需要的技能搭起桥梁，建立起初步的信心。
其次，你还需要考虑原型制作的周期和精度的要求，确定该原型的应用场景。例如它是用于参展的静态作品，还是作品集里的过程图，或是有互动要求的展览作品，到底它是可以粗糙带过的，还是需要精致打磨的，这些都需要我们预先确定。
接下来，我们展开对交互原型的介绍。虽然在中文里大家称它为原型，但在英文里面，它们会在学术上被分为四个不同的概念，从最粗糙的模型到最精度的模型，它们四个被分别叫做Sketch、Moke up、POC和Prototype。
Paper sketches
当你最开始产生idea后，下一步制作的模型就叫Sketch model，它是非常粗糙的，基本上可能无法使用的，外形可能也不美观的模型，主要功用是非常快速地展示你的概念。
接着，它的下一步迭代模型叫Moke up model，与Sketch model相比、Mokeup model的外形会在一定程度上更加美观，但它依然是一个静态的基本上可能无法使用的，假的涂装的模型。
Screen Moke up
再下一步的迭代模型就叫POC模型。POC的意思就是概念验证。它可能没有那么追求外观的美观度，但是非常注重功能上的可用性，即该模型它是可动的，可被使用的，完成了由静态到动态的转变的。
最后一步的模型就是Prototype model。Prototype model基本上可以达到交付的状态，接近于你从外面购买的产品，外形涂装也是很美观的，但是它无法达到量产的状态。
以上就是学术上对于模型的四个大概的分类，尽管我们在看大家作品集的时候，大家都称原型为Prototype，但这四个不同阶段的模型用词所产出的效果区别还是很大的， **在这里也分享一个制作模型的经验，分了三个等级，大家可以自由选择。******
—**1.** **用最简单的工具做最初步的模型**
第一个等级的意思是，将你脑海里面现有的一个想法试着做出来。手绘功底好的可以选择在白纸上手绘，动手能力强的可以试着用简单的工具把这个模型给做出来，如果有部分零基础的，手工也不太好的同学，也可以选择做非常简单快速的纸模。
具体的操作方法如下：首先将界面画在纸上，再把界面的一些原件也画成一个个小的组件，把它剪下来后，你就可以在用户测试的时候去很快地拉动它，并快速地调整这些组件的位置。这就是一个非常快速的将方案有型化的草模。
快速纸模展示
—**2.更美观更具设计感的****原型**
紧接着第二个层级是停留在设计层面的原型，即制作更美观更具设计感的原型。这种一般在设计的时候会用figma、adobe xd、sketch这类软件来将想法更具体化，同时使外形外观变得更好看，主要用于做精度更准确的用户测试或是给客户展示方案图，下图就是大家常常会在作品集里放一张的类似的效果图。
作品集效果图
—**3.可使用的功能模型**
来到最后一个层级，我们可以叫它可使用的功能模型。功能模型需要展示产品物理交互的功能和形态。口述、草图、动画或视频展示都是一些最便捷的方式，但千言万语都抵不过一款有触感，能上手使用的产品。那我们怎么样来实现这个物理交互呢？
功能验证模型
首先，可以将制作功能模型的目的分为两类。第一类是用于功能验证的模型，相关的应用场景可能有：你在与老师探讨方案的过程中，老师表示可能听不懂你的设计方案，或者产品的功能实现和相关技术，受到了老师的质疑。这时你就可以做一个粗糙的、大概的概念模型向他展示、验证产品的功能。
3D打印模型制作过程
另外一种物理交互模型是可展示的可用的成品。举个例子，当我们参加新媒体交互展览，需要展出一款偏产品类的交互设计成品的时候，设计师可能会用3D打印做一个壳，把电路板塞在这个壳里面，这样就成了一个可用的产品。
再例如，下方这个从behance上下载的案例，它也运用了Auduino来完成中间的过程迭代，图中可以看到它有很多线还是暴露在外面的。当你用手去捏这个球的时候，手机界面就会产生变化，这也是一个很典型的物理交互的模型。
!Image物理交互模型案例
了解完三个层级的模型制作经验，接下来，我们就来根据不同类型的作品，推荐六类实用的工具和软件。
—
**1.新媒体装置类**
Processing & Arduino主页
首先，最有名的新媒体装置应用，当然还是Arduino和Processing。关于Processing，这里还推荐一个叫Open processing的网站，里面有非常多用户po上来的开源案例，每个案例后面它都附有对应的代码。当我们有想做的类似的效果时，类似的样本可以极大地方便我们去评估它的技术难度。
********Open processing主页
—
**2.网页交互类**
P5制作过程
关于网页类的交互，这里主要推荐P5和Webflow。P5是现在比较流行的，它使用的是Java script的一个技术原理，其实和Processing是差不多的，好处在于P5它是完全基于网页的。比如当你写好一段效果代码后，你可以直接把这个网址复制给别人，对面可以在电脑上面直接打开、进行运作。另一个建站工具Webflow，它和Wix、Square space这种建站网站也很类似，非常适合新手上手。
********Webflow主页
—
**3.音画交互类**
****!Image****
Touch designer效果展示
第三类音画类软件，现在比较流行的是Touch designer和Max MSP。这两类的优势在于不需要写代码，因为它们是像“连连看”一样的那种电池组。如果你有接触过Rhino的grasshopper的话，就会发现与它们的原理是一样的。同时如果你有一些声音设计或者乐理的基础，去用这些软件就会更好上手。
********Max MSP主页介绍截取
—
**4.游戏制作类**
Unity主页
第四类来到游戏制作方面，首要推荐是Unity和Unreal engine。其中，用Unity做VR也是比较流行的。但游戏肯定还包括了其他的分类，比如2D界面的游戏也可以用blender去做，Processing也是可以写2D游戏的。而一些交互式的小说类的游戏，有个叫Twine的软件也可以用到，这个方面的话根据游戏类型的不同，还有非常多的软件等着我们去挖掘，大家需要根据需求和熟练度去选用。
Unreal engine主页
—
**5.AR互动类**
Adobe Aero制作过程
AR软件，可能大家已经在ins或其他软件上体验过了。如果你会Unity，这里很推荐你去用Vuforia这个平台。因为它是真的可以下载到手机端进行操作和使用的。而刚刚提及的ins，如果你们尝试过它的脸部滤镜的话，用Spark AI就可以达到它的效果，而且不需要写代码，非常好上手，基本上拖拖拽拽就可以做出来。第三个软件Adobe Aero，除了静态图像外，它还支持导入2D动画。用户可以将现有的2D动画作为AR内容的一部分，为AR体验增加更多的动态元素。
Spark AI使用过程
—
**6.机器学习类**
Runway主页
最后一类是关于机器学习方面的平台。这里比较推荐Runway和Wekinator。它们的主要区别在于Runway的界面很友好，Wekinator的界面则稍微有点难用，但是它的功能会比Runway强大很多。
Wekinator使用过程
# 05小结与预告现实&理想的制作情况—
**现实情况**
以上就是对交互原型制作的分类解读与步骤拆解。同学们可以先尝试着分析自己的原型制作情况，按照建议的步骤，开脑洞找找快速上手的通道并尝试动手验证。
尽管每个部分看起来都还挺轻松的，但现实还是比较骨感的。如果大家是第一次接触制做这种功能性原型，在动手基础十分薄弱的情况下，短期内也会感到很难上手，可能真的去学了一会儿就从入门到放弃了……
原型视频展示案例
—
**“工具”后台领取方式**
所以下期，我们还会展示另一种快速搭建原型展示场景的方法——原型视频！并通过几个案例，帮助大家了解它的制作与展示思路，学习更简单的展示技巧。
我们也把文章里提到的工具都整理好了，需要的同学可自行领取。只要在公众号对话框里输入关键词“交互原型”，即可收到！
ABUOT US
朝菌学园ZhaoDesign
朝菌学园是一家专注前沿、未来、智能设计领域的品牌。包含人机交互设计、服务设计、用户体验设计、互动媒体装置、智能产品设计等学习方向，已经帮助数百名学员取得考研、保研与留学申请的名校录取offer
933篇原创内容
Official Account
，