深蓝白作品型网站设计 Skill

目标

创建具有高级编辑感的作品型网站。用深蓝和白建立高对比视觉，用作品索引建立信息秩序，用大图、编号、年份、类别和克制动效建立叙事节奏。

工作流程

1. 先识别网站类型：设计机构、个人作品集、品牌案例库、产品视觉档案或文化项目。
2. 提取核心内容：品牌名、代表作品、服务范围、案例分类、年份、联系入口。
3. 建立页面骨架：首屏、作品索引、精选案例、关于、联系。
4. 应用深蓝白设计系统：主背景、文字、分割线、强调色、反相区域。
5. 实现作品优先体验：让用户第一屏就看见项目、案例或明确的创作方向。
6. 加入克制动效：滚动揭示、悬停预览、文本淡入、图片轻微位移。
7. 检查响应式、可访问性和视觉完整性。

设计规则

• 使用 #061426 作为主背景，#F7FAFF 作为主文字。
• 使用 #1E5EFF 作为少量强调色，不要大面积铺满。
• 保持白色、深蓝、细线、真实图片之间的清晰对比。
• 优先使用列表、编号、网格、年份和类别建立秩序。
• 首屏不要做普通营销 hero，要直接进入作品或品牌表达。
• 不使用装饰性光球、单色渐变大背景、厚重卡片堆叠。
• 图片必须服务项目本身，避免抽象氛围图占据核心位置。

信息架构

推荐页面顺序：

1. Header：品牌名、导航、联系入口。
2. Hero：品牌/工作室名、核心定位、精选案例入口。
3. Work Index：项目编号、名称、类别、年份。
4. Featured Case：大图、短描述、查看入口。
5. Approach：概念、视觉系统、界面、发布。
6. Contact：邮箱、地区、社交链接。

文案规则

使用短句、名词化结构和明确判断。减少空泛承诺。

推荐：

• “为品牌与文化项目建立数字视觉系统。”
• “从概念到界面，形成可持续使用的表达语言。”
• “作品、叙事与系统共同决定体验。”

避免：

• “提供一站式解决方案。”
• “赋能企业数字化升级。”
• “打造极致用户体验。”

前端实现建议

• 使用 CSS 变量定义颜色、字体、间距和动效。
• 使用 CSS Grid 管理作品索引和案例布局。
• 为图片容器设置 aspect-ratio，防止加载跳动。
• 为悬停预览、菜单和项目行设置明确的键盘焦点状态。
• 使用 @media (prefers-reduced-motion: reduce) 关闭或降低动效。
• 移动端保持索引感，但让项目元信息自然换行。

验证清单

• 首屏是否明确呈现品牌或作品。
• 深蓝白配色是否占据主导。
• 是否保持高对比、强秩序和足够留白。
• 项目索引是否可扫读、可点击、可键盘访问。
• 图片是否清晰展示真实项目或对象。
• 移动端是否无重叠、无溢出、无误触。
• 动效是否帮助浏览节奏，而不是制造干扰。