回到词典
CASE STUDY · UI PRODUCT DESIGN
用一个个人博客，走完一次产品设计
从用户角色和页面骨架开始，经过首页布局、登录模块、表单状态，最后收口到响应式、无障碍和性能。每一步都先调用判断框架，再选择具体工具。
01 / 宏观
先按角色拆页面，再选技术骨架
不要从“我要一个博客首页”开始。先问谁在看、谁要做什么，再决定页面之间如何连接。
访客首页 · 分类 · 文章详情 · 关于
作者登录 · 新建 · 编辑 · 发布管理
连接公开内容用独立 URL，管理后台单独承载操作
本案例的选择
公开内容用 MPA + 静态生成，每篇文章都有可分享 URL；登录后的管理后台只在局部使用客户端路由。
选择依据：博客的核心任务是阅读和分享，不是让用户长时间停留在一个应用壳里。静态页面先解决 SEO、首屏和分享，再为后台局部引入交互复杂度。
继续查：页面架构怎么选、面包屑 Breadcrumbs先用 URL 让人知道自己在哪，再用面包屑补充层级。
02 / 中层
把首页拆成任务，不要先堆组件
首页不是组件展览。每个区块都应该回答一个问题：回首页、找内容、判断是否值得读，还是继续翻页。
- Header回首页、搜索、登录入口。粘性只服务高频回路。
- Hero说清这是谁的博客和内容范围，不抢文章列表的任务。
- 分类导航分类少时用 Tabs，一眼看全；分类多时再换 Select。
- 文章列表用 Card 给标题、摘要、分类和日期留出稳定层级。
- 翻页内容站优先 Pagination，保留可定位、可分享的分页 URL。
结论
Header 保持精简，分类放在内容区，文章用卡片，列表用分页。用户先看内容，再决定是否深入。
相关词条：首屏大区 Hero Section、Sticky 还是 Fixed、卡片 Card、标签页 Tabs、列表加载怎么选
03 / 微观
04 / 交互
再给每个字段安排状态和反馈
登录表单的质量不在静态截图，而在用户输入错误、网络变慢、服务端拒绝时，界面是否仍然可理解。
邮箱
type="email"，让浏览器提供语义和移动端键盘。密码
type="password"，默认隐藏，提供显示/隐藏切换。记住我用 Checkbox 表达可选状态，和表单一起提交。
登录用 Primary Button，Loading 时禁用，避免重复提交。
忘记密码用 Link，因为它导航到另一页，不是在当前页触发动作。
LIVE DECISION可以直接操作，观察两种校验时机
试试看：
- 左边点进「昵称」敲 1 个字就点别处 → 立刻报错；右边同样操作 → 不吭声，点「注册」才集中报错并跳到第一个错误
- 两边都填对后提交：用
taken@example.com→ 客户端全过，服务器仍会打回（服务器端校验兜底，错误映射回邮箱字段）
05 / 收口
最后才检查响应式、无障碍和交付表达
设计完成不是“看起来像了”。把桌面、移动、键盘、错误和加载状态都走一遍，才能把决策交给 agent。
响应式桌面双栏，平板压缩，移动端单列；Tabs 超出时横向滚动。
可访问性label 关联 input，错误消息有 aria-describedby，所有交互有可见焦点。
反馈客户端验证就地说明，服务端失败用 Toast，登录成功由页面跳转表达。
动效只为层级和状态变化服务，转场短而可跳过，减弱动效时退化为静态。
交给 agent 的完整指令
你现在帮我设计一个个人技术博客的登录页面。
需求：
- 用户可以用邮箱和密码登录
- 支持记住我 30 天
- 移动端友好，输入框与按钮触达区至少 44px
- 邮箱格式和密码长度在离开字段时校验
- 服务端失败用 Toast 提示，不暴露具体是哪个凭据错误
- 登录成功后跳转到 /admin
设计约束：
- 参考 TellYourAgent 的纸上标本馆：纸张底色、朱砂强调、细边框、克制圆角
- body 使用系统黑体，术语和 prompt 使用等宽字体
- 图标使用内联 SVG，支持键盘导航和可见 focus ring
输出：
1. 语义化 HTML 结构，label 与 input 正确关联
2. Normal、Focus、Filled、Error、Loading、Disabled 状态
3. 客户端校验、服务器失败映射和 Toast 反馈
4. 桌面、平板、手机三种布局说明