前言
大家好，我是西瓜，最近因为开启了西瓜UI设计线上培训课，所以有点忙不过来了，更新文章出现了一些延迟状态，不过，前来咨询问题的同学却没有因此减少，这次我就选出一个陈旧的老问题M y { ) u U进行一下阐述讲解。
我在前段时间收到一个这样得问题，说：日常工作几乎都能完成，但老板总是4 \ H ^ E +不太满意，我自己也在做审美方面的练习，可一看自己做的，就完全觉得不是那么回事，这个怎么破？% 4 ! S n q B V T
其实以上的问题或多或少大家m d z F i都经历过，而且有些时候，最P V ;担心得也是这种，因为它貌似正处于高低不就的技法水平。类似这样的问题，我建议处于这f N Z 8 5 4 a / b种状态得设计师努力方向是寻找设计技法得基础源，也就是从新审视一下自己的基础环节。一般来说，在我们没法突破和进阶的时候，我们最应该做的不是继续埋头向前冲刺，而是稳下来深呼吸，回头看看自己努力过的印记，是否有漏洞，或者扎实，如果有的话就应该及时弥补。
刚才那位同学通过最h ; _ } {终的辅助梳理后，得出了一些结果，那就是Y R f ^ $ * s _他的排版技法稍有薄w d g h Y弱，而且每次在做设计时，都不能很好的把控整个布局得视觉焦点，所以……他练习/ H ^去了! 不能光练，我在这里也总结了一些排版得技巧与知识点，并且将研制多年的排版技巧分享给大家，希望有类似问题或正在努力的设计师们一同学习进步。
目录
01$ * l k C.拉开内容的距离，分清主次关系
02.规整虽好，但却死板
03.将图片和文字赋予层次感
04.根据确定内容选取字体
05.案例讲解
06.总结
01.拉开内容的距离，分清主次关系
首先第一个我要说的就是在一个界面中，最重要且最简单得一个手法就是拉开整个界面内容得距离，不管是图片和图片，还是图片和文字，都应该是带有一个有节奏感的空间距离，这样才能确保整个界面是具有呼吸感和条理性的。
其次是要注意保持重点标题文字和内容文~ D I j D D字得主次关系，我们一般可以通过字体粗细、大小、颜色进行主次区分，然后在外加有规律得间距，这样就可以很M X H 3 S o 4 C好的帮助我们进行内容分类分组^ j p O Y ~ 6 O了。
最后一个是图片与图片之a f e间的主次关系，比如在apY 0 %p设计中，有的app会有较多的图片显示（比如那种美食类和大牌服装类的app），那么，图片与图片得间距，B 9 \ 6 t 4 ( H h或者图片组与图片组有节3 , E @ ` k 0 { H奏的间距，也可以更好p S o 4的帮助我们区分一个界面内的主% | \ o U次板块内容。如果说有涉及到那些具有不同功能得图片展示，我们还可以通过图片大小进行区分，这样，我们就能不光单一的进行距离设定，还能再多一个纬度～大小，进行主次区分。
02.规整虽好，但却死板
这个问题不光是大家，我也会有思路固板得时候，我们总是习惯性的左对齐、右对齐、上对齐、下对齐，还有一个居中对齐，其实这并不是我们得错，在初学设计时，不管谁教排H * u u d版，都会围绕四个基础对齐进行延展，倒不是不允许初学的我们创新，实在是如果不设定这个规矩得话，估计那会都能天马行空了。但也正因为这样，我们习g h q ] u *惯了这四个排版6 Z 7 s P \ ^ \ u方式，因为确实好用，还简单顺手，倒不是不想创意，时间长得了我们，可能慢慢的就忠爱~ 9 0 y b这四个排版了。
所以说，标准的四个对齐排版技法不管怎Y 9 9么用，一般情况下都不会出现太大问题Y b 0 { n C，但也就是这样，形成了高低不就的状态，要想打破这个问题，大家应该尝试一种新的手法，那就是“错位技法”，比如内容标题c M E m p和副标题得排列错位、标题和图片得穿插错位、标题和正文的排列错位、图片和图片的排列或穿插错位，~ 5 W等等。
以上– s w ! ] A F P这几个错位，是可以将界面变得更加灵活的方式，不过这里大家要注意一点，错位技法虽然N ~ J e r , } f r灵活，但它确实较为难驾驭，这个还要看实际设计和个人技能水平情况而定，如果说不能较好的把控错位技法，我建议可以先稳妥的在实际工作中使用标准# b N s d对5 @ L齐，然后自己私下在用同样的内容在练习一稿，并尝试错位技法，这样既不需要重新理解界面内容模块，还能尝试新的技法，是个不错的选择。
03.将图片和文字赋予层次感
一~ g J ; z f般情况下，我们@ e X _ 5 N B } z在做作界面设计时，首先想到的就是依次罗列界面中的各种元素和文字，比如一张图片，然后下面是标题，0 P r l在下面说明文案/关注，最后是分享/消息/点赞/u # [标签，按照常规做法的话，这么做相对而言比较稳妥，但同时也就缺乏了我们进行创意的探究，其实，Y Y r G ; } y | x界面设计和平面中的版式设计具有异曲同工之处，我们可以在考虑如何将界面更加视觉和条理化，既满足了极少空间更多内容的展示0 U A | [ d w )，又同时提升了整体视觉的呈现。
我们可以将图片与图片进行重合（例如将银行卡类的图片设计进行层级叠加），又或者我们可以文字+图片形式的重合（例如瓷片区时的图片和文字展示），这些种7 | $ p R种案例，其实都是帮助我们从规规矩矩0 , Q \ J \ x q ^的视觉角度去进行多方位的设计探索。通过以上这些层次技法表现，我们可以在视觉上更加灵活展现，并突出内容主体，丰富界面的空间关系。
04.选择贴合设计风格和气质的字体
对于选取字体，我这里不做太多讲述，主要因为它不单纯和设计有关，而是我们设计师选取的字体，到了开发那边是否能被采用并实现，目前来讲，我所见到的开发一般都是4 H &采用标准的微软雅黑、苹方等字体，也有部分又购买字体版权，比如目前我涉及到的产品就用到了方正兰亭圆简体_粗，但归根结底，字体的选取还是较为局限的。那你会问竟然没什么论述为何还要M u ~ N y 2 9 =讲呢？其实在一整个界面设计内，设计师可以触碰和自我控制的字体选取还是有一些地方的，比如banner内容的字体设计和选取，大标题是否采x L ? m F ]用宋体，活动/H5界面的字体设计，等等，都是3 J | } C T t可以进行排版设计，并赋予界面视觉化的地方。
一个界面是否好看和实用，u Y D K o n 3不单纯在于简单的排版与罗列，必要的字体设计也是不可缺少的一部分，所以，在一些运营I 3 R C J u L @ L活动界面，还是建议大家多去可以选取和设计一些好的字体进行界面陪衬t U d 3 X l k =。正确的字体选择，而且还能够在信息和视觉两个层面给用户传递信息，错误的选择会导致误解和混乱的结果。
05.案例讲解
5.1案例一
在图一中我们可以看到设计者将搜索、主干标题/按钮，全部赋予在了一块主题渐变的背景上，然后通过白色模块的层级关系进行区分展示，作为用户的我们在第一眼. J } { H a f 1 t视觉浏览时，就可以很明确内容/功能的前后层级，并潜意识附带有空间感，同时在视觉上也有极大的好感。
图二则和图一较为不一| j \样，图二其实设计亮点在于主标题与内容文字的对比，包括主干标题的行间距和字p # F j = v间距，也是通过较为宽松的空隙进行强化呼吸感，这和我们开篇第R 5 , ; t 9一点提到的拉开内容的距离，分清主次关系不谋而合。
5.2案例\ ( a 2 o Z二
图中第一个度小满金融APP界面最上面的主干口号就是采用了2 a – I H e我们讲到的z | n g气质文字选择，设计师采用了衬线R j R o +体作为口号展示，目的是强化产品理念，并通D A G I过衬线体的芊细和坚挺来表示产品的精神与文化。
图二中则是一个概念稿，这类型稿件极适合我们缺乏排版技巧的设计师进行操练，我们看它顶部的三层磨砂半透明卡片，就是采用了图片层级关系的设计手法，通过卡片层级的关系进行设计，可以赋予整个界面的更好的空间感和N W ^ ^ [ t w E f推进感b % X 7。
5.3案例三
先来看一下图一，这里的图片层级和案例二里的图片层级是有所1 y , B 5区别的，这里的层级技法作者并不是采用文字和图片，或图片和图片的层级关系，而是在图片自身} 9 [ 0 J上做m M X ]了手法“弥散投影”，这个手法在目前主流设计里也用的非常多。
而图二就是我们第二节里说到的错位问题，界面的上半部为错位层级设计，而下半部为瀑布流的排版设计，上下两个结构技法明显不同，在产生了强烈视觉对比的同时，也给界面增添了许多的H B . 9 , K a活力。
总结
我们看似一个（375*M t )812）PT的界面没有很多内容，但这里面同样隐藏着很多的排版技巧与知识点，也V ^ U是我们设计师必须要学习和熟练掌握的重要技能之F ! { t一，无论你目前从事C端还是B端，还是电商、平) | s R y ; J ( 0面，排版技巧都不4 w Z排斥，反而说，它却是所有设计最基础的技法之一了，所以，在实际的工作中，我们都应该重视起来，并总是下意识的进行操练。
关注公众号：西瓜的设计
本文由 @西瓜的设计 原创。未经许可，禁止转载
Powered by Froala Editor
