在日常工作中,我们总能看到一些看似简单、没什么技术含量的设计作品,简单几个图文信息就能做到版式简洁、清爽又很和谐的效果。而轮到自己模仿着做一版时,却发现总有些别扭。这是为什么呢?其实,这看似简单的版式设计都背后蕴藏着重要的版式设计原则,而这细节就是遵循版式设计的四大原则。今天Pixso就给大家讲解一下版式设计的四大原则是什么?以及如何运用才能做出既简洁又和谐的设计作品。一起来看看吧!

1. 亲密性

当人们一眼看到一个组合中有多个元素同时展示时,大脑潜意识里会自动地将相关联的元素组织在一起,这样有利于大脑控制元素空间的秩序和梳理不同元素之间的关系。而在版式设计中,物理位置的接近,也同样意味着它们之间存在着关联。将关联的段落文字、标题信息、图片图形等排列在一起,就会形成一个视觉单元。

亲密性版式设计原则有助于组织关联信息,从而减少画面混乱,能让读者梳理视觉结构,快速理解你的设计中想要传达的信息。

版式设计原则

电商美妆app设计案例 - 免费领取

如Pixso资源社区中的《电商美妆app》案例,设计师会将产品图片归为一类,产品名称与品牌信息靠近摆放且归为一类,再将价格与收藏/加购的信息靠近摆放,归为一类。这样能够帮助用户理清商品信息,从而快速了解产品的特征、介绍和价格信息。

2. 对齐

将画面中相关的元素按照亲密性进行归类很重要,但当将画面中相关联的元素组织在一起后,并不意味着可以随意摆放这些组合。亲密性控制的是元素空间的秩序,而对齐版式设计原则控制的是画面视觉逻辑的秩序。人

们都喜欢看工整对齐、清晰明了的事物。而版式设计中,图文结构清晰、元素对齐不仅能帮助设计师更好地传达信息,也能提高读者的观感体验。常见的对齐形式有左中右对齐,顶部、底部对齐,对齐后的内容集中展示,版式更加有序,画面更具观赏性。

版式设计原则

NIKE产品网页概念设计案例 - 免费领取

如Pixso社区案例《NIKE产品网页概念设计》中,突出放大的鞋子在画面中形成的空间形状是左边的鞋头轻,右边的鞋跟重的,通过将品牌文字、标题文字和购买按钮进行统一的左对齐并摆放在左边,很好地把控了画面的平衡感,不仅突出了产品,也让画面更和谐。

3. 重复

人们除了喜欢整齐划一的事物外,重复的事物也容易让人留下深刻的印象。在版式设计中,将页面中一些基础元素创建组件样式,进行重复使用,有助于创造统一性。包括颜色、形状、材质、空间关键、线宽、字体、大小、图片以及一些几何元素等,将其形成一个视觉整体,增强画面的条理性和整体性。

而在品牌营销中,重复的版式设计原则使用品牌视觉元素有助于读者快速识别您的品牌,从而了解您的业务,这便达到良好的营销效果。

版式设计原则

服饰电商APP设计案例 - 免费领取

如Pixso的《服饰电商APP》案例,设计师将品牌logo重复在不同的页面中展示,并将品牌色充分运用在各个界面中,创造了品牌视觉的统一性,同时也加深了用户对品牌的印象,是不错的品牌营销技巧。

4. 对比

当使用亲密性规划、对齐摆放和重复加深后,在保持版面干净整洁的同时,画面也难免过于呆板枯燥,让读者视觉疲劳。这时利用对比版式设计原则,通过将需要强调的元素进行加粗、放大、加深颜色、添加样式等方式,突出元素层级关系,增强页面效果,吸引读者目光,让版面变得更有可读性,也能帮助读者梳理版式逻辑。

但一个版式中,也不适宜过多层级,限制在3-4个层级并将其组件化处理,将有助于保持版面统一。

版式设计原则

价格定价UI界面案例 - 免费领取

如《价格定价UI界面》案例中,当页面的文字信息都保持一样大小的话,读者需要每个信息点都仔细阅读方能了解不同的价格与套餐。而通过将价格数字放大加粗处理,突出价格信息层级,就能帮助读者清晰地梳理不同价格套餐之间的逻辑性。

在线协作版式设计工具Pixso

相信通过学习4版式设计原则,设计师已经掌握了如何设计出既简洁又高级的作品。但想更高效便捷地运用四大原则做设计,还得搭配一款专业的版式设计工具Pixso。Pixso致力于帮助设计师在设计之路上飞得更高,走得更远!现在点击上方注册Pixso还将免费开启以下设计捷径:

  • 专业的版式设计工具Pixso的智能选择功能可快速调整两个或多个视觉元素之间的排列和间距,帮助设计师更好地实践亲密性原则设计。

  • 当设计师想要实行对齐原则做设计,Pixso还提供自动布局设置功能,帮助设计师快速将图文元素设置成自动随着设计的发展而始终保持对齐,减少反复调整间距的乏味工作。

  • 专业的版式设计工具Pixso可协助设计师将画面元素创建组件和创建样式,降低设计成本,提高工作效率。运用版式设计的重复原则,让版面产生节奏感和韵律美,增强读者印象。

  • Pixso还拥有布局网格功能,为版式设计提供视觉结构,能够帮助设计师对齐画面中的元素,让版面保持逻辑性和统一性。

  • Pixso除了助力设计师运用版式设计四大原则做设计外,其庞大的资源社区提供了海量遵循四大原则的设计案例供设计师借鉴和模仿,同时设计师还可将自己产出的优秀的版式设计上传至社区,分享给其他设计师参考,互相促进提升,快去尝试一下吧!

版式设计工具Pixso