SAP UI的載入動畫效果和幽靈設計(Ghost Design)
這是Jerry 2021年的第 14 篇文章,也是汪子熙公眾號總共第 285 篇原創文章。
在本篇文章之前,Jerry 印象最深的幽靈,應該要算《星際爭霸I》里人族能夠隱形的空中單位 Wraith( 幽靈戰機 ),以及能施放核彈的 Ghost( 幽靈特工).
上週 Jerry 做 SAP Spartacus 開發時,接觸到一個新的和幽靈相關的術語:
Skeleton Design(Ghost Design)
讀了幫助文件後,發現該名詞對我來說只不過是舊瓶裝新酒罷了。
本文目錄
- SAP UI5 Busy Dialog
- 使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的載入體驗
- SAP Spartacus Spinner 控制元件
- SAP Spartacus 幽靈設計
我對應用軟體的 User Experience 即使用者體驗領域知之甚少。在 SAP 內部,有專門的使用者體驗設計師負責這個領域,因此我也不清楚 Skeleton / Ghost Design 準確的中文翻譯是啥,姑且就直譯成“幽靈設計”吧。
在我看來,無論是幽靈設計,還是之前 SAP UI5 提供的頁面載入動畫效果,都是改善使用者使用體驗的一種手段:提示使用者當前頁面正在載入後臺資料,或是執行一些比較費時的操作。
SAP UI5 Busy Dialog
Jerry 從2014年開始使用 SAP UI5 進行 Fiori 開發,經歷了 Fiori 1.0 到 2.0 的版本迭代。還記得處理的第一個 CRM Fiori 應用 My Opportunities 的 bug,症狀就是修改了 Opportunity 資料之後,使用者可以短時間內快速點選下圖的 Save 按鈕,從而產生多個到 CRM 後臺的 OData 儲存請求。
當時我的修復該問題的策略就是,在 Save 按鈕點選之後,設定一個 Busy Dialog,讓其鎖住整個頁面。這樣,使用者沒有機會再點選 UI 進行任何操作了。直至 OData 請求在後臺成功完成,或者收到錯誤提示,再關閉該 Busy Dialog,頁面就能重新恢復可點選狀態。
在 Fiori 1.0 時代,Busy Dialog 的外觀是一個由5朵花瓣組成的花朵,具有不斷旋轉的動畫效果。
可以通過這個視訊檢視執行時效果:
Jerry 曾經寫過一篇 SAP 社群部落格: Fiori Busy Dialog – when is it opened and closed
該文章介紹了 SAP UI5 Busy Dialog 在 Fiori 應用中的使用場景。
一個典型的例子是,使用者點選 Fiori Launchpad tile,跳轉到某個具體的 Fiori 應用時,瀏覽器位址列裡的 url 發生變化, sap.ui.controller.doHashChange 會呼叫 BusyDialog.open 方法,繪製一個花瓣的動畫效果:
如 Jerry 之前的文章 深入學習SAP UI5框架程式碼系列之二:UI5 控制元件的渲染器 所述,這個花瓣效果的實現 位於其渲染器 LoadingDialogRenderer 的方法 renderFioriFlower 內:
5片花瓣的視覺效果,通過5個 div 元素實現:
而花瓣旋轉的動畫效果,通過 div 元素 css 類的 animation 系列屬性實現:
到了 Fiori 3.0 ,Jerry 發現 Busy Dialog 的外觀,已經變成了三個大小不斷變化的圓圈。
使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的載入體驗
我在 2015 年擔任 一個德國 Fiori 客戶上線的 Dev Angel 時,該客戶有一個自開發需求:其產品主資料的配圖動輒超過 10 MB,客戶希望瀏覽器在成功載入這些尺寸巨大的圖片之前,顯示一些載入動畫效果。待到圖片完全載入結束時,再關閉載入動畫,顯示實際圖片。
先看沒有經過任何優化處理的情況下,如何在 SAP UI5 裡使用 Image 控制元件顯示一個 url 指向的圖片:第10行呼叫 SAP UI5 控制元件 Image 例項的 setSrc 方法,載入 BIG_IMAGE 變數指向的圖片。
再看我給客戶推薦的基於圖片代理的解決方案。
這是執行時的效果:
這個方案實現原始碼如下:
上圖程式碼按照執行時執行的先後順序,有4個關鍵點,分別用序號1~4表示:
- 第10行程式碼,建立一個新的 Image 例項,充當圖片代理的角色。
- 第15行程式碼,UI5 應用裡原始的 Image 例項,呼叫 setSrc 方法,傳入的不是實際的大圖片地址,而是一個儲存在本地的,表示圖片正在載入的 gif 檔案( 客戶自己準備,一個該企業 Logo 旋轉的動畫效果). 這樣,使用者開啟頁面時,首先映入眼簾的,是該本地 gif 檔案 loading.gif 實現的不斷旋轉的動畫效果。
- 第16行程式碼,將待載入大尺寸圖片的 url 通過輸入引數,傳遞給代理 Image 控制元件的 setSrc 方法。這會觸發瀏覽器發起對大尺寸圖片的載入。
- 第13行程式碼,當代理 Image 控制元件觸發的大尺寸圖片載入完成後,觸發其 load 回撥函式。該回撥函式觸發,說明大尺寸圖片的資料已經完全載入到本地,此時在回撥函式裡,將大尺寸圖片的 url 設定給原始 Image 控制元件的 src 屬性,即可將該圖片顯示出來。
SAP Spartacus Spinner 控制元件
Spartacus 裡的 Spinner 控制元件作用類似 SAP UI5 Busy Dialog,下面是一個例子:當第九行程式碼的元件屬性 supportedDeliveryModes$.length 可用時,說明當前訂單支援的商品遞貨模式的相關配置資訊,已經從後臺取到前臺了,此時顯示遞貨模式的選擇頁面;否則,則顯示 ID 為 loading 標識的模板頁面,裡面只包含一個 Spinner 控制元件:
這個 Spinner 控制元件的外觀及實現細節,請參考 Jerry 的 視訊。
最後來說說 SAP Spartacus 的幽靈設計。
Spartacus B2B 功能模組裡,正常的 Cost Centers 列表顯示如下:
在這些 Cost Center 的資料從後臺取回來之前,頁面顯示如下,這種設計在 SAP Spartacus的幫助文件裡,被稱為 Skeleton 或者 Ghost Design:
這些在真實資料尚未從後臺載入完畢之前,以“佔位符”的方式顯示在前臺的灰色矩形條,繫結在 Angular Component 裡的資料,就稱為幽靈資料( Ghost Data ).
從Spartacus list.service.ts 的實現原始碼能看出,幽靈資料就是一個 length 屬性值為10的空陣列。
在 Chrome 開發者工具裡,能觀察到這些幽靈資料具有對應的 CSS class,這使得它們具有灰色矩形的視覺外觀:
Cost Center 表格顯示的資料最終通過 list.service.ts 從 SAP Commerce Cloud 後臺取出,取數邏輯通過 Angular 響應式程式設計庫 RxJS的 pipe 方法驅動:第101行 switchMap 操作符裡的箭頭函式,輸入引數 pagination 包含了去 Commerce Cloud 取資料使用的分頁設定,函式體 this.load 傳送 HTTP 請求,消費 Commerce Cloud 的 OCC API. 而第102行的 startWith操作符,語義上相當於給 pipe 驅動的 Observable 流賦上一個初始值,該初始值即為 length 屬性為10的空陣列。
這樣,從執行時序來說,任何消費 getData 函式返回的 Observable 物件的 Angular UI 元件,都會先顯示 startWith 設定的初始值,即幽靈資料。待從 Commerce Cloud 後臺載入的真實資料返回給瀏覽器之後,元件自動重新整理並顯示這些真實的業務資料。
本文介紹了 Jerry 工作過的 SAP 產品裡,當使用者操作 UI 觸發了某些後臺資料載入時,為了提升使用者體驗而引入的一些頁面效果的技術實現,希望對大家有所幫助,感謝閱讀。
更多閱讀
-
SAP UI和Salesforce UI開發漫談
-
SAP UI 搜尋分頁技術
-
Jerry在2020 SAP全球技術大會的分享:SAP Spartacus技術介紹的文字版
-
SAP UI5應用開發人員瞭解UI5框架程式碼的意義
-
SAP UI5 module懶載入機制
-
SAP UI5 控制元件渲染機制
-
HTML原生事件 VS SAP UI5 Semantic事件
-
SAP UI5控制元件後設資料的後設資料實現
-
SAP UI5控制元件的例項資料修改和讀取邏輯
-
SAP UI5控制元件資料繫結的實現原理
-
SAP UI5控制元件資料繫結的三種模式:One Way, Two Way和OneTime實現原理比較
- SAP UI5控制元件ID的生成邏輯
- SAP UI5控制元件的多語言(國際化,Internationalization,i18n)支援的實現原理
- XML檢視裡的button控制元件
- button控制元件和它背後的DOM元素
-
SAP UI5 OData謠言粉碎機:極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎
-
漫談SAP產品裡頁面上的Checkbox設計與實現系列之一
-
SAP UI渲染模式:客戶端渲染 VS 伺服器端渲染
更多Jerry的原創文章,盡在:"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2758151/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS3 loadding載入動畫效果CSSS3動畫
- CSS3載入等待動畫效果CSSS3動畫
- SAP UI5 應用開發教程之七十二 - SAP UI5 頁面路由的動畫效果設定試讀版UI路由動畫
- SAP UI5 sap-ui-core.js的載入邏輯UIJS
- 如何實現SAP UI5 Web Component React控制元件的載入效果UIWebReact控制元件
- SAP 電商雲 Spartacus UI 支援延遲載入的新功能的入口設計UI
- UI設計師福利之CSS3實現的任意圖片lowpoly動畫效果UICSSS3動畫
- SAP CRM WebClient UI和Hybris Commerce的懶載入機制WebclientUI
- UI 設計師 SVG 動畫進階篇——蒙版動畫(下)UISVG動畫
- Python 精靈模組_幀動畫_純畫筆下雪效果.pyPython動畫
- SAP UI5 Form 和 Simple Form 的設計規範UIORM
- Design News 設計創新:SAP PLM專訪
- app直播原始碼,等待時的載入動畫(交錯載入動畫)APP原始碼動畫
- SAP Spartacus 的延遲載入 Lazy load 設計原理
- Java 給PPT新增動畫效果(預設動畫/自定義動畫)Java動畫
- 好看的Dialog載入動畫動畫
- UI設計比較流行的插畫型別和運用UI型別
- SAP Commerce Cloud (電商雲) UI 的懶載入功能CloudUI
- Material Design之-互動效果炸裂的 FloatingActionMenuMaterial Design
- 育碧的幽靈行動:轉型主流的不適感
- 麻省理工學院研究人員設計出針對幽靈黨和熔燬的DAWG方法
- SAP UI5 應用 index.html 裡定義的 data-sap-ui-theme 值的載入原理UIIndexHTML
- 【附案例】UI互動設計不會做?設計大神帶你開啟動效靈感之路UI
- 育碧Ubisoft新作《幽靈行動:斷點》首度亮相斷點
- 幽靈選單介紹;
- SAP UI5 Library Resource Bundle 的設計原理UI
- SAP Commerce Cloud Spartacus UI 的高階 reducer 設計CloudUI
- SAP Fiori和WebClient UI的有狀態和無狀態行為設計原理WebclientUI
- SAP UI5 Theme Library 的解析邏輯和 SAP UI5 配置後設資料的預設值UI
- jQuery 效果 – 動畫jQuery動畫
- SAP UI5載入時的library-preload.json檔案UIJSON
- Material Design配色難?11條設計資源給你靈感!Material Design
- 011 Rust死靈書之幽靈資料Rust
- 幽靈詭計:遊戲敘事的意義、方法與技巧遊戲
- SAP UI5 應用如何載入自定義 ThemeUI
- WPF loading載入動畫庫動畫
- 使用Lottie做載入動畫動畫
- 如何實現 SAP UI5 的 Lazy Loading(延遲載入,懶載入)試讀版UI