UI设计中如果图标大小不一致一般怎么处理?

 我来答
河南云和数据
2019-12-02 · 百度认证:河南云和数据信息技术官方账号
河南云和数据
国家紧缺、核心IT人才生态服务提供商,专注IT职业教育、云计算、大数据 、AI、VR/AR/MR等领域研究与服务。
向TA提问
展开全部

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

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

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

下面正式定义尺寸部分:

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

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

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

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

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

1. 关于半像素的问题。

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

2. 关于iconfont的问题。

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

3. 关于对齐的问题。

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

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

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

河南新华电脑学院
2019-12-03 · 百度认证:河南新华电脑学院有限公司官方账号
河南新华电脑学院
河南新华电脑学院隶属于IT教育知名品牌——新华互联网科技,是具有一定影响力的直营电脑教育品牌。
向TA提问
展开全部
1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率,点确定。
6、如果桌面显示出来的大小不适合,在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合,点保存更改就行了。
如果以上方法不行,或分辨率设置里为灰色,则是显卡驱动问题,下载一个驱动精灵软件,点更新驱动,安装完成后,再根据修改分辨率的方法调整到合适的分辨率即可。
确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。屏幕分辨率低时(例如 640 x 480),在屏幕上显示的像素少,但尺寸比较大。屏幕分辨率高时(例如1600 x 1200),在屏幕上显示的像素多,但尺寸比较小。
显示分辨率就是屏幕上显示的像素个数,分辨率160×128的意思是水平方向含有像素数为160个,垂直方向像素数128个。屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
江西新华电脑学院
2020-01-01 · 品牌创于1988,专注IT教育
江西新华电脑学院
江西新华电脑学院开设电子商务、软件开发、电竞、动漫设计、UI设计、室内设计、网络工程、互联网财务、VR等专业。 来校参观报销路费,报名享受国家学费减免政策,签订就业合同,毕业推荐高薪工作。
向TA提问
展开全部
1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率,点确定。
6、如果桌面显示出来的大小不适合,在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合,点保存更改就行了。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式