Vtiger美化：界面更新，用户体验更佳
Posted: Sat Dec 21, 2024 6:38 am
在 Vtiger，我们经常思考如何共同为客户创造更好的产品。我们的讨论范围从扩展 CRM 功能的想法到提高系统性能和改善用户体验。在 9 月份的一次特别讨论中，我们工程团队的几位成员开会讨论了他们对 UI 不一致的担忧。缺少空白、文本和图标对齐不当、操作栏中文本和图标的组合以及许多其他设计不一致的情况使他们在改进 Vtiger 用户界面方面感到困惑。
几周之内，这种愿望转化为 Alpana 项目（Alpana 是印 海外数据 度最古老的民间艺术之一，涉及手工和颜料制作的彩色图案）。产品管理和用户体验设计团队参与协作。 Alpana 项目的目标是创建一个优雅、直观的用户界面，该界面针对可读性进行了优化，并且不需要当前的 Vtiger 用户学习任何新内容。
改善用户体验的指导原则基于史蒂夫·克鲁格的可用性第一定律：不要让我思考。史蒂夫·克鲁格 (Steve Krug) 在他的《别让我思考：网络可用性的常识方法》一书中指出，网页应该始终易于理解。考虑到这一点，我们的团队着手创建一个直观的界面，让我们的用户可以理解，而无需考虑它是什么或如何使用它。
过程：
Alpana 项目于 3 个月前启动。在此期间，团队分析了Vtiger CRM中的每个页面，详细检查用户界面的不一致之处。按钮大小、文本对齐、颜色应用和许多其他细节都经过仔细检查，以确保一致性和可读性。经过多次集思广益和长时间讨论后，制定了指导方针来指导用户界面的改进。 Invision 设计公司的 Marco Suarez 将这些指导方针称为“设计系统”，这给他敲响了警钟：软件设计正处于危机之中。他上周写道。
我们的 UXD 团队创建了 286 个新图标，并为工程团队提供了 500 个布局来更新页面。我们的开发团队已经实施了 100 多项用户界面改进。每个新实施都经过了彻底的错误测试。一个月前，内部发布了新的 UI，现在这里的每个人都喜欢新的外观。
发生了什么变化：
图标：现在，当您登录 Vtiger CRM 时，您将看到精美的线条图标取代了旧的填充图标。线条图标简洁、优雅且易于识别。由于线条图标很浅，因此它们很少会导致您将目光从页面的主要部分移开。
线图标
菜单：我们输入菜单图标而不是文本。当您将鼠标悬停在该图标上时，您将看到所有模块按逻辑分组并垂直排列。垂直列表消除了水平和垂直扫描的结合，提高了阅读体验。
菜单-Alpana
名单显示： Vtiger CRM 允许您过滤 CRM 记录并将这些记录保存为列表。单击所需的列表将显示所有过滤的条目。直到昨天，这些列表名称还被贴在屏幕上，窃取了您想要查看的实际 CRM 数据的屏幕空间。此外，该空间强制水平滚动以查看有关该条目的更多信息。更新 UI 时，列表名称会在悬停时显示，并在选择时消失。这样，您将看到更多过滤后的数据，并且滚动浏览的次数更少。
查看列表
弹出窗口：我们引入了精美的弹出窗口来增强页面设计并提高可用性。在整个 CRM 应用程序中，这些新的模式弹出窗口不断出现在屏幕右侧。弹出窗口后面的原始页面被模糊化，以充分关注弹出窗口的内容。查看弹出信息后，您只需关闭弹出窗口并返回到原始屏幕即可从上次中断的地方继续。
弹出页面
图标快捷方式：在录制视图中，您现在可以看到所有关联选项卡的图标快捷方式。快捷方式提供了清晰的信息，因此您在单击之前无需考虑。
表格记录
这些是您会注意到的一些 UI 改进。还有许多其他微妙的改进，虽然不明显，但会提供更好的用户体验。想了解更多吗？阅读我们的文档。请发表评论，让我们知道您对 UI 改进的看法。
几周之内，这种愿望转化为 Alpana 项目（Alpana 是印 海外数据 度最古老的民间艺术之一，涉及手工和颜料制作的彩色图案）。产品管理和用户体验设计团队参与协作。 Alpana 项目的目标是创建一个优雅、直观的用户界面，该界面针对可读性进行了优化，并且不需要当前的 Vtiger 用户学习任何新内容。
改善用户体验的指导原则基于史蒂夫·克鲁格的可用性第一定律：不要让我思考。史蒂夫·克鲁格 (Steve Krug) 在他的《别让我思考：网络可用性的常识方法》一书中指出，网页应该始终易于理解。考虑到这一点，我们的团队着手创建一个直观的界面，让我们的用户可以理解，而无需考虑它是什么或如何使用它。
过程：
Alpana 项目于 3 个月前启动。在此期间，团队分析了Vtiger CRM中的每个页面，详细检查用户界面的不一致之处。按钮大小、文本对齐、颜色应用和许多其他细节都经过仔细检查，以确保一致性和可读性。经过多次集思广益和长时间讨论后，制定了指导方针来指导用户界面的改进。 Invision 设计公司的 Marco Suarez 将这些指导方针称为“设计系统”，这给他敲响了警钟：软件设计正处于危机之中。他上周写道。
我们的 UXD 团队创建了 286 个新图标，并为工程团队提供了 500 个布局来更新页面。我们的开发团队已经实施了 100 多项用户界面改进。每个新实施都经过了彻底的错误测试。一个月前，内部发布了新的 UI，现在这里的每个人都喜欢新的外观。
发生了什么变化：
图标：现在，当您登录 Vtiger CRM 时，您将看到精美的线条图标取代了旧的填充图标。线条图标简洁、优雅且易于识别。由于线条图标很浅，因此它们很少会导致您将目光从页面的主要部分移开。
线图标
菜单：我们输入菜单图标而不是文本。当您将鼠标悬停在该图标上时，您将看到所有模块按逻辑分组并垂直排列。垂直列表消除了水平和垂直扫描的结合，提高了阅读体验。
菜单-Alpana
名单显示： Vtiger CRM 允许您过滤 CRM 记录并将这些记录保存为列表。单击所需的列表将显示所有过滤的条目。直到昨天，这些列表名称还被贴在屏幕上，窃取了您想要查看的实际 CRM 数据的屏幕空间。此外，该空间强制水平滚动以查看有关该条目的更多信息。更新 UI 时，列表名称会在悬停时显示，并在选择时消失。这样，您将看到更多过滤后的数据，并且滚动浏览的次数更少。
查看列表
弹出窗口：我们引入了精美的弹出窗口来增强页面设计并提高可用性。在整个 CRM 应用程序中，这些新的模式弹出窗口不断出现在屏幕右侧。弹出窗口后面的原始页面被模糊化，以充分关注弹出窗口的内容。查看弹出信息后，您只需关闭弹出窗口并返回到原始屏幕即可从上次中断的地方继续。
弹出页面
图标快捷方式：在录制视图中，您现在可以看到所有关联选项卡的图标快捷方式。快捷方式提供了清晰的信息，因此您在单击之前无需考虑。
表格记录
这些是您会注意到的一些 UI 改进。还有许多其他微妙的改进，虽然不明显，但会提供更好的用户体验。想了解更多吗？阅读我们的文档。请发表评论，让我们知道您对 UI 改进的看法。