旧版XSwitch因功能杂乱,开发人员轮换,设计上无统一规范等原因,导致界面与交互体验不佳。
新版XSwitch的交互优化,我们重点放在了为其提供统一的设计风格,以及在兼容之前用户使用习惯的前提下,让交互符合基本的设计原则。
设计原则帮助我们在做设计时,不偏离提升用户体验的目的,为设计提供全局性的方向指导,展现团队和产品所推崇的价值观。
XSwitch系统中的设计原则:一致性、即时反馈、简单易用
-
一致性:在同一个或同一系列产品中,视觉、交互、使用原则上保持一致,不仅是赋予产品独一无二的品牌意义,更是降低用户学习成本、提供使用体验的重要原则。
-
即时反馈:保证用户在任何操作后得到反馈,了解操作后果,减少用户的焦虑和疑惑。
-
简单易用:避免繁琐的装饰性设计、过度设计,一切以快速到达任务终点为目的,提高使用效率。
我们选取了更具有科技感、清新、稳定的蓝绿色作为主体色调,取代目前更广泛应用于各种办公系统、缺少辨识度的蓝色,升级了XSwitch的Logo,并衍生出了在互联网产品中更易使用的主色。

我们希望在XSwitch及相关衍生产品中保持统一的品牌调性,后续我们会推出不同颜色的主题,搭配客户产品Logo进行一键替换。
根据即时反馈的原则,在用户的任何操作后,都需要了解到操作的后果,通常我们使用以下「弱反馈」和「强反馈」的方式,根据不同的使用场景进行应用。
强反馈还可表现为链路较长的操作后出现的「结果页」。

而操作链路较短、重复性较高的操作,通常使用toast提示,如下:

即使在高重复性的情况下,我们也建议在每次保存后提示用户。
通常情况下,毁灭性操作要给予用户更强烈的提示,比如「删除」。
如果没有进行事前提示,那事后要给用户反悔的空间。这是为了防止用户在误操作的情况下,造成不可挽回的数据丢失。

为了保持老用户的操作习惯,不增加用户的学习成本,我们沿用了旧版本中的「快捷删除模式」,并改进了它的交互,来弥补这一操作缺失的反馈信息。即「用户需要手动开启这一模式,才能进入无反馈与二次确认的删除状态」
点击「快速删除模式」后,操作区的「删除」变为红色,点击「删除」将不再出现二次确认窗口,让用户可以快速删除数据。
我们在详情页中延续了旧版本的交互准则----即时编辑,并在此基础上增加了反馈和提示。既可以不改变用户的使用习惯,又可以使页面符合我们的设计原则。
-
-
-
编辑时,弹出气泡提示,点击「不再显示」即可取消弹窗

这是为了解决用户在浏览详情页时,想要立刻修改的问题。防止从详情页跳转到编辑状态时,页面进行切换,导致用户无法立刻找到想要编辑的部分。
通常我们的表单页与详情页都隶属于不同的界面,会使编辑与浏览之间的切换不够便捷。
同样,我们也在表格中引入了类似的交互,可以让用户直接在浏览数据层面,直接修改表格中的数据,并即时保存。
减少了修改数据的步骤,节省此类高重复性操作的时间。
*操作:当鼠标经过时,数据显示对话框,单击后变为可编辑状态。
此次的改版侧重于为XSwitch的产品和品牌提供统一的设计风格和交互方式,将原本较为杂乱无章的、出自多人之手的用户界面,根据一定的设计原则进行梳理和规范。
这不仅能提高XSwitch的用户体验,更可以为我们之后的界面设计提供方向指导,达到视觉和使用上的一致。
欢迎大家使用XSwitch,也欢迎大家的各种批评和建议。您的支持是督促我们前进的不竭的动力。
Kamailio高手速成培训火热报名中:报名链接
XSwitch运维开发培训同步报名中:报名链接