提升UI细节和体验的10个常用方法

如果你觉得你的 UI 设计起来很无聊，想让它看起来更加有趣，其实是有很多相对通用的方法。这些方法大都不算复杂，稍加调整，总会有不俗的效果。如果你想试试，不妨试试本张导图所总结的这些赋予 UI 以个性的10个方式。

提升 UI 细节和体验 的 10 个常用方法

• 一、给文案注入生命
  • 幽默和个性化的元素引入到营销中
    • 
  • 注意：有的网站和 APP 本身应该严肃，就最好不要使用幽默的文案
  • 例如：
    • 「加载中……」VS「我们训练有素的猴子们正在努力……」 
• 二、加入图标和表情符
  • 功能作用
    • 让你的设计更加一目了然
    • 使用表情符让它更加富有吸引力，更加友好
    • 使UI 更加具有视觉吸引力，更加简单有效
  • 注意事项
    • 不要用得过多
    • 不要重新发明轮子或者「过于创新」地使用
  • 获取方式
    • Emojione
    • Icons8
    • BoxIcons
    • Feather
    • Material
• 三、通过插画让你的产品更加人性化
  • 
  • 功能作用
    • 通过插画轻松地传达复杂的的信息。
    • 能够平衡界面，吸引用户注意力
    • 让界面的功能和信息更容易被理解
    • 插画需要具有明确的目的性，是内容的补充，而不是替代
    • 插画应当能改进用户体验，不能干扰操作
    • 插画样式与界面应该保持一致
  • 获取方式推荐
    • Ouch
    • Freepik
    • Undraw
    • Humaans
• 四、深色模式
  • 让双眼更容易适应
  • 在色彩配置上需要根据规范细致调整
  • 建议让用户自行决定是要用深色模式还是浅色模式
• 五、高素质的图片
  • 能让 UI 和 体验非常的生动有趣，增强 UI 界面的总体效果
  • 素材网址推荐
    • Unsplash
    • Pexels
    • Freepik
    • Adobe Stock
    • Pixabay
• 十、用好阴影，增加层次纵深
  • 
  • 利用好视觉上的 Z 轴
  • 阴影可以让设计在视觉上更加立体
  • 设计决策的时候，要有目的性
  • 添加阴影时要记得筛选优先级，为最重要的部分添加阴影
• 九、加入图案和渐变
  • 
  • 让不那么吸引人的内容变得更加醒目美观的一种有效方法
  • 让平淡无奇的设计增加风味
  • 注意：不能喧宾夺主
    • 
• 八、通过微交互来帮用户关注细节
  • 感知到真实世界的体验
  • 感知微用户交互带来有效的即时反馈
  • 例如: Medium 当中的鼓掌（点赞）
    • 在 Medium 当中，鼓掌（点赞）这一微交互对于体验的增强是一个非常典型的案例，这和 Youtube 当中的点赞是截然不同的，Youtube 当中，点赞只有简单的颜色变化，从灰色变为蓝色，没有动画效果。这和两个平台本身的内容属性有直接的关联：文本内容需要微交互来强化感知，而在视频平台当中，这样的微交互会喧宾夺主，分散用户注意力，因此需要弱化。
• 七、加入动效
  • 设计过程中不可缺少的部分
  • 迎合了用户动效贴近现实实际体验的期望
  • 比如：缓动
    • 一个球，我们给它施加力量，踢它的时候它会先加速，再减速，这个过程是逼真的。这些物理规则是动效的基础，是真实的基础
  • 动画应该具有针对性，应体验优先，而不是分散用户注意力
  • 推荐工具
    • Airbnb 出品 的 Lottie
      • 可轻松地将任意 AE 转化为 对网页更加友好的 SVG 动画
    • Material Design
      • 制作系统化的动效
• 六、让出错状态不那么令人沮丧
  • 能够帮助用户解决问题的同时还可以通过个性和乐趣将其转变为积极的体验。
  • 例如：
    • Google Chrome 浏览器在「网络已断开」报错界面下的 设计，它几乎提供了所有的必要信息，包括引导你如何修复网络
      • 
    • Dribbble 的 404 页面的设计