楊_尐鷰

Leeze收据应用: 从设计到UI开发的实践

Leeze收据应用: 从设计到UI开发的实践

小编推荐

一个前端程序员怎么也发设计的东西?很多人还在使劲区分设计和编程的边界时候,我在即刻上看到有人提出一个很中肯的看法:1. 设计不仅是画图,代码也可以是设计师的画笔;2. 区分职业的不是工具,而是关注点;3. 当你的关注点在数据的时候,你就是程序员,而当你的关注点在人的时候,你就是设计师。回归到正题。这个月初的时候,一个好朋友拜托我帮忙设计开发一个工具,帮助一个在建寺庙记录捐款数据,并且可以自动生成收...

一个前端程序员怎么也发设计的东西?
很多人还在使劲区分设计和编程的边界时候,我在即刻上看到有人提出一个很中肯的看法:
1. 设计不仅是画图,代码也可以是设计师的画笔;
2. 区分职业的不是工具,而是关注点;
3. 当你的关注点在数据的时候,你就是程序员,而当你的关注点在人的时候,你就是设计师。
回归到正题。这个月初的时候,一个好朋友拜托我帮忙设计开发一个工具,帮助一个在建寺庙记录捐款数据,并且可以自动生成收据Word文件供打印。本来想写个一个表单+一个按钮的傻瓜式工具,输入信息点击一下,就能生成word收据。但后面越做越发现需要考虑的东西很多,就决定从设计到开发好好地磨一磨,一磨就是三周。
这篇文章主要分享一下,Lezze应用的界面、动效设计以及UI开发时候的一些实践。
最终Leeze收据应用的具体使用录屏效果如下。019a585c9ee1d3a801214168e1875d.gif

界面布局1 | 左侧栏:左侧栏常驻,主要功能是核心功能——记录收款信息,并生成可打印的收据word文件。

界面布局2 | 顶部导航栏:顶部导航栏有四个tab,分别是 [统计]、[数据库]、[回收站]、[设置]。

界面布局3 | 数据统计页面:统计页面有3个统计梗概和1个数据曲线图。3个数据梗概包括了 [今日捐款额]、[总共捐款额]、[捐款人数]。数据曲线图表示每一天捐款数的走势,横坐标时间尺度可以切换成一个月或者一周。

界面布局4 | 数据库、回收站页面:数据库和回收站都是表格模式。支持对表格的排序,对单个数据的修改、删除和回收。同时可以导出数据导Excel表格保存到本地。

界面布局5 | 应用设置页面:设置页分为三块。第一块是界面相关,可以自定义软件颜色和语言;第二块是数据库迁移,可以导出导入数据库,也可以清空数据库;第三块是关于&帮助,方便之后bug修复和版本更新。

界面原型总览。

01197a5c9ee62aa801208f8bf5d464.gif

动效是Leeze设计里面的一个重要部分。从打开软件的loading动画,到实际交互的各个细节,利用Vue Transition、纯CSS3 和 Lottie技术,还原在AE里面设计的UI动效。

01e1d75c9ee64ca80121416811b30a.gif

对于 [填写表单不全]、[导入数据库文件不对]、[导出表格失败]等情况,给予错误弹框提示。

018cb95c9ee64ca801208f8be787ba.gif

对 [生成收据成功]、[数据库文件导出成功]等情况,给予成功弹框提示。

01a9175c9f5cdaa801208f8b1516ca.gif

浏览器默认的Select标签样式不符合要求,和界面风格不太符合,于是自定义了一个MySelect组件。

018b2a5c9f5d1da801208f8b2a231d.gif

浏览器的Radio Input默认样式也不符合要求,于是自定义了一个Swicth组件,用于切换数据曲线图的横轴时间尺度。

0189085c9f5d54a801208f8bb28ad9.gif

将按钮点击和任务进度这两个功能结合在一起,自定义了一个ProgressButton的组件,用于数据库文件的导入。

011d1b5c9ee671a801208f8bed176d.gif

统计页面的数据梗概和数据图表,会根据用户的操作会发生实时的变化。为了防止突兀、瞬时的变化,给数据梗概的数字加了数字跳动动画。

016c525c9ee672a801214168bea8e8.gif

数据图表则添加了曲线动画。

015daf5c9ee671a801208f8b094813.gif

对于 [删除数据]、[清空数据库]、[恢复数据]等敏感操作,用二次确认的按钮交互,来避免用户误操作。

01040c5c9f6635a801208f8bb99b19.gif

提供2套界面——浅白和深灰。

016d6f5c9f638ba801208f8b0fbfb1.gif

数据库列表进入和离开动画。

014c485c9f659da801208f8b056a9e.gif

数据库列表重新排序动画。

01935e5c9f65e6a801208f8b8af6af (1).gif

感谢阅读