在做UI界面时，很多时候我们需要看很多产品进行竞争产品分析.市场调查，无论是交互逻辑还是设计细节，都占用了设计师的时间成本。在这里，我分析整理了一些常用的实用设计技巧，帮助您节省了一些收集数据的时间，希望能帮助设计师提高设计质量和效率！

在界面布局设计中，可以用平面设计中的结构思维方法来理解UI界面中空间元素结构的分布对应，以新闻客户端为例进行页面元素分析。

为了使阅读效率更高，可以采用不同的标题规格.不同的排列比例或不同的色底进行层次划分。线条分割和空间分割的区别给人一种压迫感，空间分割给人一种更容易阅读的感觉。让我们来看看qq音乐会员中心页面设计，不同层次对应不同颜色card，使用色彩填充背景来吸引用户增加界面的比例，引导账户转换视觉，是一个很好的设计理念。

有时我们在做设计的时候会去追求“高级灰”.“高逼格”亦或者是“特有性”其实更重要的是要符合产品的调性和目标群体，不能盲目追求自己“设计追求”例如，以下两个案例很好地表达了产品的特点，清楚地告诉客户我做什么产品，为什么服务什么样的人。表示图片中相对更突出的内容，让用户在浏览产品时获得先进个视觉关注；焦点是相对的，可以是大页面的焦点，也可以是小模块的焦点。

平衡是布局元素前后左右比例适中，给人一种稳定平衡的视觉感受。平衡的布局设计可以使画面稳定，不会造成上下比例障碍，平衡的比例构图令人愉快，而不平衡的设计会导致不稳定的注意力分散。视觉平衡是指设计中负元素与正元素的比例相对合适，设计师的作用是发挥元素视觉重量的构图平衡。节奏设计式的节奏设计表达，更常见的是在统一的风格节奏中穿插不同的模块，以促进页面的节奏更加弹跳和灵活，如节奏设计方法用于网易云音乐的布局设计。弹跳的节奏给人一种活泼、时尚、现代的感觉，不会让画面单一、枯燥地呈现给客户；灵活的节奏也给很多付费内容带来了很好的呈现方式。不同行业的边距大小不同，内容信息较多的文字与购物产品的边距相对较小，而很多都是图片.以视频和音乐为主的产品相对较大！我为您整理了常见的参数，方便设计师查看和参考，不需要每次测量许多产品。

我们发现很多产品都是移动的Web端网页的Feed流版设计结构会有所不同，如果是你，你会这样排版吗？

事实上，这样的布局设计师是有原因的。首先，手机更多地使用文本标题作为吸引人的视线，而图片在移动终端上显示较小，因此许多图片的清晰度和内容呈现不够清晰。第二，与移动终端不同，网页上的图片较大，可以起到很好的作用，正是因为网页上的呈现空间较大，所以当标题较短时，如果仍然按照移动终端结构，标题和图片之间会有空白，导致视觉浏览不连贯，这就是为什么不同平台的布局不同。

不难看出，整体界面的主色调是以绿色为基本色进行大规模应用。橙色在绿色中的应用非常鲜明，形成了强烈的对比，让用户清楚地知道这是一个强大的引导入口。

当我们在网上购物时，我们通过图片的先进印象获得更多的产品，所以图片在购物网站上的比例尽可能适合我们自己的产品特点，以使布局设计更好；常见图片尺寸为16：9.4:3.3:2.1:1.2:1.1:0.618(黄金比例)，

比如淘宝.京东产品图片，在有限的空间内，方形比例是大的空间展示；优酷选择16：9的比例更符合人眼浏览视频的习惯。