UI设计的要点
UI设计的要点
#tech / dev / architecture
#type / concept
#status / growing
UI
UI，User Interface，就是用户接口，是用户于软件交互的方法。
良好的 UI 应当考虑用户，而用户关心哪些呢？
- 如何使用
- 观感
- 手感
观感是大头，有更多要考虑的东西
如何让 UI 观感好
颜色
适当的颜色能让界面更有活力，更有层次感
颜色结构
有多种说法，但是核心是避免大量颜色
- 主色（1-2 种）：用于品牌标识、核心按钮或标题，占比约 60%。
- 辅助色（2-3 种）：用于次级元素、图标或背景，占比约 30%。
- 强调色（1 种）：用于高亮关键信息（如 CTA 按钮、链接），占比约 10% 例如，Adobe Color 的互补色方案中，主色与互补色形成强烈对比，适合吸引注意力
主色、中性色、功能色、辅助色
注意
- 遵循 60-30-10 法则：主色覆盖大面积背景或导航栏，辅助色用于卡片、边框，强调色用于交互元素
- 善用灰色
- 避免高饱和度
- 注意对比度与可读性
字体
重要的是可读性
间距
最好使用 8 的倍数的大小
- 适用大多数设备
- 避免倍数图时出现奇数像素
层次感
- 能让页面更具体
- 引导用户注意
方法
利用颜色的色差：
- 深色主题中，往往颜色越浅，显得越高
- 浅色主题中，则是颜色越深，层次越高
利用阴影样式
动画
平滑的动画能够让 UI 更加自然、不突兀
方法
- 原生的 animation、transiton
- 使用 vue 中的 transition
eg：
在需要等待的时候使用加载动画
在 tab 切换间使用 transion
如何让 UI 手感好
添加交互反馈。比如，点赞后图标变色；登录后转圈。
参考
1 用户流程问题
2 过度使用特效
3 间距问题（两个工具：网格系统和自动布局）
4 组件不一致
5 图标问题
6 冗余元素
7 交互反馈不足