分享此网站可得100G教程,联系小洁领取点击这里给我发消息

网页尺寸规范

尺寸大全 学UI设计 101次浏览 0个评论

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

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

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

网页尺寸规范

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

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

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

网页尺寸规范

网页尺寸规范

laptop 设备名称
操作系统 尺寸 in PPI 纵横比 宽 x 高 dp 宽 x 高 px 密度 dpi
MacBook OS X 12.0 226 16 : 10 1280 x 800 2304 x 1440 2.0 xhdpi
MacBook Air 11 OS X 11.6 135 16 : 9 1366 x 768 1366 x 768 1.0 mdpi
MacBook Air 13 OS X 13.3 128 16 : 10 1440 x 900 1440 x 900 1.0 mdpi
MacBook Pro 13 OS X 13.3 227 16 : 10 1280 x 800 2560 x 1600 2.0 xhdpi
MacBook Pro 15 OS X 15.4 220 16 : 10 1440 x 900 2880 x 1800 2.0 xhdpi
iMac 21.5 OS X 21.5 102 16 : 9 1920 x 1080 1920 x 1080 1.0 mdpi
iMac 21.5 4K OS X 21.5 218 16 : 9 1920 x 1080 4096 x 2304 2.0 xhdpi
iMac 27 OS X 27 109 16 : 9 2560 x 1440 2560 x 1440 1.0 mdpi
iMac 27 5K OS X 27 218 16 : 9 2560 x 1440 5120 x 2880 2.0 xhdpi
Surface Book Windows 13.5 267 3 : 2 1500 x 1000 3000 x 2000 2.0 xhdpi
Surface Pro Windows 12.3 267 3 : 2 1368 x 912 2736 x 1824 2.0 xhdpi
Surface Laptop Windows 13.5 201 3 : 2 1128 x 752 2256 x 1504 2.0 xhdpi
Surface Studio Windows 28 192 3 : 2 2250 x 1500 4500 x 3000 2.0 xhdpi
Dell XPS 13 Windows 13.3 276 16 : 9 1920 x 1080 3200 x 1800 1.5 hdpi
Dell XPS 15 Windows 15.6 280 16 : 9 1920 x 1080 3840 x 2160 2.0 xhdpi
小米笔记本Air 12.5 Windows 12.5 176 16 : 9 1920 x 1080 1920 x 1080 1.0 mdpi
小米笔记本Air 13.3 Windows 13.3 166 16 : 9 1920 x 1080 1920 x 1080 1.0 mdpi
小米笔记本Pro 15.6 Windows 15.6 166 16 : 9 1920 x 1080 1920 x 1080 1.0 mdpi
网页尺寸规范
网页尺寸规范
网页尺寸规范

推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!