SKYUI-设计观点

#设计观点#“案例研究2：Laura Kalbag个人网站布局心得” 在本文中她采用了多种方法进行页面上的布局，找到了一致性与灵活性的完美平衡点。 #SKYUI#

网格线，灵活性以及响应式

第一步：选择合适的字体

在我的网格线设计中第一步往往是选择合适的字体。因为在注重文本内容的个人网站里，文本是应该首先考虑的问题，因此字体相当重要。我理想中的字体是阅读友好，不会显得特别正式，同时看起来清爽、专业，具有可读性。我花钱买了几种不为人所知的字体（每个人都希望与众不同，不是吗），后来我发现了Avenir，他们都说Avenir是唯一具备适用性的网络字体，使用Avenir之后我发现字体的选择变得容易多了。

Avenir 字体

二、字体的基本设置

通过Typecast这个App，我对Avenir字体进行了一些实验，然后我知道我想要多大尺寸的字体了。可以把它的尺寸调大一点，不但凸显字体的特点，而且最大化可阅读性。而且我特别加高了行高，因为圆角Sans serif字体比较占空间。如果行间距太窄，会导致辨认不全和无法正常引导阅读的问题。

在Typecast中测试Avenir字体的设置       

一些基本单元的设置以及垂直浏览的律动感

现在要开始考虑要用什么样的基本单元来打造网格线布局了。我个人倾向于10条因为这样利于计算，这次我挑战了一下自我，我用了12条（6条用于细节上的规划）。另外的理由就是，通过划分出三块区域，让我的工作更协调。为了制造浏览网页时的律动感，我在垂直上设置了很多基本单位用于测量，包括行高、内边距、外边距。

水平网格线

当我开始为我的网站进行网格线设计的时候，我很希望再能多使用下Gridset 这款App。我的内容布局相当灵活，大部分页面都包括了大量的主题文本，与此同时达到了可读性以及无障碍性阅读，而Meta信息的设置要根据视窗(Viewport)中的可用空间来考量。在Gridset这款App中我进行了多种尝试，来让内容表现更具有灵活性。我选择网格线A作为主要的网格线布局方式，因为布局上很多的地方与内容协调。网格线B作为我的第二选择，当A的布局效果不佳时，内容在纵列上能更好的表达时，我会选择B。将两种网格线重叠，这样就保持了整体的一致，同时具备了更多的灵活性。

网格线A、网格线B

A与B的重叠效果

灵活的网格线

现在我可不相信我的网格线系统是完美的。因为不同宽度的视窗上页面的载入情况也不同，可能会导致一些不和谐的效果。

取而代之的，因为我的视窗宽度略小，我删除了最右面纵列的网格线，重新组织了相关的内容，为的是使文章的可读性和一致性更高。这并不是说我是个页面控制狂，而是因为我觉得设计师理应为了页面更好的阅读体验，选择性的做出一些结构上的修改、一些布局上的控制。我觉得通过网格线的布局来提高文章的可读性，比通过在页面上设置断点更方便。

宽版的About Me页面，使用了整套网格线

宽版的Blog页面，使用了整套网格线

普通宽度的About Me页面，网格线有一条纵列稍微向左移动了一点

中等宽度的Blog页面，Meta内容展示于主文本之下，而不是放在左面。

宽度略窄的About Me页面，没有使用网格线结构，但是使用了内边距(padding)

宽度略窄的Blog页面，没有使用网格线结构，但是使用了内边距(padding)。

内边距和外边距。

正如我所使用的垂直的内边距和水平的外边距。我坚持使用多种基本元素，能帮助我在网格线无法正常布局的时候做出一些弥补，防止页面在不同的设备上出现差错。灵活性的布局却缺少一些断点，这在我看来是一种缺憾。

去掉网格线（内容至上）

有以下几条因素促使我去掉网格线以更好的服务内容：Past Project的页面，对于各种宽度的视窗来说，都能保持图像够大，保持信息传达。但是页面的长度根本就不够。而而且图像的长度都不一样，所以我只能大致的保持一致性。

Past Projects 页面去掉了网格线，但是是更忠实于内容的布局。

左对齐网格线

长期以来，我一直都很在意在我的页面布局，一直致力于布局的优化。我的这个网页的设计是左对齐网格线，这就会让我的布局看起来非常的有序并且有组织。

通常情况下，右面的换行处的空白区域，会让一些用户感觉一些突兀感，为了解决这个问题，我通常在右面换行的区域放上我的一些绘图作品。这样就合理的利用了多余的空间

About me 页面右面有很大的区域，放上作品之后能够很好的引导阅读。

调整

整体完工后，我又做了基础调整，为了适应一些屏幕较小设备的浏览需求，我专门为它们稍微调整了网格线，字体大小，行高。我可不想追随那些恶心人的趋势，就是为了支持小屏设备的浏览，把字体缩小到甚至都无法阅读。正如Simon Foster说的那样，响应式设计的核心在于测量、调整。字体我缩小了1/12，行高缩小了1/2。

总结：

通过上文的种种方法，既完成了我个人网站页面的一致性，也达到了布局的高度灵活，同时稍微控制了一下失控的内容来让他们更加有序。关于响应式的灵活度，我会继续进行探索。