作为UI设计师来说,我们会经常关注着产品设计的变动,发现设计细节将有助于提升我们的思维。特别是在一些节庆和特殊时间段期间,你会在不经意间发现一些常见的设计细节被赋予氛围感。

  在已有的架构中改变表现层,是融入主题达到氛围感的常见形式。在UI场景中有三个最常见的主题化区域:底部标签栏、顶部视觉区、金刚区,下面优漫小编为大家列举几个案例看一下。

 一、底部标签栏主题化设计

  1、底部标签栏图标主题

  在不改动结构的情况下,替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围,无论是在节日庆典、购物季、主题活动等场景中,这个形式都是最直观的表达之一。

  比如优酷APP在中秋节的时候,就将底部标签栏图标替换为各式各样的月饼造型,主题营造也是非常的明显。将原本的图标造型融入到月饼图案中,镶嵌图案的设计非常巧妙,不仅保留原本的识别特征,也强化了主题氛围感。

  除了在图标造型上面发挥以外,也可以将主题文案融入到设计中,这也是较为直接的表现形式。作为特定主题来说一目了然,需要把控主题文案数量。

  2、底部标签栏背景层

  底部标签栏的设计中,除了通过图标设计附和主题之外,也可以在背景层进行主题氛围营造。由于底部属于操作频繁区,背景层的设计不能过于抢眼,容易干扰功能的识别与操作。比如前段时间抖音APP将底部标签栏背景层进行主题营造的时候,在黑色层上面运用的色调比较深一些,与原本黑色的沉浸式体验有差异,在白底上面呈现效果还可以。

  没过多久抖音设计团队便进行了更新,压暗了背景元素的色调,弱化了视觉感。更符合原本的感官体验习惯,也能强化主题感。

  除了抖音以外,小红书APP前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话,在无图标形式(纯文字版底部标签栏)上面比较适合。如果带有图标的话,适合做局部强化。

 二、顶部视觉区强化主题感

  顶部视觉区包含状态栏、导航栏和顶部内容区域,通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域,作为营造主题氛围来说也是非常好的选择。

  该区域不仅可以作为功能性活动入口,也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理,满足多场景的需求发挥。

  顶部视觉区的强化也是增强页面感官体验的方式之一,除了静态背景的营造以外,也可以使用动态或者流体渐变等形式。

  三、金刚区图标设计主题化

  金刚区也是作为主题化设计最常见的区域,由于该区域像百变金刚一样,较强的灵活性方便元素替换和重组。

  1、图标主题化

  在一些特定主题日活动中,可以将金刚区图标替换为带有主题元素的设计,以此增强活动氛围。通常是阶段性时间内展示,可以是图标造型层面主题化,也可以是主题文案镶嵌在图标造型中,灵活性相对比较高。

  2、局部动效化表达

  除了整体金刚区变动以外,也可以在局部图标上进行设计发挥,这样带来的干扰性比较低。通常是以图标微动效为主,以此来突出个别功能和活动主题等。不适合过度动效,容易互相干扰,适合局部动效化表达,突出局部内容的关注度。

  金刚区作为曝光度较高的区域,经常作为流量分发的关键场景,主题化发挥也是非常具备灵活性的。

UI设计中三个重要的主题化区域,你知道吗?-优漫动游相关推荐

  1. 广州优漫动游公司:UI设计师的未来方向在哪里?

    行业的崛起,使得大批人进入这个行业:而在这些人中只能筛选出极少数优秀UI设计师,所谓传言不会空穴来风,被淘汰的人就成了"行业饱和"的说法的现实支持.很多人对于UI设计的理解还是很广 ...

  2. UI设计中的排版设计技巧

    不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...

  3. UI 设计中的视觉无障碍设计

    我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...

  4. UI设计中网页的设计规范总结

    很多刚入行的UI设计师开始接触网页端UI设计的时候,对于基础的界面尺寸规范可能会有一定的模糊认知,导致做出来的页面往往会感觉不是那么和谐,却也不知道怎么去完善和改进. 对于大多数的刚入行者来说,如果不 ...

  5. UI设计中你不知道的logo设计理念|优漫动游

    logo设计,等于是企业的明灯,照亮企业的优势,一个优秀的logo设计,也是可以让很多的用户记住公司,同时一个独特的logo设计也能够为企业发展,增加不少优势,logo,作为品牌形象的组成部分之一,我 ...

  6. UI设计中如何做出美观实用的UI界面?

    UI/UE设计指在培养从事软件人机交互.操作逻辑.界面美观整体设计工作的UID ( UserInterface Designer ).UI设计师的涉及范围包括商用平面设计.高级网页设计.移动应用界面设 ...

  7. UI设计中顶部栏的设计要点

    移动端顶部栏设计看似简单,其实在做界面时还是有许多细节值得我们注意的.今天我就针对UI设计中顶部栏的设计要点进行简单的说明,希望能更好地帮助大家理解这个组件. 一.移动端顶部栏样式及设计要点 这里将移 ...

  8. ui设计中的版式设计_设计中的版式-第3部分

    ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...

  9. [css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?

    [css] ui设计中px.pt.ppi.dpi.dp.sp之间的关系? QQ20150717160352 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: ...

最新文章

  1. 台达asda-b2伺服驱动器说明书_REXROTH力士乐DKC系列伺服放大器LED灯都
  2. 后香农时代,华为提出10大数学挑战问题
  3. CodeSmith实用技巧(十四):使用Progress对象
  4. MFC对话框程序中添加工具栏及工具栏上的Button响应UPDATE_COMMAND_UI消息
  5. mysql unsigned 溢出_mysql unsigned 用法及相减出现补数溢出解决方法 | 学步园
  6. JCreator 写applet
  7. 一个有趣的说法:多层神经网络的致命问题与过拟合
  8. 类型字节oracle 增强型时间类型以及postgresql时间类型
  9. Red5流服务器搭建(实现在线直播,流媒体视频播放和在线视频会议)
  10. Python爬虫入门以爬取当当商城图片为例
  11. 动态规划——1296:开餐馆
  12. BootStrap 移动设备优先代码
  13. html 拓扑图 开源,GitHub - pylixm/zJTopo: 开源拓扑图工具类jTopo的扩展,jtopo是一个不错的拓扑图,基于html5 canvas,功能强大...
  14. 由点及面,一叶知秋------集合大家庭
  15. 小猿圈 python学习-细讲数据类型-字典
  16. 金蝶K3开发-工业单据自定义控件
  17. oceanbase导入csv文件异常
  18. 【Java】什么是面向对象
  19. java程序及数据库常见问题
  20. bootstrap模态框保存后清除模态框数据的方法

热门文章

  1. 一生之中最值得看的书
  2. 广州计算机专业学校有哪些,广州大专计算机专业学校排名
  3. 【Spring源码这样读】-怎么阅读源码
  4. Beyond neural scaling laws: beating power law scaling via data pruning
  5. 员工管理系统之MYSQL
  6. 小米12的技术创新之一竟是散热系统,或反映骁龙8G1发热问题
  7. 小程序的HTTP请求
  8. 银行业务网点信息安全,远程监测终于实现了
  9. 04-Ajax传输json和XML
  10. ssh免密登录(使用公钥私钥对登录)