交互设计作品没有demo展示，等于没有做完！

许多同学在制作作品集时，展现方案缺少好的表达效果与demo原型演示，导致无法向老师清晰地展示自己项目的设理念。这可能并非自身设计能力问题，而是在前期往往有着大象一般庞大而精巧的设计构思，但方案落地时， 由于缺乏方案展示的技能，很多创意无法有效展现出来，就只能呈现出只有蚂蚁般的设计成果。

脑袋中有大象，但呈现的却是蚂蚁， 不仅是方案的内容表现缺失，而且还有表达不准确、不形象的问题。 为什么你的设计不出彩？是缺乏设计创意能力？还是因缺乏技术导致脑中的大象走不出来？其实最关键的原因， 是设计原型制作与展示的设计能力不足，导致设计方案是始终离“落地”与“合理”差一步距离。

为了帮助大家产出带有优质原型demo展示的作品集项目，我们准备了这篇制作交互原型的攻略，帮助你巧妙构建交互方向的作品集。同时本文也会分享一些实用的小窍门，助力你完善作品细节， 让你的作品集在众多申请者中脱颖而出！

:: 01

交互原型的 分类架构与目标

1、从学术层面进行分类

从学术的专业视角来看，交互原型主要涵盖 Sketch、Mock Up、POC 和 Prototype 这四个重要概念，每个概念都有其独特的特征与功能。

Sketch Model 作为最基础、最初始的模型，其核心价值在于能够以最快的速度将设计概念直观地呈现出来。

通常情况下，它可能仅仅是设计师在草稿纸上随手勾勒的简单图形，或是利用简易绘图软件绘制的极为粗糙的框架，其外形往往不具备美观性，甚至可能无法直接进行实际操作，但却 能在设计的萌芽阶段迅速捕捉灵感，为后续的设计深化提供最原始的方向指引。

Mock Up Model 则是在 Sketch Model 的基础上有了进一步的发展，它在外观设计上投入了更多的精力，相较于 Sketch Model 更加美观精致。

然而，它依然处于静态展示的范畴，不具备实际的操作功能，主要用于在设计过程中初步展示产品的大致外观形态和布局结构， 为设计团队内部的初步讨论以及向非专业技术人员进行初步展示提供一个相对清晰的视觉样本。

POC Model（Proof of Concept Model），也就是概念验证模型，其重点聚焦于功能的实际可用性验证。在这个阶段，外观的美观程度并非首要考虑因素， 关键在于构建一个能够实际运行、展示核心功能的模型。

通过实际操作该模型，设计团队可以 检验设计方案在功能实现方面是否切实可行，是否存在技术瓶颈或逻辑漏洞，从而为后续的功能优化与完善提供有力的依据。

Prototype Model 已经非常接近最终可交付给用户的产品状态，无论是外观的精细程度还是功能的完整性与稳定性，都与实际上市的产品相差无几，只是尚未进入大规模量产阶段。

这个模型通常需要经过多轮的测试与优化，确保在各个方面都能满足用户的需求和市场的期望，是产品正式推向市场前的重要准备阶段。

2、从实践维度进行层级划分

在实际的设计操作过程中，依据交互原型的具体目的和功能特性， 可以将其划分为三个不同的层级。

方案有形化 是设计的起始步骤，其主要目的是将设计师脑海中抽象的想法转化为具体的、可感知的形式。

纸膜模型就是这一层级的典型代表，设计师可以 快速地对设计对象的形状、大小、结构以及各部件之间的连接方式等进行初步的测试和调整，直观地感受设计方案的可行性，及时发现问题并进行改进。

设计层面的原型则借助专业的设计软件，如 Figma、Adobe XD、Sketch 等，将设计方案进一步细化和完善。这些软件提供了丰富的设计工具和组件库，能够帮助设计师创建出更加具体、外观更加精致的原型。

这样的原型主要用于进行 更为精确的用户测试，收集用户的反馈意见，同时也可以向客户展示设计方案的详细内容和预期效果，促进双方的沟通与交流。可实现的功能模型是交互原型的高级阶段，它具备实际的功能，能够真实地模拟产品在实际使用过程中的情况

在很多情况下，这一层级的原型 会涉及到物理交互，如图是 Arduino实现的模型，当捏压一个球时，手机界面会发生变化。这样的功能模型不仅可以用于向用户展示产品的实际使用效果，更重要的是能够进行严格的功能验证，确保产品在功能方面的可靠性和稳定性。

课程推荐｜26保研

课程推荐｜25考研

--- 26考研课程即将发布！---

:: 02

交互原型的制作技巧

1、精准定位制作目的

在着手制作交互原型之前，设计师必须清晰、明确地确定制作目的。 这是因为不同的目的将直接决定原型的精细程度和具体的制作方法。如果制作目的是为了在设计团队内部进行快速的迭代和优化，那么一个简单、便捷的 Sketch Model 就能够满足需求。而如果 制作目的是为了向客户展示最终产品的完整效果，赢得客户的认可和订单，那么就需要投入更多的时间和精力制作一个接近成品的 Prototype Model。

2、客观评估自身能力基础

设计师自身的动手能力和技能水平在交互原型制作过程中起着至关重要的作用。如果设计师具备扎实的动手能力和丰富的技术知识，例如具有 机械设计、电子工程或编程等专业背景，那么他们就有能力尝试制作更为复杂和功能完整的原型。

相反，如果设计师的动手基础相对较弱，或者对某些技术领域不太熟悉，那么他们可以 巧妙地利用现有的软件工具或采用简化的方法来实现原型制作。对于一些不擅长编程的设计师来说， 可以选择使用一些无需编程或编程要求较低的原型制作工具，如在线原型制作平台或具有可视化编程功能的软件，通过简单的拖拽和设置操作 ，快速创建出具有基本功能的原型。

3、合理选择适配工具

根据不同类型的交互原型和具体的制作目的，选择合适的工具是确保制作过程顺利进行和取得良好效果的关键因素。

在软件工具方面， Figma、Adobe XD、Sketch 等软件是制作设计层面原型的首选工具。 这些软件具有强大的界面设计功能和丰富的交互编辑工具，能够帮助设计师创建出美观、交互性强的界面设计。 Processing、OpenProcessing 则特别适合用于制作具有创意和技术性的交互原型，尤其是那些需要通过编程实现复杂交互效果的项目。

OpenProcessing（https://openprocessing.org/） 为设计师提供了大量丰富的开源案例和详细的附带代码，设计师可以通过学习这些案例，快速掌握编程技巧和创意实现方法。对于学习编程和创意编程，推荐使用 open processing网站，里面有很多开源案例和附带的代码，适合学习和模仿，利用 Processing 编写代码，实现数据的动态展示和交互操作，如通过鼠标点击或滑动改变数据的显示方式、筛选数据等。

P5.js 作为一款基于 JavaScript 的网页交互工具，具有易于上手的特点，非常适合快速创建网页交互原型。

设计师可以 利用 P5.js 直接在网页上编写代码，实现各种有趣的交互效果，如动态图形绘制、动画效果展示以及与用户的交互操作等，并且可以将完成的作品直接保存为网页链接，方便分享和展示。

Touch Designer、Max MSP 主要应用于音画交互设计领域，其独特的优势在于无需编写大量的代码，通过模块化的连接方式就能够实现复杂的交互效果。

设计师可以利用 Touch Designer 或 Max MSP 连接音频设备，实时获取音乐的节奏、旋律和音色等信息，并将这些信息转化为动态的光影效果、几何图形变化或粒子特效等，营造出极具沉浸感的音画交互体验。

Unity、Unreal Engine 在游戏和虚拟现实（VR）/ 增强现实（AR）交互设计 中占据着重要地位，能够创建高度逼真的交互环境。

Unity 凭借其跨平台的特性和丰富的资源商店，成为目前最流行的 VR 开发工具之一。 AR开发方面，Spark AR 被认为是一个上手容易且设计自由度高的选择，例如Instagram等平台的脸部滤镜等内容。对于进阶需求，Spark AR支持编程，为复杂应用提供支持。

在物理工具方面，Arduino、Raspberry Pi 是制作物理交互原型的常用工具。

Arduino 以其简单易用的开发环境和丰富的传感器、执行器扩展库，成为入门级物理交互设计的首选工具。 例如，在设计一个简易的智能温室控制系统原型时，设计师可以利用 Arduino 连接温湿度传感器、光照传感器和风扇、水泵等执行器，通过编写简单的程序，实现温室环境的自动监测和调控。Raspberry Pi 则具有更强大的计算能力和多功能接口，能够支持更为复杂的物联网设备原型制作。

3D 打印技术在交互原型制作中也发挥着重要作用，它可以快速、精确地制作出产品的外壳或其他物理部件，用于展示产品的外观和结构。 3D Hubs（ 查看链接 ↗ 3D 打印资源和活跃的社区支持，设计师可以在平台上上传自己的设计模型，选择合适的材料和打印工艺，获取高质量的 3D 打印服务。

4、巧妙运用原型视频

在面对一些技术难度较高、难以在短时间内实现实际功能原型，或者项目时间紧迫、无法按照常规流程制作原型的情况时， 原型视频是一种非常有效的解决方案。

原型视频的制作过程通常是先通过拍摄或模拟产品的实际使用场景，获取原始素材，然后利用后期制作软件， 如 Adobe Premiere Pro、After Effects 等，添加各种交互效果和动画元素，从而快速、生动地展示产品的功能和用户体验。

这样的原型视频不需要复杂的编程或硬件制作过程，能够在短时间内完成，有效地节省了时间和成本，同时也能够让客户和团队成员对产品的功能有一个较为直观的了解，便于收集反馈意见和进行进一步的沟通。

5、高度关注细节品质

无论制作何种类型的交互原型，都必须始终高度关注细节。对于 Sketch Model，虽然其形式较为简单粗糙， 但也要确保概念的清晰表达，避免产生歧义或误解。对于 Mock Up Model， 要注重界面的美观性和用户体验的优化。在设计一个电商网站的 Mock Up Model 时，要合理选择字体、颜色和图片，确保页面布局的整洁、舒适，提高用户的浏览和购物体验。

对于 POC Model 和 Prototype Model， 功能的准确性和稳定性是重中之重。在测试一个金融交易软件的 Prototype Model 时，要对交易的计算逻辑、数据传输的安全性和稳定性以及各种异常情况的处理进行反复测试和验证，确保软件在实际使用过程中不会出现错误或故障。同时， 在制作过程中还要充分考虑到不同用户的需求和使用场景的多样性，根据用户的特点和使用习惯对原型进行针对性的设计和优化，使原型更具实用性和吸引力。