按钮体验设计:最佳的感受,形式和状态

例子

Airbnb的网站有一个幽灵按钮"Become a Host"

5.FAB浮动按钮是谷歌设计的重要部分。它是一个圆形的材质按钮，点按之后按钮浮起并表现墨水晕开的效果。

使用

浮动按钮用于驱动动作时使用。

行为

悬浮按钮利用本身的圆形形状悬浮于界面之上与其他元素进行区分，加上运动动作，包括渐变，展开和转化为单一定点。

选择按钮样式

选择一个按钮样式其实是取决于按钮的权重，屏幕上的容器个数和视觉布局。

谷歌设计中的按钮类型的选择

Z-depth

功能：

这个按钮的重要程度和普遍程度到了要使用浮动按钮的地步了么？

维度

选择按钮样式取决于容器和多少个Z轴空间的布局。

布局：

每个容器使用一个最主要的按钮样式。除非你有很好的理由才可以混用，比如为了强调一个重要的功能。

按钮状态

这一点跟这个按钮给用户的第一印象是没有太大关系，但是跟犹豫是否去点击一个按钮和发现没有改变有关。用户会感到迷惑："这是不是一个按钮呢？现在我是不是得点它去验证一下它是不是一个按钮呢。额……"

按钮不是单一—状态目标。它是多状态的。并且可以为用户提供一个可视的反馈去表明当前的状态应该是优先级最高的任务。

正常状态

这一状态的主要规则就是—按钮应当在正常态时就能被识别出是一个按钮。Windows 8是一个很好的反例—用户很难看出上面的元素在设置菜单中是否是可点的。

Windows8中按钮的正常态

关注状态（高亮状态）

为用户营造一个具有很好的视觉反馈效果的按钮非常具有实践意义。用户能够立即明白按钮的含义从而接受并且视觉上的反馈也起到了相应的作用。

点击态

将不同的元素设计成有创意和有驱动性的动效能为用户带来兴奋和愉悦的体验。

不活跃状态

显示方式有两种可能—隐藏按钮或者不可用状态。

隐藏按钮的争议：

明确性。只需在旁边显示任务的需求。

• 保存草稿。允许用户改变设置，不同的命令使用同一个位置。这样很方便。Gmail就是是这样做的。

  Gmail隐藏了不可用的按钮

  只有在用户进行了启用操作时才会让它可见

  不可用状态的争议：

  表明动作的可执行性。虽然按钮不可用，用户有机会去得知动作是可以执行的。甚至要提供一个提示去解释按钮如何使用。

  控制面板的位置。用户能够学习到控制面板和按钮在界面上的具体位置。

  不可用按钮状态

  总结

  
  

  按钮意味着用户能够直接执行我们希望他们去执行的任务。一个平滑的转场能够保持会话流畅性，小差错比如找不到正确的按钮，最好的情况是是打断进程，最差是程序崩溃。

  按钮体验设计总是关乎于识别性和明确性。想想一个很忙碌的用户开启网页或者APP展开会话的情况。按钮起到相当重要的作用。

• FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/