简单的说明一下:我们经常看见的网页都是居中类型的,做起来容易,只要设置好主内容的宽度然后居中就好。适合门户网站、平台类网站、内容比较多信息量大的站点。
另外一种是布满全屏的网页,又分为自适应和响应式。常见的全屏的后台界面就是自适应的,国外常见这种形式,一般在一些流行的设计产品上多见,科技公司网站和一些高逼格的站点。
设计的时候图标可以做成字体图标或者svg矢量格式的,具体要和前端配合完成,一般遵循文字流式,控件弹性,图片等比缩放这3大适配技巧。
大家都知道在网页中栅格化是很常见,也是很保险的一种做法,良好的运用栅格化是网页设计中的一大利器,但是对于像小编这种对数字不是很敏感的设计师,算间距,算内容大小,简直要命,每次都要算好多次,这款小工具就完美的解决了算数这一大问题。从此对栅格化间距说so easy!
传送门地址:http://ide/
页面简洁清晰,可以看到的直观操作就五个,只要确定好内容总体宽带,分栏数喝颜色,下面就给你分了很多不同的间距的栅格,当然每个栅格都可以下载,拖进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 |
|