不知道你是經常會遇到這樣的情況：

拿到一個APP產品不知道如何去分析他的好壞，又或者總是分析的很片面，要么僅僅是交互，要么僅僅是視覺

那么有什么好方法能夠幫助我們更全面更系統的分析一個APP產品的好壞呢？

首先

我們需要明白的一點是，我們在分析產品時，應該從山頂逐漸往下看，才能夠看到山的全貌，站在山腳下只能看到自己視野幾百米的范圍。

接下來

我們去分析一個APP產品的時候，就可以通過一個萬能的公式更全面更系統的去層層剖析:

1、戰略存在層(它為什么存在)

產品的核心驅動力是什么？

這個產品帶給用戶的價值是什么？

這個產品帶給企業的價值是什么？

2、能力范圍層(我們自身能力)

能做什么，不能做什么？

現在的能力儲備是否能夠支持？

做到這個需要什么樣的能力儲備？

3、資源結構層(內外部資源有哪些)

產品的利益相關者有哪些？

內外部有哪些資源？

競爭對手是哪些，相對于他們優勢和劣勢在哪里？

4、角色框架層(產品各個角色)

體:產品構建的矩陣如何，這個產品處于什么位置？

面:各個板塊的使用場景、目的是什么？

線: 頁面的布局如何？

點: 這個功能的目的是什么？用戶如何交互？使用流程是否合理？...

5、感知層(如何感知產品的不同)

感知層很多時候設計師都會糾結在細節里面，總會分析色彩、圖標、間距等。而感知層最重要的是要分析這個產品的調性如何？和其他同類的差異在哪里？界面設計是否能夠吸引用戶？

最后

我們通過這個五個步驟去分析下今日頭條APP

1、戰略存在層

核心驅動力：算法推薦+優質內容

用戶價值：今日頭條帶給用戶的價值是通過了解用戶的喜好，精準推薦給用戶最感興趣的內容，提升用戶的閱讀效率

產品價值：以今日頭條作為基礎的流量池為其他產品相互導流

2、能力范圍層

2019以前今日頭條的slogan是“你關心的，才是頭條”定義今日頭條的核心是推薦算法

而2019年之后今日頭條的slogan是“信息創造價值”定義今日頭條的核心是打造優質的內容，讓信息創造價值

今日頭條從技術到內容的轉變，靠的是今日頭條的長久以來的能力儲備，所以我們會看到今日頭條推出的一系列對內容創作者的扶持計劃。

3、資源結構層

今日頭條的利益相關者：消費信息的用戶、產生內容的創作者、廣告商

競爭對手: 騰訊新聞（騰訊）、網易新聞（網易）、搜狐新聞（搜狐）、微博...

優勢:今日頭條通過推薦算法構建了早期產品的核心競爭力，吸引了大批大V和信息消費者，具有先發優勢，之后又通過內容產品矩陣構建自己的護城河

劣勢: 競爭壓力大，都在競相進入內容領域

4、角色框架層

體: 今日頭條經過幾年的發展，逐漸構建起一個內容聚合平臺（圖文、短視頻、長視頻...），作為基礎的流量池，為其他的產品相互導流

面: 

首頁模塊你可能感興趣的，和你感興趣的內容

西瓜視頻，你可能感興趣的短視頻

放映廳，你可能感興趣的長視頻

所以，我們從導航欄就能夠可以看到今日頭條產品所構建起來的面：

核心是千人千面的定制化推薦，核心之外是圖文、短視頻、長視頻

接下去，就是線和面的分析，這就到了布局和功能層級了，這是交互方面的內容，我就不再一一細說了

線: 頁面的布局如何？

點: 加這個功能的目的是什么？用戶如何交互？使用流程是否合理？

5、感知層

人去感知一個物體通常常是通過5種感覺：視覺、聽覺、味覺、嗅覺、觸覺?；ヂ摼W的產品不像線下體驗店5感都能夠體現，而我們感知互聯網產品主要通過視覺和聽覺這2種感覺。

• 我們聽到的是今日頭條的報道、今日頭條的視頻廣告

• 看到的是是今日頭條的產品、廣告圖。而的核心是今日頭條的"信息創造價值"，圍繞這個最基本的核心，給用戶的感知才是一致的，才是和其他產品塑造差異化的核心要點。

  
  

基于這些我們再去分析里面的細節就游刃有余了

比如，同為新聞自媒體平臺，今日頭條把內容創作者放置在列表頁明顯的位置，而網易新聞、騰訊新聞在內容列表創作者的名字卻被弱化了，原因就在于今日頭條定位的是自媒體新聞平臺，重點在于內容創作者，而網易新聞、騰訊新聞定位的是新聞媒體平臺，重點在于內容。

文章來源：站酷  作者：饅頭UX

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

互聯網因為技術的快速發展，用戶的普遍性決定了互聯網所必備的特點就是：創新、用戶體驗、快速迭代。而競品分析應該貫徹應用的不同階段。

我們在做競品分析時，首先確定競品分析的顆粒度，競品分析可以做得更細，但是必須根據分析的動機、需求出發，清晰自己的目標，來判定做怎樣詳細的一個競品分析文檔（根據項目大小、時間限制等，選擇適當的競品分析程度）

01 競品分析四大流程

1.確定競品分析的目的：明確分析目的，和控制分析產出一樣重要，分析是為了有價值的情報收集，而不是無意義的跟蹤復盤。

2.篩選出目標產品：從行業出發去選擇對標的競爭對手和潛在的競爭對象。

3.收集競品資料：從分析的緯度來確定，不同職能區分，側重點會不同（但各緯度是有機聯系的，不可以孤立對待）。

戰略定位、盈利模式、用戶群體、產品功能、產品界面（交互方式、視覺表現）

4.分析、輸出競品分析報告：可采用【總-分-總】的結構

[ 總 ]

首先說明分析目的，然后拿出各模塊的結論，這是第一個；

[ 分 ]

圍繞這些結論，展開你的分析過程，所有的過程分模塊展示、最好要有數據支撐；如果沒有，就要有邏輯表達，這是中間的部分；

[ 總 ]

最后得出你在這次分析之后的感受，認為產品應該遵循什么、借鑒什么、避免什么，這是最后一個。

注：分析要追求的是客觀性，不要為了分析而分析，不要為了結論而拼湊論據，分析結論的可用性并不應影響分析的初衷。

02 具體分析從哪些點入手

1.市場分析：市場規模、市場趨勢、月活躍人數等

2.用戶分析：用戶地域分析、用戶使用時段分析、用戶年齡段、用戶性別比例等

3.目標用戶需求：A、B、C

4.產品信息：產品基本信息（最新情況、產品口號、產品定位、特點、市場規模）

5.產品迭代信息：版本更新頻率、優化程度

6.核心競爭力分析

7.功能結構及其分析

8.基本功能對比

9.功能差異化分析

10.界面分析：主要界面、操作流程

11.盈利模式分析

12.其他方面：根據產品特性和類別區別對待

03 競品分析的相關方法

1.用戶體驗五要素法：從抽象概念 —— 具體表象

戰略層：

這個層面分析， 大多數情況下得出不了什么實質性的結果（也會有厲害的PM能分析出戰略上的建議點，不過這都是屬于專門去分析戰略層的競品分析）一般戰略層面公司的領導或者創始人起初就會想的很明確。如果這個層面都沒思考清楚，項目做的意義也不存在了。

產品目標、用戶需求

范圍層： 

一般是對明確的幾個競品進行功能清單收集，分析一些差異化的功能，然后分析功能背后的原因。別人這么做，有什么意義？能帶來什么樣的結果？能衍生出什么？

定義需求（內容清單、功能規格說明）、需求優先級排序

結構層：

針對競品在這個層面需要下功夫，需要去分析梳理競品的產品流程。比如：注冊流程、支付流程等等。去分析現在競品大多采用什么樣的結構設計，比如：什么Tab結構、抽屜式結構等等。

交互設計、信息架構

框架層：

這個層面需要去收集的是競品的信息是怎么設計的？收集一些競品的相關細節設計。

界面設計（頁面布局和界面各類控件）、導航設計（全部、局部、輔助導航等）

表現層：

一般不用做過多的分析，可留給設計師發揮，留給設計師專門做這個表現層的競品分析。

感官設計（實現了以上四個維度需要滿足用戶的感官感受）

2.YES/NO法

主要適用于功能層面，簡單來說就是將功能點全盤羅列出，具有該功能點的產品A便標記為“Yes”，沒有該功能點的B產品標記為“No”，通過比對可以清晰地了解功能點上產品間的異同。

3.評分法

這個方法在用戶研究工作中常會用到，通常適用于定量研究的問卷調研中，即給出1～5分的區間，根據產品中的某一方面或某點進行打分。

4.分析描述法

指將不同產品特性以比較的形式描述出來。

5.SWOT法

針對所要分析的競品，從“優勢、劣勢、機會、威脅”四個維度進行比較和梳理。

并且可以進行兩兩組合分析：

1）SO戰略就是依靠內部優勢去抓住外部機會戰略；

2）WO戰略是利用外部機會來克服內部劣勢的戰略；

3）ST戰略就是利用企業優勢去避免或減輕外部威脅的戰略；

4）WT戰略就是直接減少內部劣勢和避免外部威脅的戰略。

6.Base+Solution分析法

Base：目標用戶是什么？目標用戶的核心需求是什么？通過什么解決方案能夠滿足？同其他產品相比，解決方案有什么差異化和賣點？如何推廣營銷？市場效果如何？

Solution：解決方案如何實現？還有多少空間？陌生用戶進來如何使用？信息組織、交互如何？為什么要這么做？是否符合用戶預期？配色、UI是否符合用戶審美？用戶會在哪里困惑？用戶打開產品的頻率如何？用戶是否會向他人推薦產品？

7.Kano模型（卡諾模型）

是對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。

在卡諾模型中，將產品和服務的質量特性分為四種類型：

1）必備屬性；2）期望屬性；3）魅力屬性；4）無差異屬性。5）反向屬性不是用戶需求，提供反而影響產品體驗。

具體請查看專題文章：產品分析方法之：KANO模型

注：在描述分析的過程，盡量的可視化你的分析過程，這樣別人在看的時候清晰易懂！

04 競品分析的輔助內容

1.數據的引用

分析報告中針對用戶體驗方面的要素很容易夾雜過多的主觀因素，譬如我們容易下這種結論：這種設計不合理！”這類主觀的評斷。在一份競品分析報告中，如果為了說明某一條，那量化的數據必然是重要參考依據之一。所以，數據變得比較富有說服力。

數據從何而來？月活排名可以來自Appannie、Usage Intelligence，網站排名來自Alexa。其他數據包括百度指數、淘寶指數、易觀智庫、CNNIC、艾瑞咨詢、新浪微博、微信、上市公司財報等都是比較主流的平臺和渠道可以作為數據來源。

2.對比時有截圖作參照

這方便讀者了解，也在一定程度上有利于保證整份報告保證清晰可讀、重點凸顯、結論突出。

3.必要時可加任務或案例

任務和案例起到的作用一是佐證，二是便于讀者清晰地能夠在相應的場景下理解。比如當比較A產品的某項功能或業務邏輯上的問題時，如果引入一個貼切的典型案例或一個模擬的任務會讓讀者更加有代入感，更便于說明。

另外，在這里也可以適當的引入真實的用戶評論。

05 得出結論/建議

1.首先我們也是按照從大到小去寫，從框架—功能—流程這個維度去書寫總結！

 2.對于結構：我們應該采用……

3.對于功能：我們應該把功能A、功能B加入到版本V1.0內，把功能C滯后、不做功能D…….

4.對于流程：我們可以借鑒競品A的某某流程、競品B的某某流程……

5.對于色彩：我們可以以某某顏色為主、某某顏色為輔……

文章來源：站酷  作者：體驗為王UX

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

--手機appUI設計--

--bs界面設計--

一、前奏

在談回調函數之前，先看下下面兩段代碼：
不妨猜測一下代碼的結果。

function say (value) {
    alert(value);
} alert(say); alert(say('hi js.')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

如果你測試了，就會發現：

只寫變量名 say 返回的將會是 say方法本身，以字符串的形式表現出來。
而在變量名后加()如say()返回的就會使say方法調用后的結果，這里是彈出value的值。 


    

        1
    

    

        2
    

二、js中函數可以作為參數傳遞

再看下面的兩段代碼：

function say (value) { alert(value);
} function execute (someFunction, value) { someFunction(value);
}
execute(say, 'hi js.'); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

與

function execute (someFunction, value) { someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.'); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

上面第一段代碼是將say方法作為參數傳遞給execute方法
第二段代碼則是直接將匿名函數作為參數傳遞給execute方法

實際上：

function say (value) { alert(value);
} // 注意看下面,直接寫say方法的方法名與下面的匿名函數可以認為是一個東西 // 這樣再看上面兩段代碼是不是對函數可以作為參數傳遞就更加清晰了 say; function (value) { alert(value);
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

這里的say或者匿名函數就被稱為回調函數。  


    

        1
    

三、回調函數易混淆點——傳參

如果回調函數需要傳參，如何做到，這里介紹兩種解決方案。

• 將回調函數的參數作為與回調函數同等級的參數進行傳遞

• 回調函數的參數在調用回調函數內部創建

四、寫在最后

回調函數應用場景多用在使用 js 寫組件時，尤其是組件的事件很多都需要回調函數的支持。

轉自：csdn 作者：dkvirus

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如何打造視覺平衡：正確的尺寸+視覺對齊+完美的圓角修飾。

我們的眼睛很奇怪，經常誤導我們。但如果你知道人類視覺的特殊性，就可以構建更好的設計。

20 世紀 20 年代，格式塔的視覺感知理論得到了發展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經聽說過諸如親近原則或共同命運規則之類的話題，本文引用了格式塔理論的一些觀點，重點介紹了實踐方面而不是學術研究上的問題。在底部有關于這個主題的相關推薦列表，有興趣的話可以瀏覽。

測量尺寸和視覺尺寸

400 px 的正方形和 400 px 的圓哪一個更大？從幾何角度來說，它們的寬和高是相等的。但看看下面的圖片，我們的眼睛立刻發現正方形大于圓。

下圖是帶有標注的：

讓我們再看一張正方形和圓的圖。就視覺重量而言，它們相同嗎？

至少很難立即指出哪一個比較重，不足為奇，因為我增加了圓的直徑。

我重疊了第一個和第二個示例中的形狀。左圖，400 px 正方形的面積大于 400 px 圓的面積。這就是為什么我們在視覺上看到它更大的原因。右邊，圓和正方形是平衡的，基本上它們的面積也相似，但是寬和高不同。

我們可以看到菱形、三角形具有同樣效果。為了在視覺上與正方形保持平衡，它們應該更寬和更高，以使得它們的面積相似。基于面積的方法非常適合最簡單的形狀。

在 icon 中怎么使用呢？

當你創建一組圖標時，重要的是要使它們保持平衡，以使圖標不會顯得太突出或太小。如果我們直接把圖標放在正方形內，那么越像正方形的圖標看起來就越大。

我建議補償不同形狀圖標的重量，允許視覺上較小的圖標懸掛在正方形外，并在視覺上較重的圖標和正方形之間留出一些距離。

下面是一組修改過的圖標：

現在了解了，為什么一個圖標區域總是比圖標主體大，只是為了讓非正方形圖標適合它并且看起來不小于正方形圖標。

檢查視覺平衡最簡單的測試是模糊設計。如果你的圖標變成相似的斑點，則它們具有形同的視覺權重。

例如，Facebook 和 Instagram 的圖標是方形的，而 Twitter 的圖標則是鳥的輪廓，Pinterest 則是一個環繞的「P」。這就是為什么 Twitter 和 Pinterest 的圖標要大一點，以便于它們與 Facebook 和 Instagram 圖標保持平衡。

視覺平衡的另一個例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么按鈕會顯得更小。當你把它放大一點，整個結構就會變得更加平衡。

但如果你改變按鈕的樣式，就不需要放大了。在下圖中，按鈕和文本框的高度是 80 px，但是右邊的按鈕視覺上看起來并沒有很弱，因為它是黑色的。

Tips：

• 視覺重量是人眼感知物體大小和重要性的方式，它不一定等于其像素大小或面積。
• 圓形、菱形、三角形和其他非正方形圖形需要更高和更寬的尺寸，才能與正方形圖標在視覺上保持平衡。
• 圖標區域應該留有一些空間用于視覺平衡。對于一組圖標來說，這是至關重要的，它們應該確?？雌饋硎且恢碌?。

不同形狀的對齊

視覺對齊是視覺平衡主題的延續?？聪聢D：它們看起來一樣長嗎？

以 px 為單位，答案是肯定的。但是，第一眼看上去，第一條要比第二條長一些。

現在看下圖，有什么變化嗎？

我對第二條矩形應用了視覺補償。允許尖峰值超過上條矩形長度的 20 px，是補償峰值之間的間隙并使兩個形狀在視覺上相等。

還有一些特殊圖形的例子：

所以，如果你設計一張帶有折疊條紋和文字的海報，或者商品圖角標設計時，請注意使它們達到視覺平衡。銳利的邊緣應該超出形狀的其他部分。

文本和有背景的段落怎么對齊？這取決于背景的視覺密度。如果它很輕，你可以將突出顯示的段落與文本的其余部分對齊。

由于背景較淺，因此不會中斷正常的文本流。

對于深色背景，可以使用不同的方法。在圖片上，黑色背景與文本的其余部分對齊，而其中的白色文本以縮進方式放置。

與淺色背景的情況不同，黑色背景具有較大的視覺重量，如果目標是無縫瀏覽段落，則最好按照以下所示的方式對齊。

相同的原理同樣適用于按鈕和輸入字段。當然這只是基于人類視覺感知的設計。

左側輸入字段的淺色背景可以超出輸入標簽和輸入文本的范圍?！赴l送」按鈕的與輸入背景的右對齊，因為該按鈕較暗且從視覺角度看較重。

在右側，輸入具有實線邊框，當用戶輸入的框內有凹痕時，我將其與標簽對齊。「發送」按鈕的側面為三角形。該按鈕向右移動一點，看起來與上面的矩形輸入字段保持平衡。

在這里，我們探討另一個對齊問題：文本和圖標按鈕的對齊。下圖，文字看起來居中嗎？

秘訣在于，右邊是三角形，因此在右邊的按鈕上我將文本向左移動了一點。此外，箭頭按鈕的寬度為 40 像素，看起來與矩形按鈕在視覺上相等。

文本按鈕不僅具有水平對齊，而且具有文本和背景的垂直對齊。我想講的第一種方法是在各種操作系統、站點和 APP 中使用的。它是基于字體的大寫字母的高度（即上限）對齊方式，它等于「 H」或「 I」的高度。

基本上，大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的，因為操作按鈕通常以大寫字母書寫，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。

另一種方法是使用字體的小寫字母的高度（所謂的x高度）來對齊文本和背景。在 sans 和 sans serif  字體中，它等于字母「 x」的高度。

由于文本的主要視覺重量集中在小寫字母的區域，因此該方法也是可行的。

這些方法之間有什么區別嗎？有區別，但差異不大。

對于「取消」和「確定」（常用按鈕），由左列代表的上限高度方法肯定更好，因為「取消」沒有下垂部分（y，j，g，p ），并且「確定」都是大寫字母。

右欄中顯示的 x 高度方法僅對「同步」按鈕更好，該按鈕的名稱同時具有上下突出的元素；「取消」和「確定」兩個詞似乎位置太高了。

圖標按鈕的情況與文本按鈕略有不同，讓我們在圓形背景上放一個「發送」圖標。哪個看起來視覺更加平衡？

希望你已經注意到左邊的那個有問題。發生這種情況的原因是對齊方法不同。第一個選項將圖標視為矩形，在某種程度上說是正確的，因為當你將 SVG 或 PNG 文件給開發人員時，它是一張矩形圖。右側顯示圖標的位置，使其所有尖銳邊緣與圓形按鈕背景的距離相等。

如果為開發輸出文件，則需要保留一些區域，以便他們可以使圖標在背景上正確居中。

同樣「播放」按鈕也一樣，如果直接對齊這些形狀（圓角矩形和三角形），它們將看起來很奇怪。

如果要使三角形的視覺位置更好，則將其圍繞并使其與按鈕背景對齊會更好。

Tips：

• 帶有尖銳邊緣的形狀應更大或更長，以與相鄰的矩形對象保持平衡。
• 帽高對齊是在按鈕背景上定位按鈕文本的有效方法。
• 正確將三角形圖標放在按鈕上的一種有效方法是將其包圍并使其與背景對齊。

視覺圓角

還有什么比圓形更圓的圖形嗎？

我曾認為沒有，但是正如我在本文開頭所說的那樣，我們的眼睛很奇怪，有時會欺騙我們。那么，下面圖片中哪個圓看起來最平滑？

我之前問過的人在 3 號和 4 號之間進行糾結。1 號和 2 號絕對太瘦了，5 號太豐滿了。如果我們將第三個和第四個變體（一個幾何圓和一個修改的圓）重疊在一起，我們會發現，后者比第一個重一些。

為了說明我的意思，我從 Futura，Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒于高質量字體是基于人類的視覺感知構建的，并且使用了復雜的視覺構造系統，因此我認為它們的圓形看起來比幾何形狀更圓。

讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個突出部分。此外，Circe 和 Geometria 的字母比圓圈寬，但即使它們的高度和寬度相等，我們也可以看到這四個「肚子」好像小了。

因此，從視覺角度而言，修改后的圓（右側）看起來比幾何圓（左側）更「圓形」。

我們如何使用這種現象？當然要進行圓角處理。如果你在圖形編輯器中直接修改圓角，效果其實并不好。

人眼立即發現直線突然變成曲線的點，而且這種處理看起來并不自然。

考慮到我們的視覺感知，我修改了這個圓角。

這種嵌入具有超出幾何圓的額外區域，使得直線與曲線相交的點不那么明顯。

只是嘗試感受一下這些嵌入方法之間的差異。

現在，我們可以將這種方法應用于圓形按鈕。

你可能已經注意到，右側的按鈕具有更平滑的圓角倒角，并且你的眼睛更加舒適。

與 APP 圖標相同，人們不只是使用標準的圓角整數來達到理想的效果。在深入探討此問題前，讓我們看一下下面圖形的差異：

第一個是我在 Sketch 中創建的圓角矩形。第二個形狀是超橢圓形，也稱為 Lamé 曲線。它是由法國數學家加布里埃爾·拉梅（GabrielLamé）發現的，根據公式的不同，其范圍可能從四點星形到實際上看起來像是圓角正方形。

馬克·愛德華茲（Marc Edwards）提出了 Lamé 曲線的公式，該公式產生了平滑且視覺上完美的形狀。從 iOS 7 開始的圖標均基于此設計的。

后來，通過添加黃金比例和用于指導新圖標設計者的網格來修改此形狀。

使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面，這些非標準形狀很難到真實項目中。應該將多個 SVG 組合在一起，在代碼中包含特殊的公式或腳本，或者像 Apple 為其應用程序圖標那樣使用 PNG 掩碼。

至于設計過程本身，有一個簡單的圓角修復方法。您需要調整合適的圓角度數。

銳角倒圓的差異更加明顯，這對于繪制道路或交通設計非常重要。

Tips：

• 幾何圓角看起來很假，因為你可以輕松看到直線突然變成曲線的點。
• 視覺上正確的圓角需要特殊的公式或手動調整形狀。

有時，非幾何正方形看起來更像方形。你可能會想，「這是什么廢話？」 那么，你看下面的正方形？哪種形狀看起來更方形？

如果你選擇了左側的形狀，你就能感受到視覺差異的點。

文章來源：優設網    作者：UX Talk

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

編輯導語：UI設計師在日常工作中經常會進行Banner的設計，Banner代指任何投放于線上的各種尺寸的廣告圖，在設計Banner圖時，需要考慮到多種因素，內容、受眾、效果等等；本文作者分享了關于Banner應用和交互設計，我們一起來了解一下。

Banner是每個UI設計師家常便飯的項目，聊聊banner的那些事。

banner翻譯成中文是橫幅或旗幟，為了體現產品的中心意旨，利用鮮明的內容去表達最主要的情感思想或宣傳中心，從而給整個產品起到宣傳的效果。

在互聯網時代，banner被廣泛應用在pc網頁、app設計等互聯網平臺間，作為設計師做一張banner乃家常便飯，如何才能設計一張高質量的banner呢？

一、設計風格

創意新穎、風格貼切的banner能第一時間吸引用戶眼球，有利于banner的觸達，帶來高效率的點擊，創造更高的價值。

1. 素雅文藝型

關鍵詞：文藝、氣質、素雅、安靜、格調。

畫面大量的留白；色彩以高級灰為主，飽和度和純度低，明度高；字體多采用襯線體，標題文案突出，輔助文案偏小，整體突出高級感；畫面點綴多采用精細的線條。

2. 時尚高冷型

關鍵詞：高冷、時尚、大氣、品質。

色彩多以黑白灰；文字清晰簡潔內容少；焦點主圖很大，突出表現細節；畫面精簡，無點綴物。

3. 傳統國風型

關鍵詞：傳統、中國風、意境、韻律。

畫面采用對稱式構圖，文字排版有采用豎排；色彩上采用中國傳統顏色，采用物體的固有色，避免艷麗刺激的色彩；字體多采用書法字體，書法主要分為篆、隸、楷、行、草五種書體；圖形活用中國風元素，剪紙、燈籠、折扇、祥云、梅花、水墨等作為輔助元素。

4. 青春活力型

關鍵詞：青春、活力、年輕、動感、時尚。

色彩飽和度和純度高；排版多樣性，視覺沖擊力強；運用幾何圖形裝飾在產品、背景、氛圍裝飾上。

5. 可愛甜美型

關鍵詞：可愛、甜美、卡哇伊、Q、呆萌。

色彩鮮亮透明，營造軟萌可愛的感覺；字體采用少年字體、手寫字體、卡通字體；點綴元素多使用卡通小元素。

6. 促銷活動型

關鍵詞：促銷、活動、節日、熱鬧。

畫面整體氛圍熱鬧，內容飽滿，很少留白；色彩豐富，紅色、黃色、橙色、紫色偏多；主標題文字偏大，字體剛硬，視覺沖擊力強，點綴元素有光效、舞臺、五彩的漸變、沖擊性的線條或多邊形等。

7. 未來科技型

關鍵詞：未來、科技。

科技類banner，文字和背景圖非常具有科技感，畫面具有空間感；色彩以冷色調為主，常見有藍色、紫色、黑色；點綴元素有光效、金屬、線條、光點。

8. 手繪風格

關鍵詞：場景、趣味、手繪感、扁平。

畫面具有故事性和趣味性；色彩扁平的配色，上色沒有高光和陰影；字體偏向年輕化，圓潤、無襯線體字體；點綴元素以涂鴉的小裝飾為主。

二、設計流程

1. 創意監控

1）創意監控

產品在用戶心中需要良好的正面形象，banner傳播對內容需要進行嚴格控制，把握好政治導向關、價值取向關和格調品味關。廣告內容需真實準確，不引起歧義。

2）情景約束

用戶體驗產品需要有愉悅感，banner需呈現積極陽光的正面情景，素材圖片傳達正向的情緒和氛圍。

3）版權約束

避免法律糾紛，圖片素材、文字等內容應該要有版權，banner中不使用來源不明的字體、圖片、視頻等素材。

2. 前期溝通

1）確定文案

文案盡量簡潔明了，用詞準確、文案通順、語言生動。用詞準確是最基本要求，活動、權益、業務表述文字內容符合業務方需求，無錯別字。文案通順、表述清晰，適合產品目標群體閱讀與理解。語言生動、精簡、有吸引力，集中核心訴求點，亮點突出。

3. 設計執行

1）板式

排版結構：

banner由多元素組成，banner內在包含：色彩、構圖、風格等，外在包括文案、產品配圖、背景、點綴這幾個部分組成，設計過程通過拆分一步步執行，思路清晰且效率高。

構圖方式：

對齊構圖

畫面中相關內容遵循對齊原則，便于用戶視線快速瀏覽，接受重要信息。常見的對齊方式左對齊、右對齊、居中對齊，建議banner中只使用一種對齊方式，多種對齊方式用戶閱讀視線分散，增加用戶認知成本。

聚攏構圖

畫面內容拆分為文字區、圖片區、氛圍區，相關內容聚集在一個區域，其次聚焦一個視覺重點，弱化其他元素，視覺出現層級。

留白構圖

根據產品頁面留出適當的安全邊距，保證banner在適配過程中不會出現重要信息看不全的情況。排版時，元素之間需要留出空隙，畫面看起來有透氣感，減少用戶認知信息的負擔。

降噪構圖

色彩、文字的種類不宜過多，點綴圖形運用不合理，會分散讀者注意力，成為用戶閱讀的“噪音”。

重復構圖

排版注意整體設計的一致性和連貫性，避免出現不同類型的視覺元素，使畫面出現跳躍。

對比構圖

banner中重點信息加大與周圍元素間的視覺差異，通過顏色對比、字體的大小字重對比、構成的面積對比等方式，以便于用戶快速獲取重點信息，豐富banner的視覺層級，吸引用戶。

構圖樣式：

對稱構圖

通過對畫面的平均分割保證畫面的平衡，對稱構圖給人有力、穩固的視覺感受。

居中構圖

居中構圖很好的突出主題，畫面中規中矩，活躍感較弱；用戶視覺焦點會聚集中心位置，視覺焦點需要重點刻畫，周圍元素弱化處理。

左右構圖

左右構圖分為2種，左文右圖、左圖右文。2種構圖樣式，區別在于用戶的瀏覽過程中是先看文字還是先看圖片。

當配圖示意不明確時，建議使用左文右圖的排版。

配圖主要是根據文案內容繪制的輔助圖形，用戶只看圖無法明確活動內容，建議采用左文右圖的板式。根據“F形”閱讀模式，瀏覽習慣往往從左向右從上往下，將文字信息放在左邊有助于用戶快速瀏覽，獲取重點信息。

當配圖示意明確，圖比文字更加重要時，建議使用左圖右文的排版。

用戶根據圖片即可明白活動內容，運營或業務方希望有吸引力的活動圖片獲取用戶的注意力。

衍生構圖

基于banner受限尺寸和高度，會衍生出一些構圖方式，例如放射性構圖、傾斜構圖等。不規則的構圖，設計上具有層次感，豐富的視覺呈現給人眼前一亮，更容易吸引用戶眼球。

構成比例

banner大多為左右排版，圖文比例4:6，接近黃金分割比例0.618，文案標題比例約2:1。畫面中文案占比一定要大于配圖，用戶更關注是是內容本身。

2）配色

色彩體系：

暖色系

暖色系主要由紅、黃、橙等構成的色調。容喲聯想到陽光、火焰、熱血等場景，給用戶積極、活潑、溫暖的感覺。暖色系色彩的飽和度越高，溫暖屬性越突出，用于電商活動，渲染氣氛。

冷色系

冷色系主要由青、藍等構成的色調。容易聯想到海洋、冰雪等場景，給用戶寒冷等感覺，適宜表現恬靜、低沉、嚴肅、理性的內容，比如科技類產品。

同色系

同色系又稱單色，這種色系的搭配在產品本身顏色比較統一的情況下，提取產品鄰近色，作為畫面的搭配色，讓整體畫面變得統一和諧。

類似色系

類似色相比同色系，它具有豐富性和可變化性，基于banner整體的主色調以后通過添加與主色相近的輔助色，是整個畫面變得豐富活躍起來，同時這些配色方式也相對容易。

對比色系

對比色系，色相環上相距120度-180度之間的2種顏色（180度則為互補色），對比色之間的搭配能夠給畫面帶來華麗、跳躍、濃郁的視覺美感，高純度、高明度、等面積的搭配，會產生強烈的刺激感，干擾用戶視覺體驗。畫面中往往會考慮補色之間的面積比例、純度比例、明度比例、空間間隔的比例，平衡畫面之間的視覺感。

創新配色

除了基本的色系配色系外，還可以嘗試更多的配色風格。畫面中有目的地運用色彩元素，豐富畫面的色調。

色彩比例：

banner色彩需要考慮頁面統一性；banner尺寸較小，信息色彩不宜過多，2-3種即可。畫面主要由主色、輔色、點綴色組成，色彩的黃金法則60:30:10的法則，60%左右的主色、30%左右的輔助色、10%左右的點綴色。

3）字體

字體類型：

無襯線體

粗的黑體，具有官方嚴肅氣質，自帶有力量感，視覺沖擊強烈，與速度線條、碎片、劃痕等設計手法十分搭配。細的黑體，具有年輕、簡約、細致的感覺。無襯線體易讀性較強，常用于科技類banner中。

襯線體

襯線體裝飾性較強，給人帶來活潑、輕松的感覺。比較適用于文化、文藝、美食、女性、時尚等行業。

圓體/卡通字體

具有趣味性和活潑感，適用于兒童、寵物類、休閑食品、家居等行業。

書法體

有韻味和藝術感，視覺張力豐富，適用于中國風、藝術感等畫面。硬筆書法字體：優雅、有親切感，適合傳統、文化等畫面。

字體樣式：

考慮字體大小、字重、顏色。文案有主文案和副文案之分，需要有對比性。字體的顏色選擇需要考慮與背景色的搭配效果、banner主題間的關聯，選擇合適的顏色能凸顯文案。

4）輔助圖形

幾何圖形：

幾何圖形是banner設計中常見的輔助元素，它的多樣性和簡約性設計師十分著迷。幾何圖形可以創作無線的可能，用戶對其有意無意地進行自我詮釋。

圓形

圓形象征著圓滿、融合、自然、和諧、無窮，在設計中具有非常強的包容性，由于其自身的可拓展性，將圓形進行拉伸、疊加、重復可獲取豐富的圖形。

三角形

三角形具有方向感、變化感，它的銳利給以垂直、剛強、莊嚴、向上的感覺，其長度有穿透感，象征崇高和無限。

方形

方形具有對稱、有序、平靜、專業屬性，給人穩定安全統一感。

多邊形

多邊形的形狀會給人帶來穩重感，通過多邊形凸顯產品的尊貴感。

不規則圖形

不規則的圖形營造畫面的氛圍，突出主體元素，激發用戶點擊欲望。

流暢的線條：

流暢的線條給畫面帶來韻律感。

立體幾何圖：

立體幾何載體讓整體畫面格調顯得品質高。

5）動效

展現商品質感和工藝或者展示同商品不同狀態時，動態banner比靜態banner點擊率高。呈現商品多樣性和系列感需要靜態廣告。

4. 審核

1）傳達

呈現出來的畫面鮮明地表達活動主旨，文案內容，可用性。

2）美感

板式設計、配色、字體設計、風格、插圖、點綴圖案以及動效這些運用是否合理。

3）效率

整體復雜程度，后期banner修改和加工工作難度，可不可重復利用。

4）創意

畫面主題是否突出，具有吸引力，刺激用戶點擊。

三、設計應用

1. 輪播banner

現實中多是單張banner圖，而互聯網產品中大多采用多張輪播banner。有限的屏幕內采用多張輪播提高空間的利用率，其次用戶長時間盯單一廣告會疲憊，輪播banner有利于吸引用戶注意，激發用戶探索欲望。

2. 膠囊banner

電商產品用得比較多，全圓角矩形或不規則矩形，此類banner運用在促銷活動中，實效性特別強。

3. 白底banner

運營強度較弱，banner在頁面權重較低的專題活動會用到白底模版化banner。排版左文右圖，內容由主標題、副標題和小插圖組成，例如支付寶首頁中間位置banner。

4. 懸浮banner

需要吸引用戶來參與運營活動，可以采用懸浮圖標的形式，吸引用戶的注意力，對頁面布局不產生影響。

5. 廣告組合

用于產品中同一個功能模塊，多個不同入口，或者不同服務類型的商品入口。商城或者熱門板塊使用。包括：兩個入口、三個入口、四個入口、五個入口、六個入口。

四、交互設計

1. 交互需求

1）功能

banner在頁面中所承擔的責任是什么，活動運營、功能區入口、系統公告、還是第三方廣告。

2）數量

banner位置所承載內容數量是多少，同時存在幾個內容。

3）頻率

banner采用的是靜態banner還是輪播的方式。固定banner多久更換一次，輪播形式的banner，幾個banner輪播，輪播的速率是多少。

4）層級

banner在頁面中與其他功能區相比，banner位所屬的信息層級是什么樣。

2. 交互思考

1）靜態/動態

靜態banner。如果內容中有一個非常重量級的，其他的都是差不多的不怎么重要的，可以考慮只將重量級內容放在顯眼位置的Banner上，且靜態不輪播，其余內容放在別的運營位里。

動態輪播。輪播banner圖注意幀數不宜過多，加上輪播指示器，提示用戶banner的個數以及banner可以左右滑動。

2）尺寸

屏幕占比大的banner有更強的營銷感和氛圍感，常見電商平臺的頂部banner。

屏幕占比小的banner會低調些，不會干擾用戶閱讀瀏覽頁面，例如金融類平臺。

3. 設計輸出

1）圖片大小

保證產品啟動加載時間和操作流暢，上傳廣告圖的大小建議在300kb以內。

2）圖片格式

輸出的格式：JPG、PNG、JPEG、BMP、GIF。

文章來源：人人都是產品經理  作者：界白

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

隨著這幾年電商行業的飛速發展，國人年輕一代審美不斷提升，對設計的要求自然不可能停滯不前，更多的是注重品牌、平臺屬性、差異化、用戶體驗等?；仡欁罱鼉赡陜炐愕碾娚淘O計案例，我們嘗試總結一下2021年電商設計的重點和方向。

文章來源：優設  作者：美工美邦

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

章節一：為什么要堅持國際化設計？

堅持走國際化設計的背景

出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺，國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式，使得成熟的經驗可以快速運用到國外，從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】，想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

那有什么好的方法和理論能夠讓設計提前著落，為業務帶來一線用戶信息和設計價值呢？接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計，讓自己的設計價值有理可依

*以下內容與公司無關，更多的是基于筆者國際化工作經驗的復盤，如有錯誤，歡迎指正（Salute~）

寫在前面

首先我們要知道，一套通用的設計標準很難在多個國家吃的開，從而拿到用戶信任

我們先來看個案例，這個是日本UBER司機端和日本滴滴司機端對比

最明顯的區別在于，滴滴國際化在日本業務和Global業務這塊，司機端采用的是移動端（global）+平板端（日本），而UBER則是一套方案解決全球問題，可能有些人會問，一套設計不是成本更低，效率更高么，為什么非要制作兩套。這就要從決策成本的角度去考慮問題，而日本市場相對于滴滴其他地區市場有著完全不同的因素，涉及到了資本，使用場景，市場地位，用戶畫像等多方因素決定，這時的【成本與效率】已經無法排在做與不做的第一位了，接下來我們通過兩張照片來看下日本司機的接駕場景

通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣？是不是明顯發現他們的年紀相對的更大一些？會穿制服佩戴白手套？ 那年紀更大是不是意味著司機的視力會相對于中年人有所下降，白手套是否會影響他操作屏幕交互，那針對這么不同用戶群體是否需要單獨設計呢？最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢？

那我再來舉兩個例子來看看，我們來看看針對日本本地化做的特殊設計細節在哪些方面？

案例一：針對司機群體老齡化設計———大屏幕設計：

日本屬于老齡化國家，司機平均年齡更是在50歲以上，高齡人群的視力相比于青年處于退化階段，因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情，UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計，更大的屏幕降低了司機誤操作可能性的同時，也能將字體放大，盡可能讓司機方便識別

案例二：針對日本司機人文的設計———語音接單

“日本服務業發達，體現在服務的細節。出租車司機出于對客戶的尊重，都會戴上白手套。但是在帶著手套的時候，司機很難去點擊屏幕進行操作，而且在行車過程中，觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為，于是開發了語音接單的功能?？紤]到司機群體的年紀特征，我們選用了在日本相對普及又好識別的“了解しました（りょかいしました）”進行快速語音接單,在新版本上線后，司機可以通過屏中屏的方式去學習語音接單功能，只有他完全掌握這個功能才會為他完全展現，如果司機因為自身原因無法很好地說出那句話，我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計

（圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠）

國際化設計的思維框架

通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

怎么樣讓國際化的設計有法可依，我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景，那一個場景由哪幾個方面組成，簡單來說是由【業務】+【用戶】組成，這并不難理解，我們作為產品設計師，首先是背靠業務，解決公司的商業訴求，給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中，我們會將商業訴求和用戶價值進行一個有效的結合，從而滿足雙方，但是還不夠，因為一個場景還依賴客觀的條件，比如時間和空間維度，最終也會影響整體的質量，我們將所有的因素通過包含關系展示出來

接下來我們往細的方向進行拆解，【業務】根據公司行業，階段的不同以及基礎能力的不同，呈現的點也不盡相同。最核心的點在于當前所屬階段，是1.0階段力求生存下來，還是說2.0和競品之間產生差異化，還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同，對于1.0階段來說，更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭，通過差異化（殺手級）的功能形態獲取更多的搖擺用戶

不同的賽道，業務不同，打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢？我們先來列舉些具象的特征：

【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成，但是光有畫像基礎并不精確，因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下，用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】，最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里，獲得用戶認可，特別是在20年后，疫情的爆發導致設計師無法到前線進行真實有效的實地探測，那么加強合作以及對齊目標，為業務拿結果將是重中之重，接下來，我將對于每個影響【用戶】的因子進行舉例講解

章節二：如何快速了解你服務的用戶

做任何的設計都離不開用戶畫像，而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

可能你知道，在給拉美客戶做單的時候他們會要求你的界面顏色亮麗，看起來更加奔放，而在給亞洲客戶做單的時候則會相反，整體看起來更加約束。但是你能清楚的知道背后的原因么？如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像，去支撐你的設計。答案是有的，他就是【霍夫斯泰德文化維度理論】

霍夫斯泰德文化維度理論（Hofstede's cultural dimensions theory）是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序，能將一群人與其他人區分開來。通過研究，他將不同文化間的差異歸納為5個基本的文化價值觀維度

百科連接：霍夫斯泰德理論詳情 （<-點擊快速查看）

完全不懂的可以看看上面的鏈接，我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

了解完霍夫斯泰德理論以后我們該如何去使用呢？我們先從拉美用戶和日本用戶的差異對比開始

通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】，差值比例達到了46和44.

接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例，去理解背后的原因

男性化與女性化(Masculinity versus Femininity)

日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現；而日本男主外女主內，62％的女性在第一個孩子之后選擇辭職，也是男性氣質的另一表現.

在日本想要成為一個出租車司機，就要在5年之內不能有任何違規，某些地方還會有特殊的考試，這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后，才能被評為A級或者AA級別的出租車，雖然這僅僅只是一張小貼紙，但是他也代表著一個出租車司機的榮譽。在這一方面，也體現日本社會的男性氣質的確定性。

相比較日本，巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心，也是其社會的核心價值觀。對于一個家庭而言，家人共同用餐的時間是非常重要的，還有星期天的燒烤活動，能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事，甚至無法聯系上他們：）

長期取向與短期取向(Long-term versus Short-term)

日本人將生命視為一個非常短暫的時刻，所以調查發現日本人普遍相信宿命論，他們鼓勵節儉和現代教育的努力，作為為未來做準備的一種方式。

巴西相較于日本經濟落后，人民的收入水平普遍不高，很多司機收入僅僅能夠維持一家的支出，很難有結余，在巴西工資會按照周維度支付，以保證一家人的生活開支能夠承擔。

針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡，允許司機隨時提現且提現速度遠遠大于了當地的其他銀行（48小時），那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中，我們將錢包打造長了本地生活平臺，我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為，原本需要走到線下便利店的服務被我們搬到了線上，更是大大的方便了使用99卡的群體。未來呢，我們將加大加多權益，達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值，同時我們也給業務帶來了價值，更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

（99與當地銀行合作的線上本地生活功能-99Pay）

不確定性的規避(Uncertainty Avoidance)

日本地處自然災害頻發地帶，沒有豐富的自然資源，生存條件不太好，所以日本人有很強的危機意識，學會了為任何不確定的情況做好預防措施，對待事情也希望有明確性

而巴西雖然處于平原，沒有自然災害，但是因為社會安全因素，整個社會對于社恐事件還是有較強烈的危機意識，所以司機會更加關注接送流程中是否會前往不安全地區，以及乘客的質量

（日本司機的真實駕駛場景）

費用收取的正確與否也是服務體驗優秀的表現，日本司機會用計步器進行計價，如果涉及到了其他的費用則會使用單獨的計算器進行精確計算，這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執，那從這個環節來看，司機為了規避【計算錯誤的可能】而預備了計算器，減少了差體驗的可能

在巴西，滴滴如果對司機派單如果過遠會或者是危險地區會進行提示，允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護，那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師，是不是意味著可以把危險地區的派單做的更加醒目，讓司機能夠更快識別，更快決策，而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強，讓司乘都能更加快捷第一時間選擇自助服務

章節三：繞不開的硬邊界

法律法規的約束

每個國家的發展階段不同，對于隱私重視程度不同，因此針對不同地區的海外市場，作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案，這一點格外需要注意，不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的，因此在空投其他國家之前需要了解是否立法關于隱私相關的法律，如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

LGPD和GPDR風控合規

簡單來說就是要做到信息安全，保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣，各種權限，各種信息默認保留和上傳。但是隨著各國的重視，個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD，在歐洲有GPDR

GDPR 是(The European General Data Protection Regulation ）的縮寫，即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過，在?2018?年?5?月開始強制實施的規定。

GDPR 意義在于推動強制執行隱私條例，規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準；另一方面，對于自身的數據，也給予了用戶更大處理權。也就是說在18年生效之后，如果再有歐洲任何公司App不對用戶的數據進行合規處理，擅自收集信息就將會受到嚴懲

智能硬件的普及度以及新舊

硬件的普及率以及新舊差異也同樣影響著本地化設計，通過調研和外界公布的數據我們得知，在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展，但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配，這樣做是為了最好的進行向下兼容，從而保證所有用戶都能夠使用。同樣，如果你在給發展中國家做設計，那么復雜的動效和高清晰解析的大圖最好是不要去做的

（網上后臺數據展示截圖）

當地的網絡環境和下載速度及物流環境

拉美國家，基建水平滯后，網絡下載的速率波動較大，且存在不穩定的情況，以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難

舉個例子，司機端的歷史列表如果存在400條記錄，如果司機有訴求想刷新查看更多的訂單，是一次性下拉刷新展示全部好呢？還是一次性展示50條好呢？還是一次性展示20條呢？

答案是一次性展示20條是最穩妥的選擇，因為網絡的不穩定性，一次性加載太多數據會導致過長時間，而網絡不穩定極有可能導致下載失敗，并且一次性下載太多數據可能并不符合司機查詢的最初訴求，反而浪費司機的寶貴流量，最終會引擎流量消耗過快引發進線，這里的決策是損失一些用戶的體驗去保障司機的收入，但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜，因此我們可以嘗試使用一次性加載全部的數據，這樣能讓體驗感受更好

（99信用卡的申請權益展示/激活流程頁面）

再舉個例子，拉美物流相對沒那么發達，且因為政治/經濟局勢的不穩定性，導致物流包裹存在無法送達的情況，如果收件人不知曉當前的狀態而超出了等待的預期，那么他就會進線詢問。那在這個場景我們有什么更好的辦法？是否可以透傳更多的包裹進度方便收件人查看，再者再將用戶導流到客服自助而非進線？這樣的好處一來體驗的鏈路完善了，讓司機可以找到自助的出口，二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大？從而探索新的業務，發現新的機會點

章節四：生活習慣和歷史文化遺留帶來的本地化策略

收入/支出方式占比反映了一個群體的現狀

聊這個話題前我們先將選擇的范圍進行收縮，聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出，難有結余。這也導致司機會選擇雙開（同時使用UBER接單或者其他競品）或者進行其他賺錢的方法，如果整個群體都是這樣的情況下，那么司機的忠誠度（這里指的忠誠度不是貶義詞，而是每周的出車時長）必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題

我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類，基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類，物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么，我們是不是可以豐富收入以外的獎勵形式，提供活動獎勵或者權益的折扣，又或者嘗試下小額貸款，那這些是不是可以給用戶帶來價值點呢？

精神層面我們是不是也有發揮的空間，對于補貼，往往是有限的。那如何做到持續長期刺激司機群體？如果一個乘客對于司機進行了表揚和小費的激勵，是不是可以給司機帶來更大的信心去服務好乘客，那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵，讓司機存在足夠的擁有感和成就感，讓司機群體也能感受到平臺對他們的看重。如果勛章可以，那等級是不是也是成就之一呢？

現金與線上支付普及與思考

不同的國家線上和現金的支付比例大不相同，這里受經濟環境和政治環境影響較大。總的來說習慣了線上支付的習慣后就很難回到現金支付的環境，因為確實更加方便便利。一個國家大量使用現金支付的情況下，往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊，在與當地的銀行和機構進行合作，增加卡和賬戶的滲透率。然后通過做權益和服務，滿足用戶的生活訴求，從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活

文字的適配/i18n翻譯的本地化（不同地區/國家語言精準翻譯，拒絕里語/文字長度折行問題）

這里我們需要提到一個概念，i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說，在不修改內部代碼的情況下，能根據不同語言及地區顯示相應的界面。 在全球化的時代，國際化尤為重要，因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n（“本地化”的簡稱）

了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺，所有的本地化設計在經過研發代碼實現后，都會進過他們去對文案進行翻譯校對，最終變成當地人可以理解的話術落地到界面上，從而進行本地化的空投，但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字，而西語和葡語是英文的1.25倍到1.5倍之間，而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯，還需要把控字符長度，避免折行和省略問題

我們來看下下面這個例子

（不嚴謹的快速翻譯，只是為了更方便的展示不同文化下的文字長度）

不同國家的語言不同，文字也不同，則會存在單詞，句子長度/行高的差異。如果一個產品在初期沒有做好適配的話，到后期替換當地語言的時候極有可能出現文字溢出的問題，這也是為什么在做海外設計的時候最好拿當地的語言進行設計，能初篩出一些細小的問題 ，避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題

中東國家客戶的產品需要注意適配

如果你服務中東客戶，務必需要呈現出當地的閱讀排版方式（尊重本地化設計）具體的適配細節這里就不過多說了，網上搜索【RTL適配方法】即可

（Material Design中的RTL適配）

縮寫是否合適（日期/業內專屬名詞）- 時間格式/貨幣符號/聯系方式/地址等

格式也是做國際化中一個非常常見且體現專業度的地方，不同國家的時間展示方式不同，會影響用戶的閱讀，舉個例子“03/08/2019”，如果在A國理解是2019年3月8號，在其他國家復用是會存在理解成2019年8月3號的，更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通，保障閱讀的習慣和當地一致，那貨幣符號/地址等也應該遵守當地的習慣去展示，通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認，將格式記錄下來，最后與研發根據上線的國家展示不同的格式

總結

因為時間倉促，無法面面俱到的將每個點都進行舉例論證，盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化，它更像是一個方法論，幫助沒做過國際化業務的同學能夠快速理解當地的用戶和業務的打法

希望我的文章能夠拋磚引玉，給大家一些靈感，也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯網國際化的業務做到越來越好

最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待，去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看，永遠不要輕易地相信自己的理解”

文章來源：站酷  作者：大寶蛋

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務