界面构图中圆心与三角形构图的特点及案例分析

上次跟大家分享了界面构图中的九宫格构图，今天就继续来说说圆心放射构图与三角形构图，其中蕴含着哪些最基础的版式设计理念，让我们一起梳理梳理，为初入UI行业的读者提供一个参考。

圆心放射构图

在生活中，最为常见的就是圆形了，眼睛是圆的，太阳是圆的，碗也是圆的，天也是圆的。在界面设计中，圆的运用可谓是点睛之笔。

圆是有圆心的，在界面中，往往通过构造一个大圆来起到聚焦和凸显的作用。

放射形的构图，有凸显中央内容或功能点的作用。在强调核心功能点的时候，可以试着将功能以圆形的方式排布到中间，以当前主要功能点为中心，将其他的按钮或内容放射编排起来。

我们将主要的功能设置在版面的中心位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。

案例分析

在界面设计中，圆形的运用能让界面显得格外生动，多数可操作的按钮上或交互动画中都能见到圆形的身影。因为圆形具有灵动、活跃、有趣、可爱和多变的特征。在界面设计中合理地将圆形的设计与动画相结合，能让整个界面鲜活起来。

如果再加上旋转围绕的动画，会让整个界面更加灵动。界面中的圆形能集中用户的视线，引导点击操作，突出主要的功能点或数据，把产品核心展现出来。圆心点放射形的设计，会使软件感觉更为智能化，包容万象。

如果要体现的功能点非常简单，例如只有几个功能按钮的时候，可以尝试使用大圆形进行展示设计，突出最重要的功能，然后罗列并排出其他的功能点。这种方式非常实用，就和画重点一样，圈出最重要的数据。善于运用大圆构图，能撑起整个画面，让界面圆润而饱满。

圆心放射的构图运用到Banner设计中可以起到很好的聚焦作用。

使用放射形状的图案作为背景有利于让用户将视线集中到中心点的文案主题上，用这种表现方式设计出来的Banner具有非常强冲击力，主题也是一目了然。

三角形构图

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

案例分析

Gogobot的登陆页在设计时将Logo图标及字标作为一个图片整体放在了上面，而输入框作为核心描述放到了三角形的下面，也是整个界面的中心，大大的加强了用户对产品的理解，同时也可以让用户以最快的速度找到搜索这个主功能。

在个人信息页的设计中，比较常用的也是三角形构图。头像明确了这个页面的内容，而下面的粉丝和喜欢等数据就是对本人的一个描述和介绍。

在设计下面的这个儿童卫士宝贝信息设置页时，结合了三角构图与圆形构图一起进行设计。将体重刻度做成可滑动操作的效果，而卡通形象用来突出设置的对象及这个页面的功能。

好啦！今天就分享到这里！

来源：MICU设计