恭喜你成为UI中国推荐设计师 (详情)

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

推广

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
四步设计完美图标
6.3°
原创文章 / 教程 / / 举报
676 26 20 1

2021-09-12

线性图标设计方法

很多设计师认为线性图标不重要,设计前在花瓣、iconfont、P站一通搜,然后找到几个看起来合适的改一改就拿去用,这种方式虽然不错,但是产品设计完成后平平无奇,甚至和其他产品“撞脸”。


本文从小白到超神共分为四个部分:


1.基础构成

2.产品属性

3.统一规范

4.品牌基因


一.基础构成


1:思考文案是否有可以直接表达的方式。


例:“信用卡”“购物车”“订单”此类在现实生活中有已存在的物品,我们就可以找到图片,直接进行简化制作。



但是不能看到什么画什么,导致在制作图标的时候没有重点的勾勒,作为图标,主观美化和简约也是很重要的。



2:文案拆分再组合


例:“发现新鲜”“学习计划”“推荐有礼”此类生活中没有对应的物品的,我们可以将关键词拆分。

 

推荐有礼=推荐+礼品

推荐:人给人推荐

礼品:礼盒、礼袋

 

推荐(以人为主的推荐—得到人物图标)

礼品(生活中的礼品—得到礼盒或礼品袋)

 

将其结合

二:产品属性


“图标的情绪”

 

为什么只看脸就能准确地区分儿童与成人呢?因为儿童的面部圆润,五官紧凑,而成人的面部轮廓比较硬朗,五官相对较宽松,在图标的绘制上也是同样的道理。

  

同一个表达形式,不同的描边粗细和圆角大小往往能使图标传达出不同的情绪。


以下是同一组图标,改变其描边粗细和圆角大小后体现出的不同面貌。


风格:通用

描边:中     圆角:中


风格:卡通、儿童、有趣

描边:粗     圆角:大



风格:高端、商务、金融

描边:细     圆角:小



风格:可爱、年轻、女性

描边:中     圆角:大



风格:潮流、年轻、个性

描边:粗     圆角:小




三:统一规范


  • 图标的基本形状
  • 描边粗细
  • 圆角数值
  • 内外环比例
  • “破形”统一


1.图标的基本形状统一


  • 大多数人可以很轻松地将物品概括成线条并将其绘制成图标,但是如果没有规范地绘制,就会导致一组图标高矮胖瘦参差不齐,视觉上看起来很乱。

  • APP的图标大致分为圆形、正方形、竖长的矩形、横长的矩形;


  • 在绘制图标前,要先确定基本的几何形,尽量让图标保持一种形状。


  • 但是产品中图标的功能性通常不由UI设计师来决定,我们会面临不同图标的基础属性和功能性相差较大,无法将所有图标统一成一种几何形的情况,这个时候我们就要通过统一视觉大小,将不同的几何形保持视觉比例一致;


  • 可以借助“图标盒子”作为约束,帮助我们更好地统一图标的视觉大小。


  • 使用图标盒子时不用严格按照几何形约束,可以适当的调整下距离。(可以留言图标盒子或者私信我获取哟~)

2.描边粗细统一


这个比较好理解,就是将图标的描边数值统一。



但是实际操作时可能偶尔会面临图标的内部留白面积较小或者较大,这时如果一个图标的所有描边都统一粗细的话,就会导致图标视觉上过于拥挤或者宽松,我们可以灵活的调整内外环图形的描边粗细,以达到视觉效果舒服。



3.圆角数值统一


这个也比较好理解,只需保持图标中的圆角数值统一就可以了。但是有的设计师在设计一个图标时,所有的图标都严格按照统一的数值来进行设计,从而忽略了最重要的视觉效果。

一个图标的外轮廓与内部的图形大小是不一致的,如果我们强行保持所有圆角数值统一,内部10px的圆角和外部10px的圆角效果是大相径庭的,根据具体的视觉效果主观地调整圆角数值,才是正确的做法。

4.内外环比例统一

我们从整体看局部,图标外轮廓的几何形状统一后,再来看每一个图标内部的大小是否统一。

虽然没有大毛病,但是看起来却有点乱

我们将图标的内环大小统一后,图标整体看起来就有序多了


5.“破形”统一


在设计图标的时候,为了表现出丰富、时尚、不安分等情绪,我们常常采用破形的做法来设计图标


但是破形也不能随便地“破”,在处理破形时,要保持1.位置、2.角度、3.破形的大小统一。

 

1.位置:尽量所有的破形的位置都在相对的位置

 

2.角度:尽量破形的角度保持一致

3.破形的大?。壕×勘3直黄频舻拇笮∫恢?/h2>


如果设计一组图标时要采用破形的手法,但是有些图标发现破形后不美观,那就用左右或上下两个元素之间的留白来代替某一个元素的破形,但是两元素的间距尽量和破形的大小保持一致,还是那句话,保持视觉效果统一。



四:品牌基因


在设计图标时,找到logo、IP形象等具有品牌标识的图形,提炼其特征,然后融入到图标设计中。

 


最后:

图标盒子在下方的压缩包里,可自行下载哟~

 

如果你看完后有收获,不要忘记点赞哟~您的支持是我更新的最大动力??!






Powered by Froala Editor

图标设计UI设计教程

创建于:2021-09-12
下载
收藏

26人已收藏

  • 2

    作品

  • 1

    粉丝

  • 2

    关注

猜你喜欢

    大扬扬

    大扬扬

    话唠收藏家lv.2
    • 1

      粉丝

    • 12.4

      人气

    • 299

      颜值

    作品

      讯既屏发

      推广

      大扬扬

      点赞:20

      收藏:26

      评论:1

      四步设计完美图标

      你确定要举报四步设计完美图标?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2021年09月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

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

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

      登录

      账号或密码错误

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

      登录
      全网福利资源合集搜索处解压码