恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动应用中,为什么纯文本型按钮会损害可用性
0.0°
2020-06-14 自译外文 经验/观点 原作者: Anthony 举报 678 4 2 0

移动应用按钮的可用性标准,应比桌面应用按钮的高。由于屏幕较小且用手指导航,移动应用上的按钮必须易于点击,阅读和识别。大多数实心按钮符合这一标准,但纯文本按钮很少符合。在您的应用程序上使用纯文本按钮之前,以下内容是你应该知道的。


纯文本按钮更难点击


手指比鼠标光标大,将手指放在较小的目标上感觉很尴尬。用户的手指遮挡了按钮的内容,使得他们没有视觉上的提示来确认是否提交了该动作。如果纯文本按钮里的文本足够长,用户通过露出手指外的内容,会得到一个小的视觉反馈,这会好一点,但仍然不足以使他们确保已经击中了目标。



小尺寸的纯文本按钮强迫用户精确地移动手指以击中目标。但越精确越需要用户付出更多的努力。他们必须密切注意手指和目标,以确保他们点中了按钮所在区域。


缺少直边使得纯文本按钮边界难以区分,更难以瞄准。实心按钮不会出现这样的问题,因为它们具有更大的目标区域和笔直的边缘。


所有大写的纯文本按钮都难以阅读


为了解决纯文本按钮的点击问题,一些设计师将它们的文本按钮全部大写。Google的Material Design系统推广了这种按钮风格,但也有其缺陷。


全部大写确实为纯文本按钮提供了更直的边缘和更大的目标区域。但这并没有好很多,因为目标区域只是略大,但是大写样式却降低了可读性。



纯文本按钮难以感知


纯文本按钮和文本之间唯一的区别是颜色。这种相似性使得纯文本按钮难以识别,尤其对于色盲用户而言。如果没有明显的外围形状,用户更有可能忽略纯文本按钮,并错过点击它。


用什么形式替代纯文本按钮


许多人在二级操作里使用纯文本按钮的形式,来表示此按钮优先级较低。但有更好的方法可以做到这一点,同时不会损害移动应用的可用性。


轮廓按钮

一种方法是在文本周围设计轮廓以制作轮廓按钮。这使按钮的边缘可见,为用户提供更大,更清晰的目标。他们的手指可以落在轮廓上或轮廓内的任何地方,以提交操作。 


缺乏背景色可以防止它与按钮内部主要的号召性用语竞争。轻盈但可见的轮廓是理想的,因此它不会干扰按钮中的文本。




浅色阴影按钮

纯文本按钮的另一种替代方法是将文本内容放在浅色阴影按钮上。浅色阴影按钮可区分按钮边框和背景,不会与主要号召性用语竞争。阴影应该几乎融入背景,但仍然保持足够的可视对比度。



哪种带来更好的视觉呈现

轮廓按钮和浅色阴影按钮都可以作为二级操作的样式。但是浅色阴影按钮的视觉重量略高,按压感觉更好。背景为手指提供了一个坚实的目标,而不是一个单薄的轮廓。



什么时候纯文字按钮起作用


以下这些案例展示了纯文字按钮的出现起了作用。不要将它们用于二级操作,而是将它们用于三级操作。三级操作不会得到那么多的点击,也不需要多么突出。一级和二级操作更重要,因此他们需要更多的视觉重量。


另一处纯文本按钮具有意义的地方,是在用户想采取行动需要帮助的情况下。当您需要向用户提供与上下文有关的信息以帮助他们选择最佳选项时,请使用纯文本按钮。纯文本按钮可防止用户将帮助视为号召性用语,因为纯文本的形式不会与其他按钮竞争。




不要滥用纯文本按钮


在界面上的放置纯文本按钮很容易,因为它们不需要花费太多精力去设计。但是,这样做的结果是让那些无法有效阅读、识别和选中按钮的用户感到受挫。不要放任懒惰,滥用纯文本按钮。您的CTA入口(按钮)可以包含文字,但它们应看起来始终像个按钮,而不是一段话。


编译作者:桃花果

编辑审核:TCC翻译情报局


Powered by Froala Editor

更新:2020-06-14

收藏

4人已收藏

TCC设计情报局

连接全球UX知识

  • 27

    作品

  • 26

    粉丝

  • 18

    关注

  • 你可以再说一次:关于语音交互的重复原则
  • 10个WEB数据可视化最佳实践案例
  • 成功的设计公司如何推销自己的
  • 如何设计防止导致数据丢失的用户破坏性操作

    猜你喜欢

      2020-06-14 自译外文 经验/观点 原作者: Anthony 举报 678 4 2 0

      移动应用中,为什么纯文本型按钮会损害可用性

      0.0°

      你确定要举报移动应用中,为什么纯文本型按钮会损害可用性

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录