关于台架测控系统用户界面（UI）风格的思考

王庆

台架试验系统的UI，沿袭传统上控制系统的UI，多采用浅底深字，图形、动画也是采用深色系做表达。

近年来，无论是在桌面APP、移动端APP、web浏览器等平台上，流行深色背景的设计风格，广受程序员的追捧。特别是在桌面端，这种风格在各类大型软件上都有所体现，如VS、PS等。

背景和内容两者之间的对比度与可读性是成正比，白色背景下的黑色文字拥有最好的可读性，类似于人类读书的感觉。但是，测控过程的UI，并不要求对文字进行“阅读”，而是一种“略读”，在这种情况下，大面积的暗色，可以减少高亮度对人眼的刺激，感觉更舒适。

网上有文章总结出了深色背景的优势：

风格化，优雅

给人神秘的感觉

带来奢华和高端的氛围

拥有广阔而良好的对比度

更容易创造视觉层次感

创造视觉深度，让内容更容易被获取

视觉吸引力

同时，扁平化的设计风格也在流行，即界面要素追求简洁，摈弃各类立体化、色彩纷繁的拟物化设计，反而以单线条、平面化的设计为主。在我看来，这种风格的主要优点就是突出主题，避免各种视觉效果对用户视线的干扰，从而在设计上更加简单高效；缺点就是表达情感上过于冷淡，不如拟物化细腻。

测控画面，与通用软件有相同的地方，但也有其特殊性。其一，操作逻辑没有那么复杂，更加追求流程清晰；其二，更多的数字、图表的表达，导致需要对重点、一般数据进行不同呈现的层次设计。所以测控系统所需要传递的信息就是：严谨、高效，可读性，与扁平化风格二者还是匹配的。

为了体验新的设计风格在测控系统上的应用，我用C#做了一个统计学基本计算的演示软件，从登录界面到数据展示界面，研究了配色、图标、图表、字符显示等若干环节，自我感觉良好😊，并得到了以下心得：

主画面的主要色彩不超过五种，且调性应协调。本次采用了以下四种主色调：深蓝、浅蓝、灰色、绿色；（配色的调性在网上有很多工具可用）。
深色比起其他的色彩来的更加厚重，使得它适宜于展示图片、实时曲线等内容。在良好的布局和结构下，大面积深色能够显著提升其他视觉元素的表现力，让内容更具有吸引力。
在黑暗的背景下，尽量不要使用纯白，应当用浅灰色替代白色，防止极端的对比使白色过于耀眼。
在测控领域种不可缺少的红色、绿色（这是表达危险与安全状态的标准色），避免采用标准的rgb(255,0,0) 以及rgb(0,255,0)，这两色应做适当的变化，以与主色调融合。(如绿色见上图的峰峰值的配色)。

适当地加入图标，以取代或协助文字表达，更能够使画面显得有“范儿”，严谨而不失活泼。

采用深浅不同的色块来区分数据区域，避免采用线框进行分割，可以加强画面整体感。

即便是窗体，我也采用了无框设计。但这种设计在窗体进行drag、min、max时，需要代码设计。

上述样例里面没有设计流程图。在我看来，只要遵循上述原则，流程图的设计也采用简单的单线条，摒弃复杂的三维表达，也可以做到整体的风格统一。但是如果客户就是喜欢动态的、三维的UI，那就只好放弃自己的风格了。

当然，编程平台，如WINCC、Labview等，可能对自己的创意也有所约束。