Web网页设计尺寸,到底选哪个?

很多新手设计师都会面对一个问题,Web页面尺寸宽度到底选哪个?

其实答案并不是固定的,可以做成1920,也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。

电脑屏幕尺寸

这是广告公司AdDuplex送出的统计大数据

市面上的电脑屏幕尺寸多种多样,不过大部分都集中在这几种:

1920-1080:目前常用设备中最大的尺寸(Mac 5K屏除外)

1440-900:15寸MacBook Pro为代表,很多UI设计师首选

1366-768:普通的PC电脑

1280-800:13寸MacBook Pro为代表

在以上设备中,13寸和15寸Mac Book,虽然实际分辨率非常大,但由于是Retina屏幕,视觉展示上还属于以上范围。

所以,网站的内容显示宽度大部分都在1200px以内,确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px,不过由于屏幕越来越大,目前比较少。

网页设计尺寸

在了解过电脑屏幕尺寸后,网页设计尺寸(本文专指宽度,高度不限)选哪个也很清楚了:选哪个都不会错。

事实上很多设计师是这么做的:用小于1920的屏幕去设计1920的网页。

这样设计没错,而且是很多培训机构、学校的标准定义:网页设计宽度尺寸是1920。

结合插件定义设计尺寸

但是如果你用了这个神器的Sketch插件,就不会按照之前的结论来设计了。

以前黑客有介绍过。点击查看

设计师在做界面的过程中需要经常查看设计稿,以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸,否则我们的设计尺寸和屏幕尺寸不相同,就会导致预览的界面偏移,需手动调节居中。

如果设计的尺寸和屏幕尺寸保持一致,那么插件预览的效果就会完美,不用每次都要去调节。

总结

本质上网页设计尺寸选哪个都是正确的,关键在于怎么方便、快捷地帮助我们预览、展示设计稿。

在利用sketch插件频繁预览的前提下,黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸,这会节约你很多时间。在设计后台类的界面时,这个方法的优势会更加明显。

最后有一点需要注意,在进行切图的时候,如果遇到全屏的图,需要把切图修改成1920,否则在1920电脑中切图宽度会不足。不过到了切图这一步,就属于设计工作的后期了,我们只需要花点时间把对应切图改成1920即可。



更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网http://www.uihacker.com/

UI黑客论坛http://bbs.uihacker.com/


推荐阅读更多精彩内容

  • 有时候购买的商品,属性很多,想做成表格进行筛选。自然用技术宅的爬虫方式做了 ```python # -*- ...
    超哥__阅读 2,835评论 0 5
  • 作为UI设计师,我们在做web页面的时候会接触到各种各样的屏幕尺寸,最常用的有1920-1080、1440-900...
    UI黑客阅读 1,581评论 0 51
  • “妈,我不想去。我觉得我跟张宏不合适。” 老妈用她那双炯炯有神的眼睛犀利地盯着李湘说道:“李湘,为什么这件事到了你...
    瓦尔登湖的蓝色乡愁阅读 69评论 0 1
  • 微微的风撩拨着静静的海 经不起一丝丝的浪 洒满斜红 把宁静吹散 扩散到海的一角 遥望海天一色 月的倒影 红彤彤一片...
    默若2030阅读 1,121评论 22 75
  • 今天看了一个群友的复盘,水滴石穿, 说明两个问题: 1.第一是方向要正确。始终是在一个点上。 2.第二个是要持...
    快乐番茄阅读 17评论 0 0