面型图标vs线型图标,该如何正确使用?设计达人

今天一起来学习下,也欢迎大家把自己的想法在留言区一起探讨,说下自己的看法和使用习惯。

译文部分:

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

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

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

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

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

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

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

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

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

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

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

大多数图标是作为现实世界中对象的缩影,把图标用面型剪影的形式表现更符合人的一般认知,相对而言,线型图标并不能真实的反映大多数人的认知习惯。这就是为什么面型图标能更快识别的原因。

对于内部空间拥挤的图标,最好使用面型图标,剪影形式提供了一个信息量更小的形状,使图标更容易识别。

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

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

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

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

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

THE END
1.面条元素主题LOGO设计合集鉴赏!LOGO大师整理编辑(ID:logods)图片来源:网络今天收集了一组 面条元素主题 LOGO设计一起来欣赏! 下期想看什么主题的LOGOPS:留言评论点赞数最高的很有可能成为下期选题! 本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报。打开https://www.360doc.cn/article/21435004_889708921.html
2.面条元素主题LOGO设计合集鉴赏!面条元素主题LOGO设计合集鉴赏! LOGO大师整理编辑(ID:logods) 图片来源:网络 今天收集了一组面条元素主题LOGO设计 一起来欣赏!http://www.360doc.com/content/20/0204/20/21435004_889708921.shtml
3.面条图标素材面条图标png图片下载觅元素是设计素材的免费下载网站,提供面条图标素材,面条图标png图片等素材免费下载,下载面条图标素材就来觅元素。https://www.51yuansu.com/sopng/miantiaotubiao.html
4.手机通用icon图标面型彩色电脑图片潮国创意提供手机通用icon图标面型彩色电脑图片下载,图片格式Array,图片尺寸750*1083,手机通用icon图标面型彩色电脑图片素材可以用于商业用途,下载潮流创意图片就到潮国创意。https://chaopx.com/detail/T19068630.html
5.毛玻璃app主界面面型面型渐变金刚区图标ui界面设计素材千库网为设计者提供毛玻璃app主界面面型面型渐变金刚区图标UI设计下载,为您省却UI设计搜索时间,UI设计素材下载编号63131。https://588ku.com/uiweb/63131.html
6.清空图标图片免费下载清空图标素材清空图标海报新图网是专注免费商用设计素材下载的网站,提供清空图标,清空图标图片,清空图标素材, 清空图标图标,清空图标海报等免费下载服务!https://ixintu.com/all/qingkongtubiao.html
7.退出图标图片免费下载PNG素材编号vwxipop90图精灵为您提供退出图标免费下载,本设计作品为退出图标,格式为PNG,尺寸为256x256,下载后直接使用,下载退出图标图片素材就到图精灵。https://616pic.com/sucai/vwxipop90.html
8.[服装排版图标]图片免费下载服装排版图标素材千图网为您找到199288张服装排版图标相关素材,千图网还提供服装排版图标图片,服装排版图标素材, 服装排版图标模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://m.58pic.com/tupian/fuzhuangpaibantubiao.html
9.开源图标最新软件图标风格为中性风格,适用于各种用户群体的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24x24网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目 使用...https://www.oschina.net/project/rss?tag=223
10.一篇文章,带你看懂功能图标设计!相比于面性图标和扁平图标.线形图标的存在感要弱很多,所以一般线形图标也会出现在需要弱化视觉重心或次要功能的栏目上。面性图标刚好反之。 识别度的角度:面型图标一般来说会比线性图标更快被识别,但也有例外,一些图标在识别效率上没有明显差异,这与图标的特征线索有关。 https://www.niaogebiji.com/article-666120-1.html
11.视频播放图标素材视频播放图标图片熊猫办公为您找到100个视频播放图标素材图片,包括视频播放图标图片,视频播放图标素材,视频播放图标背景,视频播放图标模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等多种格式的素材,更多关于视频播放图标素材、图片、背景、矢量、UI、PS、免抠,艺术字、插画、配图https://www.tukuppt.com/speciall/shipinbftb.html
12.开源图标库RemixIcon–开源派Remix Icon是一套面向设计师和开发者的开源图标库。图标风格定义为中性风格,适用于各种用户群的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24×24网格为基准,分为“线性图标”和“面型图标”两种...http://osp.io/archives/5886
1.面型图标vs线型图标,哪一种的用户体验会更好?优设网什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己也曾经纠结过,但却没有深究,这篇文章给出了一些答案。挺意外的,国外设计师会针对线面图标做了深入研究,光 pdf 就有66页,这就是所谓的专业深度吧。 今天一起来学习下,也欢迎大家把自己的想法在留言区一起探讨,说说自己的看法和使...https://www.uisdc.com/solid-vs-outline-icons
2.面图标设计面图标素材面图标图片觅知网为您找到336个原创面图标设计图片,包括面图标图片,面图标素材,面图标海报,面图标背景,面图标模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于面图标素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、视频等设计https://www.51miz.com/so-sucai/3165663.html
3.十二星座免扣线性面型元素图标素材icon下载编号27461369十二星座免扣线性面型元素图标素材icon原创其他免抠素材是设计师M19265813127535上传到我图网,本作品为版权图片,图片编号27461369,上传时间为2020-02-15 18:14:50,图片大小为1.37MB,格式为,素材尺寸/像素为-高清品质,颜色模式为,本作品为独家原创素材,下载后在本地用 Illusthttps://weili.ooopic.com/weili_27461369.html
4.底部分页栏底部标签栏二、面型高亮 面型高亮,由于面和面或者线和面差异较大,相较于线性高亮来说识别度更高,表现力更强。用户在使用时更能够快速的清楚自己所在位置,其默认形式可以是线性图标也可以是面型图标。 同时其展示效果可以是纯色,也可以是渐变色等。下面分别来举例说明: ...https://blog.csdn.net/weixin_35824806/article/details/112661716
5.教你5招,轻松打造系统图标规范这里定义系统图标以1倍图为基准,大小24px,线粗细1px,采用1:1的网格来绘制图标(使用面型图标还是线形图标,前面可根据自己产品,品牌去定)。 03 美学统一 图标最关键的在于视觉符号一致性,线条粗细一致,内外倒角一致,图标倾斜角度方向遵循一定的设计规则,使用几何造型并贴紧网格设计,保证在最小尺寸都清晰可见。 https://www.weihaoyi.com/news-details-3179.html
6.设计师必备:图标设计的隐喻元素和绘制流程图标最底层逻辑:线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分,而当我们设计图标时候需要思考: 产品视觉风格定位(行业领域) 图标具体应用的界面 产品面相的用户人群是怎样的? 先看一组不用风格的图标,由上面不同APP图标可以看出不同行业、不同...https://www.hxsd.com/information/29919/
7.如何让图标更具创意?4种优化方法值得一试!这个页面中使用的图标风格不太统一,有些是面型图标,有些是线型图标。 咋处理呢?最好使用统一风格的图标样式,在这里,我们可以对其进行2.5D风处理: 另外,结合一些立方体形状,可以很好地承载图标元素: 以上呢,就是在PPT中,对图标进行创意处理的4种方法,希望对各位有所启发。 https://www.pptfans.cn/700308.html
8.RemixIcon:RemixIcon是一套面向设计师和开发者的开源图标库与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以 24x24 网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目,Enjoy it~...https://gitee.com/mirrors/RemixIcon
9.01课:线性图标与面性图标398次播放 课后作业 3 菜心设计铺 粉丝1829 关注 菜心ui课07期 共28课时 41:37 1. 00-课前动员 菜心设计铺 207次播放 2:05:10 2. 01课:线性图标与面性图标 菜心设计铺 398次播放 1:56:38 3. 02课:线性图标与面型图标点评课 菜心设计铺 https://www.cctalk.com/v/16883011082594
10.RemixIcon免费开源图标库文档介绍Remix Icon是一套面向设计师和开发者的开源图标库。质量很高,风格中性大气,因此适用于很多风格的项目,图标以24×24网格为基准,分为“线性图标”和“面型图标”两种风格。 Remix Icon官网网址:https://remixicon.com/ Remix Icon所有的图标均可免费用于个人项目和商业项目。Remix Icon 使用的是 Apache License Version...https://ipkd.cn/webs_12630.html
11.RemixIcon专为设计师和开发人员创作的开源图标Boss设计RemixIcon一套开源免费的系统符号图标,专为设计师和开发人员精心创作的,所有图标都是免费可商业用途。图标设计者初衷是为了各种行业用户群体都能使用,所以设计风格定义为中性风格,每一枚图标都是经过设计师统一绘制,风格简约大气,简洁易读。 图标以 24x24 网格为基准,分为“线性图标”和“面型图标”两种风格。目前图标...https://www.bossdesign.cn/remixicon/