美文网首页101条UX原则 - 权威设计指南@产品
101条UX原则 - #32 始终为图标添加文本标签

101条UX原则 - #32 始终为图标添加文本标签

作者: Tomi_Wong | 来源:发表于2019-01-07 14:02 被阅读2次

现在,我不是指图标上的文字(参见#29)——我的意思是图标附近的文字标签,而不是按钮上的图标。试想有个小而不起眼的按钮,上面再有一个意义模糊的神秘图标,这个按钮就近乎于无用了,而且会在用户测试中表现得非常糟糕。除了一些经常使用的控件(如粗体,斜体,下划线等)例外,可以在没有文本标签的情况下被识别出来,大部分的主菜单或工具栏中的图标确实需要旁边的描述性文本。

让我们回到图标的最初目的:提供一个快速的视觉速记,用户可以通过它直接识别控件,并为用户提供点击或点按的目标。图标并不意味着在用户第一次看到它时就可以描述按钮的用途,用户依然需要一个文本标签。但是,如果图标足够清晰明了且可识别,则用户将能通过图标更快地找到控件并使用它。

你觉得哪个更容易理解?

图标被无情地使用至滥用于如此众多的产品中,你无法依赖任何一个图标来传达明确的意义。例如,如果提供“历史”功能,那么各种各样的象形时钟图,箭头图,带箭头的钟表图,沙漏图,羊皮纸卷轴图都可供选择。此时,用户需要一个文本标签来理解此时在你的产品中,这个图标在当前这个环境中的含义。

通常,设计师会决定牺牲移动响应视图上的图标标签。请不要这样做,移动端用户仍需要上下文标签。这样,图标和标签将协同工作,提供明确的上下文,并可以让用户回想起用途来,无论他们是第一次用新产品还是每天都使用它。

知识点:

·始终显示带有图标的文本标签。

· 请勿隐藏移动版本上的标签。

· 图标本身就是让用户感到沮丧的主要原因。

相关文章

  • 101条UX原则 - #32 始终为图标添加文本标签

    现在,我不是指图标上的文字(参见#29)——我的意思是图标附近的文字标签,而不是按钮上的图标。试想有个小而不起眼的...

  • matplotlib 数据可视化 - 图表属性

    为图表添加文本 title() 添加标题 xlabel() 为x轴添加标签 ylabel() 为y轴添加标签 修改...

  • label 文本中添加图标

    在Label 文本中添加图标 NSMutableAttributedString *textAttrStr = [...

  • 实现标注文本

    需求: 1、 鼠标选中文本后,为选中的文本添加背景色。并在选中的文本上增加标签。 2、 生成的文本标签有两种,不同...

  • 网页title前的小图标

    ico格式的图片(如:favicon.ico),一般为32*32的大小。在 标签中添加 。

  • HTML笔记02-标签

    基础标签## H标签:作用: 用于给文本添加标题语义格式: xxxxxx 注意点: H标签是用来给文本添加标题语义...

  • 02HTML基础-常用标签

    H系列标签 格式 xxxxx 作用 给文本添加标题语义 注意事项 H标签只给文本添加标题语义,不是用来修改文本样式...

  • 4.25-OmniGraffle (二)对象的控制

    文本标签: 选中线条并在线条上双击可以添加「中间点」,按住 Option 键双击则是添加文本标签。此文本可以顺着线...

  • 02-HTML基础标签

    H系列标签(Header 1~Header 6) 用于给文本添加标题语义 注意点:H标签是用来给文本添加标题语义的...

  • input标签中添加一个图标

    在input标签中添加一个icon图标基本可以分为两种1.将icon图标存储为本地图片,然后设置为input的背景...

网友评论

    本文标题:101条UX原则 - #32 始终为图标添加文本标签

    本文链接:https://www.haomeiwen.com/subject/xbrurqtx.html