7个UI布局技巧，阿里字节设计师都在用！

 1.  通过重要内容去布局 

如上图所示，在做设计之前，先和产品经理对焦清楚页面内容。然后设计时候，优先考虑重要内容呈现。越是重要的内容，占比面积越大，相反越不重要内容占比越小。这个是布局很重要一个技巧。

如上图产品设计，最重要的是这个商品种草，所以页面最大篇幅给了模特。去种草这个商品多么的好。那么次要信息就立即订阅，所以在图片中放一个适中的按钮，突出唯一的行动点。顶部文案和下方箭头都属于次要信息，所以设计时候也进行了弱化处理。

纽约客的网站设计，设计师先确定重要内容优先级，对于最重要的今日头条内容，放在居中位置，并且最大的照片最大的字体去处理。次要的信息放置在左上角的照片和次要字体。根据内容重要优先级去做布局。

ZARA官网设计，最重要当季新款衣服用最大的照片展示。次要的款式用小图，小的文字展示。通过比例，大小对比来做内容布局。

TWO ISLANDS官网设计，顶部第一眼看见的是最新的商品在打4折，其次就是不同类目商品图片，下面就是一些子商品。根据内容重要程度，再去决定设计元素大小，是最常用布局方式。

 2.  通过视觉层次去布局  

布局层次很重要，基础上视觉层次的结构大小是根据内容优先级呈现的。越重要的内容，在视觉表现上越突出。这样也能更好让用户理解产品。

比如电影产品设计，当你看见感兴趣的海报时候，你自然而然想去点播放。所以设计师最吸引眼球的是海报的设计，其次就是播放按钮。你感兴趣直接播放。通过视觉去引导用户行动点。

用户看见这个美妆商品，看见模特的一些妆容效果，上面那些引导的小圆点元素，就会去点击。想知道模特有的哪款产品，就会去点击下面的商品卡片。通过视觉引导，去引导用户商业操作。

这个页面设计元素从重到轻优先级是：蓝色按钮，白色卡片，白色按钮，小圆点按钮。设计师把最重要的购买用蓝色突出，其它的逐步弱化在页面里面。视觉层次是处理信息很重要的一点，你可以通过色彩，大小去处理这些层次关系。

上图nike的app设计，最主要的信息购买鞋子，所以核心按钮用绿色按钮，绿色色块演示。通过颜色和大小，不断强化视觉层次优先级。

 3.  使用不对称布局 

对称布局有两种布局形式，一种是对称一种是不兑现，对称布局比较适合左右两侧商品比较相似的产品。优先性差不多。非对称布局会比较突兀能更突出另外一侧信息，也是在视觉布局中常用的一种手段。

上图网页设计非常有吸引力，设计师通过不对称设计，整体呈现的效果非常有吸引力和实用性。

这个海报设计，左右两侧是对称的，中间的部分是非对称的，这样能很突出中间的内容。同时设计看起来也特别灵活。

这个艺术装饰设计，同样采用不对称布局。非常让人印象深刻。左边都是比较有规律的圆球，右侧突出出现不对称感觉，给人印象很深刻，同时也吸引人眼球。

非对称的网页设计，左边是文字，右边是图像，兼具实用性和艺术美感。

 4.  通过间距去布局  

布局里面至关重要的一点就是运用好间距，间距是你将一个布局与另外一个布局分开很重要的一个手段。间距也是布局中最主要的一点。合理运用好间距，能让布局更清晰。

上图设计师通过留白，将页面分为上下部分。间距可以是白色，也可以是彩色，也可以是其它，不一定间距一定要是空白。当然空白是比较常用。‍

留白在时尚行业也用的比较多，上图loewe的香水海报设计，瓶身的留白，海报图留白，瓶身标签设计的留白，人物的留白，让这个设计充满了神秘与性感。所以间距不一定白色，留白也不一定是白色。

这个APP设计非常简约大气，纯粹就是通过间距和留白来布局的。左侧页面通过间距来区分菜单模块，右边菜单通过间距来区分商品和商品介绍。

电商详情页设计，设计师通过留白间距来区分不同模块，商品模块，详情图，行动按钮模块。

这款产品设计也是，设计师通过间距作为产品核心布局元素，没有多余的线条，每个模块分割都是用的线条，简单好用。并且让页面显得非常的干净和利索。

 5.  通过中断去布局  

什么是中断布局，就是页面中原本的元素是这样的，突然换一个形式，让他从其他元素里面拖延而出，通过这样来吸引用户注意力。

比如上图设计，页面中本来都是横向小卡片布局，突然变成了一个上图下文的卡片设计，你一下子就吸引了。

这个页面头像本来全部都是矩形的，突然出来一个新的是个圆形，那么就跳出来了，被用户注意到了。它有不同的地方，会吸引去了解。

这个网页设计，平时图形都是矩形的瀑布流，突然的图片变成了异形，一个其他的图形，通过中断的方式，让用户很好的注意到。

海报设计，本来海报全部都是文字，通过中断设计手法，突然出现一张作品，你就会被照片所停留。所以中断是经常用在页面布局一种方式。

 6.  通过网格去布局  

通过网格布局，这个是也是最常用的方法，网格有助于我们去做页面布局。

网格吸引值得所有设计师都要掌握的一个技巧，如果说我做设计这么多年，什么技巧对我印象最大一定是网格系统。

网格系统不仅在UI，在平面设计里面都是最常用的布局方式。几乎各位看到的一些优秀设计，都使用了网格布局。

它可以说是你设计的骨架，你设计的核心精髓。

网格系统也是大家做版式设计必备的一个技巧，一定要去学习。

 7.  不可忽略的对比布局  

做页面布局很重要的一点，就是不要忽略对比。当你设计一个布局时候，一定要思考和周围元素之间的对比关系。如果对比没有拉开设计是无效的。

上图设计师在图片上文字，按钮采用一个非常醒目的对比色作为配色原色，让按钮在头像上清晰可见。所以做布局时候，一定要考虑对比。对比包括大小，颜色，静态动态等等。

设计师在做这个网站时候，采用了一个非常夸张的对比，一个巨大的文字和上面的图片形成很大的反差效果。

在图片上放置文字，设计师将文字放大，和小的文字进行对比，同时文字和背景的图片元素形成了很强的对比。

一组商品图中，突然出现一个不一样的形状，一下子会让你注意到。并且对比拉的非常的开。所以大家做设计布局时候，不要忽略忘记了对比的使用。

   最后 

今天这篇文章，只是一个抛砖引玉。旨在帮助大家去做一个好的版式，好的界面布局，希望对大家有所启发，请记得把文章转发到你的朋友圈，点个在看，咱们一起加油吧！