用能计费系统V1.1-视觉设计说明.pdf

用能计费系统V1.1

UI设计规范

设计良好的界面能够引导用户自己完成相应操作，起到向导作用。

日期版本说明作者

2013-12-27用能计费系统v1.1用能计费系统UI孙恒杰

引言：

在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在

字体、风格、颜色、术语、提示信息等方面确保一致；便于前端，页面制作的方便；以及提高二次开发的

利用率；

一．界面设计主要目的：

1）以用户为中心。

设计由用户控制的界面，而不是界面控制用户。

2）清楚一致的设计。

所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。

3）拥有良好的直觉特征。

以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。

4）较快的响应速度。

5）简洁、美观。

二．软件特点：

该项目开发的用能计费系统软件V1.1，是预付费系统软件V1.0的升级版。用能计费系统软件V1.1在

保留了预付费系统软件V1.0的功能基础上，将原有的C/S架构设计转化成了更加灵活的B/S架构设计，在

预付费基础上又增加了后付费的支持，系统支持一户多表管理，支持更完善的信息查询功能，支持详细的

账单展示。

本软件主要结合计量集抄系统、预付费售电系统的综合特点，采用先进的架构设计，引入独立的专业交

互设计、专业视觉设计，实现远程用能管理和收费，是行业内较为领先的应用服务产品。

三．设计规范：

1)界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在

字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

2)界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要

表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用

性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，

3)简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

四．界面实施细则Detail

1）配色Color

本次开发的用能计费系统，是NTS-9000下面的子系统，我们延续了能耗监测软件的系统颜色依然采

用#1abc9c蓝绿作为主要色调，#3498db蓝色作为主要辅助色，

(能耗检测系统）

（能耗检测系统-上海中心扩展版）

项目中使用到的颜色

蓝色和绿色为主色调,主要考虑到在色相环上两色是邻近色；绿色代表安全、节能、环保、清新、舒适等

含义;

蓝色有稳定，大气，科技，效率，理智等含义;灰色代表了稳重.

为了体现产品的统一性，将延续能耗监测的基础色调定义在绿色，蓝色，灰色三种基础颜色;

辅助色使用降低了饱和度粉一点的红色，在色相环上，红色在蓝色120°左右，属于对比色，使用跟蓝

色形成对比的红色可以起到突出重点的作用；降低对比色饱和度做法是为了在颜色上趋于统一

上图标准配色，为界面中使用到的颜色，展示了主色调的同类色，另外辅助色中除了第一个的粉红色，其

他主要用于制作图表中的配色，以色相跟饱和度做区分

备注:页面大量使用了灰色，导航以#ececec浅灰为主跟渐变的#333333色为主

线框的主要以#BEBEBE浅灰色为主

2）字体Font

以微软雅黑为主采用20PX；18PX；16PX；15px为主通用字体颜色#333333（20PX的文字为

#555555）

非重要文字为14PX;12px无效果的宋体颜色#333333

数字采用Arial字体

3)页面中具体参数

页面整体采用1366*1000px72DPI的分辨率

公用抬头部分

1366*70px#4d4d4d-#343434

抬头采用渐变色（）

左侧：天溯LOGO+用能计费系统软件V1.1（文字待定）

右侧：用能计费的标志登录信