牛耳设计学院欢迎您!
您当前位置:主页 > 校园动态 > 知识教程 >

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

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

400-0731-162 立即咨询

快速申请预约

称       呼 :
手机号码 :
备       注:

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

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

 

    锁定了Banner的视觉表现形式以后,我们来分析一下Banner在UI设计界面布局中的样式。造成布局差异的因素较多,比如Banner比例、大小、通栏、分栏、孤立还是背景对比等。
Banner在UI设计界面布局中的样式
    首先我们来看看通栏和分栏的差别,这个因素会影响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设计具体布局情况进行自定义,设计不是一层不变的方法论,而是做适合具体情况的解决方案。
Banner在UI设计界面布局中的样式
    关于UI设计的布局样式的分析远不止此,抛砖引玉,经验总结只是一个起步,探索与创新才能突破更多可能性。

 


免责声明:1、文章部分图片源于网络,均为示意图;2、所有文章、图片、音频视频文件等资料版权归版权所有人所有;3、因非原创文章及图片等内容无法一一和版权者联系,如原作者或编辑认为作品不宜上网供浏览,或不应无偿使用,请及时通知我们,以迅速采取适当措施,避免给双方造成不必要的经济损失;4、本页面内容如无意中侵犯了媒体或个人的知识产权,请来电告之,我们将于24小时内删除。
在线咨询
上一篇:平面设计中的一些设计原则
下一篇:空间设计,让平面设计“不平”

相关阅读

极简风平面设计的9个小技巧
极简风平面设计的9个小技巧

平面设计有各种各样的风格,赛博朋克风格、MBE插画风格、波普风格格、孟菲斯风格、超写实风格等等。除了这些风格,极简风的平面设计也受到了广泛的关注和喜欢。今天,就...

UI设计的10个小技巧,你知道吗?
UI设计的10个小技巧,你知道吗?

UI设计的10个小技巧,你知道吗?...

提升UX与UI界面设计感的技巧
提升UX与UI界面设计感的技巧

大家好,今天小编给大家带来一篇快速提升你的UX与UI界面设计感的6个技巧,学会这些,让你的设计更高级,越早会越好,喜欢记得分享哦,以备需要之日调用。...

点线面为创意元素的标志设计手法
点线面为创意元素的标志设计手法

点的形象。点的形态单纯而且简洁,是最简单的设计元素。形态各异的点可以给人丰富多样的视觉心理感受。单点有集中视线的作用。由两个或两个以上的点所设计产生的标志形...

牛耳教育艺术设计学院微信公众号

官方微信公众号

五一校区400-0731-162

长沙市五一广场省电教馆

牛耳教育开设有初中学历班、高中学历班课程,毕业即可拿到学历证书。开设的专业有UI设计专业、室内设计专业、平面设计专业、游戏动漫设计专业等。