当前位置: 首页 > 知识库问答 >
问题:

前端 - 【图标大小 & 图标素材大小 原则是怎样呢】我们一般设计桌面应用/app应用,图标大小一般原则设置的img size是多大,然后应该使用的icon图片应该@几倍率呢?

方建明
2023-08-13

我们在使用icon的时候,一般用多大的尺寸呢?

我们知道阿里巴巴有著名的iconfont矢量图标库,
请问:比如我们在下载的时候,一般按照什么标准下载呢?

1、我们一般设计桌面应用/app应用,图标大小一般原则设置的是多大呢?

2、假设第一个问题的答案是32x32大小,那么我们在iconfont下载的图标应该多大?是下载@2(64x64) 还是@3(96x96)呢? 还是说直接下载@1倍大小的就行了?
image.png

3、使用icon的时候,我们一般是放在哪个目录下呢?
我记得一般在Vue/React项目都有一个public目录用于存放静态资源文件,但是我创建的electron项目为何没有此目录,我们可以任意建立一个目录吗?

image.png

共有2个答案

包德业
2023-08-13

对于移动端的页面,一般都要 2 倍起,避免在一些屏幕设备上造成图片失真。

在实际开发中,你应该根据对应平台的兼容性,按照这些优先级来选择:网页、小程序等字体(iconfont 一类图标库都有)、其次使用 SVG、最后才是位图(PNG 等)。

前两者为矢量元素,无论在什么分辨率上,都会按照预期的效果进行渲染,只有位图才需要你去确定倍速。

傅边浩
2023-08-13
  1. 图标大小是根据设计稿来定的,一般在 16*16 ~ 512*512 px
  2. 一般也是看设计稿,没说就自己判断个大概,我个人通常在指定倍率后选择 1 ~ 2倍
  3. 如果文件不需要任何改动就放 public 下,需要编译或者压缩的可以放 static 下
 类似资料:
  • 按照谷歌的指导方针,我已经为我的mdpi和hdpi屏幕项目添加了48x48和72x72启动器图标。 但在某些情况下,图标会调整大小。例如,在我的Acer Iconia A200平板电脑(mdpi)上,应用程序启动程序菜单使用64x64图标(或多或少,我从屏幕截图中测量到了这一点)。实际使用的资源是我的48x48图标,拉伸。 是否有一种方法,我可以添加版本的启动器图标到我的项目与更多的大小选项比hd

  • 在我正在构建的Android应用程序中,用户可以上传他们的个人资料图片。然后这些图片将进入“网格模式”。在我的例子中,网格模式的列宽小于图像大小。 因此,为了使其适合,我必须在上传到应用程序之前减少后端服务器上的图像大小。

  • 我开始使用响应图像,我有点怀疑。 我有一个图标。我的网站上的图标总是有两种尺寸:一种是74像素宽的小版本,另一种是94像素宽的大版本。 我使用imgix为大图标创建了这个srcset。我检查了这些图像,并以正确的方式调整了它们的大小,1x是94像素宽,2x是188像素宽。 我修正了94的大小,因为在大版本中,图像总是94像素。 现在我的问题是:对于74像素版本,所以小图标,我必须使用74px来重新

  • 我正在开发一个WordPress主题,我需要通过内置媒体上传器上传相同比例的图像。我知道,通过定义高度和宽度并使用裁剪,这很容易做到。 问题是,我想将这些图像用于全屏滑块,所以将所有图像降到300x200作为示例是行不通的。我想保留尽可能多的默认大小的图像,而裁剪它的比例。 WordPress带有add_image_size()功能,但我更像是在寻找add_image_ratio()功能。这有可能

  • 我对C#背景的Java很陌生。我正在按照本教程向我的项目添加一个图像并在标签中显示。在C#中,我们使用Picture-box并设置image属性,在C#中,我还可以在设计时通过调整Picture-box的大小来调整Picture-box中的图像。 我已经按照教程将图像添加到一个标签,但现在的问题是图像相当大,我想重新调整大小。我试过调整标签的大小,但我的图像没有压缩或重新调整大小。 我该怎么做才能

  • 好的,我有一个带屏幕的JFrame。我把尺寸设定为800乘800。但是,创建的窗口比该窗口小。任务栏没有问题,因为它不是全尺寸的。 在screen类中,paint方法在边框应位于的位置周围绘制一个框: 当我运行它时,窗口比盒子小,底部和右侧被切断。 请注意,我手动调整了第二张图片的大小,以显示边框的差异。 我意识到我已经把盒子的每一面都画小了1个像素,但差别远不止2个像素。