恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
分享关于Banner布局样式的研究【UI设计师】
7.2°
原创文章 / 教程 / / 举报
1435 11 4 0

2021-02-14

分享关于Banner布局样式的研究【UI设计师】

Banner其实对于UI设计师来说并不陌生,更多的还是在于视觉表现层,但是它的本质是关于产品设计中的布局样式分析。那么通过本文大家来一起梳理和探索!


一、视觉层表现类别


Banner 在 UI 场景中通常伴随着轮播的形式展示,所以也经常称之为轮播图,这也是导航的一种形式之一,也有轮播导航的功能。在产品中出现可以带给用户平台需要重点传播的内容,比如产品活动信息和官宣咨询、年度佳节等。


为了能引起用户更高的关注度,Banner 在视觉层的表现上面也在不断的创新。除了 Banner 设计创意、构图、配色等视觉层面发挥以外,在表现类别上面我分为静态、动态、视频、分层视差等。



1.1 静态Banner 展示


此类型的轮播图是最常见的,无论是设计效率还是对于IT技术落地都是最为便利的。此类型的画面可分为单图或多图的图片格式,单图是静态的展现形式,多图可以设置自动轮播或手动左右滑动切换。



1.2 动态 Banner 展示


动态表现的 Banner 相较于静态而言更能引起用户的关注度,因为动态的东西可以打破静态的视觉平衡,引起的视觉权重更高,更能强化信息重点,在一些重点元素和交互按钮等地方实行动态表现。

在这个万物互联的时代,产品设计师都在不断的尝试如何更快、更准地获得用户的关注度。微动效是其最有效的一种表现方式,无论是在功能交互还是视觉表现层面,都随处可见。




1.3 视频嵌入banenr展示


随着当前短视频的走热,视频形式作为信息流越来越得到重视,视频嵌入到轮播广告中逐渐增多。较多的表现形式为默认出现在首个 Banner 中,伴随着倒计时出现,也可以关闭播放。此类形式为了降低用户在未知场景中的使用干扰,通常默认为静音模式,带给用户更加友好的体验。



1.4 分层视差效果展示


分层视差效果能打破常规表现形式的广告,可以带给用户不一样的视觉呈现和互动体验,具体有轮播叠加的视差、3D翻转、元素和背景分离视差等方式。




最后:


Banner 在很多产品中是较为常见的元素存在,一个好的体验也许只是一个细节的探索,如果能在每一个功能设计的时候都能把控每一个细节,必能带给用户更好的使用体验。


END

更多干货可关注微信公众号:产品设计研究院 想学习更多关于产品、设计、职场、心理、认知等干货,可长按下方二维码,关注我们。回复【社群】一起聊!

 

Powered by Froala Editor

收藏

11人已收藏

1o∨e笑°☆随风~

追逐视觉设计的小白进阶中

  • 1

    作品

  • 1

    粉丝

  • 2

    关注

猜你喜欢

    1o∨e笑°☆随风~

    1o∨e笑°☆随风~

    追逐视觉设计的小白进阶中

    • 1

      粉丝

    • 7.3

      人气

    • 49

      颜值

    作品

      GDC Award 2021启航

      推广

      1o∨e笑°☆随风~

      点赞:4

      收藏:11

      评论:0

      分享关于Banner布局样式的研究【UI设计师】

      你确定要举报分享关于Banner布局样式的研究【UI设计师】

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年02月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录