什么是DevUI?

        DevUI是面向企业中后台产品的开源前端解决方案,其设计价值观基于"高效、开放、可信、乐趣"四种自然与人文相结合的理念,旨在为设计师、前端开发者提供标准的设计体系,并满足各类落地场景,是一款企业级开箱即用的产品。

 

设计价值观

DevUI是面向企业中后台产品的开源前端解决方案,其设计价值观基于高效、开放、可信、乐趣四种自然与人文相结合的理念,旨在为设计师、前端开发者提供标准的设计体系,并满足各类落地场景,是一款企业级开箱即用的产品。

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

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

可信:DevUI主张通过强化指标传达力,打磨流程之美,深耕并积累领域级专业图表等手段,帮助将抽象的可信理念具象化、数字化,实现可观测与流程引导作用。设计之前,应考虑不同业务背后的可信诉求,充分发挥界面信息的指导作用。

乐趣:让工作变得更快乐,已然成为了大家新的渴望,尤其当前恰逢Z世代开始逐渐步入职场的重要阶段。DevUI鼓励在设计中合理融入弥散色主题背景、新拟态、玻璃面板等新潮前卫的元素,精准命中年轻化的感知诉求。DevUI Tokens允许用户定制主题、组件样式,甚至布局,满足差异化的使用习惯和个性化表达。灵活地在缺省页、装饰区在开发者IP形象图,不仅能使页面活泼生动,更能呼唤开发群体的认同感。使用丰富的图标与活泼的动效,也可让细节更有玩味。

此外,相比视觉体验更深一层的乐趣,是沉浸感、成就感的构建。打造沉浸感,方式包括提供匹配能力的路径、提供模板、减少干扰、提供联想、就地帮助、分解任务难度等。打造成就感,主要依赖的是瞄准用户目标塑造的达成&激励体系。

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在DevUI框架中上传文件并显示进度条,可以使用DevUI提供的`d-upload`组件和`d-progress`组件。 首先,在HTML模板中使用`d-upload`组件来实现文件上传: ``` html <d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)"> <ng-template #tip> <span class="devui-upload-tip-text">将文件拖到此处,或点击上传</span> </ng-template> </d-upload> ``` 其中,`uploadUrl`是上传文件的URL,`multiple`表示是否允许上传多个文件,`showUploadList`表示是否显示上传列表,`onStart`是上传开始时的回调函数。 接着,在组件的TS文件中,使用`d-progress`组件来实现进度条: ``` typescript import { Component } from '@angular/core'; @Component({ selector: 'app-file-upload', template: ` <d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)"> <ng-template #tip> <span class="devui-upload-tip-text">将文件拖到此处,或点击上传</span> </ng-template> </d-upload> <d-progress [percent]="percent" [strokeWidth]="10" [strokeColor]="'#37a2da'"></d-progress> ` }) export class FileUploadComponent { uploadUrl = 'http://localhost:3000/api/upload'; percent = 0; onStart(event) { const xhr = event.xhr; xhr.upload.addEventListener('progress', (e) => { if (e.total > 0) { this.percent = Math.floor(e.loaded / e.total * 100); } }, false); } } ``` 其中,`percent`表示进度条的百分比,`strokeWidth`和`strokeColor`分别表示进度条的宽度和颜色。在`onStart`回调函数中,监听XHR对象的`progress`事件,根据已上传的字节数计算出上传的进度百分比,更新`percent`变量的值,从而实现进度条的显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值