• 微信

产品设计原型排版阶段常用原则与技巧之亲密性、对齐等方面

时间:2026-03-24作者:admin分类:排版与出版物设计浏览:4评论:0

就产品而言,似乎我们在各个方面都欠缺专业认知,而又仿佛只要存在一个方面的知识盲区,便会在协调多方资源以顺利达成项目这一过程中遭遇阻碍。产品于不同阶段所对接的对象各异,因而在不同阶段所需运用的专业知识以及职场技巧,其差异程度也是全然不同的。

那么,今天便来分享一番在设计原型排版阶段常常会用到的设计原则,即亲密性,以及对齐,还有重复,以及对比,接下来,给大家呈现一张图片。

图片1——原始图片

瞅完图片是啥样的感觉呀,瞧上一眼所获取到的信息,一些经过整理的诗句阐释说明,以及图片;而后呢,就不存在继续看下去的那种想法了。

一、亲密性原则

亲密性原则是这样做的,把业务逻辑相关的那些独立项,让它们的物理位置彼此靠近,进而结果是在用户看起来会成为一个整体,而对于业务逻辑不相关的独立项,则是让它们的物理位置相互远离。

以位置靠近与否来展现独立项之间的关系,有关联的独立项会因其视觉效果而使其靠近,无关联的独立项会因其视觉效果而使其分割。最终达成让【相关性的对象成为一个组织】的目标。以亲密性的设计原则为依据,经过排版的变动,优化后的图片如下。

图片2——利用亲密性原则优化之后的图片

阅毕图片会有怎样的感受呢?匆匆一瞥所获的信息是,就图片1而言,哪怕不去看具体文字内容,读者也能够明确地晓得所有内容被划分成了4个模块,并且每个模块都有与之对应的文字与图片。

二、对齐原则

呈现出的对齐原则所表达的是,页面之上的任意一个独立的项目,都应该与页面里其他的某一个独立的项目,在视觉方面存在着联系。我们的眼睛倾向于观看能够看到的呈现出有序状态的事物,阅读起来会感到舒适,并且能够迅速地获取到相关信息。

达成【让页面整齐且具条理】的目标,是借由各异的对齐方式,或借助各类辅助线来实现的。

对初级设计者而言,尽量仅采用一种对齐方式,即全部左对齐,或全部右对齐,又或者全部居中对齐,来避免多种文本对齐方式混合使用。依据对齐的设计原则,历经排版更改,优化后的图片如下。

亲密性对齐重复对比_设计原型排版原则_学习排版设计

图片3——利用对齐原则优化之后的图片

扫视图片后会有怎样的感觉呢?仅匆匆一瞥获取 的那些信息,相较于图片 2 而言,即便不去仔 细查看具体文字内容,读者也能够明确地知道 总体所有内容被划分成了 4 个模块,并且每个 模块都配有相应的文字与图片,然而它却比图 片 2 阅读起来更让人感到轻松惬意,进而使 用户萌生出深度探究了解的意愿。

三、对比原则&重复原则

对比原则所涉及的是,页面之上不同的独立项之间,应当具备强烈的视觉对比成效,并且能够将不同独立项之间那种有着组织、有着结构层次的关系表达出来。

最终达成这样的目的,即增强页面视觉吸引力之际,更科学地去组织信息结构。对比维度存在诸多,像字体,颜色,大小,形状等之类。要是运用对比,那就得加大对比力度在其中。举例来说,深灰与浅灰色的对比,远不及橙红色和水绿色对比所产生的效果那般好。

某些方面的设计,需要在页面里重复,这就是重复原则,读者能看到的任意方面,都能够当作重复元素,像颜色、符号、字体形式之类。重复能够把一些独立项关联起来,进而达成【统一且增强视觉效果】。

按照对比以及重复的设计原则,历经排版方面的更改,在优化过后呈现出如下的图片。

图片4——利用对比&重复原则优化之后的图片

看罢图片会有怎样的感觉呢,快速浏览一下所获取到的信息,相较于图片 3,读者能够径直晰然地明白其所涵盖的内容,即有关春夏秋冬的诗句、诗句的说明以及诗句所对应的图片,而且读者的关注点一下子就汇聚在了 4 句诗句之上,进发出了用户的阅读兴致。

具体的调整情况是,每个模块之中,诗句与下面的说明存在字体类型方面的对比,存在字体大小方面的对比,存在字体颜色方面的对比,然而,在不同的模块之下,诗句的字体类型以及字体的大小,诗句说明的字体类型以及字体大小,却是重复出现的。

把设计的四大原则亲密性、对齐、对比、重复加以利用,从图1开始一点一点优化直至图4,能够很明显地察觉到,当用户处于阅读舒适状态时,会在极其短暂的时候迅速领会图片所要传达的内容,进而激发了持续阅读的欲望。实际上,在PM设计原型之际,这4大原则常常被大家有意或者无意地运用到。

然而,为了让我们所设计的原型能具更显高端大气之感,且与交互设计师以及 UI 设计师交流起来畅顺无阻,理应于日常工作的沟通里,有意识地依照这 4 大原则开展具体的排版工作。倘若有期望进一步深入探究这 4 大原则的小伙伴,是能够去阅读《写给大家看的设计书》(第 4 版)的。

这次的分享就到此为止啦,期望这下一篇文章能够在诸位人士着手进行设计原型或者其它别的排版工作之际,带来些许的帮助哟~

你可能想看: