网页版面视觉元素 UI设计中的视觉流程，你知道几个？（上）

UI设计空间站

公众号ID：ui-space

关注

点击这里1000款精致设计笔刷等你来领~

平面设计是一门交叉学科，版式设计是平面设计的重要构成个别，而版式设计中的视觉流程是进行版式设计的方法和根据。版式设计的视觉流程是人在观看过后的视觉线路走向。根据人的生理特征和心理特质，人们在观看时一般是从第一感到印象到详细信息传达、最后形成整体印象的过程。

视觉流程表现方式

视觉流程在运动的过程中受诸多外部原因和主观诱因的妨碍，会造成诸多运动方式。

结合版面设计的特征，主要有如下几个方面：

线性

线性视觉流程是最常用、最基本的视觉流程样式。文本阅读的形式就是以线性视觉流程的方式展现的。主要的线性视觉流程有线段、斜线、曲线3种方式。直线视觉流程在版面中引导人的视野做直线的触觉流动，具有直观、确定、一目了然的特征。斜线视觉流程动态性很强，具有较强的个性特点，常用在体现突出动态或个性化的设计中。

斜线视觉流程稳定性相对较多，要留意场景的整体均衡。曲线视觉流程是具有韵律感的触觉流程方式，曲线在版面中的融会贯通让版面舒畅、自然、饱满且富有张力，如“S”曲线形态的视觉流程使元素上下左右运动，能在有限的空间中穿插回旋，具有一定的张力。

导向

在设计中使用能抑制观者视野的诱导性元素，令观者的视野能借助诱导按照设计师的布局进行一定顺序的运动，将所有元素从主到次、从大到小组成一个有机整体，形成一个重点突显、流程动感的触觉组合。诱导性的元素有众多种，常见的有文字导向，利用文字的排列组合后的线、面特征来鼓励视觉走向；肢体导向，利用人体的四肢语言或是手部动作的方向性，来鼓励视觉走向；标示导向，利用符号箭头的方向性特征，将视野引向主体；形象导向，利用很多的事物形象特点来鼓励视线，如人以及动物的视线、钟表的指针等。

反复

反复视觉流程是指因为同样或者相同元素的规律发生，而形成的一种有秩序和节奏的运动。反复视觉流程构成的版面动感性差，通过元素的处理方法能形成很强的节奏和秩序的美感，吸引视线。

散点

散点视觉流程使用了后现代的视觉表现中的一些特征，自由、随意、新颖。散点视觉流程指版面中的视觉元素，包括图形、文字等视觉元素及其各元素之间的构成关系不囿于于规则、严谨的理智编排模式，而是注重理性、自由、随意、分散的排列组合状态。散点视觉流程在初始感官上给我们以散乱的体会，信息获取过程不如其它视觉流程顺畅，但是即使稍加观察我们都会看到散点的视觉流程一般是“形散而神凝”。在对待元素的处理方法、版面的整体协调、主次的关系处理、色彩的借助等方面，都非常刻意精心地遵守着一定的规则网页版面视觉元素，这就使散点视觉流程的体现在灵活、感性、生动之余，不乏理性的雕刻。

复向

复向视觉流程是从场景的中心点开始，产生向心或离心等方式的触觉运动，画面中心突出、主题确立，视觉冲击力非常强，常用在对某一事物进行提出设计。

视觉流程的设计方法

版式设计是设计的重要构成个别，它遵守一定的思维心理学和审美原则。通过设计时尚和设计原理构成画面，能更好地推动信息传达和视觉效果传达。

版式的视觉流程在详细设计中要遵守下列方法：

科学性

版式设计的视觉流程以人眼的生理结构和听觉心理感知特点为根据，因此版式的视觉流程是符合通常视觉原理和大众认知基础的。根据视觉流程的特征，版式在设计上按照从左到右、从上到下的方法，因此设计中要选用最佳的视觉区域，设计符合科学理性的视觉流程。

识别性

在版式视觉流程设计的过程中，最终目的是保障设计内容被更精确、快捷地辨识。识别性在触觉流程的设计中关系重大，设计行为都必须围绕着识别性这个主题而展开。根据设计内容的应该网页版面视觉元素，对视觉元素进行处理，如区别主次关系进行设计、通过颜色区分元素、加强设计的整体性等，都是推动画面识别性的设计技巧。视觉传达设计的涵义与方式也不是一成不变的，无论采取哪种视觉表达方式，受众都需要通过视觉认知来接受信息。

合理性

合理性是指在版式视觉流程的设计中根据设计原理合理地展开视觉流程的引导。观者的浏览过程是动态的、互动的，观者获得信息的过程不尽相似，合理地处理视觉流程，让各级版式都拥有设计清晰、直观的表达，便于受众在各类情况下阅读浏览。

版面视觉流程中的差异性

版式设计同特色媒介版面设计仍然都是在必定的空间中进行视觉元素的组织，但鉴于两者在最后显示模式上存在差异，因此版面在详细的视觉流程表现中必定会受媒介变化的妨碍。对观者而言，视觉流程的差异还受设计元素动静变化的影响。

一般来讲，事物要造成人留意应具有两方面的特征：

①有刺激物发生。

在此处的动态元素，如倒置，斜置等具有引发人无意注意的元素放置，即观者事先没有目的在不知不觉中能够注意到的。这是一种动态的吸引，可以改变人的视觉流程，能较先吸引人的视野。因此，在一些版式上，常将一些重点信息进行动态化处理以引来人的第一注意力。

②视觉主体的意向性。

观者成为视觉主体，更易于受动态元素的吸引。动态元素的视觉形象力非常显著，受人注意的程度要高于静态元素。因此，我们可以看见，新的媒介赋予了设计以更丰富的内容，版式的视觉流程同特色设计相非常增加了动态效果对其的妨碍，使观者能根据设计师给出的特定视觉线路进行视觉移动，而静态元素较之动态元素，其视觉吸引力相对较弱。

视觉是一种主动性很强的觉得形式，视觉流程的设计直接关系着版式构成并妨碍到设计信息传达的效果；在设计中组织视觉元素进行视觉表现，使设计元素组织超过对观者视觉线路的鼓励，能更好地发挥设计元素的功能。

注：本文图文来源于网络，版权归原作者所有，侵删！

——END——

本周热文

—

【福利】精选1000款PS和AI笔刷免费分享！

你的简历没人回？看看是不是踩了很多雷

OMG!UI设计师竟然是个卧底警察！

干货总结▏16个有效的UX写作方法