如何让我们的设计更有“品质感”!


前言

提到“品质感”我们会联想到首饰、手表、电子产品、家具等生活中的实体物品。其实UI界面的设计也是可以使用“品质感”这个词。因为他们都有一个共同点,就是细节。细节决定成败,注重细节的运用可以在同质化严重的产品中,找到自己的特点。


一、卡片

卡片式设计在现阶段的APP产品中已经非常普遍。它最早可以追溯到Palm的webOS操作系统以及微软的Metro UI界面设计语言。之后经过Facebook、Pinterest等产品的带动,以及谷歌推出的Material Design设计规范,卡片式设计便被更加广泛的认知和使用。目前,无论是安卓、iOS,亦或是web网页,都能够看到卡片的形式。

卡片式设计的优点包括:不同屏幕之间可以做到很好的适配及切换、可以有更多的交互操作方式(左右滑动、点击长按、展开收起等)、将不同种类或元素内容很好的区分归纳、利用空间使排版更加有序统一并提升美感。

同时它的缺点也很突出:无法一次性展示大段内容、过多元素会给设备性能造成影响等等。因此,我们在选择卡片设计样式时要结合具体产品具体内容来定夺。

投影所产生的立体感,使得卡片在扁平化设计中十分突出。同时,圆角、配色以及投影风格的各种组合,也使得卡片的设计形式更加丰富多样,以配合各种不同种类产品的设计风格。


二、质感

当我们在设计界面时,简单的填充颜色并不是唯一选择,引入“材质”的概念会是个不错的主意。在Y轴方向进行操作,叠加质感。比如可以参考iOS的毛玻璃,微软的亚克力等材质等。虚化及模糊带来的朦胧感,将内容进行区分的同时,也增加了一种特殊美感。

质感一词包含了许多含义:光影、色泽、肌肤、质地等。但并不是只有实物才包含这些。微软的Fluent Design通过融入物理世界的元素,体验挖掘设计的本源。 其中就包括光线、阴影、动作、深度和纹理等,以一种直观和本能的方式整理信息。

这就给我们的设计带来了不小的启发。我们并不单单只是简单的原型美化工,通过我们的美感以及对现实世界元素的挖掘,融入根本基础的元素,便可以增强我们的设计形式。(①光线-渐变、②阴影+深度-卡片、③纹理-毛玻璃等)


三、留白

目前,留白的设计形式越来越普遍。而留白之所以会发展起来,个人认为主要的原因还是人们的生活节奏过快,对阅读慢慢失去耐心。页面当中的大段文字人们大概率不会读完,包括设计元素也是如此,人们并不一定有耐心去留意欣赏。这也是为什么越来越多的人开始追求简洁。因为简洁就是效率。而留白的使用正好帮助人们去掉了干扰,让用户在第一时间认清主体内容。

因此,我们要善于将文案或者设计元素进行归纳总结。一些比较鸡肋的设计元素能去掉便去掉;设计可以做到锦上添花,但切不可天花乱坠。很多一两句就可以概括出的文案就不要变成长篇大论了。所谓全面的信息全部丢给用户表面上比较保险,但人们并没有耐心和意愿去阅读,反倒会成为一种体验的缺失。

留白并不仅仅是简单的“空”或者是“白色”这么简单。它可以理解为是一种距离、分隔或者是负空间。是设计师的一种排版工具以及重要的设计元素。我们换一种方式就可以看清楚留白的作用。

设计时,并不是只有图片、文字和一些图形。负空间时时刻刻都在左右着我们的设计。所以,善用他们,会成为我们的设计利器。


四、优质图片

优质的图片可以将页面整体视觉的品质感提升一个等级。一张好的图片可以有很多标准,比如清晰度、构图、配色等等。其实,好的图片非常直观,我们可以非常容易的分辨出来。拿乡村爱情的海报举例:风格不同,但哪张图片更有“逼格”,还是非常容易分辨的。

现如今人们的品味以及审美越来越高,也就意味着对直观的图片要求也在提高。清晰有“逼格”的好图,是页面抓住人眼球的关键要素之一。


五、背景

在追求留白与极简风格的现在,往界面中加入背景的做法并不常见。设备端界面的空间十分有限,通常的做法都会去掉无用或多余元素。保持留白,突出核心内容。避免页面杂乱影响观感体验。但这并不是绝对的方式,背景也并不仅仅只是为了华丽炫目。通过结合留白与质感的使用、我们可以加入适当的背景元素,从而达到意想不到的效果。在衬托主体内容的同时,也可以使页面更加饱满不单调。


总结

提升页面“品质”的方法还有很多。插画、动效、三维、字体设计等等。相较于技法与工具,提升我们自身的审美更加关键。通过研究基础理论,以及对大量设计结构搭配细节的思考,我们也可以找到符合自己的特点去完善我们的作品。

推荐阅读更多精彩内容