网页图标设计须知 第1篇
一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：
组件_类别_功能_状态@
举例：tabbar_icon_home_default@（对应中文：标签栏_图标_主页_默认@）
模块特有切图命名规则：
模块_类别_功能_状态@
举例：mail_icon_search_pressed@（对应的中文为：邮件_图标_搜索_默认@）
我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。（要注意，命名中不能含有空格）
网页图标设计须知 第2篇
在进行网页图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。
在如今的APP设计环境当中，一些APP设计大牛都一直强调，设计师要为有品牌意识。那么，在图标的设计中，我们也必须强调“品牌性”，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题的作品，提升自己的平面设计能力。
网页图标设计须知 第3篇
网页图标尺寸的选择
在响应式设计中，选择适当的网页图标尺寸是非常重要的。网页图标是网页设计中的重要组成部分，可以提供用户友好的界面和更好的用户体验。以下是一些关于选择网页图标尺寸的建议：
● 根据设备分辨率选择合适的尺寸：不同设备有不同的屏幕分辨率，因此需要根据设备的分辨率选择合适的网页图标尺寸。对于高分辨率的设备，可以选择较大的网页图标尺寸，以保证图标在高清屏幕上的清晰度和可见性。而对于低分辨率的设备，选择较小的网页图标尺寸可以节省空间并提高加载速度。
考虑图标的显示环境：在选择网页图标尺寸时，需要考虑图标将被显示在哪些环境中。例如，如果图标将被用于移动设备的应用程序中，需要选择适合移动设备屏幕尺寸的图标尺寸。而如果图标将被用于网页上，需要选择适合网页显示的网页图标尺寸。
保持一致性：在设计网页时，保持网页图标尺寸的一致性非常重要。如果在同一个网页中使用了不同尺寸的图标，会给用户带来混乱和不一致的感觉。因此，需要选择一组统一的网页图标尺寸，并在整个网页中保持一致使用。
测试和优化：选择合适的网页图标尺寸后，需要进行测试和优化。通过在不同设备和不同分辨率下测试图标的显示效果，可以发现并解决可能出现的问题。同时，还可以通过优化网页图标的大小和格式，以提高网页的加载速度和性能。
在设计网页时，选择适当的网页图标尺寸非常重要，因为它们可以增强用户体验并提升网页的可用性。以下是一些常见的网页图标尺寸规范：
16x16像素：这是最小的网页图标尺寸规范，通常用于浏览器标签页上的网站图标（也称为favicon）。它们需要清晰可辨认，以便用户可以轻松地找到和识别网站。
32x32像素：这是一种常见的网页图标尺寸规范，通常用于网站上的导航菜单或链接图标。这个尺寸可以提供足够的细节，使图标看起来清晰而不失真。
48x48像素：这个尺寸通常用于网站上的社交媒体网页图标尺寸规范，如Facebook、Twitter和Instagram等。它们需要足够大，以便在各种设备上显示时保持清晰度。
128x128像素：这是一种较大的网页图标尺寸规范，通常用于网站上的应用程序图标或下载按钮。这个尺寸可以提供足够的细节，使图标看起来更加精细和吸引人。
自定义尺寸：除了上述常见的网页图标尺寸规范外，根据具体的设计需求，您还可以选择自定义尺寸的网页图标尺寸。这种情况下，您需要确保图标保持清晰度，并在各种设备上呈现出良好的可读性。
在选择合适的网页图标尺寸时，需要考虑多个因素，包括网页的布局、用户设备的分辨率以及图标在页面中的作用和重要性。
首先，网页的布局是选择网页图标尺寸的重要考虑因素之一。如果网页的布局比较紧凑，空间有限，那么选择较小的网页图标尺寸可能更为合适，以避免图标占据过多的空间。相反，如果网页的布局相对宽敞，空间较为充裕，那么可以选择较大的网页图标尺寸，以增加视觉效果和吸引用户的注意力。
其次，用户设备的分辨率也是选择网页图标尺寸的重要考虑因素之一。不同设备的分辨率各不相同，选择合适的网页图标尺寸可以确保在不同设备上都能够呈现良好的效果。一般来说，对于高分辨率的设备，可以选择较大的网页图标尺寸，以保证图标的清晰度和细节展示；而对于低分辨率的设备，选择较小的网页图标尺寸可以避免图标在屏幕上显得过于模糊或失真。
网页图标设计须知 第4篇
网页图标尺寸对加载速度的影响
根据网页图标尺寸的优化原则，网页图标尺寸的大小直接影响着网页的加载速度。较大的图标文件会增加网页的下载时间，导致用户等待时间过长，降低用户体验。因此，在设计网页图标时，需要注意网页图标尺寸的选择和优化，以提高网页的加载速度。
为了减少网页图标尺寸，可以采用以下优化策略：
使用合适的尺寸：根据网页图标在网页中的实际显示大小，选择合适的尺寸。如果图标只是用作小图标，那么可以选择较小的尺寸，以减少文件大小。
压缩图标文件：使用图像压缩工具对图标文件进行压缩，以减小文件大小。可以采用无损压缩或有损压缩的方式，根据图标的具体情况选择合适的压缩算法。
使用矢量图标：相比于位图图标，矢量图标具有可伸缩性，可以根据需要自由调整大小，而不会影响图标的清晰度。使用矢量图标可以减少文件大小，并且适应不同尺寸的显示设备。
使用矢量图标
矢量图标是一种基于数学描述的图形，它由一系列的线段、曲线和点组成，可以无限缩放而不会失真。与位图图标相比，矢量图标具有较小的文件大小，加载速度更快，并且在不同尺寸的屏幕上显示效果更好。因此，在网页设计中使用矢量图标可以有效优化图标尺寸。
矢量网页图标可以使用矢量图形软件（如）创建，并以矢量图形格式（如SVG）保存。在网页中使用矢量图标时，可以直接将SVG文件嵌入到HTML代码中，或者使用CSS的background-image属性引用SVG文件。
Pixso制作矢量图标操作界面