西门子COMOS软件开发定制学习10-交互设计案例

基于COMOS开放的编程接口，管理员可以为同一用户需求提供多种解决方案。但如果解决方案仅仅是满足用户需求而忽略交互设计，可能会带来很差的用户体验，减少用户的使用积极性，无法发挥软件最大的价值。

今天就通过一个实际案例，一起了解下交互设计的重要性，以便引起大家对方案优化和后期迭代的重视。

首先介绍下案例需求:用户可通过拖拽控制点绘制出下图所示图形，并允许移动箭头位置和拐点位置。

接下来介绍下差、中、优三种解决方案。

方案1（交互体验差）：

将控制点设置在箭头中部，“水平处控制点”负责“垂直箭头”的左右移动，“水平控制点”上下移动时，图例不执行任何动作，如下图所示：

“垂直控制点”负责“水平箭头”的上下移动，“垂直控制点”左右拖拽时图例不变化，如下所示：

在工具条位置选择“带拐点”的复选框，实现绘制拐点。

从以上操作演示来看，效果还不错，完全符合用户需求。接下来做个组合操作，看下会发生什么？

组合操作后，控制点的位置完全没有规律，用户很难快速判断移动“水平箭头”该拖拽哪个控制点。

方案2（基于方案1优化）

将方案1中的水平控制点和垂直控制点做限制，水平控制点仅可水平移动，如下所示

垂直控制点只可上下移动，如下所示

通过限制可以减少控制点混乱的状态，以下是组合操作演示

经过优化，方案2可以保证大部分情况下控制点在图例的相关直线上，方便用户识别，但有时还是会出现下图所示的控制点混乱的情况。

方案3（友好交互）
控制点布置在箭头顶端，所动即所得。

最后再跟大家分享几个图例定制成果，仅供参考

1.任意增加箭头数量和移动箭头位置（基于三角函数换算实现）

2.根据需要添加卧式容器的水包和移动水包位置

3.绘制云线

?就到这里，欢迎关注分享~

推荐阅读：

西门子COMOS软件开发定制学习9-圈注图例

西门子COMOS软件开发定制学习8-查询列表间的数据交互

西门子COMOS软件开发定制学习7-嵌入谷歌浏览器内核

西门子COMOS软件开发定制学习6-管理界面定制