网页设计之响应式网站图片设计

　　一、考虑长宽比。

　　毫无疑问，桌面的图像浏览体验与移动终端完全不同。对于绝大多数的网站来说，图片的位置是非常相似的，几乎是一样的。设计者的任务是确保当网站随着屏幕和设备发生变化时，在拉伸页面布局的过程中，图像的显示不会变得奇怪和扭曲。

　　此时，始终记住图像的宽度比，并且始终控制宽度比不变。

　　回到桌面网页，大背景或者放在页面顶部的图片看起来很漂亮，但是当它切换到移动终端设备时，第一个屏幕比和方向是不同的，所以它还是那么漂亮?当图像减少时，信息会丢失吗?它会紧张吗?

　　此时，高宽比控制的图像尤为重要。控制不拉伸，原始图像和图像显示部分的长宽比可以尽可能合理地匹配相应的屏幕，所以也不用担心反应断点过多，因为你需要上传图片太多。

　　二、尺寸和比例的一致性。

　　响应式设计不能说断点。为了处理不同的屏幕，我们需要将图像分割成不同的大小和大小，这直接影响到整个设计和开发的设计过程。
许多人只是把照片上传到CMS系统，希望它能以一种完美的方式呈现。这是不现实的。

　　每个图像都应该裁剪到合理的尺寸，并放置在一个理想的位置，以确保它们被呈现为用户期望。后端可能花费大量的时间和精力在这上面，但是努力是值得的。

　　三、使用旋转或画廊。

　　控件和gallery控件是站点上最常见的图像向量，它们还可以更自由地管理图像。特别是当你使用的第三方控件是相对比较知名或适合于广泛的事物时，控制图像元素的繁重工作几乎总是由这些控件接管。

　　但是，我们之前提到过，图像长度比和尺寸控制也应该被注意到，否则页面的显示效果会变得很尴尬。

　　此外，您还需要使用什么样的控件。如果您有一些高质量的图像或需要推荐特定的文章和项目，您需要使用幻灯片控制。如果您有大量的图像要显示，并且您可以缩小并且没有可读性问题，请使用library类的控件来显示它。许多投资组合网站经常使用gallery控件。

　　四、避免使用标题。

　　虽然图片描述可以使你的图片更丰富，但它会直接影响到网页的操作。如果你真的需要它们，试着在其他方面展示它们。

　　在添加了图片的标题属性后，它确实在桌面上有很好的渲染效果，但是小屏幕通常是有问题的。为了不让这些小的可用性问题影响用户体验，尽量避免使用它。这不是一个好交易，因为这是一个小问题，用户不能忍受和离开。

　　六、注意图片和视频。

　　如果站点上有图像和视频多媒体，用户和设计者应该能够接受它，即使很多用户已经习惯了。

　　但是，应该注意的是，即使在同一个页面上，也不要让图像和视频存在于同一个控件或块中。也许它看起来很酷，也许有些图片和视频可以匹配，但是更多的视频和图片很难保持一致，因为总有一部分图片或视频会留下空白和空白。

　　最好的方法是将两者分开，避免媒体属性和大小的差异和差异。这几乎适用于任何设计元素，而图像和视频特别好。

　　七、消除不必要的元素。

　　虽然圆型和库存控制很好，但是很多设计师经常添加很多垃圾内容，最常见的是一堆导航箭头按钮，按钮，文本，甚至行为。这样的事情不胜枚举。

　　一般来说，用户实际上知道如何与控件(例如组播图)进行交互。除非你的设计和我们的认知是如此不同，你必须使用其他的导航方法来引导用户。

　　试着只保留你需要的元素，保持简单，不要提供太多的选择。简单的设计可以提高你的转化率。

　　八、只使用高质量的图片。

　　虽然这一原则是不言自明的，但还是要重复。如果你没有高质量的图片，你最好不要使用它们。现在，高质量高分辨率的图片比以往任何时候都更加必要和重要。用户不会花时间去看一个低质量的网站。每个人的屏幕都已经在视网膜显示屏上，而低质量的图片在这样的屏幕上看起来更困难。因为每个人都在追求最高的视觉效果，高质量的图片绝对是必不可少的。

　　当然，寻找图片也是一项非常关键的技能。

　　九、结论

　　我们都想建立高质量的网站，用户可以操作，并且愿意使用，优秀的图片是他们最重要的元素。

　　当您的站点仍然处于相图绘制时，最好显示各种设备的影响，尽管它看起来有点问题，但是会使后期的担心很多，从长远来看是很值得的。