统一图标大小的方法分享

最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的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

相关推荐

  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 一款APP从设计稿到切图全记录

    这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用。 Part 1 项…

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

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

    2015-11-17
  • 创业还没听过在线Logo生成器? 那你就落伍了!

    创业还没听过在线Logo生成器? 那你就落伍了!创业的第一步 - Logo不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。品牌Logo可…

    2016-10-17
  • App Store2016年最新审核规则

    编号 中文内容 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA)、人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同。以下规则和示例旨在帮助开发者的程序能获得 2.1 崩溃的程序…

    UI设计 2016-01-21
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 设计师色彩理论终极指南

    如果一幅图所表达的内容就可以胜过数千文字的叙述,那么一张界面又有多少内容可以让我们探讨呢?事实证明,这里有许多不同的主题值得我们去讨论,其中一个主题就是色彩理论,它包含挑选一个匹配颜色色系的基本技巧…

    2016-06-27
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11