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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
线性图标设计经验谈 ——分享设计线性图标的个人经验
0.0°
2015-01-29 自译外文 经验/观点 原作者: Matt Cooper 举报 13237 102 94 8

一位平面出身的设计师分享关于线性图标设计的心得体会,不失参考意义:)

这是篇经验之谈

一年半以前我开始了图标设计之路。不过这里我并不想讲那些无聊的条条框框,仅仅是萃取这条路上的个人所得以及沿途风景的点滴精华,以飨各位读者。:)

菜鸟时期

我刚开始接触线性图标设计的时候,为汲取灵感参考了这些大师的作品:JustasGalaburda, Matt Yow, Rocky Roark, Adam Whitcroft, Ryan Putnam,云云。他们的杰作予人以深刻启发。

那会儿我在一家燃气锅炉公司任平面设计师、插画师,同时承包一切需要高大上设计的活计。在设计面向潜在客户的宣传册时,我想到要用图标来标显重点。以下是EVLB图标集,是我在线性图标设计领域的初次正式亮相。

https://d262ilb51hltx0.cloudfront.net/max/800/1*cWpmNyhuZ9Ao-x0cKv4BYA.jpeg

 

领悟

同其他多数设计师一样,我逐渐开始认识到少即多的道理。我发现图标的细节虽然考究却有过剩之嫌,线条亦失之冗杂。这样的图标印刷效果可能很赞,但我认为它们还有待改进,视觉一致性和传播媒介的兼容性还可以提升。

“少即多”

我的第二个重要作品是在跳槽到Roy & Co(我的现任雇主)之后诞生的。那时候我接到了一项任务,要给一家坐落在南约克郡的新兴再抵押公司设计一套专属的粗线型图标。在构思的过程当中我回顾了之前思考的内容,不断提醒自己“少即多,简洁明快是真理。”以下是我的初稿:

https://d262ilb51hltx0.cloudfront.net/max/800/1*BTTHzFLuIJONfbKAhVvsAw.png

这些图标都是由一条连续的线构成的。线宽为6像素

 

https://d262ilb51hltx0.cloudfront.net/max/1040/1*jRSJMYCBTDUXVvXmHWo8sg.png

这里展示了线性图标在网页设计中的应用


综览这套线性图标的整体效果,既能让人赏心悦目,又给设计者带来创造和应用的乐趣。它们这种由单条线一气呵成的样式独树一帜,相信在过去都鲜有同例。我在日后的其他任务中也用到了它。

音乐图标集 

我曾经受到英国一家大型票务公司的委托,给预备翻新的网站设计不同栏目的图标。起初只有八个,但是后来,你猜怎么着?越做越多根本停不下来,最后交工时我居然弄出了完整的一套图标。

不过话说回来,这是个非常棘手的活,因为要确保图标无论是小尺寸还是大尺寸都能出效果。令它们在简洁明快、富有现代感的同时不会因缩小尺寸而打折扣。为此我自创了一个简单的小测试——30像素测试。

30像素测试

所谓30像素测试其实非常简单,就是检测这些图标在30×30像素的方框里效果如何。这是确保其缩小后还能保持效果的行之有效的办法。给网站各栏目(音乐节、票务、DJ)设计的图标统统轮廓化后置入30×30像素的方框里观察。这个方法帮了我大忙,有些图标经得起考验,有些就不行。这是许多设计师会学到或者已经明白的一点。

https://d262ilb51hltx0.cloudfront.net/max/800/1*TtWsTgeank1MXtiFmoDsOQ.png

30像素测试示例

 

https://d262ilb51hltx0.cloudfront.net/max/800/1*YllxX9e_oxzZV-7ZoEzWsw.png

我的音乐图标集

品牌图标的探索与设计

 所谓品牌图标,顾名思义,就是为某品牌而设计的主题性图标。我曾奉BOSS之命为Roy & Co设计四款品牌图标。它们将以中到大的尺寸形式出现在新网站上,同时用在宣传资料中。我得牢记这些要点。

我发挥学以致用的精神,意图将自己学到的新技能贯彻到这项任务中去。目前为止我的收获是:少即多,保持一致性,描边只用1或2像素,图标风格简洁明快富有现代感。这就是设计法则…或者说我认为如此。

打破自我成规,善莫大焉

 (通过检验)我发现目前的作品缺乏力度,它们需要更多细节,但同时要把握一个度,以免复杂到挑战忍耐极限的地步。得让它们在突显Roy & Co的品牌形象的同时不会太过突兀。思来想去我决定打破我的一个规则,多添点细节。历经反复斟酌修改的历程,完成稿终于出炉了:

https://d262ilb51hltx0.cloudfront.net/max/1067/1*eHe7LlwX_ofAeVLsUkYsuQ.png

为Roy & Co设计的全部图标

 

https://d262ilb51hltx0.cloudfront.net/max/800/1*u2G_7x05hTIGfchmIe8Ubg.png

Roy &Co品牌图标的细节与应用效果

谨记

PS文档里置入图标时栅格化是很不可取的做法。确保图标在Illustrator里存的是SVG格式,或至少保证它在PS里是矢量智能对象。这有助于保持图标质量,使它在网页上看起来美观而清爽。

我的近期成果

在过去的这18个月里我在图标设计领域收获良多。不仅学会在线性图标设计中贯彻简洁清爽的风格,避免过度设计,还学会了顺其自然,明白了天道酬勤的道理…

https://d262ilb51hltx0.cloudfront.net/max/800/1*Wx_pWcmdxnXvlsCb0qz-sA.png

 免费的线性图标合集。来源于DesignRazzi


其实设计并没有什么一定之规,你只需顺应心性,边走边学,最重要的是持之以恒地自我修炼,努力成为更好的平面设计师或插画师。

 

https://d262ilb51hltx0.cloudfront.net/max/800/1*pekyaBFNn2vZCJJf2Ts2OA.png

我的其他线性图标作品

 

感谢阅读本文,欢迎关注我的Twitter,或在Dribble上浏览我的作品。

更新:2015-01-29

收藏

102人已收藏

惊梦凉夙

兼听则明,将心比心

  • 10

    作品

  • 40

    粉丝

  • 2

    关注

  • 钛杯展会H5
  • 优匙企业官网设计
  • 原创图标系列
  • 智能手机美学评估在线系统设计

    猜你喜欢

      2015-01-29 自译外文 经验/观点 原作者: Matt Cooper 举报 13237 102 94 8

      线性图标设计经验谈 ——分享设计线性图标的个人经验

      0.0°

      你确定要举报线性图标设计经验谈 ——分享设计线性图标的个人经验

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年01月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      94
      102
      8

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

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

      登录

      手机号

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

      登录
      第三方账号登录