恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
9种醒目的UI图标,带来出色的用户体验
0.0°
2020-07-08 自译外文 经验/观点 原作者: Mary Borysova 举报 3186 18 10 0


一般来说,图标服务于更实用的目的,适合描述非常具体的概念。而插图使用隐喻和叙述来描绘大的主题概念。

这里分享一些细致的图标,风格多种多样,有的可以当作插画使用,一起来它们看看如何提升用户体验。


 1、线性图标 


通常,1-3px的深色描边或者单色的拼贴,可以让图标更醒目。这类图标使网站看起来优雅,几乎适合任何样式。比如一些较大且内容详细的图标。

或者一些小而美的图标。


如果想让用户点击这类看似简单的图标,最好的方法就是让图标动起来,吸引用户的注意力。

也可以添加一些有意思的交互动效,增加图标的趣味性。

看看下面这组图标的问题,我们可以将它做得更好:


  • 使用相同的视角。不能有的图标用单点透视,有的却是两点透视,造成角度不统一。
  • 检查图标的详细度。不要造成一些图标很简单,有的却设计的很复杂。
  • 注意图标的大小排版。有些图标视觉上可能需要占据更多的空间,控制好图标比例。


 2、线面图标 


统一的线条搭配明亮的颜色,让这类图标看起来像是一个个简洁友好的插图:

添加明亮的颜色,可以为极简的图标增加丰富性,颜色的统一为图标带来标准性。


 3、等距图标 


设计等距插图可能会花费很长时间,但结果往往是很值得的,这种样式有很强的表现力。无论是模仿现实的场景,还是创造一个虚拟的立体世界,都可以用等距插图的形式展示出来。

另外很多公司在遵循相同的样式创建等距插图,为用户带来整体统一的体验。

 4、抽象的简约图标 


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

 5、3D图标 


3D图标作为一种非同寻常的样式来表达某种设计想法,创建起来并不是很复杂。3D图标搭配明亮的纯色,就能展示出令人惊叹的效果。

3D图标丰富的细节能更好地体现一些设计想法和产品表现力。

使用3D图标时,需要注意的是:不要混合使用等距图标和3D图标。

内容丰富的图标应该足够大,以便于识别。


 6、极简插图 


这种形式很容易创建,适用于任何网站或者产品。

避免使用过于通用的图形模板,容易导致信息的关联性出现问题。

 7、面性图标 


这可能是使用最广泛的样式。设计这类图标最大的挑战不仅是要支持想法,还要以令人愉快和独特的外观为产品增加价值。

当然也可以利用动效,增加用户的点击率。


 8、补充内容的图标 


如果大多数用户发现将图标与描述连接起来很容易,而且图标对他们来说很有价值,说明设计就走上了正确的方向。使图标变得有趣或情感化将提高整体的体验。

不要让别人去猜测你想用这个图标说明什么。图标应该是绝对清晰的,不存在双重理解的空间。


 9、自定义图标 


这类图标可能并不适合所有业务,但某些特定的品牌会认识到它们的作用。


绘制这样的图标需要一定的技能。可以尝试使用Photoshop或Illustrator插件将图片转换为草稿的方式来节省一些设计时间。

例如下面的图标,每个图标都展现出各自的特点和差异性,同时又保持了统一的弯曲的样式。

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


— The End —


原文:uxplanet.org/9-catchy-icon-styles-to-kill-it-in-your-next-project-618f952cfc83

作者:Mary Borysova

译者:Clippp

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


Powered by Froala Editor

更新:2020-07-08

收藏

18人已收藏

Clippp

微信公众号:Clip设计夹

  • 37

    作品

  • 872

    粉丝

  • 29

    关注

  • 比Midjourney还实用!深度体验PS新出的AI绘画功能
  • 如何用Midjourney生成B端页面?收下这份AI关键词!
  • Midjourney直接生成UI界面!AI设计体验指南
  • 想让设计更吸引人?这7种调色板示例可以帮助你!
相关标签
iconui3D图标经验

    猜你喜欢

      2020-07-08 自译外文 经验/观点 原作者: Mary Borysova 举报 3186 18 10 0

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

      0.0°

      你确定要举报9种醒目的UI图标,带来出色的用户体验

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      18
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录