今天和大家分享实用页面排版技巧。页面布局看似灵活多变，但排版不能只追求视觉美观，更要兼顾用户阅读体验。
排版的核心逻辑，是用合理的方式梳理页面内容与元素，首要目标就是突出重点、降低阅读门槛。
我整理了一批简单易上手的页面布局小技巧，熟练运用后，能大幅提升你的设计效率。
1.邻近性
邻近性，简单来说就是让具备关联性的页面元素间距更小。在页面布局里，用距离对内容、元素做分组划分，比依靠形状、色彩区分组别更容易被用户感知。
2. 相似性
相似性指利用统一的尺寸、形状、色彩，把视觉特征相近的元素整合归类。同一页面内功能相同的控件，应保持外形一致。
用户会根据视觉相似性预判元素功能，如图中右侧选项均搭配统一单选框，操作辨识度更高，降低用户选择成本。
3. 连续性
目前移动端主流采用可无限下拉加载的 Feed 流布局，页面不存在固定底部。该场景设计需注重内容视觉连续性，借助规范对齐方式，保障用户阅读流畅不割裂。
对齐是排版核心手段，一方面规整页面视觉，另一方面会隐性引导用户浏览路径与阅读次序。F、Z 两种经典视觉动线，便是利用差异化对齐形式，实现视线的定向引导。
4. 闭合性
闭合性是通过排版布局元素自身的边距以及元素间的间距，来减少用户的认知负荷。现在流行的卡片式布局就用到了这个原则，通过将元素整合到一个卡片中，合理安排元素的间距来达到整齐的效果。
比如在“左图右文”的卡片布局中，要考虑图片与标题的间距、标题是否需要和图片顶部对齐、在规定空间内标题如果字数过多怎么折行和省略处理、标题和注释之间的距离和对齐方式等等一系列问题。
看到这里会发现，想要把一个简单的卡片式布局排版好，并不简单，需要考虑到很多的细节。
另外，卡片式的排版不一定必须带有外边框，如果每个卡片中内容排版很整齐，就算不用额外边框，用户也可以清晰地阅读。
5. 共同命运
具有相同概念的元素需要设计为具有相同的行为。当元素沿同一方向移动时，它们被识别为同一级别的元素。比如在手机中有时候会看到横向排版的内容，这些内容处于用一个层级，用户左右滑动来观看。
6. 前景和背景
设计使前景和背景清晰区分。当我们的视线感知到元素重叠时，会根据焦点分别识别前景和背景。
为了减少混乱，可以使用深色蒙版或者弹窗阴影来分离前景和背景。当页面中有弹窗跳出，通常背景会有一层深色的遮罩，以此来突出弹窗中的内容。
7. 分组
当我们想把不同类别的内容进行分组时，可以添加线条或背景来区分。
聚集在同一区域的元素被看作为属于同一板块的元素，因此这些内容需要与其他元素有明显的区别。常用的方法是改变背景的颜色或者在背景中插入图片，让这个板块的内容和其他内容有强烈的对比。
8. 单位
设定有效设计的最小单位。要在多个倍数（如1.5x 2x）中使用设计元素，使用可以整除的偶数。
其中，8点网格系统被广泛使用，它可以将主显示器的整个像素除以一个整数。但是8点网格并不能适用于所有的设计，比如iOS的375和750的屏幕尺寸。
9. 网格
网格是一种高效设计的工具，通过定义一个大的框架来进行元素排版。网格系统易于构建，而且能提供一致的视觉节奏，非常适合应用在日常的设计工作中。
10. 屏幕尺寸
设计的时候要考虑移动设备的屏幕尺寸问题。就iOS而言，手机机型都是固定的，因此主要基于旗舰机型的尺寸进行设计。
由于使用Android系统的手机品牌太多，因此不可能优化所有屏幕，因此倾向于遵循谷歌提供的规范。
11. 密度
为了在屏幕放大时显示相同的大小，需要了解屏幕的密度。PPI是常用的单位，代表每英寸的像素数，是指在1英寸x1英寸的屏幕区域中物理显示的像素数。
以DP和PX为单位进行设计，以便在任何屏幕尺寸上都能物理显示相同的大小。
12. 响应式
对于同时支持移动端和桌面端的产品，可以使用响应式设计来提升效率和体验，常用的结构形式分为导航栏、工具栏和内容区。
导航栏：顶级导航菜单区，如分类、菜单。
工具栏：搜索、书签等工具。
内容区域：文本、图像、列表等内容显示区。
以上就是排版设计中要注意的细节和技巧，希望通过这些内容能帮助你对排版和布局有更多的思考。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
