【APICloud系列|4】APP设计统一图标大小的方法

当我们想要在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。想要弄成一致性和统一性,非常的麻烦和耗时。

最后在谷歌的Material Design找到了一种规定的方式。

举例:图标大小为48px*48px 。如果你还需要其他尺寸的图标可以做完之后等比放缩即可。那你设计的图标最好是矢量的或者是形状图标。

谷歌官方规定Material Design 图标的形状类型分为三种:圆形、方形和矩形。

1.判定图标应该套用那种尺寸?

将图标与上图的模板居中对齐,然后中心不动,放大图标使之图标依次碰到三种形状的边界,填充最满的那个形状的尺寸就是该图标需要规定的尺寸。

2.iconfont的问题

大部分团队都会将图标转换为iconfont,这样可以缩小整个项目的大小。

3.对齐

如果有仔细看,我这个方法指定的图标大小为48px*48px,但是里面有内容的部分,比如说圆形,就只会占据44px*44px,这时候我们当然会希望把图形放置在图标的中央。一个上下居中对齐,一个左右居中对齐。

仔细发现一下,你会发现看上去并不是居中的。这是由于人的视觉错觉造成的【2】,这时候就需要进行适当的调整,通过自己的视觉判断来进行对齐。

4.颜色统一

一般而言,图标设定为同一个色值(比如#FFFFF)就能统一颜色,但是也有遇到过某个图标会显得颜色比较浅,这是因为sketch处理图形的透明度有两个地方,一个是整体的透明度(在填充选项区域的上方),一个是填充的透明度,这个往往是因为整体透明度那里有问题,修改一下。

好啦,今天就分享这么多!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spicy Spring:动态创建自己的BeanDefinition

当我们有一个Spring托管的应用程序时,我们想让Spring管理所有的bean。 除了使用已知解决方案(例如带注释的bean,Java配置和XML配置)创建bean的常规方法之外,还有一种方法可以用来创建自己的BeanDefinition 。 使用Bea…

【APICloud系列|5】一键生成APP所有图标

图标尺寸一般为:16*16px、512*512px、1024*1024px. 生成APP常见的图标尺寸的办法有2种: 第一种:自己根据设计出来的APP图标尺寸自己调整图标icon尺寸大小。 第二种:借助第三方神器和在线生成图标icon工具来完成。 1.网址&#xff…

台式计算机调整显示亮度,台式电脑显示器屏幕亮度怎么调节?

电脑屏幕过高会对眼睛造成伤害,在晚上用电脑工作时尤其如此。那么,台式电脑显示器屏幕亮度该怎么调节呢?一 利用屏幕按键调节电脑显示器上带有几个按键,通过它可以调节屏幕亮度。这个很简单,除了一个是关闭屏幕亮度的按…

html排序按钮_插件分享 | 可进行排序扫描任务的Task Queue

前言:在以往hvv场景中使用Goby的过程总是存在一个痛点:时间短,目标多,只能盯着扫描进度结束后才能手动返回到初始界面开启下一个扫描任务(内心极度狂躁)。本次Goby更新后又开放了新的插件入口点以及API,使添加扫描任务…

RabbitMQ如何做到不丢不重

目录 MQTT协议 如何保证消息100%不丢失 生产端可靠性投递 ​编辑 RabbitMQ的Broker端投 (1)消息持久化 (2)设置集群镜像模式 (3)消息补偿机制 消费端 ACK机制改为手动 总结 MQTT协议 先来说下MQTT…

【LESS系列】简介和使用

LESS —— 一个CSS预编译框架,它在CSS的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,LESS可以…

掌握 React 与 React Native

今天面试被人问到React 与 React Native ,废话不多说,直接上干货。 React Native官网:https://reactnative.cn/ React Native App 页面布局直接通过 HTML 和 CSS 的前端基础技术进行布局与开发,大大降低了学习成本。 你如果早就在心里有开发一个自己 App 的想法,而刚…

计算机仿真在机械应用,浅谈计算机仿真在机械的应用.doc

浅谈计算机仿真在机械的应用浅谈计算机仿真在机械上的应用李思宏(重庆交通大学,重庆402247)摘要:如今计算机仿真技术在机械上有着广泛的应用,计算机仿真已然成为热门。本文用综述的形式简要介绍了计算机仿真的概念、机械生产现状及计算机仿真…

cpu序列号唯一吗_怎么看电脑硬件是不是新的 有什么软件能检测吗?

怎么看电脑硬件是不是全新的很多人比较关心的问题,毕竟现在很多奸商为了最求利润什么招式都用的出来,其中依旧重新,依次充好是最常见的伎俩了。 怎么看电脑硬件是不是新的 有什么软件能检测吗?这个时候大家可能就会想了&#xff0…

如何破解网页端已保存的用户名和密码

使用谷歌(火狐、IE等)浏览器打开需要破解的网页。 按F12显示网页代码页面 鼠标点击一下密码的对话框 快捷键:CtrlShiftC 删除字段"password" 就可以显示密码啦。

扬州大学计算机考研难考吗,扬州大学(专业学位)计算机技术考研难吗

考研真题资料优惠价原价选择很多考生在准备扬州大学(专业学位)计算机技术考研难吗?是考研报考的时候都会产生这样的疑问:这个专业的研究生好吗?适合我吗?对我以后的人生和职业会有帮助吗?考生在准备扬州大学(专业学位)…

21世纪的设计模式:适配器模式

这是我的演讲“ 21世纪的设计模式”的第三部分。 适配器模式桥接世界。 在一个世界中,我们有一个概念的界面。 在另一个世界,我们有不同的界面。 这两个接口有不同的用途,但有时我们需要进行转移。 在一个编写良好的世界中,我们可…

python 编辑数学公式_用python编写数学公式

我正在用python编写此公式。 请查看图片我正在使用以下代码。 它总是会出错。import mathimport matplotlibmatplotlib.use(TkAgg)from pylab import *import cmathimport networkx as nximport random as rdimport numpy as npgnx.karate_club_graph()for i in g.nodes_iter()…

在百度搜索页添加公司总部的客服电话

先看一下收录标准 1.登录百度数据开放平台:http://open.baidu.com/data/ms/nav/pc/ 注意事项: 2.进到信息提交的页面,先填写相应的资质,后提交信息即可,按照给出来的示例,去填写相对应的信息就可以了

理解Linux系统中的load average(图文版)

本文转自:http://heipark.iteye.com/blog/1340384 一、什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: the system load is a measure of the amount of work that a computer system is doing)。也有简单的说是进程队列的长度…

click点击后鼠标移去就失效怎么实现_鼠标右键失灵怎么办,你知道原因吗?

在上网时,有时会遇到按右键没有反应的情况。一开始还以为是中了病毒,但是重启之后,又恢复正常了,这到底是怎么回事呢?如果是在我电脑上操作电脑软件导致的鼠标右键失灵可能以下原因造成的。一:系统繁忙&…

计算机考研379分,考研379分报考南开大学被刷,是调剂还是二战?师姐建议非常肯定...

原标题:考研379分报考南开大学被刷,是调剂还是二战?师姐建议非常肯定随着考研国家线公布,34所自主划线的985大学也加快了复试的脚步,目前很多大学已经开始了复试工作,比如清华大学,南开大学等。…

微信小程序源码下载链接

参考链接备用:https://www.cnblogs.com/ytkah/p/9003620.html 微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶…

竹签子毕竟是_毕竟是什么程序和功能?

竹签子毕竟是许多RDBMS支持“例程”的概念,通常将其称为过程和/或函数。 这些概念已经存在于编程语言中一段时间​​了,而且不在数据库中。 区分程序和功能的著名语言是: 艾达 基本知识 帕斯卡 等等… (存储的)过程…

开源源码合集

微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天Benson就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!仿豆瓣电影微信小程序 https://github.com/zc…