简洁排版设计的6个核心技巧，提升视觉与用户体验

您好呀，今儿所 Shared 的乃是「排版技巧」。页面的排版具备颇高的灵活性，然而于进行排版工作的时候，我们并非仅仅只需考量视觉层面的美观程度，还得针对使用方面的体验予以思量 。

要把页面里的内容以及元素，借助合理的方式予以排版，确保重点内容凸显出来，并且易于阅读，这是首要的目的。

这回归纳一些于页面排版以及布局里要留意的技巧，把控住这些易于上手的排版技巧能够极大地提高设计效率。

1. 邻近性

与页面中其他元素相比，有关联的元素之间的距离更近，这种情况被称作邻近性。页面中的内容或者元素，依据邻近性进行分组，相较于按照形状或者颜色分组而言，显得更为直观。

2. 相似性

在同一页面里，那些表达相同功能的元素，是借助相同的形状来进行表示的。相似性呢，它是视觉上相似元素所形成的组合，一般是依靠大小、形状以及颜色这些方面去加以区分的。

具有相似性的元素，会展现出具备相似特性的行为，举例而言，像是在下图右边所呈现的选项当中，均采用了保持一致状态的单选框，如此一来，对于用户做出相应选择会更具便利性。

要是呈现出左图那般的状况，单选框的样式并非保持一致的情况，这般一来，用户于进行选择之际，极有可能就会萌生出相应的疑问，这种疑问便是，点击不同样式的单选框是否会蕴含着不一样的意思，进而致使产生一些不必要的困扰 。

3. 连续性

当今好多移动端的产品，都运用起了feed流的样式，表示能够做到无限加载内容，用户不管怎么滑动，即便是用尽各种滑动方式，也始终滑不到底部。处于这样的一种场景状况之下，那就必须得去考虑feed流内容所具备的连续性，借助把内容予以合理地对齐，以此来确保阅读过程当中的连续性。

除了能使页面内容看上去更为整齐之外，对齐具备的作用还在于能够下意识地对用户的浏览视线以及阅读顺序产生影响，至于F型和Z型视觉动线这类情况，是借助不同的对齐排版方式去引导用户的视线 。

4. 闭合性

利用排版布局元素自身所具有的边距以及元素之间存在的间距，以此来削减用户的认知负荷，这便是闭合性。当前流行的卡片式布局运用了此原则，借助把元素整合进一个卡片里，通过适时合理地安排元素的间距，进而达成整齐的效果 。

比如说，在那种“左图右文”的卡片布局情形下，得去考量图片跟标题之间的间距情况，标题是不是要跟图片顶部达成对齐状态，在规定的空间范围里面，要是标题的字数过多，该如何进行折行以及省略方面的处理，关于标题和注释之间的距离以及对齐方式等这一系列的相关问题 。

瞧见这儿就会发觉，若要将一种简易的卡片式布局排得规整，并非轻而易举之事，得考量诸多细微之处，。

此外，卡片样式的排版并非非得带有外部边框，如若每一个卡片当中内容的排版极为齐整，即便不使用额外的边框，用户也能够清晰地进行阅读。

5. 共同命运

须将有着相同概念的元素设计成有着相互一致行为的模样。一旦元素朝着同一方向行进移动，它们就会被辨别认定为处于同一级别的元素。就好比在手机里有时能够瞅见呈横向排版样式的内容，这些内容归属于同一层级，用户通过左右滑动的方式去进行观看 。

6. 前景和背景

设计要让前景跟背景能够清晰地区分。当我们的视线感知到有元素重叠的情况时，会依据焦点分别去识别前景和背景。

在页面之中，为了能够达成减少混乱这一目的，深色蒙版是可以被使用的，或者弹窗阴影也能够被用于以把前景和背景分离开来。当页面里有弹窗进行跳出这个动作的时候，一般的情况之下，背景会存在着经过了设定产生的一层带有深色属性或者特征的遮罩，凭借这样的方式去突出显示弹窗之中所包含的内容。

7. 分组

当我们有着想要把并非同一类别的内容来开展分组的想法时，能够去添加线条或者背景以此来进行区分 。

聚于同一区域之内的元素，被视作归属于同一板块的元素，故而这些内容，需与其他元素存有显著的区别。常用的办法是，变换背景的颜色，或者于背景之中嵌入图片，以使此板块的内容，和其他内容产生强烈的对比。

8. 单位

给出有效设计的最小单位设定，于多个倍数（即为1.5x、2x等）里去运用设计元素，采用能够整除的偶数 。

当中，8点网格系统被大量运用，它能够把主显示器的全部像素除以一个整数。然而8点网格并非适用于所有设计，像iOS的375以及750的屏幕尺寸。

9. 网格

用来进行元素排版的网格，其是借助定义这么个大框架来得以实现的一种具备高效设计特性的工具，网格系统构建起来容易呈现便捷状态，并且能够给出一致的视觉节奏，在日常设计工作里应用特别适宜。

10. 屏幕尺寸

设计之际需考量移动设备屏幕尺寸状况，就iOS这个范畴来讲，手机机型皆为固定的情形，所以基本上是依据旗舰机型尺寸来开展设计的。

因使用 Android 系统的手机品牌数量众多，故而不存在能够对所有屏幕予以优化的可能性，于是便倾向于依照谷歌所提供的规范 。

11. 密度

要在屏幕放大之际呈现相同的尺寸规格，就得去知晓那屏幕的密度情况。PPI属于常用的单位范畴，它所代表的乃是每英寸的像素数量，此即指在1英寸乘以1英寸这般大小的屏幕区域里头，实施物理显示的像素个数。

开展设计时凭借DP以及PX作为单位，从而达成在任意屏幕尺寸的情况下，都能够在物理层面呈现出同样的尺寸 。

12. 响应式

针对那种既能够支持移动端，又可以支持桌面端的产品而言，能够运用响应式设计去提高效率以及体验，平常所使用的结构形式划分成导航栏，还有工具栏以及内容区 。

导航栏：顶级导航菜单区，如分类、菜单。

工具栏：搜索、书签等工具。

内容区域：文本、图像、列表等内容显示区。

最后

这便是排版设计里需留意的细节以及技巧，期望凭借这些内容能够助力你对于排版以及布局拥有更多的思索。

文章转载： Clip设计夹，版权归原作者所有

原文链接：

https://mp.weixin.qq.com/s/QTXH94gAGjzhMCA-UsOtmQ 这并不是一个句子，无法按照要求改写，请提供合适的句子进行改写。

继续浏览有关 排版设计用户体验 的文章