UI/UX Pro Skill 入门指南：从零到一的设计思维与实战技巧

共计 1471 个字符，预计需要花费 4 分钟才能阅读完成。

基础概念篇

1. UI/UX 的本质区别
2. UI（用户界面）关注视觉呈现：按钮、图标、色彩等 ” 看得见 ” 的要素
3. UX（用户体验）侧重使用流程：如注册步骤是否顺畅、功能是否易发现

4. 比喻：UI 是餐厅装修，UX 是用餐流程设计

   

5. 为什么需要专业设计

6. 数据证明：好的 UI 设计提升用户留存率 30% 以上（来源：Adobe 调研）
7. 商业价值：每投入 1 美元在 UX 上，平均回报 100 美元（Forrester 研究）
8. 技术趋势：Figma 等协作工具让设计成为开发者必备技能

新手避坑指南

1. 典型误区清单
2. 过度追求炫酷动效（导致加载缓慢）
3. 忽略空白区域价值（信息密度过高）
4. 违反费茨定律（关键操作目标太小）

5. 色彩滥用（对比度不足影响可读性）

6. 真实案例解析

7. 某购物 APP 因付款按钮隐蔽导致转化率下降
8. 医疗类应用使用红色按钮引发用户焦虑
9. 表单设计未考虑手机键盘弹出遮挡问题

实战方法论

1. 用户画像构建
2. 三步法：
   1. 收集数据（年龄 / 职业 / 使用场景）
   2. 提取 3 - 5 个核心特征
   3. 创建虚拟人物卡片（含照片、语录）

3. 工具推荐：XMind 整理用户旅程地图

4. 信息架构设计

5. 卡片分类练习：将功能点写在便利贴重组
6. 树状测试验证：UserZoom 等工具测试导航效率

7. 移动端黄金布局：

   /* 拇指热区规范 */
   .primary-action {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 56px;
     height: 56px; /* 符合最小点击区域标准 */
   }

8. Figma 原型技巧

9. 组件化设计：创建按钮 / 输入框 Master 组件
10. 自动布局：Flexbox 式排版设置（Shift+A）
11. 交互演示：
    1. 选择触发对象（如按钮）
    2. 设置 Prototype 连接线
    3. 定义 Smart Animate 过渡

设计系统构建

1. 原子化设计理论
2. 从原子（颜色 / 字体）→分子（输入框组合）→组织（完整表单）

3. 样式库管理：

   :root {
     --primary: #4285F4;
     --text-base: 16px;
     --spacing-unit: 8px; /* 所有间距为 8 的倍数 */
   }

4. 版本控制策略

5. 使用 Storybook 管理组件库
6. 语义化版本：1.0.0（主版本. 功能. 修复）

交互动效实现

1. CSS 微交互示例

   .btn {transition: all 0.3s ease-out;}
   .btn:hover {transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }

2. Lottie 动画接入

3. 从 LottieFiles 下载 JSON 动画
4. 通过 lottie-web 库加载：

   lottie.loadAnimation({container: document.getElementById('anim'),
     renderer: 'svg',
     loop: true,
     autoplay: true,
     path: 'loading.json'
   });

学习资源推荐

1. 入门必看
2. 书籍：《Don’t Make Me Think》（Steve Krug）

3. 视频：Adobe XD 官方教程（YouTube 免费系列）

4. 工具链

5. 设计：Figma（团队协作版）
6. 标注：Zeplin
7. 动效：Principle

实践任务

设计一个登录页面

评价标准：
1. 符合 WCAG 2.1 AA 无障碍标准（文字对比度≥4.5:1）
2. 包含合理的视觉焦点引导（通过色彩 / 大小对比）
3. 错误状态处理（如密码错误提示）
4. 移动端输入优化（正确键盘类型触发）

进阶挑战：
– 实现密码显示 / 隐藏切换动效
– 添加加载状态反馈

小技巧：先用纸笔画流程再上工具，能节省 50% 返工时间

通过这个系统化框架，即使是编程背景的开发者也能快速建立设计思维。记住：好设计是迭代出来的，建议每周收集 3 个优秀案例进行拆解学习。