行业标准图标大小 [英] Industry standard icon sizes

问题描述

我正在尝试向网站添加图标，并且将文字大小和图标大小设置为正确的阵容是一个问题。

I'm trying to add icons to a website, and getting the text size and icon size to correctly lineup is a bit of an issue.

所以我'我们查看了 Windows样式指南以及图标设置可供下载，并注意到他们似乎主要遵循16x16,24x24,32x32,48x48,64x64的大小结构等。

So I've looked into the Windows Style Guide as well as icon sets available to download and noticed that they mostly seem to follow a sizing structure of 16x16, 24x24, 32x32, 48x48, 64x64 and so on.

首先我想问为什么是否已选择上述尺寸，为什么它们是8的倍数？例如，为什么没有15x15,25x25等。

Firstly I want to ask why have the above sizes been chosen and why are they multiples of 8? For example, why not have 15x15, 25x25 etc.

是否有正确使用图标和图标文本的最佳实践指南？

Is there a best-practice guide anywhere to using icons and icon text correctly?

推荐答案

早在Windows的早期，视频卡是单色的，或者，如果
，你很幸运，16色。这些都是平面视频模式，前面讨论了
机制。现在想象一下将
位图复制到位图和屏幕都是平面的屏幕上。
如果目的地的起始坐标是8的精确倍数
，那么可以通过块转移
指令复制位图。另一方面，如果目的地不是8美元的完美
倍数，你必须做很多花哨的位移，才能在屏幕上获得
。

Back in the early days of Windows, video cards were monochrome or, if you were lucky, 16-color. These were all planar video modes, the mechanics of which were discussed earlier. Now imagine copying a bitmap to the screen where both the bitmap and the screen are planar. If the starting coordinates of the destination was an exact multiple of eight, then the bitmap could be copied via block transfer instructions. On the other hand, if the destination was not a perfect multiple of eight, you had to do a lot of fancy bit shifting to get it onto the screen.

这是CS_BYTEALIGNCLIENT窗口类样式的来源。使用
这个样式集，窗口管理器将尝试将窗口定位为
，客户端矩形的左上角的x坐标位于视频内存的完美字节边界处
。如果你以
1bpp视频模式（单色或16色）运行，这意味着
x坐标是8的倍数。通过以
方式定位窗口，复制到客户端矩形
左上角的位图将通过快速块传输指令进行复制。

This is the source of the CS_BYTEALIGNCLIENT window class style. With this style set, the window manager will try to position the window so that the x-coordinate of the client rectangle's upper left corner sits at a perfect byte boundary of video memory. If you were running at a 1bpp video mode (monochrome or 16 color), this meant that the x-coordinate was a multiple of eight. By positioning the window this way, a bitmap copied to the upper left corner of the client rectangle would be copied via fast block transfer instructions.

如果您查看Windows 95或更早版本的对话框尺寸，
您将发现它们几乎总是32美元宽度的32个DLU的倍数。由于四个水平DLU等于一个平均字符宽度，
你必须保持对话框宽度为32的倍数，以确保
最终对话框大小是8的倍数。

If you look at dialog box dimensions from Windows 95 or earlier, you'll find that they are nearly always a multiple of 32 DLUs in width. Since four horizontal DLUs equal one average character width, you had to keep your dialog width a multiple of 32 to ensure that the final dialog size was a multiple of eight.

保持位图宽度使得它们代表精确的字节边界
对于当天机器上的性能非常重要。通过以下三个主要步骤复制
像素块：
从位图左边缘到第一个
字节边界的细垂直条带，然后是位图的大部分最后一个字节
边界，最后是一个从最后一个字节
边界到右边缘的细垂直条带。如果你睁大眼睛，你可以实际看到这三个绘图阶段。 （就像我说的那样，当天的
机器并不是那么快。）保持字节
对齐并且字节宽度意味着两个薄垂直条带有
零宽度因此可以优化了。

Keeping bitmap widths such that they represented exact byte boundaries was important for performance on the machines of the day. Copying blocks of pixels around was typically performed in three major steps: A thin vertical strip from the left edge of the bitmap to the first byte boundary, then the bulk of the bitmap up to the last byte boundary, and finally a thin vertical strip from the last byte boundary to the right edge. If you kept your eyes open, you could actually see these three stages of drawing occurring. (Like I said, machines of the day weren't all that fast.) Keeping things byte aligned and at byte width meant that the two thin vertical strips had zero width and therefore could be optimized out.

Apple还指定您应该创建16x16,32x32和128x128版本的图标。像Windows一样，操作系统可以容纳其他尺寸，但是你不会得到最好的结果。

Apple also specifies that you should create 16x16, 32x32 and 128x128 versions of your icons. Like Windows, the OS will accomodate other sizes, but you won't get the best results.

来源： http://blogs.msdn.com/b/oldnewthing/archive/2005/08/23/455089.aspx

这篇关于行业标准图标大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！