怎样用留白制作简洁有效的页面


有时最有用的规划窍门,即是啥也没有。而且它的目的性十分强。


留白是最有力的规划素材之一。它使得文字明晰易读,将注意力吸引至某有些,而且有助于打造全体空气。


留白的基本要素


留白和负空间的术语这些年被替换运用,它们指画布(或数码设备屏幕)上不包括任何内容的空间。简而言之,留白即是空白。


但是留白空间不一定要是白色的。这个术语指的是任何与布景一样的空间。所以它可所以白色、黑色,甚至包括奇妙的纹路。


空间是一切规划的重要构成。字间距和行间距决议了文字的易读性。如果文字靠的太近或太松散,就很难阅览。要害是找到平衡点。


留白也能把图像和其他元素区别隔。回想一下你见到过的乱七八糟的网站。通常问题就在于元素间没有满足的空间。记得在元素和文字间留下满足的边距,为了愈加专业的外观,大概进一步运用统一的边距。在规划多列网站时也是相同的道理(即便只要主栏和边栏),在笔直元素间参加恰当的空地,就发明出了明显的区别。


留白还有助于引导视野,为规划树立层次,区别啥是要点和要害点。视野会立即移动到被留白围住的元素上。留白为其间的元素增添了冲击力。


留白是发明平衡、和谐的东西,也是安排网站内容的根底。没有留白,怎样为元素分组?怎样找到导航?你又怎样晓得翻滚有更多内容,或是大概从左上往右下阅读?一切这些视觉头绪,都来自于规划中留白的合理运用。


要点运用留白的当地


尽管有用运用留白是任何规划的重要有些,仍是有些当地值得注意。


请看以下清单:

     logo周围

     每个导航按钮或图标周围,并环绕这些元素的“容器”

  在两列文字间,在主体有些与边栏之间

  当你运用视觉差效果时,在每页“滚屏”之间

  在一切不同的元素之间,比方相片和文字之间,或是主体内容与页尾之间


12例留白的有用运用


Adhara:看看左侧的边栏和主体内容的间隔。此处的留白确真实元素之间发明了很棒的区别,并使互相经过自个特有的方法杰出展示。


BeoPlay A9:布景与中心物体构成简练的比照,发明了共同的视觉焦点。与优异的对齐排布结合时,留白还有助于将注意力从图像引导至文字阶段。


Fixate:在一个像这样丰富的规划中,留白告诉你的双眼大概看哪里(还有点击哪里)。


Google:这个搜索引擎现已运用留白很长时刻了,白色的海洋中,它只要一个简略的数据进口和一个logo在。


Jac in a Box:留白在此处的运用是如此抢眼,由于它真的很大面积。将的视野从logo(自身的留白就运用十分完满)吸引到另一个旮旯的主体文字上。


Lapka:这家公司用了一种独具构思的方法,经过阴阳式的留白,将视野吸引到这些小物件上。


Leah Haggar:白色字体在黑色空间上很杰出。精妙的底纹为全体效果增色不少。


Medium:这是一个运用非白色留白的绝佳案例。


Metta Skincare:经过对图像进行规划,留白为文字提供了绝佳的展示位置。


PandaWeb:留白直接将注意力转移至这家公司的事务上。


Square:这个网站将元素间的留白运用得很棒,作为图像和按钮的视觉焦点,也作为分栏的间隙。每个细节处的留白都精心处理过,发明了视觉冲击。


The Mealings:简练、漂亮、舒服。留白——在规划与logo中——成果了这些特色,看起来简练得难以想象


分享 :