008-11-交互设计作品集制作

写在前面:交互设计这个方向,现在是越来越火!现在什么产品都讲究用户体验,交互设计师的需求量那是越来越大。这篇文章主包就结合自己的观察和经验,好好聊聊交互设计作品集该怎么做才能入面试官的法眼。这篇文章会比较长,但全是干货,建议先收藏再看。


第一章:交互设计行业到底是干啥的?

1.1 专业方向细分

老铁们,首先你们得知道交互设计包含哪些方向。这行可不仅仅是画界面那么简单,里面的门道多着呢!主包来给你们捋一捋:

APP设计:手机应用——我们每天都在用的各种APP。APP设计师需要了解移动端的交互规范、用户习惯、平台特性等。APP设计的核心是:如何在有限的屏幕空间内,让用户高效、愉悦地完成任务。APP设计师需要掌握的技能包括:移动端交互规范、响应式设计、动效设计、性能优化等。

Web设计:电脑上的各种页面——从企业官网到后台管理系统。Web设计师需要了解网页的交互规范、浏览器兼容性、响应式设计等。Web设计的核心是:如何在浏览器环境下,为用户提供良好的浏览和操作体验。Web设计师需要掌握的技能包括:网页交互规范、CSS布局、性能优化、无障碍设计等。

服务设计:从用户角度看整个服务体验。服务设计师关注的是用户与服务接触的每一个触点,以及整个服务流程的优化。服务设计的核心是:如何从系统层面优化服务体验,而不仅仅是单个界面。服务设计师需要掌握的技能包括:服务蓝图绘制、用户旅程图、利益相关者分析、服务原型等。

用户体验设计:UX——让产品更好用。用户体验设计师的工作范围很广,从用户研究到界面设计,从交互流程到用户测试,都是用户体验设计的一部分。用户体验设计的核心是:以用户为中心,通过研究和设计提升用户使用产品的体验。用户体验设计师需要掌握的技能包括:用户研究方法、信息架构、交互设计、可用性测试等。

产品设计:从功能到体验的完整设计。产品设计师需要从0到1地设计一个产品,包括需求分析、功能规划、交互设计、视觉设计等。产品设计的核心是:如何打造一个既有商业价值又有用户体验的产品。产品设计师需要掌握的技能非常广泛,包括市场分析、用户研究、产品规划、交互设计、视觉设计、项目管理等。

车载交互设计:智能汽车内的交互界面。随着智能汽车的发展,车载交互设计成为一个新兴且热门的方向。车载交互设计的核心是:如何在驾驶场景下,让用户安全、便捷地与车辆交互。车载交互设计师需要掌握的技能包括:驾驶场景理解、车内交互规范、驾驶安全原则等。

AR/VR交互设计:增强现实和虚拟现实中的交互设计。这是交互设计的前沿方向,需要设计师想象未来的交互方式。AR/VR交互设计的核心是:如何在三维空间中设计自然、直观的交互方式。AR/VR交互设计师需要掌握的技能包括:空间交互设计、3D界面设计、体感交互等。

1.2 行业特点

交互设计这行吧,有几个特点你得知道:

以用户为中心!一切为了用户体验!

这是交互设计的核心价值观。交互设计师做任何决策,都需要从用户的角度出发,考虑用户的需求、痛点和使用场景。

用户研究是交互设计师的基本功。你需要学会做用户访谈、问卷调查、行为分析等,从各种渠道获取用户洞察。

设计思维是交互设计师的方法论。你需要学会定义问题、定义洞察、构思方案、原型测试,不断迭代优化。

需要懂研究、懂设计、懂技术

交互设计师是一个需要”十八般武艺”的岗位。你不仅要做用户研究,还要画界面、做原型,有时候还需要写写代码。

技术方面,你不需要成为程序员,但需要了解技术边界。有些设计技术上实现不了,你得知道。

设计方面,你需要掌握各种设计工具,如Figma、Sketch、Adobe XD等。还要了解设计规范,如iOS Human Interface Guidelines、Google Material Design等。

现在火!各行各业都需要

现在是数字化时代,几乎所有行业都需要做数字化转型,都需要交互设计师。

互联网公司自不必说,传统企业如银行、保险公司、医疗机构、教育机构等,也都在做自己的APP和网站,需要交互设计师。

而且,随着AI技术的发展,AI产品、语音交互等新领域,也需要大量的交互设计师。

薪资待遇不错

交互设计师的薪资在设计行业里算是中等偏上的。初级交互设计师的月薪大概在8K-15K,中级在15K-25K,高级或者管理层可以达到30K以上。

当然,具体薪资还要看城市、公司、个人能力等因素。一线城市的薪资普遍比二三线城市高,大厂的薪资普遍比小公司高。


第二章:作品集到底看什么?

2.1 评审的核心重点

主包根据观察,总结了交互设计面试官最在乎的几点,你们可得记住了:

用户研究能力

你会做用户调研吗?能分析用户需求吗?

用户研究是交互设计的基础。面试官会看你的项目中,是否有用户研究的内容,你的研究方法是否科学,你的洞察是否有价值。

用户研究包括:

  • 定性研究:用户访谈、焦点小组、可用性测试等
  • 定量研究:问卷调查、数据分析、A/B测试等
  • 分析方法:用户画像、用户旅程图、亲和图等

好的用户研究能够为设计提供有价值的洞察,帮助设计师做出正确的决策。

设计思维

你做设计的思路是什么?是怎么解决问题的?

交互设计不仅仅是画界面,更重要的是解决问题的能力。面试官想看到的是:你是否有清晰的设计思维?你能否把设计过程说清楚?

设计思维包括:

  • 问题定义:如何定义真正的问题
  • 洞察发现:如何从用户研究中获取洞察
  • 方案构思:如何生成设计方案
  • 原型制作:如何快速验证想法
  • 测试迭代:如何根据反馈优化设计

解决方案

你的设计方案是如何解决问题的?

面试官最想看到的是:你的设计是否真正解决了用户的问题?你的设计方案是否有逻辑支撑?

解决方案的评估标准包括:

  • 是否针对真实问题:问题是否来源于用户研究?
  • 是否有理论支撑:设计决策是否有理论依据?
  • 是否考虑了约束:是否考虑了技术、商业、用户等约束?
  • 是否有验证:设计方案是否经过测试验证?

流程展示

你能把设计过程说清楚吗?

交互设计作品集不仅仅是展示最终效果,更重要的是展示设计过程。面试官想看到的是:你能否清晰、有逻辑地展示你的设计过程?

流程展示包括:

  • 项目背景:为什么做这个项目?
  • 研究过程:你做了什么研究?发现了什么?
  • 设计过程:你做了什么方案?为什么选这个方案?
  • 验证过程:你做了什么测试?结果如何?

工具掌握

你会用什么工具?

交互设计师需要掌握各种工具。面试官会看你会用什么工具,以及用得怎么样。

常用工具包括:

  • 原型工具:Figma、Sketch、Adobe XD、Axure、ProtoPie等
  • 绘图工具:Photoshop、Illustrator、FigJam等
  • 协作工具:Figma、Miro、Notion等

跨部门协作能力

你能和其他部门合作吗?

交互设计师需要和 PM、运营、开发、测试等各种角色协作。面试官想看到的是:你是否有良好的沟通协作能力?


2.2 必备项目类型

类型说明建议数量
完整项目从调研到方案的完整项目2-3个
用户研究项目展示研究能力1-2个
界面设计项目展示视觉设计能力若干
竞品分析项目展示分析能力1-2个

为什么是这个数量?

主包解释一下:

2-3个完整项目:这是核心中的核心,必须足够深入。每个项目应该有明确的问题、完整的研究、清晰的方案和验证过程。

1-2个用户研究项目:展示你的研究能力。用户研究是交互设计的基础,必须过关。

若干界面设计项目:展示你的视觉能力。交互设计师也需要有一定的视觉设计能力。

1-2个竞品分析项目:展示你的分析能力。竞品分析是日常工作中常见的需求。


第三章:作品到底怎么放?

3.1 项目展示的结构

交互设计的项目展示是有套路的!主包来给你们讲讲:

项目背景

为什么做这个项目?解决什么问题?

项目背景要讲清楚:

  • 业务背景:项目是在什么背景下产生的?
  • 问题背景:用户有什么问题需要解决?
  • 项目目标:项目要达成什么目标?
  • 项目角色:你在项目中担任什么角色?
  • 项目时间:项目历时多长时间?

用户研究

你是怎么做调研的?发现了什么?

用户研究要讲清楚:

  • 研究目标:你希望通过研究了解什么?
  • 研究方法:你用了什么研究方法?(访谈、问卷、观察等)
  • 研究对象:你研究了什么用户?有多少人参与?
  • 研究发现:你发现了什么关键洞察?
  • 研究结论:这些发现对设计有什么指导意义?

需求分析

用户需要什么?我们要做什么?

需求分析要讲清楚:

  • 用户画像:目标用户是谁?有什么特点?
  • 用户旅程:用户使用产品的全过程是怎样的?
  • 痛点分析:用户在哪些环节遇到问题?
  • 需求定义:基于研究发现,定义了什么需求?
  • 设计机会:有哪些设计机会可以解决用户问题?

信息架构

产品的信息是怎么组织的?

信息架构要讲清楚:

  • 内容清单:产品包含哪些内容?
  • 信息分类:内容是如何分组的?
  • 导航结构:用户如何在内容间导航?
  • 组织原则:信息组织的逻辑是什么?

交互流程

用户操作的流程是怎么走的?

交互流程要讲清楚:

  • 核心流程:用户完成主要任务需要哪些步骤?
  • 分支流程:有哪些异常情况?如何处理?
  • 流程图:用流程图展示完整的交互路径

设计方案

你的方案是怎么设计的?

设计方案要讲清楚:

  • 设计理念:你的设计理念是什么?
  • 页面结构:每个页面包含哪些元素?
  • 交互设计:用户如何与界面交互?
  • 状态设计:有哪些不同状态?如何处理?
  • 异常设计:有哪些异常情况?如何提示用户?

原型与测试

做了什么样的原型?测试结果如何?

原型与测试要讲清楚:

  • 原型类型:你做了什么类型的原型?(低保真、中保真、高保真)
  • 原型工具:你用什么工具做的原型?
  • 测试方法:你做了什么测试?(可用性测试、A/B测试等)
  • 测试对象:谁参与了测试?
  • 测试结果:测试发现了什么问题?如何优化?

3.2 这些内容怎么放?

用户画像

目标用户长什么样?

用户画像是对目标用户的典型代表,是用户研究的结晶。用户画像包括:

  • 基本信息:年龄、职业、收入等
  • 使用场景:什么时候会使用这个产品?
  • 目标动机:用户想通过产品达成什么目标?
  • 痛点困难:用户在使用现有产品时遇到什么困难?
  • 设计建议:根据用户画像,对设计有什么建议?

用户旅程图

用户使用产品的全过程

用户旅程图展示用户与产品交互的全过程,包括:

  • 阶段划分:用户使用产品分为哪几个阶段?
  • 触点分析:每个阶段用户接触了哪些触点?
  • 行为分析:每个阶段用户做了什么?
  • 情绪曲线:用户在各阶段的情绪如何?
  • 痛点机会:有哪些痛点?有哪些改进机会?

信息架构图

产品的信息是怎么组织的

信息架构图展示产品的内容组织结构,包括:

  • 一级分类:最高层级的分类是什么?
  • 二级分类:各一级分类下的子分类是什么?
  • 标签设计:有没有标签?标签如何设计?
  • 搜索设计:有没有搜索?如何设计搜索?

流程图

用户操作的流程是怎么走的

流程图展示用户的操作路径,包括:

  • 正常流程:用户正常操作需要哪些步骤?
  • 异常流程:出现异常情况时如何处理?
  • 支线流程:有哪些分支路径?

线框图

页面的布局是什么样的

线框图是低保真的原型,展示页面的基本布局,包括:

  • 布局结构:页面分为哪些区域?
  • 元素放置:各元素放在什么位置?
  • 信息优先级:哪些信息重要?哪些次要?

高保真原型

做出来的界面长这样

高保真原型接近最终产品,包括:

  • 视觉设计:颜色、字体、图片等
  • 交互设计:各种交互状态
  • 动效设计:过渡动画、反馈动画等

设计规范

统一的设计语言

设计规范确保设计的一致性,包括:

  • 组件规范:按钮、输入框、卡片等组件的样式
  • 交互规范:各种交互状态的呈现方式
  • 文案规范:各种场景下的文案怎么写

第四章:怎么让作品集更出彩?

4.1 项目选择要谨慎

作品集里的每一个项目都必须是精品!

不要什么项目都往里放,只放最能体现你能力的。

主包建议的项目选择标准:

  • 项目完整性:是否有完整的设计过程?
  • 项目深度:是否足够深入地解决问题?
  • 项目成果:是否取得了可量化的成果?
  • 个人贡献:你在项目中做了什么?

4.2 展示要清晰

好的展示能让面试官快速理解你的项目!

主包建议的展示原则:

  • 逻辑清晰:按照设计流程展示
  • 重点突出:把最重要的内容突出展示
  • 图文并茂:用图表辅助说明
  • 数据支撑:用数据证明设计效果

4.3 差异化要突出

这是你区别于其他设计师的关键!

找到自己的特点,然后展示出来。

主包建议:

  • 发挥特长:如果你擅长用户研究,就多展示研究能力
  • 突出风格:如果你有独特的设计风格,就展示出来
  • 展示深度:如果你对某个领域有深入研究,就展示出来

第五章:常见问题与解决

问题一:我没有交互项目怎么办?

这是很多同学的困惑。没有实习经历,没有项目经验,作品集怎么办?

解决方案

把现有的设计项目重新包装

如果你是设计专业,肯定做过一些课程作业。这些作业可以重新包装成交互设计项目。

关键是:你要用交互设计的思维去重新梳理项目过程,补足用户研究、需求分析、方案设计等内容。

比如:你做过的APP设计课程作业,可以重新梳理成:从用户研究出发,发现了什么问题,如何定义需求,如何设计方案,如何测试验证。

虚拟项目也可以,但要真实

如果没有真实项目,可以做虚拟项目。但虚拟项目也要做得真实。

怎么做真实的虚拟项目?

  • 选择一个真实的场景:比如为一个真实的产品做改进
  • 做真实的用户研究:即使没有真实用户,也可以模拟用户画像
  • 设计真实的方案:方案要合理,不能天马行空
  • 考虑真实约束:要考虑技术、商业等约束

竞品分析也是项目!

竞品分析是交互设计师的日常工作的重要组成部分。一个好的竞品分析也能体现你的能力。

竞品分析怎么做?

  • 选择分析对象:选择一两个直接竞品
  • 分析维度:功能、交互、视觉、用户体验等
  • 得出洞察:通过分析得出有价值的洞察
  • 提出建议:基于洞察提出改进建议

问题二:原型怎么做?

这是很多同学的问题。原型是交互设计师的核心技能,必须掌握。

解决方案

Figma!必备工具

Figma是目前最流行的UI/UX设计工具,必须掌握。

Figma学习建议:

  • 基础操作:学会创建文件、画图、布局
  • 组件功能:学会创建和使用组件
  • 原型功能:学会做交互原型
  • 协作功能:学会团队协作

Axure也还行

Axure是传统的原型工具,在一些大公司还在用。

Axure适合做复杂的交互原型,特别是需要条件判断、变量等功能的原型。

Principle、ProtoPie做动效

如果想展示动效能力,可以学学Principle或ProtoPie。

这两个工具可以做出非常流畅的交互动效,让面试官眼前一亮。

问题三:用户研究怎么做?

这是很多同学的问题。用户研究听起来很高大上,不知道怎么做。

解决方案

访谈、问卷、观察都可以

用户研究方法有很多种:

  • 用户访谈:一对一深入交流,了解用户的需求、痛点、使用习惯等
  • 问卷调查:收集大量用户的定量数据,了解用户特征、行为等
  • 观察法:直接观察用户使用产品的过程,发现实际问题

关键是:选择适合的研究方法,基于研究目标选择。

关键是得出有价值的洞察

研究方法只是手段,洞察才是目的。

什么是洞察?洞察是对用户需求的深入理解,能够指导设计。

比如:用户说”我想方便地付款”,这是需求。但洞察可能是”用户在付款环节感到不安全,需要更透明的交易信息”。

网上有很多教程

用户研究的方法网上有很多教程,可以边学边做。

主包建议:先从简单的用户访谈开始,积累经验后再做更复杂的研究。

问题四:项目太简单怎么办?

这是很多同学的问题。觉得自己的项目太简单,拿不出手。

解决方案

深入挖掘

即使项目本身不复杂,也可以深入挖掘。

比如:做一个小程序,可以深入研究用户的使用场景、竞品的差异、设计的细节等。

展示思考过程

项目简单不代表能力不行。你可以通过展示思考过程,让面试官看到你的能力。

比如:展示你是如何分析问题的、如何做决策的、是如何考虑各种因素的。

多个简单项目组合

如果单个项目很简单,可以放多个项目,展现能力的广度。


第六章:行动指南

6.1 现在就做(1周内)

  • 梳理现有项目,找出可以包装成交互设计项目的
  • 学习Figma基础操作
  • 了解交互设计的基本概念和方法

6.2 接下来要做(1个月内)

  • 做1-2个完整的交互设计项目
  • 补足用户研究内容
  • 学习更多原型工具
  • 完善作品集展示

6.3 长期要做(每学期)

  • 持续积累项目经验
  • 深入研究某个领域
  • 关注优秀的设计作品
  • 参加设计比赛和实习
  • 建立自己的设计作品网络展示

第七章:常见问题解答

Q1:作品集应该用什么格式?

A:建议用PDF格式,兼容性好,方便发送。也可以准备一个在线作品集网站,如个人网站、Behance等。

Q2:项目数量要多少合适?

A:2-3个完整的项目即可。项目不在多,而在精。每一个项目都要能充分展示你的能力。

Q3:需要展示代码能力吗?

A:交互设计师不需要会写代码,但了解代码会有帮助。如果你会一些前端代码,会是加分项。

Q4:没有用户研究数据怎么办?

A:可以用假设的用户画像和场景来代替,但要在作品中说明这是假设的。更好的做法是尽量做真实的用户研究。

Q5:作品集需要英文版吗?

A:如果目标是外企或留学,准备英文版会更好。如果目标是国内公司,中文版就够。


结语

交互设计是个既需要理性又需要感性的行业。

主包见过很多界面画得很好看但解决不了问题的设计师,也见过一些设计思路很清晰但表达不出来的人。关键是:既要会做,也要会说。

记住:面试官想看到的不只是你画的界面有多好看,更是你做设计的思路和方法。用户研究、问题分析、解决方案,这才是交互设计的核心。

交互设计这条路需要不断学习和积累。从现在开始,认真对待每一个项目,用心做好每一个设计,属于你的机会一定会来的。

加油!愿每一个热爱交互设计的人,都能用设计让世界变得更美好。


下期预告:下一期我们来聊聊UI/UX设计作品集的制作。敬请期待!