摘要：李尋歡是風云第一刀書中第一高帥富。設計規范也將詳細規定何時何地使用何種控件，并提供詳細視覺設計稿，以便開發人員準確理解，避免歧義。而就在不久前，官宣停止對這個版本的維護，因此這個版本已經正式退出歷史舞臺。

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的優化。而一切設計的初衷就是讓我們產品的用戶用的舒適滿意，并吸引更多的客戶購買我們的產品。