如何評價 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 版本，已經是質的突破。

<img src="https://pic2.zhimg.com/50/v2-20b4b15649ea190cd2979fb3aa937f32_hd.jpg" data-rawwidth="1729" data-rawheight="1136" class="origin_image zh-lightbox-thumb" width="1729" data-original="https://pic2.zhimg.com/v2-20b4b15649ea190cd2979fb3aa937f32_r.jpg"/>

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

SAP就很有先見的推出了SAP GUI，這個其實就是最早的BS框架，不過這個B是SAP自己的客戶端而不是標準瀏覽器，但是遵循的就是三層框架。這個工具開發迅速，執行迅速，但是頁面呆板，SAP頁面開發都需要遵循特定的模式，但是這也是由於SAP針對的特定企業客戶決定的，因為一個企業的應用程式數量往往比一個網際網路網站多，為了方便統一的風格，而且便於客戶的迅速學習，而且也便於迅速的開發，這樣的設計是合理的。模式的概念一直在SAP延續，所有的程式要求模板化，樣式一直也能快速開發。

<img src="https://pic1.zhimg.com/50/v2-358fee886317dd4bde513d4def91f1ac_hd.jpg" data-rawwidth="1729" data-rawheight="1124" class="origin_image zh-lightbox-thumb" width="1729" data-original="https://pic1.zhimg.com/v2-358fee886317dd4bde513d4def91f1ac_r.jpg"/>

Web 2.0 時代，SAP Web Dynpro，基本上延續了前一版本的風格。

<img src="https://pic4.zhimg.com/50/v2-3d6868ba0559391195eae5687df09961_hd.jpg" data-rawwidth="1729" data-rawheight="1297" class="origin_image zh-lightbox-thumb" width="1729" data-original="https://pic4.zhimg.com/v2-3d6868ba0559391195eae5687df09961_r.jpg"/>

2013 年，SAP Fiori 1.0，基於 SAPUI5 技術框架開發的新的使用者互動系統

<img src="https://pic1.zhimg.com/50/v2-27a4f000b9530be15de79b4314ac30df_hd.jpg" data-rawwidth="1729" data-rawheight="1079" class="origin_image zh-lightbox-thumb" width="1729" data-original="https://pic1.zhimg.com/v2-27a4f000b9530be15de79b4314ac30df_r.jpg"/>

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 則是細化講每個元件。

前面提到的看這個網站暈頭轉向是因為它的所有的內容都是串在一起，比如在解釋一個元件時，如果涉及原則或其他元件內容，它都會給一個超連結讓你可以跳轉過去檢視詳細，所以往往一個頁面，會有很多超連結跳轉到設計原則、基本概念、各種元件，以及一些開發內碼表面。

<img src="https://pic3.zhimg.com/50/v2-815b57755dccc1715f4891d9c9de11e6_hd.jpg" data-rawwidth="1376" data-rawheight="833" class="origin_image zh-lightbox-thumb" width="1376" data-original="https://pic3.zhimg.com/v2-815b57755dccc1715f4891d9c9de11e6_r.jpg"/>

Foundation 模組

先解讀 Foundation 模組。其中有兩個內容最有特點，Design Principles 和 Responsive vs. Adaptive。

Fiori 的 Design Principles 有五點，如下圖。

<img src="https://pic1.zhimg.com/50/v2-5b3480191b0eb5f33ce77f465f1b4311_hd.jpg" data-rawwidth="2256" data-rawheight="600" class="origin_image zh-lightbox-thumb" width="2256" data-original="https://pic1.zhimg.com/v2-5b3480191b0eb5f33ce77f465f1b4311_r.jpg"/>

令人愉悅的 ， 連貫的 ， 簡單的 在其他設計規範的設計原則中可以看到類似描述，但 基於角色的 ， 適應性的 則是 Fiori 最突出的，也是目前來看設計規範裡做得最好的。

以前 SAP 的軟體是基於業務的，然後在這個業務中會有很多操作角色，面對的是同樣的軟體和介面內容。而現在 SAP 強調體驗為先，將以前的業務模組拆分為簡單、單一的任務模組，更加個性、簡單和高效，個性指依據不同工作角色展現不同任務模組，而非以前的所有人都看一樣的業務模組，業務模組（產品經理角度）變成任務模組（使用者角色角度）。在介面中最能體現基於角色這一設計原則的即是它的 Launchpad ,如下圖。

<img src="https://pic4.zhimg.com/50/v2-11475a1444c2d479138bc482e32b41b2_hd.jpg" data-rawwidth="1373" data-rawheight="418" class="origin_image zh-lightbox-thumb" width="1373" data-original="https://pic4.zhimg.com/v2-11475a1444c2d479138bc482e32b41b2_r.jpg"/>

此原則從對當今員工隊伍多方面角色的廣泛見解中提取出來。 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 原則。

<img src="https://pic1.zhimg.com/50/v2-3f57cc261b9cc9560ff3477dcc6b8b80_hd.jpg" data-rawwidth="1200" data-rawheight="991" class="origin_image zh-lightbox-thumb" width="1200" data-original="https://pic1.zhimg.com/v2-3f57cc261b9cc9560ff3477dcc6b8b80_r.jpg"/>

總結評價

寫著寫著總覺得跑題了，題目是如何評價 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 瀏覽起來沒有其他設計規範的網站清晰、易理解，相對而言學習成本較高。

以上是拖了很久才寫好的答案，很多內容簡單提了一些重點，沒有詳述。很多點覺得自己本身瞭解得不夠，不敢貿然下結論，寫得比較淺顯。回答之後也會不斷完善，歡迎指正。

最後，Fiori 是學習設計規範很好的一本教材，當然還有很多其他優秀的企業級應用的設計規範，比如 AntD, 可以說是目前國內做得最好的設計規範，完全開源免費。 Salesforce Lightning Design System 比較美觀，在 CRM 領域實踐性很強。其他優秀規範歡迎補充，共同學習。