页面排版设想的4个小技术

无奈的剑侠站

来历：知乎



在平常工作中，很多设想师城市碰到画面整体太乱的题目。乱，就会给人一种混乱无章，甚诚意乱如麻的感受，这也恰恰与设想的目标是相悖的。很多情况下设想的目标在于转达信息，那末「设想画面太乱」就会影响视觉转达的结果。可以有用的避免画面太乱的技能有哪些呢？
一、应用对齐的原则

对齐在设想中算是很根本的常识点，画面显乱很多情况是元素的胡乱摆放，毫无纪律可循，那末公道的应用对齐的手法是避免画面乱很好的处理方式，对齐的进程也就是规整画面元素的进程。比如常见的：


​
左侧给人的感受是混乱无章的、毫无纪律可言，很轻易让用户反感，而右侧虽然在形状上良莠不齐，可是由于应用了对齐的手法，并不会在视觉上显现出很乱的感受，由于不管什么模块，都依照了左对齐的方式摆放，这就起到了很好的规整感化。对齐手法，不管是在笔墨编排、海报设想、页面设想等等方面都是根本的，也是最常用的。实在对齐也能起到很好的串联感化，由于视觉上按某种纪律存在的元素会被用户下认识的以为是具有相关联的。
二、串联视觉元素

画面太乱最多见的缘由之一是由于元素之间没有构成照应，也就是每个元素都是自力的，互无关联性，在用户脑海中没法构成一条完整的视觉链条，而这样的画面相对是轻易显现出乱的感受。那末避免画面太乱常用的技法之一：将原本各自为战的视觉元素串联起来，在视觉上显现出关联性，构成一条不会断开的视觉链条。比如视觉形状的串联：



这里把每一个色块当做画面中的分歧的视觉元素大概栏目，左侧和右侧都应用了对齐的原则，可是从视觉感受上说，相比而言左侧整体感受还是乱，出现乱的缘由在于：每个视觉元素在形状上毫无关联性，都是自力存在的，没法在用户脑海中构成很鲜明的视觉链条。而右侧相比而言削减了很多分歧的视觉形状，这使得整体有了很好的同一，在排列方式上也是左右右左的形式，能在很短的时候内让用户构成一个视觉惯性，这样就很好的避免了画面乱题目标出现，可是也并不是说一定要让元素1:1反复摆放，而是说让每个元素之间相互有关联性，比如：



左侧和右侧视觉元素位置是分歧的，可是左侧给人的感受却是混乱的，由于每个视觉元素之间毫无关联性，而右侧则是连结了同种调性，整体都采用了金属材质的感受，把每个零丁的视觉元素放在一个整体看，又能构成一个完整的视觉链条，最初经过简单改变外形，使得整体不至于由于太同一而显得单调，这就是在同一时找变化，在变化中找视觉联系。
串联视觉元素的方式也可以是色彩上的，经过色彩的照应构成很好的串联感化，比如常见的：



这里要表达的就是尽能够把整体色彩串联起来，而不是毫无关联，色彩的多样性带来的是视觉上的分歧一，这也是为什么配色时只管做到色相不跨越三个的缘由，且只管连结饱和度和明度接近，任何元素的完全自力都有能够带来视觉上的混乱，只管做到有种隐藏纪律在约束视觉元素，且各个自力元素之间终极能构成一个视觉链。再比如，一些 WEB设想大概官网页面设想作品，对于色彩的照应是要求很高的，照应的目标就是为了使得元素与元素之间相互关联，构成视觉上的串联，下面举个例子：



这个页面视觉元素并很多，可是给人的感受是很舒服且不显乱，缘由之一：整体的视觉元素照应很好，围绕动物盆栽，视觉形状上构成了很好的串联感化，每处图片的调性根基连结了分歧，且页面整体既有大面积的色彩照应又有点缀性的小面积照应，可以很直观的将每处视觉元素串联在一路。缘由之二：页面的上中下三个地区别离出现了重色，这也是色彩上照应的一个表示，假如把最初一部分重色改成红色的话，会给人一种头重脚轻的感受，大概把中心重色去掉，就会给人一种视觉链断层的感受。缘由之三：页面整体对齐做的很好，每处元素都不是胡乱摆放的，都有一条隐形的线在约束元素，所以整体给人的感受很舒服且不显乱。
下面再举个例子：



这里一样也是整体图片、色彩调性连结分歧，且上中下也是有很明显的重色照应，在其中心也有一些小块色彩的照应，整体视觉链已经有了很明显的表现。其次在重色地区用了海浪形的外形约束，实在这类海浪外形是欠好把控的，稍微利用不适当就会显乱，可是经过照应的关系，且只是出现在上中下三个地区，在停止活跃版式的同时兼顾了视觉串联，所以给人的感受并稳定，反而版式很活跃。
说了这么多，实在就是要充实把原本自力存在的视觉元素有用的串联起来，让他们相互感化，再有用的连系对齐原则，这也是有用避免画面乱的一种常用手法，串联视觉元素的进程实在就是规整的进程。
三、重心平稳原则

在设想作品中，平稳的重心是最多见的，在之前的文章中也说过，画面中不管是色彩、色块、笔墨等等它们在视觉上都存在着一定的比重，假如重心不稳，就会给人一种视觉天平的偏向，给人一种「站不稳」的感受，这并不是画面乱的绝对身分，由于也有些设想是故意改变画面重心追求视觉上的差别化，所以在做好前两点的条件下，再去斟酌重心，比如前面案例里上中下的色彩照应，同时也起到了很好的平稳重心的感化，很多不错的海报、页面都喜好采用平稳的构图方式，比如：







无关元素的多与少，整体重心的平稳使得画面不会由于视觉比重的缺失显得混乱，而是给人一种稳定、调和的感受，可是重心平稳并不是完全的视觉比重的1:1，而是整体调和即可。
四、做个案例

连系明天说的这些理论，我做了一个简单的网页，由于页面偏长，间接放终极版，然后说下具体思绪：



首先整体每个模块都有严酷的对齐形式，目标是让每处元素的摆放都有据可循，削减可以形成视觉混乱的身分。其次一样采用了上中下重色照应的形式，目标是让页面在视觉上有一定的份量，而不是整体轻飘飘的。最初尽能够的在每一屏都出现橙色，作为帮助色，一样也要做好照应关系，构成一个完整的视觉链条，整体的调性尽能够的连结了分歧，且是重心平稳的构图方式。
总结

当画面感受乱的时辰，可以经过连系明天所说的整体检查一遍，寻觅题目标根源，固然这些手法只是一些常用的，并不是代表全数，要在这些根本上灵活应用，学会总结和扩大，而不是只范围于理论，很多设想理论是为大师供给一个偏向，多体味、多了解、多应用，方式总比困难多。
本文章来历：页面排版设想的4个小技能 学UI设想网-UI设想师交换进修互动平台




原文地址：https://zhuanlan.zhihu.com/p/50350321
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

囘憶若曦囘t

收

晚景入寒窗

叨教动物的那份素材能发我嘛