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

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

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

周帥也是出身名校，美國研究生畢業(yè)，在美國SAP實(shí)習(xí)過，做的也不是我們這些普通程序猿做的臟活累活，而是高大上的人機(jī)交互設(shè)計(jì)工作。

李尋歡是《風(fēng)云第一刀》書中第一高帥富。小李飛刀在百曉生兵器譜排第三，在古龍筆下“誰的刀快誰就牛逼”的江湖里，這個排名相當(dāng)于現(xiàn)在的福布斯全球富豪榜第三位。

書中沒有提到李尋歡師承何處，一登場他的飛刀，輕功，內(nèi)力等技能就點(diǎn)滿了，而周帥的交互設(shè)計(jì)技能也沒有人教，是在美國大學(xué)里自學(xué)習(xí)得。

古龍很少在書中花筆墨對人物外貌進(jìn)行正面描寫，我復(fù)制一段孫小紅眼中的李尋歡：

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

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

而周帥，雖然漂泊了4個城市，換了3個辦公地，但始終對SAP情有獨(dú)鐘。雖然期間身處機(jī)會無數(shù)的美國Palo Alto和互聯(lián)網(wǎng)公司云集的北京，周帥對SAP的摯愛從未動搖，這份堅(jiān)持正如李尋歡手中永遠(yuǎn)雕刻不完的那個林詩音的木像。

下面是周帥的正文。

*

大家好，我叫周帥，是SAP Hybris C4C團(tuán)隊(duì)的一名交互設(shè)計(jì)師。我這五年常住了四個城市，換了三個辦公地，橫跨了兩個國家，就職于一家公司。

我本科和研究生學(xué)的都是工業(yè)設(shè)計(jì)專業(yè)，然而在北卡的兩年研究生學(xué)習(xí)中，我發(fā)現(xiàn)了交互設(shè)計(jì)比工業(yè)設(shè)計(jì)更吸引我，便選修了一些相關(guān)的課程，到處參加專業(yè)性的講座，也自學(xué)了許多相關(guān)的技能。在較短時間內(nèi)完成了工業(yè)設(shè)計(jì)到交互設(shè)計(jì)的轉(zhuǎn)型。

我是2015年年底作為實(shí)習(xí)設(shè)計(jì)師加入SAP Palo Alto的，當(dāng)時是在SAP?Hybris C4C交互設(shè)計(jì)組實(shí)習(xí)。

由于簽證到期，于16年5月回國，在北京SAP干了一年左右的前端開發(fā)。去年C4C在中國正式成立開發(fā)團(tuán)隊(duì)之后，我作為交互設(shè)計(jì)師重返了C4C，也從北京搬來了成都。

正文：世界上一些著名的大型科技公司都有自己的設(shè)計(jì)語言(Design Language)，從最初蘋果的Human Interface Guideline(HIG),?到后來居上的谷歌?Material Design,?再到去年新鮮出爐的微軟Fluent Design。這些設(shè)計(jì)語言已經(jīng)深度融入并改變了人們?nèi)粘﹄娮釉O(shè)備的使用習(xí)慣。在這些設(shè)計(jì)語言中，當(dāng)然也有我們SAP獨(dú)創(chuàng)的設(shè)計(jì)語言：獲得過紅點(diǎn)設(shè)計(jì)大獎的Fiori Design。

Fiori的問世與SAP創(chuàng)始人之一Hasso Plattner對設(shè)計(jì)的重視有關(guān)。早在2005年，他便在斯坦福大學(xué)捐資成立了Hasso Plattner Institute(HPI) of Design,?也就是后來大名鼎鼎的d.school。d.school能在全世界率先把設(shè)計(jì)思維(Design Thinking)作為一個正式的方法論向工科學(xué)生傳授，并且Hasso積極將其融入SAP的DNA中，也是由于他看中了設(shè)計(jì)思維的發(fā)展?jié)摿霸O(shè)計(jì)的力量。現(xiàn)在我們普遍采用的設(shè)計(jì)先行的開發(fā)流程(Design-Led Development Process)便源于此。他當(dāng)時說過SAP有些產(chǎn)品既不實(shí)用也不吸引客戶，而我們還在銷售它們，這在云計(jì)算時代行不通。這最終也促成了Fiori的誕生。

Fiori?致力于建立標(biāo)準(zhǔn)的現(xiàn)代化企業(yè)級用戶體驗(yàn)，通過僅給客戶提供他們真正所需的內(nèi)容，使他們對自己的業(yè)務(wù)有完全的掌控。這個核心目標(biāo)體現(xiàn)在五個設(shè)計(jì)原則中：基于用戶角色，可適配不同設(shè)備，流暢直觀的體驗(yàn)，簡單和令人愉悅。

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

而從2016年10月開始，控件版本升到1.40之后，F(xiàn)iori正式進(jìn)入了2.0時代。畫風(fēng)更加唯美的同時，也進(jìn)一步增強(qiáng)了靈活性和空間的利用。比如用戶處理主線任務(wù)的可以兼顧追蹤其他區(qū)域的動態(tài)，提升了導(dǎo)航特性，通過”viewport”可以做到跨界面交互，以及可以跨屏查看個人設(shè)置等等。因?yàn)楸疚氖峭ㄗR介紹，所以在此就不詳細(xì)介紹設(shè)計(jì)的細(xì)節(jié)了。

Fiori是SAP的Global Design團(tuán)隊(duì)打造的設(shè)計(jì)語言，像是一個總綱，提供整體的原則及使用規(guī)范層面上的指導(dǎo)，但不針對具體的某個產(chǎn)品。

所以我們C4C成都組所屬的SAP C4C?產(chǎn)品線就擁有一支專屬的設(shè)計(jì)團(tuán)隊(duì)。團(tuán)隊(duì)內(nèi)部還細(xì)分為針對業(yè)務(wù)的設(shè)計(jì)師，針對框架的設(shè)計(jì)師，視覺設(shè)計(jì)師和用戶研究可用性測試的設(shè)計(jì)師。大部分設(shè)計(jì)師在硅谷，有三個在班加羅爾，我一個在成都，是針對框架的設(shè)計(jì)師。

上圖是C4C產(chǎn)品現(xiàn)在的主頁，乍一看是不是像極了Fiori 1.0界面？沒錯，作為SAP家族重要成員之一，C4C的確使用了大量的Fiori標(biāo)準(zhǔn)控件，這樣能確保我們的產(chǎn)品與眾多其他SAP產(chǎn)品保持樣式的一致性，從而令用戶對SAP擁有更統(tǒng)一的認(rèn)知。然而由于一些特有的業(yè)務(wù)場景需要，C4C也有很多自己增強(qiáng)的控件。比如上圖左側(cè)黑色的導(dǎo)航列表，就是繼承了標(biāo)準(zhǔn)控件的C4C特有控件。這么做可以進(jìn)一步豐富了產(chǎn)品的特性，但同時也增加了日后維護(hù)成本。比如我們最近在做的主題升級，開發(fā)人員和設(shè)計(jì)師就耗費(fèi)了很大精力對控件逐個定位并修改樣式。我們設(shè)計(jì)團(tuán)隊(duì)也意識到了這個問題，現(xiàn)在正在組織編寫C4C自己的設(shè)計(jì)規(guī)范，把C4C產(chǎn)品里所有使用到的控件都囊括在內(nèi)，與UI5標(biāo)準(zhǔn)控件清晰的區(qū)分開。設(shè)計(jì)規(guī)范也將詳細(xì)規(guī)定何時何地使用何種控件，并提供詳細(xì)視覺設(shè)計(jì)稿，以便開發(fā)人員準(zhǔn)確理解，避免歧義。

我們內(nèi)部把這個界面叫做RUI(Responsive User Interface)，因?yàn)樗梢赃m配手機(jī)，平板，筆記本和臺式機(jī)，也可以同時在app和瀏覽器上使用。

C4C大概是在2015年逐漸采用RUI設(shè)計(jì)的，那么C4C在此之前長什么樣呢？請看下圖。

是不是一股復(fù)古風(fēng)撲面而來？我們內(nèi)部管它叫UX3或者h(yuǎn)tml5。因?yàn)樗褂玫氖莌tml5框架，因此不支持app端的使用。雖然不如RUI好看，但目前它的配置功能比RUI要齊全，所以很多客戶現(xiàn)在還在使用這個版本。不過在不遠(yuǎn)的將來，RUI會具備UX3所有的功能，而且目前我們也已停止針對UX3的新功能開發(fā)，它會逐漸的被RUI取代。而這還不是C4C最老的版本，下圖才是。

我們稱之為Silverlight，因?yàn)橛玫氖俏④浀腟ilverlight框架。這大概是2011-2012年C4C剛成立時的版本。而就在不久前，官宣停止對這個版本的維護(hù)，因此這個版本已經(jīng)正式退出歷史舞臺。

我們用倒序的方式看了C4C的演化史，而這三個只是大階段，每個階段內(nèi)都在根據(jù)客戶的反饋及我們的調(diào)研結(jié)果不停地進(jìn)行UX的優(yōu)化。而一切設(shè)計(jì)的初衷就是讓我們產(chǎn)品的用戶用的舒適滿意，并吸引更多的客戶購買我們的產(chǎn)品。