为何文本按钮会影响移动端的可用性

用户头像
上海/UI设计师/6年前/1788浏览
为何文本按钮会影响移动端的可用性

移动设备屏幕小且用手指操作,按钮必须易于点击,阅读和识别。大多数实心按钮符合可用性,纯文本按钮往往乃以满足。

移动端应用所使用的按钮可用性标准应该要比桌面应用要高。因为移动设备的屏幕是比较小的,同时用户通常是通过用手指来操作,按钮是必须易于点击、阅读和识别的。我们发现大多数实心按钮是符合这个标准的,然而纯文本按钮却很少符合。如果你在设计移动端应用程序的时候,需要使用纯文本按钮,在这之前,你需要先了解一下以下内容。


纯文本按钮更难点击


手指是比鼠标的光标要大的多的多的,我们把手指放在较小的目标上感觉是很尴尬的。我们的手指如果全部遮挡按钮的内容,没有视觉提示,我们是很难判断是否提交了该操作。如果纯文本按钮的文案足够长的话,我们可以通过露出手指外的内容会得到一个很小的视觉反馈,这样会好一点,但是我们任然很难保证按钮真的被点击了。



短小的纯文本按钮会强迫用户小心翼翼的移动用户的手指,确保我们可以精确地点击目标。就是因为需要越精确越就需要用户付出更多的努力。他们必须盯着他们的手指和目标,以确保他们对准了按钮所在区域。


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


大写格式的纯文本按钮难以阅读


根据人种学对应使用常用格式的文字,比如中国大陆常用简体中文,非古文/繁体字或者草书等


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


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



所有大写的纯文本按钮其实都难以阅读的(比如使用繁体中文,或者使用草书、行书等),尤其是对于有阅读障碍的用户而言。这些用户大多是依靠字母的形状来识别单词。大写字母外形上没有对比鲜明的上升和下降,这使单词变得更加难以阅读了。



纯文本按钮难以感知


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



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


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


轮廓按钮

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



透明背景色可以防止它与按钮内部主要的行动指引用语竞争。轻盈但有可见的轮廓是理想的,因此它不会干扰按钮中的文本。


浅色阴影按钮

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



更多的视觉重要

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



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

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



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



不要滥用纯文本按钮

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


翻译作者|桃花果

编辑审核|TCC翻译情报局

27
阅读原文
|
举报
|
33
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D渐变流体抽象矢量UI背景图
Security Camera UI kit
【新年UI图标】体育icon
手表表盘UI系列
UI通用设计素材1
户外旅行飞机情侣假日出行
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
盲盒APP UI设计
【新年UI图标】汽车icon
我的钱包-UI界面设计-app
钱包ui模板
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
高级表盘系列UI源文件
UI界面 组件
【新年UI图标】会员icon
UI 登录界面设计模板包
【新年UI图标】礼物/活动icon
高级感金属拟物 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
你可能喜欢
相关收藏夹
大家都在看
登录注册