塔斯娱乐资讯网

UI组件状态大全设计师别只画个默认态

很多新人交付设计稿只画了一个「默认状态」,开发一问就答不上来。
一个组件至少要考虑这些状态👇
🔹 默认态(Default) 组件的初始样子,用户还没有做任何操作。
🔹 悬停态(Hover) 鼠标移上去时的样子。通常加深颜色或出现底色。
🔹 按下态(Pressed / Active) 鼠标点击的瞬间。颜色通常比 Hover 更深。
🔹 聚焦态(Focus) 通过 Tab 键选中时的样子。通常加一圈蓝色外发光。这个对可访问性非常重要。
🔹 禁用态(Disabled) 组件不可操作,通常变灰色、降低透明度。
🔹 加载态(Loading) 操作正在处理中,显示 loading 动画,同时禁止重复点击。
🔹 错误态(Error) 输入内容不符合要求,边框变红并展示错误提示。
🔹 成功态(Success) 验证通过,边框变绿或出现对勾图标。
💡 建议:每个组件都整理一张状态表,交付给开发时他们会感谢你。

📚下面这份《UIUX 学习指南》,是我耗时一年沉淀整理,萃取苹果、谷歌等一线大厂设计逻辑,搭建而成的完整体系:
• 从视觉表现、交互逻辑到用户研究、产品思维,全覆盖 UI/UX 设计全链路
• 无论零基础入门、设计师进阶,还是冲刺资深岗位,都能精准匹配
• 每天只需片刻投入,就能系统搭建起专业、扎实的设计认知
爬出低谷,从来不需要惊天动地的顿悟。👇文末加入学习指南,持续学、持续拆、持续沉淀。
你会发现,焦虑与迷茫正被稳稳的确定性取代,你对设计的理解,也从此有了重量。