008-12-UI-UX设计作品集制作

写在前面：UI/UX设计这个方向，现在火得不行！随便一个互联网公司都在招UI设计师，薪资待遇那是相当的可观。这篇文章主包就结合自己的观察和经验，好好聊聊UI/UX设计作品集该怎么做才能入面试官的法眼。这篇文章会比较长，但全是干货，建议先收藏再看。

---

第一章：UI/UX设计行业到底是干啥的？

1.1 专业方向细分

老铁们，首先你们得知道UI/UX设计包含哪些方向。这行可不仅仅是画界面那么简单，里面的门道多着呢！主包来给你们捋一捋：

界面设计：APP界面、网站界面——产品长什么样。界面设计师是UI设计的核心，负责产品界面的视觉设计。界面设计师需要掌握色彩理论、排版技巧、图标设计、组件设计等技能。界面设计的核心是：如何让界面既美观又易用。界面设计师需要了解的包括：iOS Human Interface Guidelines、Google Material Design、Ant Design等设计规范。

用户体验设计：用户使用产品的整体体验——用起来爽不爽。用户体验设计师（UX Designer）关注的是用户使用产品的整个过程，从第一次打开APP到完成某个任务，再到离开产品。用户体验设计的核心是：如何让用户在使用产品的过程中感到愉悦、高效、满足。用户体验设计师需要掌握的技能包括：用户研究、信息架构、交互设计、可用性测试等。

图标设计：各种小图标——看起来要好看好认。图标设计师是UI设计中比较细分的一个方向。图标设计师需要掌握图标的设计原则、风格选择、绘制技巧等。图标设计的核心是：如何用简洁的图形传达明确的信息。好的图标设计能够让界面更加清晰、美观。

设计系统：统一的设计规范——让产品保持一致。设计系统设计师负责建立和维护产品的设计规范，确保产品在不同页面、不同模块之间保持一致性。设计系统包括：设计原则、色彩系统、字体系统、组件库、图标库等。设计系统是UI设计中比较高级的方向，需要设计师有系统思维和全局观念。

运营设计：banner、活动页——营销用的视觉设计。运营设计师负责产品中的营销物料设计，如Banner、活动页、推广图等。运营设计的核心是：如何通过视觉设计吸引用户注意力、促进转化。运营设计师需要掌握的技能包括：营销思维、视觉设计、动效设计等。

品牌设计：品牌视觉识别系统——让品牌更有辨识度。品牌设计师负责品牌的视觉设计，包括Logo、VI系统、品牌物料等。品牌设计的核心是：如何通过视觉设计传达品牌的定位和价值。品牌设计需要设计师有较强的平面设计能力和品牌思维。

动效设计：交互动效——让界面动起来。动效设计师负责设计界面中的动画效果，如过渡动画、反馈动画、微交互等。动效设计的核心是：如何通过动效增强用户体验。动效设计需要设计师掌握动画原理、动效工具等技能。

1.2 行业特点

UI/UX设计这行吧，有几个特点你得知道：

入行相对容易，但做好很难

现在UI设计的入行门槛确实比前几年高了，但相对来说还算容易。网上有大把的教程，自学几个月就能上手做界面。

但是要把UI设计做好，却非常困难。你需要：

• 扎实的视觉设计能力：色彩、排版、构图等
• 深入的用户体验思维：理解用户需求、解决用户问题
• 系统的设计规范意识：建立和维护设计系统
• 持续的学习能力：行业变化快，需要不断学习新技能

技术更新快，需要不断学习

UI设计行业变化非常快。几年前的流行趋势，现在可能已经过时了。

2015年，扁平化设计（Flat Design）还很火；2017年，长投影（Long Shadow）很流行；2019年，微动效（Micro-interaction）成为标配；2021年，3D设计开始流行；2023年，AI设计工具开始普及……

作为UI设计师，你需要持续关注行业动态，学习新技能，才能不被淘汰。

薪资待遇不错，需求量也大

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

需求量方面，只要互联网行业还在发展，就需要UI设计师。而且，现在传统企业也在做数字化转型，对UI设计师的需求也越来越大。

越来越卷，需要有自己的核心竞争力

现在UI设计师越来越多，竞争越来越激烈。如果你只是会画界面，可能很难找到好工作。

你需要有自己的核心竞争力，比如：

• 较强的用户体验设计能力
• 某个领域的专业知识（如金融、医疗、电商等）
• 动效设计或3D设计能力
• 设计系统或组件库建设经验
• 代码能力（会前端开发）

---

第二章：作品集到底看什么？

2.1 评审的核心重点

主包根据观察，总结了UI/UX设计面试官最在乎的几点，你们可得记住了：

视觉能力

界面做得好看不好看？审美怎么样？

这是最基本的要求。面试官会看你的界面设计：颜色搭配是否和谐？排版是否整齐？图标是否好看？

视觉能力包括：

• 色彩运用：能否运用色彩传达情绪、引导用户
• 排版布局：能否合理安排界面元素的位置
• 图标设计：图标是否清晰、好看、易识别
• 视觉层次：界面是否有清晰的视觉层次
• 设计风格：是否有独特的设计风格

规范意识

你懂不懂设计规范？有没有系统思维？

规范意识是区分初级设计师和专业设计师的关键。面试官想看到的是：你是否了解设计规范？是否能建立和维护设计规范？

规范意识包括：

• 设计规范了解：是否了解iOS Material Design等主流设计规范
• 设计系统思维：是否有建立设计系统的能力
• 组件化思维：是否有用组件构建界面的能力
• 一致性意识：是否注重界面的一致性

用户体验意识

你考虑用户体验了吗？

UI设计不仅仅是画界面，更重要的是解决问题。面试官想看到的是：你的设计是否考虑了用户体验？

用户体验意识包括：

• 用户研究：你是否了解目标用户？
• 场景分析：你是否分析用户使用场景？
• 交互设计：你是否考虑交互逻辑？
• 可用性：你是否考虑界面的可用性？

工具掌握

Figma、Sketch这些工具你会不会？

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

常用工具包括：

• 界面设计工具：Figma、Sketch、Adobe XD、Photoshop、Illustrator
• 动效设计工具：After Effects、Principle、ProtoPie
• 协作工具：Figma、Miro、Notion

设计流程

你做设计的流程是什么？

面试官想看到的是：你是否有清晰的设计流程？是否能系统地完成设计？

设计流程包括：

• 需求分析：如何理解需求？
• 用户研究：如何了解用户？
• 设计方案：如何生成方案？
• 设计迭代：如何优化设计？

---

2.2 必备项目类型

类型	说明	建议数量
APP设计项目	完整的APP界面设计	2-3个
Web设计项目	网站页面设计	1-2个
设计规范	设计系统/组件库	1-2个
运营设计项目	banner、活动页等	若干

为什么是这个数量？

主包解释一下：

2-3个APP设计项目：这是核心中的核心，必须足够深入。每个项目应该有完整的设计规范和界面设计。

1-2个Web设计项目：展示你Web设计的能力。Web设计和APP设计有所不同，需要展示你不同平台的设计能力。

1-2个设计规范项目：展示你的系统思维。设计规范是UI设计师进阶的必备能力。

若干运营设计项目：展示你多元化的设计能力。运营设计是很多公司日常需求。

---

第三章：作品到底怎么放？

3.1 项目展示的结构

UI/UX设计的项目展示是有套路的！主包来给你们讲讲：

项目背景

做什么产品？目标用户是谁？

项目背景要讲清楚：

• 产品定位：这个产品是做什么的？解决什么问题？
• 目标用户：这个产品面向什么用户？
• 设计目标：设计要达成什么目标？
• 项目角色：你在项目中担任什么角色？
• 项目时间：项目历时多长时间？

设计规范

色彩、字体、图标等规范

设计规范是UI设计的核心，要详细展示：

• 色彩规范：主色、辅助色、功能色、渐变色等
• 字体规范：标题、正文、字重、字号等
• 图标规范：图标风格、图标尺寸、图标应用等
• 组件规范：按钮、输入框、卡片、列表等常用组件
• 间距规范：间距系统、栅格系统等

界面设计

核心页面的设计展示

界面设计要展示关键页面：

• 启动页/引导页：第一印象
• 首页：核心功能展示
• 详情页：内容展示
• 操作页：用户交互
• 个人中心：用户设置
• 异常页：错误状态、空状态等

交互演示

做出来的效果是什么样的

交互演示能让面试官更直观地看到设计效果：

• 过渡动画：页面切换的动画效果
• 反馈动画：操作后的反馈动画
• 微交互：按钮、开关等的小动画
• 交互原型：可操作的交互原型

3.2 设计规范怎么展示？

这可是UI设计的必备！你得展示：

色彩规范

主色、辅助色、功能色

色彩规范要展示：

• 主色：品牌主色，传达品牌调性
• 辅助色：辅助主色，增加界面丰富度
• 功能色：成功、警告、错误等状态色
• 渐变色：渐变色的使用场景和规范
• 中性色：灰度色，用于文字、背景等

字体规范

标题、正文、字重

字体规范要展示：

• 字体选择：使用什么字体？
• 字号体系：标题、正文、说明文字的字号
• 字重体系：Regular、Medium、SemiBold、Bold等
• 行高规范：不同字号对应的行高
• 字间距规范：字符间距的设置

组件规范

按钮、输入框、卡片等

组件规范要展示：

• 按钮：主按钮、次按钮、文字按钮、图标按钮等
• 输入框：单行输入、多行输入、密码输入等
• 卡片：内容卡片、图片卡片等
• 列表：列表项、列表组等
• 导航：底部导航、顶部导航、侧边导航等
• 弹窗：对话框、底部弹窗、Toast等

间距规范

间距系统是怎么定义的

间距规范要展示：

• 基础间距：4px、8px、12px、16px等基础单位
• 间距系列：常用的间距值
• 栅格系统：栅格的列数、间距、边距
• 内边距：组件内部间距
• 外边距：组件外部间距

---

第四章：怎么让作品集更出彩？

4.1 作品选择要谨慎

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

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

主包建议的作品选择标准：

• 视觉质量：界面是否好看？
• 规范完整：是否有完整的设计规范？
• 流程展示：是否能展示设计过程？
• 个人贡献：你在项目中贡献了什么？

4.2 展示要专业

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

主包建议的展示原则：

• 规范完整：设计规范要完整、专业
• 界面美观：界面设计要好看、精致
• 细节丰富：细节展示能体现专业度
• 动效展示：有动效展示会更好

4.3 差异化要突出

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

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

主包建议：

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

---

第五章：常见问题与解决

问题一：我审美不好怎么办？

这是很多同学的困惑。觉得自己审美不好，做出来的界面不够好看。

解决方案：

多看好的设计！每天看每天抄！

审美是可以培养的。主包建议：

• 每天看设计网站：Dribbble、Behance、Pinterest等
• 临摹好的作品：看到一个好的界面，试着复刻它
• 分析好的设计：思考好在哪里？为什么好看？

学习设计基础理论

审美不好可能是因为理论基础不扎实。主包建议学习：

• 色彩理论：色彩心理学、色彩搭配等
• 排版理论：网格系统、视觉层次等
• 构图理论：对称、平衡、留白等

培养审美没有捷径，就是多看

审美是一个积累的过程急不来。你需要：

• 持续关注优秀设计
• 建立自己的灵感库
• 定期复盘和总结

问题二：我没有完整的项目怎么办？

这是很多同学的困惑。没有实习经历，没有完整项目，作品集怎么办？

解决方案：

虚拟项目也可以

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

怎么做真实的虚拟项目？

• 选择一个真实的产品进行重新设计
• 从0到1设计一个完整的产品
• 参考真实的设计规范进行设计

重做现有APP也是练习

选一个你常用的APP，尝试重新设计它。

这个过程可以让你：

• 学习完整的设计流程
• 练习设计规范的应用
• 建立自己的作品集

参加设计比赛

各种设计比赛是积累作品的好机会。

参加比赛可以让你：

• 获得真实的项目经验
• 获得奖项增加背书
• 认识更多设计师朋友

问题三：我不懂设计规范怎么办？

这是很多同学的问题。不了解设计规范，做出来的界面不专业。

解决方案：

学！网上教程一堆

设计规范网上有很多教程，可以边学边做。

主包建议学习的规范：

• iOS Human Interface Guidelines（苹果人机界面指南）
• Google Material Design（谷歌材质设计）
• Ant Design（蚂蚁设计规范）
• Element（饿了么设计规范）

看大厂的设计规范

大厂的设计规范都是公开的，可以学习。

主包建议看的设计规范：

• 苹果 Human Interface Guidelines
• 谷歌 Material Design
• 微软 Fluent Design
• 蚂蚁 Ant Design
• 字节 ByteDesign

自己建立一套规范

学习规范的最好方式是实践。试着为一个虚拟产品建立一套完整的设计规范。

这个过程可以让你：

• 深入理解设计规范
• 掌握规范的构建方法
• 建立系统设计思维

问题四：我不会动效怎么办？

这是很多同学的问题。觉得动效很高大上，不会做。

解决方案：

先从简单的开始

动效不需要一上来就做很复杂的。先从简单的开始：

• 按钮的hover效果
• 简单的页面过渡
• 加载动画

学习动效设计原则

动效设计也有原则：

• 自然：动画要符合物理规律
• 有效：动画要有意义
• 流畅：动画要流畅
• 适度：不要过度使用动效

使用工具制作动效

现在有很多动效工具：

• After Effects：专业的动效制作软件
• Principle：专注于界面动效
• ProtoPie：交互性很强的动效工具
• Figma自带动效功能：可以做简单的交互动效

---

第六章：行动指南

6.1 现在就做（1周内）

• 整理现有界面作品，筛选出最好的
• 学习Figma基础操作
• 了解主流设计规范（iOS、Material Design）

6.2 接下来要做（1个月内）

• 建立自己的设计规范
• 做1-2个完整的APP设计项目
• 学习动效设计基础
• 完善作品集展示

6.3 长期要做（每学期）

• 持续积累项目经验
• 深入学习设计规范
• 关注优秀的设计作品
• 参加设计比赛和实习
• 建立自己的设计作品网络展示

---

第七章：常见问题解答

Q1：作品集应该用什么格式？

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

Q2：界面设计需要展示多少个页面？

A：不需要展示所有页面，选择核心页面展示即可。建议每个项目展示8-15个关键页面。

Q3：设计规范需要多详细？

A：设计规范越详细越好，但要突出重点。建议包含：色彩、字体、组件、间距等核心内容。

Q4：没有动效可以吗？

A：没有动效也可以，但有动效会更好。动效是加分项，不是必须项。

Q5：盗用别人的设计会怎么样？

A：这是非常严重的问题。一旦被发现，不仅会失去面试机会，还可能承担法律责任。一定要用自己做的设计！

Q6：作品集需要英文版吗？

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

---

结语

UI/UX设计是个需要不断学习的行业。

主包见过很多界面画得很好看但没有规范意识的设计师，也见过一些有规范但界面不好看的设计师。关键是：既要会做美观界面，也要会建规范系统。

记住：面试官想看到的不只是你界面做得有多好看，更是你有没有设计规范意识和用户体验思维。技术可以练，审美可以培养，但规范的思维方式才是专业的体现。

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

加油！愿每一个热爱UI设计的人，都能用设计让世界变得更美好。

---

下期预告：下一期我们来聊聊作品集排版与视觉呈现。敬请期待！