【UI设计】云外新能源-真实案例分享
【云外新能源】这是一个实时记录和监测各大站点、网点用电量的手机端网站。
2020.3
甲方找到我们赛尔极这个小公司,
希望做一款能够与【电能卫士】对标的手机端网页。
这是⼀款实时监测电量情况的物联⽹H5平台,
通过各个监测点的⿊匣⼦将数据返回到后台数据库,
然后微信前台链接读取并展示实时数据。
当时因为各种原因,刚好空缺产品一职,
然后,我就“光荣地”充当了产品经理,
与甲方进行了详细的讨论和规划。
项目链接:https://deve.gogouhui.com:9443/electric-weixin/index.html#/(建议手机查看)
蓝湖设计稿链接:https://lanhuapp.com/url/MNE5h 密码: X6tr

一、项目信息
项目上线时间:2021年3月X日
设计交付时间:2021年2月22日
需求对接人:朱xx(我们老板)、潘xx(甲方)
项目背景:智能负载监控线上应用平台首版
二、需求相关
用户可以通过微信公众号登陆,登陆后进入H5移动端页面。
同步启用用户账户,不同用户仅可看的自己的监测点。
我把甲方给我的需求文档看完后,
(需求文档链接:https://qj726l8gad.feishu.cn/docs/doccnZW5ezLwjvKfUtt8ig5mpAf)
进行了 产品结构梳理:

然后每页与甲方一一核对,根据他的要求对页面的功能进行增删:

该产品有搭建好的后台监测数据系统,
以现在的测试站点数据来分析,发现了4大比较明显的产品问题:
这有利于我们重新调整产品策略,重新定义这款产品:


三、解决问题
1、制定产品的调性
在bing、百度了电网、电量、电能相关的图片:

发现科技风格的调性是十分符合甲方的产品属性的。
但如果与竞品【电能卫士】一样采用蓝绿风格,会过于雷同,
直到我看到了下面图片:

于是我大胆地与甲方进行沟通,
决定在视觉上做出比较颠覆性的改变,
大调上采用暗色系,甲方也同意了我的想法。
2、制定设计规范
字体设计规范:

元素风格:

3、页面改版







4、动态展示
首页:

能耗管理页:

监测点详情页:

四、项目复盘
这项目没有产品经理,
自己根据需求文档,跟甲方沟通,
整理了原型图,并反复与甲方核对,
极大提高自己对产品的理解和梳理能力;
该项目属于电网类,接口数据庞杂,站点和监测点繁复,
需大量采用折线、饼状和柱状统计图,
我参考了知乎、百度的疫情数据图表,
结合项目自身情况进行了设计。













































































