您使用的每个屏幕都是由某人设计的:银行应用程序的主屏幕、搜索框、设置页面。 UI 设计是一门决定这些屏幕如何排列、每个控件的外观以及触摸它时如何响应的学科。
UI 设计师使用一些构建块。布局和间距将相关的事物组合在一起。视觉层次结构使最重要的动作脱颖而出。版式和颜色承载着意义和品牌。按钮、输入、卡片和菜单等组件设计一次并重复使用,因此产品感觉一致。
每个组件也有状态。按钮有默认、悬停、按下、聚焦、禁用和加载状态,每种状态都需要设计。忽略状态是设计在模型中看起来完成但在实际产品中感觉破碎的最常见原因之一。
交互和动作也是 UI 的一部分。小反应(通常称为微交互)可确认点击是否有效、显示进度或解释某些内容的去向。它们应该快速且有目的,并尊重减少运动的系统设置。
如今大多数 UI 设计都发生在 Figma 中,其中 Penpot、Sketch 和 Lunacy 是常见的替代方案。对于需要对最终应用程序中的实际数据和输入做出反应的界面,设计人员还使用交互式工具。我们制作的 ExodeUI 就是其中之一:它将状态、弹簧物理和事件存储在一个打开的文件中,该文件在 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中运行。