菜单 Close

大屏幕上小图片:扩大从移动到桌面

通过 艾米沙德2017年7月23日

简介:如果图像在小屏幕上运行良好,请考虑它将如何增长并转移以填充更大的显示器上的空间考虑相对屏幕空间和信息密度,密切关注裁剪,缩放和比例显示更多的事情,而不仅仅是更大的事情。


网站通常采用移动优先或以移动为中心的方式进行操作但是优化的网站移动设备并不总能很好地转换为更大的屏幕那些大屏幕平板电脑,笔记本电脑,台式电脑,甚至30英寸的显示器分辨率与4 k这些高端设备的用户也应该得到你的manbetx官方网站手机版的支持。

之前,我们讨论了图像manbetx官方网站手机版ed大屏幕在小屏幕上经常不工作您可能已阅读该文章,并认为“我的移动图像看起来很棒 - 不用担心。”现在是时候看看您的桌面图像是否也很棒。

在小屏幕上运行良好的图像可能不适合大屏幕它们可能与周围的页面元素相比变得太大,强制额外滚动或失去影响当你manbetx官方网站手机版荷兰国际集团(ing)为多个页面大小,您需要考虑方向(水平或垂直),纵横比(比例图像的宽度和高度之间的关系),大小和elemetns小心周围的关系。

常见问题#1:不成比例的缩放

为了调整图像大小以适应更大的屏幕,一些manbetx官方网站手机版只需扩展图像的高度和宽度以填充新容器此过程经常导致图片不成比例的大相对于周围的页面元素(标题,文字或导航)它会导致三个主要问题:

  • 信息密度:许多图像的信息值不够高,无法证明在放大屏幕时占用的空间这浪费的屏幕空间可以用来节目更多的东西而不仅仅是更大的事情.
  • 滚动:要通过图像并查看某些内容,用户需要滚动图像成为规避,提高的一个障碍互动成本.
  • 图像质量差:较大尺寸的低分辨率图像可能会变得像素化或模糊一般来说,图像的任何弱点变得更加明显,就会变得更大。
在Chipotle的移动视图(左)中,有关新鲜食材的图像出现在促销活动上方同一图像填满桌面上的整个屏幕(右)因此,矛盾的是,大屏幕用户看到的信息少于移动用户图像大小的增加并不会增加桌面图像的价值。
On the American Lung Association’s site, 3 icons and text links from the mobile homepage (left)  are scaled up to occupy an entire desktop screen (right).

常见问题#2:裁剪

为了防止图像变得不成比例,一些manbetx官方网站手机版约束图像的高度,只扩大图像的宽度这种方法可以有效地垂直裁剪图像,并且可以在不滚动的情况下保持更多项目在屏幕上可见,但是生成的图像可以如果裁剪不好就失去意义.

VisitSeattle.com的移动视图包括水的照片,一艘帆船,城市天际线随着页面宽度为一个更大的和更广泛的监控、城市天际线消失以及船的顶部和底部。

常见问题#3:重新定位

随着图像的发展以适应大屏幕,在屏幕上与其他元素的关系可能改变或转移图片可能会变得奇怪,或者可能与其他页面元素重叠,失去意义或有效性.

在移动的Fatherly.com(左),前面的图片显示了一个人一台笔记本电脑和一个小男孩在他旁边在桌面视图(右)中,男孩消失在文本后面,笔记本电脑被遮挡,焦点转移到男人的头上,而不是照片中两个人之间的关系结果,照片不再传达文章的重点:现在它看起来像一个人工作,而不是一个父亲需要专注于他的儿子。

解决方案1:规模和作物

注意的细节缩放和裁剪图像在大多数情况下,图像不应简单地向上扩展以填充更大的屏幕仅限制高度可能会导致图像裁剪不良代替,结合缩放和裁剪确保适当的画面仍然大小,保留它的意义,而适合适当的屏幕尺寸。

例如,当屏幕变宽,规模图像宽度,高度,或两者兼而有之,但停止前的图像变得不成比例的大的或难以理解然后,裁剪图像,使其在新的屏幕尺寸中工作,并开始展开此版本,直到图像需要调整宽度,高度和高宽比会随着页面的尺寸的变化而变化。

随着屏幕尺寸的增加,图像猕猴桃箱的网站第一次变得更为惊人,同时保留其高度manbetx官方网站手机版,然后转移到一个不同的裁剪图像横向扩大屏幕宽度增加,同时保留高度当该图像由于顶部和底部的裁剪而失去意义时,图像的高度略微增加以保持图像的含义并最大化较大屏幕上的空间。

视频显示图像的变化KiwiCrate网站与屏幕宽度增加(0:12)

解决方案#2:使用以不同宽高比和尺寸工作的图像

If your site must work across multiple screen sizes,manbetx官方网站手机版与各种尺寸选择图像,在不同的设备上工作得很好问以下问题:

  • 图像在各种宽高比下都能看起来很好吗?
  • 图像是否足够大,可以从顶部,底部或侧面修剪而不会显着影响图像的含义?
  • 图像中是否有中心功能,当屏幕尺寸发生变化时需要保持可见?
  • 每个屏幕大小都需要图像:它是否增加了足够的价值来证明manbetx官方网站手机版所需的空间?
Blue Apron使用的图像可以在不同的尺寸和宽高比下工作移动图像(左)缩放到最大高度,然后扩展宽度以在屏幕尺寸增加时曝光更多图片(右)。
房客旅游形象做一个全景图像在宽屏显示器,短和宽的宽高比(右,表示在橙色底图片),垂直的图像在小屏幕上,用一个比例还要高,窄(左,表示红色的底部图片)。

解决# 3:设置一个最大尺寸的图像

可能存在一个维度,超出该维度,您的图像将无法正常工作在这种情况下,你可以限制图像大小在页面上缩放和裁剪,直到图像失去意义或质量,然后用白色空间或可填充更宽屏幕监视器的内容对其进行构图。

Marriott.com图像的大小增加到最大尺寸,然后添加灰色边界周围的页面(注意使用的图像移动manbetx官方网站手机版裁剪为移动得很糟糕,显示所有的细节,使观众认识到华盛顿特区)。

解决方案# 4:交换或删除图片

另一种选择是为不同的屏幕大小选择不同的图像, picking images that work well for specific aspect ratios or ranges of height and width.  In fact, you may find that at some screen sizes, the manbetx官方网站手机版 is more effective without an image at all.

例如,上面所示的图像在万豪酒店网站运行良好在水平方向宽比例,但没有翻译好了在移动网站图片裁剪的一个广场这个网站可以使用,例如,一个美国的形象国会大厦圆顶,或适合小方形容器的任何其他代表性图像。

委托多张照片通常太贵了,但如果您有丰富的图像可供选择,请使用不同的照片,如果您能找到在不同屏幕尺寸条件下具有最佳效果的照片。

不要只为断点设计

设计师和开发人员可以忽略这里描述的问题,如果他们只在一台显示器上查看他们的manbetx官方网站手机版,或者只在具有目标断点的设备上查看看看你的manbetx官方网站手机版在中间尺寸或宽屏显示器上的样子虽然您可能正在针对某些设备类型进行优化,但您还需要创建一个可用且有意义的manbetx官方网站手机版,无论设备或屏幕大小如何。

在我们的为期一天的课程中了解更多信息针对不同屏幕尺寸的manbetx官方网站手机版.