气象资料及产品综合服务平台用户界面设计
2015-04-08 13:15石璞欣
陕西气象 2015年6期
石璞欣
(民航中南空管局气象中心，广州 510405)
气象资料及产品综合服务平台用户界面设计
石璞欣
(民航中南空管局气象中心，广州510405)
摘要：结合气象专业特点，从用户界面的需求分析、色彩设计、界面设计和代码实现四个方面介绍了气象资料及产品综合服务平台的用户界面的设计方法。
关键词：气象资料及产品；服务平台；用户界面；前台代码
随着气象探测资料、二次演算综合产品的日益丰富，传统的纸质天气图、报文资料、系统自带软件都已经难以满足气象工作者和专业用户的需求，为了提高工作效率和各种产品使用的便捷性，气象资料及产品综合服务平台的搭建就显得十分有必要。
1需求分析
首先，根据不同的服务群体确定用户界面需求。专业用户往往更关注直观的实况以及各种预警信息，设计时应将重点放在用户感兴趣的资料及排版上，同时应尽量提高相关预警信息的识别度，必要时可针对个别用户设计专用监控页面；中短期气象预报员则更关注各种天气背景场及其变化趋势，基于时间轴的图形动画和报文表单设计都更需要推敲；气候研究部门则更关心各项数据的走势和统计结果。
其次，通过加强和被服务对象的交流进一步做好需求分析，询问并记录被服务对象对资料的需求情况，如日常业务哪些资料是必不可缺的、哪些是最需要浏览的、哪些数据是需要持续监控的等等。
做好的需求分析应整理成文档，可以避免所设计的平台项目脱离实际应用。
2色彩设计
在具体设计用户界面之前，制定配色尤为重要。这样做可以提高平面、构图设计效率，减少层叠样式表的代码量，提高整个网站统一性和识别性，并有效避免模块、板块拼装或重组时出现不可预期的错误和不协调。
配色的第一步就是选定主背景基色。首先，作为一个气象类网站，气象预警信号多为黄色、红色系，因此主背景基色应该尽量避免使用该色系；绿色、蓝色、无色(黑白、灰度)系比较安全，蓝色多作为天空、海洋、地球的颜色，因此较为推荐。其次，气象资料及产品综合服务平台多以资料展示为主，大多数用户需要长时间关注界面，因此应当使用低明度、纯度的色彩作为基色，以降低视觉刺激，突出内容表现，给人以温和醇厚感，稳重耐看。
气象资料种类较多，利用人眼对色彩的敏感强于文字的特点，可以选择辅色作为图标边框来区别资料、功能的种类，以增加网站的条理性，提升用户的识别度。如雷达图、卫星云图、报文、数值预报、天气图等，需要选取的辅色数量较大，可以简单在色相环上选取等角距的一组颜色，适度降低他们的饱和度，并均衡明度，再分别与基色试配，以选取适配色。
3界面设计
3.1页面布局
(1)“国”字型
该类型页面布局主要适用于公众信息新闻类平台，常见于各大综合门户网站。
特点：将信息分类，并模块化在页面上依次罗列，提供所有资料链接导航。
优点：模板资源丰富，大大降低代码编写量；信息展示量大，一个页面可罗列出项目所有的功能链接；模块化程度高，内容板块添加便捷。
缺点：页面拥挤，用户难以找到所需链接；打开页面需要新弹出窗口，否则将丢失导航页面。
(2)左导航框架型
该类型主要适用于专业用户，常见于电子邮箱布局。
特点：将所有资料链接导航罗列于页面左侧(根据网站规模选择使用二级菜单)，右侧主显示区用于具体的资料内容展示。
优点：导航清晰，非常适合种类较多的气象资料选择；导航与页面位于同一窗口，可以避免大量弹出窗口，同时也方便用户快速切换显示资料。
缺点：窗口自适应代码编写复杂；页面布局呆板，不灵活。
(3)定制页面
如果个别用户只关心网站的小部分资料，可以定制专门的导航页面方便其使用；或根据需要同时监控几种资料，定制专用的监控页面。
无论最终选择哪种页面布局，都应做到整齐稳重，推荐使用稳妥的栅格系统布局定位，保证各页面元素间的协调统一，避免由于个性化设计而出现的杂乱感。
3.2与常用商业网站的区别
(1)导航条随着气象探测产品和精细化产品的不断增加，建议不要在设计导航时限制元素的个数，二级菜单通常采取最简单的解决方案。同时因无法预期用户阅览器窗口的大小，设计时要明确给出最小宽(高)度或提供滚动条类功能。
(2)资料分类准确的分类有助于用户快速定位兴趣点，并明确当前页面资料类型。人眼对色彩的敏感程度大于图形和文字，因此可为各个分类确定唯一的辅色及图标，用于导航链接及窗口角标。
(3)数据表格气象资料中存在种类繁多的报文及探测数据，该类资料的展示通常会采用表格来实现。表格的样式应尽量简洁，切忌使用3D、阴影样式；滚动条滚动时应保证表头列名行固定不动；滚动条超过3屏的应使用翻页模式；奇偶行应使用背景色变化区别；为适应阅览器的窗口大小，“报文内容”列可以设为宽度自适应，其他列均应固定宽度。
(4)图形展示雷达图覆盖范围较小，显示应尽量填满可视区；卫星云图和天气图常常覆盖范围大，应按原始图形大尺寸显示，同时提供鼠标拖拽移动功能并以“cookie”形式记录变化坐标，方便用户下次阅览定位，也可根据用户需要提供缩放功能。
(5)帧动画雷达图和云图常常需要连续的帧动画来显示。很多气象网站将播放速度、动画启停时间点作为选项，但大多数用户对这些设置完全不关心，因此可以将这些功能保留在扩展控制面板中，默认控制用“近1/3/6小时动画”的按钮即可。“上/下一张”的切换应支持键盘左右方向键控制。
4代码实现
无论选择何种服务器端语言，用户阅览器最终执行的均是文本标记语言和层叠样式表，该语言的特点之一是可以在不终止运行的情况下，“纠错”语法的错误/歧义，但“纠错”的结果却会因用户预览器的种类、版本甚至是窗口大小的不同而变得不可预期。为了避免该类问题，方法上与传统编程需要有所区别。
4.1网页前台代码编写
(1)使用专门的超文本标记语言编写软件，并使用软件实时标记出最基本的语法错误。
(2)重置基本属性。所有页面元素都有默认属性值，但是不同的阅览器具有不同的设定标准，因此对全局属性重置很有必要。
(3)阅览器测试排错。超文本标记语言不需要编译，真正的执行在阅览器上，编写软件提示不可靠，仅作为参考。另外利用chrome、firefox预览器的“审查元素”功能可以直观提示每个属性值是由哪个class决定的，大幅提高工作效率。
(4)IE6阅览器不支持CSS3和HTML5。IE6阅览器是Windows XP系统默认预装阅览器，它不仅不支持新技术，有着与众不同的渲染规则，甚至连PNG图形透明都不能直接支持，因此在调查用户环境后必须选择是放弃IE6用户，还是放弃新技术。
4.2气象页面前台代码编写
上面提到的都是网页前台的通用经验，作为气象网站，还有一些细节的改进可以大幅提升网站的可维护性和实用性。
(1)在给页面文件、外挂CSS和JavaScript脚本、元素的class和ID命名时，应尽量使用气象术语，这将会对快速定位运行中可能出现的故障点有帮助。
(3)为报文资料添加数据库相关信息。可利用
