SAP Fiori Design Guidelines基礎篇(一)

SAP Fiori簡介

SAP Fiori爲SAP軟件提供了一致且全面的用戶體驗。 通過強調易用性、創建視覺上令人愉悅的設計,所有設備的體驗都是簡單且直觀的。 藉助輕鬆的交互模式,SAP Fiori UX旨在爲各企業用戶提供更好的服務。

設計理念

SAP Fiori的核心設計理念是:

Provides role-based simplification of business processes(提供基於角色的業務流程方面的簡化)

Shifts from monolithic solutions to activity-based apps(從單一解決方案轉變爲基於活動的應用程序)

Empowers users and the way they work(賦能用戶和他們的工作方式)

SAP Fiori的設計哲學基於它的五個核心原則: role-based(基於角色的), adaptive(自適應的), simple(簡單的), coherent(連貫的), and delightful(令人愉悅的)。

發展歷程

SAP Fiori 1.0

SAP Fiori於2013年推出,已經從最初的小範圍使用發展成爲整個SAP的新的用戶體驗。 它已被應用到SAP Business Suite 4 SAP HANA(SAP S / 4HANA),SAP SuccessFactors Employee Central解決方案,Ariba移動解決方案,SAP Cloud for Customer等解決方案中。

基於SAPUI5技術(版本1.26-1.38),SAP Fiori 1.0完成了更廣泛的範式轉變,從關注功能特徵轉向用戶及其體驗。 SAP爲複雜的業務場景帶來了簡便性,因此各團隊可以變的更高效,以全新的方式更好更快的工作。

SAP Fiori 1.0採用現代UX設計原則,可以跨業務線、跨任務和跨設備提供基於角色的消費者級用戶體驗。

SAP Fiori 2.0

SAP Fiori 2.0於2016年10月推出。它代表了SAP S / 4HANA和SAP Business Suite用戶體驗的最新發展成果。

SAP Fiori 2.0基於SAPUI5技術(版本1.40及更高版本),更加註重用戶及其工作方式。它讓用戶更專注於核心任務,同時仍然可以跟蹤其他區域的活動。對現有SAP Fiori啓動面板的升級使用戶獲得更高的靈活性和更全面的指導。這些改進包括優化發現和導航功能,通過視窗進行界面交互,訪問面向操作的個人通知,協作的改進,個人數字助理的使用等。

SAP Fiori 2.0爲用戶提供了:

Increased productivity(提高生產力)

Faster and more direct access to relevant information and applications(更快,更直接地訪問相關信息和應用程序)

Transparency on items needing attention via timely notifications(通過及時通知提高關注項目的透明度)

Assistance to users when it comes to deciding needs to be done next(爲用戶決策提供幫助)

The ability for the user to take quick and informed actions(爲用戶提供採取快速和明智行動的能力)

Increased user satisfaction(提高用戶滿意度)

設計原則

ROLE-BASED(基於角色的)

SAP Fiori基於你的業務、需求及工作方式而設計。它借鑑了我們對當今人力資源的多種角色的廣泛見解。SAP Fiori能在適當的時間提供正確的信息,並反映你真實的工作方式。

DELIGHTFUL(令人愉悅的)

除了讓您更聰明地工作之外,SAP Fiori還可以讓您簡單地完成工作,從而獲得更好的工作體驗。

COHERENT(連貫的)

無論您是填寫銷售訂單,查看最新KPI,還是管理請假申請,SAP Fiori都會遵循一致的交互和視覺設計語言。在整個企業中,您將享受到同樣直觀和一致的體驗。

SIMPLE(簡單的)

藉助SAP Fiori,您可以直觀、快速地完成工作。SAP Fiori幫助您專注於重要的事項,它的基本功能易於使用,您可以專注於您的相關任務和活動獲得個性化體驗,。

ADAPTIVE(自適應的)

無論您使用何種設備,SAP Fiori都能讓您隨時隨地工作。並且,它提供了可即時查看的相關信息。

設計主導的開發過程

SAP致力於設計基於角色的應用程序,以滿足最終用戶在所有業務、任務和設備上的需求。我們相信這是優秀用戶體驗的關鍵。但是,我們如何爲客戶和最終用戶保證可靠而一致的設計? 答案是SAP的“設計主導的開發過程”(Design-Led Development Process)。

設計主導的開發過程利用成熟的設計思維方法來實現最佳的用戶體驗。該流程涵蓋整個開發生命週期,簡單易用,爲整個設計擴展提供了堅實的基礎。它促進了設計人員和開發人員之間的協作,同時確保在整個過程中的每一步都能滿足最終用戶的需求。

各個階段

開發軟件不僅僅是編碼,必須在整個過程中把用戶放在首位。爲了做到這一點,首先要了解最終用戶是誰。這就是設計主導的開發過程從“發現階段”開始的原因。在此階段,你需要專注於瞭解客戶,他們的工作方式以及他們的需求。

只有這樣,您才能進入設計階段,併爲開發設計初始原型。在開發活動(例如實施和測試)之後,您的應用程序也就可以準備部署了。

設計主導的開發過程的重點是前兩個階段 ——發現和設計。 這兩個步驟與開發軟件本身一樣重要。

如下圖:The design-led development process

發現——把控全局

也許您已經很清楚客戶的需求和需求,以及最終用戶的任務和挑戰。但你真正需要的是你的應用程序影響到的各業務角色的整體視圖。

爲此,你必須訪問所在地的客戶並與相關人員交談。把與不同的利益相關者組織起來進行設計思維研討會是一個很好的方法。在發現階段結束時,你應該清楚地瞭解所涉及的所有業務角色,並收集每個角色的典型特徵——也稱爲“personas”。你應該知道他們的典型任務是什麼,以及他們的活動順序是什麼樣的。有了這些信息,你纔可以構思開發有關應用程序如何工作的初步想法,獲得對需求的共同理解,並從最終用戶那裏獲得額外的反饋。

設計——爲了令人愉悅的結果

一旦你對發現活動的初始結果感到滿意,你就可以開始下一階段設計了。你的應用程序應根據構建的用例進行定製,該用例需基於Discover階段的綜合結果。理想情況下,你會有一個多學科團隊可以進行頭腦風暴,創建故事板,併產出可以與最終用戶一起驗證的第一個原型。

完成初始設計後即可開始開發。在開發階段,你可能仍需要更改設計的某些方面,以應對持續的用戶反饋,或優化應用程序,或應對技術限制。

當應用程序完成首次實施和測試後,初始設計可能需要進一步的迭代和調整才能到達最終的設計和實現。

部署——卓越的用戶體驗

在部署應用程序之前,你需要確保最終實現和設計完全同步。如果和設計有偏差需要獲得批准。在此階段,有必要驗證最終實施和設計是否爲最終目標用戶提供了預期的用戶體驗。

SAP提供全新的UX設計服務整合,可指導組織和公司實現以用戶爲中心的設計。

我們使用經過驗證的設計方法(如設計思維和以用戶爲中心的設計)幫助您爲您的企業定義和執行最佳UX策略。

持續優化——應用的生命週期

現在你已經編寫並交付了應用程序,你可能想知道它在現實世界中的表現以及最終用戶是否真的滿意。有多種方法可以獲得用戶反饋,包括訪談、網站訪問和結構化可用性測試。例如,你可能會發現需要支持其他移動設備,甚至增強一些其他功能。

在此過程的任何一步,你都可以應用設計主導開發的方法來規劃新版本,支持其他平臺,整合其他用戶反饋或滿足新的用戶需求。因此應用程序生命週期仍在繼續!

團隊努力

許多人爲開發過程做出了貢獻。 通常包括:

產品所有者-領域專家,通常負責該領域的整個應用程序系列。

用戶研究員-負責推動最終用戶研究和工件整合。

用戶體驗設計師-負責創建模型,原型和設計規範。

開發人員-實現設計。

信息開發人員-負責UI文本,術語和用戶幫助主題。

質量專家-負責進行測試活動並整合結果。

這些只是主要角色。根據驅動流程的方式,可能需要擴展此列表。

設計門

爲了在整個設計主導的開發過程中支持SAP的產品團隊,全球設計團隊提出了一個名爲“設計門”的概念。設計門是沿途的一系列檢查點,用於確保我們產品的設計一致,遵循我們的設計準則,並真正滿足最終用戶的需求。這些檢查由未參與產品開發但可以提供公正意見的UX專家進行。他們提供有關如何繼續設計和開發過程以及如何優化產品用戶體驗的諮詢,指導和說明。

多設備支持:響應與自適應

簡介

對於在移動中工作的典型用戶而言,在桌面設備和移動設備之間切換至關重要。隨着用戶越來越期望在他們的設備上保持一致的性能和連貫的外觀和感覺,我們如何確保通過Fiori應用程序提供出色的用戶體驗呢?答案是通過響應和自適應設計。

響應性和自適應設計使Fiori應用程序可以在臺式機,平板電腦,智能手機和混合設備上運行。當用戶切換設備時,我們的應用程序會自動適應分辨率,圖像大小和腳本。這樣,無論設備如何,我們的用戶都可以按照他們想要的方式和地點工作。

響應式設計Responsive Design

SAP Fiori最引人注目的因素之一是我們的應用程序只需開發,配置和維護一次,所有更改就可以在所有設備上生效。這樣,無論用戶使用哪種設備,最終用戶都能獲得一致的體驗。SAPUI5通過提供各種UI控件,可自動調整不同的外形和交互方式,使響應式設計變得簡單。此外,SAPUI5允許您調整控件的大小以匹配交互類型(例如觸摸設備或鍵盤/鼠標)。響應式設計的優勢在於應用程序可以根據不同的屏幕尺寸進行調整,而無需額外的編碼和維護工作。

自適應設計Adaptive Design

在某些用例中,響應式方法可能不合適。例如,您可能更喜歡在桌面上輸入大量數據。同時,您可能只想查看輸入的數據,或者可能在平板電腦或智能手機上輸入一小部分數據。在這種情況下,根據特定設備爲不同的設備設計並滿足用例的複雜性是有意義的。這就是我們所說的自適應設計。此方法要求應用程序開發人員手動爲不同的外形因素定義特定設計。這意味着更多的精力,但也允許更具針對性的設備特定用例支持。

響應式設計的特點

內容密度:在桌面模式下激活緊湊內容密度模式。在觸摸設備上,對手指友好的舒適模式被激活。

過濾器:在桌面上,過濾器字段完全顯示。在平板電腦上,過濾條應默認摺疊,以便用戶可以使用過濾器對話框或變體。

表設置:雖然基於網格的分析表在桌面和平板電腦上運行完美,但這不是智能手機上的選項。相反,它需要由響應表替換。

(1)桌面設備上的報表示例。過濾條和分析表完全顯示。允許用戶與大量數據交互並進行復雜分析。

(2)相同的應用程序,這次適應平板電腦的屏幕尺寸。增加控件的大小以允許通過觸摸進行交互。分析表上的行數減少,過濾器欄字段被隱藏。

(3)在智能手機上顯示相同的應用程序。在此版本中,過濾器欄會自動從過濾器區域中移除。此處,還需要響應表,必須手動設置。

自適應設計的特點

動態內容區域邊界:爲了更好地利用桌面的寬屏,使用動態內容面板顯示一些聚合可視化以及主表內容。這是可選的,可以在調整頁面大小時隱藏。

響應式控件:爲了提高可讀性,平板電腦版本使用響應式表格重新格式化表格內顯示的內容。

降低複雜性:爲避免在小屏幕上顯示包含大量數據的表格,智能手機版本僅限於顯示以前顯示爲桌面版本輔助的聚合。這使用戶可以瞭解整體情況,同時忽略複雜的細節。

(1)桌面上的列表平鋪的示例。此桌面優化版本使用寬屏幕在屏幕右側顯示其他聚合信息。

(2)相同的應用適應平板電腦的屏幕尺寸。此版本使用響應表,重新格式化內容以提高可讀性。最終用戶編輯數據的選項已被刪除,因爲這在平板電腦上不實用。

(3)在智能手機上顯示相同的應用程序。由於屏幕尺寸較小,僅顯示聚合數據。

實踐

想想“移動優先”,首先從移動設計開始,可以幫助你保持專注。從核心功能開始,並在遷移到更大的設備時逐步增強功能。

如果你使用的是桌面控件,請在移動設備上運行時將其替換爲響應式控件。你仍然可以使用sap.ui.table庫。但是,我們不建議使用sap.ui.commons庫。

如果你正在使用ALV(分析表),請將其替換爲響應表(sap.m)或用例的其他特定解決方案(例如圖表,文本和KPIs)。

使用響應控件:大多數SAPUI5控件都基於移動控件。這意味着它們可以在觸摸設備上工作,也可以使用鼠標和鍵盤。

正確配置控件:按照指南爲不同控件的配置響應設置。

使用正確的尺寸設置:在觸摸設備上將應用設置爲“大”,對於由鼠標或鍵盤操作的設備,將應用設置爲“中等”。

使用響應式佈局:有多種佈局選項可供選擇,允許你調整爲不同的大小。

使用letterboxing:許多工作清單應用程序沒有太多內容。通過將它們裝箱(將其寬度限制爲最大1280像素),你可以優化應用程序的佈局並實現更緊湊的外觀。

功能太多了?如果桌面應用程序功能太多且太複雜而無法在平板電腦或智能手機上使用,則可能需要關閉移動設備上的某些功能:隱藏編輯功能並專注於顯示,隱藏工具欄中的功能,隱藏表中的備用列和視圖。

總結和快速指南

SAP Fiori應用程序必須能夠在三種主要設備上運行:桌面、平板電腦和智能手機。

如果應用程序的功能和信息可以在所有設備類型上平等提供,則應該使用響應式方法來自動調整應用程序。

如果應用程序的功能和信息不能在不同的設備類型上平等提供(因爲用例、可用屏幕或設備功能),則應用程序應根據設備的特定要求手動調整。

適應性和響應性方法可以混合使用。

移動優先

“移動優先”意味着從簡單的移動應用程序設計開始,重新構想你的複雜性方法。

從最小和最有限的設備開始,然後爲更大、更強大的設備增強應用程序有許多好處。它意味着必須處理一些限制,必須進行信息簡化、聚合、分組以及提供默認信息。

這種方法可以讓您真正專注於重要的事情,並可以帶來驚人的設計創新。

優勢

構建,不要拆卸:不要從桌面設計開始,拆卸出移動方案的功能,而是從最小和最有限的設備開始,然後爲更大、更強大的設備增強應用程序。由於移動設計體現了核心功能,因此“移動優先”方法可以使你專注於增強而非降級。

提前考慮:移動設備還提供獨特的功能,例如傳感器,攝像頭和語音識別,這些功能在桌面設備上並不總是可用。從移動設計開始,可以更容易地從一開始就考慮這些附加功能,而不是在以後插入它們。

改善用戶體驗:“移動優先”可幫助你貼近用戶的環境。例如,在移動方案中,網絡可用性和信號強度可能不可靠。因此,爲用戶提供繼續脫機工作的選項可能是用戶滿意度的關鍵。更重要的是,確保跨不同設備類型的無縫體驗是業務流程優化的關鍵要素。

內容密度(舒適和緊湊)

Content Density (Cozy and Compact)

SAP Fiori具有響應能力,可在所有設備上運行,並具有多種樣式。這意味着必須以相同的樣式支持所有常見的交互樣式:與鼠標和鍵盤的交互以及觸摸。

SAPUI5提供“內容密度”因子,允許根據交互方式調整控件的大小。

舒適模式顯示尺寸足夠大的控件,以實現指尖交互,非常適合觸摸操作的設備。

緊湊模式減少了控件的尺寸,允許在UI上顯示更多信息,非常適合鼠標和鍵盤操作的設備。

緊湊模式下,字體大小保持不變,但控件的尺寸以及它們之間的間距小於舒適模式。 舒適模式的默認控制區域爲3 rem,而緊湊模式爲2 rem。

oolbar shown with a compact density factor:

Toolbar shown with a cozy density factor

實踐

所有SAP Fiori控件均支持舒適和緊湊的內容密度模式。對於大多數控件,默認設置爲“舒適”。但是,某些控件(例如源自桌面庫的控件)用緊湊模式作爲默認設置。

如何設置內容密度取決於用戶設備的功能,可以使用設備幫助程序方法檢測到。如果設備支持touch(sap.ui.Device.support.touch = true),則內容密度類應設置爲“sapUiSizeCozy”或“sapUiSizeCompact”。

你必須積極設置內容密度,由於不同的控件可能具有不同的默認值,因此未能設置正確的內容密度可能會導致屏幕上顯示不同的密度因子。

應用程序開發人員必須在app描述中說明支持哪些模式,然後在啓動時由SAP Fiori Launchpad檢查此信息。

如果管理員已啓用此功能,則可在混合設備(支持觸摸以及鼠標和鍵盤的設備)上的SAP Fiori Launchpad中提供其他設置。使用此附加設置(在“我的區域/設置/外觀/顯示設置/舒適內容間距”下),用戶可以定義他們是否希望應用程序以舒適(默認)或緊湊模式運行。此設置對所有混合設備保持不變,但對純觸摸或純鼠標和鍵盤設備的自動檢測沒有影響。

指引

觸摸設備:爲整個應用設置內容密度爲“舒適”。應用sapUiSizeCozy類。

通過鼠標和鍵盤操作的設備:將整個應用的內容密度設置爲“緊湊”。應用sapUiSizeCompact類。

混合設備:用戶可以選擇與應用程序進行交互。默認設置爲舒適模式(觸摸),但用戶可以在SAP Fiori Launchpad中覆蓋此設置,該設置將保留。

主題化

UI主題設計器是一種基於瀏覽器的交叉主題場景工具,允許使用SAP UI技術將企業品牌應用於構建的應用程序中。

Modifying the standard SAP Fiori theme with SAP’s UI Theme Designer

SAP Fiori用戶界面使用SAPUI5控件集構建,這些控件集通過CSS進行了精心設計。SAP Fiori提供增強的主題體驗,利用簡單的基於LESS的語義參數結構,支持主題和定製。通過一個簡化的代碼行,SAP Fiori應用程序可以使用多個主題,並且還支持高對比度的可訪問性要求。例如,可以通過更換徽標或更改控件集某個部分的顏色來修改標準的SAP Fiori主題,以適應任何公司的視覺語言和品牌。這可以使用SAP的UI主題設計器輕鬆完成。

Default SAP Fiori theme, Belize (light flavor)

SAP Fiori theme, Belize Deep (dark flavor)

SAP high-contrast theme

語義主題

語義主題的概念是使用在UI控件內鏈接的LESS參數來指示某種語義。這意味着你可以修改或更改參數背後的值,並瞭解哪些控件或語義外觀會受到影響。例如,輸入控件的所有主題參數(例如輸入字段,單選按鈕,複選框等)已組合在一起幷包含單詞“field”。同樣,列表和表格(背景,分隔符等)的所有顏色參數都已組合在一起,幷包含單詞“list”。 可以在主題設計器中查看這些名稱。

Example of a SAPUI5 button control supporting multiple themes支持多個主題的SAPUI5按鈕控件的示例

例如,通過定義諸如“按鈕背景”的語義顏色名稱,可以將其連接到不同的主題顏色值。 UI主題設計器將所有已更改的參數打包爲自定義主題,該主題可以部署在多個系統上,並與支持Belize主題的所有應用程序一起使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章