一种企业级软件的前端 UX 设计风格的演化史介绍

世界上一些著名的大型科技公司都有自己的设计语言(Design Language)，从最初苹果的Human Interface Guideline(HIG), 到后来居上的谷歌 Material Design, 再到去年新鲜出炉的微软Fluent Design。这些设计语言已经深度融入并改变了人们日常对电子设备的使用习惯。在这些设计语言中，当然也有我们SAP独创的设计语言：获得过红点设计大奖的Fiori Design。

Fiori的问世与SAP创始人之一Hasso Plattner对设计的重视有关。早在2005年，他便在斯坦福大学捐资成立了Hasso Plattner Institute(HPI) of Design, 也就是后来大名鼎鼎的d.school。d.school能在全世界率先把设计思维(Design Thinking)作为一个正式的方法论向工科学生传授，并且Hasso积极将其融入SAP的DNA中，也是由于他看中了设计思维的发展潜力及设计的力量。现在我们普遍采用的设计先行的开发流程(Design-Led Development Process)便源于此。他当时说过SAP有些产品既不实用也不吸引客户，而我们还在销售它们，这在云计算时代行不通。这最终也促成了Fiori的诞生。

Fiori 致力于建立标准的现代化企业级用户体验，通过仅给客户提供他们真正所需的内容，使他们对自己的业务有完全的掌控。这个核心目标体现在五个设计原则中：基于用户角色，可适配不同设备，流畅直观的体验，简单和令人愉悦。

SAP Fiori 1.0 是在2013年正式推出的，一经面世便备受关注，并很快应用在了SAPS/4HANA, Success Factors, Ariba移动端以及C4C等解决方案中。所谓的Fiori 1.0是指所使用的SAP UI5控件版本介于1.26到.1.38之间的样式，大概长下面这个样子?。

而从2016年10月开始，控件版本升到1.40之后，Fiori正式进入了2.0时代。画风更加唯美的同时，也进一步增强了灵活性和空间的利用。比如用户处理主线任务的可以兼顾追踪其他区域的动态，提升了导航特性，通过”viewport”可以做到跨界面交互，以及可以跨屏查看个人设置等等。因为本文是通识介绍，所以在此就不详细介绍设计的细节了。

Fiori是SAP的Global Design团队打造的设计语言，像是一个总纲，提供整体的原则及使用规范层面上的指导，但不针对具体的某个产品。

所以我们C4C成都组所属的SAP C4C 产品线就拥有一支专属的设计团队。团队内部还细分为针对业务的设计师，针对框架的设计师，视觉设计师和用户研究可用性测试的设计师。大部分设计师在硅谷，有三个在班加罗尔，我一个在成都，是针对框架的设计师。

上图是C4C产品现在的主页，乍一看是不是像极了Fiori 1.0界面？没错，作为SAP家族重要成员之一，C4C的确使用了大量的Fiori标准控件，这样能确保我们的产品与众多其他SAP产品保持样式的一致性，从而令用户对SAP拥有更统一的认知。然而由于一些特有的业务场景需要，C4C也有很多自己增强的控件。比如上图左侧黑色的导航列表，就是继承了标准控件的C4C特有控件。这么做可以进一步丰富了产品的特性，但同时也增加了日后维护成本。比如我们最近在做的主题升级，开发人员和设计师就耗费了很大精力对控件逐个定位并修改样式。我们设计团队也意识到了这个问题，现在正在组织编写C4C自己的设计规范，把C4C产品里所有使用到的控件都囊括在内，与UI5标准控件清晰的区分开。设计规范也将详细规定何时何地使用何种控件，并提供详细视觉设计稿，以便开发人员准确理解，避免歧义。

我们内部把这个界面叫做RUI(Responsive User Interface)，因为它可以适配手机，平板，笔记本和台式机，也可以同时在app和浏览器上使用。

C4C大概是在2015年逐渐采用RUI设计的，那么C4C在此之前长什么样呢？请看下图。

是不是一股复古风扑面而来？我们内部管它叫UX3或者html5。因为它使用的是html5框架，因此不支持app端的使用。虽然不如RUI好看，但目前它的配置功能比RUI要齐全，所以很多客户现在还在使用这个版本。不过在不远的将来，RUI会具备UX3所有的功能，而且目前我们也已停止针对UX3的新功能开发，它会逐渐的被RUI取代。而这还不是C4C最老的版本，下图才是。

我们称之为Silverlight，因为用的是微软的Silverlight框架。这大概是2011-2012年C4C刚成立时的版本。而就在不久前，官宣停止对这个版本的维护，因此这个版本已经正式退出历史舞台。

我们用倒序的方式看了C4C的演化史，而这三个只是大阶段，每个阶段内都在根据客户的反馈及我们的调研结果不停地进行UX的优化。而一切设计的初衷就是让我们产品的用户用的舒适满意，并吸引更多的客户购买我们的产品。