设计 Niagara UI 需要考虑什么- 大数跨境

汇智众享

2021-08-28

导读：动手做 Px 之前，需要先想一想的那些事儿

前情回顾

上一期我们主要聊了聊 Niagara 上那些自带的视图，大多数是用于组态，调试和参数变更的。Niagara 作为中间件，并不适合直接提供面向最终用户的图形界面。它提供了一种组态的方式，以便针对不同项目去搭建终端客户需要的图形交互界面。这样的视图在 Niagara 上叫做 Px 视图。在动手搭建 Px 视图之前，还有很多因素需要考虑，这便是本期的内容。

PREPARE

前期准备

作为 UI 设计人员，首先要对整个系统的架构和硬件设备有足够的熟悉程度。很难想象一个家装设计师在没拿到户型图以及不知道那个是承重墙的情况下能开始设计工作。

SURVEY

需求调研

深入了解客户对系统的使用要求以及使用习惯，这往往是和客户的行业特点以及运维管理方式息息相关的。我相信，所有 UI 设计人员都是会跟用户了解他们需要哪些数据的。但是，只有那些高水平的设计者才会意识到：相比于用户“要什么”，更重要的是，用户“怎样要”这些数据。也就是说，他们是以何种方式访问这些数据的？哪些是每天都要看多次的，哪些是每月才要看一次的；哪些是正常情况下不需要看，而一旦出问题马上就需要获得大量全面而准确信息的……针对这些不同的情况，都要选用不同的方式去呈现。无视数据的重要性等级而将大量甚至所有数据都堆叠在一起呈现，非但会影响数据加载效率(这个问题以后有时间我们细讲)，也不利于运维人员快速捕捉到需要关注的数据，从而影响工作效率。

此外，设计者本人相关的行业经验也会起到非常重要的作用。比如，作为一个优秀的家装设计师，需要有“生活”，各种各样的生活。对于有两个未成年儿童的家庭和有两个80岁以上老人的家庭，对装修的偏好肯定是有非常大差异的。如果设计师本身有照顾儿童或老人相关的生活经验的话，就可以很容易避免一些想当然的错误。同样地，让一个完全没开过飞机的人去设计驾驶舱的仪表盘，他设计出来的产品，很可能会造成空难。

ANALYSIS

技术可行性分析

在了解客户需求之后，便需要将用户的需求以及你的设计思路，映射到 Niagara 上了。这时候，你需要了解在 Niagara 上实现这些需求的“边界”在哪里。然后才能对需求进行分析：哪些需求在 Niagara 上面是很容易实现的，哪些是需要耗费大量时间才能实现的，哪些是需要额外做二次开发能实现的，哪些是根本没法实现的。

知道吗？二战中，日本人认为自己输掉太平洋战争的一个重要原因就是不知道居然有推土机这种机场建造“神器”。美军机场被轰炸之后，总是能靠推土机得到快速修复，而日本机场则需要花费数倍的人力、物力和时间……。

回到工程上来，如果你不知道有某种类似“推土机”的技术，你的报价就会比别人高；即使勉强用低报价抢了标，心里也一直认为自己在“赔钱”做项目，是甲方故意压榨你，亏欠了你的。此后客户哪怕有任何微小改动，你都会很不情愿，认为这是在进一步榨干你。原本用这点儿钱能接了这活儿，对客户已经是仁至义尽，根本就不愿意做出哪怕一点点的让步……

这里其实最重要的事情就是，要知道 Niagara 平台提供了“几把刷子”，自己手里有几把！（并且，能在不亏本的情况下把墙刷完）这不仅仅限于本期 UI 的范围。那么如何知道有几把刷子以及怎么能在兜里多揣几把刷子呢？来，正规的培训了解一下：

如果没钱、没时间呢？

也有办法：关注本公众号，追更~

ACHIEVE

实现

关于页面总体规划

针对用户的需求和使用习惯，首先要规划页面的布局，把重要且常用的内容放到主页面上，并选取适当的背景和配色使得页面简洁大方重点突出。其次，把一些偶尔会用到的功能通过在主页面上建立工具栏或者超链接按钮的方式放到子页面上去。第三，如果有设备报警等情况，最好通过弹窗，声音，图形闪烁等方式做突出显示。

关于实现方式的设计

在总体规划的基础上，提炼出哪些内容是多个页面需要共享的部分，这部分可以做成子页面供多个页面共用，在 Niagara 中可以通过 Px Include实现。再配以相对路径，可以节省很多重复工作。这个过程其实和程序设计有些类似，哪些内容是需要抽象成类供以后扩展的，哪些内容是需要做成函数在多个地方被重复调用的……

图片以及处理工具

为了美化页面，至少在纯 Px 设计上，还是需要一些背景图片资源和处理工具的。Niagara本身自带的图形元素偏少，而且大部分都挺难看的。对于图片资源，大部分情况下，多花点时间互联网上都能找到，有时可能需要甲方提供一些。而图片处理工具，当然高级一点的会用到PS这样专业的软件，如果没有或者不会用，其实 PowerPoint 就能满足大部分情况的处理。