统一图标大小的方法分享

最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下。需要注意的是,方法有很多,这只是提供一种可行的方法,可供参考,有什么问题可以留言讨论。

1473056409-4471-804591-f162955a9267ef6e

图标类型与尺寸【1】

首先,这种方法制作出来的图标大小为48px*48px,需要其他尺寸的图标可以做完之后等比放缩即可,放缩过程中可能需要注意半像素(见下文)的问题。

Material Design把图标的形状类型分为三种:圆形、方形和矩形。其中圆形的半径为44px,方形的边长为38px,矩形为44px*32px。

怎么判定图标应该套用那种尺寸的?有一种方法是:将图标与上图的模板居中对齐,然后中心不动,放大图标使之图标依次碰到三种形状的边界,填充最满的那个形状的尺寸就是该图标需要规定的尺寸。如下图,依次将设置图标放大并使之接触到不同形状的边界,可以看到在圆形里,该图标最大,证明设置图标最匹配圆形,所以使用圆形的尺寸44px*44px。

1473056412-3604-804591-6b016c5436906dc5

形状填充示意图

下面正式定义尺寸部分:

1. 如果形状为方形,则图标大小为38px*38px,若只是近似的方形,则取较小的边为38px,等比放缩。

2. 如果形状为圆形,则取图标大小为44px*44px,若只是近似的圆形,取较大的边为44px,等比放缩。

3. 如果形状为矩形,先令短边为32px,等比放缩图标,若此时长边大于或者约等于44px,则取长边为44px,等比放缩;否则,令长边为y,取长边为(44+y)/2,再向上取整,然后进行等比放缩。

根据以上的规则制定出来的图标,大小就会比较统一。如下图,左边是调整前,右边是调整后。(不过也有人反馈说看不太出来o(╯□╰)o)

1473056410-3549-804591-e0a196a4de65e355

图标修改前后对比

顺便把这次整理图标遇到的坑也记录一下:

1. 关于半像素的问题。

半像素的问题主要是在进行Android不同尺寸适配的时候,有时候开发会要求图标不能出现非整数的尺寸,不然可能图标就会糊掉。所以在设计Android端使用的图标时,注意一下这个问题。适当地对尺寸进行四舍五入一下即可。

2. 关于iconfont的问题。

现在大部分团队都会将图标转换为iconfont,这样可以缩小整个项目的大小。图标在转换为iconfont的时候,会忽略所有的线条(包括填充色块的边)。所以,如果图标中有线条,则需要利用高度为1px的矩形代替,色块的边长需要用色块叠加来替代。

3. 关于对齐的问题。

如果有仔细看,我这个方法指定的图标大小为48px*48px,但是里面有内容的部分,比如说圆形,就只会占据44px*44px,这时候我们当然会希望把图形放置在图标的中央。免不了就会使用对齐工具,咻咻两下,一个上下居中对齐,一个左右居中对齐,搞掂。但是,慢着,如果仔细发现一下,你会发现看上去并不是居中的。这是由于人的视觉错觉造成的【2】,这时候就需要进行适当的调整,通过自己的视觉判断来进行对齐。

4. 关于颜色统一的问题。

一般而言,图标设定为同一个色值(比如#999999)就能统一颜色,但是也有遇到过某个图标会显得颜色比较浅,具体原因未知,这时候就需要进行特殊的处理,比如设定更加深的颜色,比如#333333,具体通过自己视觉调整即可。

文/妖叶秋
原文链接:http://www.jianshu.com/p/1e3dce79ad9b

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/17417/

(0)
TinadminTinadmin
上一篇 2016-09-02
下一篇 2016-09-05

相关推荐

  • 『UI设计尺寸标准汇总』iPhone界面尺寸标准|Android界面尺寸标准|网页界面尺寸标准

    iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 147px iPhone6 plus放大版 1125×2001 px 401PPI 54px 132px 147px iPhone6 plus物理版 1080…

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

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

    2017-03-08
  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • 昨晚,微软发布了一款设计师神器!业界一片哭声!

    #交互学堂#昨晚,微软又硬了。 发布了一部怪兽,把毒少毒死了。。。 这就是我要的桌面电脑啊!!! 一体机—— surface studio (这是配置:Core i7处理器,GeForce 980M显卡,32GB内存+2TB混合硬盘,3:2 TrueColor…

    2016-10-27
  • APP UI 设计规范详解

    移动端 APP  UI 规范详解, 专注规范解析,提高设计效率!提升用户体验维度!

    2016-07-14
  • 如何实现一份设计稿支持多个尺寸?

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

    2015-11-17
  • 那些经典的现代艺术作品对UI设计的影响

    许多人对现代艺术的评价是这样的:“这不就是一团乱麻吗!”“一滩烂泥!”“复制粘贴而已,我也会。”(请自行脑补该类文字所描述的作品)。事实上,现代艺术的影响从Windows Phone到大众点评的界面设计,几乎无处不在。…

    UI设计 2016-08-26
  • 如何快速、高效地进行图标设计

    最近做了一组图标练习,通过这次设计小练习,总结和分享下对现在比较流行的线性图标和插画风图标的一些思路和方法,源文件已经上传。 我们在设计或者绘制图标之前,首先要搞清楚图标的定义,图标到底是什么,为什么…

    2016-06-03
  • 相当便利的UI交互演示工具

    做为一个移动端的互联网产品设计师,天天心心念的就是如何做出一款款能让用户爱不释手的应用,想来轻松,做起来点点滴滴都是功能、美观和用户体验的契合难题,在一个个经典创意最终拍板前,产品原型及其演示体验,…

    UI设计 2016-06-08
  • 【信息图设计】常用的5种数据可视化方法

    小编最近在研究后台的设计,涉及到数据统计分析模块的数据的呈现方面,搜集学习材料的时候发现这篇文章,推荐给有需求的童靴们共同学习。在文章中,原作者跟大家分享数据可视化常用的五种方式,希望能给大家带来思…

    2016-03-17