求职型UI作品集的第一屏应该放什么

招聘方打开个人网站时，通常不会先慢慢研究全部栏目，而是先判断这个人是否符合岗位方向。第一屏如果只做大片氛围图，却没有明确姓名和能力入口，视觉再强也会浪费最宝贵的几秒。求职型作品集第一屏要先说清姓名、方向、核心能力和继续查看入口，视觉冲击必须服务判断效率。

这类问题不能只看最后的画面或功能是否完成，还要确认使用场景、操作过程和交付结果是否一致。UI 内容需要让人看到审美、信息组织、交互判断和落地意识，而不只是看到一张好看的效果图。先把问题范围说清楚，再决定工具和处理顺序，可以减少返工，也方便后来检查。

首屏的信息优先级

第一屏的阅读时间通常只有几秒，信息层级必须按判断顺序排列。招聘方最先想知道的是“这个人是谁、做什么方向”，其次才是“做得怎么样、怎么联系”。因此姓名和求职方向应当放在最显眼的位置，而不是藏在大标题或导航里。

核心能力不需要用长句罗列，三到五个关键词即可，例如“B端后台”“数据可视化”“设计系统”。这些词要对应作品集中的真实内容，不能为了凑数写自己没做过的方向。城市和联系方式属于辅助信息，放在姓名附近或页面底部都行，但必须保证一眼能找到。

入口按钮的数量控制在两到三个，分别对应简历、精选作品和联系。按钮多了反而让人犹豫，少了则可能漏掉关键动作。每个按钮的文案要直接，不要用“了解更多”“进入世界”这类模糊说法，直接写“查看简历”“浏览作品”“联系我”更有效。

视觉层次与可读性的平衡

背景图和动态效果可以强化记忆点，但不能遮挡正文和导航。检查的方法是缩小浏览器窗口到常见笔记本尺寸，看首屏内容是否仍然完整可读；再切换到手机宽度，确认文字没有溢出、按钮没有重叠。设计稿里看起来合适的间距，放到真实浏览器里可能因为字体渲染差异而变形，所以要养成在不同环境下复查的习惯。

按钮状态是容易出错的环节。悬停、按下、聚焦和禁用状态如果只做了默认样式，交互时就会显得生硬。至少要为悬停和按下状态定义颜色或阴影变化，让用户知道元素可以操作。按钮的点击区域也不宜过小，触屏设备上尤其要注意。

背景层次的处理原则是“信息在前，装饰在后”。可以用大色块、渐变或几何图形增加视觉记忆点，但背景与正文之间的对比度要足够。深色背景配浅色文字时，要注意正文字重和行距是否舒适；浅色背景上的装饰元素则不能抢过标题的视觉权重。

作品展示的深度要求

第一屏的精选作品入口只是起点，真正决定印象的是点进去之后看到的内容。只放最终效果图是最常见的失误，招聘方看不到设计背景、约束条件和你的判断过程，也就无法评估你的实际能力。

每个案例至少应该交代：原始问题是什么、你负责的范围、设计决策的依据、以及最终如何验收。例如一个后台表单页，要说明表格字段如何根据任务频率排序、空数据状态如何引导用户创建第一条记录、长文本在窄屏下如何截断或换行。这些细节比效果图更能体现交互判断。

过程描述不需要写成流水账，挑两到三个关键决策点展开即可。比如某个页面最初设计了五个入口，后来根据用户任务频率砍到两个，这个取舍过程比“精心打磨每个像素”更有说服力。如果项目是团队协作，要写清自己的具体贡献，不要用“我们”模糊个人职责。

容易忽略的检查项

首屏标题不写空泛口号，直接写姓名和求职方向。很多人会用“创意改变世界”之类的话开头，但招聘方更想看到“UI设计师，专注B端产品设计”这样明确的信息。

按钮数量控制在两到三个，分别对应简历、作品和联系。视觉背景要有层次，但不能遮挡正文和导航。检查时不只看是否能够运行或导出，也要换一个使用环境重新查看。例如页面要检查电脑和手机，设计稿要检查尺寸与可读性。

作品只放最终图、不写背景和复盘，会让能力展示停留在表面。那些在最终效果图里看不到的细节——文件能不能继续修改、页面能不能稳定使用、其他人能不能接手——往往决定了作品集的实际价值。

遇到异常时应先保留现场和记录，再逐项排除，不要在原因不明时连续修改多个地方。问题记录下来以后，下一次处理同类任务会更快。

维护与更新思路

作品集不是一次做完就结束的静态页面。随着新项目完成，第一屏的精选作品和案例详情需要同步更新。可以把第一屏入口和代表案例做联动，让访问路径更短，例如首屏的精选作品按钮直接跳到最近完成的一个完整案例，而不是笼统的列表页。

能公开的设置、过程和结果可以逐步补进对应页面，让作品集持续积累深度。每次更新后，重新检查一遍首屏在不同设备上的表现，确认新增内容没有破坏原有的信息层级。