本文给大家介绍了七大排版思路，也希望能给有想要提升排版能力的设计师带来一些帮助与启发！
从本周开始，接下来时间里，会和大家分享如何创建精致的UI界面，共五部曲，为什么要做这个分享？
曾经我学习UI设计时，网上资料很多，但是参差不齐，对于新人而言，这是很痛苦的，进步慢。因此我想通过之前踩过一些坑，集合自己的工作经验，把一些知识点分享出来。
分享的最终目的是沉淀自己，同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发！所以本系列文章并不一定适合所有人。
那么本周就先从排版篇幅开启……
排版是界面设计中最难的部分，也是非常重要的一部分，它以各种形式存在界面中，纯文本排版，图形文排版，图片文本排版等等，这是我们在做设计时候，经常会面临的问题。好的排版能有效地向用户传递关键的信息，同时也能提升产品使用体验。
在我们日常生活中，离不开设计排版，包括经常见到的各种广告与电影宣传海报，如果不能让用户在短时间内记住关键信息，这个设计就是失败的。因此我希望通过今天这篇文章，能够让你对排版有一些新的认识。
在界面设计中，影响排版设计的因素有很多，我总结归纳了7个维度（当然还有其他更细的，在这里就先暂时不讲），它直接影响整个排版质量，这些方法当然不是绝对，但是如果能巧妙综合得运用到界面中，能保证大部分界面设计感得以提升，当然也是需要不断刻意练习来提高的。
分别是：
合理运用空间的力量大小的力量论颜色的重要性 对齐的力量平衡定律选择好的字体清晰了解设计目标下面我会集合一些案例来和大家讲解下
空间即我们常说的留白，当设计元素紧紧地聚集在一起时，界面看起来没有重点，因此需要和谐的运用它，空间的运用规则直接影响产品的性格，小空间和大空间在视觉感受上，两者完全不同，那么我们在界面设计中如何去更好的运用空间来设计排版。
有一个很好的方法就是可以运用网格去搭建空间，在平面设计中，运用得非常多，那么在用户界面中，同样也可以运用网格去搭建，下面看一个案例：
如上图作者把一个界面分为4Gird，通过搭建好的网格来进行界面中元素排版，右侧是我拆解的图（备注：网格的搭建并没有任何强制性的规定需要搭建多少列，最终的搭建列数需要根据这个产品内容复杂程度去定义的），比如：我最近在做车载HMI设计语言，同样也运用了网格，那么我会根据整个车载HMI产品复杂程度去搭建，同时也运用了几种网格配合使用。
上面两个例子我们可以发现 设计师运用了大空间来设计界面，这使得整个界面呼吸感更强，更透气，因为也是娱乐类偏杂文产品，所以设计会偏艺术化一些。
韩国29cm产品是我比较喜欢的一个app，整体设计呼吸感很强，留白空间大，视觉焦点清晰。
我们都知道大的物体更吸引眼球，更容易引起我们的注意，那么在设计中，我们一般都会将重要元素放大，突出显示。
a和b那个更吸引你？
答案是a. 因为a类型排版看起来很大，更具有吸引力。
上面案例中算是大小方法上运用比较好的，我们可以看出视觉层次非常清晰了。首先我能快速知道哪些重要信息，肯定是封面图，接着左上角logo,然后就是导航和标题了，最后就是针对每个内容块的一些详细文案解释。
简单示例，重要的信息一定要大，次级信息弱化。
颜色在排版设计中起着很大的作用，能起到点睛之笔，又或者为画面带来活力，又或者代表着品牌，当然我们在UI界面中字体颜色一定要慎用，因为不同颜色含义是不同的。合理恰当运用颜色， 能够瞬间提升设计品质感。
上面这个web设计中，设计师通过红色来强调重要信息，同时也让灰白的画面有了些许不同之处。
对某些文本使用辅助颜色，例如链接文本，图1 使用方式正确。图2将颜色大量使用在正文，严重影响视觉体验。
避免像图2那样使用对比度低的颜色。
对齐是界面设计中我们经常提到话题，也是提升界面品质感最重要的一个隐形的力量，也许有时候我们会忽略他，有时候会不经意间就没做好。
对齐的界面比不对齐的要整齐很多，视觉流也符合用户阅读习惯。
我们可以借用前面所学的网格来对齐，这样不仅设计有节奏感， 同时画面很整齐美观。
我们界面设计中可以有三种思路对齐方式，当然根据业务板块去选择合适的对齐方式，三种对齐方式都有一个隐形的轴（看我标的线），然后围绕这个去排版设计，自然形成一个规则的视觉流。
上面案例中作者整体偏左对齐，这样形成以左为中心一个轴展开视觉流走向。
我们在做界面设计时候，会经常遇到有人说你的设计，要么是这边太重了，要么就是太轻了，或者这边要不加点东西进去，不然太空了，为什么？
这就是平衡定律，如果同一个环境下的物体没有保持平衡关系，我们视觉感受上是很不舒服的。
下面我们看几个例子：
图1和图2 我们可以看出，图2 给人第一感受就是不平衡的，整体视觉重心偏左。
上图案例，设计师通过按钮来平衡整个画面视觉重心，因为左侧内容多，如果按钮很弱或者很小，是很难平衡画面的，因此我们做界面时候，定义一些按钮大小也是非常考究的。
左边视觉界面，右边拆解原型出来，我们可以看到设计师也是通过元素合理分布使得界面整体平衡。
字体选择对界面排版非常至关重要，这也是所有界面排版中必要的一步，不同字体有不同的性格属性，我们需要根据产品来选择恰当的中英文字体。同时，也需要记住，一个产品APP界面设计中，字体最好不要超过两种
推荐一些我认为2019比较好用的英文字体，大家做概念设计时候或者提案方案包装时候是可以用到的哦（吐血推荐）。
分别是：Montserrat 和 Nexa 字体。
分别是：Futura 和 Playfair_Display 字体
中文好用的字体，大家应该都知道，平方字体，思源黑体，汉仪旗黑，兰亭纤黑，我就不做示例了。
终于到最后一趴了，最后这点是整个设计排版的核心之一，为什么？
如果不清晰设计目标，那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的，不同产品风格会有不同的排版style。
比如：我们产品是奢侈品，那么整体排版设计风格一定是使用大网格，大空间去设计，字体纤细等。如果是简约现代呢？又或者母婴产品，科技产品，娱乐产品等等，每个会有一些特殊排版思路。所以了解你的设计目标，并确定设计原则。
有了这些原则与目标，那么接下来就是开始找参考，找灵感找到对应产品他们是如何排版，如何控制画面节奏感的，推荐多去使用pinterest或者behance
通过七大点排版思路，可以更好的运用在界面设计中，每个排版原则并不是独立的个体，他们之间是相辅相成的关系，比如大小离不开网格，也离不开对比，颜色等等，缺乏某些元素，那么界面就会缺失灵魂，设计产出质量并不好！
好了本期到这里结束，下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节！
TONY，公众号：功夫UX，人人都是产品经理专栏作家。百度高级UI设计师，关注互联网To C产品，关注物联网车载方面，擅长产品界面设计，产品基础设计语言定义，前瞻性设计风格探索。
本文原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Unsplash ，基于 CC0 协议
为什么你的设计很平庸，为什么你的布局很常规，本篇文章给你答案！
前面已经完成这个系列的“排版和图形”两篇文章，本周接着后面的布局篇幅，我们知道布局的好坏直接影响产品美观度，不同形式的布局，给用户带来的感受是不一样的，产品也将会有不一样的性格。因为布局直接影响界面空间疏密程度，不同产品都有着不同空间。
那么我们要如何做，才能更好的去布局，并且能在激烈的竞争中脱颖而出。现今大部分产品基本都是长得差不多，作为设计师更应该去多研究一些布局趋势，并能将其融汇在自家产品中。
布局对界面设计来说十分重要，不仅是我们常说的在移动端或者web端的设计中，他在车载中、电视端UI或者VR设计同样有很大影响。我们知道界面设计中最关键的五大基础语言：形、色、字、质、构。
其中构（结构） 即是我们所说的布局，五个维度之前已经和大家分享了图形和字体 篇，今天我们可以看下布局对界面设计的影响，以及我们该如何通过布局来使界面设计看起来更加有范，更有自己的视觉特征点在里面
前面在向大家介绍布局的重要性和他对界面设计的影响，那么如果我们需要做出一些比较有创新的布局来提高界面精致度，该如何去下手呢？
我们可以通过观察目前主流一些趋势做法，了解国外设计师如何找到更有创意的方式来设计他们的布局，并将一些创意运用到界面设计中的，下面我们一起看下。
网格布局我相信大部分人都知道，很熟悉，那么今天所说的偏移叠加网格布局是什么样子的呢？
其实就是我们在设计界面时候，把最底层基础网格搭建好后，上层的内容排版，通过错落叠加方式来布局，这种布局的优点是留白空间大，呼吸感强，图文错落交织一起，形式感增强。缺点是，运用的范围会小一些，承载内容少，一般Web端运用比较多。当然也有一些移动端设计个性化产品存在这样的布局。
上图文字与图片交叠错落排版，图片与图片之间也是网格交错，整体设计感增强。
上面移动端设计，设计师通过留出左侧空网格，整体内容往右侧偏移，导航相对内容来说做了差异化设计，并未进行偏移设计（看我上图红框部分） 。
这样做的目的是因为，我们点击汉堡菜单的时候，本来整体就要往右侧移动，如果再继续移动，那么内容会显示不下，同时视觉效果并没有很好。
半偏移网格布局，界面中并非所有的内容都偏移底层网格，而是部分模块这样去做，原因是内容多的情况下。一般会在首页运用偏移网格多一些。
分屏布局，顾名思义就是将屏幕进行几种不同区域的划分，然后内容分布排版在里面，分屏布局解决的主要问题将屏幕大的设备进行合理划分空间设计，一般是在横屏运用比较多，比如：PAD，或者WEB或者车机中控屏。
下面一起看下分屏布局在实际设计中的具体表现：
上图界面设计采用了1/2分屏布局，将图片与内容文字进行区域划分，下图是将主文案摆放在分割区域中间（文字较少情况下可以这样去做）增强形式感。当然分屏布局可以有多种形式，例如：2/3，1/3，3/4等等，可以根据内容进行选择合适分屏。
视差布局，在web app或者web端布局常用比较多的一种，运行方式当滑动页面内容时内容与内容之间运动速率会有时间差，同时Z轴空间位置也会有深度差异，这样就形成了视差效果，视差布局一般在H5界面出现比较多，用于营销场景会多一些，当然WEB端倒是比较常见。
由于不支持Gif和视屏，所以大家看连接吧：
链接推荐：https://homesociete.ca/
链接1：https://www.stereo.ca/project/clinique-dentaire-gagnon/
链接2：https://pamstudio.co/
链接3：https://pelizzari.com/en/portfolio/among-the-ancient-vaults
内容重叠布局，打破了传统平整的极简注意风格，扁平化设计将会加入Z轴空间元素，使得整体设计有了新颖的布局方式，这也是一种区分竞争产品的布局方式，一般内容重叠产品大多出现在偏杂志化设计的产品中。
如之前我介绍图形篇时候提到韩国29cm， 他们详情页，运营页面运用了重叠布局。
为什么要把卡片布局拿出来讲？
卡片布局应该是我们见过最多的布局了，卡片布局也会有很多种方式去布局，根据产品内容复杂程度去建立卡片容器大小，卡片作为承载内容的容器，对于响应式布局也是非常有利的支持。我们看appstore，behance的移动端，都是卡片布局。
卡片布局还有一个最大好处就是，他能够封装内容，使得画面布局整洁，所有内容都往容器里面放，信息之间保持很好的区分。
全封闭卡片布局，内容之间通过卡片封装，中间无空隙。
这种网格布局相对来说比较开放性的，布局上多以卡片承载内容为主，卡片跟随隐形网格随机分布在画板中，有点类似我们说的暴瀑流布局方式。这种会比较灵活，一般会在摄影类，杂志类，文艺类产品居多。
上面已经列举了目前比较流行的一些布局，可能部分人还是感觉不会使用，也不会很好的去利用在自己设计中，要么就直接把别人布局抄袭过来。
其实是有方法的，我们可以把自己认为比较好的一种布局拿出来，然后拆解他，拆解完后，再来重新组装。组装的时候，你可以参考下其他布局，两者集合起来，就像乐高积木一样，你可以有很多种组合方式。
上面利用乐高积木思维重新对布局进行拆解组合，当然一切的布局都是基于当前你的主旨，你的产品内容，找到合适布局，然后去研究他，并且拆解，然后重新搭建属于自己产品一套布局规则。
全文向大家介绍5种布局思路，当然其实不止这5种，但是其他布局相对来说会运用少一些，这些布局我们可以加以学习利用，可以运用在任何设计中去。
当然运用的时候，一定要清晰知道自己产品的主旨目标，用户群体，合理运用布局，做出创新设计！
如何创建精致的UI界面（二）：图形篇
如何创建精致的UI界面（一）：排版篇
视觉层次结构的4大武器
TONY，公众号：功夫UX，人人都是产品经理专栏作家。百度高级UI设计师，关注互联网To C产品，关注物联网车载方面，擅长产品界面设计，产品基础设计语言定义，前瞻性设计风格探索。
本文原创发布于人人都是产品经理。未经许可，禁止转载
题图作者提供
相关问答
UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。现在比较多的UI实际上就是GUI设计。也就是图形用户界面的设...
Python做UI界面主要有以下几种方法:1.使用Python内置的图形用户界面库(GUI库),如Tkinter、PyQt、wxPython等。2.使用第三方的GUI库,...
第一阶段:软件基础及视觉手绘设计。、第二阶段:平面广告创意综合设计、第三阶段:商业品牌视觉设计、第四阶段:移动端界面及UE用户体验设计UI设计学...
UI是用户界面设计的简称,UE是用户体验设计的简称。对于设计行业而言,很多人都会说我都没有基础,不懂美术,审美还不是特好,怎么学得会呢?我们都知道兴趣是最...
UI设计看似简单,很多人都以为会PS就会做UI设计了,其实,远远没有那么简单,UI设计除了基础软件的操作技术以外,还要学习思维导图,原型图,还有交互逻辑...
深圳UI设计培训哪个好?这里,是建议想参加深圳UI设计培训的小伙伴,直接去参加试听课程。千锋深圳UI培训就有长达两周的免费课程试听,不满意不缴费。深圳UI设...
现在谈起UI相信大家并不陌生,因为智能设备的普及,UI早已与我们的生活融为一体。那么零基础学习UI需要了解哪些?我就来说说UI的学习路线,各阶段的知识点,以及...U...
零基础学UI设计,有什么快速学好手机界面设计方法啊?想要快速学手机界面设计的你,对手机界面设计了解吗,知道怎么样学习手机界面设计吗?也许你认为手机界面设...
平面设计主要学习如报纸广告、喷绘写真、名片、路牌、企业样册、VI设计、LOGO标志、宣传单页、宣传折页、海报、包装设计及婚纱设计等,这些都属于平...
ui界面是设计是指对软件的人机交互、操作逻辑、界面美观的整体设计,UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,UI即UserInterface【用户界面】的简...
