如何分析SAP Fiori Design Guidelines

本篇文章給大家分享的是有關(guān)如何分析SAP Fiori Design Guidelines，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

前言

在 SAP 實(shí)習(xí)之前我是不知道 Fiori 的，正如在螞蟻實(shí)習(xí)之前我是不知道 Ant Design 的，一是我孤陋寡聞，二是這些都是企業(yè)級(jí)的設(shè)計(jì)規(guī)范，不是工作需要應(yīng)該用不到。遺憾的是在 SAP 實(shí)習(xí)期間我沒(méi)有用到 Fiori 的設(shè)計(jì)體系，所以因?yàn)楣ぷ餍枰芯克臅r(shí)候只能自己看網(wǎng)上材料和“道聽(tīng)途說(shuō)”。

做設(shè)計(jì)規(guī)范很難，大而全很難，小而精也難。在我看來(lái)，F(xiàn)iori 就是大而全的設(shè)計(jì)規(guī)范，Material Design System 是小而精的設(shè)計(jì)規(guī)范，兩者都非常值得學(xué)習(xí)借鑒。但如果是想要深入學(xué)習(xí)（而不僅是了解）設(shè)計(jì)規(guī)范，F(xiàn)iori 是一個(gè)很好的教材，他的官網(wǎng)是我目前看到的設(shè)計(jì)規(guī)范類(lèi)網(wǎng)站寫(xiě)得最全、最詳細(xì)的，不禁感嘆德國(guó)人做事的認(rèn)真程度。

Fiori 開(kāi)發(fā)原因

首先不難理解 SAP 為什么要開(kāi)發(fā)一套 Fiori 體系，雖然企業(yè)級(jí)軟件對(duì)界面美觀(guān)程度要求沒(méi)那么高，但隨著時(shí)代的演變，客戶(hù)對(duì)于交互界面的要求越來(lái)越高，用戶(hù)談起SAP的界面，第一感覺(jué)就是丑，所以SAP開(kāi)始謀求轉(zhuǎn)變，痛苦轉(zhuǎn)型，投入大量人力物力開(kāi)發(fā)出 SAPUI5 這一前端技術(shù)框架，并基于這個(gè)框架開(kāi)發(fā)了一整套新的用戶(hù)交互系統(tǒng)，即 SAP Fiori。

SAP UI 系統(tǒng)演變

對(duì)比 SAP UI 系統(tǒng)的演變，可以看出，雖然現(xiàn)在的 Fiori 2.0 不至于多么美觀(guān)驚艷好用，但相比于之前的 GUI 版本，已經(jīng)是質(zhì)的突破。

1992 年, SAP GUI, SAP 最早的 UI 系統(tǒng)。

SAP就很有先見(jiàn)的推出了SAP GUI，這個(gè)其實(shí)就是最早的BS框架，不過(guò)這個(gè)B是SAP自己的客戶(hù)端而不是標(biāo)準(zhǔn)瀏覽器，但是遵循的就是三層框架。這個(gè)工具開(kāi)發(fā)迅速，運(yùn)行迅速，但是頁(yè)面呆板，SAP頁(yè)面開(kāi)發(fā)都需要遵循特定的模式，但是這也是由于SAP針對(duì)的特定企業(yè)客戶(hù)決定的，因?yàn)橐粋€(gè)企業(yè)的應(yīng)用程序數(shù)量往往比一個(gè)互聯(lián)網(wǎng)網(wǎng)站多，為了方便統(tǒng)一的風(fēng)格，而且便于客戶(hù)的迅速學(xué)習(xí)，而且也便于迅速的開(kāi)發(fā)，這樣的設(shè)計(jì)是合理的。模式的概念一直在SAP延續(xù)，所有的程序要求模板化，樣式一直也能快速開(kāi)發(fā)。

Web 2.0 時(shí)代，SAP Web Dynpro，基本上延續(xù)了前一版本的風(fēng)格。

2013 年，SAP Fiori 1.0，基于 SAPUI5 技術(shù)框架開(kāi)發(fā)的新的用戶(hù)交互系統(tǒng)

2016 年 10 月，SAP Fiori 2.0，此版本用戶(hù)體驗(yàn)設(shè)計(jì)概念在紅點(diǎn)獎(jiǎng)交互類(lèi)設(shè)計(jì)競(jìng)賽中獲得 2015 紅點(diǎn)設(shè)計(jì)概念大獎(jiǎng)。概念視頻鏈接

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.”  抓住幾個(gè)關(guān)鍵詞，modern design principles 就是符合當(dāng)前的前端設(shè)計(jì)潮流，比如簡(jiǎn)潔化、平面化，  personalized 就是更個(gè)性化，更以用戶(hù)為中心，每個(gè)用戶(hù)的界面都是不一樣的，  responsive 可以自適應(yīng)不同的終端，  simple user experience 也是最終目的，讓用戶(hù)使用起來(lái)最簡(jiǎn)單，一目了然。引用自：SAP  Fiori

下面詳細(xì)分析一下 Fiori 是如何踐行定義，做到符合 modern design principles ，personalized 和 responsive 。

Fiori 網(wǎng)站框架

下圖是 Fiori 的網(wǎng)站框架，題目中的 Fiori Design Guidelines 指的是下圖右半部分內(nèi)容，我覺(jué)得右邊內(nèi)容是著重給設(shè)計(jì)工作者（包括設(shè)計(jì)師，產(chǎn)品經(jīng)理等）查看的，而左邊內(nèi)容主要給開(kāi)發(fā)人員查看。

其實(shí)開(kāi)始看 Fiori  Design Guidelines 的網(wǎng)站，會(huì)有種暈頭轉(zhuǎn)向的感覺(jué)，打開(kāi)了一個(gè)又一個(gè)鏈接，跳來(lái)跳去，但了解了網(wǎng)站的邏輯架構(gòu)之后，會(huì)清晰很多。

Guidelines 網(wǎng)站主要干貨是 Foundation, General Concepts, Layouts, UI Elements 這幾大模塊。Foundation 模塊主要闡述 Fiori 的定義，設(shè)計(jì)理念，設(shè)計(jì)方法， 響應(yīng)性與適應(yīng)性等最基礎(chǔ)，也是最重要的概念。General Concepts 是講 Fiori 系統(tǒng)比較典型和通用的設(shè)計(jì)概念，比如它最有特色的 Launchpad, 以及界面內(nèi)界面之間的增刪改查的流程。Layouts, Floorplans and Frameworks 是講單個(gè)界面的布局，平面圖和框架。UI Elements 則是細(xì)化講每個(gè)組件。

前面提到的看這個(gè)網(wǎng)站暈頭轉(zhuǎn)向是因?yàn)樗乃械膬?nèi)容都是串在一起，比如在解釋一個(gè)組件時(shí)，如果涉及原則或其他組件內(nèi)容，它都會(huì)給一個(gè)超鏈接讓你可以跳轉(zhuǎn)過(guò)去查看詳細(xì)，所以往往一個(gè)頁(yè)面，會(huì)有很多超鏈接跳轉(zhuǎn)到設(shè)計(jì)原則、基本概念、各種組件，以及一些開(kāi)發(fā)代碼頁(yè)面。

Foundation 模塊

先解讀 Foundation 模塊。其中有兩個(gè)內(nèi)容最有特點(diǎn)，Design Principles 和 Responsive vs. Adaptive。

Fiori 的 Design Principles 有五點(diǎn)，如下圖。

令人愉悅的，連貫的，簡(jiǎn)單的 在其他設(shè)計(jì)規(guī)范的設(shè)計(jì)原則中可以看到類(lèi)似描述，但 基于角色的， 適應(yīng)性的 則是 Fiori 最突出的，也是目前來(lái)看設(shè)計(jì)規(guī)范里做得最好的。

以前 SAP 的軟件是基于業(yè)務(wù)的，然后在這個(gè)業(yè)務(wù)中會(huì)有很多操作角色，面對(duì)的是同樣的軟件和界面內(nèi)容。而現(xiàn)在 SAP 強(qiáng)調(diào)體驗(yàn)為先，將以前的業(yè)務(wù)模塊拆分為簡(jiǎn)單、單一的任務(wù)模塊，更加個(gè)性、簡(jiǎn)單和高效，個(gè)性指依據(jù)不同工作角色展現(xiàn)不同任務(wù)模塊，而非以前的所有人都看一樣的業(yè)務(wù)模塊，業(yè)務(wù)模塊（產(chǎn)品經(jīng)理角度）變成任務(wù)模塊（用戶(hù)角色角度）。在界面中最能體現(xiàn)基于角色這一設(shè)計(jì)原則的即是它的 Launchpad ,如下圖。

此原則從對(duì)當(dāng)今員工隊(duì)伍多方面角色的廣泛見(jiàn)解中提取出來(lái)。 SAP Fiori 在正確的時(shí)間提供正確的信息，反映實(shí)際工作的方式。

在Fiori 2.0的Launchpad中，左右兩邊各增加了一個(gè)新的區(qū)域，相當(dāng)于擴(kuò)展了整個(gè)桌面的使用范圍，這種設(shè)計(jì)概念，被稱(chēng)為“Viewport Concept”。
在屏幕右側(cè)是“Notification Area”，感覺(jué)有點(diǎn)iOS里面的通知中心的意思。消息或者是Workflow的提醒會(huì)體現(xiàn)在這里。它的作用是時(shí)刻幫我提醒老板：我的報(bào)銷(xiāo)你還不趕緊批，等著生崽么？
左側(cè)叫“Me Area”，放置一些最近使用過(guò)的Apps，或者是一些自定義的用戶(hù)菜單，用于搜索的App Finder也在這里。
中間的一大塊被稱(chēng)為工作區(qū)，是用戶(hù)處理日常業(yè)務(wù)的地方。
這樣的設(shè)計(jì)模式，可以讓用戶(hù)既聚焦于核心工作任務(wù)，又不會(huì)錯(cuò)失其他方面的動(dòng)態(tài)。照顧得面面俱到的感覺(jué)啊。引用自 三分鐘了解Fiori背后的設(shè)計(jì)理念

Adaptive 適應(yīng)性原則是指適應(yīng)多種使用場(chǎng)景和設(shè)備，結(jié)合 Responsive vs. Adaptive 來(lái)分析。Fiori 提出了 Responsive Design 響應(yīng)性設(shè)計(jì) 和 Adaptive Design 適應(yīng)性設(shè)計(jì)。響應(yīng)性很好理解，即頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)可根據(jù)用戶(hù)行為與設(shè)備環(huán)境(包括系統(tǒng)平臺(tái)，屏幕尺寸，屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)及調(diào)整。而適應(yīng)性則是當(dāng)響應(yīng)式設(shè)計(jì)不能滿(mǎn)足某些特殊使用場(chǎng)景時(shí)，需要針對(duì)不同設(shè)備進(jìn)行設(shè)計(jì)，并根據(jù)具體設(shè)備調(diào)整設(shè)計(jì)的復(fù)雜性。具體可以結(jié)合官網(wǎng)案例進(jìn)行理解。簡(jiǎn)單理解響應(yīng)性是設(shè)置節(jié)點(diǎn)，對(duì)內(nèi)容進(jìn)行隱藏或變形。而適應(yīng)性是直接調(diào)整設(shè)計(jì)復(fù)雜性，可以依據(jù)情況刪除某些內(nèi)容。

General Concepts 和 Layouts, Floorplans and Frameworks 模塊

General Concepts 和 Layouts, Floorplans and Frameworks 模塊里詳細(xì)講解了 Fiori 比較典型和通用的設(shè)計(jì)概念和布局。仔細(xì)研究會(huì)發(fā)現(xiàn) Fiori 的設(shè)計(jì)規(guī)范真的事無(wú)巨細(xì)、面面俱到，很多概念，比如 Action Placement, 講的是全局操作和本地操作，這些其實(shí)在設(shè)計(jì)頁(yè)面時(shí)，大家都有這種意識(shí)，但是沒(méi)有看到其他的設(shè)計(jì)規(guī)范將其總結(jié)成規(guī)范（可能我了解的不夠，如果有，請(qǐng)告知）。

UI Elements 模塊

我也總結(jié)了一下 Fiori 是如何講解一個(gè)組件的。一般設(shè)計(jì)規(guī)范展示組件時(shí)都會(huì)涉及到以下維度，但毫無(wú)疑問(wèn) Fiori 是其中最詳細(xì)的。特別是 Guidelines 部分，分析了業(yè)務(wù)中可能會(huì)遇到的所有情況，最神奇的是，如果你的業(yè)務(wù)場(chǎng)景不適合這個(gè)組件，它還會(huì)幫你分析哪種組件適合你的需求，然后附上鏈接。然后絕大部分組件都會(huì)列舉在不同設(shè)備端的呈現(xiàn)方式，真的是踏踏實(shí)實(shí)踐行了 Adaptive 原則。

總結(jié)評(píng)價(jià)

寫(xiě)著寫(xiě)著總覺(jué)得跑題了，題目是如何評(píng)價(jià) Fiori, 而我以上寫(xiě)的都是如何解讀 Fiori。不過(guò)相信大家都有顆好學(xué)的心，多看點(diǎn)沒(méi)壞處，哈哈哈。下面真的要來(lái)點(diǎn)題了。

1. Fiori 是 SAP 從自己龐大的業(yè)務(wù)模塊中抽取、沉淀出來(lái)的設(shè)計(jì)規(guī)范，成功服務(wù)于 SAP 復(fù)雜且龐大的 ERP 系統(tǒng)。它的實(shí)踐和商業(yè)應(yīng)用能力毋庸置疑。

2. SAP 從最初的 GUI 體系轉(zhuǎn)換為現(xiàn)在的 Fiori 體系，目前 SAP 所有的新產(chǎn)品以及舊產(chǎn)品迭代都在運(yùn)用 Fiori 體系，可以說(shuō)是一次徹底的大換血，F(xiàn)iori 對(duì) SAP 的重大意義不言而喻。

3. Fiori 不是單純的設(shè)計(jì)規(guī)范羅列，而是一個(gè)龐大的設(shè)計(jì)體系網(wǎng)絡(luò)。它的 Design Principles, Concepts, Layouts, UI Elements 等內(nèi)容之間絲絲相扣，緊密關(guān)聯(lián)，敬佩 Fiori 設(shè)計(jì)師的巨大投入。

4. Fiori 提出了很多自己特色的理念和設(shè)計(jì)概念，比如基于用戶(hù)的原則，Design-Led Development Process, Launchpad, Multi-Device Support: Responsive vs. Adaptive，Mobile First 等，這些可以說(shuō)都是 SAP 從自己業(yè)務(wù)模塊中抽取、沉淀出來(lái)的精華。打個(gè)岔，在研究 Fiori 之后，我才知道 Fiori 提出的 Design-Led Development Process（ DDP ） 就是 DesignThinking 的具體衍化。DesignThinking 是 Hasso Plattner （斯坦福 Stanford d.school 創(chuàng)始人之一）與 IDEO 共同研究出的一套設(shè)計(jì)方法，而 Hasso Plattner 又是 SAP 的設(shè)計(jì)方法布道人，所以 SAP 其實(shí)是最先推廣運(yùn)用 DesignThinking 的公司之一。DDP 設(shè)計(jì)方法詳述

5. 因?yàn)槌尸F(xiàn)的內(nèi)容特別多，而且網(wǎng)站框架就是按照它本身的規(guī)范來(lái)搭建的，所以 Fiori 瀏覽起來(lái)沒(méi)有其他設(shè)計(jì)規(guī)范的網(wǎng)站清晰、易理解，相對(duì)而言學(xué)習(xí)成本較高。

以上就是如何分析SAP Fiori Design Guidelines，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。