刚学 UI 的宝子，是不是画组件只画一个默认样子？ 等做页面的时候疯狂复制改来改去，越改越乱！
✨ 先分清三个概念，大白话版 ▫️变体：同一个组件，外形款式不一样 比如按钮：主按钮、次要按钮、文字按钮，就是变体 用途一样，只是视觉风格区分场景
▫️状态：同一个组件，交互时的变化 按钮默认、悬浮、点击、禁用、加载中，都属于状态 是用户操作的时候看到的反馈
▫️属性：组件可以自由调整的配置 比如尺寸大小、圆角、图标有无、文字内容 相当于组件自带的可调参数
📌 简单搭配思路 先定基础组件 → 做不同变体 → 给每个变体配齐状态 → 加上可调属性 举个例子：基础按钮组件 变体：填充 / 描边 / 文字 状态：默认 /hover/ 点击 / 禁用 属性：大 / 中 / 小尺寸、是否带图标
一套做好，后面页面直接调用，不用重复画
❌ 新手常踩坑 不要把变体和状态混在一起画 禁用是状态，不是新变体 不要缺状态！很多人只画默认，hover、禁用全漏掉 开发对接的时候会疯狂返工 不要属性乱加，能统一的就不要单独开配置，越复杂越难维护
💡 小白练习建议 先从按钮、输入框这种高频组件练起 不要一上来就做复杂卡片 做完试着模拟用户操作，检查有没有漏掉反馈 组件做规范，后面做页面、改需求都会省力很多 组件库的核心，就是复用和统一。

📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
不用急着一步到位。👇文末加入「UIUX 学习指南」，从今天开始，每天 5～10 分钟，稳步提升。
当你脑子里装满世界级的设计智慧，你就知道自己是谁，要去哪儿。
#ui设计 #ux设计 #交互设计 #设计教程 #设计文档 #界面设计 #apple #ui教程 #UX教程