UI设计公司

APP ui/UI设计,统一图标大小的小技巧你掌握了吗?

浏览:55 发表时间:2020-03-31 15:00:11

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

  图标类型与尺度【1】

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

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

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

  形状填充示意图

  下面正式定义尺度部分:

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

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

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

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


APP ui/UI设计,统一图标大小的小技巧你掌握了吗?


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

  1.对于半像素的问题。

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

  2.对于iconfont的问题。

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

  3.对于对齐的问题。

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

  4.对于色彩一致的问题。

  一般而言,图标设定为同一个色值(比方#999999)就能一致色彩,可是也有遇到过某个图标会显得色彩比较浅,APP ui/UI设计,这是因为sketch处理图形的透明度有两个地方,一个是整体的透明度(在填充选项区域的上方),一个是填充的透明度,这个往往是因为整体透明度那里有问题,修正一下即可。


Copyright @ JJSDESIGN All Rights Reserved  皖ICP备案号19012581号

 

UI设计,品牌logo设计,UI制作外包,UI设计公司

 

推广区域:合肥 北京 上海 广州 深圳 杭州 南京 武汉 成都 重庆 长沙 厦门 青岛 宁波 天津

 

 

友情链接:百度

客服中心
热线电话
+86-17855120083
上班时间
周一到周六
全国热线
+86-17855120083
微信
17855120083
二维码