恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI 场景下的春节氛围设计
92.2°
2022-02-17 | 原创文章 / 经验/观点 / | 举报 | 17530 187 288 4

春节对于我们来说是一年一度最重要的节日,大家都会在这个时刻按下工作的“暂停键”,仿佛是让忙碌的时间静止一样。大家都会回到家乡团圆,沉侵在春节浓厚的氛围中。


在 UI 场景中为了烘托春节的氛围,在设计层面进行了哪些发挥,今天黑马哥特意为大家总结了一下。梳理了一下 UI 场景下的春节氛围设计,让我们一起看看吧!




目录


一、应用图标设计

二、金刚区图标设计

三、底部标签栏设计

四、导航栏设计区域

五、顶部视觉区域

六、背景氛围强化

七、模块分类强化

八、闪屏氛围营造

九、功能区域置换

十、运营设计营造




一、应用图标设计


应用图标是用户接触产品的第一个环节,也是视觉差异化体现的重要部分。在春节主题氛围中也是表现丰富多样,从不同的方向体现出春节的浓厚氛围。


主要的处理形式会围绕春节主题文案、生肖卡通形象、主题皮肤、春节元素和颜色等。以春节主题文案举例,通常是春节祝福语和营销结合的文案为主,设计在应用图标底部居多,将图形适当向上位移进行视觉平衡。也有一些产品结合自身图标因素,将文案设计在顶部位置,也是为了保持整体结构的稳定性。



除了文案表达以外,配合生肖卡通形象也是较为常见的手法,可以是局部元素的装饰,也有是作为皮肤使用的。比如今年是虎年,利用老虎的形象或者局部元素表达也是层出不穷。



无论是文字表达还是图形结合,应用图标上的表现都是在主题活动中优先考虑的场景,这是被用户在众多产品中发现的第一眼。




二、金刚区图标设计


金刚区就像百变金刚一样,将各种功能和业务聚集在一个区域,便于用户进行快捷操作。在金刚区图标上面进行设计发挥是最为普及的,春节期间众多产品都在各种形式上面进行发挥,呈现出很多优秀的设计案例。


最为简单的做法就是将带有春节主题的文案融入到图标设计中,这个形式适用于各类节假日和活动主题中。表现手法也是非常简单的,配合元素点缀和色彩渲染,很容易体现出主题氛围。



保持图标造型不变,在外形轮廓背景中融入春节元素也是一个可行的方向。比如将灯笼作为图标背景,配合元素装饰和色彩搭配,呈现出的春节氛围也是非常浓厚的。



也有结合春节元素对金刚区图标进行设计重构,带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等,结合中国红营造出浓厚的春节氛围。



将春节元素点缀到图标中也是一种不错的选择,或者配合春节主题颜色进行搭配,也能够营造出浓厚的新春氛围。



金刚区图标设计是营造氛围的最佳区域,不会对业务布局和产品结构造成影响,能够根据氛围的要求作出灵活的调整。




三、底部标签栏设计


底部标签栏是用户进行功能模块切换最频繁的区域,通常营造氛围和金刚区一样,都是非常直观和效果显著的区域。


将春节元素融入到底部标签栏图标设计中,带来的感官体验是非常不错的。可以是单个的春节元素,也可以是元素的局部装饰,都可以非常直观的传达给用户,突出春节活动氛围。



也有将春节主题文字融入到图标设计中,一种是直接结合字体设计和春节元素表达;一种是结合外轮廓背景,字体作为图标部分镶嵌入背景中。文字的识别性有助于用户更快理解,传达氛围也是非常直观高效的。



如果不想改变太多,也有一些产品只是在中间凸起模块图标上面进行氛围设计,也能传递春节的氛围。这样的设计解决方案最大限度的保留了原本的设计内容,属于弱氛围营造,也能达到一定的氛围营造目的。



除了在图标设计上面营造以外,也能在底部标签栏背景上面营造,配合中国红营造出来的氛围也是非常浓厚的。也可以是配合颜色和元素进行营造,比如烟花效果也是不错的选择。



底部标签栏设计区域的氛围营造效果非常显著,无论是背景层面的营造还是图标设计上的创新,都能带给用户非常直观的体验。




四、导航栏设计区域


导航栏+状态栏通常是品牌色或者白色居多,也有少数产品会使用其他颜色进行设计。在春节期间这个区域也是作为氛围营造的不错选择,除了利用中国红作为颜色层面的选择以外,也有结合春节元素进行设计表达的。



除了静态的设计表达以外,也有结合动效的表达提高吸引力,突出春节浓厚的氛围。(比如:途牛旅游)





五、顶部视觉区域


顶部视觉区域和导航栏区域比较类似,不过顶部的范围更大一些,运用的场景更多一些。除了首页以外,在其他主界面也可以使用这个区域,带来春节氛围的营造。


首页 Banner 区域是顶部视觉区域面积较大的板块,结合 Banner 进行背景营造,带来的视觉效果也是非常突出的。



除了根据 Banner 效果营造以外,也有只是营造背景层面的形式,将背景颜色营造出春节的氛围,效果也是一目了然。


在其他的主界面中顶部视觉区域也可以进行营造,比如个人中心的视觉营造,带给用户的感官体验也是非常的直观。





六、背景氛围强化


除了在局部的区域进行背景的氛围强化以外,也有将大面积背景进行春节强化的。通常是通过颜色来强化,比如通过中国红来烘托春节氛围,也会在背景中装饰一些春节元素,进而增强氛围感。


背景强化适合卡片式布局,更能衬托出空间感,强化视觉效果。





七、模块分类强化


在大视觉模块区域强化表现是较为突出的,为了体现精细化的表达,在细节的设计中也会加以注重。


细分模块的设计嵌入可以弱化视觉比重,也能达到融入春节主题的目的。比如在模块分类的设计中,将春节主题字体替换到类别中,作为活动栏目的表达,也是非常不错的设计表达。





八、闪屏氛围营造


闪屏和启动页本身属于相同的表达,都是为了缓解用户启动应用时,等待过程中所产生的焦虑感。不过随着闪屏广告的概念,被区分呈现出来了。


体验了很多产品,发现还是闪屏广告居多,以营销活动为主的案例较多。单纯突出春节主题表达的很少,以春节主题配合营销活动设计比较多些。



不过启动页的位置作为主题氛围营造是值得考虑的方向,作为品牌情感化的延伸是非常不错的选择。




九、功能区域置换


功能区域在这个环节我是作为整合而存在,指的是下拉刷新、空状态、加载、主按钮等等。在一些重点区域强化春节氛围是很多设计师的首选,也有一些会在细微之处深入挖掘。


下拉刷新对于一些内容更新频繁的产品来说,是用户操作非常频繁的功能。通常情况下,是结合文案提示、默认动效、品牌元素、吉祥物动效等进行表达,而春节期间很多产品也嵌入了春节活动,将功能区域进行置换。不仅可以达到刷新的目的,也能带给用户春节的氛围感。



在一些主按钮比较突出的产品中,也会在按钮的设计上面融入春节的元素,在细微之处带给用户氛围感。



以上案例仅为列举,功能区域置换是一个可以探索的方向,不仅可以达到突出主题的目的,也不会影响功能的操作。




十、运营设计营造


运营设计通常都是最活跃的,不会放过任何一个主题的参与,春节这样的大节日更是重点参与的对象。


在春节期间通过各类活动的设计突出春节氛围,让用户在感受氛围的同时促进消费。除了在视觉效果上呈现出丰富多样的表达,在互动玩法上面也是费尽了心思,带给用户更多趣味和年味。



运营设计的营造主要是在专题活动的表达上呈现,也会配合 Banner 设计或者其他插入式广告,还有弹窗广告的结合也是较为普遍。





小结


春节随着时间的推移已经过去,本文梳理了在春节期间观察到的移动端 UI 层面的变化,总结案例是为了探索大家的设计解决方案,积累更多不一样的设计思路。案例主要以感官层面的为主,希望这些视觉表达层面的思路,可以带给你更多灵感。


本文主要是个人观察所感,不足之处望大家自行补充,我们互相进步。



作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。

Powered by Froala Editor

微信公众号:黑马家族

创建于:2022-02-17

收藏

187人已收藏

黑马青年

设计交流微信:heimaux

  • 111

    作品

  • 2.3w

    粉丝

  • 144

    关注

  • 21 天图标设计作品集
  • UI 场景中常见的 3 个主题化区域
  • 作品本身不足,与包装无关
  • 职场中要学会拒绝

    猜你喜欢

      2022-02-17 | 原创文章 / 经验/观点 / | 举报 | 17530 187 288 4

      UI 场景下的春节氛围设计

      92.2°

      你确定要举报UI 场景下的春节氛围设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2022年02月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      288
      187
      4

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

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

      登录

      手机号

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

      登录
      第三方账号登录