DevUI Design 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
DevUI Design 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
操作系统: 跨平台
开发厂商: 华为
收录时间: 2020-07-01
提 交 者: 编辑部的故事

DevUI Design是一款企业中后台产品前端的通用解决方案,设计系统包含了DevUI规则、设计语言和最佳实践的资源组合。DevUI Design可以让开发人员更加专注于应用逻辑的思考,而设计人员专注于用户体验、交互和流程。

设计特点

  • 企业级组件,提供配套设计规范、字体图标库
  • 开箱即用

DevUI倡导沉浸、灵活、致简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。

致简

DevUI坚持以用户为中心去进行设计,注重直观可达性,把服务示例化以帮助用户快速融入到使用中去。同时, DevUI提供大量的快捷键,并且图形化信息反馈和引导,简化使用的流程、降低使用的门槛。让用户能够所见即所得,做到快速上手,便捷实用。

沉浸

DevUI的沉浸式体验包括人的感官体验和认知体验,当用户的个人技能与面对的挑战互相匹配,并且长时间处在稳定 状态时,用户达到心流状态并且不易被外界因素所干扰。

在产品设计中,DevUI专注在降低用户在完成任务目标时的认知阻力中。为此,DevUI同时提供多种不同的切换页面的途径,包括面包屑、快捷键、按钮和链接等,方便用户随时快速、连续地切换页面,到达自己所需的页面,使用户处于流畅的体验中,减轻寻找信息的焦虑感。DevUI设计体验提倡将个人技能与项目难度进行分层,并在使用时分别进行匹配,极力规避个人技能与难度不匹配时产生的焦虑或者无聊感。同时,DevUI兼容多样化APP插件,用户可以个性化自己的工作环境,把工作环境调整到最符合个人使用习惯的模式。

灵活

DevUI自带各类完整的模板和典型场景,于此同时,DevUI提供超过30个独立原子级组件,可以自由组合,用小组件拼接出符合自身产品需要的分子级控件。用户可以根据自身的产品需求灵活选择,既可以直接使用现有的典型页面模板,也可以从小控件做起,利用现有资源拼接自己的页面。

  1. 创建一个项目

推荐使用@angular/cli创建你的项目

$ ng new New-Project
  1. 安装:
$ cd New-Project
$ npm i ng-devui
# 可选,字体图标库 
# $ npm i @devui-design/icons
  1. 引入模块:
import { BrowserModule } from '@angular/platform-browser';
// DevUI部分组件依赖angular动画,需要引入animations模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { DevUIModule } from 'ng-devui';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }
  1. 在 angular.json 文件夹中引入样式:
{
  "styles": [
    ...
    "node_modules/ng-devui/devui.min.css"
  ]
}
  1. 启动开发测试
$ ng serve --open
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

DevUI Design 的相关资讯

还没有任何资讯

DevUI Design 的相关博客

Design Principles and Design Patterns

设计原则解读。 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力。 设计...

Design Principles from Design Patterns

In this interview, Erich Gamma, co-author of the landmark book, Design Patterns, talks with Bill Venners about two de...

Parking Lot Design Using OO Design

Ways to approach a general Design problem. Use Cases Generation: Gather all the possible use cases Constraints and An...

Material Design

Material Design是google io开发者大会推出的新的设计语言,Material Design不像Android过去采用的Holo风格那样深沉,增加或修...

Design Pattern

Design Pattern

design language

design language https://en.wikipedia.org/wiki/Design_language 设计语言(设计词汇)是一种超架构的方案和风格, 它用于指...

DevUI Design 的相关问答

还没有任何问答,马上提问

评论 (42)

加载中
额……貌似没有看到一个完整版本的demo。
09/13 22:57
回复
举报
精致 小巧. 符合国情. 适合中后台.是个定位.
08/31 14:18
回复
举报
看到ng就觉得是angular的,这个框架国内用的比较少,尤其是2以后,比大变活人还难,导致我一个后端工程师放弃了学习的进度~
08/27 17:25
回复
举报
这个是ui吧,不是vue 竞标的产品
08/25 18:18
回复
举报
爱国者的产品看起来有点老,感觉缺少了点时尚感,组件方方正正,蓝色风格稍显俗气。
08/25 09:47
回复
举报
真的不太怎么样。如果是web的话,没有什么市场,既不是vue也不是react。、
08/20 09:10
回复
举报
angular没有用过,不过用过vue和react的人表示都不想用angular。
08/20 09:11
回复
举报
为啥我见过的都是说用过angular的人表示不想用vue?何况马上发布的vue3,走的是angular2的路子。真香。
08/21 10:57
回复
举报
那也要等vue3大家用熟了才会去用ng2
09/04 17:09
回复
举报
很遗憾的告诉你,我们这的网打不开该项目网址,需要智慧 上网才能访问....
08/18 11:10
回复
举报
水军没看到,看见项目的公司名用都没用就开始黑的倒是好几个
07/08 10:01
回复
举报
的确是做的不怎么样, 对比一下antd。
07/08 13:39
回复
举报
是的,文档 demo 啥的都缺失,连个效果展示的截图都没有,我是去 github 自己扒了个 example 项目下来才看到它长啥样,做的的确不咋地,不过看评论区贬低的各位似乎不在乎到底它完善程度怎么样,没人关心六爷吃了几碗粉
07/10 09:54
回复
举报
说的不错,我就是爱黑及黑,就是烦这家公司啊,怎么着?烦它就要黑它,结果不好意思,越烦越黑越黑越烦ヽ(‘⌒´メ)ノ越上瘾~
07/11 11:04
回复
举报
这个无所厚非,就像有人不吃香菜你也不能怎么样,但是部分同志走了极端,自己不吃猪肉还巴不得弄死其他吃猪肉的人
07/13 09:00
回复
举报
对,那得看这肉是不是注水肉,如果注了水大家不吃也罢~
07/13 09:29
回复
举报
支持一下
07/07 15:22
回复
举报
简单的用了一小下下:设计风格没有标题党,真的是“中后台”前端解决方案233333,不过这个方方正正的风格十分适合做一些内部工具的前端页面,简洁明了十分护眼;目前看来大部分常用组件也都有;文档体验也不错,有点;DragDrop 太让我惊喜了,找了好久都没找到这类型的,就算有类似的,用法或者是细节都不太符合我脑中的想法,就冲这一个就足够让我尝试的了。
07/07 15:43
回复
举报
补充一下,ui样式粗略的看了一下,貌似对二次开发很友好。但是不太了解开源协议,这个MIT对二次开发后的商用产品有什么限制吗?
07/07 15:47
回复
举报
木有
08/25 09:10
回复
举报
垃圾HW
07/07 15:19
回复
举报
更多评论
42 评论
97 收藏
分享
返回顶部
顶部