互聯(lián)網(wǎng)出海產(chǎn)品的ui/ux要如何設(shè)計呢?

時至今日,隨著中國互聯(lián)網(wǎng)產(chǎn)品的飛速發(fā)展壯大,越來越多國內(nèi)產(chǎn)品計劃著向海外擴展,遠的有早就在布局海外市場的微信,近的也有超人氣產(chǎn)品抖音。而閱文集團在最近兩年也持續(xù)在海外業(yè)務上發(fā)力,Webnovel 正將中國優(yōu)秀的小說作品展現(xiàn)給全世界的讀者們。那么,當我們在設(shè)計服務于海外用戶的產(chǎn)品的時候,有沒有發(fā)現(xiàn)一些國外產(chǎn)品設(shè)計和中國不太一樣的地方呢?今天我們不妨從品牌視覺、字體、特性功能以及產(chǎn)品細節(jié)等多個角度來分析下這些可能存在的區(qū)別。

品牌視覺

顏色作為用戶接觸產(chǎn)品時對產(chǎn)品的第一感知,任何產(chǎn)品在對待色彩這個問題上都會非常慎重,大部分的產(chǎn)品色調(diào)都是基于品牌主色調(diào)或通過情緒板分析得出的。通常一個以女性用戶為目標的產(chǎn)品會選用粉色,而一個主打科技概念的產(chǎn)品肯定逃不過藍色或綠色。

有人統(tǒng)計了2015年 App Store 免費榜下載的前200個產(chǎn)品的 icon 顏色,將它們分類成紅色系、綠色系、藍色系以及黑白灰色系??梢钥闯鲈谌澜绶秶鷥?nèi),和國內(nèi)一樣,紅色系和藍色系的產(chǎn)品依舊是最安全的選擇。如果再做細分的話,橙色、黃色、粉色、紫色等顏色也不罕見,這與國內(nèi)產(chǎn)品紛紛扎堆選擇「科技藍」與「喜慶紅」形成了反差,在國內(nèi)的前100名產(chǎn)品中只有5款綠色產(chǎn)品而根本找不到黑白灰色系的產(chǎn)品。這時不難得出一個結(jié)論:倘若你的產(chǎn)品想從 App Store 列表中快速區(qū)別于其他產(chǎn)品,選擇綠色或者黑白灰色系不失為一個機智的選擇。

值得一提的是,極簡主義在北美北歐等國家備受推崇,相應的黑白灰或單色調(diào)應用會相當常見,但在國內(nèi)黑白灰可以說是一種禁忌。而在東南亞、南歐以及南美,這些地區(qū)有著熱情與開放的文化,在鐘情豐富多彩的配色同時也并沒有那么多的顏色禁忌。

在國內(nèi)的「喪文化」與國外的「極簡主義」融合之后,年輕人會通過黑白灰配色來標榜個性。

建議:如果通過理性分析得出的色彩方案,其實不必太過糾結(jié),在沒有過多視覺禁忌的前提下,海外用戶的接受程度是很高的。大家可以盡量大膽的用色,只要符合自己產(chǎn)品的調(diào)性即可。同時注意與同類型產(chǎn)品之間的區(qū)分與競爭,畢竟在視覺領(lǐng)域,與眾不同是一個加分項,更能幫助產(chǎn)品從諸多產(chǎn)品中脫穎而出。

接下來說說吉祥物與標志。

上圖是在網(wǎng)上流傳很長時間的一張圖,充分展現(xiàn)了中日美三國的圖形設(shè)計特點。不難發(fā)現(xiàn)國內(nèi)的企業(yè)對動物或吉祥物有著特殊的鐘愛,歐美企業(yè)傾向于用各種形狀或抽象圖形來作標志,日本企業(yè)幾乎清一色都是英文字。日本在明治維新后開始大量吸納西洋技術(shù),其中也包括部分文字和語言,而日本的超級財團或老牌企業(yè)大多也是誕生在那段時間,一方面為了響應國內(nèi)全面西化的號召,另一方面也是相當有國際化視野和前瞻性的考量,所以大部分企業(yè)都是用了西文字母來做品牌標志,后來的公司也就延續(xù)了這一「國民習慣」。

而歐美其實也并不像上圖中所表達出來的盡用圖形,也會有西文單詞(比如諸多奢侈品牌、可口可樂、樂高等)或動物形象(比如 Twitter、Evernote等)作為標志, 不過最終都會把這些形象圖形化,這也正說明這些國家和地區(qū)對不同形式的表達接受度更高。

那為什么中國的互聯(lián)網(wǎng)產(chǎn)品偏愛使用動物作為標志呢?這大概是因為這些小動物是幾乎無人不知的,可愛、親切的形象更容易被廣大的用戶群體接受,也更容易被人記?。ū热绾芏鄧鴥?nèi)的互聯(lián)網(wǎng)產(chǎn)品傾向于用疊詞作為品牌,比如探探、陌陌、脈脈等)。而且另一方面可以看出我們有著比較明顯的從眾心理,當某個產(chǎn)品獲得成功,有些產(chǎn)品傾向于學習這款產(chǎn)品成功的模式而非自己另辟蹊徑。

建議:當我們需要推廣面向世界的產(chǎn)品時,更具國際化、更有通用藝術(shù)價值的形象會更容易被最廣大的用戶群體接受,如果單獨從某個具象的角度切入,難免會過于局限,如果造型過于可愛則容易只抓取到喜歡「可愛」這個特點的用戶,過于復雜的圖形也不利于用戶的記憶。

字體排版

文字排版的目的在于提高信息獲取的效率,在這方面應該是設(shè)計師能夠歡欣鼓舞的一個部分,因為西文世界有著比中文多得多的屏顯字體可供選擇,其字體家族也相應的豐富得多,我們也能更加充分的利用字體的特性去服務于產(chǎn)品,提高信息效率。那么我們在海外產(chǎn)品的文字排版中有哪些值得注意的部分呢?

與中文不同,同樣的內(nèi)容也許中文兩個字的寬度就可以實現(xiàn)了,英文則可能需要很長的寬度,更不提其他小語種了,因此我們要考慮屏幕的寬度以及適配,一行之內(nèi)不要顯示過多的內(nèi)容或模塊。

西文的字體排版有相當多的玩法可供嘗試,比如作品名通常會使用意大利體( Italic aka. 斜體),小型大寫字母的廣泛使用( Small Capital ),段落文本首字母下沉等等。

注意不同系統(tǒng)對默認字體的表現(xiàn),如果要嵌入第三方字體,確保已經(jīng)獲得授權(quán)。

充分利用字體家族的字重選擇,提高內(nèi)容的層級劃分,提高閱讀效率。

△ Medium 的 Design Lead 通過大量的測試調(diào)試出最佳 web 呈現(xiàn)方式的下劃線。

產(chǎn)品整體質(zhì)感和品質(zhì)的提升是積少成多的,而精良的字體排版則是優(yōu)秀產(chǎn)品的重要組成部分。良好的排版不一定能幫助你更好地理解內(nèi)容,但確實會讓你使用感覺更好,從而能更加積極地對于體驗做出響應。

閃屏

閃屏即是 iOS 人機交互指南(下文簡稱為 HIG)中提到的「Splash Screen」,不過它出現(xiàn)在 HIG 中是以反面形象出現(xiàn)的,HIG 指出:

Don’t advertise. The launch screen isn’t a branding opportunity. Don’t design an entry experience that looks like a splash screen or an 「About」 window. Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.

對于產(chǎn)品冷啟動之后呈現(xiàn)給用戶的界面,Apple 希望這個頁面承載的是「緩解用戶等候數(shù)據(jù)加載時的焦慮心情」,建議將 App 首頁的骨架結(jié)構(gòu)以圖片形式呈現(xiàn)出來,而不要對這個頁面進行任何美化、包裝、宣傳等行為。

然而在國內(nèi),機智的商人們開始對這塊空白區(qū)域打起了主意,大家紛紛利用這塊區(qū)域進行品牌宣傳或情懷展示,比如微信的啟動頁,又比如新浪微博的啟動頁。更有甚者,也是目前最眾所周知的做法,幾乎每家國內(nèi)產(chǎn)品都開始利用啟動頁進行商業(yè)營銷,已經(jīng)成為了很多產(chǎn)品不可或缺的收入之一。

△ 海外主流產(chǎn)品會將啟動頁用于品牌展示,而右邊兩個 Facebook 家產(chǎn)品都嚴格恪守著 HIG 規(guī)范

在海外的產(chǎn)品中,尤其是歐美主流產(chǎn)品中,尚未見到過利用啟動頁做營銷的案例,絕大部分都是做簡單的品牌宣傳。一旦應用內(nèi)容加載完畢就直接進入了產(chǎn)品,而國內(nèi)大部分產(chǎn)品都需要看這個大概3秒左右的「廣告」,即便它提供了「跳過」的選項,也是對用戶體驗的損害,既然可以跳過,說明產(chǎn)品的內(nèi)容已經(jīng)加載出來了,這種情況下還需要我多點擊一下跳過?不過在國內(nèi)市場已經(jīng)形成了這樣的氛圍,說明這個操作的確是對產(chǎn)品與企業(yè)有價值,那么設(shè)計師就需要思考如何將商業(yè)利益和用戶體驗之間的平衡拿捏好。

建議:面向海外用戶的產(chǎn)品需要在商業(yè)利益與用戶體驗中做個抉擇,確保在盡可能的降低對用戶使用產(chǎn)品體驗的前提下做到利益最大化,減少展示時長或?qū)⑵放婆c營銷結(jié)合會是個不錯的選擇。

小紅點

相信每個中文互聯(lián)網(wǎng)的用戶對 App 里面的小紅點都不會陌生,小紅點在國內(nèi)很多應用中承載著可能與用戶關(guān)聯(lián)不大,甚至伴隨推送出現(xiàn)的場景,對用戶的使用從某些意義上來說是一種打擾。而需要說明一下的是,我們在這里說到的小紅點不是 App icon 上的帶數(shù)字的通知數(shù),而是界面中的一個個小紅點,以微信為例,從功能角度來講,小紅點通常被用于提示不重要的新消息以及面包屑引導(引導用戶使用指定功能)。而微信已經(jīng)是產(chǎn)品設(shè)計上比較克制的 App 了,你通常不難辨別小紅點的意圖,但是在其他很多產(chǎn)品中,紅點已經(jīng)被濫用了,大多帶有推廣以及產(chǎn)品功能曝光的指向性。

而在海外產(chǎn)品中,要找到我們所指的「小紅點」不容易,在帶有社交功能的產(chǎn)品中可以常見數(shù)字提示的「Badge」,也就是通知數(shù),如果出現(xiàn)了小點點,從產(chǎn)品含義上也很容易直觀的了解到它的含義,大部分場景是用于提示有新變化,比如 Twitter 的時間線如果有更新,會有個藍色的小 Badge,又比如 Youtube 的訂閱內(nèi)容如果有新內(nèi)容出現(xiàn),也會有個紅色的小 Badge。

建議:勿濫用小紅點,如果要使用,需謹慎考慮使用場景與目的,且無需局限于紅色,Badge 的核心作用是將和用戶密切相關(guān)的內(nèi)容提示給用戶。

權(quán)限獲取

而說到中國特色產(chǎn)品設(shè)計,相信對產(chǎn)品體驗有一定要求的同學對很多產(chǎn)品的「啟動權(quán)限三件套」會感到不爽。有沒有試過當你下載一款新軟件,一打開,它就請求獲得你的通知權(quán)限,你還沒有做出決策它馬上又請求你的通訊錄權(quán)限(這個現(xiàn)象在微信興起之后逐漸消失),如果你手速夠快點擊了同意或拒絕,它馬上又會要求獲取你的地理位置權(quán)限。舉個令人震驚的例子,假如你聽著歌兒點開騰訊投票的小程序,它會將你的音樂暫停了,也說明它取得了你的音頻播放權(quán)限,你會有點詫異:為什么一個投票程序會需要我的音頻權(quán)限呢?類似這樣的一頓操作之后,如果不是什么非用不可的產(chǎn)品,我除了想刪掉它已經(jīng)沒有別的想法了。

iOS 的應用還可以拒絕權(quán)限請求,可在安卓端,如果你不同意開啟權(quán)限就很可能無法使用這款應用。如此有違用戶體驗的現(xiàn)象在國外也常見嗎?有,但是情況好很多,國外產(chǎn)品在啟動 App 的時候除了請求通知權(quán)限,很少有「二連擊」、「三連擊」的情況存在,而且國外已經(jīng)在產(chǎn)品設(shè)計階段就將權(quán)限的請求分類好,根據(jù)不同類型和場景來具體分析權(quán)限獲取。

△ Google 的 Material Design 定義的獲取權(quán)限的原則

只有直接影響產(chǎn)品使用的權(quán)限在一開始請求(比如網(wǎng)絡接入權(quán)限),而其他權(quán)限需要獲取的時候則最好基于使用場景(上傳頭像時申請獲取訪問相冊權(quán)限)和一定的前置教育(先告訴用戶為什么我需要獲得這個權(quán)限)。當用戶感受到被尊重了,自然也不會因為一些簡單的問題而流失了。

建議:除非影響產(chǎn)品功能使用,則不主動申請非相關(guān)權(quán)限,其他大部分的權(quán)限獲取要配合上下文或者輔以適當?shù)母嬷c教育。否則用戶因此拒絕了權(quán)限要求或直接刪掉了應用,這是非常得不償失的。

用戶等級

接下來我們看看一個國內(nèi)外顯著的區(qū)別——處理用戶的等級的方式了,而國人最耳熟能詳?shù)挠脩舻燃壞^于 QQ 的等級了,還記得小時候為了等級變高,不少小伙伴會用手機或電腦掛著 QQ,刷一個個的星星月亮太陽。在那之后,似乎每一個產(chǎn)品在對應的用戶體系中都會加入等級模式,屢試不爽,似乎我們每個人都渴望著比別人看上去更「高級」。

這種偏游戲?qū)傩缘墓δ茉诤M獾膽弥袑崒俸币?,筆者不太確定是否全世界的用戶都和我們一樣有著相同的等級區(qū)分意愿,據(jù)說,因為國內(nèi)有大量的用戶在現(xiàn)實中面臨無法向上階層躍升的困境,只好寄托于在虛擬世界出人頭地。而對出海產(chǎn)品來說,一方面在海外應用產(chǎn)品設(shè)計中極少進入游戲化設(shè)計的功能,另一方面也不清楚是否有其他政策或文化的風險。不過說到底,這樣的功能是為了盈利而設(shè)計的,海外也不完全沒有這些功能,只不過他們會把用戶區(qū)分成用戶、會員、高級會員這樣的訂閱制或會員制,而區(qū)分這些身份的因素大部分和付費情況相關(guān)。而各種會員身份之間的區(qū)別會有較為詳細的規(guī)則說明,讓用戶一目了然。

建議:用戶等級作為一種游戲化的設(shè)計,難以確定海外用戶的喜好,可以進行A/B測試進行驗證。為規(guī)避潛在未知風險的方式就是將規(guī)則透明化,并讓用戶能夠輕松的獲取這些信息和了解規(guī)則,這樣的確能有助于滿足不同用戶的虛榮心,提升用戶黏性和忠誠度。

消費體系

既然說到訂閱制,就不得不說說消費體系,我們可以分兩種場景來談,一種是直接消費的電商平臺,另一種則是虛擬消費的充值行為,在此我們要談論的就是后一種場景。虛擬消費本質(zhì)上是購買服務,這種場景在游戲中最多見,在王者榮耀中充值點券,在 QQ 中充值 Q幣進行虛擬商品交易(如 QQ秀)都是很典型的場景。

虛擬幣的優(yōu)點在于它可以提升產(chǎn)品的品牌感知以及趣味性,同時降低用戶對于消費的潛在壓力,通過固定的匯率增加虛擬幣的數(shù)值,某種程度上的確可以刺激消費。不過這在海外更多的出現(xiàn)在游戲中,而且通常需要一定的成本去解釋、說明貨幣規(guī)則,如果在非游戲類產(chǎn)品中使用復雜的虛擬貨幣體系,而產(chǎn)品本身不具備游戲的趣味性和娛樂性,再配上復雜的消費、交易體系,相當于變相將用戶消費擋在門外。

△ 海外產(chǎn)品中會員訂閱制是主流,左起依次是 Evernote、Medium、Netflix、Dropbox

在國外的產(chǎn)品中,如果談及為服務進行消費,會員制已經(jīng)成為了主流的消費模式,付費會員制提供了較非會員制更加穩(wěn)定的用戶聯(lián)系,同時收費模式使得企業(yè)可以權(quán)衡成本因素,經(jīng)過多年諸多產(chǎn)品的推廣,基本上消除了教育用戶的成本,是值得采納的消費模式。

建議:充分利用虛擬幣能降低用戶消費壓力的優(yōu)勢,簡化貨幣體系,降低用戶的認知成本,或推出付費會員模式,迎合主流消費模式。

產(chǎn)品細節(jié)

值得補充的,是一些對于產(chǎn)品細節(jié)點的追求。很多公司的產(chǎn)品在初期追求堆疊功能,卻忽略了對功能以及細節(jié)的打磨,其實在可以承受的范圍內(nèi)對一些產(chǎn)品細節(jié)進行優(yōu)化是非常能錦上添花的。也許有人會認為,在那些沒人在意的地方浪費功夫,有什么用?可不要小看了一些產(chǎn)品中的小細節(jié),有些細節(jié)一旦被用戶使用過,就再也回不去了(比如下拉刷新這個手勢,剛開始也許是一個沒人知道的冷僻操作,但是一旦用戶嘗試過這種提高效率的手勢就不會再去考慮低效的操作了)。還有一點,產(chǎn)品的小細節(jié)能夠讓用戶感受到情感的傳遞和產(chǎn)品的人性化,用戶知道自己是在和一個有溫度的產(chǎn)品交互,而不僅僅是個生硬的機器。

在產(chǎn)品細節(jié)的處理上,以往主要還是看海外團隊的表演,比如上圖的 Instagram,當你在瀏覽一張圖片或視頻內(nèi)容超過三秒的時候,評論的輸入框會自動打開,通過數(shù)據(jù)計算,當用戶在一篇帖子前停留超過3秒時,該用戶將大概率會想要發(fā)表評論,而這心領(lǐng)神會的一個動作,能節(jié)省用戶一步操作,讓用戶切實感受到「方便」,而這又不會打擾到那些誤操作的用戶,因為他們其實很難注意到這個細節(jié)的變化。

又比如音樂巨頭 Spotify,當我們欣賞喜歡的音樂的時候,有時會打開歌詞去看。Spotify 巧妙的在歌詞之間的間隙,會出現(xiàn)這首歌的歷史資料或者創(chuàng)作背景、趣事等。這個獨特的小彩蛋著實讓人感到驚艷,下次和小伙伴聊天又有新姿勢可以炫耀了。

△ 嗶哩嗶哩的密碼輸入體驗

 

△ 網(wǎng)易云音樂的生日暖心推薦

國內(nèi)產(chǎn)品最近幾年可謂在細節(jié)的處理上也不甘落后,前有嗶哩嗶哩在密碼輸入的時候2233娘會激萌地捂住眼睛;后有網(wǎng)易云音樂會在用戶生日的時間將「每日推薦」一欄變更成「生日快樂」字樣。這樣的設(shè)計都能切實的讓用戶感受到溫暖與被尊重。

剛剛獲得 Apple 年度設(shè)計推薦的 NOMO 相機,就是以主打懷舊與情懷著稱,NOMO 模擬了膠片時代的多款經(jīng)典相機的外觀與成效。如果你使用的是 INS W 相機,你還可以體驗到逼真的拍立得照相體驗,拍攝之后畫面會慢慢從相紙中顯影,高度模擬出現(xiàn)實中拍立得的效果;如果你等不及,還可以像甩相紙一樣晃動手機,加速顯影,體驗之圓滿令人驚喜。

總結(jié)

在進行海外產(chǎn)品的設(shè)計,其實更多的是要克制,要與自己的既存觀念與習慣做對抗。在廣泛已成共識的部分我們可以加速快走,而在一些不太明確的領(lǐng)域,我們不妨去多做競品分析和用戶調(diào)研,切實的去了解這個市場和這些用戶,避免因為偷懶而導致一些不必要的麻煩。

當產(chǎn)品發(fā)展到一定的體量,也不妨去用一些產(chǎn)品和設(shè)計方面的細節(jié)去感染用戶,將產(chǎn)品更加情感化,不僅能增加用戶黏性,更能提高產(chǎn)品的自傳播能力。畢竟誰不喜歡那些懂自己的「人或物」呢?

 

如果想了解更多出海產(chǎn)品的設(shè)計案例,可以下載我們推薦的英文版模板

 

原文公眾號:「閱文體驗設(shè)計YUX」

每天更新,
全站高品質(zhì)素材免費下載!