图标尺寸之谜—线性图标

用户头像
西安/UI设计师/7年前/839浏览
图标尺寸之谜—线性图标

一篇学习笔记,大家有更好的方法,一起分享。

对于图标的尺寸曾经觉得是玄学。物理尺寸一致,视觉上感觉不一样,追求视觉一致玄之又玄。直到看到一些大神的文章,哦〜〜〜原来如此,有规范,那我就放心了。

但是图标的不同又是怎么来的呢???一定要找到他们的规律,不然做起来纠结呀(原谅我的强迫症)。

首先,了解图标的设计规则。图标分为圆形、正方形、横向矩形、纵向矩形的形状。保证他们面积一样时视觉上看起来会一致。


我们以常用的48px图标举例,IOS和Material design规范有些微的差别:


先按照规范临募一组图标,我选择在iconfont首页选择“淘票票官方图标库”。结果如下图(线条为3像素):

可以看出IOS图标更饱满,Material design形状变化大一些,自有其美感,自成一体。果然,设计时有所依据,心里踏实多了。


但是呢?也有很多图标不是按这个规范来的,它们是按照什么规律呢?在网络课程中找到另一种方法:

      如图是以3像素为单位时的辅助框的使用方法,以下分别是单位3、2、1时的图标对比。

结论

 - 单位越小,图标更饱满。这样我们就可以根据想要的风格调整自己的图标。个人觉得这种方法比较好用。

 - Material design采用的是以3像素为单位。


那IOS规范是采用的是几像素为单位呢?显然都不是。

那有3*2,就可以3*1、3*4了?

也是可以的,结论是数值越大变化越大,数值越小看起来更饱满。一般更饱满,视觉更舒服哦。看来一套图标采用一个规则,视觉上都是一致的。


但是???我用“淘票票官方图标库”的图标套用以上规范都套不上!!!我太难了。。。。。难道?这是传说中的最高境界无招胜有招?大神们可以用眼睛衡量面积?求解惑。。。。

7
举报
|
24
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
Security Camera UI kit
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI通用设计素材1
【新年UI图标】礼物/活动icon
盲盒APP UI设计
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D渐变流体抽象矢量UI背景图
新拟态风格 UI设计组件库
【新年UI图标】体育icon
钱包ui模板
【新年UI图标】会员icon
手表表盘UI系列
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
科技医疗透明柜UI界面设计
【新年UI图标】旅行icon
UI界面 组件
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
你可能喜欢
相关收藏夹
大家都在看
登录注册