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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: