UI界面视觉设计之版式布局

UI界面视觉设计要素之版式布局 

 一、网页的板式布局，常见的两种网页布局模式包括F模式和Z模式。

1、F模式。画面中，主体文字和图形的排列呈现出F的形态，这种模式往往运用于用户极少逐字阅读文字的情况下，布局常常用来进行小元素的展示，除了顶部展示区外，其他的内容会显得平淡。如果想增加平淡区的吸引，可以加入一些大图标、卡片式的内容组件等，让内容更有趣。

这是一副常见的网页设计作品，在这件作品中，我们能够明确看到导航、LOGO、重要内容、次要内容、登录账户操作等常规内容在F模式布局中的具体位置和安排。

 2、Z模式。

 Z模式就是视觉元素的排列在画面中呈现出z字形，几乎可以适用到任何的网页界面设计中，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就不会那么好。当然，这些都不是绝对的。

 当Z模式简化布局，就可以增加转化率，这种模式常见于网页内容主体是图片的页面。用户首先关注到的是页头水平方向上的内容，然后视线跳到下面，遵循从左到右的浏览习惯，重复水平浏览页尾最底部的内容。

          

 二、手机界面设计中的版式布局。

    1、九宫格网格布局。这种版式主要运用在分类为主的一级页面，

起到功能分类的作用。

                           

        

2、圆心点放射形布局。将主要的功能设置在版式的中间位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。 

                          

      

  3、三角形布局。主要运用在文字与图标的版式中，让界面保持平衡稳定。从上至下式的三角形构图，能把信息层级罗列得更为规整和明确。在界面中三角形构图大部分都是图在上，字在下，阅读更为舒适，有重点，有描述。

                             

            

    4、SF字形布局。在进行界面设计的时候，对用户的视觉移动方向的预设是非常重要的。在界面设计中运用更为顺畅的构图设计，引导用户视线的移动，就能使用户更多的观察到产品的核心和产品的卖点。

                               

             

 5、信息的排布。对任何信息进行排布的时候，必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。这些原则使得界面变得更加整齐、严谨、层次分明，提升观者的用户体验。

                        

6、留白的艺术。留白能使页面的空间感更强，视线更开阔。如下图的设计中，通过留白区分元素的存在，弱化元素与元素之间的阻隔，利用留白有目的的突出表达重点，赋予页面产生不同的变化，减轻页面的压迫感，使用户进入了一种轻松的氛围。

           

7、图片的使用。页面中图片所占的比率叫做图版率。如图一所示，提升图版率会使得画面充满活力，达到更富有感染力的效果。而图二的设计中，使用的图片较少，我们发现，图版率的降低，给人一种宁静典雅、高级的感觉。

       

8、没有设计的设计。每一条线/每一行文字/每一个按钮，都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更加关注内容的主体，弱化了对视觉的认知。如下图的作品，设计简洁明了，甚至于用户在浏览时，看到一个按钮或一行文字也感觉这是理所当然的存在，让用户感知不到刻意的设计，一切的发生都是那么自然。