画平面图是一门美学,“美”的感受本身是主观的,我们很难定义“美”的具体标准,但画平面图的受众是人,而人对于事物的喜恶感受是有普遍规律可循的,人们普遍认为能被广大观众所欣赏的平面图就是好的设计。因此,在画平面图时,如果能结合审美心理学,将更有利于创造出优秀的平面图作品。本篇文章,让我们一起来看看8条画平面图中常用的基本规则。
1. KISS原则
KISS原则,是「Keep It Simple, Stupid」的缩写,也被称为「懒汉原则」,顾名思义就是提供懒人、傻瓜也会用的,足够简单的设计。要实现 KISS 画平面图原则,就需要考虑删除设计中所有不必要的内容,确保每一个设计元素都围绕着设计目的而服务,要多问问自己:该元素对于用户来说究竟是否必要。
如下图Pixso资源的 Sourdough网页设计入门工具包 所示,一个页面保持一个内容,去除所有不必要的装饰信息,仅保留必要的表格,并给予用户填写提示,便于用户理解和使用。
Pixso资源社区提供大量用户流程图模板资源,便于产品经理、设计师梳理产品逻辑,模拟用户体验,构建出最符合KISS原则的设计。点击进入Pixso资源社区,免费领取用户流程图设计资源。
2. 适度留白
留白也称为负空间,是画平面图中元素与元素之间的空间,这里的空白不是特指白色的,它也可以是彩色背景或纹理,只要不包含设计或内容元素即可。留白可以冲淡过量的信息,缓解浏览者的视觉疲劳,是评判平面图好坏的最重要因素之一。
如下图Pixso资源社区的 Inter UI字体海报 所示,大面积的留白更能突出设计中的主要元素,创造出独特意境。
Pixso「自动布局」可以创建动态画板,以其内容自适应宽度与高度。在画平面图时,可以一键调整图文组合版面、 创建等距的文本详情、创建跨多种版面类型的设计内容,自动布局2.0还新增绝对定位、负间距堆叠、画布控件操作等功能,满足平面图留白的布局需求,点击查看《自动布局使用教程》。
3. 三分法则
三分法则是画平面图中最实用的构图法则之一,所利用的就是人类对于平衡事物与生俱来的偏好心理。所谓三分构图法则,是指将平面图横竖分为均等的三份,并在横竖的交叉处放置一个主体元素,平衡视觉焦点,使画面看起来更舒服自然。
在Pixso中制作三分法则网格的方法很灵活很实用,你可以直接用「钢笔工具」绘制横竖四条直线,也可以利用「布局网格」将行列的数量分别等于3来实现目的,如下图Pixso资源社区的 建筑插画集 所示。
4. 层次结构
如何营造层次感一直是画平面图的热门话题,最直接最容易理解的方法无疑是利用设计中的元素尺寸来构建画面中的层次结构,尺寸较大的元素会尺寸比较小的元素更能吸引注意力,适合传达更强烈的信息。此外,元素的明暗对比、透明度调整等也是构建平面图层次结构的关键。
如下图Pixso资源社区的 50+登录页概念设计 所示,文字尺寸的大小是区分文字层次结构中最常用的方法。 Pixso灵活的画板、图层和蒙版工具可以很好地处理平面图中分层设计的问题,而且Pixso的「图层混合模式」,当两个图层上下叠加时,对上面的图层使用不同的混合模式,可以得到各种不同的效果,获取不同的信息层级呈现方式,Pixso个人版永久免费,不限人数、不限文件,马上试试。
5. 对比
对比并不等同于冲突,在画平面图时,高对比度能提升设计的精细感,最常用的创建对比的方法就是大小和颜色的对比。在设计中使用的颜色越大胆,对比效果就越明显。用对比鲜明的颜色,更有利于强调特定元素。
如下图Pixso资源社区的 日历APP界面设计 所示,将红色物体放在绿色或黑色背景上比将相同的红色物体放在橙色或紫色背景上更能引起注意。
Pixso内置 色板插件,除了能够找到Material Design、Arco Design、Element等大厂色卡外,还可以自定义色板,在设计项目中快速复用,在画平面图时,可以大胆地启用对比度强烈的颜色来突出设计。对于色彩丰富的平面图,搭配使用 多色矢量网格 ,可对闭合路径独立填色,用更少的时间,更简单的步骤,达到更优秀的设计成效,马上试试。
6. 创意字体
在画平面图时,创意字体常用于标题,很少会用于正文,因为创意字体更难阅读。一般规则是,如果文本超过 3 行,就不要使用创意或脚本字体。同时,在画平面图时尽量避免使用超过3种字体,每当需要新添加字体时,最好用不同的尺寸或颜色区别开来。在画平面图时,运用创意字体,会更富有创意和生命力。
如下图Pixso资源社区的 Cyberpunk 赛博朋克海报 所示。安装字体软件,是画平面图的重要模块。想要打造个性化的字体设计,设计师往往需要进行字体软件安装,建议阅读:《字体软件怎么安装?无需等待,即装即用!》,学会快速按照字体软件。
7. 按比例缩放
调整图像大小时,请始终按比例进行。许多初学者在拉伸照片时容易犯错误,有时图像比例不符合要求,必须将图像裁剪到合适的尺寸。在用 Pixso 画平面图时,选择下拉菜单栏的「缩放」工具或者使用快捷键「K」键可以快速等比例调整图片或元素的大小,免费注册Pixso账号,在线开启高效设计。
8. 黄金比例
黄金比例,是指的是把一条线段分为两部分,较短部分与较长部分长度之比,等于较长部分与整体长度之比,可以列出方程:(1-X)/X=X/1,得出答案X的近似值是0.618。金字塔、巴黎圣母院、艾菲尔铁塔、蒙拉丽莎,这些世界闻名的事物都符合黄金比例美学,大量事实已经证实了黄金比例有利于创造令人赏心悦目的美。
本文的设计素材都可以在 Pixso资源社区 中找到,相信通过对上述规则的掌握,你对于画平面图一定有了自己的想法。新一代在线协作画平面图工具Pixso,基于云的矢量设计工具,拥有海量的SVG设计素材和模板,可以满足大部分画平蛮图和交付需求,Windows、macOS、Android甚至是直接在线网页版就可以使用,大大降低了设计入门门槛,还能高效提升设计效率,点击上方注册按钮,直接免费使用Pixso吧。