一只捡星星的熊

一个登录页面的例子#

设计师要考虑：

• 页面是否有品牌识别
• 输入框是否清楚
• 登录按钮是否明显
• 错误提示如何展示
• 忘记密码入口放在哪里
• 手机端布局是否好点
• 加载状态怎么呈现

开发者要考虑：

• 输入框如何写 HTML
• 密码是否需要隐藏显示切换
• 表单如何校验
• 登录接口如何调用
• 登录失败如何处理
• Token 如何保存
• 页面如何适配移动端

设计和开发不是互相替代，而是协作关系。设计越清晰，开发越容易准确实现；开发反馈越及时，设计越容易落地。

用“外卖 App 下单”理解区别#

UX 关注：

• 用户从打开 App 到下单完成是否顺畅
• 地址、店铺、商品、优惠、支付流程是否合理
• 用户遇到问题时能不能解决

交互设计关注：

• 点击商品后如何加入购物车
• 规格弹窗如何出现
• 提交订单后如何显示加载
• 支付失败后如何返回

UI 设计关注：

• 商品卡片长什么样
• 按钮颜色和位置
• 价格、优惠、配送信息如何排版
• 底部购物车栏如何展示

视觉设计关注：

• 整体风格是否年轻、有食欲
• 图片比例是否统一
• 品牌颜色是否有识别度

信息是否清楚#

用户进入页面后，应该能快速知道：

• 这是什么页面
• 这里有什么内容
• 我能做什么
• 下一步该点哪里

层级是否明确#

页面中的信息有主次：

• 最重要的信息应该最明显
• 次要信息不能抢主信息
• 辅助说明不能干扰主要操作

常见层级手段：

• 字号大小
• 字重粗细
• 颜色深浅
• 间距大小
• 位置先后
• 背景对比

操作是否容易#

好的 UI 应该让用户容易点击、容易输入、容易判断。

例如：

• 按钮不能太小
• 输入框要有清楚标签
• 删除操作要有确认
• 表单错误要告诉用户怎么改

状态是否完整#

真实产品不会永远处于正常状态。设计时要考虑：

• 加载中
• 空数据
• 成功
• 失败
• 禁用
• 选中
• 悬停
• 聚焦
• 网络错误
• 权限不足

是否方便开发实现#

设计稿不能只在图片里好看，还要考虑实际开发：

• 文本变长会不会撑破
• 数据为空怎么办
• 小屏幕如何适配
• 组件能不能复用
• 样式有没有统一规则

6.1 用户中心设计 UCD#

UCD 是 User-Centered Design，中文叫“用户中心设计”。

核心理念：从用户需求出发，而不是从设计师个人喜好出发。

基本流程：

1. 调研用户
2. 定义问题
3. 梳理需求
4. 设计原型
5. 用户测试
6. 迭代优化

适用场景：

• 电商网站
• 社交产品
• 工具类产品
• 教育平台
• 几乎所有现代互联网产品

例子：

如果你设计一个课程学习网站，不能只问“页面怎么好看”，还要问：

• 用户是学生、上班族还是老师？
• 用户最常找课程、看进度，还是做题？
• 用户在手机上学还是电脑上学？
• 用户会不会中途退出？
• 用户如何知道自己学到了哪里？

6.2 响应式设计 Responsive Design#

响应式设计指同一个网站可以适配手机、平板、电脑等不同屏幕。

核心技术：

• 流式布局
• 弹性图片
• CSS 媒体查询
• 弹性网格
• 相对单位

设计重点：

• 桌面端多列布局，手机端可能变单列
• 导航在小屏幕上可能变成菜单按钮
• 图片需要按比例缩放
• 表格在手机端需要横向滚动或重组
• 字号和间距需要适配小屏幕

例子：

桌面端商品列表可以一行 4 个商品，平板一行 2 个，手机一行 1 个或 2 个。

6.3 移动优先设计 Mobile First#

移动优先指先设计手机端，再逐步扩展到平板和桌面。

为什么要移动优先：

• 手机屏幕最小，限制最多
• 手机上用户更容易分心
• 移动端流量通常很高
• 先做好小屏，扩展到大屏更容易

适用场景：

• 电商
• 外卖
• 社交
• 新闻资讯
• 内容平台
• 小程序

设计原则：

• 优先保留核心功能
• 减少输入
• 按钮点击区域足够大
• 重要操作靠近拇指容易触达区域
• 页面层级不要过深

6.4 极简主义设计 Minimalist Design#

极简主义不是“什么都没有”，而是去掉不必要的干扰，让核心内容更突出。

特征：

• 大量留白
• 有限配色
• 简洁字体
• 清楚层级
• 少量装饰
• 强调内容本身

适用场景：

• 品牌官网
• 作品集
• 文档站
• 高端产品展示
• 工具型产品

注意：

极简不等于信息不足。如果用户找不到功能，只是把页面做得很空，那不是极简，是缺少可用性。

6.5 Material Design#

Material Design 是 Google 推出的设计系统。

核心理念：模拟现实中的纸张、层级和运动，用视觉深度帮助用户理解界面关系。

常见特征：

• 卡片
• 阴影
• 浮动按钮
• 明确的颜色系统
• 统一的组件规范
• 有意义的动效

适用场景：

• Android 应用
• Google 风格产品
• 需要成熟组件规范的产品

学习价值：

Material Design 有完整的设计原则、组件规则和可访问性说明，非常适合新手理解“规范化 UI”。

6.6 Apple Human Interface Guidelines#

HIG 是 Apple 的人机界面指南。

核心理念：

• 清晰
• 遵从平台习惯
• 内容优先
• 直接操作
• 精致反馈

常见特征：

• 大标题
• 底部 Tab
• 边缘滑动返回
• 半透明和模糊效果
• 强调手势和自然交互

适用场景：

• iOS 应用
• macOS 应用
• 想学习 Apple 产品体验的人

6.7 原子设计 Atomic Design#

原子设计把界面拆成不同层级，就像化学里的原子组成分子，分子组成更大的结构。

适用场景：

• 大型网站
• 后台管理系统
• 组件库
• 多人协作项目

学习价值：

原子设计能帮助新手理解：页面不是一张图，而是由可复用组件组合出来的系统。

6.8 内容优先设计 Content-First#

内容优先设计指先确定内容，再设计页面，而不是先画一个漂亮框架再硬塞内容。

适用场景：

• 博客
• 新闻网站
• 文档站
• 在线课程
• 知识库
• 产品介绍页

设计步骤：

1. 明确页面要表达什么
2. 列出所有内容
3. 给内容排序
4. 确定信息层级
5. 再设计视觉布局

例子：

设计一篇博客文章页面时，先考虑标题、作者、日期、目录、正文、代码块、图片、上一篇下一篇，再考虑颜色、字体和背景。

6.9 无障碍设计 Accessibility / A11y#

A11y 是 Accessibility 的缩写。因为 Accessibility 中间有 11 个字母，所以写作 A11y。

核心理念：让更多人都能使用产品，包括视障、听障、行动障碍、老年用户、临时受伤用户等。

基础要求：

• 文本对比度足够
• 字体不能太小
• 点击区域不能太小
• 表单要有标签
• 图片要有替代文本
• 键盘可以操作
• 不只依赖颜色表达状态

例子：

错误输入框不能只变红，还要显示“手机号格式不正确”这样的文字。

7.1 多页应用 MPA#

MPA 是 Multi-Page Application，多页应用。

特点：

• 每个页面通常对应一个 HTML 页面
• 页面跳转时浏览器会重新加载
• 结构清楚
• SEO 友好

适用场景：

• 博客
• 企业官网
• 新闻站
• 文档站
• 传统网站

优点：

• 首屏容易优化
• 搜索引擎友好
• 页面之间相对独立

缺点：

• 页面切换可能有刷新感
• 复杂交互体验不如 SPA 流畅

7.2 单页应用 SPA#

SPA 是 Single Page Application，单页应用。

特点：

• 初次加载一个主页面
• 后续通过 JavaScript 局部更新内容
• 前端控制路由
• 体验接近桌面软件

代表技术：

• React
• Vue
• Angular
• Svelte

适用场景：

• 后台系统
• 在线工具
• 邮箱
• 音乐 Web App
• Figma 这类复杂 Web 应用

优点：

• 页面切换流畅
• 交互能力强
• 适合复杂应用

缺点：

• 首次加载可能较慢
• SEO 需要额外处理
• 前端复杂度更高

7.3 服务端渲染 SSR#

SSR 是 Server-Side Rendering，服务端渲染。

特点：

• 服务器先生成 HTML
• 浏览器拿到页面后再增强交互
• 兼顾 SEO 和动态能力

代表技术：

• Next.js
• Nuxt
• Remix

适用场景：

• 电商
• 内容平台
• 需要 SEO 的应用
• 登录前公开页面较多的网站

7.4 静态站点生成 SSG#

SSG 是 Static Site Generation，静态站点生成。

特点：

• 构建时生成静态 HTML
• 部署到 CDN
• 访问速度快
• 安全性较好

代表技术：

• Jekyll
• Hugo
• Hexo
• Astro
• Next.js 静态导出

适用场景：

• 博客
• 文档站
• 作品集
• 产品介绍页

你的这个博客项目就属于 Jekyll 这类静态站点方向。

7.5 渐进增强 Progressive Enhancement#

渐进增强的思路是：先保证最基础内容和功能可用，再给支持现代能力的浏览器添加更好的体验。

例子：

• HTML 内容先能正常阅读
• CSS 加载后页面更美观
• JavaScript 加载后增加交互

适用场景：

• 政府网站
• 公共服务
• 银行网站
• 对兼容性要求高的网站

7.6 优雅降级 Graceful Degradation#

优雅降级的思路是：先为现代浏览器做完整体验，再让旧浏览器获得简化体验。

和渐进增强的区别：

现在更推荐渐进增强，因为它更符合可访问性和稳定性原则。

7.7 微前端#

微前端是把一个大型前端应用拆成多个独立子应用，再组合成一个整体。

适用场景：

• 大型企业后台
• 多团队协作
• 不同模块使用不同技术栈

UI 设计师需要知道：

• 不同团队做的页面必须遵守统一设计系统
• 导航、组件、颜色、字体要统一
• 否则产品会像多个系统拼在一起

7.8 岛屿架构 Islands Architecture#

岛屿架构的思路是：页面大部分内容是静态 HTML，只有少量需要交互的区域加载 JavaScript。

适用场景：

• 内容型网站
• 博客
• 文档站
• 营销页

代表技术：

• Astro
• Qwik

设计影响：

• 页面主体内容要先清晰可读
• 交互组件只在必要位置出现
• 内容优先，性能友好

8.1 设计系统#

设计系统是一套统一的设计语言和组件规则。

它通常包含：

• 颜色规范
• 字体规范
• 间距规范
• 圆角规范
• 阴影规范
• 图标规范
• 组件规范
• 页面模板
• 交互规则
• 文案规范

常见设计系统：

• Material Design
• Apple Human Interface Guidelines
• Ant Design
• Arco Design
• Fluent Design
• Carbon Design System

设计系统的好处：

• 保证视觉统一
• 提高设计效率
• 提高开发复用
• 降低沟通成本
• 方便多人协作

8.2 组件库#

组件库是可复用 UI 组件的集合。

常见组件：

• Button
• Input
• Select
• Checkbox
• Radio
• Switch
• Modal
• Drawer
• Tabs
• Table
• Pagination
• Card
• Tooltip

设计师在 Figma 中做设计组件，开发者在代码中做开发组件。两边最好保持一致。

8.3 设计令牌 Design Tokens#

Design Tokens 是把设计变量转成可以被代码使用的数据。

常见令牌：

好处：

• 设计和代码使用同一套变量
• 修改主题更方便
• 深色模式更容易实现
• 多端一致性更好

8.4 设计稿交付#

设计稿交付不是简单把图片发给开发。

交付内容应该包括：

• 页面设计稿
• 页面状态
• 组件状态
• 间距和尺寸
• 字体和颜色
• 交互说明
• 跳转关系
• 异常情况
• 空状态
• 加载状态
• 响应式规则

常见工具：

• Figma Dev Mode
• Zeplin
• 蓝湖
• Pixso
• MasterGo

8.5 Storybook#

Storybook 是开发组件库常用工具，可以独立展示和测试组件。

它的作用：

• 展示组件所有状态
• 方便设计师和开发查看
• 便于测试
• 形成组件文档

例如一个按钮组件可以在 Storybook 中展示：

• 主按钮
• 次按钮
• 危险按钮
• 禁用状态
• 加载状态
• 大中小尺寸

8.6 A/B 测试#

A/B 测试是同时上线两个或多个版本，用数据判断哪个更好。

例子：

• A 版本按钮文案是“免费试用”
• B 版本按钮文案是“立即开始”
• 通过点击率和转化率判断哪个更有效

注意：

A/B 测试不是只看喜好，而是看数据。适合流量较大的产品。

9.1 字体选择#

中文 UI 常见字体：

• 系统默认字体
• 苹方
• 微软雅黑
• 思源黑体
• HarmonyOS Sans

英文 UI 常见字体：

• San Francisco
• Roboto
• Inter
• Arial
• Helvetica

新手建议先使用系统字体，不要频繁换字体。字体选择越复杂，越容易造成风格不统一。

9.2 字号层级#

常见字号：

一个普通页面不需要太多字号。新手可以先用：

• 24px 页面标题
• 18px 模块标题
• 16px 主要正文
• 14px 辅助正文
• 12px 弱提示

9.3 字重#

常见字重：

• Regular：普通正文
• Medium：强调文本
• Semibold：标题、重要按钮
• Bold：强标题

不要整页全是粗体。粗体用多了，页面反而没有重点。

9.4 行高#

行高影响阅读舒适度。

建议：

• 标题行高：字号的 1.2 到 1.4 倍
• 正文行高：字号的 1.4 到 1.7 倍
• 按钮单行文字：与按钮高度垂直居中

例子：

10.1 间距#

间距决定页面是否清楚、是否有秩序。

常见 8px 间距系统：

核心原则：

• 关系近的内容距离更近
• 关系远的内容距离更远
• 同类元素间距保持一致

10.2 对齐#

对齐让页面有秩序。

常见对齐：

• 左对齐：正文、表单、列表
• 居中对齐：空状态、结果页、少量标题
• 右对齐：金额、数字、表格操作
• 顶部对齐：卡片、列表项

新手常见错误：

• 大段文字居中
• 元素左右边缘不齐
• 图标和文字垂直不齐
• 卡片内部内容起点不一致

10.3 栅格#

栅格是页面的布局参考系统。

Web 常见 12 栏栅格：

• 适合响应式
• 方便控制宽度
• 方便多列布局
• 多页面统一

移动端常见：

• 左右边距 16px 或 20px
• 4 栏栅格
• 单列内容流

11.1 单列布局#

适合：

• 手机页面
• 文章页面
• 设置页
• 表单页

优点：

• 阅读路径清楚
• 适配简单
• 用户不容易迷路

11.2 双列布局#

适合：

• 后台系统
• 编辑器
• 列表 + 详情
• 左导航 + 右内容

例子：

• 左侧是文章目录，右侧是正文
• 左侧是消息列表，右侧是聊天内容
• 左侧是菜单，右侧是工作区

11.3 三列布局#

适合复杂工具：

• 左侧导航
• 中间内容
• 右侧属性面板

例子：

• Figma
• Notion 某些页面
• 后台配置工具
• 内容编辑器

11.4 卡片网格布局#

适合：

• 商品
• 课程
• 图片
• 模板
• 文章推荐

注意：

• 卡片尺寸尽量统一
• 图片比例保持一致
• 标题过长要处理
• 操作按钮位置一致

12.1 为什么需要组件#

组件的好处：

• 保持一致
• 提高设计效率
• 提高开发效率
• 降低维护成本
• 方便多人协作

12.2 常见组件#

12.3 组件状态#

设计组件不能只画默认状态。

常见状态：

• 默认
• 悬停
• 按下
• 聚焦
• 禁用
• 加载
• 成功
• 错误
• 选中
• 未选中

13.1 顶部导航#

适合：

• 官网
• 内容站
• SaaS 网站
• 一级栏目较少的产品

特点：

• 位置稳定
• 横向展示
• 适合品牌和主要入口

13.2 侧边导航#

适合：

• 后台系统
• 工具平台
• 功能多的 Web 应用

特点：

• 可容纳更多菜单
• 支持分组
• 当前选中状态要明显

13.3 底部标签栏#

适合：

• 移动 App
• 小程序

原则：

• 通常 3 到 5 个入口
• 放最高频一级功能
• 图标加文字更清楚
• 当前状态要明显

13.4 面包屑#

适合层级较深的 Web 页面。

例子：

1
首页 / 商品管理 / 商品详情

作用：

• 告诉用户当前位置
• 帮助用户返回上级
• 降低复杂系统中的迷路感

14.1 表单组成#

一个完整表单通常包含：

• 字段标签
• 输入框
• 占位提示
• 帮助说明
• 必填标记
• 错误提示
• 提交按钮

14.2 标签#

标签要清楚说明字段含义。

推荐：

• 手机号
• 邮箱
• 收货地址
• 项目名称

不推荐：

• 信息
• 内容
• 输入

14.3 占位符#

占位符适合给示例，不适合代替标签。

正确做法：

1
标签：手机号
2
占位符：请输入 11 位手机号

14.4 错误提示#

错误提示要具体。

不推荐：

1
输入错误

推荐：

1
手机号格式不正确，请输入 11 位手机号。

14.5 表单设计原则#

• 字段顺序符合用户理解
• 相关字段分组
• 必填项清楚
• 错误提示靠近对应字段
• 减少不必要输入
• 长表单可以分步骤
• 提交后有明确反馈

15.1 按钮层级#

一个页面不要有太多主按钮。主按钮越多，页面重点越弱。

15.2 按钮尺寸#

常见高度：

• 28px：小型按钮
• 32px：后台小按钮
• 36px：桌面常规按钮
• 40px：通用按钮
• 44px 以上：移动端按钮

移动端按钮实际点击区域应该足够大，即使图标只有 24px，点击区域也应该更大。

15.3 按钮文案#

按钮文案要表达动作。

推荐：

• 保存
• 发布
• 下载
• 创建项目
• 发送验证码

不推荐：

• 确定一下
• 点这里
• 好的

16.1 常见页面状态#

16.2 加载状态#

常见形式：

• Spinner
• 骨架屏
• 进度条
• 按钮 loading
• 占位块

使用建议：

• 短加载可以用 Spinner
• 内容列表可以用骨架屏
• 上传下载适合进度条
• 提交按钮要防止重复点击

16.3 空状态#

空状态要告诉用户下一步。

不推荐：

1
暂无数据

更好：

1
还没有项目，创建第一个项目开始管理任务。

并提供“创建项目”按钮。

16.4 错误状态#

错误提示要说明：

• 发生了什么
• 为什么发生
• 用户能怎么做

例子：

1
文件上传失败，单个文件不能超过 20MB。

比“上传失败”更有用。

17.1 常见断点#

断点是布局发生变化的屏幕宽度。

常见参考：

具体断点要根据产品内容和目标设备决定，不是固定死的。

17.2 响应式变化方式#

常见变化：

• 多列变单列
• 横向导航变菜单
• 卡片数量变化
• 图片比例调整
• 表格横向滚动
• 次要内容折叠
• 边距变小

17.3 响应式设计原则#

• 内容优先，不是简单缩放
• 保证主要操作可见
• 避免文字过小
• 避免按钮太小
• 避免横向溢出
• 图片保持比例

18.1 移动端特点#

• 屏幕空间有限
• 用户注意力更分散
• 输入成本更高
• 网络可能不稳定
• 手指点击不如鼠标精准
• 常常单手操作

18.2 移动端设计原则#

• 核心内容优先
• 减少输入
• 点击区域足够大
• 重要操作靠近底部
• 页面层级不要太深
• 反馈及时
• 加载和错误状态清楚

18.3 安全区#

现代手机有刘海、圆角、底部手势条，需要考虑安全区。

常见影响：

• 顶部内容不能被刘海遮挡
• 底部按钮不能贴住手势条
• 弹窗和底部操作栏需要留出安全距离

19.1 首页#

首页负责建立第一印象和主要入口。

常见内容：

• 品牌或产品名称
• 核心价值
• 主要行动按钮
• 功能入口
• 推荐内容
• 导航

19.2 列表页#

列表页用于展示一组同类内容。

常见内容：

• 搜索
• 筛选
• 排序
• 列表项
• 分页
• 批量操作

19.3 详情页#

详情页用于展示单个对象的完整信息。

例子：

• 商品详情
• 文章详情
• 订单详情
• 用户详情

设计重点：

• 关键信息靠前
• 操作按钮明显
• 内容分组清楚
• 次要信息不要干扰主任务

19.4 表单页#

用于创建或编辑信息。

设计重点：

• 字段清楚
• 顺序合理
• 错误提示明确
• 提交按钮明显
• 长表单分组或分步

19.5 仪表盘#

仪表盘用于展示关键数据。

常见内容：

• 核心指标卡
• 趋势图
• 排行榜
• 最近动态
• 快捷操作

设计重点：

• 数据层级清楚
• 不要过度装饰
• 图表要可读
• 单位和时间范围要明确

20.1 Figma#

Figma 是目前非常主流的 UI 设计工具。

需要学习：

• Frame
• Auto Layout
• Components
• Variants
• Styles
• Constraints
• Prototype
• Dev Mode

20.2 Sketch#

Mac 上传统 UI 设计工具，仍有团队使用。

20.3 Photoshop#

主要用于图片处理，不是现代 UI 设计的首选界面设计工具。

适合：

• 图片修图
• 合成图
• 运营视觉
• 位图处理

20.4 Illustrator#

适合矢量图形。

适合：

• 图标
• 插画
• Logo
• 矢量素材

20.5 国内协作工具#

常见：

• 即时设计
• MasterGo
• Pixso
• 蓝湖

这些工具适合中文团队协作和设计交付。