Uber設(shè)計(jì)總監(jiān)自述:每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

1 評(píng)論 6234 瀏覽 21 收藏 14 分鐘

產(chǎn)品發(fā)展的不同階段,需要有不同的應(yīng)對(duì)策略,所以需要不斷關(guān)注產(chǎn)品使用過(guò)程中的痛點(diǎn),不斷迭代,優(yōu)化的路上沒(méi)有止境。

今天早上,我騎著Jump自行車(chē)去到我在舊金山的辦公室。當(dāng)我寫(xiě)這篇文章的時(shí)候,曼谷的一位優(yōu)步司機(jī)正用嘟嘟車(chē)把一位乘客送回家;伯明翰一個(gè)忙碌的家庭已經(jīng)在Uber Eats上訂了晚餐;丹佛的通勤者正拿著手機(jī)在Uber Transit上購(gòu)買(mǎi)火車(chē)票;還有可能,正在讀著這篇文章的你,也正搭乘著優(yōu)步。

隨著優(yōu)步的產(chǎn)品規(guī)模和產(chǎn)品組合的不斷擴(kuò)大,我們?yōu)橹O(shè)計(jì)的變量和地區(qū)也在不斷演變。每天有超過(guò)1000萬(wàn)次的出行,我們?nèi)绾螢槊课挥脩?hù)提供積極可靠的體驗(yàn)?

答案就在我們的設(shè)計(jì)平臺(tái)。通過(guò)創(chuàng)建一個(gè)受認(rèn)可的并且把優(yōu)步的發(fā)展運(yùn)用其中的平臺(tái)系統(tǒng),我們?yōu)樵O(shè)計(jì)師提供了一套強(qiáng)大并一致的基本元素,同時(shí)讓他們能夠在這平臺(tái)上自由探索。

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

設(shè)計(jì)平臺(tái)

我們以閃電般的速度推出了優(yōu)步的應(yīng)用和服務(wù)。最初,我們的分散系統(tǒng)允許我們進(jìn)行創(chuàng)新和實(shí)驗(yàn)。這使我們有能力引入創(chuàng)新的設(shè)計(jì)模式,但它也使我們的用戶(hù)體驗(yàn)變得分散。我們意識(shí)到雖然乘客,駕駛員和食客的使用情況可能彼此截然不同,但是決定他們互動(dòng)的體驗(yàn)有存在一定的共性。通過(guò)關(guān)注這些共性,我們可以確??绠a(chǎn)品和區(qū)域的一致體驗(yàn)。

(彩云注:產(chǎn)品發(fā)展的不同階段,需要有不同的應(yīng)對(duì)策略,所以需要不斷關(guān)注產(chǎn)品使用過(guò)程中的痛點(diǎn),不斷迭代,優(yōu)化的路上沒(méi)有止境。)

如今,優(yōu)步已然成為一個(gè)平臺(tái):提供的各種服務(wù)都融入到一個(gè)統(tǒng)一的生態(tài)系統(tǒng)中,這個(gè)生態(tài)系統(tǒng)的優(yōu)勢(shì)在于使得這些服務(wù)更好地互連。隨著平臺(tái)的發(fā)展,我們的大規(guī)模設(shè)計(jì)流程也在不斷發(fā)展。

我們需要能夠幫助設(shè)計(jì)師保持同步的工具,公共設(shè)計(jì)庫(kù)可以為他們提供不斷增長(zhǎng)的學(xué)習(xí)內(nèi)容,以及識(shí)別和應(yīng)用我們的模式以實(shí)現(xiàn)各種用戶(hù)體驗(yàn)的方法。

這套系統(tǒng)必須能夠在不破壞用戶(hù)熟悉的體驗(yàn)情況下引入創(chuàng)新。

基礎(chǔ)設(shè)計(jì)系統(tǒng)

通過(guò)為設(shè)計(jì)打造一個(gè)堅(jiān)實(shí)的地基,我們構(gòu)建了一個(gè)靈活的系統(tǒng),使設(shè)計(jì)師能夠自由探索,同時(shí)保持核心一致性和質(zhì)量。

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

優(yōu)步設(shè)計(jì)系統(tǒng)的基礎(chǔ)元素

在2018年,我們創(chuàng)建了一個(gè)Web React庫(kù),并將其作為Base Web開(kāi)源項(xiàng)目發(fā)布給公眾。我們將其稱(chēng)為“基礎(chǔ)”,因?yàn)樗鼘?zhuān)注于基礎(chǔ)知識(shí),例如:排版、顏色、網(wǎng)格和圖標(biāo),以及按鈕,列表和控件等基本元素。今天,它已成為我們所有產(chǎn)品的UI框架。

(彩云注:設(shè)計(jì)庫(kù)以前端框架的形式存在很實(shí)用,類(lèi)似lottie這種解決方案,直接將效果轉(zhuǎn)變?yōu)榇a,更容易落地。)

設(shè)計(jì)師不應(yīng)該只是根據(jù)設(shè)計(jì)系統(tǒng)檢查他們的工作,而應(yīng)該將其與工作流程相結(jié)合。

設(shè)計(jì)系統(tǒng)是拼圖的第一塊,而不是最后一塊,目的是讓設(shè)計(jì)更高效,同時(shí)保持高標(biāo)準(zhǔn)和一致性。這就是為什么我們認(rèn)為“基礎(chǔ)”簡(jiǎn)單易行。它有四種字體類(lèi)別,三種主要顏色:白色,黑色和強(qiáng)調(diào)色,以及五種基于四像素網(wǎng)格的核心尺寸。

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

這就像玩樂(lè)高:基礎(chǔ)積木可以構(gòu)成很多不同的結(jié)構(gòu)?;A(chǔ)積木不會(huì)改變,但建造者使用它來(lái)創(chuàng)造,釋放其潛力。雖然這些組件構(gòu)成了底層效果,但它們也可以通過(guò)樣式覆蓋進(jìn)行很大程度上的自定義,并且可以通過(guò)多種不同方式進(jìn)行配置。

將我們的設(shè)計(jì)統(tǒng)一到一個(gè)系統(tǒng)可以讓思考超出視覺(jué)范疇。在Uber進(jìn)行設(shè)計(jì)首先要認(rèn)識(shí)到虛擬和現(xiàn)實(shí)世界如何相互作用,以及我們的功能體驗(yàn)如何影響用戶(hù)行為和我們的社會(huì)——這是我們所說(shuō)的設(shè)計(jì)模式。清晰描繪的設(shè)計(jì)系統(tǒng)和支持工具不僅有助于設(shè)計(jì)師避免在 “移動(dòng)像素” 時(shí)浪費(fèi)時(shí)間,而且可以讓他們專(zhuān)注于識(shí)別這些模式并在現(xiàn)實(shí)世界中做出有積極影響的設(shè)計(jì)。

(彩云注:只有釋放了視覺(jué)思考的局限,才能更好地從本質(zhì)問(wèn)題上去思考設(shè)計(jì)的意義,所能帶來(lái)的價(jià)值,而不只是把時(shí)間花在界面元素是否對(duì)齊這種問(wèn)題上,這些應(yīng)該交給工具去處理。)

文檔和資源管理

設(shè)計(jì)語(yǔ)言的簡(jiǎn)單性需要擴(kuò)展到它的分布和維護(hù)方式。

設(shè)計(jì)師是習(xí)慣性生物,當(dāng)經(jīng)常因?yàn)樾枰诟鞣N雜亂的文件中找參考文檔時(shí),思維被打斷可不是一件好事。

在過(guò)去,我們做了一個(gè)專(zhuān)門(mén)放設(shè)計(jì)規(guī)范的一個(gè)內(nèi)部網(wǎng)站,但每次需要去另一個(gè)地方查東西顯得非常麻煩,而且維護(hù)起來(lái)也比較困難。而現(xiàn)在,我們將文檔直接寫(xiě)入了工具中。

Figma擁有強(qiáng)大的協(xié)作功能,所以我們將其作為主要的設(shè)計(jì)軟件。因?yàn)檫@意味著我們的工作文件僅在線上操作,所以我們可以一起維護(hù)一份最新設(shè)計(jì)文檔資源。我們管理一個(gè)更加全面的庫(kù),可以在這里發(fā)布和更新UI組件,還可以編寫(xiě)支持規(guī)范,構(gòu)建可行和不可行的清單,并給出明確示例。實(shí)時(shí)在線文檔的一個(gè)主要優(yōu)點(diǎn)是我們只需要維護(hù)一個(gè)文件——設(shè)計(jì)師可以在一個(gè)地方找到他們的全部所需。

(彩云注:云端的協(xié)作能力是未來(lái)發(fā)展趨勢(shì),本地文件管理非常不便于團(tuán)隊(duì)化協(xié)作,實(shí)際工作中經(jīng)常容易因?yàn)榘姹镜牟灰恢露斐稍O(shè)計(jì)不統(tǒng)一。)

從之前的版本迭代情況來(lái)看,優(yōu)步每一款產(chǎn)品和圖標(biāo)庫(kù)和圖標(biāo)風(fēng)格都有所不同。最初這種方法似乎是合理的,因?yàn)轵T手,司機(jī)和食客都有完全不同的背景。但我們意識(shí)到,我們的每一件產(chǎn)品(內(nèi)部和外部)都嚴(yán)格要有一套共同的通用性圖標(biāo)。

現(xiàn)在我們擁有統(tǒng)一的圖標(biāo),插圖和素材系統(tǒng)。優(yōu)步的設(shè)計(jì)團(tuán)隊(duì)可以提出新的要求,這些需求由一個(gè)設(shè)計(jì)團(tuán)隊(duì)專(zhuān)門(mén)完成。

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

統(tǒng)一的圖標(biāo)系 統(tǒng)

我們的設(shè)計(jì)過(guò)程并不止于創(chuàng)造:從接收請(qǐng)求到提供訪問(wèn),整個(gè)用戶(hù)體驗(yàn)過(guò)程都經(jīng)過(guò)深思熟慮。

(彩云注:設(shè)計(jì)的價(jià)值在于體驗(yàn)過(guò)程中的每一個(gè)觸點(diǎn)上,不局限于視覺(jué)是提升設(shè)計(jì)能力的一種落地方式。)

我們的素材被各種具有特定需求的業(yè)務(wù)所使用,包括產(chǎn)品設(shè)計(jì),營(yíng)銷(xiāo)和工程。為了節(jié)省資源并優(yōu)化我們的工作流程,我們創(chuàng)建了差異化的訪問(wèn)點(diǎn)來(lái)滿(mǎn)足這些需求,同時(shí)維護(hù)一個(gè)系統(tǒng)。使用Figma的設(shè)計(jì)師可以直接在共享庫(kù)中訪問(wèn)我們的矢量素材。我們?yōu)槊恳粋€(gè)組件加上關(guān)鍵字標(biāo)簽,使得資源能夠被快速搜索。

市場(chǎng)部人員并不總是熟悉像Figma這樣的設(shè)計(jì)工具;他們大多需要PNG。我們做了一個(gè)超快的內(nèi)部網(wǎng)站,通過(guò)在原始組件中添加的關(guān)鍵字,實(shí)現(xiàn)快速查找,并可直接從Figma文件中提取圖像。這樣,即使不熟悉設(shè)計(jì)軟件的人也可以找到他們需要的素材。

(彩云注:為這套體系中的每一位不同用戶(hù),思考他們的痛點(diǎn),實(shí)現(xiàn)價(jià)值的最大化,同時(shí)也能讓這套設(shè)計(jì)系統(tǒng)更好的落地。)

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

我們已經(jīng)實(shí)施了差異化的渠道來(lái)分發(fā)我們的圖標(biāo)和插圖

服務(wù)于人的平臺(tái)

組件,設(shè)計(jì)系統(tǒng)和工具,只有在人們熟悉后,它們才能產(chǎn)生價(jià)值。

經(jīng)過(guò)幾年不同方法的實(shí)踐,我們了解到圍繞系統(tǒng)發(fā)展的社區(qū)才是創(chuàng)造和保持動(dòng)力的關(guān)鍵。

Uber設(shè)計(jì)總監(jiān)Marco Paglia自述,每天1000萬(wàn)次出行背后的設(shè)計(jì)智慧

我們?cè)O(shè)計(jì)了一個(gè)叫DesignKit的小工具,它是一個(gè)簡(jiǎn)單的Mac OS菜單欄擴(kuò)展,使設(shè)計(jì)師可以快速訪問(wèn)我們的工具。我們可以動(dòng)態(tài)更新DesignKit的內(nèi)容,以便始終能夠呈現(xiàn)出最新的相關(guān)內(nèi)容。其中一個(gè)最方便的功能就是能夠發(fā)送本地推送通知。電子郵件和新聞稿實(shí)際上并不能保證在設(shè)計(jì)系統(tǒng)中進(jìn)行簡(jiǎn)短,有效的更新,而且電子郵件的數(shù)量往往非常龐大。因?yàn)橛辛薉esignKit,我們可以快速推送更新,而不會(huì)讓設(shè)計(jì)師因?yàn)闊o(wú)關(guān)溝通而錯(cuò)過(guò)。

毫無(wú)疑問(wèn),工具本身不能完成設(shè)計(jì)。

設(shè)計(jì)最終通過(guò)協(xié)作,討論,經(jīng)驗(yàn)和努力工作來(lái)實(shí)現(xiàn)。為了密切關(guān)注產(chǎn)品設(shè)計(jì)師正在做什么,我們會(huì)一絲不茍地去分配時(shí)間,例如給出設(shè)計(jì)評(píng)價(jià),還有參加1v1會(huì)議,研討會(huì)以及許多其他正式和臨時(shí)場(chǎng)合來(lái)進(jìn)行面對(duì)面交流。

文化也起著至關(guān)重要的作用。在優(yōu)步,我們鼓勵(lì)我們的設(shè)計(jì)師放開(kāi)自己,不斷分享正在進(jìn)行的工作,并進(jìn)行協(xié)作。本著這種精神,我們的設(shè)計(jì)系統(tǒng)不是一套通過(guò)一系列門(mén)檻和控制流程強(qiáng)制執(zhí)行的規(guī)則,而是一個(gè)包容,不斷發(fā)展的生態(tài)系統(tǒng),每個(gè)人都被邀請(qǐng)參與。而參與的人越多,系統(tǒng)也會(huì)越好。

我們?cè)O(shè)計(jì)平臺(tái)的最終目標(biāo)是讓每個(gè)設(shè)計(jì)師內(nèi)容能在系統(tǒng)方面更好地思考一切——網(wǎng)格,排版,文案,動(dòng)畫(huà),可訪問(wèn)性等等。這樣,每個(gè)人都可以參與設(shè)計(jì),從共同的資源中學(xué)習(xí),并對(duì)整個(gè)公司的產(chǎn)品質(zhì)量有共同的理解。

這是一個(gè)簡(jiǎn)單的原理:隨著我們每個(gè)人提高我們的工作質(zhì)量,并通過(guò)這項(xiàng)工作幫助其他人改進(jìn),我們的體驗(yàn)將一起變得更好,我們的產(chǎn)品也將如此。

(彩云注:從把工具中的一個(gè)小的提醒功能做到極致,到保持開(kāi)放的心態(tài),樂(lè)于分享的文化,讓整個(gè)系統(tǒng)形成體系并最終服務(wù)于人,再由人在把設(shè)計(jì)價(jià)值落地,Uber設(shè)計(jì)總監(jiān)的這篇文字雖然不長(zhǎng),但個(gè)人覺(jué)得收獲很多!學(xué)習(xí)~)

 

原文:https://medium.com/uber-design/uber-design-platform-1ebff86c89e7

作者:Marco Paglia

譯者:Joyce Liang,熱愛(ài)設(shè)計(jì)的小白,努力學(xué)習(xí),努力求職。公眾號(hào):彩云譯設(shè)計(jì)

本文由 @Joyce Liang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 想跟著B(niǎo)AT大咖老師學(xué)習(xí)更多系統(tǒng)高階產(chǎn)品知識(shí)嗎?
    在【產(chǎn)品總監(jiān)修煉之道】,四位來(lái)自騰訊、百度的資深總監(jiān)級(jí)導(dǎo)師,將和你面對(duì)面分享高階產(chǎn)品必備的系統(tǒng)知識(shí),幫你掌握更加全面的產(chǎn)品專(zhuān)業(yè)知識(shí)和團(tuán)隊(duì)管理思路……

    想了解更多詳情?立即戳>>http://996.pm/z4bLB
    也快可以聯(lián)系KK進(jìn)行咨詢(xún)哦~微信/TEL:13043462422

    PS:除了咨詢(xún)問(wèn)題,還能領(lǐng)取【產(chǎn)品總監(jiān)課程學(xué)習(xí)筆記】! ??

    來(lái)自廣東 回復(fù)