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

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

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

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

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

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

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

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

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

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

下面是周帥的正文。

*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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