揭秘！已成为申请交互Top院校标配的HCI项目如何制作？

**PART 01**

作品集的展现方式

关于作品集的结构和制作方式，通常会先制作电子版的作品集，之后再根据需求考虑是否需要打印。在排版工具上，建议使用 InDesign（ID）或 Illustrator（AI） 进行设计， 也推荐使用Figma，平台的模板资源非常丰富，借鉴学习的资源也非常多。一个完整的作品集的内容包括 视频、代码、demo（如 APK）、上线产品、论文等，但这些内容是可以根据自己的优势能力进行筛选的。

其次，针对不同用途，作品集的形式也有所不同。 如果是用于考研，电子版作品集通常已足够，不需要额外制作其他形式（如有院校面试需要纸质版作品集则需要打印）。 但如果是求职或面试，可能需要制作网站版本的作品集，以便更方便地展示和分享。

Figma 模板社区

figma.com/community/portfolio-templates

关于作品集网站的制作，目前有一些提供免费域名的平台，例如 GitHub。作品集网站的搭建方式主要分为两类： 一种是模板类，可以直接套用现成的模板；另一种是 白板式编辑，类似于制作 PPT，可以自由拖拽内容，更适合设计相关的作品展示。此外，还有一些付费作品集网站，如 Port Master，提供更加专业的模板和功能支持。在提交作品集时，电子版作品集的相关资料最好整理成统一的链接，以便一并提交。

**PART 02**

构建人机交互作品集的框架

在构建设计作品集时，清晰阐述设计框架是一个重点环节，需要着重 展示各个设计维度如何展开，以及设计理念与实际设计元素之间如何构建联系。优秀的作品集应当能够清晰地呈现出 信息传达的意图 与 最终呈现的设计成果之间的转化过程，这也是设计类作品集中的核心部分。

朝菌学园 HCI 作品集课程内容

其中， 痛点分析 方法特别适合于那些源于特定问题的设计项目，比如通过调研发现的具体问题，以及与交互技术本身相关的挑战（如语音交互中的唤醒词问题），我们可以在分析痛点后突出相应的解决策略。值得注意的是，如果涉及现实中的痛点，尤其是那些不太明显的问题， 需要补充充相关调研数据来支持分析，从而形成 "痛点-解决策略"的完整路径。

我们可以用用户旅程图来进行“痛点-解决策略”的梳理

另一个构建框架的重要路径是设计流程的展示，这主要强调的是 设计过程（process）本身。 具体而言，可以通过 交互流程的梳理，针对特定问题或交互痛点，展开一个合理化的交互流程。在这一部分，可以借助 交互流程图或信息结构图等可视化工具，更直观地呈现我们的设计思路和解决方案的演进过程，使老师/面试官能够清晰地理解项目的设计逻辑和决策依据。

通过以上框架的构建，人机交互作品集能够更加系统地展示设计者的思考过程和解决问题的能力，从而在视觉呈现之外，彰显设计者的专业素养和深度思考。这不仅能够更好地传达设计理念，也能够展示 设计者如何将抽象概念转化为具体解决方案的能力，这正是优秀人机交互设计作品的核心价值所在。

**PART 03**

人机交互作品集的流程

人机交互作品集的工作流程主要分为两类： 一类是针对具体服务或任务的流程节点展开，另一类是方法论的流程梳理，重点阐述工作是如何展开的。

例如，为了实现某个设计， 可能先进行调研，然后进行一轮实验，接着开发第一版原型，之后进行迭代评估，再回到第二轮原型设计。 这种工作展开方式可以放在design space部分进行说明。

设计流程展示方式示例

同时， 分析设计的多重可能性也是一个可以展示的路径，这要求设计师能够全面地展示各种可能性。 比如设计触屏手势机时，可以先将所有维度列出，如指点类、滑动类等，然后在每个维度下展开不同分支，最终通过实验进行筛选。这一环节充当了从创意到具体实现的桥梁，可视化在此起着重要作用。

作品的具体实施环节 是一个较大的部分，主要展示 如何落实设计概念。首先是 社会调研和访谈，这一步是可选的，具体取决于项目需求。其次是 模型的设计和开发，可以包括概念手稿、3D模型、平面图或工程制图等，目的是展示模型的样子。然后是 原型制作，分为有硬件和无硬件两种情况。

如有硬件，重点在于阐述设计的技术可行性； 如无硬件，则可以展示代码、代码实现的流程图或工程截图。在这个环节中， 技术原理的说明 也很重要，需要解释交互逻辑是如何实现的，例如使用了什么感知方案、数据分析方法等。HCI领域比较看重技术点，所以 在技术原理环节应适当增加比重，确保不是纯靠图片就完成了实现部分。

评估环节 虽然是可选的，但有比没有更好。这部分需要设计一个实验来验证方案是否可行，无论是从用户体验还是交互效率、性能角度。评估应包括实验设计体系、具体实施过程和实验结果。

可以通过照片展示实验场景，通过表格展示结果数据。值得注意的是，有时可以采用低成本的" wizard of world"方法，即不必真正开发出完整技术，而是通过人为因素控制实验结果，让用户以为这是通过技术实现的。

最后是 效果呈现(presentation)，这在电子版作品集中尤为重要。可以选择实际应用场景的展示，比如在真实环境中试用；也可以是纯视觉或多媒体的呈现。考虑到电子版作品集的特性，建议准备一些视觉效果较好的展示方式。 最后可以加入设计反思，说明当前设计的不足和未来展望，这虽是可选项，但会使作品集更加完整。这整个流程并非硬性规定，具体选择哪些部分，还是要根据作品的输出目标来决定。

**PART 04**

人机交互设计作品项目的输出

人机交互设计作品集可以呈现多种类型的输出。 第一类是纯理论交互的方法论，这种思路较为挑战性，因为需要在知识全面性上有较高要求。如果走纯方法论路线，需要展示方法的来源与理论支撑、相关工具包、方法验证以及评估结果。这类输出适合 投稿学术论文，例如设计一套针对非物质文化遗产的AR协同设计方法，关键在于方法论本身，而非单纯的视觉案例。

能识别唇语的“无声语音交互技术”— LipLearner

第二类是设计智能硬件或产品，需要阐释创意产生过程、概念模型设计、草图及原型实现。 第三类是创新或优化交互方案，可以是基于某种交互流程或模态的新设计，重点需要阐述交互流程和原理，包括感知方案、分析方案和反馈方案。还可以设计创新界面，如可触摸界面、液体界面或空气界面等，关键是将交互性阐释清楚。

好的人机交互设计应走创新思路。 创新可以从 应用角度出发，找到新的应用方式，如VR中通过鼻腔神经传递温度信息的触觉反馈；也可以 提出新的交互方式，如小米"一指连"利用UWB技术指向控制设备，或华为手机后盖敲击交互；还可以 构建新概念，如基于IMU感知日常行为变化设计个人故事。

小米“一指连”技术

另一种思路是 优化已有交互，如苹果耳机的入耳检测，基于自然行为省略交互步骤；或通过检测用户听到错误信息时的微表情作为打断语音助手的触发机制，这种设计非常贴合人的自然认知和行为表现，优化了交互流程。

对于AI时代的交互作品集， 整体表现力比完成度更为重要。作品集呈现并不要求提交实际代码或原型，关键在于原理解释清晰， 让评审确信设计是可行的。在视觉呈现上，要 给人真实感受，即使并未完全实现，也要表现出你有能力完成。呈现技巧包括多用图表达、突出亮点、结合个人专业知识背景。例如，如果你擅长建模，就应强调这一优势，使作品呈现事半功倍。作品集的核心是框架完整，内容充实，后期可以继续完善细节和实现部分。

**PART 05**

人机交互设计作品案例

学员作品展示

接下来要展示的几个案例是之前学园同学完成的作业。其中有一个纯交互流程类的案例， 主要基于我们日常使用手机过程中的交互流程优化。这个设计分析了几个典型场景：通话时的静音、免提、接听和录音功能，这些都是我们在打电话时高频使用的操作。传统交互方式通常需要用户执行多个步骤，例如通话静音时，需要将手机从耳边拿开再点击静音按钮，整个流程较为繁琐。

该设计通过引入更自然的交互动作优化了这些流程。 例如，想要静音时，用户只需用手遮挡麦克风位置，无需寻找并点击静音键；需要免提时，只要将手机放在桌面上即可自动切换；接听电话时，只需将桌面上的手机拿起即可接通。这些交互方式更符合用户的自然行为模式，大大简化了操作流程。系统通过手机内置的传感器(MU)来检测这些动作，实现功能的自动触发。

在项目呈现方面，学生首先阐释了设计空间，然后通过 故事板(story board) 展示了完整的需求和设计故事。技术实现部分，使用软件 实时传输并分析手机MU信号，展示了各场景下的技术流程和环境搭建。最后，同学还进行了用户研究以验证设计的可行性，包括 实验设计和评估量表的应用。这个案例的闪光点在于， 它类似于入耳检测功能，利用用户的自然行为动作，通过感知技术优化了整个交互流程。

联系我们