主题切换

官网结合 UED 项目支持组件库主题切换了!

官方主题

我们提供了一些官方主题,欢迎在Hzero项目中试用,并且给我们提供反馈。

  • 鲸海蓝
  • 冰峰白
  • 孔雀蓝
  • 极光蓝
  • 风铃紫

官网主题切换预览按钮位置在界面右下角。

官网主题切换仅仅提供了 demo 预览,官网基于 SSR & GATSBY 还存在一些兼容性的小问题,不同主题适用对应场景在实际项目中使用效果更好

鲸海蓝(WHALE)

官网默认主题,也是组件库预设主题,基于 Material Design 设计体系 V3 版本设计。

yiVfQP.png

冰峰白(ICEFLOW)

轻盈简洁的设计语言,蓝色系与白色搭配,聚焦视觉中心,强化组件反馈动效

yiV2RI.png

孔雀蓝(PEACOCK)

HZERO平台默认主题,深蓝与孔雀蓝的高对比色彩方案

yiVRzt.png

极光蓝(AURORA)

基于冰峰白主题,使用更多高纯度色彩搭配及大圆角的圆润设计风格

yiVhsf.png

风铃紫(CAMPANULA)

猪齿鱼平台新版主题,对“鲸海蓝”主题进行体验优化。采用设计流行趋势如:“软渐变,多彩高对比度,大圆角,极简”等,完成视觉升级的产物。

yiVgJA.png yiV4L8.png

关于主题切换

组件库拥有经验丰富的 UED 团队,具备企业级产品设计体系。设计者可从组件主题中获取灵感,也欢迎与我们的 UED 团队相互沟通交流。

设计中心:https://open.hand-china.com/design-center/resource

如何使用

目前主题切换功能暂未完全开源,支持主题切换的 UED 项目还在不断优化内测中。

相对稳定的主题切换使用可在 Hzero 框架项目中使用。Hzero 框架项目已集成相关功能,更多信息详情参考HZERO汉得企业级PaaS平台,赶快免费试用吧。

适用场景

可以看到以上几个主题设计风格相差不小,因此适用场景也有差别。不同主题对于组件本身属性支持可能有一定差别,例如扁平风的冰峰白和极光蓝就没有 Button 组件的flat & raised 区分。

在对应项目需要不同主题支持时,建议在项目开发阶段就制定好对应界面设计规范,避免切换主题导致界面布局错乱、样式相差较大。

后续规划

我们会对 UED 项目做进一步优化并开源,支持各位更便捷的自定义主题,支持您设计和完成产品独一无二的风格。

针对官网 demo,后续在做主题切换后,我们会做更适用于主题场景的 demo 展示,便于您对不同主题风格有更明确的认识和使用。