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

前言

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

一、卡片

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

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

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

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

二、质感

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

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

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

三、留白

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

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

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

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

四、优质图片

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

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

五、背景

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

总结

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