DevUI Design中后台产品前端通用解决方案-技术圈

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

设计特点

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

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

致简

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

沉浸

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

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

灵活

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

创建一个项目

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

$ ng new New-Project

安装:

$ cd New-Project
$ npm i ng-devui
# 可选，字体图标库 
# $ npm i @devui-design/icons

引入模块:

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 { }

在 angular.json 文件夹中引入样式:

{
  "styles": [
    ...
    "node_modules/ng-devui/devui.min.css"
  ]
}

启动开发测试

$ ng serve --open