1. <u id="2l8plp"><ul id="2l8plp"><del id="2l8plp"></del><dir id="2l8plp"></dir><span id="2l8plp"></span><tfoot id="2l8plp"></tfoot></ul><del id="2l8plp"><dfn id="2l8plp"></dfn><dfn id="2l8plp"></dfn><abbr id="2l8plp"></abbr><button id="2l8plp"></button><em id="2l8plp"></em></del></u><fieldset id="2l8plp"><fieldset id="2l8plp"><address id="2l8plp"></address><acronym id="2l8plp"></acronym><style id="2l8plp"></style></fieldset><center id="2l8plp"><kbd id="2l8plp"></kbd><u id="2l8plp"></u><dl id="2l8plp"></dl><abbr id="2l8plp"></abbr></center><noscript id="2l8plp"><del id="2l8plp"></del></noscript><label id="2l8plp"><blockquote id="2l8plp"></blockquote><noscript id="2l8plp"></noscript><table id="2l8plp"></table></label><optgroup id="2l8plp"><strike id="2l8plp"></strike><i id="2l8plp"></i><tr id="2l8plp"></tr></optgroup></fieldset><option id="2l8plp"><span id="2l8plp"></span><tfoot id="2l8plp"></tfoot></option><ins id="2l8plp"><noscript id="2l8plp"><kbd id="2l8plp"></kbd><em id="2l8plp"></em></noscript><em id="2l8plp"><pre id="2l8plp"></pre><dl id="2l8plp"></dl></em><span id="2l8plp"><dd id="2l8plp"></dd></span><del id="2l8plp"><dir id="2l8plp"></dir><code id="2l8plp"></code><tfoot id="2l8plp"></tfoot><noframes id="2l8plp">
          • <strong id="2l8plp"></strong><sup id="2l8plp"></sup>
                  <small id="2l8plp"></small>
                  <li id="2l8plp"></li><label id="2l8plp"></label><blockquote id="2l8plp"></blockquote><th id="2l8plp"></th>
                        <option id="09ukor"><abbr id="09ukor"><span id="09ukor"></span><ins id="09ukor"></ins><bdo id="09ukor"></bdo></abbr></option><ins id="09ukor"><tt id="09ukor"><em id="09ukor"></em><strike id="09ukor"></strike><font id="09ukor"></font><tr id="09ukor"></tr><ul id="09ukor"></ul></tt></ins><option id="09ukor"><pre id="09ukor"><blockquote id="09ukor"></blockquote><strike id="09ukor"></strike></pre><span id="09ukor"></span><address id="09ukor"></address><optgroup id="09ukor"></optgroup><dl id="09ukor"></dl><ul id="09ukor"></ul><noframes id="09ukor"><dd id="09ukor"></dd><code id="09ukor"></code>
                        <big id="09ukor"></big><blockquote id="09ukor"></blockquote><optgroup id="09ukor"><del id="09ukor"></del><del id="09ukor"></del><sup id="09ukor"></sup><dfn id="09ukor"></dfn></optgroup><th id="09ukor"><pre id="09ukor"></pre><thead id="09ukor"></thead><center id="09ukor"></center></th><th id="09ukor"><div id="09ukor"></div><dfn id="09ukor"></dfn><option id="09ukor"></option></th><ins id="09ukor"><kbd id="09ukor"></kbd><strike id="09ukor"></strike><noscript id="09ukor"></noscript><th id="09ukor"></th><optgroup id="09ukor"></optgroup></ins><strong id="09ukor"><em id="09ukor"></em><strong id="09ukor"></strong><form id="09ukor"></form><bdo id="09ukor"></bdo><legend id="09ukor"></legend></strong>

                                        Background

                                        项目背景

                                        量云风力场是一家以能源重型设备、新能源发电为主要运营方式的公司。风力发电是把风的动能转化成电能的过程,监控系统则是收集风力发电机的瞬时数据,并把数据反馈给操作者的一个后台管理软件。此次与荷勒合作是希望我们为其重新设计一套具有现代风格且舒适耐看的界面。

                                        量云01.jpg

                                        USER RESEARCH

                                        用户研究

                                        风车监控系统的受众人群相对于其它软件而言会比较集中,大多是年轻的监控职员,用户特点是长期面对电脑和进行机械操作,因此本次我们将会把用户使用的舒适性作为设计的重点。。

                                        量云02.jpg

                                        Competitive Analysis

                                        竞品分析

                                        市面上大部分的后台监控软件都延续着老旧的版式,更新换代速度较慢,重要信息排布较杂乱、无主次的划分、不友好的交互操作和混淆的视觉在一定程度上会影响着他们的工作效率,因此改版考虑的不只是界面的美观,更多的是在操作体验和视觉舒适度上下功夫。。

                                        量云03.jpg

                                        Color scheme

                                        色彩方案

                                        考虑用户使用的频率和时长,界面配色避免了太鲜艳和太深沉的颜色,以饱和度较低的蓝绿色和浅灰色为主基调,象征着能源的供应,使用温和的砖红色作为提醒色,不过于刺眼,提高用户舒适度。

                                        量云04.jpg

                                        UI Design

                                        界面设计

                                        根据产品以数据为主的性质,在界面设计的时候需要以简洁与舒适为主要的方向,每个页面颜色不超过三种,并且以线条区分板块,减少数字与板块间的干扰。为了使用户更易于读取风车的信息,我们将风车以插画的形式展现,并以不同的颜色以区分状态,风车信息一目了然。

                                        量云05.jpg

                                        系统的设计规范,确保界面的易操作性

                                        整体界面的系统规划,各元素的协调统一,点击区域与操作焦点做好区分,使操作及时的到反馈。列表中的元素重设计,尽量减少用户在长期使用后所产生的视觉疲劳感。

                                        量云06.jpg

                                        放大内容空间,优化图表样式 

                                        图表是产品最重要的功能区域,因此在设计时需要突出主体,去除不重要的修饰,以简易细致的线条和色块区分不同的数据,添加弹窗设置,有选择的显示详细数据,使界面更加轻量化。

                                        量云07.jpg

                                        在细节处做文章

                                        为了使界面在简化的同时更有质感,我们在细节处添加了精细的处理,表格以单线区分,减少视觉的干扰;表头添加浅色阴影,自然划分层级关系,同时在表格中的色块以半透明显示,使用户能快速分辨出数据密集区域。

                                        量云08.jpg

                                        简化视觉元素

                                        界面本着去繁为简的理念重新设计,规划布局,移除不必要的装饰性元素。复古、材质、复杂的背景等装饰一律不要,增强可用性的同时也增强了主要视觉元素的支配性。

                                        量云09.jpg


                                        更多案例

                                        X-POWER-BY FNC V0.5.2 FROM ZZ50