网页中的网格ppt课件.pptx

文档介绍：实例学习网格
Nir
学PPT请扫第一个二维码
设计菜鸟进阶请扫第二个二维码
1
我们先看看原网页，这是韩冬雪做的飞机稿，虽然是飞机稿，但是我们可以看出做的非常棒，很好的展示了JEEP车的
霸气感。这四页中运用的手法很单一，但绝对不简单。本页属于极简网页，满足一下几点：同系深色配色，每页内容
高亮细节文字缩小标题放大，导航只用文字和下划线，全页没有太多的修饰，留白也很充足。网格系统很简单。下面
就从网格系统开始分析整个网页的设计。
2
先贴出基础网格系统。JEEP的LOGO和最下方的三个小LOGO时对其的。左方网格与右方的网格的比例是1:2。上下对称。
左右间距对称。
3
4
5
在基础网格的基础上，按比例间距添加新的一个网格系统。文字标题和详细内容的间隔完全统一，对其方式也要统一。
指向作用的小圆圈与其匹配的标题居中。
6
这样应该明显一点。
7
8
这一页有三个要点：1，左方文字部分左对齐与上方导航中的HOME对其。2，下方半透明黑色遮板部分在
版面中起到了显示网格明确层次的作用。3，下方四个汽车按钮的排列也是遵循网格系统的，这部分网格线
木有被我打出来，就留给大家分析吧。
9
10