楊_尐鷰 Leeze收据应用: 从设计到UI开发的实践
加入收藏 评论

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

330 天前 发布

一个前端程序员怎么也发设计的东西?很多人还在使劲区分设计和编程的边界时候,我在即刻上看到有人提出一个很中肯的看法:1. 设计不仅是画图,代码也可以是设计师的画笔;2. 区分职业的不是工具,而是关注点;3. 当你的关注点在数据的时候,你就是程序员,而当你的关

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

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

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

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

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

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

界面原型总览。

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

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

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

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

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

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

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

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

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

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

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

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

感谢阅读

0
楊_尐鷰
Leeze收据应用: 从设计到UI开发的实践 APP注册流程+视觉的优化
您还没有登录,登录后发表评论!还没有账号?立即注册

-

楊_尐鷰
楊_尐鷰

绍兴设计爱好者

关注 私信
ad

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514