WY 关于WY

地球人,专注用户体验设计与前端开发。爱读书爱运动爱设计...[更多]

扫描用手机阅读此文
支持Android/iPhone

您的位置:首页 > 记录 > 设计记录

WEB网页尺寸规范

文/ WY 2018-07-21 10:25:53 3135阅读

简单的说明一下:我们经常看见的网页都是居中类型的,做起来容易,只要设置好主内容的宽度然后居中就好。适合门户网站、平台类网站、内容比较多信息量大的站点。

另外一种是布满全屏的网页,又分为自适应和响应式。常见的全屏的后台界面就是自适应的,国外常见这种形式,一般在一些流行的设计产品上多见,科技公司网站和一些高逼格的站点。

设计的时候图标可以做成字体图标或者svg矢量格式的,具体要和前端配合完成,一般遵循文字流式,控件弹性,图片等比缩放这3大适配技巧。

大家都知道在网页中栅格化是很常见,也是很保险的一种做法,良好的运用栅格化是网页设计中的一大利器,但是对于像小编这种对数字不是很敏感的设计师,算间距,算内容大小,简直要命,每次都要算好多次,这款小工具就完美的解决了算数这一大问题。从此对栅格化间距说so easy!

传送门地址:http://grid.guide/

页面简洁清晰,可以看到的直观操作就五个,只要确定好内容总体宽带,分栏数喝颜色,下面就给你分了很多不同的间距的栅格,当然每个栅格都可以下载,拖进ps,拉好参考线即可!

laptop 设备名称
操作系统尺寸 inPPI纵横比宽 x 高 dp宽 x 高 px密度 dpi
MacBookOS X12.022616 : 101280 x 8002304 x 14402.0 xhdpi
MacBook Air 11OS X11.613516 : 91366 x 7681366 x 7681.0 mdpi
MacBook Air 13OS X13.312816 : 101440 x 9001440 x 9001.0 mdpi
MacBook Pro 13OS X13.322716 : 101280 x 8002560 x 16002.0 xhdpi
MacBook Pro 15OS X15.422016 : 101440 x 9002880 x 18002.0 xhdpi
iMac 21.5OS X21.510216 : 91920 x 10801920 x 10801.0 mdpi
iMac 21.5 4KOS X21.521816 : 91920 x 10804096 x 23042.0 xhdpi
iMac 27OS X2710916 : 92560 x 14402560 x 14401.0 mdpi
iMac 27 5KOS X2721816 : 92560 x 14405120 x 28802.0 xhdpi
Surface BookWindows13.52673 : 21500 x 10003000 x 20002.0 xhdpi
Surface ProWindows12.32673 : 21368 x 9122736 x 18242.0 xhdpi
Surface LaptopWindows13.52013 : 21128 x 7522256 x 15042.0 xhdpi
Surface StudioWindows281923 : 22250 x 15004500 x 30002.0 xhdpi
Dell XPS 13Windows13.327616 : 91920 x 10803200 x 18001.5 hdpi
Dell XPS 15Windows15.628016 : 91920 x 10803840 x 21602.0 xhdpi
小米笔记本Air 12.5Windows12.517616 : 91920 x 10801920 x 10801.0 mdpi
小米笔记本Air 13.3Windows13.316616 : 91920 x 10801920 x 10801.0 mdpi
小米笔记本Pro 15.6Windows15.616616 : 91920 x 10801920 x 10801.0 mdpi

本文到此就要告一段落了,如果对你有帮助,能否打赏请我喝杯奶茶呢~ 感谢你的阅读。 

关注微信公众号「木小夭设计」,回复关键字“666”,免费领取一线大厂(BAT)产品的设计规范大礼包等,

muxiaoyao.jpg 

打赏鼓励

如本文对您有帮助,就请我喝杯奶茶吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏