传承设计经验!图标设计初阶的3大关键入门知识点!

UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段:初阶与高阶,这样分是为了有步骤性的学习和进阶的加强,当然,能人的话一步到位,对于新人来讲会较难,需要实际工作中辅导与自己经验总结。我不会华丽高大上的语言,但是我可以分享一些实实在在的基础方法,也是这几年会给带的学生反复必讲的入门辅导,有自己成熟方法表达的设计师可忽略这里,这里先说初阶的设计关键要点。

目录:

概念类别设计技法要点系列成型图标

一、概念类别

扁平化图标大部分无非就是剪影表现,而这里为什么重点是讲图标的形状设计,而非色彩,因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力,好比建筑造型与装修的关系,而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种:面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型,线与面之间的独立与结合的变化。

简化的微写实图标

这类通常是彩色一体表现,造型和组合上较写实,不是纯剪影,是写实过渡来的简化,又接近剪影,扁平简化设计,这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析),大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多,也更加容易塑造风格,更多是在色彩上有得发挥和考究,用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达,叫所谓的“低面建模“,感兴趣的去搜一下。

上面提到的元素组合,比如下图这个图标目前是2个元素–信封加信纸,如果还要再加什么功能状态示意,最多在右上角加个很小的消息提醒。因为元素越多越复杂,所表达的含义也就越多,同时也会影响造型的调动。不管多少个元素总有一个最重要的对象,其他为辅助图形,在塑形大小复杂度上有区别。


剪影的正负形图标

这类通常是单色表现,当然也有综合彩色的。其更加简洁抽象, 言简意赅,高度提炼精华,讲究表象意境,具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表,注意,没把握好就会变得很“空虚”,把握好了就是时尚的feel啦~

负形图标


是以线绘制的图形,高度的轮廓概括,就跟画骨骼一样的要求精准到位,也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格,如果画不好就很容易俗气和简陋。

正形图标


是以面绘制的图形,也有和线综合表现情况,自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换,手机tab上最常见,如ios7。

优点:简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达,这里指的范围是互联网上的全新应用);具有设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。

图标为上传到云端的之意,这里的主对象是云,所以箭头和云的比例是不同的,上传箭头是辅助图形。了解界定多元素之间的主次关系,就能够把握一个整体的造型走向。典型的基础表现就是上面两种,然后在实际绘制中根据自己的喜好和设计来进行融合,可以得出更加丰富的表现。

二、设计技法要点

1,关键节点绘制法

拟物化设计就是尽可能的绘制繁琐细节,追求丰富和相似度。而剪影图标则是相反,以简练为绘制手段。但是细节就没有吗,不是的,而是更加谨慎认真的注重每一笔,且越来越优雅。这里举例剪影图标绘制方法技巧,3步骤可以搞定,看似又简单又难,简单的是只是绘制参照物轮廓,保留基础识别性,步骤很少;难的是这调整的过程与产品环境的融合性,易用性,还有你自己的创意想法。

说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点,雏形出来后再根据想法调整。

提炼精华勾勒轮廓

通常在绘制已有参照物的基础上去设计一个图标,可以根据你喜欢的造型参照物去进行分析,先抓取到参照物的关键节点,几何绘制出来一个相似的基本图形。

提炼的艺术,在这个教程里可以学习一下:《AI教程!教你创建超酷的权利的游戏家族线条抽象徽章》

调整线锋优雅得体

基础雏形出来后就开始加入自己的想法调整线锋,线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了,不断调整对比,挑选出一个最优再进行下一步。

增特有细节出风格

最后一步的塑形,就是画龙点睛!造型的特点就在这一步去完成。


对于新老设计师来说,这样的方法都是比较可取好用的,交互设计师也可以这样快速入门哦亲!尤其是第一步骤,能否非常快速的出雏形。下面是其他案例的设计方法欣赏,跟我上面总结的一样道理。


2,精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事,但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的,尽可能的往精美优雅的方向努力吧骚年~

犀利清晰

需要锻炼厉害的眼睛,使出你的火眼金星捕捉每个像素之差,像素满格才能清晰的呈现,细分出来通常会遇到以下3种情况,这也是最影响图标基本质量的问题点。

1) 轮廓发虚

图标一定要用矢量绘制,但是新手很容易犯的第一个错误就是图标模糊的问题,也不清楚为何会这样。其实就是矢量边缘模糊产生的问题,也是个人绘制的不良习惯造成。避免这个问题,必须在100%画布上绘制图形,而且不能直接推动图标放大缩小,即使这样改变大小了也要放大画布调整路径的锚点,反复查看及校正是否对齐1px网格,而不是0.1~0.9px,正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。


2) 斜形发虚

斜线也是会有模糊与精致之分的,不仔细对比其实是比较难看到问题,可能很多人都会碰到图形进行倾斜效果时是有锯齿的,那就是角度的处理问题了,自己进行多角度对比下试试,会发现哪一个角度最清晰。也可以将图层进行双层叠加,会非常犀利哦~


3) 像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的,下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制,如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。


总结一下上面的处理方法,坚持最少发虚原则:


比例协调

图形内部结构要注意元素构成之间的比例,有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例,打好内部统一结构线进行图形绘制和比例分配。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容

  • 一个APP应用图标设计的美感与吸引力,决定了用户对产品的第一映像。一个有吸引力的APP应用图标,可以让用户愿意去了...
    Evans的璀璨星空阅读 2,323评论 0 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,133评论 25 707
  • 类似Iconfinder的图标和矢量图形市场,为网页和印刷设计者提供了丰富的实惠可用的矢量图标资源。 我们会对每一...
    Kemr阅读 2,696评论 1 30
  • 张秋分享:经过完整完整沙龙的参与过程,我感受到了团队的力量。在无声且人多的环境中,也没有哪个组把“房”建歪[强]。...
    程蕾阅读 262评论 0 1
  • 在书桌的最上层放着一个礼品盒,已经拆开过,因为房间空间有限,也怕摆出来惹上灰尘,所以仍旧封存着。 里面装的是在路灯...
    吴海燕haily阅读 343评论 0 1