SAP成都C4C小李探花：淺談Fiori Design Guidelines

Jerry: 我和周帥認識不久，自去年7月SAP成都研究院Cloud for Customer(以下簡稱為C4C)開發團隊組建至今，根據這段時間和周帥愉快的合作經歷，我覺得如果把周帥比作我讀過的小說裡的一位主人公，我認為是古龍《風雲第一刀》中的主角李尋歡。

李尋歡出身名門，“一門七進士，父子三探花”，連其宿敵上官驚鴻也曾當面吐槽：“你本是三代探花，風流翰林，名第高華，天之驕子，又何苦偏偏要到這骯髒江湖中來做浪子？”

周帥也是出身名校，美國研究生畢業，在美國SAP實習過，做的也不是我們這些普通程式猿做的髒活累活，而是高大上的人機互動設計工作。

李尋歡是《風雲第一刀》書中第一高帥富。小李飛刀在百曉生兵器譜排第三，在古龍筆下“誰的刀快誰就牛逼”的江湖裡，這個排名相當於現在的福布斯全球富豪榜第三位。

書中沒有提到李尋歡師承何處，一登場他的飛刀，輕功，內力等技能就點滿了，而周帥的互動設計技能也沒有人教，是在美國大學裡自學習得。

古龍很少在書中花筆墨對人物外貌進行正面描寫，我複製一段孫小紅眼中的李尋歡：

而周帥在成都SAP研究院同事中絕對是鶴立雞群的存在，超過190的身高，我每次和他對話得仰著頭，費勁。最近周帥又換了個光頭的髮型。這個非常依賴顏值的髮型得貝克漢姆陳冠希吳彥祖這類人物才hold得住，而周帥駕馭得輕車熟路，無怪乎深受SAP成都C4C開發團隊所有女同事的喜愛。

古龍筆下的高帥富主角們身邊是不缺美人的，比如“彩蝶雙飛翼，盜帥夜留香”的楚香帥。而李尋歡作為一位濁世佳公子, 無論行至何處，一顆心始終在林詩音身上。有文為證：

而周帥，雖然漂泊了4個城市，換了3個辦公地，但始終對SAP情有獨鍾。雖然期間身處機會無數的美國Palo Alto和網際網路公司雲集的北京，周帥對SAP的摯愛從未動搖，這份堅持正如李尋歡手中永遠雕刻不完的那個林詩音的木像。

下面是周帥的正文。

---

大家好，我叫周帥，是SAP Hybris C4C團隊的一名互動設計師。我這五年常住了四個城市，換了三個辦公地，橫跨了兩個國家，就職於一家公司。

我本科和研究生學的都是工業設計專業，然而在北卡的兩年研究生學習中，我發現了互動設計比工業設計更吸引我，便選修了一些相關的課程，到處參加專業性的講座，也自學了許多相關的技能。在較短時間內完成了工業設計到互動設計的轉型。

我是2015年年底作為實習設計師加入SAP Palo Alto的，當時是在SAP Hybris C4C互動設計組實習。

由於簽證到期，於16年5月回國，在北京SAP幹了一年左右的前端開發。去年C4C在中國正式成立開發團隊之後，我作為互動設計師重返了C4C，也從北京搬來了成都。

正文：世界上一些著名的大型科技公司都有自己的設計語言(Design Language)，從最初蘋果的Human Interface Guideline(HIG), 到後來居上的谷歌 Material Design, 再到去年新鮮出爐的微軟Fluent Design。這些設計語言已經深度融入並改變了人們日常對電子裝置的使用習慣。在這些設計語言中，當然也有我們SAP獨創的設計語言：獲得過紅點設計大獎的Fiori Design。

Fiori的問世與SAP創始人之一Hasso Plattner對設計的重視有關。早在2005年，他便在史丹佛大學捐資成立了Hasso Plattner Institute(HPI) of Design, 也就是後來大名鼎鼎的d.school。d.school能在全世界率先把設計思維(Design Thinking)作為一個正式的方法論向工科學生傳授，並且Hasso積極將其融入SAP的DNA中，也是由於他看中了設計思維的發展潛力及設計的力量。現在我們普遍採用的設計先行的開發流程(Design-Led Development Process)便源於此。他當時說過SAP有些產品既不實用也不吸引客戶，而我們還在銷售它們，這在雲端計算時代行不通。這最終也促成了Fiori的誕生。

Fiori 致力於建立標準的現代化企業級使用者體驗，透過僅給客戶提供他們真正所需的內容，使他們對自己的業務有完全的掌控。這個核心目標體現在五個設計原則中：基於使用者角色，可適配不同裝置，流暢直觀的體驗，簡單和令人愉悅。

SAP Fiori 1.0 是在2013年正式推出的，一經面世便備受關注，並很快應用在了SAPS/4HANA, Success Factors, Ariba移動端以及C4C等解決方案中。所謂的Fiori 1.0是指所使用的SAP UI5控制元件版本介於1.26到.1.38之間的樣式，大概長下面這個樣子????。

而從2016年10月開始，控制元件版本升到1.40之後，Fiori正式進入了2.0時代。畫風更加唯美的同時，也進一步增強了靈活性和空間的利用。比如使用者處理主線任務的可以兼顧追蹤其他區域的動態，提升了導航特性，透過”viewport”可以做到跨介面互動，以及可以跨屏檢視個人設定等等。因為本文是通識介紹，所以在此就不詳細介紹設計的細節了。

Fiori是SAP的Global Design團隊打造的設計語言，像是一個總綱，提供整體的原則及使用規範層面上的指導，但不針對具體的某個產品。

所以我們C4C成都組所屬的SAP C4C 產品線就擁有一支專屬的設計團隊。團隊內部還細分為針對業務的設計師，針對框架的設計師，視覺設計師和使用者研究可用性測試的設計師。大部分設計師在矽谷，有三個在班加羅爾，我一個在成都，是針對框架的設計師。

上圖是C4C產品現在的主頁，乍一看是不是像極了Fiori 1.0介面？沒錯，作為SAP家族重要成員之一，C4C的確使用了大量的Fiori標準控制元件，這樣能確保我們的產品與眾多其他SAP產品保持樣式的一致性，從而令使用者對SAP擁有更統一的認知。然而由於一些特有的業務場景需要，C4C也有很多自己增強的控制元件。比如上圖左側黑色的導航列表，就是繼承了標準控制元件的C4C特有控制元件。這麼做可以進一步豐富了產品的特性，但同時也增加了日後維護成本。比如我們最近在做的主題升級，開發人員和設計師就耗費了很大精力對控制元件逐個定位並修改樣式。我們設計團隊也意識到了這個問題，現在正在組織編寫C4C自己的設計規範，把C4C產品裡所有使用到的控制元件都囊括在內，與UI5標準控制元件清晰的區分開。設計規範也將詳細規定何時何地使用何種控制元件，並提供詳細視覺設計稿，以便開發人員準確理解，避免歧義。

我們內部把這個介面叫做RUI(Responsive User Interface)，因為它可以適配手機，平板，筆記本和桌上型電腦，也可以同時在app和瀏覽器上使用。

C4C大概是在2015年逐漸採用RUI設計的，那麼C4C在此之前長什麼樣呢？請看下圖。

是不是一股復古風撲面而來？我們內部管它叫UX3或者html5。因為它使用的是html5框架，因此不支援app端的使用。雖然不如RUI好看，但目前它的配置功能比RUI要齊全，所以很多客戶現在還在使用這個版本。不過在不遠的將來，RUI會具備UX3所有的功能，而且目前我們也已停止針對UX3的新功能開發，它會逐漸的被RUI取代。而這還不是C4C最老的版本，下圖才是。

我們稱之為Silverlight，因為用的是微軟的Silverlight框架。這大概是2011-2012年C4C剛成立時的版本。而就在不久前，官宣停止對這個版本的維護，因此這個版本已經正式退出歷史舞臺。

我們用倒序的方式看了C4C的演化史，而這三個只是大階段，每個階段內都在根據客戶的反饋及我們的調研結果不停地進行UX的最佳化。而一切設計的初衷就是讓我們產品的使用者用的舒適滿意，並吸引更多的客戶購買我們的產品。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: