UI设计师作品集列表页信息架构

作品集列表页如果只是把作品一张张平铺出来，当数量超过十几个以后，招聘方就会开始迷失。他们没法快速判断你擅长的是 UI、平面、三维还是前端，也没法在有限时间里找到最能代表你能力的项目。列表页真正的任务不是展示图片，而是帮对方在几十秒内完成筛选：看方向、看类型、看你在项目里的角色，然后决定要不要点进去看详情。

列表页要回答的三个问题

招聘方浏览作品集时，脑子里带着三个问题：这个人做什么方向、做得怎么样、在项目里承担了什么。列表页的信息架构要直接回应这三个问题，而不是让访客点开每一张图自己去猜。

封面图负责第一眼的视觉印象，但光有封面不够。标题旁边需要标注项目类别，比如 UI 设计、品牌视觉、交互动效，这样对方扫一眼就能按需过滤。角色信息同样关键——你是独立完成还是团队协作，你负责界面设计还是同时参与了交互定义，这直接关系到对方判断你的能力边界。

摘要文字容易被忽略，但它其实是列表页里性价比最高的信息。两三行话讲清楚项目背景、你解决的问题和最终结果，比一张精致的效果图更能说明你的设计判断。工具和完成时间放在次要位置，它们不是筛选的核心条件，但能补充你的工作背景。

封面、标签和文字的分工

列表页的每个信息元素都有自己的任务，混在一起就会互相干扰。封面统一比例是基础要求，横竖不一会让列表整体跳动，视觉上显得杂乱。但统一比例不等于所有封面都截成一样的构图，而是设定一个固定的宽高比，让每张封面在这个框架内做设计。

类别和角色标签要放在标题附近，不要沉到卡片底部。人的阅读路径是从上往下的，筛选信息放在标题旁边，对方不需要来回扫视就能完成初步判断。标签的写法要具体，不要用“设计”这种泛称，“移动端 UI”“数据可视化界面”这样的表述才有筛选价值。

摘要文字控制在两到三行，超出部分在列表页截断，完整内容放进详情页。列表页不是用来读完整个项目故事的，它只负责让对方决定是否值得点进去。文字写得太长，列表会变得臃肿，筛选效率反而下降。

状态和边界情况

作品集列表页不只是“有作品”和“没作品”两种状态。作品还在整理中、作品因保密协议不能公开细节、作品已经下架或失效，这些情况都需要在列表页有对应的处理方式。

私有作品只显示脱敏说明，不公开细节图，这是处理商业项目的基本做法。可以展示项目类型、你负责的模块和你解决的问题，但不能贴出客户的敏感界面或数据。这样做既保护了商业机密，也让招聘方看到你在真实项目中的参与深度。

空数据状态也值得提前设计。当访客按某个类别筛选后没有任何结果，页面不能是一片空白，要给出明确的提示和返回入口。窄屏下的表现同样要检查，卡片在手机上可能需要从横版变成竖版，标签可能要换行，这些变化要在设计阶段就考虑进去，而不是等开发完成后再补救。

容易出问题的地方

列表页最常见的毛病是把“好看”当成唯一目标。页面做得很有视觉冲击力，但按钮位置不稳定、标题层级混乱、正文阅读体验差，这些基础问题会直接拉低专业印象。招聘方看的是你的设计基本功，不是一张海报。

另一个常见问题是只放最终效果图，不写项目背景和你的思考过程。设计新人容易误以为图多就是实力，实际上招聘方更想看到你如何定义问题、如何做取舍、如何验证方案。每个项目都应该有背景、目标、过程和复盘，这些内容放在详情页，但列表页的摘要要能引导对方产生点击的欲望。

维护性也是容易忽略的点。作品集不是一次性的，你会持续更新和替换项目。如果文件结构混乱、图层命名随意、改动一处要牵连多处，每次更新都会很痛苦。在制作时就考虑好后续维护，给文件建立清晰的层级和命名规则，比事后整理要省力得多。

检查列表页是否合格

页面做完以后，换几个使用环境重新查看。电脑上检查大屏下的排版和间距，手机上检查卡片宽度和文字可读性。模拟招聘方的操作路径：先看整体印象，再按类别筛选，然后点进两三个项目看详情，最后回到列表页看返回逻辑是否顺畅。

检查时可以问自己几个具体问题：封面比例是否统一、类别和角色是否一眼可见、摘要文字是否说清了项目价值、私有作品是否处理妥当、筛选后空状态是否有引导、窄屏下是否还能正常浏览。这些问题都过关，列表页才算真正完成。

作品集列表页的本质是信息筛选工具，不是个人审美展示墙。把每个信息元素放在它该在的位置，让招聘方用最低的成本完成判断，你的作品才有机会被真正看到。