设计思路
对比友商
结论
MultiEye-Fontend过于简陋,但是由于项目设计的功能点多,排版也比较整洁,想要攻克该问题,最好的解决方法是使用icon,其他色彩,色调,动画,让界面活起来,给用户更舒服的观感
而由于功能点的众多,在排版布局又必须有一个基准,我认为原本的基准没有什么大问题,只需要微调即可
方案
1.在某些重点突出的功能使用一些酷酷的字体
如:
地址:www.iconfont.cn/fonts/detai…
2.根据登录界面设计样式基调
由login界面可知,以暗色与红色为主调,但是这种色调的受众小,在界面展示中应当以部分为主,主体可选用淡红,蓝绿,白色
3.根据基调选择icon
如:
地址:www.iconfont.cn/collections…
如:
地址:www.iconfont.cn/collections…
如:
如:单色图标:www.iconfont.cn/collections…
颜色选取:
暗红1:#7a1313
高亮时:#f00
设计举例
老板新需求
把这里的值做成动画累加的
首先我们进行分析,这个值肯定是接口传过来的,我们让一个count从0开始,设置一个定时器进行累加,count等于接口传回的值时,关闭定时器。那么重点在于这个函数什么时候调用,我们必须确保执行这个函数的时候接口是拿到了这个值的
方案: 接口调用完毕的时候调取这个函数即可
我们再来分析,既然要累加,那么万一这个接口传回的值是个几百万呢?如果频率不变的话,得加到猴年马月啊,所以我们需要根据值的大小来定义步频,保障能在指定时间内完工
方案:时长(time) / 频率(rate) * 数字的步长(step)(每 1时间间隔增加的值) = endNum(我们要展示的最终数据)
show() {
// 最终要显示的数字
let endNum = this.dashboard.event_count.total;
// 动画间隔
let rate = 30;
// 总时长
let time = 2000;
// 步长,数据增加间隔
let step = endNum / (time / rate);
// 初始值
let count = 0;
let timer = setInterval(() => {
count = count + step;
this.dashboard.event_count.total = count.toFixed(0);
if (count > endNum) {
// 避免count大于endNum最终数字显示不对
count = endNum;
this.dashboard.event_count.total = count;
// 清空定时器
clearInterval(timer);
timer = null;
}
}, rate);
},
事件猎手部分过于简陋,对其进行修改