支付寶互動與 UI 設計師專訪：如何打造市場所需的產品

陳璇
支付寶 UED 資深視覺設計師和體驗設計師，目前負責 支付寶 首頁、應用中心等產品。

王牧川
支付寶 UED 資深互動設計師和體驗設計師，目前負責支付寶紅包、AA收款等產品。

 

支付寶 團隊的工作流程

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

牧川：首先是需求的來源，不管是新項目還是改版，來源一般有兩種吧。一種是根據業務方向（由老闆提出），另一種是輿情、用戶反饋、數據中得到的產品問題點，然後把這些匯總成需求。
剛開始的需求比較籠統，比如 “我們要提高轉賬的成功率”、“提高轉賬筆數” 等。接著，產品經理就需要把這些籠統的需求拆分成具體的改進點，如 “輸入賬號流程優化’ ‘搜索轉賬人的優化’等等這些產品的語言。這些需求點就會交給互動設計師這邊。 之後，互動設計師和產品經理一起去商討要怎麽設計才能達到預期。這中間還會經過幾個版本的修改和討論。 定方案之後會和視覺設計師一起去商討如何以視覺呈現 ，用戶看到的東西是不是易於理解。另外還有使用性的問題，使用性的問題需要在開發階段再細致商討。那設計這邊給開發就是一個視覺稿 和一個帶標註的交互流程圖。 之後開發根據這兩個東西 開發、上線、驗收 ，驗收之後才能最終呈現到用戶面前。

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

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

問：你們溝通風格還是很開放的

牧川：對，是挺開放的，有什麽想法可以隨時發出來。有時候還互相吐槽，呵呵！
陳璇：對，意見不同也不會介意，因為其實這是一件好事兒啊。我們會站在用戶的角度去看，如果真的看出什麽問題，提出來並改掉，那不是很好嘛。

問：產品上線是嚴格卡著時間，還是一邊開發一邊再調整時間？

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

問：感覺你們好像不管作業量多還是少，都要卡點上線的。那得經常加班吧？

陳璇&牧川：恩，對對（毫不猶豫且異口同聲地）
陳璇：不過互聯網公司都這樣，工作方式就有點像我們等公交車，車來了就上車。

 

反饋與數據

問：支付寶用戶量上億，你們一定經常聽到好的或不好的聲音。兩位個人聽到這種聲音的時候，心理是怎麽樣的？

陳璇：一般看到這些反饋，第一反應會先判斷他是屬於哪個類型的用戶 。然後就是這種聲音的量。有的反饋是很多用戶身上也有可能出現的，但有的反饋，它的出現是某個用戶的特定個人行為下才會出現的問題。所以就是判斷這是個人行為還是普遍的行為。
牧川：對，而且有的時候用戶不理解，要看他們是從哪個角度出發的。有的時候用戶覺得我都用習慣了，你給我改了，很不方便。但有時我們會從業務的方面考慮，而用戶想不到後面的這些。所以..有時候我就習慣了，呵呵
陳璇：我們要看用戶反饋背後的真正問題是什麽 。比如有的用戶不了解視覺、互動、產品這些名詞 ，他會說 ‘醜’。那你就要看他說的是真的是視覺的醜呢？還是互動感受不好？或是廣告呈現太多感到醜？就比如這次的 10.1 的首頁改版。上線之後就有一些人說‘醜’。但實際上大家覺得是我需要的功能不在首頁，找不著了。但大家把自己的這種感受只是用一個‘醜’字來 形容。所以看到反饋後需要去探究一下。

問：除了反饋，也會看一些定量的數據嗎?

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

 

互動設計師 – 牧川個人採訪

問：聊完需求我們聊聊設計這塊。你們拿到需求後是怎麽去思考並實現它的，這個整個過程能說說嗎?

 

牧川：比如這次 AA 改版。產品經理給我的需求目的性很強，就是把 AA 整個使用量提上去。他們其實也沒有特別好的主意，後來提幾個點。首先錢收齊的成功率問題：之前存在的問題是我收錢的訊息發出去了，但我不知道我這錢有沒有收齊，還有就是沒收齊的話，有沒有方式提醒那些該還錢的人。因為支付寶的社群關係沒有那麽強，我給支付寶的好友發了一個AA消息，那他可能就不會去看這個消息，不知道要去付這筆錢。那還有可能這人壓根兒就不是我支付寶好友。面對這些妨礙錢收齊成功率的問題，還有支付寶社群關系較弱的現實，我就想能不能換個思路，從近距離還錢的方式著手。剛剛說過我們也會看數據，我發現AA主要發生在周一到周五大家去聚餐的這樣一個場景下。一起吃完飯，把錢 A 出來，其實大部分都是面對面發生的，那就是近場，那就可以考慮用掃碼收款這樣的方式去做。所以我就 把我的這種想法和產品設計師說了，他也覺得可以從近場去走這條路。所以接下來就是去做方案。

有一個點就是發起收款後。填好金額、人數後，一張收款卡片之類就會發到聊天群裏。現在填好之後會先出一個二維碼界面，大家哪怕不是好友也可以面對面收款。

問：在給出方案的過程中，作為互動設計師，你做了哪些嘗試？用了什麽工具呢？
牧川：當時實現的時候遇到了一個問題。這個二維碼界面，我第一次進來是為了收款，所以需要二維碼。等我再進來的時候可能是想確認之前的款收沒收齊。這時候二維碼就不太需要了， 而且二維碼占據很大空間，我們就在想能不能把它收起來。那具體怎麽收，還有收起來之後用 戶能不能理解。這時候我們就會做高擬真原型。像這些細節點上 ProtoPie 這款工具就幫了我們不少忙。之前我們可能就拿兩個靜態的圖去對比，然後向用戶描述說它會怎麽變化，問‘你覺得哪個 好’。那用戶沒有實際操作過，只能憑想象，這時候的很多反饋是想當然的。用了ProtoPie 之後 ，我就可以高度還原我的想法，做成可互動的，然後拿給用戶還有老闆去看。老闆可以兩種方案對比著，然後給出他的想法。我們去設計的時候肯定會有一些是自己主觀的想法, 覺得用戶應該能理解，但你自己如果不去嘗試，很多問題是發現不了的。

 

問：那你們拿著 ProtoPie 做的互動原型是怎麽去找人測試的？還是就給產品設計師看？
牧川：不是，我們就拿著它到處找人。ProtoPie 不是支持離線儲存在手機上嘛，拿著手機隨便找人過來問他們的感受。很隨機的。反而越去找和這個項目不相關的人去看越有效果。

問：你這個原型已經還原度很高了，裡面有視覺的參與嗎?
牧川：我做原型的時候，會告訴視覺我的想法，然後問問視覺我這個二維碼放在什麽位置比較好，聽取他的建議，但不會真正輸出很正式的視覺稿。
陳璇：其實有些東西，他不需要視覺介入。比如他剛剛說的二維碼，都有現成的模板，拉控件就可以解決的，所以視覺已經出來了。

 

問：你們的原型會上顏色嗎？我聽說有的公司故意不讓互動設計師上顏色，怕會幹擾到視覺。
陳璇：每間公司可能都不一樣吧。之前在騰訊的時候出的都是黑白稿。我們內部也不太一樣。有時候視覺如果沒有參與需求會議，而互動覺得有些點想強調突出，那互動就會故意填上染色，告訴視覺那裏很重要。

 

視覺設計師 – 陳璇個人採訪

問：陳璇也來說說作為視覺設計師，拿到需求的時候是怎麽思考並找到解決方案的吧。我們聊聊這次 10.1 支付寶首頁改版吧。
陳璇：其實，首頁改版這個…我是沒有任何反抗能力的，哈哈。 當時遇到的問題有一個就是和其他業務部門的合作。因為首頁是其他各個業務透出的一個地方 ，那每個業務都有自己透出的一個形態。如果把大家各自原有的形態匯總在一個地方，看著就會很亂。那怎麽解決這個問題呢，單純從視覺上思考就是，統一視覺風格。比如淘寶購物，必須要把圖標的背景去掉。

問：這個統一的模板是你做的嗎?
陳璇：是的

問：這個模板制定的思路是什麽?
陳璇：其實就是試，像排列組合一樣。這個階段需要做動態的互動原型，工具和牧川一樣也是 ProtoPie。做出多個方案之後先自己主觀判斷一下。用研團隊也會通過調研比較客觀的給個結果。當然，這中間還有老闆的主觀判斷。

問：你出的方案如果團隊裏其他人有不同聲音，你怎麽處理？
陳璇：都會參考的。其實開發人員的反饋，都是比較客觀的。如果他說的有道理肯定會參考。還有就是要探尋其他人這個意見背後的一些東西，要弄清楚他是在哪種考慮下提出的這種意見的。

 

分工與協作

問：一般大公司裏，每人手裏會同時有幾個項目在進行。協作的時候對你重要的項目對別人來 說不一定。那就很容易出現‘沒時間’‘等我做完這個再說’這種被拒絕的情況。你們有出現過 嗎?怎麽解決的?
陳璇：有。那我一般就會先自己往前走一步看看，這樣也有利於團隊整體的進度。

問：這種情況經常發生嗎?
牧川：一個人身上經常發生。可能你一個視覺或交互設計師對應好幾個項目。每個項目都說我這個著急，我就有過。一般我是先來後到的原則，最簡單。還有就是重要度，就比如品牌的需求肯定比一般的需求要高一點。

問：我接觸的設計師也比較多，經常能聽到有人帶著個人情緒去和團隊談工作。導致溝通出現障礙。你們怎麽看這個事。
牧川：有時候會有這種。產品拿一個什麽東西，讓你出個方案。但其實他們自己內部還沒決定要不要做這個，他就是自己的一個想法。那我就說讓他先在內部討論，等你們決定要做了再拿過來。因為當時他的那個想法其實另一個團隊已經在做了，很像。我跟他說了，但他還是說要自己單做一個。沒辦法，後來和老板溝通，老板說先給他出一個吧，那就給他出了一個。後來就再也沒有消息了，就等於你給他白做了。那心裏就會覺得這種產品經理不靠譜，等下次再有什麽需求，肯定就往後給他排了。

問：呵呵，所以其實當一個人說’我很忙‘的時候，要不然就是這個事對他不重要，要不就是人 對他不重要。
牧川：(很認同地)恩，你說的這個很對。

設計師的發展

問：現在有很多設計師分類，互動設計師、用戶體驗設計師等等。你們內部是怎麽去定義每個名字，怎麽去分工的呢?
牧川：現在 內部在推的叫用戶體驗設計師 ，不僅對視覺或者互動單一點負責。互動和視覺的臨界點越來越模糊，只是最後到具體動手實現的時候，可能我偏重做視覺，他偏重做互動。但其實我們希望的這個用戶體驗設計師，上能夠 cover 產品，下能夠 cover 互動、視覺等等，最好還能懂點程式碼。不過這個轉化過程會很長，畢竟每個人需要一定時間去培養自己其他方面的能力。
陳璇：很多人覺得互動設計師要做的就是線框圖，視覺就是彩色圖。但其實在這些圖背後還有很多點要去關註。

問：如果讓你們排個序，你們覺得哪些能力對用戶體驗設計師是比較重要的。
牧川：我覺得是對業務的理解， 然後就是從用戶的需求中找出和產品的結合點 。其實很多產品的不成功不一定是設計或開發怎麽樣，而是產品本身設計或定位就出了問題。我們還是要先把產品的需求定下來，而不是接到需求就做需求。
陳璇：這個可能和工作的年頭也有關系。剛開始工作的時候我關注的就是好不好看，等時間長了就關注為什麽我要做成這樣 。這就是新手和老手的區別。

問：那你們覺得程式碼重要嗎？設計師應該學嗎？
陳璇：”程式碼“這個東西看你怎麽去解讀。我覺得設計師應該去了解開發是怎麽實現你的想法的，這個邏輯必須要理解。不然你說的話開發聽不懂，他說的話你也聽不懂，那這個事就沒法搞了。還有一種解讀就是真的去寫程式，如果會也挺好的。不過更重要的是懂業務，我認同一句話“程式碼是幫助解決問題的，懂業務是去發現問題的，發現問題比解決問題更重要。”所以設計師的發展方向還是先從業務這邊開始比較好。

問：現在很多設計師都有危機感，AR / VR 這種新的技術出現，還有工具的湧現，以及設計趨勢的變化等等。有點壓得設計師喘不過氣來。你們也有這種危機感嗎？來自那裡呢？
陳璇：（不假思索似地）有有。我的危機感一方面來自於後起之秀。他們新來的這些設計師也都很優秀，那我如何讓自己的價值發揮出來，體現工作經驗的優勢。找尋自己的價值，讓自己有別於他們。還有一個就是新的技術，比如 AR，業務需要，但如果自己要是不懂那就尷尬了。
牧川：還有就是和一些國外設計師的差距好大，感覺他們很多都是全能型的選手。現在國內的設計師有很多還是依賴工具，就做自己那一攤事的那種感覺。另外我覺得設計師的話語權還是比較少吧。
陳璇：每個公司話語權也不太一樣，現在主要還是運營和產品那邊的話語權比較多。他們代表的是商業價值，我們可能更多是為用戶考慮。我們考慮怎麽樣讓用戶的聲音更多一些出來。比如首頁上的廣告條，商業上希望加上這個廣告，那用戶的角度肯定就是不想看到。那怎麽權衡 ，這個問題是大是小，這裏面話語權就會體現出來。

問：那你們是怎麽克服這些危機感的呢？
牧川：那就是靠自己的努力了。現在正努力向體驗設計師轉型。我覺得業務這邊學起來不是很難，接下來就是設計這塊的提升。要多總結吧，做一些設計的沈澱。比如你分析過程，把該做的每一步做到。之前做設計的時候可能更多的是憑感覺，或者做個簡單的調研就去設計了。那其實整個完整的設計流程都沒有走完，也沒有什麽沈澱。除了這些，剩下的時間就是多去充充電。現在我們很多內部小組都在學習英語，翻譯國外的文章啊，還有辦講座啊什麽的。
陳璇：那像我剛剛說新技術帶來的危機感，要克服的話就得多關注這方面的信息 。我每天都會看36氪上的科技文章。

問：現在很多設計師都想轉型。視覺轉互動，互動轉產品等。你們有什麽話想送給這些朋友嗎？
陳璇：每個人都應該對自己有一個正確的認識， 看你對自己的定位是什麽。我有朋友就是視覺轉產品，他對產品這方面還是比較敏感的。那我就是相比產品更適合做視覺，自己比較感性。

問：你們覺著這種轉型方向是一個大趨勢嗎？
牧川：趨勢..我覺得產品經理被淘汰才是趨勢 ，呵呵呵

問：為什麽這麽說?
牧川：我說的這是大方向。因為我覺得一個公司只要有幾個非常不錯的產品經理就可以了。現在什麽人都去當產品經理，所以才把產品搞得亂七八糟。

問：哈哈，你這話我能寫在文章裏嗎?
小明：可以可以，只要把我名匿掉就可以 ^o^ (小編:隨了你的願)

 

工具

問：剛剛說很多時候使用 ProtoPie 做高擬真互動原型，什麽時候會用到這個工具？
陳璇：我們從去年開始就在使用。主要是在驗證自己想法還有做用研的時候。因為我們想讓用戶真正的去體驗使用場景，靜態稿肯定是不夠的。這時候就需要高擬真的 Demo，而 ProtoPie 就能幫我們大忙。他比較適合不會程式碼又想做高擬真互動的設計師。

問：那之前你們還用過什麽互動工具，覺得 ProtoPie 和他們的區別是什麽？
陳璇：之前我用過 Principle。我剛從 Principle 轉到 ProtoPie 的時候，覺得 ProtoPie 是比較理性的工具。但後來用著用著就發現做那些比較大項目的時候，ProtoPie 會更方便。因為他能幫我把項目分成一個個的場景，管理起來很方便 ，但 Principle 做不到。

問：現在工具那麽多，你們選擇工具的標準是什麽？
陳璇：我一般先看網上評價吧。不然花精力學完了發現不怎麽樣，那就挺麻煩的。
牧川：還有就是和其他軟體的配合吧。像可以直接把 Sketch 導入到 ProtoPie 這樣的。

 

招聘

問：最近我看到你們團隊在招人，你們..
牧川：（激動的大喊）招啊，瘋狂招，快來吧!!

問：你們招的的是什麽職位？
牧川：我們希望找互動和視覺設計師，招很多很多，讓大家快來加入我們吧！

問：兩位希望新來的設計師是怎樣的一個搭檔?
牧川：我希望是有想法的年輕人進來，能帶來更多碰撞，有精力在加班時一起熬夜，下班後還能有一起喝喝酒聊聊天的。

（招募聯繫方式：resume@taobao.com）