HopeUI 组件库

HopeUI网址:https://hopeui.greenhoper.com

现在,越来越多的企业单位对产品的界面和用户体验,有着更高层次的要求。在对多年来参与项目的实践、总结,以及与客户沟通过程中所获得的反馈,我们逐步提炼出 HopeUI —— 一个为产品开发服务的设计体系。

HopeUI 以简洁细致的设计语言、组件模块化的思路,减少冗余的开发成本,让设计者更好地聚焦于用户体验的提升。

现在,越来越多的企业单位对产品的界面和用户体验,有着更高层次的要求。在对多年来参与项目的实践、总结,以及与客户沟通过程中所获得的反馈,我们逐步提炼出 HopeUI —— 一个为产品开发服务的设计体系。
HopeUI 以简洁细致的设计语言、组件模块化的思路,减少冗余的开发成本,让设计者更好地聚焦于用户体验的提升。

HopeUI 4 大特点

精炼

萃取自企业级
产品的交互方式

细致

从大自然衍生的
简洁设计语言

快捷

开箱即用
无需额外部署

模块化

组件复用
减少冗余开发成本

HopeUI 基本要素

HopeUI 基本要素包括色彩、字体、控件和图标四个部分。

· 色彩 —— 源于对自然场景的抽象捕捉,结合青朴的技术基因,形成特有的 6 基色及相应的衍生颜色;

· 字体 —— 统一规范,力求不同平台、浏览器,均能获得最佳效果;

· 控件 —— 提供多种样式及状态的按钮、菜单、表格等控件,清晰指引相应的业务逻辑;

· 图标 —— 语义化的 SVG 矢量图形,保证跨平台清晰显示。

HopeUI 基本要素包括色彩、字体、控件和图标四个部分。
色彩 —— 源于对自然场景的抽象捕捉,结合青朴的技术基因,形成特有的 6 基色及相应的衍生颜色;
字体 —— 统一规范,力求不同平台、浏览器,均能获得最佳效果;
控件 —— 提供多种样式及状态的按钮、菜单、表格等控件,清晰指引相应的业务逻辑;
图标 —— 语义化的 SVG 矢量图形,保证跨平台清晰显示。

网格布局

基于网格与盒子的排版布局,整个页面区域划分成 12 格,支持堆叠、水平排列及 Flex 等多种布局方式。

基于网格与盒子的排版布局,整个页面区域划分成 12 格,支持堆叠、水平排列及 Flex 等多种布局方式。

丰富组件、插件支持

目前 HopeUI 提供了 30+ 个基础组件及 JS 插件,覆盖各类常见场景,可满足实际开发中各种功能需求。

目前 HopeUI 提供了 30+ 个基础组件及 JS 插件,覆盖各类常见场景,可满足实际开发中各种功能需求。

开发要求

React

ES2015

Node.js *

* Node.js 要求 v8 或以上版本。

支持浏览器

Chrome

Firefox

Safari

IE 9+ *

国产浏览器

* IE 系列浏览器需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。