开发者社区 > 博文 > UE Design | 官网banner的圆点指示器设计
分享
  • 打开微信扫码分享

  • 点击前往QQ分享

  • 点击前往微博分享

  • 点击复制链接

UE Design | 官网banner的圆点指示器设计

  • 云与AI设计部
  • 2021-01-26
  • IP归属:未知
  • 183480浏览



    在本次定义京东云设计风格的项目中,banner作为首屏,是重点整改区域,最能体现整个网站的设计风格,但banner更多的在于UI设计,那作为交互,我们可以考虑从一些细节上着手,本次就针对圆点指示器做了一些创意的想法。


    圆点指示器常见的作用包括数量指示、位置指示,在看过更多的竞品之后,可以发现指示器还可以加入时间指示、预览等功能,针对这些作用做些发散思维的设计,来契合本次脑暴中的灵动、科技、趣味、多变等风格关键词。


    发散思考一


    改变固有的圆点形式,以更有趣味性的钢琴键形式表现,为契合logo增加渐变色彩,当鼠标移入或者轮播至某键后,适当增加高度,以表示当前位置;




    发散思考二


    在原有圆点指示器的基础上,以进度条的形式表示当前banner的切换时间,当进度条走到终点时则切换下一张,为契合logo增加logo渐变色,此方式切即有趣味性又能让用户体验到灵动感。




    发散思考三


    当前圆点指示器功能比较单一,能否改为banner预览样式,即达到了指示器的作用,又能让用户预览到后面的活动内容。初步方案如下:




    小结


    后续思考中,感觉此方案在形式上有严重的缺陷,过多的缩略图影响了banner的展示,在排版中也与下方的运营位冲突。下面的是改进的方案,依然保留圆点指示器,在移入指示器时,显示出banner的预览图;









    共0条评论