快速入局B端出海設計?這個案例教會你!

2 評論 5342 瀏覽 22 收藏 35 分鐘

編輯導語:近年來中國數字經濟不斷升級,在國際環境已經取得了一定的優勢。B端的出海設計作為一個風口和機會,許多人希望能夠快速入局,本篇文章從多個方面帶你快速入局B端出海設計,一起來看看吧!

本文主要面向體驗設計師們,文章從B端產品出海,多語言適配后的數據表格案例為基礎,分享產品出海前期需要哪些準備,設計過程中的思考,產出的設計策略。希望能夠幫助剛剛接觸或正在做出海產品的設計師同學,了解出海設計工作的底層邏輯。

一、前言

1. 背景

伴隨中國數字經濟的蓬勃發展,國內某些業務方向發展迅速,超過了其他國家互聯網的發展階段,使得很多互聯網企業選擇出海這條道路。

產品出海前期可以適配普適性的國際化適配方案,快速出海。但隨著產品的成熟度,由模式驗證逐步將會發展到市場拓展階段時,單純的國際化適配已經無法滿足當地用戶對本土化體驗的訴求

在品牌出海熱潮的企業案例中不難看出,有優勝者,當然也有人被“超越”。

快速入局B端出海設計?這個案例教會你!

在字節VS快手的先后入局中,TikTok趕超Kwai,除了本身產品策略的優秀把控外,TikTok團隊對當地市場有更為深入的了解,體驗設計也更符合當地人的使用訴求。相較于快手團隊長期駐扎北京,對海外市場缺乏了解,堅持著在海外市場簡單復制國內模式的老路子,未對產品策略及時調整,字節TikTok“本土化”落地的設計策略略勝一籌。

傳音:一個中國人幾乎沒聽過,卻稱霸了整個非洲的手機品牌。傳音能夠在非洲手機市場中占有一席之地原因,就在于他們的團隊,針對非洲市場用戶人群有自己一套完整的產品體系,本土化設計體驗迎合當地用戶,能夠讓用戶感受到品牌的誠意,使用起來也非常順手。

我重復提到的一個詞,就是本地化。

快速入局B端出海設計?這個案例教會你!

本土化設計解決方案:即體驗設計本土化,需要彌合當地用戶的使用習慣和認知差異,一般成本比較高,但是適配效果也是最好的。

國際化普適性適配方案:系統翻譯轉化多語言版本,進行統一的覆蓋,成本雖然低,但是專業名詞較多的產品容易出現行業術語不規范等問題。

國際化+本土化適配方案:一方面在產品基礎架構、技術服務、基礎體驗層面,建設國際化普適性適配方案,同時保留本土化設計拓展空間;另一方面,保證特色業務設計的靈活度,快速適應本土化體驗設計訴求。

目前生存下來的出海企業,無一不是擅長本地化運營甚至經營的優秀選手。通過全球化的產品思路與本地化經營策略相結合,出海產品才被賦予了真正的生命力,才讓海外用戶找到了熟悉的環境和歸屬感。

2. 遇到的問題

快速入局B端出海設計?這個案例教會你!

當產品逐漸發展成熟,數據也逐年復雜化。國際化業務的拓展,適配多國語言,除了本身語言適配時需要注意的事項,比如名詞專業性、圖形設計的全球化兼容度,還需要考慮不同地區的文化差異,用戶習慣等。

這就導致設計師在工作中,我們不僅僅是完成功能設計圖,還需要幫助產品融合當地的使用訴求和習慣,更靈活高效的落地在不同的國外市場。

快速入局B端出海設計?這個案例教會你!

產品出海的設計策略是否能夠落地,可以通過以下幾個維度進行考量:

交互體驗:頁面任務明確,用戶能夠在可控時間內完成工作任務;反饋清晰,操作流暢;輸入輸出時,本地用戶的數據能夠展示清晰。

界面體驗:文本在頁面內展示完整、清晰,保證頁面可讀性;頁面布局和規范符合用戶使用習慣和閱讀習慣,能夠被用戶理解。

信息質量:翻譯準確,用詞地道;行業專業術語的專業度,保證多語言適配時的信息的一致性。

內容體驗:本地信息呈現和輸入方式能夠完全符合用戶的閱讀習慣,保證用戶理解度;文字展示沒有拆行和顯示不全的情況;頁面中的圖形,保證全球化的識別度,沒有文化沖突。

因B端業務相對復雜,且行業壁壘高,下面針對基礎性的數據展示模塊,進行案例講解。

二、數據展示的體驗差異點

快速入局B端出海設計?這個案例教會你!

1. 表格

定義:表格又被稱為“表”,它能夠收集、整理、組織、分析數據的二維矩陣。

功能:表格能夠一次性瀏覽大量的信息,方便信息之間進行對比,能夠快速確定并執行多種復雜的操作。

組成:數據檢索、數據查看、數據操作

2. 產品英文版適配的現狀

1)數據檢索

標簽、篩選、搜索的組件長度基本靠文字的長度撐起來,長度不可控,適配多語言后,受語言特點影響,會出現占用橫向面積大的情況。

快速入局B端出海設計?這個案例教會你!

2)數據查看

適配英文后,標題變長,橫向面積有限的情況下,展示的數據量有限。如果列數過多,就需要橫向滑動查看,國內產品也有很多需要滑動查看的案例,但是多語言適配影響,更容易出現極端情況。

快速入局B端出海設計?這個案例教會你!

3)數據操作

操作按鈕的長度完全依靠文字去支撐,如果出現過長文字,操作按鈕的長度不可控。

快速入局B端出海設計?這個案例教會你!

三、借助工具和方法,定位差異點

當我們遇到問題,發現差異點時不知道如何解決,需要借助工具和方法,找尋機會。本土化設計最常見的兩種調研方式:競品分析、用戶調研(文化調研)。

1. 競品分析

競品分析:就是根據分析目標,對同類競爭對手的產品,做出具有針對性的客觀分析。

由于這次案例針對的是業務數據這塊內容,我們可以選擇了業內翹楚性競品,因為業內產品一般具有相似功能,我們可以從相似的功能的交互和視覺上進行了分析,找到“本地化”設計機會點。

業內翹楚性競品主要以英文為主,所以我們也找到了在適配英文方面的普適性適配規則。

快速入局B端出海設計?這個案例教會你!

在分析競品的同時,需要深入的理解自己的業務產品,才能做到知己知彼。

1)深入理解自身業務

首先,我司業務數據展示內容,具有以下幾個特點:

內容特點:列數很多、列標題長

交互特點:想要完整查看所有內容,表格需要不停的左滑

操作成本:新用戶查找數據效率低;下載數據操作流程較為復雜

使用人群:使用訴求不同,使用成熟度參差不齊

快速入局B端出海設計?這個案例教會你!

產品體驗設計工作需要在以下幾點上發力:

  1. 保證不同成熟度的使用者高效完成工作,數據查看效率的提升
  2. 不同的使用訴求都能夠得到滿足,數據篩選效率的提升
  3. 數據操作時沒有過多的阻礙,提升數據操作效率

明確設計目標后,有針對性的分析競品,了解競品,無論是同行業的翹楚,還是有相似業務的產品,都可以成為我們【競品分析】的對象,不要被局限住。

2)有針對性的分析競品

走查競品的數據搜索、數據篩選、標題表頭切換、數據表格查看。

以上是一個例子,我們要根據自己的需求,找尋競品與自己產品的差異點,綜合考量后進行分析決策。

2. 文化調研

文化調研針對的內容是用戶的生活習慣、工作態度、軟件使用習慣等價值觀方面的內容。特別當是一個產品需要落地于不同地區和國家時,產品設計必須尊重文化差異,避免文化歧義等內容的出現。

我們使用的理論框架:霍夫斯泰德文化維度模式。

它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解,從而更明白該文化群體中人們的行為傾向。

快速入局B端出海設計?這個案例教會你!

該理論總結了衡量各文化價值觀的六個維度:

快速入局B端出海設計?這個案例教會你!

了解用戶的生活習慣,對工作的態度,使用軟件的習慣,更深入了解當地用戶,去解讀他們的行為傾向。據此從產品的外觀、交互、功能、內容點上剖析,產出普適性的適配方案和設計策略。繼續在【本土化】設計上進行探索。

快速入局B端出海設計?這個案例教會你!

1)文化差異

對比分析新加坡和泰國兩地在文化價值觀上的差異,可以看到新加坡與泰國在個人主義和放縱與約束兩點上的得分幾乎一致,權利距離指數與男性化兩電話上也接近趨同,但是在不確定規律指數和長期導向上就有明顯的區別了,我們可以對這兩點進行分析,在設計方案上做出區分,其他內容則可以合并同類項,提高我們的工作效率。

快速入局B端出海設計?這個案例教會你!

新加坡不確定規避指數:8,屬于不確定性規避程度低的國家。

新加坡當地有83%的人信教,主要教派高達5種。新加坡政府實行宗教自由政策,提倡宗教與族群之間相互包容,和諧共處。那么當地的民眾,信仰自由,自身會有較強的安全感,對變化包容性也會更強,有著輕松的生活態度,對新興事物接受能力也很高。

泰國不確定規避指數:64,屬于不確定性規避程度高的國家。

泰國是佛教之國,90%以上的民眾信奉佛教,他們保守克制,有很多文化禁忌。比如女性避免觸碰僧侶,男性避免觸碰女尼,公共場所,男女不可有太親密的舉重,在泰國當地不可討論關于國王和王室的話題,有可能觸犯法律。民眾受到較為傳統的文化影響,心理上受到約束,往往對新鮮的事物保持克制的狀態,不愿意承擔一些風險。

舉例:比如我們平臺對于泰國管理員使用的平臺版本,制定了個性化的皮膚顏色,去迎合泰國當地的喜好,尊重文化差異,是我們做出本土化適配的第一步。因為新加坡民眾對新鮮事物的接受度很高,我們可以嘗試一些更為創新的設計,他們也能夠很快適應,這個時候就可以在符合用戶使用習慣的基礎上,做出一些改變,反而能獲得客戶的好評。

快速入局B端出海設計?這個案例教會你!

新加坡長期導向:70,屬于長期取向國家。

長期取向的國家,民眾注重堅持和借鑒,愿意計劃未來,設定長期目標。那么對于B端產品出海,除了本身業務優秀,還需要符合當地用戶的期待,我們要秉持長期主義,把內容做精做細,不斷滿足用戶的使用訴求,獲取更多的續費。

泰國長期導向:32,屬于短期取向的國家。

泰國人的消費觀念也趨向于短期取向,很多人會提前消費,花將來的錢享受現在的生活,存儲率很低。想要跟泰國客戶長期合作,除了本身要滿足客戶的需求以外,還需要不斷制造“驚喜”,偶爾放出一些新鮮的想法,證明我們在努力的為他們提供服務,讓他們感受到錢沒有白花,體驗上做到讓用戶滿意,續費率和深度合作也會隨之而來。

2)用戶調研:習慣差異

B端的場景下,我們很難使用共情的能力,去還原用戶場景,所以尤為需要通過充分的調研,圍繞用戶角色以及使用場景去做特征的洞察。

快速入局B端出海設計?這個案例教會你!

除了在文化價值觀上的差異點,還需要對去當地民眾的生活習慣、工作習慣、使用習慣進行一個了解。文化價值觀能從一方面表現出當地民眾的行為習慣,但是也需要結合當地的實際情況進行落地分析,比如泰國和新加坡同為東南亞地區的國家,但在習慣上也有明顯差異:

生活習慣:

雖然同為東南亞地區,泰國用戶普遍生活水平較低,有90%以上的民眾信奉佛教,他們很少嘗試新鮮事物。但新加坡用戶工作之外熱衷于自己的興趣愛好,時間利用充分,有興趣嘗試和感受新鮮事物,對其他國家帶來的新技術也具有較強的包容性。

工作習慣:

新加坡人工作嚴謹,在亞洲中,除了中國和中國香港,便要屬新加坡的工作時間最長了。

泰國人享受生活,工作:早9晚5,一周工作6天,對工作效率非??粗兀晳T早點做完事早點下班。

使用習慣:

成熟的使用人群,可以看密度很高的數據表格;新手用戶,需要標準化的服務,新手引導。

3)設計差異

文化價值的不同,在對應到四個設計方向:外觀、交互、內容、功能,都有哪些不同點呢?

快速入局B端出海設計?這個案例教會你!

外觀在視覺表現上,不同文化價值觀下的用戶需求有所區別,除了在品牌色上發力,我們還可以在界面組件規范進行調整,由于B端產品本身的業務特點就是嚴謹、科學,我們發揮的空間不多,一般在工作臺、項目看板、缺省頁插畫、圖標設計上結合本地化體驗需求進行設計,有共性的地方當然也可以一套方案適配,節省資源。

交互:B端產品的使用門檻和業務壁壘比較高,那么我們交互設計上,盡量簡潔直觀,符合用戶的操作習慣,配合新手引導等等。當產品適配多語言出海后,雖然不同地區的客戶,有些具有探索精神,但是他們也不會希望在一個辦公軟件上消耗過的時間。

內容:B端產品多語言適配后的產品,還是要在內容準確度上下功夫去認真校驗,避免用戶在使用時語義的不清晰。內容傳達的嚴謹、專業度,話術清晰明確,用戶認同感強,操作效率高。

功能:功能設計是產品經理負責的內容,交互設計師協助,平衡產品功能與用戶體驗。B端產品專業度高,所涉及到的功能操作較復雜,公司一般會對新手有培訓工作,配合引導手冊,我們能在設計上進行優化點,都是去幫助用戶提升功能操作效率的,比如新引導,情感化設計助力等。

3. 組件庫

如果一個UI組件庫,能夠符合大眾的普遍審美,并且提供良好的交互體驗,作為設計師或者開發者都會進行參考和應用。特別是有些組件庫還提供了國際化適配的內容和功能,可以為產品出海提供幫助,我們在設計時也可以進行參考和應用。

快速入局B端出海設計?這個案例教會你!

Element-UI是目前針對于 Vue 開發 PC 端項目的時候所使用到的一個主流 UI 庫,是現在基于Vue非常好用的桌面端UI組件庫。

特點:文檔清晰,學習成本低;提供的組件足夠使用;UI的風格符合目前大眾的普遍審美。

如果你想要做一個公司級別的產品,那么Element-UI基本可以滿足,但是在樣式上,難免存在同質化。

官網:https://element.eleme.cn/#/zh-CN

快速入局B端出海設計?這個案例教會你!

AntDesign提供了一套非常完整的 組件化設計規范 組件化編碼規范,大幅提高了部分產品的設計研發效率及質量。Ant Design 與 G2 的代碼質量和文檔質量都非常高,算是阿里提出 “大中臺,小前臺” 后外面可見的杰出作品。

可以適配多種語言,在設計時進行針對性參考,但是注意阿拉伯語適配存在瑕疵。

組件庫:https://preview.pro.ant.design/list/table-list/

快速入局B端出海設計?這個案例教會你!

Fusion Design是阿里巴巴開發的一套企業級的中后端UI解決方案。致力于解決設計師和前端在工作協同、產品體驗一致性、開發效率方面的問題。

特點

  • 主題多樣, 通過配置平臺切換主題
  • 豐富且優質的 React 組件
  • 設計稿-> 組件 -> 區塊 -> 項目模板,提供全流程的開發工具與設計工具

組件庫:https://fusion.design/pc/component/table

快速入局B端出海設計?這個案例教會你!

vuetify 是麻省理工學院的開源項目,文檔同樣支持全球化,它是基于 Android Material Design 風格的一個 vue 前端組件庫。

vuetify 上手的難度會比 elementUI 要高一些,主要是因為國外的人的思維和國內的人還是有一些不同,所以這就導致了 vuetify 對于國內來說會難免有一些水土不服,但是在出海設計的本土化中,存在一定的借鑒意義。

特點:

  1. vuetify 是國外團隊進行開發的一個基于 vue 的組件庫
  2. 文檔相對清晰,與國人的思維不同,學習成本高
  3. 提供的組件足夠使用
  4. UI 的風格是 Material Design 的設計風格,偏向于移動端項目
  5. vuetify 的 UI 樣式,與國人思維不同,所以比較適合需要彰顯個性的個人項目。

https://vuetifyjs.com/zh-Hans/

四、聚焦問題,產出方案

快速入局B端出海設計?這個案例教會你!

1. 數據檢索:方便可控

助力用戶在搜索數據時,更簡潔易用。

1)搜索:多語言適配需要留足空間,方便展示提示信息和用戶書寫。

基于中文本身的特點,很多詞語可以簡寫,打亂組合后幾個字就可以概括一句話的意思,但是英文有時很難做到這點,所以我們在考慮搜索框的寬度時,除了考慮中文狀態,還需要考慮適配多語言后的多種情況,盡量給文字留足可拓展區域。

①如圖案例:點擊搜索后,搜索框的寬度變長,方便書寫;那么在不使用時,默認寬度也沒有占用過多的橫向空間。

快速入局B端出海設計?這個案例教會你!

②搜索項過多,新區域進行承載

特別是專業度高,業務復雜的數據表格,可搜索的內容非常多,無法一一羅列出來時,可以用彈窗去承載內容,給客戶清晰的提示。

快速入局B端出海設計?這個案例教會你!

2)篩選

國內適用的平鋪篩選,在多語言適配中容易出現占用過多屏幕的情況。

①高頻篩選外露,低頻篩選項收起

我們可以根據產品實際使用的情況,進行篩選項的高頻低頻劃分,通過前端埋點的手法,獲取使用數據,把使用最高頻次的篩選項外露,其他內容進行收納。節省空間,合理利用屏幕。

②低頻篩選項使用氣泡卡片承載,提高屏幕利用率,節省屏幕空間

低頻篩選項雖然收起了,但是使用時展開,還是會占據屏幕較大的空間,這時我們可以使用以下這個方法,將篩選項的內容使用氣泡卡片去承載,應用狀態下,也能保證屏幕的利用率。

快速入局B端出海設計?這個案例教會你!

③ 表頭篩選,減少屏幕滑動

使用表頭篩選的前提,是相互替換的幾個表頭,要具有可替代性。切忌盲目使用,影響用戶瀏覽和判斷的效率。

快速入局B端出海設計?這個案例教會你!

3)標簽

tab切換的標簽名稱需要精簡,當標簽長度超過一定限制后,會降低用戶操作的效率,提升判斷的成本,多語言適配時,需要專業的翻譯同學幫助翻譯和簡寫,避免出現極端情況。

快速入局B端出海設計?這個案例教會你!

2. 數據查看:高效易用

1)控制列數

前面有提到過的一個點,當一個數據表格的使用角色很多,使用訴求很復雜時,我們數據表格列數也會增加,列數需要在產品邏輯和用戶體驗兩者間進行平衡,確保每個用戶在使用時,都能夠方便快捷的找到自己想查看的數據,這里借助一句設計圈的老話:“設計的盡頭是“自定義”,我們可以通過給用戶自定義展示內容的權利,來滿足他們的使用訴求。自定義列只選擇自己想要看的內容即可。

自定義列這個功能,相信很多從事B端行業的同學都已經非常熟悉了,那么在產品出海后,多語言適配的環境下,我們需要考慮到兩點是什么呢?

答案:一個是用什么容器承載所有列名稱,另外一個是操作時的交互方式。

①承載容器:列數10-15個,可以側滑出小號抽屜進行配置;當列數超過15個,而且具有分類屬性時,我們可以用彈窗去承載。

②交互方式:勾選即展示實時預覽和彈窗內配置完成點擊確認后相應的兩種方式,根據需求特點進行選擇。

快速入局B端出海設計?這個案例教會你!

2)控制列邊距

一旦列數增多,我們的頁面橫向空間就收到了擠壓,而且適配多語言后,某些語言會加大文字的橫向長度,這個時候,我們需要考慮好極端情況的列邊距。提前與開發同學溝通好,在交互文檔內標注清晰,避免數據過于緊湊,影響數據識別度。

快速入局B端出海設計?這個案例教會你!

3. 數據操作:便捷適配

1)操作圖標使用具有全球性識別度的圖標,避免模糊含義。

圖形需要滿足用戶的認知,可以多去看成熟度高全球性產品和業內翹楚性競品,它們使用了哪些圖標,保證我們選擇的圖標具有全球識別度。

快速入局B端出海設計?這個案例教會你!

2)操作圖標盡量配合文字一起使用,降低用戶操作成本和認知負擔。

有很多專業的內容,如果只用圖標無法保證能夠理解,這時,我們需要文字配合圖標進行展示,一個是可以保證用戶的使用,另外一點是能夠培養用戶的使用習慣和圖標認知。

快速入局B端出海設計?這個案例教會你!

3)盡量給操作按鈕留足橫向空間,避免適配時,出現“疊羅漢”等尷尬事件

圖片中的案例,這個圖標它的內容無法簡寫,必須全部展示才能讓用戶知道這個按鈕的功能是什么,為了保證這樣的按鈕可以正常使用,我們需要給它們留足空間,跟前端小哥哥也要打好招呼,交接文檔要明確清晰。設計驗收環節,對這樣的例子也要重點驗收,保證用戶使用時的操作體驗。

快速入局B端出海設計?這個案例教會你!

五、團隊協作,檢驗結果

1. 設計自查,提前預知適配效果

設計方案時,實時預覽多語言適配后的效果,保證設計方案的可執行性。在設計過程中,我們需要提前校對文字適配后的視覺效果,這里推薦一個Figma的插件:Translator,能夠一鍵操作更換其他語言,可以幫助設計師檢查實際效果。

快速入局B端出海設計?這個案例教會你!

2. 團隊翻譯協作,保證信息質量

通常公司對于多語言適配是有專門的翻譯團隊進行文案校對的,通力協作保證信息質量和翻譯的準確性,保證用詞地道,正確易讀;特別是行業術語統一、專業、無歧義。專業翻譯團隊校對的主要任務是彌合差異,保證內容體驗,特別是符合本地人閱讀信息語言習慣,還有呈現和輸入方式都要符合當地人的閱讀習慣。

快速入局B端出海設計?這個案例教會你!

3. 開發后設計檢驗

開發完成后,著重檢查字體顯示情況:保證文字的可讀性:沒有出現單詞錯誤或者拆行的情況。優化本土文化融合度:頁面的圖形,保證用戶能夠理清晰解,沒有歧義或者文化沖突。

快速入局B端出海設計?這個案例教會你!

六、結語

作為設計師,我們可以從產品內核到感知層再到產品的外延體驗層去構建用戶對我們的信任,用戶也是從從體驗產品開始慢慢了解產品,是逐漸深入的過程。所以出海產品的體驗設計價值點,就在于彌合與當地用戶的體驗差異,助力用戶與產品建立信任,持續成長到產生依賴,一步步拓展信任關系,最終驅動整體商業效率的提升。

讓用戶找到了熟悉的環境和歸屬感,就賦予了出海產品真正的生命力。

這篇文章是基于我個人的工作經驗和項目案例進行分享的,難免存在不夠全面的問題,歡迎大家分享討論。因國內互聯網的蓬勃發展,很多設計師小伙伴都在從事出海設計相關的工作,那么希望大家一起分享經驗,讓我們的設計能力有更全面的提升。加油!

相關文章:

https://mp.weixin.qq.com/s/AI9E5WFcsoxfem65XyGqRw《出海產品設計之多語言設計指南》

http://www.aharts.cn/it/5178910.html《中國產品出海啟示錄》

https://mp.weixin.qq.com/s/LAAVUFaWMuNGHNTcGZW-1Q《出海場景下做體驗設計的體系化探索》

本文由郝小七指導http://www.aharts.cn/u/917803

 

本文由 @YIGEEllie 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 有理有據,作者對B端產品出海設計整個業務流程非常明晰,一目了然。

    來自江蘇 回復
  2. 讓用戶找到了熟悉的環境和歸屬感,就賦予了出海產品真正的生命力。

    來自廣西 回復