广告人干货库 广告人干货库
  • 快讯新鲜
  • 营销
    • 资讯
    • 洞察
    • 创意
    • 品牌
    • 策略
    • 文案
    • 设计
    • 运营
    • 电商
    • 传播
    • 日常
    • 书单
  • 案例库
  • 方案库热门
  • 专题库
  • 广告公司导航
  • 4A招聘官方
  • 注册
  • 登录
🔥广告公司导航    🔥方案库    🔥案例库    🔥加VIP会员    🔥4A公司招聘

为什么你做的设计都不咋好看?三个细节教你设计!

我们的设计日记
5 年前

很多同学经常会问设计不精致怎么办?今天就拿大公司的一个图标举例,争取每个细节点你们都能get,并在项目中使用。下面我们就聊下图标设计细节,图标尺寸以及对于头像处理的小细节,希望可以帮助到你。

 图标比例保持体量统一 

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲这个页面相信大家都平时工作中会做到,有很多图标放在一起,里面可能是一些常用菜单,这个设计有什么问题呢?相信看在这里小伙伴脑海里有无数答案?不统一,还是什么?我们来分析下:

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲首先从大家关心的统一性来说,没有任何问题,图形都是在规范的图标栅格里面,也非常的统一,那么问题出在哪里?

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲仔细观察,会发现「联系人」和「历史消息」的图标过于饱满,虽然它们尺寸一样,但是比「最近使用」这个图标要大很多,因为后面这两个图标过于的饱满。从视觉来说它们的重量太重了,所以看起来会比较大。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲在做设计时候,如遇图标比较瘦长或者圆形等不够饱满的情况,请酌情将图标撑满像素,来保证整体一致的视觉体量感。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲如果图标语义较饱满的情况下,可使用微缩,来保证整体一致的视觉体量感。文中案例之所以出现这种情况,是因为没有定义出图形体量大小具体的绘制规则,所以导致图形过于饱满看起来和瘦长,会显得视觉重量不一致。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲所以需要对图形绘制规则进行优化,保证瘦长,或者饱满的图形在页面中体感一致。提供了4个基础图形绘制技巧和对应的辅助线参考图。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲在实际应用时,可略微在可变范围内微调,对于过于饱满的图形,高度变低时,需要增加宽度来保证视觉重量相等。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲这样调整后,整体的图标视觉重量就会更加均衡,也会更加规则。所以如果你发现你们产品页面中图标大小体量不一样,或许是因为你忘记对图标体量进行规范。

 图标尺寸比例怎么定?

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲图标在界面中使用场景很多,有时用大图标,有时用小图标,该如何去定义小图标大小,大图标大小,这时很多同学非常纠结,有时候就乱定,导致页面没有秩序感。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲第一步,要先去梳理页面场景,看看哪些地方会用到图标,全部把场景列出来。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲列出来,然后根据APP设计的最小单元的倍数来定义图标风格,比如支付宝最小单元是4,所有间距都是4的倍数,那么在图标这里,也是同样的原则,全部的图标尺寸,根据4的倍数去定义几种大小,比如24X24,32X32,44X44,56X56,72X72等等,如果页面中不够用,同样的在4的倍数基础上进行新增。

 

 图标放大后,线条粗细该如何定义? 

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲我相信大家都有这种情况,一组图标在使用时候,会出现在各个场景,这个时候需要放大,甚至缩小,但是不知道放大后图标粗细该如何确定,直接放大,直接缩小会出现图标的细节粗细有问题,那么该如何处理呢?

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲第一步:需要确定图标大小和线条比例,以支付宝为例,首先要确定图标大小和线条粗细比例为14:1当然每个比例是不一样的,可以根据你们产品的调性去决定,如果图标比较细,可以设定为10:1,这些都没有固定标准。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲假如图标需要设计一个140X140的大小,那么图标粗细就应该是10px。

为什么你做的设计都不咋好看?三个细节教你设计!-广告人干货库

▲如果图标是112尺寸大小,那么按照14:1的比例,那么图标线条粗细就应该是8px,以此推动,通过这样的方式来保证图形的一致性和稳定性。

以上三个小点,是绝大多设计师忽略掉的,也是设计中不太注意的细节,但是今天设计的专业度,设计的细节程度往往就是由于这些细节组成,今天这3个技巧,看会了之后你就可以直接在项目中去运用,希望可以帮助到你。


为什么你做的设计都不咋好看?三个细节教你设计!



创意设计品牌营销广告人干货库
我们的设计日记
在国内知名互联网公司工作快十年了,平时喜欢沉淀一些设计思考,所以开了这个公众号和大家分享一些设计方法和思维!

我们的设计日记

在国内知名互联网公司工作快十年了,平时喜欢沉淀一些设计思考,所以开了这个公众号和大家分享一些设计方法和思维!
12
文章
0
评论
1
获赞

找工作

👉 想跳槽,要涨薪,找工作,就上4A招聘

快讯

全网认错拓麻歌子,Labubu 电子新机太会拿捏
1 小时前
联合利华公布2026财年第三季度业绩
3 小时前
郝熠然荣升资生堂品牌大使
4 小时前
刘浩存成为安踏品牌全球代言人
5 小时前
更多

扫码进品牌营销案例群

热文推荐

TOP1
美团小象超市清凉季创意设计:打造“真实感”视觉体验
2 周前
TOP2
中国品牌的7张面孔
3 周前
TOP3
泉州文旅:我们把一座古城,拍成了一本“答案书”
2 周前
TOP4
康恩贝肠炎宁:我们买下这块广告牌,就是为了告诉你卫生间在哪里
3 周前
TOP5
创意拆解|美团 "高反薯片袋" 广告
3 周前

好文推荐

两瓶可乐的代理权洗牌:WPP拿了头条,阳狮拿了利润
山下有松发布声明!
阿嬷手作出大事了!商标被定性欺骗

专题展示

创意干货55

品牌30讲27

品牌定位40讲40

品牌干货207

小红书运营143

广告人必读书单164

品牌方推荐

avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for

广告公司推荐

avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for
avatar for

方案怎么写,扫码来干货库看看

  • 方案库
  • 加 VIP 
  • 用户评价
  • 行业报告库
  • 关于我们
Copyright © 2020-2026 广告人干货库. Designed by nicetheme. 网站地图 川公网安备51015602000692号 蜀ICP备2023018979号
  • 广告人干货库19136
  • 品牌营销6003
  • 案例库5813
  • 品牌营销案例库5595
  • 品牌策略3345
现在登录
  • 快讯新鲜
  • 营销
    • 资讯
    • 洞察
    • 创意
    • 品牌
    • 策略
    • 文案
    • 设计
    • 运营
    • 电商
    • 传播
    • 日常
    • 书单
  • 案例库
  • 方案库热门
  • 专题库
  • 广告公司导航
  • 4A招聘官方