网页中的网格.pptxVIP

实例学习网格 Nir;我们先看看原网页，这是韩冬雪做的飞机稿，虽然是飞机稿，但是我们可以看出做的非常棒，很好的展示了JEEP车的 霸气感。这四页中运用的手法很单一，但绝对不简单。本页属于极简网页，满足一下几点：同系深色配色，每页内容 高亮细节文字缩小标题放大，导航只用文字和下划线，全页没有太多的修饰，留白也很充足。网格系统很简单。下面 就从网格系统开始分析整个网页的设计。;先贴出基础网格系统。JEEP的LOGO和最下方的三个小LOGO时对其的。左方网格与右方的网格的比例是1:2。上下对称。 左右间距对称。;;在基础网格的基础上，按比例间距添加新的一个网格系统。文字标题和详细内容的间隔完全统一，对其方式也要统一。 指向作用的小圆圈与其匹配的标题居中。;这样应该明显一点。;这一页有三个要点：1，左方文字部分左对齐与上方导航中的HOME对其???2，下方半透明黑色遮板部分在 版面中起到了显示网格明确层次的作用。3，下方四个汽车按钮的排列也是遵循网格系统的，这部分网格线 木有被我打出来，就留给大家分析吧。;;关于这一页，重点是平衡，基础网格系统中的元素本身是上下平衡，后面添加的这些元素是左右平衡，两个系统叠加 在一起没有冲突各有各的平衡点，此处图片成为了焦点。;;这一页每个元素都在基础网格上，没有附加的新网格系统，文字间距还是遵循整个文字系统的设置。;