昨天我們介紹了 Stripe 這家雖然年輕卻備受矚目的線上金流公司，提到在技術之外他們也非常重視設計，創辦人兼執行長 Patrick Collison 還會跟設計師合作，寫程式微調網站上 demo 結帳流程的動畫。另一位 Stripe 設計師 Michaël Villar 則是在 〈 Improve the payment experience with animations 〉 談如何處理結帳流程中填寫付款表單的動畫，以及背後的用意。

Michaël Villar 認為，如果使用者已經走到結帳流程、開始填寫付款的表單，那麼等於是決定信任這個網站、信任你的公司，因此整個體驗當然要盡可能地做到最好。動畫的功能在此不是為了要用娛樂效果取悅客戶，相反的，動畫是要幫助他們更容易了解你的產品。如果拿掉動畫整個流程也不受影響，那麼這個動畫就是多餘的。

Stripe 負責設計結帳的團隊決定從一開始就要使用動畫，他們相信動畫可以強化整個核心體驗。

影片連結

這個動畫是要告訴使用者，電話號碼就是「記住我」這個步驟所需要的資訊，而且是在使用者勾選「記住我」選項之後才會隨之出現。

搖啊搖

影片連結

表單設計者很容易就可以告訴使用者所填寫的資訊在內容或是格式上是否有誤，但如果直接在每個欄位對使用者說：「嘿，你填錯囉。」不僅會讓使用者感到挫折，還可能因此提高使用者放棄結帳的機率，所以透過這個小動畫，不僅可以減輕使用者的挫折感，還可以告訴他們可能哪裡出了問題——基本上就是這張表單在對你搖頭 XD

魔術

動畫版本

Stripe 的機制是會寄送驗證碼到使用者的手機，然後要求使用者在這份表單中填入收到的號碼。其他像是 LINE 帳號註冊、Google 帳號兩步驟驗證等等，都會採類似的方式。只是我們也都知道，等待的時間會突然變得很長，因此如何讓使用者感覺時間過得快一點很重要，這時動畫的目的就是要製造錯覺——即便實際上時間一點也沒縮短（其實也沒變長），那怕我們也不知道簡訊何時會寄到，就像我們不知道張無忌何時會到大都。

按鍵轉換

動畫版本

這個在「付款資訊（Payment Info）」與「支付 25 美元（Pay $25.00）」之間切換的動畫就是在告訴使用者在填完付款資訊後會進入下一個階段，檢視完自己填寫的資料後按下付款，並透過第三個動畫告訴使用者付款完成。Michaël Villar 說自己最喜歡第三個打勾的動畫，這會讓使用者有一種自己輕易地圓滿完成某種任務的感覺。

加分

動畫版本

Well，上面這個動畫似乎違反了 Michaël Villar 自己文章的主旨，看起來有點多餘。不過呢，他說自己跟大多數人一樣，比較不信任「看起來很老舊」的網站，殊不知台灣這邊很多 IE Only、看起來像是 Google 還沒上市時那個年代的設計。所以他認為先進一點的動畫有助於增進使用者的信任，使得整體的體驗更加完善。

Nest 的結帳設計細節

不只 Stripe，「結帳」過程中各種細微之處顯然是網站必須非常重視的環節。Amazon 的一鍵付款即是一例。而 Facebook 的產品經理 Dirk Stoop 上個月曾經在自己的 Facebook 上分享了一個 Nest 網站結帳設計的小細節。

通常，網站的表格會長這樣：

在欄位中告訴使用者要填入哪一項資訊。但是一旦使用者開始輸入資料後，原本的文字（placeholder）通常就會消失，於是 Nest 的設計師做出以下的設計，告訴使用者正在填寫的欄位是什麼：

如果使用者忘了填寫某些欄位，當然表單也會告訴你：

Square 的萬能輸入框

另一家以重視設計聞名的 Square，曾經為了使用者在手機上輸入的方便，設計出單一輸入框即可完成信用卡類型、卡號、有效期限、CVV（卡片背後的 3 位數字）和郵遞區號的填寫。我們在 〈 Square 的巧妙設計——單一文字框搞定信用卡訊息輸入 〉 一文中介紹過：

輸入框當中的最左端是一個代表信用卡的圖示，主要內容部分用於輸入卡號，格式限制是典型的四位分隔。隨著使用者輸入數字，系統會根據卡號判斷卡片的類別，例如 VISA 或 MasterCard，並且配合改變左側的信用卡圖示。這種方式幫使用者省掉一個選擇卡片類型的步驟，而且是一種很積極的訊息回應方式，讓使用者能夠感受到系統對他們的操作產生反應。

當使用者正確完成 16 碼卡號填寫後，文字框會自動改變顯示模式，之前輸入的卡號只會顯示出最後的四位，節省出的三個段落就分配給有效期限、CVV 和郵遞區號。使用者在鍵入這些內容的時候同樣會得到格式限制的輔助，例如格式、日期有效性的判定、自動加入斜線、自動切換到下一段文字等。

這裡有一個很棒的細節，當使用者在輸入 CVV 時，左側的圖示會發生變化（如上圖所示），提示使用者所謂的 CVV 就是卡片背後的 3 位數字；非常貼心。

下方是 Zachary Forrest 利用網頁前端技術模擬出來的示範影片：

或是您也可以到這個網頁試試看。

立委注意了，藝人也要小心，就連你我都得更加警覺，智慧型手機開啓「全民皆狗仔」的序幕，但這還不夠，有愈來愈多「隱藏攝影機」裝置出籠，讓鏡頭更肆無忌憚。最近美國募資平台 Indiegogo 就出現了一款 Peek-I，毫不遮掩地說自己是「Spy Cam」（間諜相機），宣傳影片也拍得很直白。

3/19 開始募資到現在，金額已經超過目標 1933%，不過這大概是因為目標設定得很低，只要達到 1000 美金就可開始量產送貨，再加上不是非常昂貴，只要 15 美金（大約折合 450 台幣）就可以得到一個 Peek-I 相機。 文案以「discreetly」（謹慎、小心）形容這個相機的「實用性」，感謝科技進步，人人都可以過足當間諜的癮。Peek-I 體型很小，長寬各只有 20 公釐、15 公釐、厚度 5 公釐，不容易察覺，如果不仔細看，它就宛如鏡頭保護套。 跟很多「偷拍相機」以吸盤附著在手機上不同，Peek-I 以磁鐵裝在手機上，萬一東窗事發馬上可以迅雷不及掩耳取下藏起來。鏡頭是以壓克力製成，能夠 360 度旋轉，全面以各種角度捕捉拍攝對象，最重要的還是拍攝當下裝作若無其事，才能成就間諜或狗仔的最高境界。 Peek-I 另有販售貼紙，可以客製化自己的「間諜工具」，如果手機裝有塑膠保護殼，Peek-I 也提供轉接頭，事先黏好在手機上，一樣可以接入這顆偷拍鏡頭。 最近在另一個募資平台 KickStarter 也有一款拍照裝置 Covr Photo，直接將鏡頭嵌在保護殼裡，它的訴求就不若 Peek-I 那麼明目張膽，而走溫馨路線。很多人面對相機都會非常緊張，比如筆者的奶奶一看到兒孫把手機狀似要拍照拿起來就急著閃躲，「沒塗點胭脂不敢上鏡啦」。Covr Photo 則讓使用者即使不正對拍攝對象，也能「偷拍」，記錄下最自然的影像。一個 Covr Photo 保護殼 55 美金（約合 1650 台幣）起跳。

被稱為 Google+ 之父、最近幾年總是擔任 Google I/O（Google 開發者大會）主持人的 Vic Gundotra 今天宣佈從自己待了八年的 Google 離職。¹很快地這項消息也獲得 Google 共同創辦人、執行長 Larry Page 在自家的 Google+ 上證實。²

Vic Gundotra 現年 45 歲，2007 年加入 Google，在那之前他曾經在微軟工作 15 年，因為競業條款所以延後一年到 Google 工作。2011 年四月，當 Larry Page 取代 Eric Schmidt 成為執行長後，Vic Gundotra 被提拔為六位資深副總裁之一，他是 Google 高層中少數曾經直接向蘋果開砲的人。

根據 Google 去年 10 月所公布的數據，Google+ 共有超過三億的月活躍使用者，加上其他「強調社群的 Google 產品」則有 5.4 億。作為對照——昨日發表財報的 Facebook 目前月活躍使用者有 12.8 億、行動平台的月活躍使用者有 10.1 億。

Google 近年大力推廣 Google+，極力將自家各項產品與 Google+ 整合，甚至要求 YouTube 使用者在發表評語之前，必須先擁有 Google+ 帳號，此舉曾造成使用者一些反彈。

Larry Page 除了在 Google+ 上感謝 Vic Gundotra 為 Google 的付出之外，也強調會繼續努力發展使用者在 Google+ 的體驗。然而，TechCrunch 在消息傳出沒多久後卻發表了一篇文章 〈Google+ is Walking Dead（Google+ 是行屍走肉）〉³，指出多個消息來源告訴他們「Google 將不再被視為一個產品，而是一個平台——實質上結束與 Facebook 和 Twitter 等社群網站的競爭」。當然這樣的說法得到 Google 的強烈否認。

▲ Dave Besbris（照片來源：Google+）

另一家科技網站 Re/code 指出可能接替 Vic Gundotra 的人選會是工程副總裁 Dave Besbris，而非 Vic Gundotra 副手、Google+ 產品領導人 Bradley Horowitz。⁴無論如何，Vic Gundotra 的離職除了讓 Google 內部勢力重整，也將為 Google+ 未來發展增添變數。

Vic Gundotra 並未表明未來的動向，只說自己「期待後頭的旅程（look forward to the journey yet to come.）」。

說到矽谷知名的育成中心 Y Combinator，大家可能會先想到 Dropbox 與 Airbnb 兩家市值百億的公司，不過 Stripe 這家由一對愛爾蘭兄弟檔創辦、被視為 PayPal 挑戰者的線上金流公司，經歷今年一月一輪高達 8000 萬美金的募資後，讓他們的募資總金額累計達美金一億 3,000 萬，交易前估值約為 17.5 億美金。¹

哥哥 Patrick Collison（照片來源：TechCrunch）

弟弟 John Collison（照片來源：TechCrunch）

兩位創辦人即便在矽谷這樣一個充滿年輕天才的地方都顯得突出：哥哥 Patrick Collison 就讀麻省理工學院，雙主修數學和物理，16 歲時創造了一個 LISP 語言的現代版本「Croma」；弟弟 John Collison 是愛爾蘭當當屆分數最高的高中畢業生，就讀哈佛大學。2007 年加入 Y Combinator 育成計畫後他們與另外兩位牛津的畢業生合作創辦了 Auctomatic 這家電商公司（對，兩兄弟其實比 Airbnb 更早加入 Y Combinator），隔年以五百萬美金賣掉——當時哥哥 Patrick 才 19 歲，弟弟 John 更是只有 17 歲，兩人甚至連啤酒都還不能喝！

巨人的弱點

擅長程式開發的兩兄弟發現，如果他們要在網路上銷售自己寫的軟體，能選擇的金流服務並不多：蘋果的只為自家 iTunes Store 與 App Store 服務，而市場上最常見的選擇 PayPal 卻有許多缺點：複雜的費用計算方式、必須從消費的網站連到 PayPal 網站才能完成付款——店家無法控制消費者的體驗，對銷售也沒幫助。假如您曾經贊助過群眾募資平台 Kickstarter 來自美國的專案，應該會注意到他們用的是 Amazon 金流，同樣需要先離開 Kickstarter 網站。

2010 年一月，兩兄弟開始做 Stripe。就跟許多矽谷的創業家一樣，他們後來都輟學了，服務在隔年九月上線。

Stripe 的金流服務可以收取全球 139 種幣別，不過目前該服務只在 12 國提供，除了美國、加拿大、英國和愛爾蘭之外，其他如澳洲、德國、法國、荷蘭和西班牙等八個國家尚在 beta 階段。現在他們已經有幾個大客戶像是 Salesforce、Lyft、Shopify、Squarespace 和 TED 等。

讓串接金流變得跟嵌入 YouTube 影片一樣簡單

Using Stripe is almost as easy as embedding a YouTube video into a website.

-- Mike Moritz

Stripe 的競爭優勢在於他們提供開發者非常易用、說明文件完整的 API 以及友善的介面，紅衫創投合夥人、Stripe 董事會成員 Mike Moritz 說 Stripe 用起來就像「在網站上嵌入 YouTube 影片一樣容易」。

網站開發者只需要使用 Stripe 提供的幾行 JavaScript 便能串接好金流（當然，開發者要進行各種調整也沒問題），而且透過 iframe 技術，消費者在付費過程中根本不必離開原本消費的網站。商家也可以在介面很友善的後台觀察各種資訊如客戶資料、收入變化、轉帳情形等等。

比起 PayPal，Stripe 金流服務強調收費計算很簡單：每一筆交易收取 30 美分與總金額 2.9% 的費用——就像網站上說的：透明、清楚。有人曾經將 PayPal 跟 Stripe 服務費的方式做了一番比較：

來源：Stripe vs PayPal: Who should you choose?

無所不在的設計文化

Stripe 最自豪之處在於他們的產品無論是程式碼、文件甚至是商家後台介面都在在顯示出這家公司有多麼重視設計。

本月初，UI 設計師 Benjamin De Cock 寫了一篇文章 〈 Designing at Stripe 〉 談自己在 Stripe 的設計工作，以及他的感受²。Benjamin De Cock 是隨著 Kickoff 被 Stripe 收購後一起加入。他說 CEO Patrick Collison 不僅重視設計，還會捲起袖子投入產品工作到不可思議的程度，以 Stripe 網站上付款流程 demo 動畫為例，Benjamin De Cock 說 Patrick Collison 覺得原本模擬使用者輸入信用卡卡號的動畫太死板（每個間隔 100 毫秒），不夠自然，於是就自己寫了程式改善。此舉讓這名比利時藉的設計師嚇呆了。「像他這樣的行為真的很容易就像病毒一樣感染員工。」Benjamin De Cock 更進一步說，在 Stripe，沒有人會走來對設計師做出一堆可能造成災難性使用者體驗的要求，設計師可以按照自己的想法去花時間設計。（想看 Stripe 如何打磨付款流程動畫的讀者，可以參考這篇文章 〈 Improve the payment experience with animations 〉。³）

與 GitHub 等公司一樣，Stripe 是一家對遠距離工作很友善的公司，他們的員工遍佈在美國、加拿大、英國和澳洲，為此在總部為遠距離工作的同事提供了「阿凡達」——「Double Robotics」機器人，讓遠距離工作的同仁可以透過機器人與同事互動、討論工作。

跟我們先前介紹過的 Simple 一樣，Stripe 也將公司所有成員以及簡介都放在網站上。

備受矚目

到底這家年輕的公司有多被看好？不僅很多人（特別是開發者）認為 Stripe 比起 PayPal 更好用，事實上，就連 PayPal 五位共同創辦人中的三位：Peter Thiel、Elon Musk 和 Max Levchin 都是 Stripe 的投資人。列出 Stripe 投資人名單，我們會發現根本就是明星陣容：紅衫資本、Khosla 創投和 Andreessen Horowitz 等等。

未來挑戰

目前兩兄弟的公司還有一點會是使用者，也就是商家比較在意的：收入必須等候七個工作天才能入帳，這對許多中小型的公司來說可不是好消息，而 PayPal 與 Square 都是隔天入帳。另外，在全球的擴張速度也是他們必須關注的課題，三個月前那筆 8,000 萬的募資主要目的即是如此。

儘管不少人看好 Stripe，認為他們是能夠撼動 PayPal 的一股力量，但上一個享有相同待遇，估值可能是 Stripe 三倍的 Square 卻在最近遭華爾街日報報導一年內虧損一億美金、跟 Google 洽談過收購事宜的傳言。⁴（當然，這件事情很快就遭到否認。⁵）