DevUI Design中后臺(tái)產(chǎn)品前端通用解決方案
DevUI Design是一款企業(yè)中后臺(tái)產(chǎn)品前端的通用解決方案，設(shè)計(jì)系統(tǒng)包含了DevUI規(guī)則、設(shè)計(jì)語(yǔ)言和最佳實(shí)踐的資源組合。DevUI Design可以讓開(kāi)發(fā)人員更加專(zhuān)注于應(yīng)用邏輯的思考，而設(shè)計(jì)人員專(zhuān)注于用戶(hù)體驗(yàn)、交互和流程。
設(shè)計(jì)特點(diǎn)
- 企業(yè)級(jí)組件，提供配套設(shè)計(jì)規(guī)范、字體圖標(biāo)庫(kù)
- 開(kāi)箱即用
DevUI倡導(dǎo)沉浸、靈活、致簡(jiǎn)的設(shè)計(jì)價(jià)值觀，提倡設(shè)計(jì)者為真實(shí)的需求服務(wù)，為多數(shù)人的設(shè)計(jì)，拒絕嘩眾取寵、取悅眼球的設(shè)計(jì)。
致簡(jiǎn)
DevUI堅(jiān)持以用戶(hù)為中心去進(jìn)行設(shè)計(jì)，注重直觀可達(dá)性，把服務(wù)示例化以幫助用戶(hù)快速融入到使用中去。同時(shí)， DevUI提供大量的快捷鍵，并且圖形化信息反饋和引導(dǎo)，簡(jiǎn)化使用的流程、降低使用的門(mén)檻。讓用戶(hù)能夠所見(jiàn)即所得，做到快速上手，便捷實(shí)用。
沉浸
DevUI的沉浸式體驗(yàn)包括人的感官體驗(yàn)和認(rèn)知體驗(yàn)，當(dāng)用戶(hù)的個(gè)人技能與面對(duì)的挑戰(zhàn)互相匹配，并且長(zhǎng)時(shí)間處在穩(wěn)定 狀態(tài)時(shí)，用戶(hù)達(dá)到心流狀態(tài)并且不易被外界因素所干擾。
在產(chǎn)品設(shè)計(jì)中，DevUI專(zhuān)注在降低用戶(hù)在完成任務(wù)目標(biāo)時(shí)的認(rèn)知阻力中。為此，DevUI同時(shí)提供多種不同的切換頁(yè)面的途徑，包括面包屑、快捷鍵、按鈕和鏈接等，方便用戶(hù)隨時(shí)快速、連續(xù)地切換頁(yè)面，到達(dá)自己所需的頁(yè)面，使用戶(hù)處于流暢的體驗(yàn)中，減輕尋找信息的焦慮感。DevUI設(shè)計(jì)體驗(yàn)提倡將個(gè)人技能與項(xiàng)目難度進(jìn)行分層，并在使用時(shí)分別進(jìn)行匹配，極力規(guī)避個(gè)人技能與難度不匹配時(shí)產(chǎn)生的焦慮或者無(wú)聊感。同時(shí)，DevUI兼容多樣化APP插件，用戶(hù)可以個(gè)性化自己的工作環(huán)境，把工作環(huán)境調(diào)整到最符合個(gè)人使用習(xí)慣的模式。
靈活
DevUI自帶各類(lèi)完整的模板和典型場(chǎng)景，于此同時(shí)，DevUI提供超過(guò)30個(gè)獨(dú)立原子級(jí)組件，可以自由組合，用小組件拼接出符合自身產(chǎn)品需要的分子級(jí)控件。用戶(hù)可以根據(jù)自身的產(chǎn)品需求靈活選擇，既可以直接使用現(xiàn)有的典型頁(yè)面模板，也可以從小控件做起，利用現(xiàn)有資源拼接自己的頁(yè)面。
- 創(chuàng)建一個(gè)項(xiàng)目
推薦使用@angular/cli創(chuàng)建你的項(xiàng)目
$ ng new New-Project
- 安裝:
$ cd New-Project $ npm i ng-devui # 可選，字體圖標(biāo)庫(kù) # $ npm i @devui-design/icons
- 引入模塊:
import { BrowserModule } from '@angular/platform-browser';
// DevUI部分組件依賴(lài)angular動(dòng)畫(huà)，需要引入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"
]
}
- 啟動(dòng)開(kāi)發(fā)測(cè)試
$ ng serve --open