模型中的按钮通常显示一种状态：默认状态。在实际产品中，相同的按钮会悬停、通过键盘聚焦、按下、在表单不完整时禁用，以及在发送请求时加载。其中每一个都是一种 UI 状态，并且每一个都需要一种设计。
它有助于区分两组。交互状态来自用户：悬停、聚焦、按下和禁用。数据状态来自系统：加载、空、部分数据、错误和成功。例如，列表屏幕需要针对何时加载、何时没有项目、何时有一项、何时有数百项以及请求失败时进行设计。
焦点状态值得特别关注。使用键盘或开关设备的人依靠可见的焦点指示器来知道他们所在的位置。删除浏览器焦点轮廓而不进行替换是最常见的辅助功能失败之一。
状态之间的变化也是设计的一部分。从默认到按下的短暂而清晰的过渡确认了点击。顺利转变为成功的加载状态告诉人们他们的行动有效。突然的跳跃或太慢的动画会让界面感觉不可靠。
避免丢失状态的一种实用方法是在设计之前列出每个组件的状态，或者将组件建模为状态机：一组状态以及在状态之间移动的事件。我们制作的ExodeUI就是这样工作的。您在一个文件中设计每个状态以及它们之间的转换，然后您的代码发送在实际应用程序中切换状态的事件。