SAP Fiori簡(jiǎn)介

SAP Fiori為SAP軟件提供了一致且全面的用戶(hù)體驗(yàn)癌别。 通過(guò)強(qiáng)調(diào)易用性皂岔、創(chuàng)建視覺(jué)上令人愉悅的設(shè)計(jì)，所有設(shè)備的體驗(yàn)都是簡(jiǎn)單且直觀的展姐。 借助輕松的交互模式躁垛，SAP Fiori UX旨在為各企業(yè)用戶(hù)提供更好的服務(wù)。

設(shè)計(jì)理念

SAP Fiori的核心設(shè)計(jì)理念是：

Provides role-based simplification of business processes（提供基于角色的業(yè)務(wù)流程方面的簡(jiǎn)化）

Shifts from monolithic solutions to activity-based apps（從單一解決方案轉(zhuǎn)變?yōu)榛诨顒?dòng)的應(yīng)用程序）

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

SAP Fiori的設(shè)計(jì)哲學(xué)基于它的五個(gè)核心原則： role-based（基于角色的）, adaptive（自適應(yīng)的）, simple（簡(jiǎn)單的）, coherent（連貫的）, and delightful（令人愉悅的）圾笨。

發(fā)展歷程

SAP Fiori 1.0

SAP Fiori于2013年推出教馆，已經(jīng)從最初的小范圍使用發(fā)展成為整個(gè)SAP的新的用戶(hù)體驗(yàn)。 它已被應(yīng)用到SAP Business Suite 4 SAP HANA（SAP S / 4HANA）墅拭，SAP SuccessFactors Employee Central解決方案活玲，Ariba移動(dòng)解決方案，SAP Cloud for Customer等解決方案中谍婉。

基于SAPUI5技術(shù)（版本1.26-1.38），SAP Fiori 1.0完成了更廣泛的范式轉(zhuǎn)變镀钓，從關(guān)注功能特征轉(zhuǎn)向用戶(hù)及其體驗(yàn)穗熬。 SAP為復(fù)雜的業(yè)務(wù)場(chǎng)景帶來(lái)了簡(jiǎn)便性，因此各團(tuán)隊(duì)可以變的更高效丁溅，以全新的方式更好更快的工作唤蔗。

SAP Fiori 1.0采用現(xiàn)代UX設(shè)計(jì)原則，可以跨業(yè)務(wù)線窟赏、跨任務(wù)和跨設(shè)備提供基于角色的消費(fèi)者級(jí)用戶(hù)體驗(yàn)妓柜。

SAP Fiori 2.0

SAP Fiori 2.0于2016年10月推出。它代表了SAP S / 4HANA和SAP Business Suite用戶(hù)體驗(yàn)的最新發(fā)展成果涯穷。

SAP Fiori 2.0基于SAPUI5技術(shù)（版本1.40及更高版本）棍掐，更加注重用戶(hù)及其工作方式。它讓用戶(hù)更專(zhuān)注于核心任務(wù)拷况，同時(shí)仍然可以跟蹤其他區(qū)域的活動(dòng)作煌。對(duì)現(xiàn)有SAP Fiori啟動(dòng)面板的升級(jí)使用戶(hù)獲得更高的靈活性和更全面的指導(dǎo)掘殴。這些改進(jìn)包括優(yōu)化發(fā)現(xiàn)和導(dǎo)航功能，通過(guò)視窗進(jìn)行界面交互粟誓，訪問(wèn)面向操作的個(gè)人通知奏寨，協(xié)作的改進(jìn)，個(gè)人數(shù)字助理的使用等鹰服。

SAP Fiori 2.0為用戶(hù)提供了：

Increased productivity（提高生產(chǎn)力）

Faster and more direct access to relevant information and applications（更快病瞳，更直接地訪問(wèn)相關(guān)信息和應(yīng)用程序）

Transparency on items needing attention via timely notifications（通過(guò)及時(shí)通知提高關(guān)注項(xiàng)目的透明度）

Assistance to users when it comes to deciding needs to be done next（為用戶(hù)決策提供幫助）

The ability for the user to take quick and informed actions（為用戶(hù)提供采取快速和明智行動(dòng)的能力）

Increased user satisfaction（提高用戶(hù)滿(mǎn)意度）

設(shè)計(jì)原則

ROLE-BASED（基于角色的）

SAP Fiori基于你的業(yè)務(wù)、需求及工作方式而設(shè)計(jì)悲酷。它借鑒了我們對(duì)當(dāng)今人力資源的多種角色的廣泛見(jiàn)解仍源。SAP Fiori能在適當(dāng)?shù)臅r(shí)間提供正確的信息，并反映你真實(shí)的工作方式舔涎。

DELIGHTFUL（令人愉悅的）

除了讓您更聰明地工作之外笼踩，SAP Fiori還可以讓您簡(jiǎn)單地完成工作亡嫌，從而獲得更好的工作體驗(yàn)嚎于。

COHERENT（連貫的）

無(wú)論您是填寫(xiě)銷(xiāo)售訂單，查看最新KPI挟冠，還是管理請(qǐng)假申請(qǐng)于购，SAP Fiori都會(huì)遵循一致的交互和視覺(jué)設(shè)計(jì)語(yǔ)言。在整個(gè)企業(yè)中知染，您將享受到同樣直觀和一致的體驗(yàn)肋僧。

SIMPLE（簡(jiǎn)單的）

借助SAP Fiori，您可以直觀控淡、快速地完成工作噩咪。SAP Fiori幫助您專(zhuān)注于重要的事項(xiàng)乓土，它的基本功能易于使用，您可以專(zhuān)注于您的相關(guān)任務(wù)和活動(dòng)獲得個(gè)性化體驗(yàn)，吁讨。

ADAPTIVE（自適應(yīng)的）

無(wú)論您使用何種設(shè)備临庇，SAP Fiori都能讓您隨時(shí)隨地工作叼风。并且朋譬，它提供了可即時(shí)查看的相關(guān)信息。

設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程

SAP致力于設(shè)計(jì)基于角色的應(yīng)用程序者冤，以滿(mǎn)足最終用戶(hù)在所有業(yè)務(wù)肤视、任務(wù)和設(shè)備上的需求。我們相信這是優(yōu)秀用戶(hù)體驗(yàn)的關(guān)鍵涉枫。但是邢滑，我們?nèi)绾螢榭蛻?hù)和最終用戶(hù)保證可靠而一致的設(shè)計(jì)？ 答案是SAP的“設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程”（Design-Led Development Process）拜银。

設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程利用成熟的設(shè)計(jì)思維方法來(lái)實(shí)現(xiàn)最佳的用戶(hù)體驗(yàn)殊鞭。該流程涵蓋整個(gè)開(kāi)發(fā)生命周期遭垛，簡(jiǎn)單易用，為整個(gè)設(shè)計(jì)擴(kuò)展提供了堅(jiān)實(shí)的基礎(chǔ)操灿。它促進(jìn)了設(shè)計(jì)人員和開(kāi)發(fā)人員之間的協(xié)作锯仪，同時(shí)確保在整個(gè)過(guò)程中的每一步都能滿(mǎn)足最終用戶(hù)的需求。

各個(gè)階段

開(kāi)發(fā)軟件不僅僅是編碼趾盐，必須在整個(gè)過(guò)程中把用戶(hù)放在首位庶喜。為了做到這一點(diǎn)，首先要了解最終用戶(hù)是誰(shuí)救鲤。這就是設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程從“發(fā)現(xiàn)階段”開(kāi)始的原因久窟。在此階段，你需要專(zhuān)注于了解客戶(hù)本缠，他們的工作方式以及他們的需求斥扛。

只有這樣，您才能進(jìn)入設(shè)計(jì)階段丹锹，并為開(kāi)發(fā)設(shè)計(jì)初始原型稀颁。在開(kāi)發(fā)活動(dòng)（例如實(shí)施和測(cè)試）之后，您的應(yīng)用程序也就可以準(zhǔn)備部署了楣黍。

設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程的重點(diǎn)是前兩個(gè)階段 ——發(fā)現(xiàn)和設(shè)計(jì)匾灶。 這兩個(gè)步驟與開(kāi)發(fā)軟件本身一樣重要。

如下圖：The design-led development process

發(fā)現(xiàn)——把控全局

也許您已經(jīng)很清楚客戶(hù)的需求和需求租漂，以及最終用戶(hù)的任務(wù)和挑戰(zhàn)阶女。但你真正需要的是你的應(yīng)用程序影響到的各業(yè)務(wù)角色的整體視圖。

為此哩治，你必須訪問(wèn)所在地的客戶(hù)并與相關(guān)人員交談秃踩。把與不同的利益相關(guān)者組織起來(lái)進(jìn)行設(shè)計(jì)思維研討會(huì)是一個(gè)很好的方法。在發(fā)現(xiàn)階段結(jié)束時(shí)锚扎，你應(yīng)該清楚地了解所涉及的所有業(yè)務(wù)角色吞瞪，并收集每個(gè)角色的典型特征——也稱(chēng)為“personas”。你應(yīng)該知道他們的典型任務(wù)是什么驾孔，以及他們的活動(dòng)順序是什么樣的。有了這些信息惯疙，你才可以構(gòu)思開(kāi)發(fā)有關(guān)應(yīng)用程序如何工作的初步想法翠勉，獲得對(duì)需求的共同理解，并從最終用戶(hù)那里獲得額外的反饋霉颠。

設(shè)計(jì)——為了令人愉悅的結(jié)果

一旦你對(duì)發(fā)現(xiàn)活動(dòng)的初始結(jié)果感到滿(mǎn)意对碌，你就可以開(kāi)始下一階段設(shè)計(jì)了。你的應(yīng)用程序應(yīng)根據(jù)構(gòu)建的用例進(jìn)行定制蒿偎，該用例需基于Discover階段的綜合結(jié)果朽们。理想情況下怀读，你會(huì)有一個(gè)多學(xué)科團(tuán)隊(duì)可以進(jìn)行頭腦風(fēng)暴，創(chuàng)建故事板骑脱，并產(chǎn)出可以與最終用戶(hù)一起驗(yàn)證的第一個(gè)原型菜枷。

完成初始設(shè)計(jì)后即可開(kāi)始開(kāi)發(fā)。在開(kāi)發(fā)階段叁丧，你可能仍需要更改設(shè)計(jì)的某些方面啤誊，以應(yīng)對(duì)持續(xù)的用戶(hù)反饋，或優(yōu)化應(yīng)用程序拥娄，或應(yīng)對(duì)技術(shù)限制蚊锹。

當(dāng)應(yīng)用程序完成首次實(shí)施和測(cè)試后，初始設(shè)計(jì)可能需要進(jìn)一步的迭代和調(diào)整才能到達(dá)最終的設(shè)計(jì)和實(shí)現(xiàn)稚瘾。

部署——卓越的用戶(hù)體驗(yàn)

在部署應(yīng)用程序之前牡昆，你需要確保最終實(shí)現(xiàn)和設(shè)計(jì)完全同步。如果和設(shè)計(jì)有偏差需要獲得批準(zhǔn)摊欠。在此階段丢烘，有必要驗(yàn)證最終實(shí)施和設(shè)計(jì)是否為最終目標(biāo)用戶(hù)提供了預(yù)期的用戶(hù)體驗(yàn)。

SAP提供全新的UX設(shè)計(jì)服務(wù)整合凄硼，可指導(dǎo)組織和公司實(shí)現(xiàn)以用戶(hù)為中心的設(shè)計(jì)铅协。

我們使用經(jīng)過(guò)驗(yàn)證的設(shè)計(jì)方法（如設(shè)計(jì)思維和以用戶(hù)為中心的設(shè)計(jì)）幫助您為您的企業(yè)定義和執(zhí)行最佳UX策略。

持續(xù)優(yōu)化——應(yīng)用的生命周期

現(xiàn)在你已經(jīng)編寫(xiě)并交付了應(yīng)用程序摊沉，你可能想知道它在現(xiàn)實(shí)世界中的表現(xiàn)以及最終用戶(hù)是否真的滿(mǎn)意狐史。有多種方法可以獲得用戶(hù)反饋，包括訪談说墨、網(wǎng)站訪問(wèn)和結(jié)構(gòu)化可用性測(cè)試骏全。例如，你可能會(huì)發(fā)現(xiàn)需要支持其他移動(dòng)設(shè)備尼斧，甚至增強(qiáng)一些其他功能姜贡。

在此過(guò)程的任何一步，你都可以應(yīng)用設(shè)計(jì)主導(dǎo)開(kāi)發(fā)的方法來(lái)規(guī)劃新版本棺棵，支持其他平臺(tái)楼咳，整合其他用戶(hù)反饋或滿(mǎn)足新的用戶(hù)需求。因此應(yīng)用程序生命周期仍在繼續(xù)烛恤！

團(tuán)隊(duì)努力

許多人為開(kāi)發(fā)過(guò)程做出了貢獻(xiàn)母怜。 通常包括：

產(chǎn)品所有者-領(lǐng)域?qū)＜遥ǔＸ?fù)責(zé)該領(lǐng)域的整個(gè)應(yīng)用程序系列缚柏。

用戶(hù)研究員-負(fù)責(zé)推動(dòng)最終用戶(hù)研究和工件整合苹熏。

用戶(hù)體驗(yàn)設(shè)計(jì)師-負(fù)責(zé)創(chuàng)建模型，原型和設(shè)計(jì)規(guī)范。

開(kāi)發(fā)人員-實(shí)現(xiàn)設(shè)計(jì)轨域。

信息開(kāi)發(fā)人員-負(fù)責(zé)UI文本袱耽，術(shù)語(yǔ)和用戶(hù)幫助主題。

質(zhì)量專(zhuān)家-負(fù)責(zé)進(jìn)行測(cè)試活動(dòng)并整合結(jié)果干发。

這些只是主要角色朱巨。根據(jù)驅(qū)動(dòng)流程的方式，可能需要擴(kuò)展此列表铐然。

設(shè)計(jì)門(mén)

為了在整個(gè)設(shè)計(jì)主導(dǎo)的開(kāi)發(fā)過(guò)程中支持SAP的產(chǎn)品團(tuán)隊(duì)蔬崩，全球設(shè)計(jì)團(tuán)隊(duì)提出了一個(gè)名為“設(shè)計(jì)門(mén)”的概念。設(shè)計(jì)門(mén)是沿途的一系列檢查點(diǎn)搀暑，用于確保我們產(chǎn)品的設(shè)計(jì)一致沥阳，遵循我們的設(shè)計(jì)準(zhǔn)則，并真正滿(mǎn)足最終用戶(hù)的需求自点。這些檢查由未參與產(chǎn)品開(kāi)發(fā)但可以提供公正意見(jiàn)的UX專(zhuān)家進(jìn)行桐罕。他們提供有關(guān)如何繼續(xù)設(shè)計(jì)和開(kāi)發(fā)過(guò)程以及如何優(yōu)化產(chǎn)品用戶(hù)體驗(yàn)的咨詢(xún)，指導(dǎo)和說(shuō)明桂敛。

多設(shè)備支持：響應(yīng)與自適應(yīng)

簡(jiǎn)介

對(duì)于在移動(dòng)中工作的典型用戶(hù)而言功炮，在桌面設(shè)備和移動(dòng)設(shè)備之間切換至關(guān)重要。隨著用戶(hù)越來(lái)越期望在他們的設(shè)備上保持一致的性能和連貫的外觀和感覺(jué)术唬，我們?nèi)绾未_保通過(guò)Fiori應(yīng)用程序提供出色的用戶(hù)體驗(yàn)?zāi)匦椒看鸢甘峭ㄟ^(guò)響應(yīng)和自適應(yīng)設(shè)計(jì)。

響應(yīng)性和自適應(yīng)設(shè)計(jì)使Fiori應(yīng)用程序可以在臺(tái)式機(jī)粗仓，平板電腦嫁怀，智能手機(jī)和混合設(shè)備上運(yùn)行。當(dāng)用戶(hù)切換設(shè)備時(shí)借浊，我們的應(yīng)用程序會(huì)自動(dòng)適應(yīng)分辨率塘淑，圖像大小和腳本。這樣蚂斤，無(wú)論設(shè)備如何存捺，我們的用戶(hù)都可以按照他們想要的方式和地點(diǎn)工作。

響應(yīng)式設(shè)計(jì)Responsive Design

SAP Fiori最引人注目的因素之一是我們的應(yīng)用程序只需開(kāi)發(fā)曙蒸，配置和維護(hù)一次捌治，所有更改就可以在所有設(shè)備上生效。這樣纽窟，無(wú)論用戶(hù)使用哪種設(shè)備具滴，最終用戶(hù)都能獲得一致的體驗(yàn)。SAPUI5通過(guò)提供各種UI控件师倔，可自動(dòng)調(diào)整不同的外形和交互方式，使響應(yīng)式設(shè)計(jì)變得簡(jiǎn)單。此外趋艘，SAPUI5允許您調(diào)整控件的大小以匹配交互類(lèi)型（例如觸摸設(shè)備或鍵盤(pán)/鼠標(biāo)）疲恢。響應(yīng)式設(shè)計(jì)的優(yōu)勢(shì)在于應(yīng)用程序可以根據(jù)不同的屏幕尺寸進(jìn)行調(diào)整，而無(wú)需額外的編碼和維護(hù)工作瓷胧。

自適應(yīng)設(shè)計(jì)Adaptive Design

在某些用例中显拳，響應(yīng)式方法可能不合適。例如搓萧，您可能更喜歡在桌面上輸入大量數(shù)據(jù)杂数。同時(shí)，您可能只想查看輸入的數(shù)據(jù)瘸洛，或者可能在平板電腦或智能手機(jī)上輸入一小部分?jǐn)?shù)據(jù)揍移。在這種情況下，根據(jù)特定設(shè)備為不同的設(shè)備設(shè)計(jì)并滿(mǎn)足用例的復(fù)雜性是有意義的反肋。這就是我們所說(shuō)的自適應(yīng)設(shè)計(jì)那伐。此方法要求應(yīng)用程序開(kāi)發(fā)人員手動(dòng)為不同的外形因素定義特定設(shè)計(jì)。這意味著更多的精力石蔗，但也允許更具針對(duì)性的設(shè)備特定用例支持罕邀。

響應(yīng)式設(shè)計(jì)的特點(diǎn)

內(nèi)容密度：在桌面模式下激活緊湊內(nèi)容密度模式。在觸摸設(shè)備上养距，對(duì)手指友好的舒適模式被激活诉探。

過(guò)濾器：在桌面上，過(guò)濾器字段完全顯示棍厌。在平板電腦上肾胯，過(guò)濾條應(yīng)默認(rèn)折疊，以便用戶(hù)可以使用過(guò)濾器對(duì)話框或變體定铜。

表設(shè)置：雖然基于網(wǎng)格的分析表在桌面和平板電腦上運(yùn)行完美阳液，但這不是智能手機(jī)上的選項(xiàng)。相反揣炕，它需要由響應(yīng)表替換帘皿。

（1）桌面設(shè)備上的報(bào)表示例。過(guò)濾條和分析表完全顯示畸陡。允許用戶(hù)與大量數(shù)據(jù)交互并進(jìn)行復(fù)雜分析鹰溜。

（2）相同的應(yīng)用程序，這次適應(yīng)平板電腦的屏幕尺寸丁恭。增加控件的大小以允許通過(guò)觸摸進(jìn)行交互曹动。分析表上的行數(shù)減少，過(guò)濾器欄字段被隱藏牲览。

（3）在智能手機(jī)上顯示相同的應(yīng)用程序墓陈。在此版本中，過(guò)濾器欄會(huì)自動(dòng)從過(guò)濾器區(qū)域中移除。此處贡必，還需要響應(yīng)表兔港，必須手動(dòng)設(shè)置。

自適應(yīng)設(shè)計(jì)的特點(diǎn)

動(dòng)態(tài)內(nèi)容區(qū)域邊界：為了更好地利用桌面的寬屏仔拟，使用動(dòng)態(tài)內(nèi)容面板顯示一些聚合可視化以及主表內(nèi)容衫樊。這是可選的，可以在調(diào)整頁(yè)面大小時(shí)隱藏利花。

響應(yīng)式控件：為了提高可讀性科侈，平板電腦版本使用響應(yīng)式表格重新格式化表格內(nèi)顯示的內(nèi)容。

降低復(fù)雜性：為避免在小屏幕上顯示包含大量數(shù)據(jù)的表格炒事，智能手機(jī)版本僅限于顯示以前顯示為桌面版本輔助的聚合臀栈。這使用戶(hù)可以了解整體情況，同時(shí)忽略復(fù)雜的細(xì)節(jié)羡洛。

（1）桌面上的列表平鋪的示例挂脑。此桌面優(yōu)化版本使用寬屏幕在屏幕右側(cè)顯示其他聚合信息。

（2）相同的應(yīng)用適應(yīng)平板電腦的屏幕尺寸欲侮。此版本使用響應(yīng)表崭闲，重新格式化內(nèi)容以提高可讀性。最終用戶(hù)編輯數(shù)據(jù)的選項(xiàng)已被刪除威蕉，因?yàn)檫@在平板電腦上不實(shí)用刁俭。

（3）在智能手機(jī)上顯示相同的應(yīng)用程序。由于屏幕尺寸較小韧涨，僅顯示聚合數(shù)據(jù)牍戚。

實(shí)踐

想想“移動(dòng)優(yōu)先”，首先從移動(dòng)設(shè)計(jì)開(kāi)始虑粥，可以幫助你保持專(zhuān)注如孝。從核心功能開(kāi)始，并在遷移到更大的設(shè)備時(shí)逐步增強(qiáng)功能娩贷。

如果你使用的是桌面控件第晰，請(qǐng)?jiān)谝苿?dòng)設(shè)備上運(yùn)行時(shí)將其替換為響應(yīng)式控件。你仍然可以使用sap.ui.table庫(kù)彬祖。但是茁瘦，我們不建議使用sap.ui.commons庫(kù)。

如果你正在使用ALV（分析表）储笑，請(qǐng)將其替換為響應(yīng)表（sap.m）或用例的其他特定解決方案（例如圖表甜熔，文本和KPIs）。

使用響應(yīng)控件：大多數(shù)SAPUI5控件都基于移動(dòng)控件突倍。這意味著它們可以在觸摸設(shè)備上工作腔稀，也可以使用鼠標(biāo)和鍵盤(pán)盆昙。

正確配置控件：按照指南為不同控件的配置響應(yīng)設(shè)置。

使用正確的尺寸設(shè)置：在觸摸設(shè)備上將應(yīng)用設(shè)置為“大”烧颖，對(duì)于由鼠標(biāo)或鍵盤(pán)操作的設(shè)備弱左，將應(yīng)用設(shè)置為“中等”。

使用響應(yīng)式布局：有多種布局選項(xiàng)可供選擇炕淮，允許你調(diào)整為不同的大小。

使用letterboxing：許多工作清單應(yīng)用程序沒(méi)有太多內(nèi)容跳夭。通過(guò)將它們裝箱（將其寬度限制為最大1280像素）涂圆，你可以?xún)?yōu)化應(yīng)用程序的布局并實(shí)現(xiàn)更緊湊的外觀。

功能太多了币叹？如果桌面應(yīng)用程序功能太多且太復(fù)雜而無(wú)法在平板電腦或智能手機(jī)上使用润歉，則可能需要關(guān)閉移動(dòng)設(shè)備上的某些功能：隱藏編輯功能并專(zhuān)注于顯示，隱藏工具欄中的功能颈抚，隱藏表中的備用列和視圖踩衩。

總結(jié)和快速指南

SAP Fiori應(yīng)用程序必須能夠在三種主要設(shè)備上運(yùn)行：桌面、平板電腦和智能手機(jī)贩汉。

如果應(yīng)用程序的功能和信息可以在所有設(shè)備類(lèi)型上平等提供驱富，則應(yīng)該使用響應(yīng)式方法來(lái)自動(dòng)調(diào)整應(yīng)用程序。

如果應(yīng)用程序的功能和信息不能在不同的設(shè)備類(lèi)型上平等提供(因?yàn)橛美ノ琛⒖捎闷聊换蛟O(shè)備功能)褐鸥，則應(yīng)用程序應(yīng)根據(jù)設(shè)備的特定要求手動(dòng)調(diào)整。

適應(yīng)性和響應(yīng)性方法可以混合使用赐稽。

移動(dòng)優(yōu)先

“移動(dòng)優(yōu)先”意味著從簡(jiǎn)單的移動(dòng)應(yīng)用程序設(shè)計(jì)開(kāi)始叫榕，重新構(gòu)想你的復(fù)雜性方法。

從最小和最有限的設(shè)備開(kāi)始姊舵，然后為更大晰绎、更強(qiáng)大的設(shè)備增強(qiáng)應(yīng)用程序有許多好處。它意味著必須處理一些限制括丁，必須進(jìn)行信息簡(jiǎn)化荞下、聚合、分組以及提供默認(rèn)信息躏将。

這種方法可以讓您真正專(zhuān)注于重要的事情锄弱，并可以帶來(lái)驚人的設(shè)計(jì)創(chuàng)新。

優(yōu)勢(shì)

構(gòu)建祸憋，不要拆卸：不要從桌面設(shè)計(jì)開(kāi)始会宪，拆卸出移動(dòng)方案的功能，而是從最小和最有限的設(shè)備開(kāi)始蚯窥，然后為更大掸鹅、更強(qiáng)大的設(shè)備增強(qiáng)應(yīng)用程序塞帐。由于移動(dòng)設(shè)計(jì)體現(xiàn)了核心功能，因此“移動(dòng)優(yōu)先”方法可以使你專(zhuān)注于增強(qiáng)而非降級(jí)巍沙。

提前考慮：移動(dòng)設(shè)備還提供獨(dú)特的功能葵姥，例如傳感器，攝像頭和語(yǔ)音識(shí)別句携，這些功能在桌面設(shè)備上并不總是可用榔幸。從移動(dòng)設(shè)計(jì)開(kāi)始，可以更容易地從一開(kāi)始就考慮這些附加功能矮嫉，而不是在以后插入它們削咆。

改善用戶(hù)體驗(yàn)：“移動(dòng)優(yōu)先”可幫助你貼近用戶(hù)的環(huán)境。例如蠢笋，在移動(dòng)方案中拨齐，網(wǎng)絡(luò)可用性和信號(hào)強(qiáng)度可能不可靠。因此昨寞，為用戶(hù)提供繼續(xù)脫機(jī)工作的選項(xiàng)可能是用戶(hù)滿(mǎn)意度的關(guān)鍵瞻惋。更重要的是，確痹遥跨不同設(shè)備類(lèi)型的無(wú)縫體驗(yàn)是業(yè)務(wù)流程優(yōu)化的關(guān)鍵要素歼狼。

內(nèi)容密度（舒適和緊湊）

Content Density (Cozy and Compact)

SAP Fiori具有響應(yīng)能力，可在所有設(shè)備上運(yùn)行窄俏，并具有多種樣式蹂匹。這意味著必須以相同的樣式支持所有常見(jiàn)的交互樣式：與鼠標(biāo)和鍵盤(pán)的交互以及觸摸。

SAPUI5提供“內(nèi)容密度”因子凹蜈，允許根據(jù)交互方式調(diào)整控件的大小限寞。

舒適模式顯示尺寸足夠大的控件，以實(shí)現(xiàn)指尖交互仰坦，非常適合觸摸操作的設(shè)備履植。

緊湊模式減少了控件的尺寸，允許在UI上顯示更多信息悄晃，非常適合鼠標(biāo)和鍵盤(pán)操作的設(shè)備玫霎。

緊湊模式下，字體大小保持不變妈橄，但控件的尺寸以及它們之間的間距小于舒適模式庶近。 舒適模式的默認(rèn)控制區(qū)域?yàn)? rem，而緊湊模式為2 rem眷蚓。

oolbar shown with a compact density factor：

Toolbar shown with a cozy density factor

實(shí)踐

所有SAP Fiori控件均支持舒適和緊湊的內(nèi)容密度模式鼻种。對(duì)于大多數(shù)控件，默認(rèn)設(shè)置為“舒適”沙热。但是叉钥，某些控件（例如源自桌面庫(kù)的控件）用緊湊模式作為默認(rèn)設(shè)置罢缸。

如何設(shè)置內(nèi)容密度取決于用戶(hù)設(shè)備的功能，可以使用設(shè)備幫助程序方法檢測(cè)到投队。如果設(shè)備支持touch（sap.ui.Device.support.touch = true）枫疆，則內(nèi)容密度類(lèi)應(yīng)設(shè)置為“sapUiSizeCozy”或“sapUiSizeCompact”。

你必須積極設(shè)置內(nèi)容密度敷鸦，由于不同的控件可能具有不同的默認(rèn)值息楔，因此未能設(shè)置正確的內(nèi)容密度可能會(huì)導(dǎo)致屏幕上顯示不同的密度因子。

應(yīng)用程序開(kāi)發(fā)人員必須在app描述中說(shuō)明支持哪些模式轧膘，然后在啟動(dòng)時(shí)由SAP Fiori Launchpad檢查此信息钞螟。

如果管理員已啟用此功能，則可在混合設(shè)備（支持觸摸以及鼠標(biāo)和鍵盤(pán)的設(shè)備）上的SAP Fiori Launchpad中提供其他設(shè)置谎碍。使用此附加設(shè)置（在“我的區(qū)域/設(shè)置/外觀/顯示設(shè)置/舒適內(nèi)容間距”下），用戶(hù)可以定義他們是否希望應(yīng)用程序以舒適（默認(rèn)）或緊湊模式運(yùn)行洞焙。此設(shè)置對(duì)所有混合設(shè)備保持不變蟆淀，但對(duì)純觸摸或純鼠標(biāo)和鍵盤(pán)設(shè)備的自動(dòng)檢測(cè)沒(méi)有影響。

指引

觸摸設(shè)備：為整個(gè)應(yīng)用設(shè)置內(nèi)容密度為“舒適”澡匪。應(yīng)用sapUiSizeCozy類(lèi)熔任。

通過(guò)鼠標(biāo)和鍵盤(pán)操作的設(shè)備：將整個(gè)應(yīng)用的內(nèi)容密度設(shè)置為“緊湊”。應(yīng)用sapUiSizeCompact類(lèi)唁情。

混合設(shè)備：用戶(hù)可以選擇與應(yīng)用程序進(jìn)行交互疑苔。默認(rèn)設(shè)置為舒適模式（觸摸），但用戶(hù)可以在SAP Fiori Launchpad中覆蓋此設(shè)置甸鸟，該設(shè)置將保留惦费。

主題化

UI主題設(shè)計(jì)器是一種基于瀏覽器的交叉主題場(chǎng)景工具，允許使用SAP UI技術(shù)將企業(yè)品牌應(yīng)用于構(gòu)建的應(yīng)用程序中抢韭。

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

SAP Fiori用戶(hù)界面使用SAPUI5控件集構(gòu)建薪贫，這些控件集通過(guò)CSS進(jìn)行了精心設(shè)計(jì)。SAP Fiori提供增強(qiáng)的主題體驗(yàn)刻恭，利用簡(jiǎn)單的基于LESS的語(yǔ)義參數(shù)結(jié)構(gòu)瞧省，支持主題和定制。通過(guò)一個(gè)簡(jiǎn)化的代碼行鳍贾，SAP Fiori應(yīng)用程序可以使用多個(gè)主題鞍匾，并且還支持高對(duì)比度的可訪問(wèn)性要求。例如骑科，可以通過(guò)更換徽標(biāo)或更改控件集某個(gè)部分的顏色來(lái)修改標(biāo)準(zhǔn)的SAP Fiori主題橡淑，以適應(yīng)任何公司的視覺(jué)語(yǔ)言和品牌。這可以使用SAP的UI主題設(shè)計(jì)器輕松完成纵散。

Default SAP Fiori theme, Belize (light flavor)

SAP Fiori theme, Belize Deep (dark flavor)

SAP high-contrast theme

語(yǔ)義主題

語(yǔ)義主題的概念是使用在UI控件內(nèi)鏈接的LESS參數(shù)來(lái)指示某種語(yǔ)義梳码。這意味著你可以修改或更改參數(shù)背后的值隐圾，并了解哪些控件或語(yǔ)義外觀會(huì)受到影響。例如掰茶，輸入控件的所有主題參數(shù)（例如輸入字段暇藏，單選按鈕，復(fù)選框等）已組合在一起并包含單詞“field”濒蒋。同樣盐碱，列表和表格（背景，分隔符等）的所有顏色參數(shù)都已組合在一起沪伙，并包含單詞“l(fā)ist”瓮顽。 可以在主題設(shè)計(jì)器中查看這些名稱(chēng)。

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

例如围橡，通過(guò)定義諸如“按鈕背景”的語(yǔ)義顏色名稱(chēng)暖混，可以將其連接到不同的主題顏色值。 UI主題設(shè)計(jì)器將所有已更改的參數(shù)打包為自定義主題翁授，該主題可以部署在多個(gè)系統(tǒng)上拣播，并與支持Belize主題的所有應(yīng)用程序一起使用。