版面设计中的几种留白方法

  • A+
所属分类:经验思维

本文来源: 公众号-MICU设计, 共 1690 字

在设计中,经常会运用到留白。使用留白的极简主义是现在设计的大趋势之一。巧妙的使用留白,可以让用户阅读起来更为轻松,但是用少量的元素和大量的留白做设计还是有些难度的。今天米醋就跟大家一起来说说版面设计中几种留白的方法。

抠图

在处理图片素材的时候,常常会碰到图片背景杂乱,产品不够突出的问题。在设计之前我们可以对素材先进行处理,将产品直接抠出来。利用这种方式可以找到产品的形状,越明确的形状越能反映用户对产品的认知度,同时产品的独特性也能快速明确的表达给用户,用户完全可以在潜意识中第一时间判断出产品的类型和使用特性。

案例分析

见图这是一个曲奇饼干的网站,将主饼干的轮廓勾出来,进行层次感的区分。在产品介绍中采用了侧面的实物抠图,体现出了曲奇饼干最为真实的厚度,然后运用碎落的饼干块虚化拉开产品的层次,而深色的背景与饼干形成强烈的对比,更是直接凸显了实物的形状,让用户一目了然,食欲大增,从而增强了用户的购买欲望。

版面设计中的几种留白方法

曲奇饼干网站的设计

在很多的电商App中也经常采用抠图法去除多余杂乱的信息,利用产品的形状直接体现不同商品的特点,这样的界面让用户阅读起来轻松而又愉悦,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

用抠图法去除多余杂乱的信息

破界法

如果需要展示的信息较多,采用分割区域的方法可以使界面显得整齐干净;而当信息较少时,设计师可以大胆选用“局部出血”的方式,建立边界,再突破它,增加层次感和冲击力,以凸显主题。一定要记得设定好的内容范围是为了让页面显得整体化,而不仅仅是摆放和拼图。

案例分析

网页设计中,有时候会见到“破界法”这种方式,而在手机、平板等UI设计中我们也完全可以直接套用。运用图片的穿插来区分背景和产品或形象的层次感,处理出来的界面会更加富有生命力,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

用图片穿插区分背景

放大需要突出的主形象,把它作为第一焦点展现在用户眼前,有种强烈的“面对面”感受,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

 放大主体形象

另外,破界法还可以很好地拉开背景和主体之间的层次,加强主体的冲击力,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

拉开主体与背景之间的层次

在App中,将图片的局部突出来,能拉开信息的层次,同时也可以将需要突出的图片信息第一时间展示给用户,当然这样也可以方便和引导用户进行点击,如图所示。在App引导图或展示图中经常会运用到这种方式来体现产品的功能层级,从而让单薄的画面丰富起来,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

突出图片局部能拉开信息的层次

版面设计中的几种留白方法

版面设计中的几种留白方法

版面设计中的几种留白方法

突出图片的局部来体现产品的功能层级

另外,设计师还可以利用文字的破图法来体现图片与描述之间的层次关系,如图所示。

版面设计中的几种留白方法

版面设计中的几种留白方法

用文字进行破图

图标设计中,我们也会经常用到破界法。在统一的圆角矩形中,将表达寓意的图形局部超出,可以让图标显得更有空间感和灵活性。采用这种方式设计出来的图标的空间感和层次感都比较强,能使产品形象显得更为突出,如图所示。

版面设计中的几种留白方法

 用破界法设计图标

版面设计中的几种留白方法

版面设计中的几种留白方法

破界法可以突出产品形象

字体设计中,也经常运用到破界法,使设计出来的字体更为生动,而且在破字的过程中还能引发出不同的创意点。在“大美青海0971”字体设计中,将数字9破出了方块,而在“优车尚品”字体设计中,通过品字的破图找到了车的联想,让整个字体设计显得更为贴切灵动。

版面设计中的几种留白方法

用破界法设计字体

局部提取

有时候在我们处理完素材后发现图片比较平常,用户一眼就知道是什么。这个时候,可以考虑保留局部的方式,营造残缺美,增加时尚感。不用担心用户看懂,因为用户的脑补能力是很强的。当然,要用这种方案的话还是需要先与客户或者产品经理及时沟通,因为残缺美不是所有人动能接受的。

案例分析

见图这两张图在设计前先将图片放大,找出产品特点,然后选择能撑起整个页面构图的位置,切除不必要的图形,让图片冲出画面。通过这样处理后,页面显得非常富有张力,激发了用户想看到产品整个形象的欲望,起到产品预热的效果。

版面设计中的几种留白方法

版面设计中的几种留白方法

让图片冲出画面

在Apple Watch的预热官网中,设计师将图片放大,裁取有特点的部位进行展示,引导用户点击观看产品的整体形象,激发了用户去了解产品特性的强烈欲望,如图所示。从版面角度上看,局部放大裁切图片,增加了留白,同时增加了版式率,让整个页面显得更加饱满,而微距的效果会使用户与产品更亲近。

版面设计中的几种留白方法

Apple Watch的预热官网



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: