1. 主页 > 行业资讯 > 交互设计 >

互动KASH系列版式设计的四大原则

这一期的互动设计KASH系列共有四个布局设计原则。

古人云:“人皆有爱美之心。”更有甚者,在如今“绝代佳人”的互联网环境下,产品的“面值”显然已经成为产品建设过程中的一个关键因素。

对于交互设计师或产品经理来说,虽然我们并不直接对产品的价值负责,但我们工作的可交付成果——交互文档/原型图,很大程度上需要一定的价值和良好的布局设计能力,才能保证产品目标和交互方案上下游高效准确的传递。

所以,我从“版面设计”的角度,分享一下版面设计的四大原则和视觉动态线,帮助你构建视觉设计的基础知识框架。

布局设计的黄金法则

版面设计的目的是为了更好地向用户表达信息,以更好的视觉效果呈现信息。版面设计原理书中有一本经典的书——《为大家设计的书》。

书中介绍的四大布局设计原则(对齐、重复、对比、亲昵)服务于上述目的,好的设计往往是因为满足了这四大黄金原则。

排列

页面上不能随意放置任何元素。每一项都应该与页面上的内容有一些视觉上的联系。不同的元素之间的距离可能不同,因此可以通过对不同的元素进行某种对齐来对它们进行排序。

虽然这些独立的元素在页面上的物理位置可能彼此不靠近,但通过适当的放置,它们可以看起来是相关的、相关的,并与其他信息相统一。一个漂亮的设计,无论一开始看起来多么杂乱无章,总能找出其中的契合点。

左边名片上的元素似乎是随意抛出的,导致任何一个元素都显得与名片上的其他元素无关。

当我们将所有元素向右移动并以相同的方式对齐时,信息会立即更有组织性。

虽然在包含很多信息元素的信息列表页面中,我们可以找到很多对齐方法,而这些对齐方法的结合可以使页面元素更加有序高效地传递给用户。比如上图的知乎APP首页。

重复

设计元素的表达需要在整个页面中重复。重复元素可以是粗字体、粗线、某个项目符号、颜色、设计元素、某个格式、空之间的关系等。

重复有助于组织信息,可以帮助读者浏览各种页面。它有助于统一设计的各个部分。即使在只有一页的文档中,重复的元素也可以创建连续性并“有序地将页面组织在一起”。

在天猫APP >中:我的页面、我的双11、我的订单属于当前页面信息架构的第一层,所以逻辑上并置,导致UI层面的表达极其相似和“重复”;同时,我的双11中包含的信息元素和我的顺序在逻辑上是并列的,所以UI表达也遵循了重复的原则。

对比

页面上的不同元素之间应该有对比,以帮助读者快速捕捉不同重要性的信息。对比对于信息的组织是非常重要的,读者一看到文件的内容就能立刻理解。要增加有趣的对比,最简单的方法就是实现字体对比,也可以使用线条、颜色、元素之间的间隔、材质等。

只是一个页面案例。在双11的产品目标下,本页需要突出双11的主题。所以我的双11下的功能图标和我的订单的UI风格都有所区分,双11下的功能图标比我的订单更有特色,更好的传达了功能按钮入口和优惠活动信息背后的信息。

关闭

亲密原则:把相关的物品组织在一起,移动这些物品使它们的物理位置相互靠近,这样相关的物品就会被视为一个凝聚成一个的群体,而不是一堆不相关的碎片。

我们来看看上面的名片盒。当你看左边的名片时,你有没有停下来五次?

这张名片上有五个独立的项目。从哪里开始的?可能是从中间,因为中间短句字体最厚。接下来看什么?

当我们将同类信息紧密地组织在一起时,阅读和理解信息就会更容易、更有效。

亲密的想法并不是说一切都要更亲密,它的真正含义是,如果某些要素在认识上是相关的,或者彼此之间有一定的关系,那么这些要素在视觉上也应该是相关的。

在微信阅读APP的发现页面上,在“好友正在阅读”卡的UI表现形式中,书籍的信息被紧密地组织在最上面,好友/社交群的信息被紧密地组织在最下面。

写在最后

版式设计原理源于平面设计,但仍然适用于互联网产品的UI设计,因为二者设计的目的都是将信息有效、有序、快速地传递给读者和用户。本文分析的版式设计原理的四大原则(对齐、重复、对比、亲密),在实际运用中并不是独立的,而是需要互相配合,方可设计出不错的页面。所以,如果我们多去观察身边的版式设计(杂志、网页、APP…),你会发现这四大原则无处不在。

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://www.ffjianzhan.cn/a/jhsj/721.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息