本篇介绍作为一名前端开发者需要了解的UI设计和交互规范。

UI设计

设计技巧

• 使用字体的颜色和粗细区分等级，而不是字体大小
• 不要在彩色背景上使用灰色字体
• 少用边框，用盒子阴影、两种不同的背景色替代，增加额外空间
• 设置阴影偏移时，只使用垂直方向上的偏移量
• 使用鲜明的边框为平淡的设计增添色彩
• 不要把小图标放大
• 一般行高比字号大8、9像素
• 不是所有按钮需要背景色

多维度考虑设计

• 考虑运维操作安全，当设计产品是中后台时
• 考虑元数据。从元数据角度，会发现系统实现的背后逻辑，设计会更理性和体系化。感性设计需和理性交织，让功能找到用户，用户体验更好

交互规范

• 提示：执行删除或提交操作时，要求弹出二次确认提示

• 图标：涉及点击操作，建议大小不小于32px * 32px

• 输入：防抖间隔1s-2s

• 点击

  明显的点击需要提供激活态

  关键或耗时的点击操作要做节流，间隔在300ms-500ms之间

  点击域范围要友好

• loading：页面加载、耗时操作需要提供loading