DevUI Design 中后台产品前端通用解决方案开源项目

我要开发同款
匿名用户2020年07月01日
56阅读
开发技术TypeScript
所属分类UI组件库、程序开发
授权协议MIT

作品详情

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

设计特点

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

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

致简

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

沉浸

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

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

灵活

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

创建一个项目

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

$ngnewNew-Project安装:$cdNew-Project$npming-devui#可选,字体图标库#$npmi@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],})exportclassAppModule{}在 angular.json 文件夹中引入样式:{"styles":[..."node_modules/ng-devui/devui.min.css"]}启动开发测试$ngserve--open
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论