什么是 UI 设计?
UI 是 user interface 的缩写,即用户界面:人们使用产品时看到和触碰到的一切。UI 设计师决定每个界面怎么排布、哪段文字最大、按钮长什么样,以及按下去时如何反馈。
好的 UI 大多是隐形的。人们不会注意到网格或字号层级。他们只会注意到自己找到了按钮、看清了价格,不假思索地完成了任务。
每个组件都有状态
新手只设计一次按钮。专业设计师会设计它可能出现的每一种状态。用户需要知道什么可以按、自己刚按了什么、什么暂时不可用。每一种状态,都是你对他们的一个承诺。
- 预订座位默认
- 预订座位悬停
- 预订座位按下
- 预订座位聚焦
- 预订座位禁用
- 预订座位加载中
UI 的基本构件
课程为其中每一项都安排了单独的单元,配有练习和一个要设计的真实界面。
- 字体排印:挑选和搭配字体,建立字号层级,设置易读的行长。
- 色彩:配色方案、色彩含义,以及能通过无障碍检查的对比度。
- 布局:从手机到桌面都适用的网格、间距系统和层级。
- 组件:按钮、输入框、卡片和菜单,以及它们的所有状态。
- 设计系统:用设计令牌和组件库,让整个团队的设计保持一致。
- 无障碍:让低视力、色盲或只用键盘的人也能顺利使用的设计。
向最好的作品学习
Apple 的 Human Interface Guidelines 和 Google 的 Material Design 都是免费的,内容详尽,出自为数十亿人做设计的团队之手。你会读其中的部分内容,然后用 Figma 的自动布局和组件,规范地搭建自己的界面。
如今 AI 工具几秒钟就能起草一个界面。这让 UI 手艺变得更有价值,而不是相反:你需要看出草稿哪里不对劲,并把它修好。层级清晰吗?文字对比度达标吗?圆角一致吗?这些就是你将学会提出的问题。
