本文目录：
- 一、栅格基准
- 二、板块布局
- 三、文字的排版
- 四、文字的对齐
- 五、形式感分组
- 六、排版的设计策略
一、栅格基准
- 1、栅格的目的：界面的宽度不固定，所以不具体规定界面的宽度尺寸，所以采用百分比布局，这样界面就可以知道具体宽度多少合适。高度可根据页面内容，也可以继续根据栅格化比列来设计。
- 2、栅格的总宽度：移动端界面设计，画面的整体宽度一般选择2倍图750px。
- 3、安全边距：界面的内容不会顶着页面的边缘去设计，会左右留出一定的空隙就是安全边距。（边距可以使用水槽的整倍数10、1.5、2.0倍，2倍图中常用24PX,16PX)。
- 4、界面的留白：如果首页内容比较多，版面比较紧凑可选择24PX.页面内容较少，排版比较宽松则选用32px的宽度，例如：Airbonb的首页，内容极简极度宽松，完全由专题banner构成，所以留白间距达到了惊人的48px。
- 5、栅格的列宽：移动端常用的栅格列数是6列。PC网页常用的12列和24列。
- 6、栅格的水槽：相邻两个列宽之间的间隔是水槽，水槽可以将页面的内容进行区分。水槽的宽度越大，页面留白和呼吸感会更好，反之则更紧凑。
- 7、均分排版：栅格只是一个排版基础依据，还有根据页面的内容，选择适当的排版格式。
二、板块布局
- 1、格式塔心理学：人们在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分。而是将各个部分组合起来，使之成为一个更易于理解的统一体。简单的说俗称：脑补。
- 2、模块分割：模块与模块之间的分割方式分别为（1）、大留白（80px）（2）、标签栏分割、（3）、标题分割。
- （3-1）、留白分组：对于界面上的信息进行分组，通过间距留白的方式体现了信息的关系。信息模块关联大的，所以间距也更小。信息模块关联小的，所以间距也更大。
例如：金融产品一般都是文字多，用文字的大小区分和颜色的区分，在就是距离留白的空间大小。 - （3-2）、留白的上下间距：界面中的排版，底部的文字一般都会才用模块下间距大于上间距。区分模块的关联性。
- （3-3）、卡片的留白：界面现在有卡片式设计和非卡片设计，卡片本质是把不同类型的信息进行排版归组。有卡片：可以在哎较小的面积里承载更多类型信息进行排版。没卡片：靠留白进行区域划分，承载更多信息需要更多视觉面积。（缺图占位：在实际设计中，例如需要考虑到单图的情况。只靠文字间距去区分板块关系，显得画面松散。所以需要加灰色背景强化内容的分类。）
- 3、元素关联：留白的时候我们需要仔细考虑模块的内容关联性。然后决定画面的留白的排版。Keep应用直接用色块圈起来，形成直接的内容关联性。
-4、弱化分割线：如果使用线去风格板块内容，分割线尽可能的淡，不要非常重，若有若无即可。
分割线：电商很多扣掉背景的图片，因为有大量留白，所以直接用淡灰色线分割HSB：0097，如果是实物带背景的图片，可用白色细线分割。
例如：产品的列表页，展示页选择去掉线框。采用灰调设计，或者通过商品图片本身的背景颜色区分。
例如：模块上线都是banner,所以采用了简单的单线条设计。 - 5、无边框按钮：版面展示内容有限，需要放置更多的内容的时候。会使用无边框的文字按钮，让画面更加简洁。有边框的可能做成淡淡的色块。
三、文字的排版
- 1、文字的极限值：设计时候需要考虑文字的极限值，包括预留几排文字。多少字符后出现省略号。
卡片式设计：文字显示少于预计排版的行数，空白占位处理。默认占位3排文字。 - 2、文字的行间距：间距主要是指文字之间的高度间距，可以称之为行高，行高过大过小都不利于用户阅读。行间距大约是字体间距的1.2至1.5倍之间，也就是行高选择为字符高度的30%，阅读会比较舒服。
- 3、标题字的行间距：双排标题字，副标题是对主标题的辅助说明，非阅读性文字，可采用1.5倍间距。
- 4、阅读字行间距：一段上下文的文字，是强关联的文字，所以采用小间距。例如标题“推荐美食攻略”文字为26px，行距为36px实际倍数为1.38倍。
详情页的一些说明文字，用了大留白排版，可采用大间距。如文字为28px,间距为1.5倍的42px。
四、文字的对齐
- 1、左对齐：大多数标题排版默认为左对齐。
- 2、右对齐：界面上的最右边的元素，需要考虑右对齐的对齐方式。常见的右对齐有（消息列表、文章列表）。
- 3、两段式对齐：标题和内容区域，采用两端式左对齐。例如：京东详情页，对齐规整的条目，使模块排版更加规整。
详情页表单的列表，为了让标题和内容看起来更加规整，可以采用两段式左对齐的方法。
金融类的产品列表，一般是两段式的标题排版左对齐。 - 4、左右对齐：描述性文字，为了相应的文字对齐。可采用左右两端分别对齐的方式。
- 5、上下对齐：人的大脑更喜欢对齐的信息，所以界面上的每个元素都要考虑横向或者纵向的对齐方式。
- 6、文字内容与整体的图片进行居中对齐。如果文字超出图片，无法剧中对齐，超出文字依次下回行排版。
五、形式感分组
- 1、形状相似运用：设计形式的分组。利用观感的形状的特点来进行设计分组。
- 2、形式感区分：模块设计样式的变化，可以有效区分模块。我们能感觉到上下模块区分明显，因为他们都有各自的设计形式感。比如：文字、卡片，等（可以看京东金融的页面分析）。
- 3、大小区分：不同大小的信息组，用于区分信息的重要程度，良仓上下模块，一层3块一层2块进行交替布局。
大小相似的运用：
3-1、文字粗细分组：通过文字的大小粗细来区分有效区分层次，这点在金融类应用更加突出，因为金融类文字比较多。
3-2、大小相似的运用：对相似的内容赋予相同的属性，例如同一级别的文字大小相同，同一类的模块设计样式相同。
3-3、颜色相似的原则运用：颜色的区分（1、字体颜色的区分，表示不同的状态。2、常见的标签栏样式。3、运用颜色的区分，代表当前选中模块。4、签到的步骤图等）。
六、排版的设计策略
拉开大板块的层次
- 1、大标题字：用大标题字拉开板块的间距。上间距要大于下间距，区分好板块的层次。（如果板块的内容形式感比较复杂，可以用线区分开，反之不用）。
- 2、卡片：用卡片的轮廓进行区分板块。
- 3、形式感：利用图片和文字的设计形式感差异，拉开板块的层次。
- 4、加标签栏：标签栏的切换板块，因为标签栏相当于一种独特的设形式感，可以有效区分上下的模块。
- 5、颜色的区分：用深浅交替来区分板块。
板块内的层次区分
- 1、文字外边距：统一内边距，使这个块面的规则统一。
- 2、文字的内边距：根据产品内容的关联性，选择合适的间距。（小边距、中边距、大边距，）。
- 3、头像的上下排布：推荐内容的文章采用上图下头像排布，重点推荐的是内容。社交类动态采用上头像下文章排布，重点推荐的是人。
