Search
Close this search box.

在微信工作的美國人 PM:真正要做出滲透生活的 app,請參考中國好設計

Screen Shot 2016-04-06 at 12.28.55 PM

《TO》導讀:在台灣開發 App,許多開發者著眼的是如何變現、開發技術強不強,這些問題很重要,但是許多開發者沒有想到的是「如何讓這個產品在使用者生活中變成必須」。

一位美國人跑到中國微信做 PM,從一個西方人眼中,中國市場對於 App 開發的思考著力點完全不一樣,這些 app 的目的都只有一個:想盡辦法搶進消費者生活,變成不可或缺的一部分。達到這個目的的方式很簡單,就是透過設計。

以下這篇文章,則是一枚老外看中國網路的視角,作者 Dan Grover 來自美國,現在在廣州微信團隊做產品經理。在這篇文章中,他觀察與總結了中國網路產品中一些有異於西方(確切說是美國)的設計、細節還有運營手段,雖然在中國人看來這些事實並不新鮮,但是從「外人」眼中看自己,還算是一件有點意思的事,這也能讓讀者更加清楚適應於中國的創新應該以何呈現。Dan Grover 認為中國巨大的本市場,遲早會托起完全有別於矽谷的網路創新。本文由虎嗅編譯,略有刪節,以下為作者第一人稱敘述。

在 2014 年底,我曾寫過一篇文章 ——關於我在中國注意到的行動 app 的 UI 設計趨勢。出乎意料,這篇文章點擊還挺高,且被翻譯成中文、俄文跟韓文。

我不知道這是為什麼。也許,對我那些已回到舊金山、並認為我是一個海外瘋子的小伙伴來說,可能覺得能看到在防火牆內中國軟體開發者們的狀態與他們想當然的形象相去甚遠,是件有趣的事——此前他們認為中國創業者就是一群蒼白而沒有品味的仿製者。相反,這裡是如此有活力而繁榮,那些有才華的人們,其創意、對事物的優先考慮及敏感性上,有自己獨特的一套。

對另一些人來說,那篇文章則或許提供了一種角度:以軟體為窗口來了解一個社會的價值觀與文化——不是所有的國家都能在本土出產這麼多的軟體與 app。

至於中國博客圈里為什麼那麼多人翻譯、轉發或者分析這篇文章,我猜可能是因為此前沒有外人以如此不同的眼光來打量這些 app 的設計。

現在到了 2016 年,是到了新一輪總結的時候。我將以對 app 設計的一些花邊觀察來開始這篇文章,再將眼光轉向行動世界的一些新發展。

此前我沒有注意到的事:

  • 中國特色一:用戶用愈多,排名愈前面,用積分搶 VIP 特權

我少年時老混的 PhpBB 論壇,有一個常用功能是「用戶排名」,該功能後來在 2010 年代隨著社交網路的興起逐漸消失。然而這個功能在中國 app 里相當常見。在社交 app 裡,它表現為「等級」,在電商 app 裡,它表現為「積分」。在 app 裡,它體現為用戶個人主頁的姓名邊有一系列的徽章,或者在用戶頭像邊沿有特別的顯示。如果你是 VIP 會員,你名字旁邊通常會被加一個特殊的符號。

據說 QQ 是這事的始作俑者,他們的排名體系基於用戶在 QQ 上的在線時長。

  • 中國特色二:只有中國人才用的標誌 T-Shirt、和歡樂購物袋

彈幕起源於日本。很多中國影音網站與 app 都有這個功能,用戶們的評論會以飛速行動且無序的方式遮掩住影音畫面。這就是彈幕。

一些我只在中國發現的標誌:

我曾提到很多 app 都提供不同的主題設置。而我沒注意的是,大多數 app 採用了同一種奇怪的標誌去代表「主題」:一件 Tshirt。我猜它的含義是:換主題對你的界面來說,就像換一件新潮的衣服。不過最近有一些 app 用畫筆來代替 Tshirt 了。

另一個有意思的標誌是「歡樂購物袋」,用於指示購物功能。許多 app 都有自己的商店——比如跑步 app 賣裝備,音樂 app 賣耳機,微信與 QQ 則賣京東精選,小米產品也是努力地想要賣給你更多的小米產品。

  • 鍵盤與回車鍵

iOS 允許開發者選擇鍵盤右下那個按鈕的功能。那麼,它應該是灰色的「換行」鍵,還是一個亮藍色的像「搜索」、「發送」這樣的功能鍵?

別看,如果是你來設計一個消息 app,你會選擇哪個?允許用戶在清單或多段格式的信裡插入空行這事很重要嗎?(在這種情況下,你需要在你鍵盤之外的界面加上一個「發送」鍵),或者你只想在鍵盤上突顯一個藍色的「發送」鍵?看上去,後者輕鬆獲勝。支持後者的意見認為:當你在手機上輸短信時,你哪裡會常常真的需要空行呢,對吧?而當用戶本來打算發送消息時,他會不會不小心打成「換行」效果?

不!錯了!事實是,當你把它做成「發送」鍵時,你很容易不小心只是因為打了一個空格鍵,而把沒有寫完的訊息發出去,或者把自動拼寫造成的錯誤文本發送出去。這種情況非常容易發生,事實上,iOS 自帶的短信 app 以及每個西方的聊天 app 都不約而同選擇在鍵盤之外定制一個「發送」按鈕。

中國用戶很少遇到這個問題,因為用戶在輸入中文時並不怎麼用空格鍵——即使在句與句之間。而且他們都是要到鍵盤頂部去選擇拼音打出來的結果,所以事實上對螢幕空間的利用效果更好。所以這裡的每個聊天 app,產品經理們的選擇都是——將「發送」鍵放到鍵盤裡!

以下是西方與東方聊天 app 在「發送」鍵上不同的安排:

  • 第三方瀏覽器

很多中國用戶並不用他們智慧手機上自帶的瀏覽器,而用第三方瀏覽器,比如 UC、QQ、360 瀏覽器。事實上,據QuestMobile 統計,QQ 瀏覽器現在是安卓上第五大 app,而 iOS 用戶則更青睞 UC,UC 瀏覽器在 iOS 平台上月活數量排名第十二名。

這些瀏覽器比系統自帶瀏覽器拓寬了許多功能。它們可以節省流量與提速、廣告攔截,有主題功能、夜間模式、掃描或生成二維碼、離線下載,當然,還與中國的搜索引擎與社交網路更緊密的整合。許多瀏覽器還給電子書生成漂亮的 UI 及實用的離線功能。

儘管百度自己的瀏覽器並沒做起來,但它的主 app(這是它搜索引擎與門戶的主渠道)安裝量極大,也可以被看成一個第三方瀏覽器,它也包括了上述瀏覽器的許多功能,更不用說它還自帶了它家許多其他產品(外賣、雲端硬碟、新聞、錢包)。當人們知道一個網站的名字並想要去瀏覽時,人們常常會通過百度搜索進入而不是用系統自帶瀏覽器。

這些事只發生在中國,美國肯定見不到

  • 流量使用精打細算(bean-counting)、WIFI 驗證更加容易

中國用戶非常在意他們的數據流量包。據這份報告,中國用戶每人每月人均使用流量 210MB,而美國的對應數字是 1 個 G。

流行 app 騰訊手機管家與百度手機管家都有監控與記錄流量使用情況的功能。很多普通的 app,也想辦法為用戶節省流量,不管是新聞 app 與瀏覽器裡的「無圖模式」,還是其他什麼特別的數據包套餐,或者提供特別的壓縮。

我以前也提過,大多數媒體 app 都允許將內容下載後離線瀏覽。所以如果我想在回國的飛機上狂看一通《紙牌屋》,我可以用愛奇藝,卻不可能用 Netflix。

因為人們不願意浪費流量,所以只要有 WIFI 可使,他們會立馬連上 WIFI。除了那種最低檔飯館,幾乎所有餐館都給客人提供免費 WIFI。

於是,一些能夠破解不同網路熱點的 app、或者能共享熱點密碼的 app 就流行起來。他們能幫你猜(提示:通常是 88888888)。小米曾聰明地將中國用戶對 WIFI 的依賴轉化為其產品的一個賣點。它操作系統裡的 WIFI 連接的界面上,甚至可以提示你哪些熱點信號強、哪些是免費,甚至還可以將已保存的網路密碼,通過二維碼的方式發布給朋友,對方只需要掃 / 描一下就可以分享相同網路連接 Wi-Fi。它們還跟一些熱點提供商達成交易,給一些小米用戶提供免費 WIFI。

在商場或者咖啡館等公開場合等開放熱點,會先強制用戶登錄一個門戶網頁——你知道,你登錄的第一個網頁會被重定向到其他網站。在中國,這個門戶網頁總是需要你輸入手機號,然後會給你手機發驗證碼。因為法律要求用戶提供某種意義上的「實名」以使用所有 app、ISP 與熱點服務,所以一個已被驗證過的手機號(現在所有的中國用戶都要用身份證買手機號)是最方便的「實名驗證」手段。我猜,這樣的話,國安去某家咖啡館就會很容易看到是誰在看某段貓咪影音,而對熱點提供商來說,他們也掌握了使用其帶寬資源的人群。

這些網頁本來就夠不方便了,然而跟 iOS 的默認設置搭配在一起,簡直是讓人抓狂。當連上熱點,進入指定門戶網頁,iOS 會自動彈出一個表單來讓你完成。如果你轉向短消息 app 去看驗證碼,那你就錯過表單並與熱點斷開,這時你又要重回到「設置」裡,重新連接熱點……最終,在驗證之後,表單的「完成」按鈕只能通過導航事件而非 Javascript 驅動的門戶網頁激活。這就是每天發生在中國數以百萬計的 iPhone 用戶身上的事,而他們只是想要連上那該死的 WiFi。

去年,出現了一個更好的解決方案,並且已有廣泛實施。現在,微信提供了微信連 WiFi 的解決方案支付寶也有)。在一個飯館裡,用戶可以通過掃描二維碼,完全越過門戶網頁這些流程而完成手機的自動連接與驗證。

以下為例,這裡是我附近的一個韓國烤肉館,他們在飯桌上就貼了這樣的招貼。

商家採用這樣的驗證方式而不是用密碼連接普通路由器,就可以推廣他們的官方微信號,今後可以有更豐富與高頻度的方式、但又不是用垃圾短信手段去向用戶推送他們的打折信息與新聞。

很多熱點只支持微信 WiFi,但像麥當勞就給了顧客微信、支付寶以及老式的短信方式幾種選擇。

  • 驗證碼的趣事

中國的許多東西都需要驗證碼保護,通常的驗證碼是一些無序的數字,但有時又有不同。有時要求你輸入中國字或簡單的筆劃。

在鐵道部官方預訂網站 12306 上,一個圖片驗證碼程序用一些毫無意義的圖片挑戰把很多用戶給難住了,成為 Photoshop 上的惡搞主題。

  • 外賣大戰

「發現餐館」app 的祖師爺是大眾點評,與 Yelp 地位類似。大眾點評就像很多 app 如 QQ、百度地圖、陌陌、支付寶甚至滴滴打車一樣——不管這些 app 本來是乾嘛的,點評也會加入一個「附近商家」功能。有一些他們自己專有的功能,有的也是從別的 app 抓來的。不管是哪種,他們都是用完全一樣的方式來展示分類:多彩的圓形圖標、兩行排列。

讓用戶快速發現附近的食物之後呢?很容易做的事就:外賣!

除了餓了麼、美團、點評,阿里巴巴與百度也在外賣上投入重註。當我在街上閒逛時,常有一些不同 app 的外賣優惠券塞到我手裡來。一些餐館把他們的菜單植入到 app 的原生界面裡,而必勝客則通過網頁視圖將它的 UI 嵌入到每個訂餐 app 裡面。

這些 app 裡面我最喜歡百度,因為它有一個並不時髦的功能:「狀態」,可以更新你的訂單狀態。

我的同事則喜歡通過微信來用「連咖啡」,它可以分配一個人去附近的星巴克來幫你買咖啡。當我去星巴克時,我常常被堵在一個快遞員後面,他一買就是 30 杯咖啡,邊買邊核對他手機上的訂單,然後刷他的會員卡积點數。

如果點餐點咖啡還不夠,你還可以通過各種 app 享受其他各種服務。輕點一下,你可以對召集一個保姆、一個廚師、甚至搬水工。當我看到有人在批評矽谷創業公司缺乏解決麻煩事兒的雄心,我笑了,因為中國創業者完全不是這麼回事。

  • 支付寶複製微信

在中國,行動支付的兩個主要競爭「錢包」是:支付寶與微信支付。

支付寶,緊緊圍繞著金融與商業功能來打造,是當你在便利店購物或向幫你刷牆的工人支付工錢時最直接調用的 app。但是在給你朋友付錢、或發節假日紅包的社交場景下,微信支付顯然是首選。在此情形下,其他玩家很難有機會了。

去年,兩家都在試圖從對方那裡爭奪用戶以提高自己的市場份額。微信在主界面上增加了快捷的掃碼支付,這樣用戶不必添加對方為好友也能收錢付錢。

而支付寶的舉動,更有野心。他們拷貝了微信在聊天上的許多功能,加了一個新的「朋友」標籤。這還不是說他們從微信那兒獲取靈感並讓自己的產品變得更有社交性這麼簡單,他們是真的在「拷貝」。兩者的相似可謂出奇,許多頁面簡直就是像素級雷同。其意在讓人們用錢包 app 去跟他們朋友聊天,生怕他們用聊天軟體去完成網上支付。

有趣的是,在整個拷貝行動中,還包括把微信的朋友圈給拷貝過去稱其為「生活圈」。除了你朋友貼出的東西,你還可以看到不間斷的、滿屏的、來自附近的人的小影音,令人奇怪的顯眼。我第一次打開它時,看到周圍公司的辦公室裡正在發生的一切覺得倒是有意思。但後​​來興趣就減弱了,也沒人再往上傳什麼東西。

  • 每一家都在開始賣理財產品

為了理財產品市場——理財通的再次發布,騰訊做了很多廣告。在微信錢包頁面上,理財通排在最上面一行,甚至高於「電影票」與「打車」。

某個週末,鋪天蓋地的廣告甚至讓我無可逃避。我在每段在線影音的片頭、以及鑽進的每輛出租車的車載螢幕上都能看到理財通的廣告。生怕這些訊息不夠深入人心,週末的廣告轟炸後,一些女孩居然在周一居然跑到我辦公室前面來給我們演示如何用「理財通」來買理財產品。

事實上,很多 app 都通過他們的「錢包」提供一鍵買理財產品的功能,就像在支付寶或任何銀行的官方 app 上。比如小米,就在它出廠的每台手機上預裝了「小米金融」app。很多 app 從首頁到買一支收益率 4% 的基金(不久前還是 8%),僅需有限的幾步。這些產品的廣告隨處可見,它們總是閃亮亮的、卡通化的,遠不是那些在《華爾街日報》上死板又看上去可信的基金廣告所表現那樣。

  • 機器人

2015 年,微軟中國推出了一個人工智慧聊天人物「小冰」,還挺受歡迎。用戶可以通過網站、獨立 app、微信、Cortana 以及小米很少被用到的聊天 app「米聊」去跟小冰聯繫。儘管扔一些煩人的問題給她並看她如何作答,是一件有意思的事。一些人甚至向她傾吐心事。某種意義上,小冰就是 Siri、ELIZA(最早的聊天機器人)、Cleverbot(智慧機器人)共同生育的愛女。

一些 app 配置了自己研發的機器人。百度 app 有「度秘」,是一個性別模糊的機器人,可能是《瓦力》裡 Eva 的表親。度秘也有自己的獨立 app,它可以回答自然語言搜索詢問,幫你找附近的好玩好吃的,還有就是講笑話。通過文本到語音的切換,它可以非常響亮地回答問題。每次你打開它,它都會向你致以問候,而不只是等著你問問題。儘管你可以像正常聊天那樣在手機上輸入或語音,但在聊天界面的底部還是有一欄,展示各種功能以及各種可能的回應與補充。

淘寶裡則有「阿里小蜜」,其形像是一個卡通化的蜜蜂。用戶可以在手機主界面上裝一個快捷鍵直達「阿里小蜜」。它可以回答關於你訂單的物流問題、預訂旅行,以及幫你在淘寶上尋找商品。但它不能講笑話。

儘管機器人很時尚,但我不確信真正的用戶願意與這些 app 進行如此這般的互動。

  • 麻煩的 iOS 商店

2015 年,一款叫做「Xcode Ghost」的惡意軟體感染了許多中國流行 app,並躲過了蘋果的審查。Xcode Ghost,是一種針對蘋果 app 開發工具 Xcode 的病毒,它一開始主要是通過非官方下載的 Xcode 傳播(比如百度雲盤),通過 CoreService 庫文件進行感染。當 app 開發者使用帶毒的 Xcode 工作時,編譯出的 App 都將被注入病毒代碼,從而產生眾多帶毒 APP。

之所以工程師不去蘋果官方渠道 Mac App Store 下載 Xcode,是因為 Mac App Store 總是很難打開,真的是非常慢。儘管蘋果回應稱將把「Xcode 的下載放到本地的服務器上」,但是似乎見效並不明顯。

出於一些原因,App Store 在中國的體驗同樣很渣。尤其是它各種慢,不管你是登陸美國商店還是中國商店。你按了「搜索」按鈕後,它居然需要差不多五秒鐘才會顯示結果,搞得好像它跟網路脫節一樣。中國用戶經常通過二維碼掃描安裝第三方 app,並沒有受到 App Store 或操作系統層次的支持。

我曾在博客裡寫過,中國開發者想盡辦法繞開蘋果的 app 商店裡,要么在他們的 app 裡做各種交叉推廣,要么在他們自己的獨立 iOSapp 商店裡用 OTA 認證方式允許安裝沒被審查過的第三方 app。

在最近 iOS 的升級中,蘋果增加了用戶授權這些第三方 app 的操作複雜度。但是因為蘋果官方 app 商店實在太差了,各種繞避手段繼續存在。我看見很多指向 app 的鏈接,指導用戶怎麼不通過官方商店安裝 app。

事實上,某天我在街上逛時,一個人就塞給我傳單,告訴我怎麼進入「設置」、然後信任證書,然後我就能玩釣魚游戲並用贏得不菲的獎金。

  • 微信最終打敗了 QQ

在騰訊上一季的財報裡,微信的月活用戶達到 6.5 億(最新數字是 6.97 億),超過了 QQ 6.39 億的月活。月活不總是一個最有用的指標,但是這個拐點比很多人預料的要來得早。

儘管微信是媒體青睞的對象,但它真的是受到了 QQ 強有力的狙擊。當它一開始作為行動短信 app 誕生時,它站在了強硬的、仍然對桌面為中心的 QQ 的完全對立面。QQ 團隊很快雙倍努力,並且成功地對其行動產品做出幾次全新設計,以強化其在行動設備的地位。

這股爭鬥之所以值得記上一筆有兩個原因。一個原因是你通常知曉的:更年輕的用戶無疑會喜歡更新一些的產品。另一點是,同一家公司能通過創造出兩個同一品類並廣泛使用的競品從而成功地顛覆自己,這個也是真的不尋常。

  • 行動網路的外圍

就像我同事提到的,仍然有數以億計的手機用戶沒有用上微信。他們中大部分是更年輕的用戶,還有就是偏遠地區的人。同樣,這些人可能還壓根沒用上網路或行動網路。這個 13 億人口數量的國家,目前只有 6.49 億網路用戶,而且地區間的分佈差異很大。

我最近跟隨一個團隊去嚴寒東北的一個三級城市調查兩個 app 的情況。我們在那做了一些焦點調查,看看當地人使用手機的習慣,四處轉轉,也飽食了很多餃子。據當地人說,他們都是把手機帶來鎮裡的 app 商店裡,店裡有人專門幫他們安裝下載購買 app。去這些地方調查對我們來說是很有趣的事,這些地方也不是真的有多偏遠,但是跟我們平時在家在一線城市的情況仍大為不同。

  • 行動網路的神奇未來

回想當初我一開始離開舊金山搬到中國來時的情形,我的視角如今已發生改變。我曾經擔心灣區是我惟一能愉快或體面工作的地方。如今,除了我仍然強烈地懷念玉米煎餅,上述擔心已不再存在。是的,矽谷在某些事情上仍然無敵,直到今天,中國仍不能做出一個操作系統、寫出一個框架、創造一種程序語言,或者為其他產業創建一種標準。

但是,看上去矽谷的大部分公司也不能。正如一些人所指責的那樣,大量的資金投向創業者以炮製相似消費型 app,這是賺錢的買賣。

當我第一次離開矽谷,觀察中國的行動 app 設計並撰寫上一篇博客時,我覺得相當有趣,「哈,一些 app 怎麼這麼奇怪。」看到科技如何在此獨立發展並服務於本地需求,相當有意思。

而這事正在變得更加神奇。儘管我們還是將中國與印度以及非洲大部分地方同等以待,但事實上,後者仍然落後,而中國正在變得非常有意思。全球網路滲透水平仍然很低。當越來越多的中國人上網後,他們使用的 app 與操作系統或許跟我們現在使用的這一套呈現更大的差異性。他們會尋求科技的手段解決跟我們所面臨的一樣的問題,但是,其解決方案的假設與前提會跟我們大不相同。

我渴望看到未來所會發生的一切。

(本文獲虎嗅網授權刊載,未經授權請勿轉載)

  • 延伸閱讀

一個美國人到中國微信當 PM 的心得:中國 App 設計真好!
「中國工業設計之父」柳冠中:設計是門戰略,而不是快速銷貨的生意
一張圖勝千言萬語,13 張圖徹底解釋 UI & UX 差別是什麼