UI设计中三个重要的主题化区域，你知道吗？-优漫动游
作为UI设计师来说，我们会经常关注着产品设计的变动，发现设计细节将有助于提升我们的思维。特别是在一些节庆和特殊时间段期间，你会在不经意间发现一些常见的设计细节被赋予氛围感。
在已有的架构中改变表现层，是融入主题达到氛围感的常见形式。在UI场景中有三个最常见的主题化区域：底部标签栏、顶部视觉区、金刚区，下面优漫小编为大家列举几个案例看一下。
一、底部标签栏主题化设计
1、底部标签栏图标主题
在不改动结构的情况下，替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围，无论是在节日庆典、购物季、主题活动等场景中，这个形式都是最直观的表达之一。
比如优酷APP在中秋节的时候，就将底部标签栏图标替换为各式各样的月饼造型，主题营造也是非常的明显。将原本的图标造型融入到月饼图案中，镶嵌图案的设计非常巧妙，不仅保留原本的识别特征，也强化了主题氛围感。
除了在图标造型上面发挥以外，也可以将主题文案融入到设计中，这也是较为直接的表现形式。作为特定主题来说一目了然，需要把控主题文案数量。
2、底部标签栏背景层
底部标签栏的设计中，除了通过图标设计附和主题之外，也可以在背景层进行主题氛围营造。由于底部属于操作频繁区，背景层的设计不能过于抢眼，容易干扰功能的识别与操作。比如前段时间抖音APP将底部标签栏背景层进行主题营造的时候，在黑色层上面运用的色调比较深一些，与原本黑色的沉浸式体验有差异，在白底上面呈现效果还可以。
没过多久抖音设计团队便进行了更新，压暗了背景元素的色调，弱化了视觉感。更符合原本的感官体验习惯，也能强化主题感。
除了抖音以外，小红书APP前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话，在无图标形式（纯文字版底部标签栏）上面比较适合。如果带有图标的话，适合做局部强化。
二、顶部视觉区强化主题感
顶部视觉区包含状态栏、导航栏和顶部内容区域，通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域，作为营造主题氛围来说也是非常好的选择。
该区域不仅可以作为功能性活动入口，也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理，满足多场景的需求发挥。
顶部视觉区的强化也是增强页面感官体验的方式之一，除了静态背景的营造以外，也可以使用动态或者流体渐变等形式。
三、金刚区图标设计主题化
金刚区也是作为主题化设计最常见的区域，由于该区域像百变金刚一样，较强的灵活性方便元素替换和重组。
1、图标主题化
在一些特定主题日活动中，可以将金刚区图标替换为带有主题元素的设计，以此增强活动氛围。通常是阶段性时间内展示，可以是图标造型层面主题化，也可以是主题文案镶嵌在图标造型中，灵活性相对比较高。
2、局部动效化表达
除了整体金刚区变动以外，也可以在局部图标上进行设计发挥，这样带来的干扰性比较低。通常是以图标微动效为主，以此来突出个别功能和活动主题等。不适合过度动效，容易互相干扰，适合局部动效化表达，突出局部内容的关注度。
金刚区作为曝光度较高的区域，经常作为流量分发的关键场景，主题化发挥也是非常具备灵活性的。
UI设计中三个重要的主题化区域，你知道吗？-优漫动游相关推荐
- 广州优漫动游公司：UI设计师的未来方向在哪里？
行业的崛起,使得大批人进入这个行业:而在这些人中只能筛选出极少数优秀UI设计师,所谓传言不会空穴来风,被淘汰的人就成了"行业饱和"的说法的现实支持.很多人对于UI设计的理解还是很广 ...
- UI设计中的排版设计技巧
不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...
- UI 设计中的视觉无障碍设计
我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...
- UI设计中网页的设计规范总结
很多刚入行的UI设计师开始接触网页端UI设计的时候,对于基础的界面尺寸规范可能会有一定的模糊认知,导致做出来的页面往往会感觉不是那么和谐,却也不知道怎么去完善和改进. 对于大多数的刚入行者来说,如果不 ...
- UI设计中你不知道的logo设计理念|优漫动游
logo设计,等于是企业的明灯,照亮企业的优势,一个优秀的logo设计,也是可以让很多的用户记住公司,同时一个独特的logo设计也能够为企业发展,增加不少优势,logo,作为品牌形象的组成部分之一,我 ...
- UI设计中如何做出美观实用的UI界面？
UI/UE设计指在培养从事软件人机交互.操作逻辑.界面美观整体设计工作的UID ( UserInterface Designer ).UI设计师的涉及范围包括商用平面设计.高级网页设计.移动应用界面设 ...
- UI设计中顶部栏的设计要点
移动端顶部栏设计看似简单,其实在做界面时还是有许多细节值得我们注意的.今天我就针对UI设计中顶部栏的设计要点进行简单的说明,希望能更好地帮助大家理解这个组件. 一.移动端顶部栏样式及设计要点 这里将移 ...
- ui设计中的版式设计_设计中的版式-第3部分
ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...
- [css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系？
[css] ui设计中px.pt.ppi.dpi.dp.sp之间的关系? QQ20150717160352 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: ...
最新文章
- 【点云论文速读】6D位姿估计
- Nutanix CE on Lenovo W520 初探
- PHP Mysql 网站迁移,Linux+PHP+MySql网站迁移配置
- python调用api接口获取数据_python批量爬取NCBI基因注释并调用谷歌API批量翻译
- mysql [ERR] 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘
- 传到虚拟主机在线人数不显示的解决办法
- windows Service 之调试过程
- 如何参加GoToMeeting在线会议
- 契约测试工具的思考(一)
- 海康摄像头ffmpeg推流到srs流媒体服务器
- 一文读懂：完整的支付系统整体架构！
- 深入了解电容器，电容器有哪些主要作用?
- Recent Advances in Open Set Recognition A survey全文翻译精校
- linux如何备份内核,Linux 中我该如何备份系统
- oracle11 如何启动企业管理器
- no openvas scap database found. (tried /var/lib/openvas/scap-data/scap.db)错误
- 段码液晶显示屏液交期有多长？
- **matlab中NaN函数简单用法**
- android 测试工程 关闭混淆,如何对混淆的Android应用进行渗透测试？
- 图像处理之平滑滤波、高斯滤波和中值滤波