网格

布局是否清晰明了，对于设计能否让用户感觉简单实在是太重要了！

下方是一个用于搜索火车票的界面。这个表单支持查询，但在用户测试中，参与测试的用户使用它的时候多少会有些踌躇。

之前

通过对表单的分析，我们认为还可以进一步简化它。我们从对齐字段的假象的水平网格线着手，来简化这个表单，同时去掉了标识不同的字段块的背景色，通过空白间距和想象中的网格线来对它们进行对齐和分组。结果，没动一个标签，没多编写一行代码，就得到了一个让人感觉用起来舒服简单的布局。

之后

利用不可见的网格线来对齐界面元素，是吸引用户注意力的一种有效方式。

用户虽然看不见网格，但视觉加上想象会告诉他们“请接着看这里”，根本用不着明亮的颜色或者动态图片。网格越是简单，效果越是明显。

网格中哪怕几个元素没放到位，都会破坏这种网格布局的引导效果。在上述表单的原始设计中，17个字段里只有3个位置不合适，但整体上的网格布局却遭到了严重的破坏。

网格布局也会让人感觉局促和受压制，要解决这个问题，可以设计一个不对称的布局。例如：包含奇数列，或者可以将少量元素设计成跨在两列或三列上。感兴趣的小伙伴可以看看《连线》杂志或《卫报》的网站，这两个站点实际上就是基于一个整齐不对称的网格设计的。

想要了解“网格中元素的大小与位置如何设计”，请关注下篇文章哦～