如何分析SAP Fiori Design Guidelines

本篇文章给大家分享的是有关如何分析SAP Fiori Design Guidelines，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

前言

在 SAP 实习之前我是不知道 Fiori 的，正如在蚂蚁实习之前我是不知道 Ant Design 的，一是我孤陋寡闻，二是这些都是企业级的设计规范，不是工作需要应该用不到。遗憾的是在 SAP 实习期间我没有用到 Fiori 的设计体系，所以因为工作需要研究它的时候只能自己看网上材料和“道听途说”。

做设计规范很难，大而全很难，小而精也难。在我看来，Fiori 就是大而全的设计规范，Material Design System 是小而精的设计规范，两者都非常值得学习借鉴。但如果是想要深入学习（而不仅是了解）设计规范，Fiori 是一个很好的教材，他的官网是我目前看到的设计规范类网站写得最全、最详细的，不禁感叹德国人做事的认真程度。

Fiori 开发原因

首先不难理解 SAP 为什么要开发一套 Fiori 体系，虽然企业级软件对界面美观程度要求没那么高，但随着时代的演变，客户对于交互界面的要求越来越高，用户谈起SAP的界面，第一感觉就是丑，所以SAP开始谋求转变，痛苦转型，投入大量人力物力开发出 SAPUI5 这一前端技术框架，并基于这个框架开发了一整套新的用户交互系统，即 SAP Fiori。

SAP UI 系统演变

对比 SAP UI 系统的演变，可以看出，虽然现在的 Fiori 2.0 不至于多么美观惊艳好用，但相比于之前的 GUI 版本，已经是质的突破。

1992 年, SAP GUI, SAP 最早的 UI 系统。

SAP就很有先见的推出了SAP GUI，这个其实就是最早的BS框架，不过这个B是SAP自己的客户端而不是标准浏览器，但是遵循的就是三层框架。这个工具开发迅速，运行迅速，但是页面呆板，SAP页面开发都需要遵循特定的模式，但是这也是由于SAP针对的特定企业客户决定的，因为一个企业的应用程序数量往往比一个互联网网站多，为了方便统一的风格，而且便于客户的迅速学习，而且也便于迅速的开发，这样的设计是合理的。模式的概念一直在SAP延续，所有的程序要求模板化，样式一直也能快速开发。

WEB 2.0 时代，SAP Web Dynpro，基本上延续了前一版本的风格。

2013 年，SAP Fiori 1.0，基于 SAPUI5 技术框架开发的新的用户交互系统

2016 年 10 月，SAP Fiori 2.0，此版本用户体验设计概念在红点奖交互类设计竞赛中获得 2015 红点设计概念大奖。概念视频链接

Fiori 定义

SAP Fiori 的官方定义： “SAP Fiori is the new user experience (UX) for SAP software that applies modern design principles. SAP solutions, such as the SAP Business Suite powered by SAP HANA, are using the SAP Fiori UX to provide a personalized, responsive, and simple user experience.”  抓住几个关键词，modern design principles 就是符合当前的前端设计潮流，比如简洁化、平面化，  personalized 就是更个性化，更以用户为中心，每个用户的界面都是不一样的，  responsive 可以自适应不同的终端，  simple user experience 也是最终目的，让用户使用起来最简单，一目了然。引用自：SAP  Fiori

下面详细分析一下 Fiori 是如何践行定义，做到符合 modern design principles ，personalized 和 responsive 。

Fiori 网站框架

下图是 Fiori 的网站框架，题目中的 Fiori Design Guidelines 指的是下图右半部分内容，我觉得右边内容是着重给设计工作者（包括设计师，产品经理等）查看的，而左边内容主要给开发人员查看。

其实开始看 Fiori  Design Guidelines 的网站，会有种晕头转向的感觉，打开了一个又一个链接，跳来跳去，但了解了网站的逻辑架构之后，会清晰很多。

Guidelines 网站主要干货是 Foundation, General Concepts, Layouts, UI Elements 这几大模块。Foundation 模块主要阐述 Fiori 的定义，设计理念，设计方法， 响应性与适应性等最基础，也是最重要的概念。General Concepts 是讲 Fiori 系统比较典型和通用的设计概念，比如它最有特色的 Launchpad, 以及界面内界面之间的增删改查的流程。Layouts, Floorplans and Frameworks 是讲单个界面的布局，平面图和框架。UI Elements 则是细化讲每个组件。

前面提到的看这个网站晕头转向是因为它的所有的内容都是串在一起，比如在解释一个组件时，如果涉及原则或其他组件内容，它都会给一个超链接让你可以跳转过去查看详细，所以往往一个页面，会有很多超链接跳转到设计原则、基本概念、各种组件，以及一些开发代码页面。

Foundation 模块

先解读 Foundation 模块。其中有两个内容最有特点，Design Principles 和 Responsive vs. Adaptive。

Fiori 的 Design Principles 有五点，如下图。

令人愉悦的，连贯的，简单的 在其他设计规范的设计原则中可以看到类似描述，但 基于角色的， 适应性的 则是 Fiori 最突出的，也是目前来看设计规范里做得最好的。

以前 SAP 的软件是基于业务的，然后在这个业务中会有很多操作角色，面对的是同样的软件和界面内容。而现在 SAP 强调体验为先，将以前的业务模块拆分为简单、单一的任务模块，更加个性、简单和高效，个性指依据不同工作角色展现不同任务模块，而非以前的所有人都看一样的业务模块，业务模块（产品经理角度）变成任务模块（用户角色角度）。在界面中最能体现基于角色这一设计原则的即是它的 Launchpad ,如下图。

此原则从对当今员工队伍多方面角色的广泛见解中提取出来。 SAP Fiori 在正确的时间提供正确的信息，反映实际工作的方式。

在Fiori 2.0的Launchpad中，左右两边各增加了一个新的区域，相当于扩展了整个桌面的使用范围，这种设计概念，被称为“Viewport Concept”。
在屏幕右侧是“Notification Area”，感觉有点iOS里面的通知中心的意思。消息或者是Workflow的提醒会体现在这里。它的作用是时刻帮我提醒老板：我的报销你还不赶紧批，等着生崽么？
左侧叫“Me Area”，放置一些最近使用过的Apps，或者是一些自定义的用户菜单，用于搜索的App Finder也在这里。
中间的一大块被称为工作区，是用户处理日常业务的地方。
这样的设计模式，可以让用户既聚焦于核心工作任务，又不会错失其他方面的动态。照顾得面面俱到的感觉啊。引用自 三分钟了解Fiori背后的设计理念

Adaptive 适应性原则是指适应多种使用场景和设备，结合 Responsive vs. Adaptive 来分析。Fiori 提出了 Responsive Design 响应性设计 和 Adaptive Design 适应性设计。响应性很好理解，即页面的设计与开发可根据用户行为与设备环境(包括系统平台，屏幕尺寸，屏幕定向等)进行相应的响应及调整。而适应性则是当响应式设计不能满足某些特殊使用场景时，需要针对不同设备进行设计，并根据具体设备调整设计的复杂性。具体可以结合官网案例进行理解。简单理解响应性是设置节点，对内容进行隐藏或变形。而适应性是直接调整设计复杂性，可以依据情况删除某些内容。

General Concepts 和 Layouts, Floorplans and Frameworks 模块

General Concepts 和 Layouts, Floorplans and Frameworks 模块里详细讲解了 Fiori 比较典型和通用的设计概念和布局。仔细研究会发现 Fiori 的设计规范真的事无巨细、面面俱到，很多概念，比如 Action Placement, 讲的是全局操作和本地操作，这些其实在设计页面时，大家都有这种意识，但是没有看到其他的设计规范将其总结成规范（可能我了解的不够，如果有，请告知）。

UI Elements 模块

我也总结了一下 Fiori 是如何讲解一个组件的。一般设计规范展示组件时都会涉及到以下维度，但毫无疑问 Fiori 是其中最详细的。特别是 Guidelines 部分，分析了业务中可能会遇到的所有情况，最神奇的是，如果你的业务场景不适合这个组件，它还会帮你分析哪种组件适合你的需求，然后附上链接。然后绝大部分组件都会列举在不同设备端的呈现方式，真的是踏踏实实践行了 Adaptive 原则。

总结评价

写着写着总觉得跑题了，题目是如何评价 Fiori, 而我以上写的都是如何解读 Fiori。不过相信大家都有颗好学的心，多看点没坏处，哈哈哈。下面真的要来点题了。

1. Fiori 是 SAP 从自己庞大的业务模块中抽取、沉淀出来的设计规范，成功服务于 SAP 复杂且庞大的 ERP 系统。它的实践和商业应用能力毋庸置疑。

2. SAP 从最初的 GUI 体系转换为现在的 Fiori 体系，目前 SAP 所有的新产品以及旧产品迭代都在运用 Fiori 体系，可以说是一次彻底的大换血，Fiori 对 SAP 的重大意义不言而喻。

3. Fiori 不是单纯的设计规范罗列，而是一个庞大的设计体系网络。它的 Design Principles, Concepts, Layouts, UI Elements 等内容之间丝丝相扣，紧密关联，敬佩 Fiori 设计师的巨大投入。

4. Fiori 提出了很多自己特色的理念和设计概念，比如基于用户的原则，Design-Led Development Process, Launchpad, Multi-Device Support: Responsive vs. Adaptive，Mobile First 等，这些可以说都是 SAP 从自己业务模块中抽取、沉淀出来的精华。打个岔，在研究 Fiori 之后，我才知道 Fiori 提出的 Design-Led Development Process（ DDP ） 就是 DesignThinking 的具体衍化。DesignThinking 是 Hasso Plattner （斯坦福 Stanford d.school 创始人之一）与 IDEO 共同研究出的一套设计方法，而 Hasso Plattner 又是 SAP 的设计方法布道人，所以 SAP 其实是最先推广运用 DesignThinking 的公司之一。DDP 设计方法详述

5. 因为呈现的内容特别多，而且网站框架就是按照它本身的规范来搭建的，所以 Fiori 浏览起来没有其他设计规范的网站清晰、易理解，相对而言学习成本较高。

以上就是如何分析SAP Fiori Design Guidelines，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。