Banner在UI设计界面布局中的样式

锁定了Banner的视觉表现形式以后，我们来分析一下Banner在UI设计界面布局中的样式。造成布局差异的因素较多，比如Banner比例、大小、通栏、分栏、孤立还是背景对比等。首先我们来看..

400-0731-162 立即咨询

Banner在UI设计界面布局中的样式

发布时间：2020-11-25 热度：

锁定了Banner的视觉表现形式以后，我们来分析一下Banner在UI设计界面布局中的样式。造成布局差异的因素较多，比如Banner比例、大小、通栏、分栏、孤立还是背景对比等。

首先我们来看看通栏和分栏的差别，这个因素会影响UI设计中Banner所能呈现的大小。常规理解都觉得Banner越大越好，如果考虑到产品内容布局和信息层级区分方面，也会注意到整个界面布局的舒适度。所以，界面整体的风格和布局样式也会影响Banner布局样式，需要融合而非格格不入。

如果遇到一些UI设计界面布局头部采用深色，在布局Banner的时候为了让空间感更强，也会让Banner布局于头部背景上层。通常背景色为固定色值和变动色值，变动色值会根据轮播图的色彩来定义背景色值，这样的设计解决方案不仅融合度高且空间感强。

关于Banner的比例是很多产品UI设计师不断探索的方向，比例影响高度值的控制。界面布局内容量的不同影响高度值的不同，根据内容自定义也是可行的方法之一。也有设计师会根据斐波那契数列计算，推荐出宽高比例有8:5、8:3、8:2、8:1等，在计算的过程中我们通常取能被4整除的数值。

我们将Banner的宽度值定义为：W，高度值定义为：H，比值关系用：Y（Y为5/8、3/8、2/8、1/8等）。得出计算公式：H=W*Y，得出来的值取能被4整数的数值即可。这只是其中一种计算形式，设计师也可以根据UI设计具体布局情况进行自定义，设计不是一层不变的方法论，而是做适合具体情况的解决方案。

关于UI设计的布局样式的分析远不止此，抛砖引玉，经验总结只是一个起步，探索与创新才能突破更多可能性。

【在线咨询】

上一篇：极简主义的UI设计指南
下一篇：空间设计，让平面设计“不平”

牛耳职业学院欢迎您！

精选热门专业

校园动态

联系方式

Banner在UI设计界面布局中的样式

Banner在UI设计界面布局中的样式

相关阅读

设计师如何提高用户体验

人工智能时代，设计师如何迎接AI的冲击

APP设计中的风格变化

怎么做好AR界面设计，把握好三个关键点！