如何快速、高效地进行图标设计

最近做了一组图标练习,通过这次设计小练习,总结和分享下对现在比较流行的线性图标和插画风图标的一些思路和方法,源文件已经上传。

634883

我们在设计或者绘制图标之前,首先要搞清楚图标的定义,图标到底是什么,为什么要画图标等等。图标是具有指代意义或者象征某种特殊含义的图形,在不同场景下图标的表达含义也会有不同。

634884

一个好的图标,应至少具有三个特征:1⃣️指代性——就是象征具体某个事物或含义。2⃣️识别性——因为有了指代性,图标本身应具有一定的识别性和辨识度,避免误读、抽象主义等。3⃣️审美性——一个优秀的图标,在视觉上也应有良好的表现。

634885

现在的图标风格大致可分为拟物化和扁平化,两者都有自己的优势,很难说到底是拟物好,还是扁平好。但在这个信息技术和互联网快速发展的当今,扁平化快速,简单,直接的信息表达更能迎合这个时代。

634887

而现流行的扁平化风格主要有以下几种,设计风格因时代而变,以后甚至会出现更优秀的风格,让我们拭目以待。

634893

大多数初级的设计师在作一些图标设计和练习时常常会选用素材/临摹这种方式,而我认为用素材/临摹是相对低输入和低产出的方法,虽然我并不是很排斥这种学习方式,但是我们是否能找到一种高效高产出的学习方法呢?

634894

那么今天我就以线性图标和插画风格的图标做图标设计的思路和方法给大家。(以下图标来源于网络,作者名忘记了,不好意思,如有侵权,请与我取得联系)

634902

线性图标是一种简约,概括,可以说跟早期的印象主义有一些关系。细节想对比较少,我们这里称它为“减法图标”。细节比较丰富,有一些装饰元素、描边风格、色块填充,材质填充等一系列图标风格都可以说是插画图标,我们在这里称它为“加法图标”。

634904

我们先来看两张图,可以充分表达图标设计的核心:“形”,这是图标的核心思想。

634905

一个图标的形决定你表达的图标的含义,所以经常有一些小伙伴会遇到这样的问题,“这个图标不太像啊”“这个图标是什么啊”等

634909

那首先,我们在找一些元素或者素材本身的时候,需要确定元素本身的形,就是我们之前强调的图标本身的识别性。

634914

对应刚才的图标做了个小练习,分别是咖啡,狗,植物。在一定场景下,结合生活本身,图标也赋予了更多的含义。比如,咖啡可以代表休息。

634916

那接下去是我具体设计图标的一些方法。第一步:灵感、素材的收集。

634917

这次练习找的素材是苹果的五个产品,iphone\ipad\ipod\macbook\wacth,你可以百度,也可以去苹果的官网下载素材。

634919

第二步:思考。在设计任何一个图标作品时,我们应多思考,多理解。首先我们要去看图标素材的形体结构。

634920

思考,分解,概括。所有物体都离不开立体几何的拼接,比如下图macbook的外轮廓是由一个圆角矩形和长方形组合而成。通过这样的方法,不管什么物体,我们都可以对它的外形进行一次几何分解和组合。得到最终的图形。

634921

第三步:绘制。机械制图加减法,这是我自己取的名称。很多工业设计的同学应该都学过机械制图,有兴趣的同学也可以学习下。加减法,之前有提到,线性图标风格对应的是减法,插画风格图标对应的是加法。

634922

物体本身都可以通过机械制图的方法去绘制它的不同视角的视图,我们可以通过学习这种方法,仅仅只需要一个角度的物体用线稿的方式绘制出来,这是绘制图标的第一步,也是非常重要的一步:“形”的准确性。

634924

这次借助的设计工具时SKETCH(强烈推荐啊,好处我就不多说了。没有mac的小伙伴装个黑苹果吧,虽然我没有试过。。。)用到的工具主要为上面几个:形状,钢笔,裁剪。

634925

这是产品的立面图,通过刚才说的机械制图原理绘制的图标。

634927

减法图标——一些图标,尤其是移动端,图标的按钮大小决定了图标细节的取舍。线性图标是图形的提炼和概括。

634929

加法图标——细节丰富的插画图标。通过添加描边,填色,渐变,阴影、装饰等细节来丰富图标。

634931

634932

634933

634934

634935

同样,轻拟物也是一种加法的绘制方法,更多的还原物体本身的细节。

634936

634937

634938

634939

634940

第四步:视觉统一。任何一个图标,大多数情况下是以成组出现的,同一组图标应保证基本的大小视觉比重统一,风格统一等。

634942

634945

634946

图标不是画画,更多的需要直接表达信息和传递信息,图标设计的整个过程都需要设计师不断的思考,提炼,才能设计出好看以用的图标。

634947

634948

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15668/

(0)
交互精选交互精选
上一篇 2016-06-02 16:16
下一篇 2016-06-03

相关推荐

  • 微信网页设计样式库发布

    微信网页设计样式库发布 为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dial…

    2016-01-24
  • 2017年的Logo,这样设计才会火!

    设计是变换无穷的,而且不断地演变,与新的潮流和品味融合。此种特性不论是在时尚界、平面设计或是其他业界中都相当普遍可见。 Logaster特地做了2016年Logo总评比,预测有哪些热门趋势将主导2017年的Logo设计风格。…

    2017-03-03
  • 知乎今日最热:如何评价 Instagram 新的品牌形象和界面设计?

    原文链接:如何评价 Instagram 新的品牌形象和界面设计? 补充一个信息: 《 INSTAGRAM BRAND GUIDELINES V1.1》http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram%20G…

    2016-05-12
  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26
  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • 未来的汽车UI将惊艳世界

    今天多数汽车UI的设计,由于不直观、过时和缺乏美学表现力,一直饱受诟病。其他行业都将设计的品质奉为标准,汽车生产商在这方面则动作迟缓。所以,许多设计师抓住了这个机会,思考未来的汽车界面会如何改变我们的…

    2016-10-18
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11
  • 【UI技能】磨刀不误砍柴工!打开PS软件前应该执行的四个方面

    编者按:有经验的设计师在拿到需求后,往往不会急着开Photoshop,而会自问该做的事都做好了吗?要知道,如果能提前执行好这四个步骤,能大大减少改稿推翻重做以及和PM“吵架”的几率,没错,四个步骤说的就是今天这篇…

    2015-11-29
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08
  • 2016年天猫双11首波品牌海报出街,49张张张惊艳!

    日前,2016年天猫#双11狂欢夜#晚会将于11月10日晚上8点在深圳大运中心体育馆举办的消息已经宣布了,超级碗、奥斯卡、美国偶像的总导演David Hill将会担任此次晚会总导演,感觉会是一场掀起惊涛骇浪的视听盛宴。 狂…

    2016-10-18