設計師在中國的奇幻漂流（上）

原文作者 Dave Grover 為一名美國產品設計師，從舊金山造訪中國，進入騰訊擔任通訊 app 微信 WeChat 產品經理，為了入境隨俗，一律使用中國出產的 app，因而寫下這篇比較中、美設計風格差異的長篇文章〈Chinese Mobile App UI Trends〉。

今年夏天，我收拾好所有行李，從舊金山搬到了廣州工作。記不清是因為怎樣的機緣巧合，我成為了微信 Wechat （一款紅遍中國的 app）的產品經理。

搬到一個新國家意味著要學習適應很多不同的事情：講一門語言、飲食、購物、出行。幾個月後，我驚訝地發現我已經開始習慣這樣一個陌生的地方。

同樣的情況也出現在我的數位生活中。我將我所有的 app 替換成中國本土的 app ，一方面原因是出自我對科技產業的濃厚興趣，另一方面則是我想盡可能的「入鄉隨俗」。從那時起，我也開始適應這裡的生活。

有一天，出於好玩的心態，我開始在我的筆電創立一個列表，記錄這裡的 app 和那些我在美國已用慣的 app 之間的不同。當我完成時，我驚訝地發現那個列表已經長到可以寫一篇文章了。

1. 輸入很困難

拼音模糊比對（Fuzzy Matching）

這裡的人們使用各種方式輸入中文：拼音、手寫、倉頡等等。偏好哪種方式似乎很大程度上取決於年齡和地區，然而最受歡迎的還是拼音輸入法（Pinyin）。

但是在這裡網站或 App 並不需要以上的輸入方式，他們更樂於使用拉丁字母作為搜尋內容，並且也能查詢到中文結果——跟作業系統是完全獨立的。有的搜尋功能甚至還使用了自動校正和模糊音。當你習慣了這些，就會感覺沒有這些功能的作業系統或 App 很難用。

當然，當這些 app 費盡心思去完善中文輸入的功能時，他們也就無暇做好英文輸入的模糊比對了（Fuzzy Matching）。（比如：stemming 算法，soundex 算法，優雅地處理變音符號、標點符號和大寫字母）

語音訊息、語音搜尋、語音助手

可以直接語音說話時，打字快有什麽用？

在中國，語音訊息在通訊軟體（特別是微信）中超流行。因為它省去了打字的麻煩，也不用學習各種複雜的輸入法，這對於老一輩不懂電腦的人非常方便好用。

不過就個人而言，我總覺得收到語音訊息有些不方便。因為我必須停掉手頭上的事情來聽，而不是瞥一眼就行。還有就是回覆語音訊息也挺彆扭，尤其是在公眾場合（擔心被認為是「手機狂魔」）。

但這裡的人並不會有這樣的感覺，因為你可以看到有很多人在公共場所發送語音訊息。典型的姿勢就是用拇指按住「錄音」按鈕，同時小角度傾斜手機對準嘴巴說話。

語音搜尋同樣也被廣泛的跨 app 支持。在近期的一次採訪中，百度的 Andrew Ng 指出他們的搜尋有 10% 是用語音輸入的。

什麼都用 QR 碼

我出國前曾在舊金山做過使用者研究調查，通過採訪來分析美國使用者的習慣和喜好。在每一次訪談中，我都會展示出一個 QR 碼然後問受訪者這是什麽。

（註：在看到 Facebook Rooms 也做 QR 碼之後，我懷疑他們訪談了問卷調查的同一批人。當然了，他們也可能有過這樣的討論：「如果手機使用者在網頁上看到一個 QR 碼，他們會怎麼做？」）

「是不是你將它拍下來，然後它就可以引導你到一個神秘的網站？」一個女大學生略帶嘲諷的說。有些人說他們用相機 app 拍完QR 碼之後，什麼也沒有發生，之後就沒有再嘗試了。「我覺得這些是優惠券之類的東西。」有些人如此推測著，他們還擔心這可能會對手機造成什麽影響。我把這些調查結果回饋給我的同事，強調 QR 碼在美國並沒得到廣泛的使用。

（註：有幾個中國朋友提出， QR 碼起初在中國也是個笑話，一直到 2011 年前後。他們把這一概念的成功歸功於微信的出現。）

而中國人，或許你已經猜到，他們對於 QR 碼並不陌生。QR 碼被印在大多數的廣告、宣傳手冊、餐廳菜單、名片、優惠券，甚至在火車座位椅背和休息室門後。

大部分 app 都內建了 QR 碼掃描功能。你發現的 QR 碼有時只在特定的 app 裡才有意義，所以通常會出現一行字寫著微信 QR 碼、微博 QR 碼或其他 app 的 QR 碼。它們所含的連結如果使用外部掃描器掃描的話，並不都可以進一步連結到對應的 app 。

通常使用的術語是「掃一掃」，「掃一下」（就像用掃帚）。我更喜歡用「掃描」這個動詞，這會讓人聯想起三錄儀（Tricorders）和醫療設備。（譯者註：「三錄儀」是一種手持式的多用途儀器，是星際旅行裡經常要用到的一種必備儀器）

正如我稍後將描述的一樣，這些代碼被用來網站行銷、把現實生活中遇到的人加進通訊錄、付款、和網站登入。

2. 小紅點（Indeterminate Badges）

中國的 App 大量使用「小紅點」這種 UI 元素。這不可能出現在 iOS 的原始 UI 軟體中，我也想不起來有哪款美國 app 使用過小紅點。

這些小紅點其實就是我們習以為常的標準化「紅點標記」（像是顯示未接來電有幾通），只是中國使用的小紅點裡面沒有數字。在 App 的每一層目錄及底部標簽欄，小紅點無處不在。如果一款 app 過了段時間沒有使用，再次打開時密密麻麻的小紅點就會閃瞎你的眼。

小紅點提示代表了：

A. 最新內容已加載好了。這表明新的內容無需使用者操作，或者確切的數字並不重要。通常用於社群媒體動態，或者電影、音樂和網購 app 的訊息動態更新中。

B. 有新功能推出。當你發現這個時，通常還有一個紅色的「NEW」、「新」在旁邊。

C. 使用者將部分 app 通知關掉了。例如，使用者可以在微信裡將一個對話設為靜音，當這個對話有新訊息來的時候，將會把具體數字的標記替換成小紅點。（註：很多官方帳號都受到限制，僅能顯示這種類型的通知。）

一款 App 會同時使用帶數字和不帶數字的紅點標記。如果一個 UI 元素有兩個子樣式，帶數字的那個應該優先顯示。

我突然頓悟，小紅點是一個必要的發明，因為它能將使用者引導到進一步的內容中，而且加深了人們對 app 的上癮程度。舉例來說，有這麽多的紅點標記在你面前，你就會想去按它。

一個有趣的事實：在 QQ 裡面，你能任意拖曳一個數字標記（不是不明確標記），然後它就會像煙霧一樣消失。

3. 創造圍牆花園（walled garden）、入口、平台

Richard Gabriel 的經典論文《「越差的越好」的崛起》（The Rise Of “Worse is Better”），第一次將軟體設計中兩種對立觀點進行對比：

貝爾實驗室（Bell Labs）開發的 UNIX 和 C 就是「越差的越好」的例證。它傾向於小的、有些粗糙、可互動工具的集合。而「正確的事（The Right Thing）」、「越好的才會越好（Better is Better）」的例證則是麻省理工學院開發的 Common Lisp、Scheme、和 Emacs。這種方法傾向於用更大、更全面、更整體的方法來解決問題。

美國現在 app 的趨勢是著重於簡約、集中的任務驅動型，在向「越差的越好」方向走。而中國的 app 卻朝著相反的方向發展。

每個 app 都包含了越來越多額外的功能（有的能巧妙地結合起來，有的只是隨意的加在裡面），以此來吸引使用者眼球，並且滲入使用者的日常習慣。

腦海裡浮現的一些例子：

微信之於 WhatsApp，就像 Emacs 之於 VIM（Linux文本編輯器）。微信除了簡訊，它還有影音通話、新聞、支付、收藏夾、遊戲中心（有內建遊戲）、附近的人、聽歌識曲和收發郵件。它的公眾帳號平台（後文會提到）竟能允許硬體裝置跟其進行連線，而無需獨立開發特定的App。（註：QQ 郵箱使用者可以在微信中直接瀏覽郵箱。）

– 百度地圖含有天氣、查找好友、旅遊指南和一個完整的「錢包」模式。騰訊地圖讓你發送語音明信片。兩者都有 QR 碼掃描功能跟像 Groupon 一樣的團購優惠卷。
– 新浪微博，中國版的 Twitter，則做得更多。它的「發布（Post）」按鈕允許使用者發布多達10種類型的內容，從文章到餐廳評價通通都有。當然，它也有一個跟「錢包」相關的功能。
– 在美國像雅虎一樣包羅萬象的「入口網站」主頁二十世紀初就已經消聲滅跡，但在這裡這樣的網站卻很長壽，如新浪、163.com、hao123 和騰訊新聞。儘管「普通」的 App 已經具備了類似門戶網站的功能，但入口網站本尊的 App 看起來也挺受歡迎。

「發現（Discover）」成為新的漢堡目錄

漢堡目錄（Hamburger Menu）大家應該不陌生， app 裡常常有這個圖案：

美國的 App 標準化了幾種方式來組織他們未歸類的項目（如設定和求助）。它們往往在最右邊的「更多（More）」選項或者在漢堡目錄裡，在 Facebook 的例子中，漢堡目錄圖案就是代表「更多選項」。

中國的 App 有時也這樣使用「更多」，但更常見的例子是在底部第二或第三的標簽，上面寫著「發現（Discover）」。「發現」提供了不一樣的樂趣，雖然不那麽重要，卻增強了 app 的核心功能。「發現」通常是用羅盤的圖案表示。

非常多 app 商店

許多 App 都內建 app 推薦頁（特別是遊戲），軟體下載有時是連結到App Store，有的則是繞過 App Store 通過 OTA 安裝。第三方 app 商店也會通過類似的方法提供一些熱門的App下載。

對於 Android 平台，有超過10個的大型 app 商店，開發者需要單獨發行和更新。即使 iOS 平台，依然有多種的軟體商店 – 我看到一個叫「蘋果助手（Apple Helper）」的廣告，它就需要安裝自定義的配置文件來使用。Cydia 依然很流行，而有破解（Jailbroken） iPhone 也比比皆是。

4. 帳戶及登入頁面

手機號碼和驗證碼

美國的網站和 app 通常採取以下兩種方式來登入：

1）傳統的電子郵件和密碼；

2）通過 Facebook 或 Google 登入。

最近我們還證實了社群 app 像 Facebook，也採用了手機號碼加驗證碼的註冊驗證方式。輸入手機號碼後，使用者會通過簡訊收到一個驗證碼。

但在中國，幾乎所有的 App 都提供手機號碼註冊跟登入功能（除非選擇性不使用）。這同樣適用於網站，甚至那些沒有 App 的網站。

QR 碼登入

許多網站還允許使用者通過其 App 內建的工具掃描 QR 碼進行登入。當你不希望使用者用實體鍵盤輸入自己的密碼時，這是理想的解決方案。有人告訴我說過去在中國，有很多人因為在網咖使用鍵盤錄入密碼而被盗帳號。

第三方登入

許多 app 還提供通過微信、QQ、新浪微博、或人人網第三方認證登入。在手機上，它會切換到相應的 app 。在網站上，你可以選擇傳統的登錄方式或用第三方服務的行動 app 掃描 QR 碼來登錄。

更多安全機制

銀行網站（以及支付寶）需要一個特殊的瀏覽器插件顯示來填寫密碼的區域。我的銀行甚至給了我包含某種加密密鑰的USB。我不知道該怎麽做，除了把它藏起來（免得弄丟啦）。

通常情況下，使用者登入頁面都需要填寫驗證碼（CAPTCHA），而美國的網站或者App只需要註冊的時候使用。

5. 通用的聊天介面

官方帳號（Official Accounts）

Wechat 開始將「官方帳號」的概念推廣至品牌和公眾人物身上。他們有點像 IRC 和 AIM 曾經的智慧型機器人——想像成 SmarterChild，但這次是銀行、電話公司、部落格、醫院、商場和政府機關服務。許多的機構慢慢開始利用官方帳號來替代本地化 App 或網站來為使用者服務。

（譯者註：SmarterChild 是在AOL Instant Messenger 和 Windows Live Messenger（以前的 MSN）提供的一個線上聊天機器人。）

你可以發送任何類型的訊息（文字、圖片、語音等等），他們會以自動回應的方式或傳送到客服人員的面前執行人工操作，之後再給予回應。

除此之外，任何一個特殊功能，你都可以在正常的聊天中使用到。你發出的語音訊息甚至可以通過第三方伺服器將語音訊息（前文提到過）轉換成文字。

官方帳號也可以發送新聞給他們的讀者。每個媒體都有自己獨特的運作方式，讓使用者們在行動裝置的螢幕上就像是在使用 RSS 閱讀器一樣。

這一模式的成功導致許多 app 都開始模仿聊天式的使用者介面，新浪微博自然地將這點應用到了它自己的官方帳號當中，當然 QQ 也這麽做了（而在許多其他 app 程序內，可以在「客戶服務中心」中找到。）。Grata 是一家可以為客戶提供設計官方帳號服務的公司，它可以幫客戶將服務植入進任何的 App 中。

app 開發商們不僅僅「借鑒」了一個常規聊天介面的設計思路，實際上他們複製了整套 UI，甚至是底部三個按鍵的目錄格式以及推送給訂閱者的媒體內容呈現方式。

動態表情和符號

在 Emojis 普及之前，笑臉表情在大多數西方的 app 中是直接使用傳統的符號來拼湊而成（例如常見的文字表情），能使用的大概有 15 個左右。