态度云

网站全屏banner幻灯片制作要遵循“将banner图片主体内容设计到居中960像素位置”这一要点。

目前市场上显示器的尺寸多种多样，常见的有 1920、1680、1600、1440、1366、1360、1280、1152、1024等等。如果粗暴的将设计的全屏图片自适应为100%宽度展示，则图片会被大幅度的压缩或拉伸，失去了原先设计时预定的内容传达效果，如将1920宽度的图片压缩在1024下100%展示的话就等于被压缩了将近3分之1，也就是原先设计的14像素的文字会显示成8像素（人眼识别起来非常吃力）。为了解决这种问题，以达到设计元素的最大化保真，传统网站上的全屏图片展示都会设计成“自适应居中展示”的方式，也就是在不同的分辨率显示器下根据显示器的宽度从图片的两边平均向中心进行裁切，这样就能保证图片中间部分数据的传达效果。所以在设计全屏展示图片的时候务必要注意这个特征，“将banner图片主体内容设计到居中960像素位置”。这样不论在什么分辨率情况下都能很好的传达图片内容了。

除了显示器分辨率的因素外，“将banner图片主体内容设计到居中960像素位置”的另一个更加重要的原因是基于客户体验考虑的。访客在快速浏览网页的时候往往只会最先关注眼睛正前方的内容，确定感兴趣后再进一步操作，如果需要访客转动脑袋从左到右来阅读一张图片以此理解图片要传达的意思，无疑这个设计绝对就是失败的。恰巧绝大部分访客也不愿意这么做。所以，如果一个设计师还固执的要在1920宽度的图片上将内容设计的满满的一整张图都是，这样忽视客户体验的设计师绝对是一个不合格的设计师，至少从网页展示角度来说是这样的。

有设计师就会问了，如果这么说的话设计图片时候 就只能设计居中960位置，其他地方都留白吗？

说到这一点的时候，我们就要注意了，这里说的是“主体内容”居中960像素位置，而不是只设计居中960像素的位置。“主体内容”指的是我们必须要表达给访客，希望访客快速知道这张图片的意思的内容，如人物、文字、标语等。相对于主体内容”之外的“背景元素”则就起到的是装饰作用，在某些窄版的显示器下会被不同程度的裁切掉也没关系了。

再一次强调：一味只按照自己的想法在一直纠结设计了满屏的图片在小屏幕显示器下裁剪掉了部分，而不考虑自己的设计方向方法是否正确，是否有顾及到网站预定好的客户体验的设计师，一定不是一个合格的网页内容设计师。不要把目光只停留在自己工作的显示器上。

为了方便充分理解“主体内容”的概念，这里上传几张图片示意下：

再来2张反面的素材，一直将1920宽度的全屏幻灯图片设计的满满都是内容的设计师好好感受下：