UI作品集怎么做？项目结构与设计过程表达

UI作品集先选能代表目标岗位的项目，再按“问题—方法—关键取舍—结果”组织案例，明确自己的角色和贡献。每张图都应回答一个设计问题，不要只排列最终界面。可以用Pixso设计与协作工具整理线框、方案对照和原型，把修改过程保留在同一项目中。

1. 用UI设计案例讲述设计过程

一个案例不必把完整产品生命周期逐项演一遍，应挑出与你真实参与有关的关键过程：怎样理解问题、比较过哪些方案、为什么做此取舍、结果能证明什么。未参与的研究和实现不要写成自己的工作；团队成果与个人贡献分开说明。

讲故事需要提供结构和背景。将你的案例研究分为四个阶段：问题、方法、过程和结果。这为你的故事提供了清晰的开头、中间和结尾。

1.1 问题

用项目名称、角色、范围和几句话交代挑战。下面沿用移动支付的案例写法：它用于展示怎样组织信息，不代表已经发生的客户项目或上线效果。套用时必须换成自己的真实经历与材料。

移动支付app

• 我的角色：用户体验设计

• 问题写法：现有App只有线下付款说明，用户不知道能否在线完成支付。此次设计范围是增加移动支付入口、确认信息和结果反馈；我负责界面与交互方案，支付接口由开发团队实现。若需求只是团队假设，也要写明它还没有经过用户验证。

1.2 方法

方法不是名词清单。解释为什么需要访谈、流程梳理或原型测试，它们分别帮助回答什么问题；未实际做过的方法不写进作品集。继续移动支付案例，可以先确认用户怎样完成当前付款流程，再决定要验证哪个新入口。

方法写法：先整理当面付款流程，找出金额确认、付款动作和凭证三个环节；再用原型观察用户能否理解新的移动支付路径。实际有访谈或测试时，说明参与者条件、任务、时间与记录方式，不补写不存在的研究规模。

在展示方法之后，紧接一条具体发现及其设计影响，例如“原入口只写‘下一步’，无法判断是否即将付款，因此改为明确的动作文案”。如果这只是设计假设，就把验证计划和已确认发现分开。

1.3 过程

这是你的技能真正脱颖而出的环节。讨论你是如何克服障碍以及学到了什么。例如，可以描述从可用性测试中收集到的见解，或者在项目时间线缩短时如何适应。毕竟，项目很少发生在完美的环境中。面试官需要知道你如何应对挑战。在我们的移动支付示例中，可以借助Pixso的线框图工具包完成设计：

• 绘制低保真原型：先画出移动支付的主要步骤，再比较不同付款流程的信息顺序，说明采用哪种入口和确认方式，以及选择的理由。

• 进行评估：启发式评估是评估者依据准则检查界面，不等于收集用户反馈。可用性测试则观察参与者完成具体任务，两者的记录与结论应分开。

• 创建线框：将草图细化为数字线框，再用Pixso连接原型。准备具体付款任务，邀请参与者尝试操作，记录停顿、误解和需要帮助的位置；完成测试后，把观察到的问题与修改方案对应展示。

• 绘制高保真原型：将线框细化为界面，沿用客户已有品牌规则，并补上处理中、成功与失败的反馈。说明哪次改动来自观察，哪次属于视觉统一，不把每个颜色调整都包装成重大创新。

1.4 结果

结果先写实际交付，再写有证据支持的变化。已上线的项目可以展示口径明确的数据；只有原型的项目，就展示测试发现、已修复问题和待实现范围。没有上线指标，不妨碍讲清设计价值。

结果写法：交付了支付入口、信息确认、处理中和结果页，以及相关状态说明。若测试发现用户误把“处理中”当作失败，可展示前后方案和观察记录；没有真实记录时，只列出下一步要验证的问题，不能写成转化率已提升。

黑色风格的移动支付app素材

1.5 选择互补的案例

案例数量由内容质量决定。优先选择能展示不同能力的项目，不必为了凑数重复三套相似App。先完成一个可深入讲解的主案例，再补能说明其他能力的短案例。

如果确实设计过手机、桌面、手表等不同设备，可展示同一任务如何适配；不必为了“覆盖全面”加入没有实际推敲过的设备样机。

跨设备案例要说明信息与操作的取舍：哪些保持一致、哪些因输入方式或场景而改变。作品集主页则提供项目摘要、你的角色和联系入口，让读者能迅速进入最相关的案例。

2. 了解UI面试官想要什么

确保UI作品集符合面试官在岗位需求中列出的优先事项和目标。

按岗位要求调整阅读顺序，而不是同一份作品集投所有方向。偏视觉的岗位先展示层级与细节；偏交互的岗位先讲任务和状态；应聘企业软件岗位时，可继续参考B端UI案例的业务流程与取舍表达，把角色权限、复杂数据和异常处理讲清楚。

你是UI设计师吗？还是交互设计师？UI面试官想了解你的硬技能和软技能以及如何解决问题。在面试作品集的案例研究中，应强调思维过程和设计方法，以展示你的工作能力。在面试期间，准备好详细说明面试作品集的各个方面，根据面试官的角色定制你的信息。

在任何网站或移动应用设计的过程中，线框图作为设计元素和功能的图示，它有助于帮助定义和更好地传达信息层次结构，让参与设计和开发的人员更好地理解设计师的思路和设计的功能点。Pixso资源社区提供优质的作品集线框图工具包，为设计师们省去不少上网查找的时间，加快了设计进度。

3. 保持UI作品集简洁和可读性

面试官应该能够通过查阅你的面试作品集来确定你是否是一个强有力的应聘者。冗杂的内容可能会分散注意力，因此请仅使用能够阐明技能并说明工作能力的内容，例如研究文档、构思草图和线框图。同样，粗体标题和简洁的项目描述使面试官能够立即识别已解决的设计问题类型。

值得一提的是，你不需要从头开始构建作品集。使用Pixso工具，你可以通过拖放图像和文本来自定义各种模板，还可以让你的面试作品集保持良好的信息架构。

Pixso资源社区中的组件和模板可以帮助组织素材，但不能替代项目证据。展示复用资源时说明来源、许可和自己的改动，避免把模板原稿当成个人设计成果。

4. 展示UI设计项目流程和结果

面试官喜欢能够产生想法并在内部倡导用户体验好处的应聘者。一个了解人类行为、像技术人员一样思考、知道如何平衡业务目标和用户目标的应聘者往往能够脱颖而出。

描述结果时，把“改善了体验”换成可追溯的事实：交付了哪些页面与状态、哪次测试发现什么问题、哪种修改已被实现。使用成本或转化数据时，写清时间范围、样本和统计来源；多人共同完成的结果，说明你的贡献边界。

公开前再检查客户名称、账号、业务数据和内部链接是否可展示。不能公开的部分先取得许可或做必要匿名处理，同时保留解释设计取舍所需的信息。

Grey hound流程图

最后按实际阅读顺序通读一次：不开口讲解，读者能否看懂项目问题、你的角色、关键决定和结果？看不懂的地方补上下文；与这些判断无关的装饰页面可以删减。作品集应让人更准确地认识你的能力，而不是依赖夸张承诺。