认识达内从这里开始

排版是UI设计师在学习网页设计的时候需要重点掌握的设计原则之一，而今天我们就一起来了解一下，网页设计中排版原则都有哪些类型。

1.邻近性原则

物体之间的相对距离会影响我们认知它们的关系。相互靠近的元素被认为是一组，那些距离较远的则自动划分为组外。整体看来，距离近的关联性更紧密。

下面左图中的圆相互之间在水平方向比垂直距离近，那样我们看到了4排圆点，而右图看成2列。

如何应用于UI设计：

邻近性原则，在网页端或移动端的排版布局中有非常广泛的应用。设计师应用此原则，调整距离或者用分割线等来分开不同设计模式的构建。此原理应用在设计中，界面层级好，视觉清晰。

按照原理，我们会将内容相似的元素位置放置得更接近，在UI设计中的卡片化设计，列表组合等信息整合设计都会应用到此原理。并且不同内容之间我们使用分割线，留白，卡片区分等方式来使不同的内容区分更为明显。

2.相似性原则

格式塔原理中的相似性通常和邻近性原则一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则：有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式，并且将它们与特定含义或者功能联系在一起。

如何应用于UI设计：

利用颜色，形状，大小，方向，以及纹理等视觉元素，组成相近的样式。UI设计规范中的控件组合成的组件，大部分都会使用到相似性原则，统一视觉样式，来表达统一的功能性。

3.封闭性

人的眼睛在观看时，大脑并不是在一开始就区分各个单一的组成部分，而是将各个部分组合起来，使之成为一个更容易理解的统一体。这个统一体是我们日常生活中常见的形象，如正方形、圆形、三角形等，让用户容易理解。

如何应用于UI设计：

这个原则也非常适用于图形用户界面的图标设计或界面设计中

4.连续性原则

人的视觉具备一种运动的惯性，会追随一个方向的延伸，以便把元素连接在一起成为一个整体。下图是两个交叉的圆弧轨迹，人们往往倾向于使视觉流跟随着相同颜色的轨迹，而不会被干扰，我们能够感知这是两条弧线。

如何应用于UI设计：

连续性目前在app产品中应用非常广泛。比如在电商产品中banner区域的左右滑动交互模块，滑动组件和进度条展示。

主要应用范围如下：

1导航栏中的连续性设计

2卡片模块中的连续性设计

3模块的连续性设计

5.主体/背景

我们的大脑将视觉区域分为主体和背景2个部分。这个特征有利于我们对重要信息和次要信息的感知。

主体和背景的区别可以从以下两个方面来控制：

1场景大小：我们倾向于将处于大场景中的中间小区域部分视为主体，而大场景视为背景;

2层级关系：如果在同一个平面中，我们倾向于将处于视觉一层级的物体视为主体。

如何应用于UI设计：

此原则可以帮助设计师在设计界面的过程中抓住用户注意力，并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示，以及弱化背景从而突出内容等界面中都有运用到此原则。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。