留白的藝术无边界式设计.docVIP

留白的艺术——无边界式设计 增加白色区域 消除这些白边最好的办法就是增加白色区域！减少版面中主要视觉元素与页面边缘的联系。 上方左图，页边边界与图片边界靠得太近，使到两者在视觉上产生联系，所以我们的眼睛就将两者之间的留白区域看成是一条边界。而上图右，我们减少图片的尺寸，使到图片与纸张边界失去联系，边界的视觉效果自然消失。 图片尺寸减少后，现在图片给人的感觉好象是在画廓里那些挂在白色墙壁上的作品一样。留意一点，为了使尺寸缩小后的图片与页面的四个页边距相等，我们对图片进行了一些剪切（比以前更窄），这也使到海岸线的区域更容易引起别人的注意，整个构图也比以前更生动一些。 图片尺寸变小还有一个很大的好处：您可以通过剪切、移动等方式，更具灵活性地设计你的版面。 移动： 将图片移动眼睛视平线的地方，使到整个版面产生三种页边距，这也使到整个版面没有形成边框的感觉。将图片分割成三部分，引导观看的人的眼睛由下至下自然移动。 边界是静态的，而你需要的是运动。上方左示意图，图片处于眼睛视平线的地方，使到视觉效果更自然。整个页面产生了三种不同的页边距，上方较狭窄，左右两边较宽，而下方则最宽阔――这使到边界的感觉荡然无存。将图片垂直分成三部分，使到整张图片都更具活力。 还有另一种处理方法：在一张图片中，你可以挑选出三个（甚至更多）的柱状区域。这种设计非常有趣，你可以通过这种技巧加强图片的表现力，因为你所选择的区域都是最吸引人的地方，当它们相邻放在一起时，这种效果更加强烈。 字体配合： 文字的样式及尺寸与版面的各个元素协调配合，可以使整个设计显得更加和谐统一。相似的元素传达和谐，而对比则传达活力。 纵排的元素加强了垂直运动的感觉 上图左，大写字母所形成的整齐边缘本来与圆形的 LOGO 能够产生优美的对比搭配，但由于版面及图片已经呈矩形，如果文字区域也形成一个粗壮的矩形区域，会极大地压抑 LOGO 的传达。 而上图右，字母呈小写，边缘呈圆形，与圆形 LOGO 非常相似。整体地看， LOGO 与字母形成了四个圆形的区域，这些圆形的边缘与矩形的图片及版面都形成了对比，也使到整个版面形成了两个抢眼的区域。 水平放置： 一张水平放置的图片面积非常大。它的不同方向对比使版面充满活动，但仍然没有感觉到有边界的存在，因为它同样有着不同的页边距及面对面的移动。 图片与页面要和谐共处可以用到其中一个技巧：图片与页面的长宽比例一样，但我们将图片倒转 90 度，并将其缩小到 60% 即可。（上图左） 眼睛视平线：一张标准信纸的面积与一个人的脸部的面积大体差不多。在眼睛视平线的那个区域里放置元素很容易也很自然地成为视觉焦点。（上图中） 在眼睛视平线的地方放置的图片使整个版面形成三个不同的页边距，也使整个版面趋于动态（上图右）。 按上述方法放置的图片，图片及页面的比例一样 创造一个中心焦点： 一行字体加强了水平运动的感觉，使之形成一个具有力量及复杂的焦点。而下方小小的 LOGO 则控制着周围的留白空间。 小即是大这个道理在这里得到了很好的证明。在上图中，图片象在画廓里展览一样挂在一面墙壁上，这使到眼睛的注意力都集中到这里来。整个版面形成两个区域：一个是暗区域，一个是这区域。各个区域的中间都可以说是一个视觉焦点――在上图中，暗区域的中间是标题，而下方亮区域的中间是一个 LOGO 。标题与 LOGO 各自控制着暗浅两个区域，这种简洁的处理手法使整个版面显得更加经典，也使信息更有效传达――比你呼天抢地更能引起别人的注意！ 加强版面 与上一种处理方法相类似的是横幅区域，我们知道，网页上的横幅区域宽与高比例很极端，而这种尺寸与垂直的页面却能形成强有力的版面。 你可能经常会感到惊讶的是，只需截取图片的一小部分――最精髓的部分――却能传达出更多的信息！如上图，我们只截取海岸线、海湾、河口及干、湿地的一部分，就能完全传达出整张图片的信息。 图片当然与页面形成强烈对比：高与宽、肥与瘦、上与下等两者这些对比都非常强烈。 对于一张漂亮的全景图，我们可以轻易地让它装饰版面，但在这个例子中却有点例外，图片右方区域显得很呆滞（圆圈处），简单，大胆切掉它！我们将它切去一半！ 右对齐： 图片与文字右对齐，同时元素也处于眼睛水平线时，大面积的白色区域似乎统领着页面――这种设计动感非常强烈。 图片及文字只占页面的一小部分，却带来了强烈的视觉效果：图片成为了一个强烈的视觉焦点，而大面积的白色区域使整个版面产生很强的流动感。文字与 LOGO 采用灰色，有意退居二线，图片成为舞台上的唯一焦点。 上方小图，右边参差不齐的左边缘避免了形成一些不受欢迎的整齐边缘――过于整齐的边缘只会削弱版面的流动感。 文字应该多大？应该放在哪里？ 文字附近的元素直接决定了文字的大小