赞助商
立即赞助

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

UI设计3年前 (2021)更新 流光
3.2K 0 0

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

最近遇到一个同学,说做很稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上,该怎么办。经一轮沟通,现他陷几个新手设计师在画图标比容易犯的问题:

  • 面对产品提出的疑问,不知道如何拆解,仅停留表面的理解,“”or“丑”
  • 思考的方案呈现不够系统,导致次修改,也未被采纳
  • 于图标多案设计输出缺乏法,漫目设计案
  • 思考够发散,存在限性,敢大胆突破
  • 过度纠结,都在做方案,做出了但方案都不过关

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

从以上这几个问题,我们进深入思考,会发现其实这些是表上问题,实上是在说什么呢?

  • 美 or 丑:际上是我们对图形或图标的设计趋势是否,我们设计的图标设计否符合的趋势,我们阐述方案的时候否足够的自信这流行的风格?
  • 次修改:个际上是反馈我们呈现方案的功力或者能力,我们做的设计是否够系统,套方案中是否有命中对方想要的点
  • 漫目设计:基于上述第 2 框架下,我们在输出图标时候设计呈现维度是否足够全,从表意到图形美观度上是否有足够多思考
  • 限性:因为日看得,在实际案例设计的时候会受到限,因此养成日积累的习惯时思考会更好
  • 过度纠结:这种表现是表你已经陷入了计本身,而缺乏跳出来更多参考的勇气了,这应该先停住,找找参考,帮助开思考壁垒

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

基于以上这个案例,分享下我在日常设计常用些法,希望可以帮助遇到相问题小伙伴们进些答疑,从而帮助你们打破壁垒,高效成长。

面发改分成 3 个分来进行阐述:思考维的锻炼;图形的设计方法;系统方案呈现

思考维度的锻炼

当我们要设计一个图标的时候最容易入手的就是图标的表意,从表意延伸到图形的设计,然后再同的设计手法(线、面、线面等等)。

1. 图标的表意

图标的表意方式,大概可拆分为几种:具有普识性的图标、可进行表意延伸的图标、通过组合的图标、抽象的需要联的图标。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 普识型图标

即我们在现实生活常见具有常识性性图标,例如:删除、添加、放大、搜索、笔记本、手、眼睛、礼物等等。这类图标在于形体打磨上需要多花些时,从不度进尝试,比如以删除为例子,样造型可以有不设计表现。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 表意延伸的图标

即一个物以被延伸为一个或者个图形表现的图标,例:点赞、浏览、设置、收藏、评论、件等等。例点赞-延伸为你很用大拇指来表达,游戏延伸为游戏手柄、设置-延伸为机械操用齿轮来表达,评论延伸为对使用对框来表达,浏览-延伸为用眼睛的图标表达。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

除此之外延伸表意的图标以有种设计方式,例以件为案例。

  • 方案 A:事件具时间性,所以可以考虑用日历置换;
  • 方案 B:件具有告的行为,所以考虑用喇叭来突出个行为;
  • 案 C:事件具有档案意味,所以我们可以用表单图形来做沿用。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

4. 组型图标

主要是指该类图标的表需要通过 2 个以上的图形进行组才能更加准确进行表现,例如:群、群聊、好友、添加系人、情侣、转账、红包。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

5. 创类图标

特指认识中没有,因为产需要被二次创来的图标,一般在一些生务中会现,这类图标初期往往需要伴随字一同现。例如:微信的友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类等图标。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

图标的表现方法

常规图标表现法(线形、线、形、插图、叠色等等)我们基本都了解,作为设计师更应该知潮流趋势,楚现在流什么类型设计,这样才能让你作出更加出设计。

这里分享几种目前最流行的图标设计类:

1. 磨砂质感图标

磨砂质感图标作为 2020 年最流行的图标,已经在 APP 中看得了相的设计,从设计方法上并难,重点还是在于是否有需要和应场景。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 插图+磨砂质感

图标使用小插图进绘制,然后再结合高模糊视觉表现手法,体让图标更具有层感和透感。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 3D 质感图标

3D 为 2 年最流行的设计趋势,自也牵动着设计师的心。但 3D 的打磨相对比耗费时间,不仍是值得一试的设计方式之一,目前在 APP 的设计中比少见到应用,或许成为 2021 的趋势之一。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

4. 3D 磨砂质感图标

基于 3D 与毛玻璃图标的结合,整体的表结合了这 2 种风格的特点,既保留了毛玻璃图标的通透,同时也具 3D 的空间感。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

5. 流光溢彩的图标

算是属于渐变类型的一种,但颜色和细节的跨度相比常规的渐变图标更加丰,整体让人觉有流光的效果,更加有未来。不过从目前来说,更适作为独立的应用 APP 计,作为常规的图标计需要一定的受度。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

图标的设计方法

想要了解设计的方法之前,我们得了解有哪些类的图标,具体大可查看我之前撰写过的章,里面有详细的分析了图标的设计类。除此之外,这里还可分享我日中设计图标使的方法。

这个专题也有超详细的类和教程 → https://www.uisdc.com/zt/icon-drawing-guide

1. 表+基础形

基础形体使用普适性较高的图标造型,在图标的亮点或者点缀通过表关进行创计,从而让图标获得新的受,但有较高的识别性。案例:例如以日历图标为案例,可以比较直观的使用日历的普识图形,然后通过日期的方式来进行调赋予图标生命力,然后再叠加上颜色和质,并且增加一点趣味的折角计。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 联延展

基于实际场景的认识来进行图形联延展,并且进行一定的美感升级及图形的优,延展最终的图标设计,这种方法可大大大对于图标的识别。案例:设计一个快速聊天表意的图标,聊天我们规使气泡,快速我们可联为闪电,然后把气泡和闪电进行结合。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 组合升级创意

利用些正负形创意法,使用 A、B 图形进有融合或剪切,使其获新图标造型,让体图标感受更具有创意。案例:例如我们尝试画个具有宇宙感受游戏图标,可以过手柄和球有结合让体图标带有游戏和球意思,体提升了表创意。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

系统化方案呈现

方案的呈现属设计的一部分,虽不能到决定的用,但的呈现效果往往以帮助我们得到更的印象分,里分享一下我在设计程中尝试的一方法。方案的大小或者输出的类型也决定着我们呈现方案的类型,下面根据不同的类型分享不同的呈现案例。

1. 纵横对比法

适用需要大量尝试的时,以穷举输出为典型案例,我们以用最基础的图形为中心点,结合图形的表意和图形风进行纵横的散扩展,例横向为表意、纵向为图形风,中间部分属叉部分。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 单图标创意思考

对于一些标志类或重的图标,我们需阐述我们的设法或者源,这种呈的方式就可以很直观且简洁的表我们的思考。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 整套输出

对于一整套的图标,需要在案例上呈现图形的计规则,包括但不限于有:圆角、角度、组规范、斜度等等。除了呈现图形之外,请补充上颜色的应用规则、颜色的表等等。

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

总结

图标设计虽然是一个小容但却很重要,反映着着整个页面的精致,在 UI 界面来说是除界面版之外最重要的一环,因此是很值得我们研究的设计之一,建议在日工作中多练习多看。

欢迎关注作者公众号:「ID计站」

​图标设计如何快速过稿?来看腾讯设计师的私藏方法

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

大家知道,长期以来我们一直在坚持分享一些基础的干货内容,那些看书、看分享很难系统搞得明白的知识点,这和我个人对基本功...
ui设计
编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮...
Figma
2016 年的时候,我意识到一个很重要的问题:我一直都没有实现自己的目标:学习新技能、结识新朋友、保持身心健康,等等等等。...
ui设计
微信的最近一次更新,小程序入口变浅了很多。最近使用的小程序,被放置在微信打开后初始页面的下拉菜单中,而且给的下拉栏空...
ui设计
从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计
“为了设计这个产品的UI我们已经设计了线框图、原型,没有时间和精力再在这当中加一个环节了!”对于UI设计流程,我想你没少听...
ui设计
编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计