搜索

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

三分设

共 2638字，需浏览 6分钟

 ·

2022-07-01 00:22

点击 ▲ 三分设 关注，和 6 万设计师一起学习进步

译客 2019 · 第 13 篇



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


纯文本按钮更难点击

手指比鼠标光标大，将手指放在较小的目标上感觉很尴尬。用户的手指遮挡了按钮的内容，使得他们没有视觉上的提示来确认是否提交了该动作。如果纯文本按钮里的文本足够长，用户通过露出手指外的内容，会得到一个小的视觉反馈，这会好一点，但仍然不足以使他们确保已经击中了目标。
              
小尺寸的纯文本按钮强迫用户精确地移动手指以击中目标。但越精确越需要用户付出更多的努力。他们必须密切注意手指和目标，以确保他们点中了按钮所在区域。
缺少直边使得纯文本按钮边界难以区分，更难以瞄准。实心按钮不会出现这样的问题，因为它们具有更大的目标区域和笔直的边缘。

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

为了解决纯文本按钮的点击问题，一些设计师将它们的文本按钮全部大写。Google的Material Design系统推广了这种按钮风格，但也有其缺陷。
全部大写确实为纯文本按钮提供了更直的边缘和更大的目标区域。但这并没有好很多，因为目标区域只是略大，但是大写样式却降低了可读性。
       

所有大写的纯文本按钮都难以阅读，尤其是对于有阅读障碍的用户。用户依靠字母的形状来识别单词。大写字母外形上没有对比鲜明的上升和下降，这使单词更难以阅读。
       


纯文本按钮难以感知

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


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

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

轮廓按钮

一种方法是在文本周围设计轮廓以制作轮廓按钮。这使按钮的边缘可见，为用户提供更大，更清晰的目标。他们的手指可以落在轮廓上或轮廓内的任何地方，以提交操作。 
缺乏背景色可以防止它与按钮内部主要的号召性用语竞争。轻盈但可见的轮廓是理想的，因此它不会干扰按钮中的文本。
           

浅色阴影按钮

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

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

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



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

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

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

       

不要滥用纯文本按钮


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


原文标题：Why Text Buttons Hurt Mobile Usability
文章来源：uxmovement
原创作者：Anthony
原文链接：https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/
翻译作者：桃花果
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王翎旭
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设 


热门文章推荐

译客专栏 2022 · 第 10 篇


共创成长训练营

三分设·星火会员


我们一起聊设计

三分设·微信读者群/城市群

欢迎添加 ⭐️  星标，获取每日好文推荐，每天早上 8 点，准时充电。加入设计微信交流群 三分设读者 5 群，期待与更多优秀用户体验设计师一起成长， 添加 益达 微信号【 Lil_Bug 】or【 Red-boy2020】，备注【 三分设读者 】加入读者群！

分享设计心得，定期直播，零距离连麦，答疑解惑




↓↓↓点开『阅读原文』，欢迎你的加入星球

浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
AppAvailability移动应用可用性检测
AppAvailability 可以检测设备上其他应用的可用性。使用：var appavailabi
AppAvailability移动应用可用性检测
0
AppAvailability移动应用可用性检测
AppAvailability可以检测设备上其他应用的可用性。使用：var appavailability = require("nativescript-appavailability");代码示例
AppAvailability移动应用可用性检测
0
Countly开源的移动分析应用
Countly是一个实时的、开源的移动分析应用，通过收集来自手机的数据，并将这些数据通过可视化效果展示出来以分析移动应用的使用和最终用户的行为。一旦你打开该程序的面板，你会发现数据的监控是那么的简单。
Countly开源的移动分析应用
0
Tabris移动应用的开发平台
Tabris.js是RAPmobile的新名称，这是一个用于帮助开发者构建iOS、Android移动应用的开发平台。Tabris基于EclipseRAP（RichAjaxPlatform），并提供了用
Tabris移动应用的开发平台
0
Tabris移动应用的开发平台
Tabris.js 是RAP mobile的新名称，这是一个用于帮助开发者构建iOS、Android
Tabris移动应用的开发平台
0
移动应用安全：2021年的安全漏洞
中科天齐软件源代码安全检测中心
0
VSToolkit移动应用开发工具
ThistoolkitwascreatedtoeasilydevelopHybridApplicationsformobiledevices(ontopofPhoneGap)Themainfeatur
VSToolkit移动应用开发工具
0
AppCan移动应用引擎
AppCan一站式移动开发服务平台，自主研发国内首创混合开发跨平台适配，具有UI快速开发框架、本地功能调用API接口、应用打包系统、IDE集成开发环境和本地应用调试模拟器，预置数百套界面模板和数十种应
AppCan移动应用引擎
0
MobileCartly移动购物车应用
温馨提示：该项目为开源软件，已停止维护。
MobileCartly移动购物车应用
0
基于深度学习的文本分类应用！
Datawhale
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报