浅析网页设计应该避免的用图错误

今天所要讲的是浅析网页设计应该避免的用图错误。大图像，图片集和视觉“重”的图像一直是网页设计的一大趋势。为了充分利用这种美感，你一定希望能够确保你的网站上的每个图像都能够跟各种不同分辨率以及大小的显示屏适配，并希望通过图片的使用能够更深入的展示以及推广你的品牌。

不过，很多时候我们的设计师不管是从设计技术层面还是在图像质量层面都存在很多大大小小的认识错误。当你在你的网页设计中使用图像时，你不必陷入这些陷阱之一，在这里，我们将看看有哪些具体的图像使用错误，以及如何纠正或者完全避免它们。

错误一：上传大格式的文件

在打印项目中，全尺寸、大格式的图像可以保证打印结果的保持清晰以及美观(这是必要的)，但是当涉及到网页设计时就会出现问题。大格式的图像载入缓慢，而缓慢的加载时间可能会导致用户放弃继续浏览你的网站。

不幸的是，虽然这是一个很常见的问题，但是还是有很多设计师陷入这种麻烦之中。许多的后台程序允许上传大格式的图像，除非你已经很关注这个问题，否则你可能甚至不知道自己上传图像的大小是多么的不可思议。当然，不同用途的不同图像可能需要不同的规格，你大可参阅你的品牌或网站指南，以了解在你的网站上常见图像尺寸。

当你考虑到图像问题时时，文件类型也很重要。请不要在你的网页设计中使用tiff格式的图片。最常见的和可用的文件格式是PNG，JPG或GIF。

解决方案：对于上述问题，最简单的解决方案是将图像尺寸缩放到框架需要的尺寸大小，并以适当的网页分辨率显示。但还有一点，要尽量考虑到适合的图像尺寸，以便能最佳地利用你的网站和社交分享(例如，Pinterest图像的宽度为600像素，如果要使图像达到最佳的共享效果，则应为该尺寸。)

错误二：忘记裁剪

使用大格式的文件很可能会使一个网站不管是在加载的速度上还是访客的用户体验上都“拖你后腿”，因此你可以试着使用全帧图像隐藏在屏幕上。通过裁剪，有助于展示你希望用户看到的视觉效果，方法是创建一个焦点而不必使用全画幅的图像。

通过图像裁剪也可以创建一个动态不一致的视觉效果堆叠，它们都具有相同的形状和纵横比。使用多种不同的裁剪尺寸和有趣的形状可以为网站设计增添视觉刺激。

解决方案：在上传图像之前将裁剪为适当的大小或尺寸，以便每个图像根据需要呈现。

错误三：忘记缩略图

有许多方法来处理缩略图大小以及调整图像的大小(其中许多方法取决于你的后台功能，所以我们不会争论每个的优点)，但是，你需要记住更新并注意在你的网站设计中最小的图像尺寸。

设计师很经常忘记更具网站的不同内容需要更新缩略图，图片预览和图标的大小。

另一个重大错误是，使用质量很差的缩略图，如果图像质量不好，请不要使用，没有什么比形象更重要的了。

解决方案：确保在图像更改时删除旧的缩略图或预览，并且确保你使用的图标是最新的。

错误四：不可搜索的名称和元数据

数码相机可以在那些不能转换为网站格式的各种元字段中保存大量的图片信息。从图像中剥离这些信息，并替换为可用数据。因为搜索引擎无法读取在你的网页设计中的那些图像的内容，所以要使其变为可被搜索的图像，就必须包含标题，alt标签和周围内容中的描述性词。

错误的图像名称示例：

· XX1.jpg;

· DSCN00023.jpg;

· glasses%and%watch.jpg

一个更好的图像名称包括几个描述性的词，如glasses-and-watch-and-plant.jpg。 图像的alt标签参考应包括类似的描述，例如“计数器眼镜，手表和工厂上的项目”(并确保正确拼写单词)。

解决方案：对所有网站图像和配对图像使用正确的命名方式并与每个视觉相关的内容匹配。图像名称应包括用连字符分隔的描述性词。

错误五：不正确的缩放或伸展

没有什么比一个拉长的脸或缩放比例不正确的图像看起来更奇怪的了。图像的拉伸或非比例缩放在当主题或后端更改发生时，这可能特别常见。当你缩放图像的时候，应该确保图像在每个维度上都能等比例缩放。任何其他的错误操作都会损害照片的完整性。

解决方案：仔细观察所有的缩放比例，并定期检查你的网站。

错误六：未规划不同终端设备的不同大小

响应式设计框架对图像的要求有一些影响。形状或尺寸在不同终端设备上或者通过方向的变化如何是的图像能够继续保持正确已经完整的呈现形式呢?

最常见的做法之一是使用媒体查询来观察网页设计在不同设备上的不同变化。CSS允许将特定样式应用于基于屏幕尺寸的图像上，并在不破坏设计的情况下帮助渲染图像。

解决方案：将媒体查询用于响应框架，并在多个设备上测试图像呈现的效果。

错误七：忽视视网膜屏幕

不久以前，网站设计要求的图片标准为600像素宽，72ppi的参数。但随着科技以及显示设别的发展，这些标准参数需要做重新的调整和定义。

根据你的网站设计的框架，每个图像实际上可以包括为不同屏幕尺寸和分辨率的多个图像，包括视网膜显示所需要的图像(视网膜显示器的分辨率可能因设备而异，但显著高于标准显示器)。

解决方案：包括专门用于视网膜显示的文件和媒体查询。

错误八：过度使用或通用艺术

商业摄影集(网站)可以是一个很好的快速找图的工具，但可能会导致一些意想不到的后果。在太多网站上使用的照片，在视觉效果上不会在用户之间产生太多的交集或者吸引力(你不想让你的网站设计看起来像其他同行的一样)。

如果你打算使用商业摄影，请考虑通过以有趣的方式编辑或使用的这些图像，避免图像看起来像在其他地方看到的东西(查看所有竞争对手或类似网站的图像)。

解决方案：考虑聘请摄影师创建一个专属于你的网站的摄影作品。包括与你的公司或品牌相关的视觉效果，并以正确的方式反映在你的网站设计上。

总结

为网页设计项目选择和创建图像可能是设计过程中最有趣的部分之一。注意每个图像和像素，以确保你的网站能够运行良好。

来源: 丝路教程网

关键字：产品经理, 设计师, 图像

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！