9种醒目的UI图标,带来出色的用户体验

当前位置:首页>设计文章>UI>9种醒目的UI图标,带来出色的用户体验

温馨提示

公众号最近改成乱序推送,若大家希望及时收到推送,可以做好以下两点:

1、进入公众号将Clip设计夹设为“星标⭐️”

2、阅读文章后经常点击“在看❤️”

9种醒目的UI图标,带来出色的用户体验

(全文共计1234字,阅读约需要4分钟)‍

一般来说,图标服务于更实用的目的,适合描述非常具体的概念。而插图使用隐喻和叙述来描绘大的主题概念。
这里分享一些风格多样的图标,有的可以当作插图使用,一起来看看它们如何提升用户体验。

1、线性图标

通常,1-3px的深色描边或者单色的拼贴,可以让图标更醒目。
这类图标使网站看起来优雅,几乎适合任何样式。比如一些较大且内容详细的图标。
9种醒目的UI图标,带来出色的用户体验
或者一些小而美的图标。
9种醒目的UI图标,带来出色的用户体验
如果想让用户点击这类看似简单的图标,最好的方法就是让图标动起来,吸引用户的注意力。
9种醒目的UI图标,带来出色的用户体验
也可以添加一些有意思的交互动效,增加图标的趣味性。
9种醒目的UI图标,带来出色的用户体验
看看下面这组图标的问题,我们可以将它做得更好:
  • 使用相同的视角。不能有的图标使用单点透视,有的却使用两点透视,造成角度不统一。
  • 检查图标的完整度。不要造成一些图标很简单,有的却设计的很复杂。
  • 注意图标的大小排版。有些图标在视觉上可能需要占据更多的空间,控制好图标的比例。
9种醒目的UI图标,带来出色的用户体验

2、线面图标

统一的线条搭配明亮的颜色,让这类图标看起来像是一个个简洁友好的插图:
9种醒目的UI图标,带来出色的用户体验
添加明亮的颜色,可以为极简的图标增加丰富性,颜色的统一为图标带来标准性。
9种醒目的UI图标,带来出色的用户体验

3、等距图标

设计等距插图可能会花费很长时间,但结果却很值得,这种样式有很强的表现力。
无论是模仿现实的场景,还是创造一个虚拟的立体世界,都能用等距插图的形式表现。
9种醒目的UI图标,带来出色的用户体验
另外很多公司在遵循相同的样式创建等距插图,为用户带来整体统一的体验。
9种醒目的UI图标,带来出色的用户体验

4、抽象的简约图标

如果只有简单的直线和曲线,没有多余的文字,我们可能很难理解图标的含义。
同时,我们又很难忽视这类图标——它如此不规则,太过大胆而且引人注目。
9种醒目的UI图标,带来出色的用户体验

5、3D图标

3D图标作为一种非同寻常的样式来表达某种设计想法,在创建起来并不是很复杂。
3D图标搭配简单明亮的纯色,就能展示出令人惊叹的效果。
9种醒目的UI图标,带来出色的用户体验
3D图标丰富的细节能更好地体现一些设计想法和产品表现力。
9种醒目的UI图标,带来出色的用户体验
使用3D图标时,需要注意的是:
1、不要混合使用等距图标和3D图标。
9种醒目的UI图标,带来出色的用户体验
2、内容多的图标要足够大,以便于识别。
9种醒目的UI图标,带来出色的用户体验

6、极简插图

这种形式很容易创建,适用于任何网站或者产品。
9种醒目的UI图标,带来出色的用户体验
避免使用过于通用的图形模板,容易导致信息的关联性出现问题。
9种醒目的UI图标,带来出色的用户体验

7、面性图标

这可能是使用最广泛的样式。设计这类图标最大的挑战不仅是要支持想法,还要以令人愉快和独特的外观为产品增加价值。
9种醒目的UI图标,带来出色的用户体验
当然也可以利用动效,增加用户的点击率。
9种醒目的UI图标,带来出色的用户体验

8、补充内容的图标

如果大多数用户能将图标与描述很容易的联系起来,而且图标对他们来说有价值,说明设计就走上了正确的方向。
使图标变有趣或情感化能提高整体的体验。
9种醒目的UI图标,带来出色的用户体验
不要让别人去猜测你想用这个图标说明什么。图标应该是绝对清晰的,不存在双重理解的空间。

9、自定义图标

这类图标可能并不适合所有业务,但某些特定的品牌会认识到它们的作用。
绘制这样的图标需要一定的技能。可以尝试使用ps或ai插件将图片转换为草稿的方式来节省一些设计时间。
9种醒目的UI图标,带来出色的用户体验
下面的图标中,每个图标都展现出各自的特点和差异性,同时又保持统一的曲线风格。
9种醒目的UI图标,带来出色的用户体验

看了这么多的图标样式,你是否对图标设计有了更深一步的认识呢?图标不是体验中多余的部分,它本身就是一种独特的体验。


原文:uxplanet.org/9-catchy-icon-styles-to-kill-it-in-your-next-project
作者:Mary Borysova
译者:Clippp

注:文章翻译已获得作者的正式授权

9种醒目的UI图标,带来出色的用户体验

— TheEnd —

若大家希望及时看到更新,可以在阅读文章后点击“在看❤️”,或将Clip设计夹设为“星标⭐️”,来提高我们的相遇机率,感谢支持~

9种醒目的UI图标,带来出色的用户体验
9种醒目的UI图标,带来出色的用户体验
喜欢请分享,满意点个赞,最后点在看❤️
温馨提示:

文章标题:9种醒目的UI图标,带来出色的用户体验

文章链接:https://www.uied.cn/19624.html

更新时间:2023年05月27日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI产品

想要提升AR设计的使用体验,需要注意这7个方法

2023-5-25 16:42:43

UI

通知设计需要掌握哪些原则?来看这份全面指南

2023-5-25 16:43:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索