今天和大家聊下 UI 设计中的一些排版的设计原理，作为UI/UX 设计师，如何更佳有规律的去掌握排版设计能力。这样能保证你在设计中的界面处理能力到达一个长期稳定的水准，而不是时好时坏，下面进入正题(备注：以下图片均来源于网络)。

UI排版设计4大原则

视觉焦点

层次结构

视觉重量

视觉方向

视觉焦点

视觉焦点就是在界面中占主导地位的视觉元素，第一时间进入你眼睛，在整个设计中你不能强调所有设计元素。

上图的界面中作者通过色块来强调重要的日期选项记事，这样能吸引你的注意力，关键重要元素高亮显示。

这个选座购票中中间座位元素都是同一个，但是选中后的效果突出，形成视觉焦点，右边的异常界面提示按钮形成焦点。

这是反面例子，右边界面所有元素看起来都很重要，没有一个明确的视觉方向指引，看起来有颜色的都能点击?

层次结构

在几秒钟内,用户就能明确知道要点和页面元素之间的关系，并且顺利完成当前任务。建立视觉层次结构可以通过大小，对比，颜色，肌理，留白，空间，可感知的视觉重要，好的设计它的视觉层次结构分明且符合用户阅读习惯。

界面中的视觉关系我标注出来了，我们可以思考别人作品是通过什么来表达这种层次关系。其实可以直观看出运用有颜色、大小，明暗对比(列表文字关系)。

顶部视觉焦点第一也是导航比较重要的一部分，下面介绍设计师和联系图标，右边页面顶部视觉重量大，里面文字通过明暗关系区分层级。

视觉重量

如何去衡量视觉重量，影响视觉重量的因素有大小、对比、颜色、留白、形状、位置等等，那么在一个界面中如何把握视觉重量的比例，下面看几个例子：

大家看完有什么感受吗?他们大小都是120px。

第一个例子为何左边看起来比右边大

第二个例子为何黑色视觉重量比较大

第三个例子为何红紫色比左边方块更吸引眼球

上面三个场景我们会在界面中，图标设计中会经常遇到，下图是调整后的大小左边方形大小是108px右边圆形还是120px

图左边为何我会第一时间留意中间logo 而不是大面积的蓝紫色，因为留白，周围没有任何元素。

图右边按钮第一时间吸引我，这就是通过颜色来吸引我的视觉焦点，需要关注的重点的地方。

图左边购买按钮和评分，购买按钮第一进入眼睛，黑色在白底上视觉重量比较大。

图右边选座购票区域，都是圆形，通过颜色来区分他们之间的层级关系，重要的内容通过颜色强调，次要的通过明暗关系来表达。

视觉方向

前面讲了视觉重量，它能第一时间把你带到特定重要的位置，那么接下来视觉方向是引导的一个作用，设计师要做的就是通过视觉引导，让用户能快速完成任务和达到预期目标，常用的视觉引导有Fpattern 和 Zpattern,下面来和大家详细说下。

左边图标和右边列表形成一个竖向轴的概念，那么就会有线，线连接元素的方向。

右图再看下形成Z字结构，就是我们说的Z模式。

上图6个功能入口的图标水平排列，内部系统的建立一个平行轴的关系，所以视觉方向比较清晰。

总的来说要形成视觉方向就需要有线，这条线是看不见摸不着，他是通过轴来形成。

如何形成轴的概念，那通过对齐，相同形状元素。

总结

上面一共说了UI排版中常用的四大排版设计原则，综合使用能给排版设计带来质的提升，视觉焦点、层次结构、视觉重量,三者相互影响。

最后视觉方向是前面三者影响的结构，用户能否顺利在你的产品完成任务，达到预期目标，全靠视觉方向指引，那么这些我们通过大小、对比、颜色、留白、形状、位置等来协调使用他们。

免责声明：本文由小编转载自网络，旨在分享提供阅读，出处不可查，如有侵权请联系我们进行删除，更多精彩内容请关注UI培训官网

UI即User Interface（用户界面)，简称UI，是指对软件的人机交互、操作逻辑、界面美观的整体设计,举个例子：打开手机所看到的界面和图标、或者打开各种手机APP软件，呈现在你眼前的都是UI设计,比如打开微信、操作点击任意一个功能，出现在你眼前的界面都是属于UI设计。UI设计需要学习的东西有很多，软件只是基础的东西，想要新手想要学好UI设计，首先得熟练掌握UI设计师必学的软件：PS、AI、AE、ARP、C4D等,对于新手而言，一定要先把基础软件学扎实了，再去学习图标设计，界面设计，学UI设计虽然门槛低，但是学起来需要花费一定的时间和精力。UI前景广阔，需求巨大，就业范围广，可以进入互联网公司、设计公司、互动广告公司展览展示公司，也可以进入互联网公司、电商公司等从事相关工作,例如UI设计相关岗位，用户界面设计师，软件图形设计师，交互设计师，用户研究工程师，软件产品设计，移动APP设计，Web端界面设计。