主题切换
官网结合 UED 项目支持组件库主题切换了!
官方主题
我们提供了一些官方主题,欢迎在Hzero项目中试用,并且给我们提供反馈。
- 鲸海蓝
- 冰峰白
- 孔雀蓝
- 极光蓝
- 风铃紫
官网主题切换预览按钮位置在界面右下角。
官网主题切换仅仅提供了 demo 预览,官网基于 SSR & GATSBY 还存在一些兼容性的小问题,不同主题适用对应场景在实际项目中使用效果更好。
鲸海蓝(WHALE)
官网默认主题,也是组件库预设主题,基于 Material Design 设计体系 V3 版本设计。
冰峰白(ICEFLOW)
轻盈简洁的设计语言,蓝色系与白色搭配,聚焦视觉中心,强化组件反馈动效
孔雀蓝(PEACOCK)
HZERO平台默认主题,深蓝与孔雀蓝的高对比色彩方案
极光蓝(AURORA)
基于冰峰白主题,使用更多高纯度色彩搭配及大圆角的圆润设计风格
风铃紫(CAMPANULA)
猪齿鱼平台新版主题,对“鲸海蓝”主题进行体验优化。采用设计流行趋势如:“软渐变,多彩高对比度,大圆角,极简”等,完成视觉升级的产物。
关于主题切换
组件库拥有经验丰富的 UED 团队,具备企业级产品设计体系。设计者可从组件主题中获取灵感,也欢迎与我们的 UED 团队相互沟通交流。
如何使用
目前主题切换功能暂未完全开源,支持主题切换的 UED 项目还在不断优化内测中。
相对稳定的主题切换使用可在 Hzero 框架项目中使用。Hzero 框架项目已集成相关功能,更多信息详情参考HZERO汉得企业级PaaS平台,赶快免费试用吧。
适用场景
可以看到以上几个主题设计风格相差不小,因此适用场景也有差别。不同主题对于组件本身属性支持可能有一定差别,例如扁平风的冰峰白和极光蓝就没有 Button 组件的flat & raised 区分。
在对应项目需要不同主题支持时,建议在项目开发阶段就制定好对应界面设计规范,避免切换主题导致界面布局错乱、样式相差较大。
后续规划
我们会对 UED 项目做进一步优化并开源,支持各位更便捷的自定义主题,支持您设计和完成产品独一无二的风格。
针对官网 demo,后续在做主题切换后,我们会做更适用于主题场景的 demo 展示,便于您对不同主题风格有更明确的认识和使用。