▼【迪森微課堂】第三十期之SAP Fiori3.0新時(shí)代于2019年5月16日晚上22點(diǎn)在SAP業(yè)界人士的熱烈贊賞聲中完美落幕，大家反響熱烈，受益匪淺。

 

▼為了便于進(jìn)一步學(xué)習(xí)和分享，我們對(duì)本期內(nèi)容進(jìn)行了整理和總結(jié)，形成干貨奉獻(xiàn)給大家，希望大家都能不斷充電提高，在我們熱愛(ài)的SAP事業(yè)道路上持續(xù)加速前進(jìn)。

 

本期嘉賓簡(jiǎn)介：

 

1  SAP UX的方向：數(shù)字化轉(zhuǎn)型

 

 

Fiori作為SAP提升用戶體驗(yàn)的革新化產(chǎn)品，自2013年發(fā)布以來(lái)發(fā)展不斷。這次我們就以Fiori 3.0為主來(lái)看一下Fiori近期的一些創(chuàng)新。

 

2  SAP Fiori版本更迭

 

 

回望過(guò)去，F(xiàn)iori自2013年發(fā)布，只針對(duì)移動(dòng)場(chǎng)景發(fā)布了一些self-service的應(yīng)用，之后從財(cái)務(wù)模塊開(kāi)始擴(kuò)展到專業(yè)應(yīng)用場(chǎng)景，需要應(yīng)對(duì)的業(yè)務(wù)流程在不斷復(fù)雜化，但是Fiori仍舊遵循最重要的基本原則，例如只為用戶提供最重要的信息，保持多設(shè)備兼容等。從Fiori 2.0開(kāi)始，技術(shù)上提出了Fiori Elements用來(lái)提供模板進(jìn)行快速Fiori項(xiàng)目實(shí)施，并擴(kuò)展到移動(dòng)端原生框架，并推出會(huì)話型UI，即CoPilot。

 

Fiori作為一種設(shè)計(jì)語(yǔ)言，擴(kuò)展應(yīng)用到S/4 HANA以外的其他應(yīng)用當(dāng)中，但是由于各個(gè)應(yīng)用的接納發(fā)展程度不同，造成了不同產(chǎn)品UX仍存在的極大差異性。

 

3  SAP Fiori 3.0

 

 

Fiori 3.0在設(shè)計(jì)決策初期引入產(chǎn)品Team共同決策，目的之一就實(shí)現(xiàn)SAP全解決方案無(wú)縫統(tǒng)一的設(shè)計(jì)體驗(yàn)。理想化的目標(biāo)是用戶在使用系統(tǒng)的時(shí)候，例如從S/4HANA中跳轉(zhuǎn)到Concur中，感受不到產(chǎn)品的切換，統(tǒng)一的用戶體驗(yàn)。

 

Fiori 3.0的定位是，主旨CoPilot作為新的UX方式；承上啟下的了解當(dāng)前業(yè)務(wù)環(huán)境，能夠幫助用戶推動(dòng)工作流；連接和集成的，和各應(yīng)用系統(tǒng)之間無(wú)縫集成。

 

各產(chǎn)品之間基于設(shè)計(jì)達(dá)成一致決定，包括：部分通用功能，例如統(tǒng)一使用CoPilot，全局化設(shè)定，Shellbar等，統(tǒng)一術(shù)語(yǔ)和功能一致性，統(tǒng)一顏色主題及含義，統(tǒng)一字體庫(kù)（使用SAP 72字體庫(kù)）和常用圖標(biāo)，統(tǒng)一動(dòng)態(tài)切換方式及Branding顯示。

 

Current Shell Designs

通過(guò)Fiori 3.0，要將現(xiàn)階段差異很大的Shell進(jìn)行清理，采用相同的設(shè)計(jì)，通過(guò)不同的技術(shù)實(shí)現(xiàn)。

 

Shell壓縮到單條，包括Logo，產(chǎn)品名稱，次級(jí)描述，CoPilot呼出按鈕，搜索，當(dāng)前應(yīng)用針對(duì)性功能，通知欄按鈕，用戶Profile，產(chǎn)品跳轉(zhuǎn)按鈕。通過(guò)點(diǎn)擊產(chǎn)品跳轉(zhuǎn)按鈕可以看到當(dāng)前用戶有權(quán)限的所有產(chǎn)品。

 

 Current Structure

 

頁(yè)面結(jié)構(gòu)也將統(tǒng)一，統(tǒng)一視覺(jué)設(shè)計(jì)及互動(dòng)設(shè)計(jì)。不同的頁(yè)面布局和導(dǎo)航方式，在一定程度上會(huì)保留。對(duì)于不同應(yīng)用，有時(shí)導(dǎo)航欄仍會(huì)保留，例如銷(xiāo)售云在左側(cè)定義了全局可見(jiàn)的導(dǎo)航欄。

 

Current Home Content

 

主頁(yè)內(nèi)容也將統(tǒng)一。將提供一個(gè)可選的Feature Group區(qū)域，通過(guò)機(jī)器學(xué)習(xí)根據(jù)當(dāng)前用戶的基本信息、權(quán)限、最近使用、頻繁使用等信息動(dòng)態(tài)顯示最有可能需要用戶注意的內(nèi)容，以保持主頁(yè)總對(duì)用戶強(qiáng)相關(guān)。

 

4  未來(lái)Fiori Launchpad的愿景

 

 

當(dāng)前在各產(chǎn)品間統(tǒng)一的設(shè)計(jì)將逐步推行實(shí)施。未來(lái)的Fiori Launchpad愿景希望提供一個(gè)Central Fiori Launchpad，打開(kāi)產(chǎn)品間界限，即在主頁(yè)中直接顯示某一個(gè)應(yīng)用系統(tǒng)內(nèi)部的細(xì)節(jié)信息，并且支持直接跳轉(zhuǎn)，從而真正實(shí)現(xiàn)跨產(chǎn)品的整合的用戶體驗(yàn)。

 

5  SAP Fiori Elements：Analytical List Page

 

 

Fiori Element中的Analytical List Page主要用于分析，針對(duì)處理日常操作的業(yè)務(wù)人員而非專業(yè)分析人員，體現(xiàn)了Fiori強(qiáng)調(diào)的embedded analysis。

 

最上側(cè)區(qū)域?yàn)榭焖亠@示的分析圖表， 兼具快速篩選功能。主數(shù)據(jù)顯示部分可以切換顯示分析圖表及傳統(tǒng)表單，也具有篩選功能。

 

6  SAP Fiori Elements：Flexible Column Layout

 

 

Fiori Element中的Flexible Column Layout，用于替換之前的Master-Detail Page。顯示方式為是Master-Detail-Detail，三級(jí)顯示。其中每一列，指的就是一個(gè)層級(jí)的信息。針對(duì)不同設(shè)備顯示方式不同，可以通過(guò)按鈕切換調(diào)整每一列的大小，或全屏及退出全屏等，以擴(kuò)大當(dāng)前最主要進(jìn)行操作的級(jí)別。

 

7  SAPUI5與Fiori 3.0

 

 

SAPUI5 1.65版本在SAP云平臺(tái)發(fā)布，F(xiàn)iori 3.0的新主題Quartz可以使用。兼容2.0主題，開(kāi)發(fā)者通過(guò)Fiori Elements或者SAPUI5或者Open UI5進(jìn)行的應(yīng)用開(kāi)發(fā)，在Quartz主題下都可以正常使用，不需調(diào)整。但如果是自開(kāi)發(fā)的Control，或者是自定義的CSS（這些都是SAP不推薦的），那么就需要檢查在新主題下是否顯示效果是否還正常。尤其需要檢查手機(jī)端的顯示效果，因?yàn)樵?.0的主題下，顯示Cozy模式的間距被壓縮。

 

Shellbar控件也已在UI5的SDK中發(fā)布，在1.64版本時(shí)期是Experimental測(cè)試階段，自1.65版本之后已經(jīng)正式可用，在SDK中有Sample可以查看。

 

8  什么是SAP CoPilot？

 

SAP CoPilot為Fiori 3.0下提出的惟一的電子助理，簡(jiǎn)單易用并可以和其他機(jī)器人集成，旨在幫助用戶更容易更快速的完成工作。

 

功能包括，提供會(huì)話式用戶體驗(yàn)，支持自然語(yǔ)言分析，了解業(yè)務(wù)上下文，通過(guò)機(jī)器學(xué)習(xí)進(jìn)行自學(xué)習(xí)，可以跨應(yīng)用跨產(chǎn)品使用，可以擴(kuò)展支持自開(kāi)發(fā)及非SAP產(chǎn)品。

 

Current CoPilot

 

Fiori 3.0中的CoPilot將切換為全屏幕顯示，并用卡片方式提供結(jié)果，將不同數(shù)據(jù)源的信息提供在相同視圖，以提供更豐富信息，并且支持在卡片上進(jìn)行互動(dòng)。目的是一切業(yè)務(wù)都可以通過(guò)CoPilot完成，僅當(dāng)fallback的時(shí)候才跳出CoPilot。

 

9  SAPUI5 Web Components

 

 

UI5 Web Components是在SAPUI5 1.63版本更新的時(shí)候提出的一套遵循Web Components標(biāo)準(zhǔn)的輕量級(jí)可重用的UI元素，可幫助開(kāi)發(fā)者使用SAPUI5以外的其他前端框架（如Angular，React，Vue）來(lái)開(kāi)發(fā)滿足Fiori 3.0設(shè)計(jì)原則的應(yīng)用。UI5 Web Component不是建在UI5之上的，更不是UI5的替代品，而被定位為UI5的補(bǔ)充。尤其適合當(dāng)前已經(jīng)有一套前臺(tái)網(wǎng)頁(yè)系統(tǒng)的企業(yè)應(yīng)用，如果使用UI5重開(kāi)發(fā)成本過(guò)高，可以使用UI5 Web Component在原有框架下進(jìn)行替換。

 

10  SAP Fiori Fundamentals

 

SAP Fiori Fundamentals是一個(gè)輕量級(jí)的展現(xiàn)層實(shí)現(xiàn)，作為實(shí)現(xiàn)Fiori前臺(tái)用戶體驗(yàn)和底層UI實(shí)現(xiàn)框架的解耦合的關(guān)鍵。從技術(shù)層面上說(shuō)，SAP Fiori Fundamentals不是一種新的UI技術(shù)或者框架，而是一系列stylesheets和HTML標(biāo)簽的集合，從而讓UI開(kāi)發(fā)人員可以使用其喜歡的UI框架，例如Angular，React，Vue等進(jìn)行開(kāi)發(fā)，同時(shí)自動(dòng)保證開(kāi)發(fā)出的應(yīng)用仍具有Fiori的風(fēng)格和用戶體驗(yàn)。

 

通過(guò)這種解釋允許SAP開(kāi)發(fā)人員根據(jù)實(shí)際項(xiàng)目需要，靈活選擇最佳UI框架來(lái)開(kāi)發(fā)Fiori應(yīng)用。定位上，SAP Fiori Fundamentals不是一個(gè)新的UI技術(shù)，不是用來(lái)替代UI5的。

 

UI5 Web Component和SAP Fiori Fundamentals就將作為實(shí)現(xiàn)SAP全線產(chǎn)品One UX的兩種重要的技術(shù)手段。

 

11  SAP Fiori學(xué)習(xí)路徑

 

 

 

聲明：本文為原創(chuàng)文章，版權(quán)歸作者所有；迪森公眾平臺(tái)歡迎原創(chuàng)好文踴躍投稿，如需投稿請(qǐng)發(fā)郵件至：public@decision-it.com

 

服務(wù)指南

如需了解更多SAP課程資訊、項(xiàng)目咨詢運(yùn)維，請(qǐng)撥打迪森官方咨詢熱線： 400-600-8756

 

【迪森微課堂】

SAP圈內(nèi)最接地氣的純技術(shù)交流、純干貨分享平臺(tái)，全球SAP顧問(wèn)與業(yè)界頂尖名師的聚集地，是SAP顧問(wèn)進(jìn)階的官方橋梁。

 

【如何加入迪森微課堂】

請(qǐng)即刻關(guān)注迪森官方微信公眾平臺(tái)，第一時(shí)間獲得迪森最新動(dòng)態(tài)，秒搶寶貴席位！