冬天的新糖UX'18

Sugarcrm是一项使我们的用户能够让客户欣赏客户的使命。为此,我们很高兴地介绍了Visual Restyling的第一阶段,并提供了一些关于如何与新UX合作的提示。

我们开发新UX的过程

Sugar 7引入了具有大规模用户界面改进(称为Sugarux)和现代化架构的Sidecar框架。从那以后,我们一直在努力在侧面框架上建造的糖次迭代。我们的指导原则来自我们的客户及其对Sidecar的反馈。客户的竞争分析和反馈揭示了三个问题;杂乱的复杂UX,低效的无导所布局,以及Drab过时的用户界面。

Sugarcrm用户体验团队(由LED Brian Ng.)推出了对网络和移动糖产品的严格启发式评估。在我们评估的关键用例中确定了问题,并记录了新解决方案。这种彻底了解产品,客户和行业已帮助我们首先要解决哪些问题。

在浅灰色的背景的深灰文本导致了易粘性差。沉重的黑人和灰色的亚麻布添加到日期和感觉中。

糖机有一个黑暗和单调的视觉设计。关键操作的按钮在关键屏幕上以不同的方式定位。

建立目标

有了解问题,我们为自己设定了目标。

  • 提高设计超过100个可用性问题,通过对用户的影响优先考虑'能够完成他们的工作。
  • 建立一个干净而现代的视觉设计语言,在风格指南中记录规则。
  • 确保我们的产品可通过所有,满足Web内容可访问性指南(WCAG)可顺应性。

我们新设计的指导原则

我们建立了三项设计原则:清晰,一致,高效。这些原则引导了我们的所有决策。建立原则有助于解决意见的差异,并专注于用户挫折。我们确定了哪些颜色和字体会对我们的用例产生积极影响,仍然反映我们的品牌。

我们已采用开放的SANS作为糖UX基本字体。它’s为具有文本沉重布局的Web和移动接口优化的开源字体。它’以其开放,中性型形状和友好的外观而闻名。对于颜色,我们选择了一个更友好,现代和更亮的颜色调色板。

 

我们还选择了一组颜色和字体,会对我们的用例产生积极影响,并仍反映Sugarcrm品牌。最后,我们在现实世界中测试了概念,在关键的流动中具有真正的用户,以观察他们在实践中的出现效果。


手机在战略地点展出了明亮的外观和颜色,以帮助用户识别信息组。

结果

  • 首先在Sugarcon透露给客户给出反馈的1000多个与会者。
  • 一种新的视觉设计语言,以风格指南(即将推出),赋予客户和合作伙伴能够在我们的产品上始终如一地实施Sugarux。
  • 在我们的Sugar移动应用程序上推出新的Sugarux,已经可以提供 Apple App Store.谷歌游戏.

在冬天‘18!

我们新UX的第一阶段即将到来'18释放,我们希望确保糖开发人员社区首先要给它试驾。如果您已构建任何Sidecar组件或自定义(Dashlet,自定义视图或布局等),那么您应该验证它们在新UX中是否正确显示。与所有代码级别自定义一样,它取决于Sugar开发人员,以确保您修复您的代码,以便在新UX中正确显示您的自定义。

从实现角度来看,这些变化已经完全在我们的CSS中完成'VE调整了现有CSS类的样式。因此,关注的领域将在您覆盖糖的造型的地方'S Core CSS类或通过使用来推出您自己的CSS ./custom/themes/custom.less.。预计只需使用现有CSS课程的大部分自定义都会在没有错误的情况下采用新的造型。

像往常一样,我们将仅在冬季运行邀请技术预览计划'18(仅需按需)发布。如果您想确保为此预览考虑您的组织,请发送电子邮件 developers@sugarcrm.com. 并提到您对驾驶新糖UX的测试的兴趣!

建立新的皮肤测试计划

我们已经提到了这项努力“new skin”因为这一第一阶段主要涉及对CSS的更改,并且对于任何Sidecar组件,对默认HTML结构无重大更改。

您如何确保您的自定义仍然是像素完美的?以下是有些提示您和您的团队建立测试计划。

探索性测试

我们建议使用固定的时间来进行一些探索性测试,以确保您的自定义在新皮肤中看起来很棒。多少时间?这取决于你有多少UI。例如,它不应该花费超过几分钟来测试自定义dashlet,并发现您可能想要地址的任何错误。

测试人员指南

如果您正在测试,您在寻找什么?这里有一些提示。

  • 仅限定制。测试应关注您的团队创建的自定义。
  • CSS覆盖。如果你使用 ./custom/themes/custom.less. 文件或包括您自己的CSS文件,然后是您’LL需要特别注意这些变化,因为它们可能需要更新。
  • 滚动。你是否能够滚动,即使是滚动也可以访问它吗?
  • exipsify。当您缩小窗口大小或减少自定义列表视图上的数据的可用空间时,记录视图等,它们是否exipsify并显示在悬停上的工具提示?
  • 响应能力。调整浏览器窗口的大小或切换到响应模式。观察页面上的元素会发生什么。
  • 在平板电脑上的方向。横向和纵向模式之间的交替显示方向。
  • 切换事物。在录制视图等上打开/关闭抽屉,菜单,编辑和细节模式等
  • 设置。更改系统和配置文件设置,可以改变事物的样子,日期/时间格式,货币等。

与盒子糖的比较

这篇文章包括一些新皮肤在框中看起来像截图的一些例子。将自定义与开箱即用的观点进行比较,并且觉得可以帮助您识别您可能需要更改自定义的内容。我们鼓励测试人员在测试时保持两个窗口打开,以便在一个窗口中与其他窗口中的自定义更轻松地比较一个窗口中的框行为。

匿名的
父母
没有数据
评论
  • $ core_v2_ui.getresizedimagehtml($ compual.user.avatarurl,44,44,44,“%{border ='0px',alt = $ compougin.user.displayname,resizemethod ='zoomandcrop'}”)
    $ core_v2_ui.userpresence($ comminy.user.id) $ compount.user.displayname. 超过2020年前
    此评论正在审核。
孩子们
没有数据