10大优秀网页设计范例赏析:Web留白设计都有哪些学问?

发布日期:2018-03-28
浏览次数:180
  
 
网站的留白,又称"负空间",主要是指不包含任何内容的空间。换句话说,留白就是空白,不过留白并不一定是白色的,它可以是彩色、黑色甚至带有微妙的纹理。在《少即是多-怎样在响应式网站中运用"留白"艺术?》中小飞就对留白的定义、好处等进行过详细的介绍,这里就不一一重复了。虽说留白设计看上去很简单,但在实际操作时往往却并不轻松。所以今天小飞就带来了留白设计的10个优秀范例,希望大家可以从中积累一些经验。
 
 
 

Bear Creek Distillery

Bear Creek Distillery是一家酿酒厂商,它在网站主页上使用了风格鲜明的图片和粗体显眼的字体,以帮助自身从同类网站中脱颖而出。除此以外,它还应用了留白设计。除了图片、标题、文本以外,整个页面上没有任何其他元素,这能避免用户为其他不必要的元素所干扰,让网站核心信息传递得更加精准、直接。
 
 
 

Squarespace

Squarespace是国外知名的自助建站平台,一直以高品质的原创引领着网页设计的潮流趋势(起飞页正不断向它看齐)。它在网站中使用了留白以带来风格简洁、艺术感极强的UI界面,当然,元素的减少并没有影响用户对网站信息的获取。下图就是它的网站界面,元素虽少,但都能尽其用:搜索框能让用户轻松找到自己想要的信息;炫酷的文案设计可以彰显品牌的调性;动画图片能让整个网站更显生机与活力;CTA按钮的黑色背景与网站整体柔和配色形成反差,帮助增强文本可读性;免费试用的简短文案可以有效吸引用户进行尝试。
 
 
 

Progressive Punctuation

Progressive Punctuation 是一个标点符号作品集的展示网站,网站创始人相信标点符号可以帮助我们更好的完成线上沟通与交流。不过由于这些标点符号并不常见,也不像文字或图片那样规范,为了让访客对它们有最直观、清晰的认识,设计师巧妙地使用留白来控制符号之间的间距。
 
 
 

Apple

说到留白设计,Apple绝对不能不提。尽管Apple并不是在网页中使用留白的先驱,但它却在自家的产品和网页上将这一技巧应用得淋漓尽致。以下图为例,页面中除了产品图片,就只剩下产品名称、产品标语了。页面视觉焦点十分清晰,用户可以迅速get到页面想要传递出的信息。
 
 
 

Tinker

Tinker也是一样,它是一个手表网站,在这用户可以自定义手表的表盘大小、颜色、表带颜色等,然后进行点击购买。而为了突出网站的主题:手表,Tinker 的页面上根本没有其他元素,只有手表不同组件的图片,外加一些可自定义的设置选项(比如表盘大小:34mm、38mm、42mm)。这里留白的应用可以让用户对网站核心元素(手表)留下更加深刻的印象。
 
 
 

The Pisacco Chronicle

The Pisacco Chronicle 是一个专注于美食、电影和艺术的线上杂志,它的留白设计很是值得借鉴。品牌标识、导航菜单、关于我们等元素均匀的分布在页面四周,中间是一个可点击进行上下滚动的轮播图。轮播图片和标题可以快速抓住用户的实现,这主要是因为页面上存有大片空白,没有那么多可让人注意到的干扰元素。如果网站内容很多的话,那么各个元素的清晰直观就很难保证了。
 
 
 

Seedlip

Seedlip同样是一家酿酒厂商,不过他们主推无酒精烈酒。由于这类产品的概念很是新颖,Seedlip直接通过大量的留白和简短的文案(世界上第一款蒸馏型无酒精烈酒)来突出自己的独特销售卖点。而为了强调品牌的质感,设计师还在主页上使用了巴洛克风格浓郁的华丽 Logo,用户在打开页面时一眼就可以注意到,这也得归功于留白的使用。
 
 
 

Pocket Penguins

企鹅出版社一直以出色的封面设计(加粗的文本、大胆的配色)而闻名。Pocket Penguins 这个网站也完美延续了这一点,而丰富的留白正好可以与大胆的配色形成对比,让网站品牌和特色更加突出。
 
 
 

Sweetgreen

将留白与色彩丰富的图片搭配起来使用,是吸引用户的一种有效方式,特别是在你想要突出网站产品时。Sweetgreen就很好的贯彻了这一点,由于这是一个售卖沙拉的网站,各种诱人的沙拉图片就是网站的强有力武器,而留白常常用来烘托这些图片,让它们更易为用户所注意到。
 
 
 

Jomor Design

Jomor Design是一家设计公司,它的设计十分简洁。当你打开它的主页时,主要信息只有一条显眼的标语:I wanna help you kick ass,简单直接,一目了然。而如果这条标语和图片或其他元素结合起来使用,可能就很少有人能够记住它了,这就是留白的意义所在。
 
 
从上面这些示例中我们可以看出,巧妙使用留白不仅可以让页面设计更有质感,还能构建清晰的视觉层次,帮助传递核心信息。另外,它还常与各种流行设计趋势结合使用,用来创造风格独特的网站设计。赶紧想想怎样在自己的网站中使用留白设计吧!

登录后即可发表评论,立即登录.