如何让移动网页按钮设计直观有效?

时间:20-02-12 02:50 责任编辑: admin 来源:电脑吧 点击:

  「是能点还是不能点呢?」这是用户在面对一些操作按钮时,大脑中会迟疑的问题。

  按钮越多,做决定的时间就越长。用户必须仔细看每个按钮,才能确定哪个是他们需要的。对于按钮的任何不确定性,都可能会导致他们不敢操作或误操作。

  设计师可以把按钮的优先级设计得更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时,就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧,通过简单的调整使得按钮变得更加直观有效。

  根据阅读习惯设计按钮

  在 App 中,一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面,期望用户能首先注意到它。但其实只要按钮足够突出,视觉分量够重,用户就会注意到它,而无视它的排列顺序。

  按钮顺序不是为了提供可视性,而是为了提高效率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断,看到按钮后还会继续阅读下面的文字,然后再回过头来找前面的按钮进行操作。

如何让移动网页按钮设计直观有效?

  不要让用户返回再次检查按钮,而是让他们以自然的阅读习惯看完所有的内容后,按视觉比重快速进行选择。

  通过将优先级高的按钮放在底部,让它处于视觉阻力最小的路径上,这使得这个按钮可以更有效率的被点击。此外,底部位置是手指最容易达到的区域,这进一步提高了效率。

  区分带形状按钮和纯文本按钮

  App 上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作,但是对于用户来说,这是一个糟糕的选择,因为纯文本没有一个按钮的外观,这可能导致用户会忽略了这些操作。

如何让移动网页按钮设计直观有效?

  纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆,这种不确定性可能会导致他们直接跳过这些按钮。

  纯文本按钮不仅让人感到疑惑,在操作上也不容易点击。将文本内容放在按钮框中,可以使得按钮更容易被点击和注意到。

  与纯文本相比,描边形式的按钮是降低优先级的好方法。它们使每个选项都易于识别,以便用户能选择他们所期望的目标。

  为主要按钮加上颜色

  高优先级的按钮应该是最容易被识别到的,它是直接指向用户最需要的目标操作。如果不确定优先级,请考虑哪些操作会使得用户朝着目标前进,哪些操作会使得用户回退。

如何让移动网页按钮设计直观有效?

  在这个例子中,「付款」具有更高的优先级,因为它顺应着用户的目标流程。但不大清楚「查看购物车」和「继续购买」哪个优先级更高。

  「查看购物车」操作让用户查看已经在购物车的商品,然后继续结账。「继续购物」操作将用户带回到远离结账的产品页面。

  通过思考这些操作,可以清楚地看到「查看购物车」具有中等优先级,而「继续购物」具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进,哪些操作使他们远离目标。

  前进的操作总是会比回退的操作优先级更高,因此,它们应该被设计得有更强的视觉重量和更高的颜色对比度。

如何让移动网页按钮设计直观有效?

  颜色是一种增加按钮权重的有效方法,因为它从文本颜色中脱颖而出,吸引了用户的注意力。当按钮的颜色与文本的颜色相同时,提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。

如何让移动网页按钮设计直观有效?

最新更新

视觉焦点

新闻排行

  1. 电脑蓝屏代码0x000007B如何解决?
  2. Win XP桌面快捷键变成.lnk文件如何解决?
  3. 怎么样删除IE工具栏上其他网站链接呢?
  4. Winxp系统netcfg.hlp文件丢失找不到如何解决?
  5. WinXP桌面图标存在着蓝色阴影如何修复?
  6. XP电脑文件名变成蓝色了怎么回事?
  7. winxp如何取消开机磁盘扫描?
  8. 解决activex部件不能创建对象的两个办法
  9. xp系统出现“无法识别的USB设备”如何解决?
  10. xp系统提示“没有找到comres.dll”如何解决呢?