支付寶設(shè)計(jì)師的工作是什么樣的？來看這篇訪談！

編者按：今天，兩位支付寶設(shè)計(jì)師熱情的向大家展示他們的工作方式和團(tuán)隊(duì)氛圍，一起來感受大公司是怎么工作的！

△ 陳璇，支付寶UED 資深視覺設(shè)計(jì)師和體驗(yàn)設(shè)計(jì)師，目前負(fù)責(zé)支付寶首頁，應(yīng)用中心等產(chǎn)品

△ 王牧川，支付寶UED 資深交互設(shè)計(jì)師和體驗(yàn)設(shè)計(jì)師，目前負(fù)責(zé)支付寶紅包、AA收款等產(chǎn)品

工作流程

問：很多人都好奇大公司的工作流程，兩位能介紹一下嗎？

牧川：首先是需求的來源。不管是新項(xiàng)目還是改版，來源一般有兩種吧。一種是根據(jù)業(yè)務(wù)方向由老板提出的需求，另一種是輿情、用戶反饋、數(shù)據(jù)中得到的產(chǎn)品缺陷點(diǎn)。

然后把這些匯總成需求。剛開始的需求比較籠統(tǒng)，比如「我們要提高轉(zhuǎn)賬的成功率、提高轉(zhuǎn)賬筆數(shù)」這種。那產(chǎn)品經(jīng)理就需要把這些籠統(tǒng)的需求拆分成具體的改進(jìn)點(diǎn)。比如「輸入賬號流程優(yōu)化、搜索轉(zhuǎn)賬人的優(yōu)化」等等這些產(chǎn)品的語言。這些需求點(diǎn)就會交給交互設(shè)計(jì)師這邊。

之后，交互設(shè)計(jì)師和產(chǎn)品經(jīng)理一起去商討要怎么設(shè)計(jì)才能達(dá)到這么一個預(yù)期。這中間還會經(jīng)過幾個版本的修改和討論。

定方案之后會和視覺設(shè)計(jì)師一起去商討要怎么視覺呈現(xiàn)，用戶看到的東西是不是易于理解。還有使用性的問題，使用性的問題需要在開發(fā)階段再細(xì)致商討。那設(shè)計(jì)這邊給開發(fā)就是一個視覺稿和一個帶標(biāo)注的交互流程圖。

之后開發(fā)根據(jù)這兩個東西開發(fā)、上線、驗(yàn)收，所有流程完成之后才能最終呈現(xiàn)到用戶面前。

問：剛剛說老板會提需求，如果你們對老板的需求有自己的想法的時(shí)候，會如何溝通呢？

牧川：首先業(yè)務(wù)方是聽取我們意見的。有時(shí)候，其實(shí)他只是想拿一個想法和大家一起討論一下，看能不能和你討論出一個結(jié)果，而并不是我一來就要說要做成什么樣子。所以很多時(shí)候一個需求是一起討論出的結(jié)果。

問：你們溝通風(fēng)格還是很開放的。

牧川：對，是挺開放的，有什么想法可以隨時(shí)發(fā)出來。有時(shí)候還互相吐槽。

陳璇：對，相互也不會介意，因?yàn)槠鋵?shí)這是一件好事兒啊。我們會站在用戶的角度去看，如果真的看出什么問題，提出來并改掉，那不是很好嘛。

問：產(chǎn)品上線是嚴(yán)格卡著時(shí)間，還是一邊開發(fā)一邊再調(diào)整時(shí)間？

陳璇：支付寶幾乎是每個月就會有一次常規(guī)升級，不過9月5號出的這次10.1的改動比較大，花了兩個月。像之前我倆合作過「AR紅包」那個項(xiàng)目，從有這個想法到上線一共花了3個月左右的時(shí)間。

問：感覺你們好像不管作業(yè)量多還是少，都要卡點(diǎn)上線的。那得經(jīng)常加班吧？

陳璇&牧川：(毫不猶豫且異口同聲地)恩，對對。

陳璇：不過互聯(lián)網(wǎng)公司都這樣，工作方式就有點(diǎn)像我們等公交車，車來了就上車。

反饋與數(shù)據(jù)

問：支付寶用戶體量上億，你們一定經(jīng)常聽到好的或不好的聲音。兩位聽到這種聲音的時(shí)候，心理是怎么樣的？

陳璇：一般看到這些反饋，第一反應(yīng)會先判斷他是屬于哪個類型的用戶。然后就是這種聲音的數(shù)量有多少。有的反饋是很多用戶身上也有可能出現(xiàn)的，但有的反饋，它的出現(xiàn)是某個用戶的特定個人行為下才會出現(xiàn)的問題。所以就是判斷這是個人行為還是普遍的行為。

牧川：對，而且有的時(shí)候用戶不理解，要看他們是從哪個角度出發(fā)的。有的時(shí)候用戶覺得我都用習(xí)慣了，你給我改了，很不方便。但有時(shí)我們會從業(yè)務(wù)的方面考慮，而用戶想不到后面的這些。

陳璇：我們要看用戶反饋背后的真正問題是什么。比如有的用戶不了解視覺、交互、產(chǎn)品這些，他會說「丑」。那你就要看他說的是真的是視覺的丑呢、還是交互感受丑呢、還是廣告呈現(xiàn)的太多讓人覺得丑呢。就比如這次的10.1的首頁改版。上線之后就有一些人說「丑」。但實(shí)際上大家覺得是我需要的功能不在首頁了，找不著了。但大家把自己的這種感受只是用一個「丑」字來形容。所以看到反饋后需要去探究一下。

問：除了反饋，也會看一些定量的數(shù)據(jù)嗎？

牧川：也會看。比如我之前做AA付款的時(shí)候，我們看流量是從哪里進(jìn)來的。有的是在聊天群里的發(fā)起，有的是來自首頁的發(fā)起。還有就是AA也有很多種類型，那我們就看我們的用戶主要用的是哪種類型，使用頻次如何。后來我發(fā)現(xiàn)這個功能在周一到周五使用的最頻繁，周末使用頻度一下就低了。那我就可以合理的推測產(chǎn)品使用場景主要是上班的或者學(xué)生，吃飯的時(shí)候使用的比較多。那當(dāng)我在做設(shè)計(jì)的時(shí)候就可以圍繞這種場景思考。有了數(shù)據(jù)就可以幫我們排除一些不符合事實(shí)的推測。

交互設(shè)計(jì)師牧川個人采訪

問: 聊完需求我們聊聊重點(diǎn)，設(shè)計(jì)這塊。你們拿到需求后是怎么去思考并實(shí)現(xiàn)它的，這個整個過程能說說嗎？

牧川：比如這次AA改版。產(chǎn)品經(jīng)理給我的需求目的性很強(qiáng)，就是把AA整個使用量提上去。他們其實(shí)也沒有特別好的主意，后來提幾個點(diǎn)。首先錢收齊的成功率問題。

之前存在的問題是我收錢的信息發(fā)出去了，但我不知道我這錢有沒有收齊，還有就是沒收齊的話，我沒有通道渠道提醒那些該還錢的人。因?yàn)橹Ц秾毜纳缃魂P(guān)系沒有那么強(qiáng)，我給我支付寶的好友發(fā)了一個AA消息，那他可能就不會去看這個消息，不知道要去付這筆錢。那還有可能這人壓根兒就不是我支付寶好友。面對這些妨礙錢收齊成功率的問題，還有支付寶社交關(guān)系較弱的現(xiàn)實(shí)，我就想能不能換個思路，從近距離還錢的方式著手。剛剛說過我們也會看數(shù)據(jù)，我發(fā)現(xiàn)AA主要發(fā)生在周一到周五大家去聚餐的這樣一個場景下。一起吃完飯，把錢A出來，其實(shí)大部分都是面對面發(fā)生的，那就是近場，就可以考慮用掃碼收款這樣的方式去做。所以我就把我的這種想法和產(chǎn)品設(shè)計(jì)師說了，他也覺得可以從近場去走這條路。所以接下來就是去做方案。

有一個點(diǎn)就是發(fā)起收款后。填好金額和人數(shù)后，一張收款卡片之類就會發(fā)到聊天群里。現(xiàn)在填好之后會先出一個二維碼界面，大家哪怕不是好友也可以面對面收款。

△ AA收款主要使用界面

問：在給出方案的過程中，作為交互設(shè)計(jì)師，你做了哪些嘗試？用了什么工具呢？

牧川：當(dāng)時(shí)實(shí)現(xiàn)的時(shí)候遇到了一個問題。這個二維碼界面，我第一次進(jìn)來是為了收款，所以需要二維碼。等我再進(jìn)來的時(shí)候可能是想確認(rèn)之前的款收沒收齊。這時(shí)候二維碼就不太需要了，而且二維碼占據(jù)很大空間，我們就在想能不能把它收起來。那具體怎么收，還有收起來之后用戶能不能理解。這時(shí)候我們就會做高保真原型。像這些細(xì)節(jié)點(diǎn)上ProtoPie這款工具就幫了我們不少忙。之前我們可能就拿兩個靜態(tài)的圖去對比，然后向用戶描述說它會怎么變化，問「你覺得哪個好」。那用戶沒有實(shí)際操作過，只能憑想象，這時(shí)候的很多反饋是想當(dāng)然的。用了ProtoPie之后，我就可以高度還原我的想法，做成可交互的，然后拿給用戶還有老板去看。老板可以兩種方案對比著，上手嘗試然后給出他的想法。我們?nèi)ピO(shè)計(jì)的時(shí)候肯定會有一些是自己主觀的想法，覺得用戶應(yīng)該能理解，但你自己如果不去嘗試，很多問題是發(fā)現(xiàn)不了的。

△ 牧川使用ProtoPie製作的高保真原型

問：那你們拿著做的交互原型是怎么去找人測試的？還是就給產(chǎn)品設(shè)計(jì)師看？

牧川：不是，我們就拿著它到處找人。ProtoPie支持原型文件離線儲存在手機(jī)上，我們就拿著手機(jī)隨便找人過來問他們的感受。很隨機(jī)的。反而越去找和這個項(xiàng)目不相關(guān)的人去看越有效果。

問：你這個原型已經(jīng)還原度很高了，里面有視覺的參與嗎？

牧川：我做原型的時(shí)候，會告訴視覺我的想法，然后問問視覺我這個二維碼放在什么位置比較好，聽取他的建議，但不會真正輸出很正式的視覺稿。

陳璇：其實(shí)有些東西，他不需要視覺介入。比如他剛剛說的二維碼，都有現(xiàn)成的模板，拉控件就可以解決的，所以視覺已經(jīng)出來了。

△ 用原型和視覺設(shè)計(jì)師商討呈現(xiàn)效果

問：你們的原型會上顏色嗎？我聽說有的公司故意不讓交互設(shè)計(jì)師上顏色，怕會干擾到視覺。

陳璇：公司可能都不一樣吧。之前在騰訊的時(shí)候出的都是黑白稿。我們內(nèi)部也不太一樣。有的時(shí)候視覺如果沒有參與需求會議，而交互覺得有些點(diǎn)想強(qiáng)調(diào)突出，但面積已經(jīng)解決不了。那交互就會故意填上染色，告訴視覺那里很重要。

視覺設(shè)計(jì)師陳璇個人采訪

問：陳璇也來說說作為視覺設(shè)計(jì)師，拿到需求的時(shí)候是怎么思考并找到解決方案的吧。我們聊聊這次10.1支付寶首頁改版吧。

陳璇：其實(shí)，首頁改版這個...我是沒有任何反抗能力的，哈哈。

當(dāng)時(shí)遇到的一個問題就是和其他業(yè)務(wù)部門的合作。因?yàn)槭醉撌瞧渌鱾€業(yè)務(wù)透出的一個地方，那每個業(yè)務(wù)都有自己透出的一個形態(tài)。如果把大家各自原有的形態(tài)匯總在一個地方，看著就會很亂。那怎么解決這個問題呢，從視覺上思考就是，統(tǒng)一視覺風(fēng)格。比如淘寶購物，必須要把圖標(biāo)的背景去掉。

問：這個統(tǒng)一的模板是你做的嗎？

陳璇：是的。

問：這個模板制定的思路是什么？

陳璇：其實(shí)就是試，像排列組合一樣。這個階段需要做動態(tài)的交互原型，工具和牧川一樣也是ProtoPie。做出多個方案之后先自己主觀判斷一下。用研團(tuán)隊(duì)也會通過調(diào)研比較客觀的給個結(jié)果。當(dāng)然，這中間還有老板的主觀判斷。

問：你出的方案如果團(tuán)隊(duì)里其他人有不同聲音，你怎么處理？

陳璇：都會參考的。其實(shí)開發(fā)人員的反饋，都是比較客觀的。如果他說的有道理肯定會參考。還有就是要探尋其他人這個意見背后的一些東西，要弄清楚他是在哪種考慮下提出的這種意見的。

分工與協(xié)作

問：一般大公司里，每人手里會同時(shí)有幾個項(xiàng)目在進(jìn)行。協(xié)作的時(shí)候?qū)δ阒匾捻?xiàng)目對別人來說不一定。那就很容易出現(xiàn)「沒時(shí)間」「等我做完這個再說」這種被拒絕的情況。你們有出現(xiàn)過嗎？怎么解決的？

陳璇：有。那我一般就會先自己往前走一步看看，這樣也有利于團(tuán)隊(duì)整體的進(jìn)度。

問：這種情況經(jīng)常發(fā)生嗎？

牧川：一個人身上經(jīng)常發(fā)生。可能你一個視覺或交互設(shè)計(jì)師對應(yīng)好幾個項(xiàng)目。每個項(xiàng)目都說我這個著急，我就有過。一般我是先來后到的原則，最簡單。還有就是重要度，就比如品牌的需求肯定比一般的需求要高一點(diǎn)。

問：經(jīng)常能聽到有人帶著個人情緒去和團(tuán)隊(duì)談工作。導(dǎo)致溝通出現(xiàn)障礙。你們怎么看這個事。

牧川：有時(shí)候會有這種。產(chǎn)品拿一個什么東西，讓你出個方案。但其實(shí)他們自己內(nèi)部還沒決定要不要做這個，他就是自己的一個想法。那我就說讓他先在內(nèi)部討論，等你們決定要做了再拿過來。因?yàn)楫?dāng)時(shí)他的那個想法其實(shí)另一個團(tuán)隊(duì)已經(jīng)在做了，很像。我跟他說了，但他還是說要自己單做一個。沒辦法，后來和老板溝通，老板說先給他出一個吧，那就給他出了一個。后來就再也沒有消息了，就等于你給他白做了。那心里就會覺得這種產(chǎn)品經(jīng)理不靠譜，等下次再有什么需求，肯定就往后給他排了。

問：所以其實(shí)當(dāng)一個人說「我很忙」的時(shí)候，要不然就是這個事對他不重要，要不就是人對他不重要。

牧川：(很認(rèn)同地)恩，你說的這個很對。

設(shè)計(jì)師的發(fā)展

問：現(xiàn)在有很多設(shè)計(jì)師分類，交互設(shè)計(jì)師，用戶體驗(yàn)設(shè)計(jì)師等等。你們內(nèi)部是怎么去定義每個名字，怎么去分工的呢？

牧川：現(xiàn)在內(nèi)部在推的叫用戶體驗(yàn)設(shè)計(jì)師，不僅對視覺或者交互單一點(diǎn)負(fù)責(zé)。交互和視覺的臨界點(diǎn)越來越模糊，只是最后到具體動手實(shí)現(xiàn)的時(shí)候，可能我偏重做視覺，他偏重做交互。但其實(shí)我們希望的這個用戶體驗(yàn)設(shè)計(jì)師，上能夠cover產(chǎn)品，下能夠cover住交互、視覺等等，最好還能懂點(diǎn)代碼。不過這個轉(zhuǎn)化過程會很長，畢竟每個人需要一定時(shí)間去培養(yǎng)自己其他方面的能力。

陳璇：很多人覺得交互設(shè)計(jì)師要做的就是線框圖，視覺就是彩色圖。但其實(shí)在這些圖背后還有很多點(diǎn)要去關(guān)注。

問：如果讓你們排個序，你們覺得哪些能力對用戶體驗(yàn)設(shè)計(jì)師是比較重要的。

牧川：我覺得是對業(yè)務(wù)的理解，然后就是從用戶的需求中找出和產(chǎn)品的結(jié)合點(diǎn)。其實(shí)很多產(chǎn)品的不成功不一定是設(shè)計(jì)或開發(fā)怎么樣，而是產(chǎn)品本身設(shè)計(jì)或定位就出了問題。我們還是要先把產(chǎn)品的需求定下來，而不是接到需求就做需求。

陳璇：這個可能和工作的年頭也有關(guān)系。剛開始工作的時(shí)候我關(guān)注的就是好不好看，等時(shí)間長了就關(guān)注為什么我要做成這樣。這就是新手和老手的區(qū)別。

問：那你們覺得代碼重要嗎？設(shè)計(jì)師應(yīng)該學(xué)代碼嗎？

陳璇：「代碼」這個東西看你怎么去解讀。我覺得設(shè)計(jì)師應(yīng)該去了解開發(fā)是怎么實(shí)現(xiàn)你的想法的，這個邏輯必須要理解。不然你說的話開發(fā)聽不懂，他說的話你也聽不懂，那這個事就沒法搞了。還有一種解讀就是真的去編代碼，如果會也挺好的。不過更重要的是懂業(yè)務(wù)，我認(rèn)同一句話「代碼是幫助解決問題的，懂業(yè)務(wù)是去發(fā)現(xiàn)問題的，發(fā)現(xiàn)問題比解決問題更重要。」所以設(shè)計(jì)師的發(fā)展方向還是先從業(yè)務(wù)這邊開始比較好。

問：現(xiàn)在很多設(shè)計(jì)師都有危機(jī)感，AR/VR這種新的技術(shù)出現(xiàn)，還有工具的涌現(xiàn)，以及設(shè)計(jì)趨勢的變化等等。有點(diǎn)壓得設(shè)計(jì)師喘不過氣來。你們也有這種危機(jī)感嗎？來自哪里呢？

陳璇：(不假思索似地)有有。我的危機(jī)感一方面來自于后起之秀。新來的這些設(shè)計(jì)師也都很優(yōu)秀，那我如何讓自己的價(jià)值發(fā)揮出來，體現(xiàn)工作經(jīng)驗(yàn)的優(yōu)勢。找尋自己的價(jià)值，讓自己有別于他們。還有一個就是新的技術(shù)，比如AR，業(yè)務(wù)需要，但如果自己要是不懂那就尷尬了。

牧川：還有就是和一些國外設(shè)計(jì)師的差距好大，感覺他們很多都是全能型的選手。現(xiàn)在國內(nèi)的設(shè)計(jì)師有很多還是依托工具，就做自己那一攤事的那種感覺。另外我覺得設(shè)計(jì)師的話語權(quán)還是比較少吧。

陳璇：每個公司話語權(quán)也不太一樣，現(xiàn)在主要還是運(yùn)營和產(chǎn)品那邊的話語權(quán)比較多。他們代表的是商業(yè)價(jià)值，我們可能更多是為用戶考慮。我們考慮怎么樣讓用戶的聲音更多一些出來。比如首頁上的廣告條，商業(yè)上希望加上這個廣告，那用戶的角度肯定就是不想看到。那怎么權(quán)衡，這個問題是大是小，這里面話語權(quán)就會體現(xiàn)出來。

問：那你們是怎么克服這些危機(jī)感的呢？

牧川：那就是靠自己的努力了。現(xiàn)在正努力向體驗(yàn)設(shè)計(jì)師轉(zhuǎn)型。我覺得業(yè)務(wù)這邊學(xué)起來不是很難，接下來就是設(shè)計(jì)這塊的提升。要多總結(jié)吧，做一些設(shè)計(jì)的沉淀。比如你分析過程，把該做的每一步做到。之前做設(shè)計(jì)的時(shí)候可能更多的是憑感覺，或者做個簡單的調(diào)研就去設(shè)計(jì)了。那其實(shí)整個完整的設(shè)計(jì)流程都沒有走完，也沒有什么沉淀。

除了這些，剩下的時(shí)間就是多去充充電唄。現(xiàn)在我們很多內(nèi)部小組都在學(xué)習(xí)英語，翻譯國外的文章啊，還有辦講座啊什么的。

陳璇：那像我剛剛說新技術(shù)帶來的危機(jī)感，要克服的話就得多關(guān)注這方面的信息。我每天都會看36氪上的科技文章。

問：現(xiàn)在很多設(shè)計(jì)師都想轉(zhuǎn)崗。視覺轉(zhuǎn)交互，交互轉(zhuǎn)產(chǎn)品。你們有什么話想送給這些朋友嗎？

陳璇：每個人都應(yīng)該對自己有一個正確的認(rèn)識，看你對自己的定位是什么。我有朋友就是視覺轉(zhuǎn)產(chǎn)品，他對產(chǎn)品這方面還是比較敏感的。那我就是相比產(chǎn)品更適合做視覺，自己比較感性。

問：你們覺著這種轉(zhuǎn)崗方向是一個大趨勢嗎？

牧川：趨勢..我覺得產(chǎn)品經(jīng)理被淘汰才是趨勢，呵呵呵。

問：為什么這么說？

牧川：我說的這是大方向。因?yàn)槲矣X得一個公司只要有幾個非常不錯的產(chǎn)品經(jīng)理就可以了。現(xiàn)在什么人都去當(dāng)產(chǎn)品經(jīng)理，所以才把產(chǎn)品搞得亂七八糟。

問：哈哈，你這話我能寫在文章里嗎？

小明：可以可以，只要把我名匿掉就可以^o^ (小編：隨了你的愿)

工具

問：剛剛說很多時(shí)候使用ProtoPie做高保真交互原型，什么時(shí)候會用到這個工具？

陳璇：我們從去年開始就在使用。主要是在驗(yàn)證自己想法還有做用研的時(shí)候。因?yàn)槲覀兿胱層脩粽嬲娜ンw驗(yàn)使用場景，靜態(tài)稿肯定是不夠的。這時(shí)候就需要高保真的Demo，而ProtoPie就能幫我們大忙。它比較適合不會代碼又想做高保真交互的設(shè)計(jì)師。

問：那之前你們還用過什么交互工具，覺得ProtoPie和他們的區(qū)別是什么？

陳璇：之前我用過Principle。我剛從Principle轉(zhuǎn)到ProtoPie的時(shí)候，覺得ProtoPie是比較理性的工具。但后來用著用著就發(fā)現(xiàn)做那些比較大項(xiàng)目的時(shí)候，ProtoPie會更方便。因?yàn)樗軒臀野秧?xiàng)目分成一個個的場景，管理起來很方便，但Principle做不到。

問：現(xiàn)在工具那么多，你們選擇工具的標(biāo)準(zhǔn)是什么？

陳璇：我一般先看網(wǎng)上評價(jià)吧。不然花精力學(xué)完了發(fā)現(xiàn)不怎么樣，那就挺麻煩的。

牧川：還有就是和其他軟件的兼容吧。像可以直接把Sketch導(dǎo)入到ProtoPie這樣的，和其他軟件的連接性。

神器推薦→?《簡單好上手！幫你快速做出高質(zhì)量交互原型的ProtoPie》

招聘

問：最近我看到你們團(tuán)隊(duì)在招人，你們..

牧川：(激動的大喊)招啊，瘋狂招，快來吧！！

問：你們招的的是什么崗位？

牧川：我們希望找交互和視覺設(shè)計(jì)師，招很多很多，讓大家快來加入我們吧！

問：兩位希望新來的設(shè)計(jì)師是怎樣的一個搭檔？

牧川：我希望是有想法的年輕人進(jìn)來，能帶來更多碰撞，有精力在加班時(shí)一起熬夜，下班后還能有一起喝喝酒聊聊天的。

優(yōu)設(shè)人氣專題

優(yōu)設(shè)獨(dú)家專訪?|?iPhone X 學(xué)習(xí)指南丨在線摳圖神器丨靈感大全

免費(fèi)圖庫丨配色神器丨讀書計(jì)劃丨PPT 神器丨魯班設(shè)計(jì)

iOS 11 學(xué)習(xí)指南丨人工智能丨PS 教程丨AI 教程丨C4D 教程

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com