共计 1184 个字符，预计需要花费 3 分钟才能阅读完成。
1. UI 设计的基本概念和核心原则
UI 设计（User Interface Design）是用户界面设计的简称，主要关注用户与产品之间的视觉和交互体验。对于新手来说，掌握以下四个核心原则至关重要：
- 对比 ：通过大小、颜色、形状等差异突出重要元素，如按钮与背景的明暗对比。
- 对齐 ：所有元素应按网格或参考线对齐，避免视觉混乱（如文本左对齐、图标居中对齐）。
- 重复 ：统一设计语言，比如所有标题使用相同的字体和颜色。
- 亲密性 ：相关内容应彼此靠近（如标签和输入框），无关内容保持距离。
2. 常见设计工具介绍与比较
- Figma：免费基础版 + 协作功能强大，适合团队实时编辑，支持网页端直接使用。
- Sketch：Mac 专属，插件生态丰富，但需付费且无网页版。
- Adobe XD：与 PS/AI 无缝衔接，适合 Adobe 全家桶用户，但协作功能较弱。
推荐新手从 Figma 开始，无需安装且资源教程丰富。
3. 色彩理论与排版技巧实战
色彩搭配
- 60-30-10 法则 ：主色占 60%（背景 / 大面积区域），辅助色 30%（按钮 / 图标），点缀色 10%（重要提示）。
- 在线工具推荐 ：Coolors.co 可快速生成配色方案，Adobe Color 可提取图片主题色。
排版技巧
- 字体不超过 3 种 ：一种无衬线字体（如 Roboto）用于正文，一种衬线字体（如 Playfair）用于标题。
- 行间距 =1.5 倍字号 ：例如 12pt 字号对应 18pt 行距，提升可读性。
4. 交互设计基础流程
- 用户调研 ：明确目标用户需求（如老年人需要更大点击区域）。
- 绘制线框图 ：用灰色方框规划布局，忽略细节（推荐工具：Balsamiq）。
- 设计动效原型 ：Figma 的 Smart Animate 可模拟页面跳转效果。
- 用户测试 ：邀请 5 -10 人试用原型并记录卡点（如找不到返回按钮）。
5. 完整案例：天气 App 设计
设计思路
- 核心需求 ：快速查看温度 + 降水概率。
- 关键元素 ：当前温度（超大字体）、逐小时预报（横向滚动）、降水图表（折线图）。
实现步骤
- 在 Figma 中创建 375x812px（iPhone 13）画板。
- 顶部放定位图标和城市名称（左对齐），右下角加刷新按钮。
- 中间区域用 100pt 字号显示温度，下方用 24pt 字显示天气描述。
- 底部横向滚动区域展示 24 小时温度曲线，用蓝色填充降水概率条。
6. 新手避坑指南
- 错误 1 ：颜色过多导致杂乱 → 解决方案：使用单色 + 黑白灰。
- 错误 2 ：按钮太小难以点击 → 解决方案：确保最小点击区域 44x44px（苹果规范）。
- 错误 3 ：忽略响应式设计 → 解决方案：提前设计手机 / 平板 / 桌面三种尺寸。
7. 动手实践：设计登录页
任务要求：
- 包含邮箱输入框、密码输入框、登录按钮。
- 添加“忘记密码”文字链接（字号比正文小 20%）。
- 使用对比色突出登录按钮（如蓝色按钮 + 白色文字）。
- 在 Figma 社区搜索“Login UI Kit”参考现成组件。
完成后可分享到 Dribbble 获取反馈，标签建议：#uidesign #beginner
正文完
