大厂UI/UX作品集制作思路：从项目筛选到面试表达

这次我们来看大厂 UI/UX 作品集的常见思路。很多人做作品集第一步就打开 Figma 开始排版做到一半才发现逻辑不顺、项目太水、讲不清楚。问题不是不够努力而是没有先解决三个核心问题给谁看、讲什么、怎么证明。这篇加更主要回答作品集答疑里最常被追问的几个点项目怎么筛选单个项目怎么讲才有深度视觉呈现怎么不拖后腿大厂面试官到底在看什么。内容不涉及具体公司内部资料只讲通用的作品集构建方法你可以直接套用。文章会按五个环节展开先定作品集的整体定位再做素材整理和项目筛选然后拆解单个项目的叙事模板再处理视觉呈现和阅读体验最后给出一份可以落地的自检清单和面试准备方法。不管你是准备校招、跳槽还是想接外包时展示专业度这套思路都适用。1. 大厂UI/UX作品集思路速览先给一张速览表把整套思路的关键参数列清楚。后面每一行都会展开讲。维度建议方案项目数量2 到 3 个深度项目为主最多不超过 5 个单项目页数8 到 15 页之间按项目复杂度浮动叙事结构背景、问题、过程、方案、验证、反思核心衡量标准设计执行、业务理解、系统思维、表达能力推荐格式PDF 为主在线链接为辅视觉基调干净留白、层级清晰、字体克制常见失败原因堆图无逻辑、无数据验证、只讲美观不讲决策最优阅读时长面试官单项目停留 2 到 5 分钟这套思路的核心判断是大厂作品集不是设计稿合集而是项目复盘文档。面试官想看的是你在真实约束下如何做决策而不是你贴了多少张好看的高保真图。所以整份作品集需要回答的问题只有一个你面对一个复杂的、有约束的、真实的产品问题如何通过设计方法找到方案并且证明它有效。所有页面和素材都应该围绕这个主线展开。2. 作品集定位先想清楚给谁看2.1 面试官的身份决定阅读方式大厂 UI/UX 作品集的读者通常有三类业务线设计负责人、资深设计师、HR。前两者真正决定你是否进入下一轮HR 更多是看基础信息是否完整。设计负责人看作品集时重点关心这个人能不能独立负责一条业务线。资深设计师看作品集时重点关心这个人的设计基本功是否扎实有没有体系化思考。两者的差异意味着作品集不能只突出视觉表现还要展示完整的思考链路。举例来说如果你的项目只放最终界面的高清图设计负责人会觉得你不讲业务资深设计师会觉得你缺少过程推导。反过来如果作品集里全是用户访谈记录和流程图没有一张能打的视觉稿面试官又会怀疑你的设计执行能力。更稳妥的判断是作品集需要兼顾两条阅读路径。快速扫读时每一页都有明确信息仔细研读时项目间有完整的前后逻辑。要做到这一点需要提前想清楚每个页面承担什么任务而不是边排边想。2.2 一句话定位你的作品集动手之前先用一句话写清楚作品集定位。这个定位不需要出现在作品集里但它是你做所有内容取舍的判断标准。两个示例定位面向 B 端中后台设计岗位突出复杂业务梳理、组件化思维、跨部门协作能力。面向 C 端增长产品岗位突出用户洞察、数据实验、快速迭代能力。定位不同项目排列顺序和单项目详略设计也不同。同一个项目如果你把它定位成“从 0 到 1 的产品设计”那就需要补充大量前期调研内容如果把它定位成“体验优化专项”那就要把核心篇幅放在问题定义和方案验证上。很多作品集的问题出在定位模糊想展示自己什么都会结果每一块都浅。更好的策略是先选定一个主打赛道把相关能力放大再通过一到两个辅助项目体现广度。所以作品集制作的第一步不是打开设计软件而是先回答这份作品集要去什么岗位面试官最看重什么能力我要在哪两个项目上做最大投入。3. 素材整理与项目筛选3.1 建立素材归档结构确定了定位之后把手上所有项目素材集中起来整理。建议创建清晰的项目目录避免后面排版时到处翻文件。可以用下面的结构portfolio/ ├── 00_cover/ # 封面页素材 ├── 01_about/ # 个人介绍 ├── 02_projects/ # 项目主体 │ ├── projectA_im/ │ │ ├── 01_background/ # 背景资料、竞品分析 │ │ ├── 02_process/ # 草图、流程图、线框图 │ │ ├── 03_design/ # 高保真界面、组件 │ │ └── 04_result/ # 上线数据、复盘截图 │ └── projectB_admin/ └── 03_extra/ # 组件库、插画、动效等加分项素材归档时文件名带上编号和版本方便后续查找。尤其要注意保留过程稿比如早期线框图、不太成功的探索稿、甚至被砍掉的方案。它们在作品集中有一个非常重要的作用证明你有独立思考过程而不是只把最终结果美化一遍。3.2 用什么标准筛项目筛选项目的原则是优先选你能完整讲清楚全过程的项目而不是选界面最漂亮的项目。推荐用下面四个标准对每个候选项目打分筛选维度判断问题真实复杂度项目是否包含多约束、多方协作、业务限制个人贡献度你在其中承担什么角色哪些决策是你做的过程可见性是否有调研记录、方案对比、数据反馈结果可验证是否有指标变化、用户反馈、业务认可一个项目只要符合其中三条就值得入选。如果你本身是参与执行而非主导角色那就把叙事重点从“我决定”改成“我参与推进了什么”“我在哪个环节发挥了作用”同样可以成立。比较常见的筛选失误是把 6 个甚至 8 个项目都塞进作品集。作品集不是项目清单项目过多会分散注意力面试官也很难在每个项目上停留足够时间。从阅读效率角度看2 到 3 个深度项目比 6 个浅项目更有说服力。如果你手上只有两个完整项目也不要硬凑第三个。把两个项目讲透每增加一页都确保它提供了新信息比填充一个无法深入讲的项目要安全得多。3.3 脱敏与授权处理这一步非常重要。很多真实项目涉及公司业务数据、后台截图、用户信息直接放进作品集会带来版权和保密风险。在归档阶段要对所有素材做一次脱敏检查替换或模糊化真实用户姓名、头像、联系方式。擦除业务敏感指标的具体数值或用脱敏数据进行呈现。涉及未上线产品、内部创意项目必须先确认是否可以对外展示。背景图、字体、图标素材要确认是否有商业授权。如果你的项目不允许对外展示界面可以考虑做成“非视觉项目”只讲流程、研究方法、业务结果不放具体设计稿。这比冒着泄露风险强得多也能体现职业素养。4. 单项目叙事结构从需求到验证4.1 叙事模板先给结论再讲过程作品集里的项目页面建议采用“结论先行”的结构。每个项目开头不要直接放大标题图而是用一页高度概括的信息告诉面试官这个项目是什么、我做了什么、结果如何。推荐的单项目叙事模板## 项目名称某后台管理产品体验改版 ### 结论摘要第一屏展示 - 角色UI/UX 设计师独立负责改版设计 - 周期8 周 - 问题旧系统操作效率低用户完成任务平均耗时过长 - 结果核心任务完成时间缩短约 30%材料数据需按实际验证后呈现 ### 1. 背景与目标 …… ### 2. 用户研究与问题定义 …… ### 3. 设计策略与方案 …… ### 4. 验证与迭代 …… ### 5. 个人反思 ……这个模板和传统作品集的区别在于它强制你在一开始就给出可被验证的信息。面试官不需要从一堆图中自行猜测你的贡献而是能快速建立对项目的整体认知然后带着问题进入细节页。4.2 背景与问题定义不要只说“体验不好”很多作品集的通病是问题描述太模糊。比如“用户觉得不好用”“界面太旧”“转化率不高”这类描述缺少信息量也没有展示你的专业判断。更有效的写法是把问题拆成现象、影响、原因三个层次。现象打开某个页面的用户中有多少人没有完成关键操作。影响这个操作直接关系到业务成交或者用户留存。原因通过用户访谈、后台数据、竞品对比定位到交互路径分叉点和信息层级不清。如果你没有权限拿到真实数据可以做小样本的定性调研或者在作品集里明确说明“根据内部材料脱敏整理”。重点是展示你理解问题的方法而不是纠结具体数值是否漂亮。这一屏建议配上三样东西问题卡片、关键数据脱敏后、一条简单的改造前后对比图。不要在第一屏就展开所有界面截图先让读者建立问题认知。4.3 过程展示区分“你做了什么”和“你思考了什么”过程页是最容易写得干瘪的部分。常见的错误是放一大排线框图然后配文“我画了 20 版方案”。这种描述只能说明你工作量很大不能说明你想清楚过什么。更好的过程展示方式是每张图片旁边配一个决策点。比如早期方案选择列表页后来发现用户需要在多个模块间跳转改为分组卡片。最初采用侧边导航考虑到页面层级只有两级改成顶部 Tab。色彩方案从品牌强调色出发后续为了降低视觉噪音改用中性色为主、强调色点缀。每个决策点都要能解释“为什么这样改”。如果某个探索稿最终被推翻也可以放出来配上对失败原因的分析。这反而能让面试官看到你的反思能力。建议过程页控制在整项目的三分之一到一半篇幅。如果一个项目有 12 页过程部分可以考虑用 4 到 5 页来完成剩余篇幅留给方案展示和验证结果。4.4 方案展示放大关键界面不要堆小图方案展示部分不需要把整套产品的所有页面都贴一遍。挑 3 到 5 个关键页面用大图展示配上必要的说明。每张主图建议包含界面/模块的核心目标。设计上最重要的 1 到 2 个决策亮点。与旧版或竞品的关键差异。如果项目是移动端 App可以展示核心流程的三到四张连续页面如果是中后台可以展示复杂表格、权限配置、数据看板等重量级页面。选取标准是能体现最大设计难度和业务价值的页面而不是视觉上最容易出彩的页面。交互细节、动效、不同状态空状态、加载状态、错误状态可以集中放在项目末尾用统一网格排列配上简短的说明。它们能证明你不只设计了理想状态还考虑了真实使用场景。4.5 结果验证没有数据就讲反馈大厂面试官非常关注结果验证。如果项目有上线数据一定要清楚地呈现改进前和改进后的对比。用柱状图或简单卡片都可以但要注意脱敏。如果没有量化数据至少可以呈现以下内容用户反馈比如可用性测试中的用户原话摘录。业务反馈比如合作方或产品负责人对方案的认可。团队反馈比如后续项目在设计规范中被复用。个人复盘比如你重新审视后认为哪些环节还能优化。结果验证页最忌讳只说“项目顺利上线”没有后续信息。即使项目结果不理想也可以写“折损点在哪、如果重做会怎么改”这同样能体现设计师的成熟度。4.6 反思不要避讳失败反思页是很多作品集缺少的部分也是最容易加分的地方。它不需要写得像检讨书而是客观评价项目中的不足之处。例如“在这个项目中我前期花了较长时间做视觉探索留给信息架构梳理的时间不足。后来发现核心用户卡在导航理解上如果重新来一次我会先做卡片分类测试再进入视觉设计。”这种表述不会让面试官觉得你能力不行反而说明你有项目复盘意识知道设计过程里什么环节最重要。反思尽量具体不要写“我未来会努力提升逻辑能力”这种空话而是写清楚问题出现在哪一步以及可执行的改进方法。5. 作品集的视觉呈现与阅读体验5.1 版式信息层级大于视觉装饰作品集本质上是一份文档不是品牌宣传册。视觉设计要先保证信息能被快速理解再考虑美观。每一页都应该有一个主视觉焦点其他内容作为辅助信息存在。建议遵循三个版式原则每页只解决一个核心问题不要一页放三个项目的完整流程。文字和图片比例保持平衡避免纯图片无解释也避免整版都是文字。用大标题和编号引导读者阅读顺序确保扫读时也能抓住重点。字体方面建议选用简洁、无衬线为主的字体正文字号不小于 12pt标题层级控制在两级到三级以内。如果比较关注中文排版效果也可以用中文无衬线字体搭配少量英文数字作为视觉点缀但不要过度使用英文充斥页面。5.2 封面、目录、个人介绍的设计封面要控制在一个非常克制的视觉方案内不需要复杂装饰。能让人一眼看出你的名字、求职方向、核心定位就可以。目录页建议按照项目而不是工具技能来组织。比如01 项目某后台系统体验改版02 项目某移动端增长实验03 拓展设计组件库与动效探索个人介绍页不要放太多自我评价比如“我是一个热爱设计的人”。更有效的是放你的工作年限、核心领域、擅长方法、常用工具和基础联系方式。排版尽量简洁。某些情况下个人介绍还可以放一段“我的设计原则”比如“先理解业务再开始画图先定义成功指标再设计方案”。这类陈述能快速传递你的工作理念但一定要保证后面项目确实能印证。5.3 图片处理与文件体积控制作品集文件不宜过大否则发给面试官时容易被压缩或者线上预览很卡。这里给一个批量压缩脚本示例使用 Python 处理原始图片# 批量压缩作品集图片示例 from PIL import Image import glob import os for path in glob.glob(./raw/*.png): img Image.open(path) img.thumbnail((1920, 1080)) filename os.path.basename(path) img.save(f./export/{filename}, optimizeTrue, quality85) print(fprocessed: {filename})实际使用时要先安装 Pillowpip install Pillow。图片导出时长图控制在 1600 到 1920 像素宽度单张图片压缩到 500KB 以内比较合适PDF 总大小最好控制在 30MB 以下。5.4 在线链接与 PDF 组合除了 PDF建议再准备一个在线链接方便面试官随时查看。在线链接平台很多也可以直接使用支持密码保护的相册或文档服务注意确认链接稳定、无登录门槛。更稳妥的方案是PDF 作为主投递材料在线链接作为补充。线上版本可以放完整项目过程PDF 版则更精简。无论哪种形式都需要定期检查链接是否失效尤其是投递高峰期避免因为链接打不开丢掉机会。6. 大厂UI/UX作品集自检清单排版全部完成后不要立刻投递。先拿这份自检清单逐项过一遍检查项通过标准定位清晰打开作品集 10 秒内能知道你的方向和目标岗位项目数量没有超过 5 个项目主次分明单项目结构完整每个项目都有背景、过程、方案、验证、反思叙述结论先行每个项目第一屏能看出角色、周期、问题、结果图片清晰关键界面清晰可读没有过度拉伸或模糊文字信息量没有大段空话决策点描述具体可查数据脱敏没有真实姓名、敏感业务数据、未授权界面文件体积PDF 大小适合发送在线链接可正常打开版式统一字体、间距、对齐方式一致反思提炼至少有一个项目包含具体反思而不是泛泛总结自检时的另一个技巧是找一位不了解项目的朋友或同行帮忙阅读。让对方说出每个页面的核心信息如果对方答不上来说明那一页的信息表达还有问题。很多人做完作品集会不舍得删页面最后导致每个项目都很长。可以这样想面试官的注意力是有限预算你要把预算花在最能证明能力的内容上。删掉没有新信息量的页面保留真正有价值的核心页作品集会更有力量。7. 大厂面试中的作品集演示准备作品集只是敲门砖面试时的表达同样重要。很多设计师在面试中失分不是因为作品集不好而是因为讲的时候没有节奏、缺少重点。7.1 提前准备项目讲解脚本为每个深度项目准备一份 3 分钟版本和一份 8 分钟版本讲解稿。前者用于自我介绍后的快速过场后者用于面试官深入追问时展开。讲解时的顺序可以遵循先讲业务背景和问题。再说个人职责和协作方式。接着讲核心设计决策。最后讲结果验证与反思。不要从头到尾念作品集里的每段文字最好是先围绕核心逻辑讲一遍把细节留给面试官提问。表达时尽量口语化不要使用设计黑话堆砌比如“赋能、抓手、闭环”这些词出现频率越低越好。7.2 面试官常见追问作品集演示之后面试官大概率会追问一些更深的问题追问方向应对思路为什么用这个方案而不是另一个结合约束条件、时间、成本、技术可行性回答你在项目中遇到的最大冲突是什么说明冲突类型以及你如何推动共识如果重新做一次会改哪里从过程缺陷或验证不足的角度回答项目中哪些数据是不可控的承认不可控因素并说明你如何降低风险如何评价项目是否成功从用户、业务、团队三个维度给出评价标准回答追问时有一个通用原则诚实、具体、不甩锅。即使某个环节是团队决策导致的问题你也可以说明自己在当时背景下提出的建议而不是把所有问题都推到需求方或者开发头上。7.3 讲作品集时最常见的表达问题声音平淡没有节奏变化。可以提前录制自己讲解时的录音回放检查。每个项目都从“最开始用户调研”讲起导致前两分钟没有进入重点。可以先说结论再补调研过程。被问到意料之外的问题时沉默太久。可以停顿两秒说“这个问题我需要想一下先从我的思路说起”给自己争取组织语言的时间。作品集演示不是背书而是面对面的项目复盘交流。越早模拟真实面试场景面试时的表现越自然。8. 常见问题与排查方法作品集制作过程中会出现各种问题整理成排查表方便对照使用。问题现象可能原因排查方式解决方案项目没有足够素材过程中没有保存草稿和探索稿检查原始文件和历史截图用最终稿反推过程重建关键决策说明作品集页面内容太多舍不得删细节给每页定义单一目标删掉重复页面合并同类信息字体显示不正常使用了未嵌入字体的特殊字体在导出的 PDF 中检查字体嵌入改用通用字体或勾选字体嵌入选项文件体积过大图片未压缩、页数过多查看大文件列表批量压缩图片、精简页面数量在线链接打不开平台限流或权限设置错误更换浏览器、匿名窗口测试更换平台或设置公开访问项目涉及保密内容没有进行脱敏处理逐页检查敏感信息替换数据、隐藏内部界面面试时讲不清楚项目叙事逻辑不顺畅找朋友试听 3 分钟版本重写讲解稿按“背景-过程-结果”重组页面间视觉风格不统一制作时间跨度大模板不一致连续翻页检查版式统一网格、字体、配色和页边距如果排到最后发现某个项目确实讲不清楚最直接的办法是把它降级为辅助项目只保留 2 到 4 页不再承担主要叙事任务。这样比硬撑一个讲不明白的深度项目更稳妥。另外投递前建议在多个设备上检查作品集的可读性。比如手机端阅读 PDF 时文字会不会过小图片会不会被压缩得看不清。不同设备上的阅读体验差异很大提前确认可以在投递后避免很多尴尬。9. 最佳实践与下一步作品集做完之后不要急着停在这里建议按下面的顺序继续打磨。第一给作品集设定一个版本号。比如“v1.0 初版投递”“v2.0 增加案例验证”“v3.0 优化视觉版式”。每次都记录修改时间方便你复盘自己迭代的轨迹。投递一段时间后根据面试反馈再做针对性优化不要频繁改完全稿。第二把作品集的核心论证提炼成一段可复用的自我介绍。比如“我是一名有 3 年经验的 UI/UX 设计师擅长 B 端中后台复杂流程设计去年主导了一个运营后台改版项目核心任务耗时缩短约 30%”。这段自我介绍可以直接用于面试开场也让作品集的主线更明确。第三为作品集建立配套材料库。包括简历 PDF、个人介绍链接、常用作品集导出版本、项目讲解稿。投递不同岗位时可以快速组合出最合适的版本。第四持续补充新项目素材。每完成一个项目就按项目归档结构维护一次素材。积累到一定程度后你不需要从零开始拼作品集只需要换主项目顺序和重点就能快速匹配不同岗位需求。最后想说大厂 UI/UX 作品集最值得投入的环节不是封面有多炫而是把每个项目讲成一个完整且可信的故事。故事里要有业务背景、设计决策、结果验证和个人反思。只要这四个部分齐全哪怕视觉表达相对朴素也能在大量作品中获得面试官认可。建议先做完素材归档和项目筛选再开始排版。用一周时间把项目叙事写好比在排版阶段反复调整三周更有效。作品集本质上是你的设计思维外化想清楚再动手输出自然会稳定。