复杂之眼布局设计,样式修改

46 阅读2分钟

设计思路

对比友商

image.png

image.png

结论

MultiEye-Fontend过于简陋,但是由于项目设计的功能点多,排版也比较整洁,想要攻克该问题,最好的解决方法是使用icon,其他色彩,色调,动画,让界面活起来,给用户更舒服的观感

而由于功能点的众多,在排版布局又必须有一个基准,我认为原本的基准没有什么大问题,只需要微调即可

方案

1.在某些重点突出的功能使用一些酷酷的字体

如:

image.png

地址:www.iconfont.cn/fonts/detai…

2.根据登录界面设计样式基调

image.png

由login界面可知,以暗色与红色为主调,但是这种色调的受众小,在界面展示中应当以部分为主,主体可选用淡红,蓝绿,白色

3.根据基调选择icon

如:

image.png

地址:www.iconfont.cn/collections…

如:

image.png 地址:www.iconfont.cn/collections…

如:

image.png www.iconfont.cn/collections…

如:单色图标:www.iconfont.cn/collections…

转存失败,建议直接上传图片文件

image.png

颜色选取:

暗红1:#7a1313

高亮时:#f00

设计举例

图片.png

老板新需求

把这里的值做成动画累加的

图片.png

首先我们进行分析,这个值肯定是接口传过来的,我们让一个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);
  },

事件猎手部分过于简陋,对其进行修改 image.png