• <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 您的意见是我们 UI 中国进步的动力!
    点击立即反馈按钮,发表您的意见!
    立即反馈
    QQ群反馈
    您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
    群号:302892100
    备注:反馈问题后@管理员能让我们及时了解您的意见

    面型图标vs线型图标,该如何正确使用?

    自译外文 分类: 经验/观点 版权: 原作者: 未知
    17225 404 448 33
    2019-04-22
    133.9
    首页推荐

    你纠结过到底该用线型还是面型这种问题么?这篇文章给你答案。


    全文共2085词,阅读大约需要5分钟。


    什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?#35838;?#33258;己也曾经纠结过,但却没有深究,这篇文章给出了一些答案。挺意外的,国外设计师会针对线面图标做了深入研究,光 pdf 就有66页,这就是所谓的专业深度吧。


    今天一起来学习下,也?#38431;?#22823;家把自己的想法在留言区一起?#25945;鄭?#35828;说自己的看法和使用习惯。


    当我们准备做一个App设计时,常常会陷入到该用面型图标还是线型图标的纠结中,到底哪种对用户体验来说更合适呢?


    Image title


    ?#34892;?#20154;觉?#30431;?#20204;之间的区别只是在于个人喜好的问题,但有研究表明,更深一层的原因是:它们之间存在着不同的识别效率。


    对于设计师来说,应该要知道如何选择线型或面型图标,才能让用户更高效的浏览应用。如果设计?#24049;茫?#29992;户就能够更快的识别,并作出正确的选择。


    一项名为《面型图标vs线型图标,对于可用性方面的影响》(译者注:连接中是一份很长的研究报告,全英文Pdf,我估计没人会看)的调查研究发现,图标样式会影响识别效率。识别效率是通过识别和选择图标的速?#32676;?#20934;确性来衡量的。


    面型图标?#35805;?#26469;说会比线型图标更快被识别,但也有例外,一些图标在识别效率上没有明显差异,这与图标的特征线索有关。



    图标的特征线索

    特征线索是指用户如何辨认图标,如果没有明显的特征或很难被注意到,图标就没法准确识别。

    Image title


    例如,评论气泡图标的尾巴就是它的特征线索,没有它,就只是一个圆;锁图标上的钥匙孔是它的特征线索,没有它,就很容易被误认为是包;齿轮图标上的齿形是它独有的线索,没有它,看起来就像是一个甜甜圈。


    调查研究中发现,锁图标中没有画锁孔是被误会最多的图标,有超过四分之一的用户看错了。如果没有这个必要的特征线索,图标看起来可能会像是一个包,钱包甚至是一口锅。


    这些特征线索是用户识别图标的关键,使用图标时,请确保它包含了用户能识别的线索。如果图标看起来像是其他什么东西,请考虑为其增加额外的特征线索。



    什么情况下用线型图标更好?

    除了要包含特征线索外,线型和面型图标之间也有区别。有时候,某些图标上的特征线索在线型图标上比面型图标更为突出。

    Image title



    调查中发现,线型图标能够被更快识别的三个图标有:评论、垃圾桶、钥匙。这些图标的特征线索都出现在其外轮廓上,正因为如此,当图标为线型的时候,这些特征线索更容易被注意到。


    评论图标的尾巴在面型时容易被忽略掉,但是在线型时则更?#29992;?#26174;。垃圾?#26696;?#23376;在面型时也一样,线型时更容易看到。钥匙的齿形在线型时相较于面型时要更明显。

    Image title


    当图标的特征线索比较微妙?#39029;?#29616;在形状的边缘时,使用线型图标。这样能使得图标的线索更加突出,从而能够更快的被识别。


    选择图标时,最好能保持一致的风格,不要把面型和线型混搭。试着选择一组图标,它们具有明显的特征线索,角度干脆不模糊。

    Image title


    例如,如果将评论,垃圾桶和钥匙图标放在特征线索更明显的图标一起进行比较,就能看出区别。更明显的线索凸显出来后,更容易被注意到。



    什么情况下用面型图标更好?


    大多数图标是作为现实世界中对象的缩影,把图标用面型剪影的形式表现更符合人的?#35805;閎现?#30456;对而言,线型图标并不能真实的反映大多数人的?#29616;?#20064;惯。这就是为什么面型图标能更快识别的原因。


    Image title


    尽管如此,用户仍然能够识别线型图标,但如果图标的内部空间非常狭窄,那么就需要更长的时间才能识别。


    研究发现,点赞,剪刀,电话和工具图标在面型的时候更容易被识别。这是因为这些图标的轮廓样式在其中一些地方内部间距太小,从而产生了视觉噪音。


    Image title


    对于内部空间拥挤的图标,最好使用面型图标,剪影?#38382;教?#20379;了一个信息量更小的形状,使图标更容易识别。



    什么时候线面皆可?


    研究发现,两种风格的图标有时候的识别效率是一样的。例如,星星、?#20309;?#36710;?#25512;?#24092;图标?#21152;?#30456;似的识别时间。

    Image title


    这意味着此时的线型图标不会降低用户的识别效率。原因是它们内部的空间很宽,减少了视觉噪音。内部空间越窄,产生的噪音就越多,干扰识别。



    Tab栏活动态图标样式


    通常使用面型图标作为?#24049;?#26639;中的活动态,而其他按钮保持线型形式。但其实这种设计方法是落后的,应该反过来。


    Image title


    用户需要对他们尚未选择的图标有更快的识别速度,而不是针对他们已经选择的选项。已选择的不需要用面型的图标,对于没有选择的内容来说,面型图标更为?#34892;А?/p>


    使用线型图标能够突出显示选择态的图标(面型图标相对会弱一些),它提供了一种更清晰的风格和颜色的变化,能够强化所选的内容。


    (译者注:从公众号上的反馈来看,关于这一点有很多反对意见。我自己的看法是:如果按原文作者的研究和逻辑推理,问题不大,看问题的角度不同而?#36873;?#26368;大的反对可能来自于习惯,我们都习惯了现有的设计,设想当初最习惯的设计是反过来的,可能大家就觉得很自然了。如果是用户想看当前位置而查看tab图标的话,更多的是做选择而不是确认位置?关于这个点也期待和大家一起?#25945;幀#?/p>



    打破过时的图标风格规范


    如果使用效率对用户来说很重要,则必须考虑图标的识别率。如果想要更快的识别率,面型图标会更好。但上面提到的一些例外情况,也应该有所了解,以便于准确的做出选择,不再盲目纠结。

    总之,在使用图标样式时,应该要记住以下几点:

    1、图标是由能够识别的特征线索组成。

    2、面型图标识别速度更快,除非他们的特征线索?#36824;?#31361;出。

    3、线型图标的内部间距较宽时,更容易被识别。

    4、如果面型图标的特征线索在其边缘细微之处,则使用线型图标更好

    5、如果线型图标内部的间距较窄,则使用面型图标会更好。




    原文:https://medium.com/@uxmovement/solid-vs-outline-icons-which-are-faster-to-recognize-9bb0fc24821f

    作者:UX Movement

    译者:彩云Sky

    本文翻译已获得作者的正式授权



    译者:彩云sky ,腾讯视觉设计师。微信公众号:彩云译设计

    本文由 @彩云Sky 翻译整理发布。未经许可,禁止转载。

    微信公众号:彩云译设计

    彩云Sky

    腾讯ISUX视觉设计师

    6309粉丝/12关注

    首页霸主2016年度最佳作品集TOP50得主人气明星?#19979;?#35782;途助人为乐
    11
    绿皮车改动车

    一. 关于“Tab栏活动态图标样式”的话题,大神讲的我能接受,但可以用颜色的强弱来做更好的区分。如果?#19994;?#28966;点图标是面性浅色,尚未选择的图标是线性深色,?#24425;?#21487;以解决用户的选择意图。二. 如果在一个页面中选择运用面性图标,有时候是很难进?#22411;?#19968;的(我遇到的?#36947;?#25286;分线、转化?#19981; ?#24359;形?#25509;?#38145;定、删除、收藏放在一个命令菜单里),前半部分图标是要用线性才能表达出意思的。图标的使用有时不是从单个图标的意境来选择线面的,实际项目中很多时候都是要考虑整体搭配互利的。拙见。

    精彩!

    • 0
      Transo
      Transo

      如果世界上只有一种设计那就不精彩了

    • 0
      亚大甜
      亚大甜

      对于「Tab栏活动态图标样式」的观点表示不赞同 理由一?#20309;?#35770;是否"过时"或不正确,「实色为选中」已是主流样式,「相反的改变」必将带来用户的不适。例如「空o来风」本是「有?#29575;?#26681;据」的意思,但是一直被错误使用变为?#35813;?#26377;依据」,这个时候再拿出正确的用法只能使人更困惑。又例如PC用户第一次使用iMac (左右问题)。 理由二:用户在第一次接触App的时候都是有学习成本,但是经过一?#38382;?#38388;的使用,点击Tab栏已成为下意识,而这个时候需要的是使Tab栏图标的存在尽量弱化,使内容部分凸显。拿出「识别性」就显得理由略显苍?#20303;?/p>

    • 0
      李宏燕
      李宏燕

      关于tab栏的图标:作者举出的那个例子 其实可以看出标签栏都是“面线皆可”的图标,用户识别的时间是一样的,所以活状态用面型图标还是线型图标都是一样的。除非是这?#26234;?#20917;:标签栏的图标 内部空间非常拥挤,线型图标会使用户识别困难,这个时候用面型图标是更好的。(个人意见哈哈哈)

    • 0
      代果与慕斯
      代果与慕斯

      Tab栏活动态图标样式 应当反过来那,?#34892;?#19981;大明白,现在市面上还都是第一种做法吧。如果反过来,用户一定会有个识别误差。

    • 0
      风吹玉坠
      风吹玉坠

      非常优秀的人!

    • 0
      Vinci29
      Vinci29

      @Vgo: 有个疑惑,往小伙伴们解答一下, 文章说: 在Tab栏活动态图标样式选择中,用户需要对他们尚未选择的图标有更快的识别速度,而不是针对他们已经选择的选项。已选择的不需要用面型的图标,对于没有选择的内容来说,面型图标更为?#34892;А? 这句论述是不是相悖的,?#28909;?#38656;要对尚未选择的图标有更快的识别速度,那么明显线性图标更容易识别。那么按道理来说,选中的图标面形,未选?#22411;?#26631;为线型是合理的呀,请解释一下,这里不明白

      你说的“明显线性图标更容易识别”这个前提有误,文中所说的是:面型图标识别速度更快,除非他们的特征线索?#36824;?#31361;出。

    • 0
      张洪Hoo
      张洪Hoo

      学习了!

    • 0
      Vgo
      Vgo

      有个疑惑,往小伙伴们解答一下, 文章说: 在Tab栏活动态图标样式选择中,用户需要对他们尚未选择的图标有更快的识别速度,而不是针对他们已经选择的选项。已选择的不需要用面型的图标,对于没有选择的内容来说,面型图标更为?#34892;А? 这句论述是不是相悖的,?#28909;?#38656;要对尚未选择的图标有更快的识别速度,那么明显线性图标更容易识别。那么按道理来说,选中的图标面形,未选?#22411;?#26631;为线型是合理的呀,请解释一下,这里不明白

    • 0
      是鲸鱼
      是鲸鱼

      ?#34892;?#20998;享~已学习

    • 1
      绿皮车改动车
      绿皮车改动车

      一. 关于“Tab栏活动态图标样式”的话题,大神讲的我能接受,但可以用颜色的强弱来做更好的区分。如果?#19994;?#28966;点图标是面性浅色,尚未选择的图标是线性深色,?#24425;?#21487;以解决用户的选择意图。二. 如果在一个页面中选择运用面性图标,有时候是很难进?#22411;?#19968;的(我遇到的?#36947;?#25286;分线、转化?#19981; ?#24359;形?#25509;?#38145;定、删除、收藏放在一个命令菜单里),前半部分图标是要用线性才能表达出意思的。图标的使用有时不是从单个图标的意境来选择线面的,实际项目中很多时候都是要考虑整体搭配互利的。拙见。

    • 更多评论

    扫描二维码
    去?#21482;?#31471;查看海报

    彩云Sky

    TA已经获得14枚勋章啦

    • 成就勋章

      • 特别勋章

      • 身份勋章

    • 已拥有

    • 作品

      创造者才是真正的享受者。

    • 经验

      经验是一所好学校,可它的学生却经常旷课。

    • 活跃

      大神都是从围观群众开始的

    • 拓展

      作品、经验、活跃还不能满足你?

    京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

    北京快乐8奖金
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 网易彩票3d杀码 网球比分即时 篮彩让分胜负 2o选5走势图 辽宁11选5大小 万炮捕鱼大富翁刷金币 开个包子店开得我崩溃 31选7开奖彩空结果查询 天津快乐10分软件下载 qq五子棋时间 新疆喜乐彩大小分布 三人斗地主下载 平码公式规律2019 期香港六合彩内幕 彩票app大全