移動APP的競爭越來越激烈，在產品設計中更應該注重交互、視覺設計等與品牌基因的融合，才能更好的展現品牌特色，以便在市場中生存發展。

近幾年，互聯網的迅猛發展徹底改變了大眾的生活和習慣，在支付行業里，支付場景也從現金、pos機刷卡等支付方式，轉至各種互聯網常用移動電子載體中，讓大眾更加便捷的通過掃碼支付、出示付款碼等支付方式，代替“傳統繁重”的支付操作，這種便捷的移動支付正在逐漸被人們接受并認可，進而成為日常支付手段之一。

截止到2017年6月27日，繼央行公布第四批支付牌照續展決定后，中國第三方支付牌照僅剩余247張，移動支付APP競爭也越來越白熱化，從進入門檻到用戶體驗，業務或者產品定位上的差異開始逐漸顯現在移動支付產品的屏幕方寸間，而我們的產品及服務如何才能在交互、視覺中更好的體現產品的基因和特色，為用戶提供更好的服務，以便能在如此激烈的競爭中生存并發展下去，整理了一些零散的思路，和大家分享。

產品定位衍生出的設計體系

1.從設計角度進行前期產品分析

企業基因決定了產品方向，好的設計是源自對產品用戶價值的理解和沉淀。分析市面上支付工具的產品定位，如下圖：

• 支付寶：起源來自于為淘寶提供支付解決方案，所以是電商+支付
• 微信支付：微信支付是集成在微信客戶端里的支付功能，所以是社交+支付
• Paypal：針對具有國際收付款需求用戶提供的支付工具，所以是跨境+支付
• 網易支付：網易始終在國內游戲行業保持領先地位，并不斷營造游戲生態，伴隨著網易游戲在手游和端游的開疆拓土，網易支付也在嘗試提供更全面的游戲充值解決方案，給游戲用戶更好的支付體驗，所以網易支付自成立起，自帶游戲+支付光環。

2.產品關鍵詞

支付、游戲、金融、錢包、紅包

3.依據產品方向和數據，理解業務，了解用戶群、用戶場景

4.確立最終產品用色，品牌色為橘紅色，用藍色作為輔色，活潑不死板的同時，增加支付產品整體專業度和安全性。

栗子1：移動支付中整合品牌入口的探索

在網易支付首頁有著這么一群令人頭疼的圖標，由于大都是第三方功能圖標，有圖形有文字，文字又分為襯線體和非襯線體，樣式用色均不可控（歷史同時出現最多13個icon），功能沒有多到可以做成可收起展開的樣式，還要兼顧icon不可控配置的數量等等前置因素，把圖標平鋪在頁面上是討論后選擇的最佳方案。

可是如何將這些icon做到統一？

視覺設計上嘗試做出以下幾種樣式：

第一版

考慮到空間和品牌的一致性，想通過標準劃一的品牌色強行渲染圖標，并框定圖片大小，希望減少使用原有品牌色和大小帶來的用戶識別疲勞問題。如下圖（附圖），可將圖標處理后意識到，為了一致而一致的圖標，缺少傳遞品牌的可識別性。

第二版

每一個品牌，都是自己的定位和人群，過度的一致性可能會失去品牌圖標符號識別的意義，又略顯呆板。網易支付的使用人群為年輕群體，嘗試更活潑的顏色做潛意識分類，提高用戶的辨識感；第二版（如下圖）整體完成后，感覺過于激進，整體看起來沒法傳遞著整體入口的一致性。

第三版

看似合理的方案也暴露出了問題，好像掉入線性的怪圈里！嘗試幾種想法后意識到：保證整體性，清晰可視成為完成當前設計的關鍵，反思和推敲客觀反饋，可以摒棄線性icon，用面型icon，去繁存簡突出核心的同時增強信息層級，對于細細的文字找到了更好的解決方案，為他們增加背景色塊，簡潔有力的icon融合了產品基調的統一和提升功能識別性。

栗子2：網易游戲主題品牌的卡片化嘗試

“It makes very clear the atomicunity of things, it’s still flexible while creating a kind of regularity. （卡片式設計讓原本的元素結合變得非常清晰，在創造一種規律性的時候仍然可以是多變的）”

— MatiasDuarte

最近在與產品大大和運營小姐姐共同打造網易支付游戲中心，目的是結合網易經典游戲品牌和網易支付的便捷充值通道，設計出一站式的充值服務。

接到需求，簡單做了分析：游戲中心計劃上線四類主要入口，未來業務范圍會拓寬，需要保證擴展性、統一性和靈活性，視覺上需要直觀、聚焦和有序。綜合考慮諸多因素，我認為采用卡片式設計，能很好的突出單一入口，并且非常簡潔劃一。游戲主題品牌需要在該界面被反復強化；

設計時將分成圖片加載前和加載后分開考慮：

• 在圖片加載前：在背景圖加載時，為了避免從白色背景直接閃現圖片，我們采用沉浸式設計，視覺提煉5種純度低的顏色，減少給用戶的干擾，又避免了圖片閃現的尷尬，卡片用顏色做預加載，呈現給用戶柔和緩沖的視覺效果，帶給用戶期待的價值點。

• 在加載后：背景圖選用熱門游戲的高清圖（游戲品牌訴求）來帶入場景，引起游戲用戶共鳴，激發興趣點，并且定期優選當下熱門游戲圖片，保持產品的新鮮度和穩定的游戲潮流趨勢。

思考：設計時兼顧擴展性和靈活性強的業務訴求，采用圖文分離的設計思路，將圖標、標題、入口圖片分成三部分設計在統一合成，方便后續維護。

總結：視覺與品牌和諧共生的三個價值

視覺設計和品牌的關系，應該包括如何定義品牌、展示品牌、包容不同的品牌三個層面的價值。

• 定義品牌的過程：是從產品和業務定位中著手，了解品牌所代表的核心競爭力，用戶人群的特點，定義出設計的關鍵詞，并在設計過程中貫徹和延續下去；
• 展示品牌的過程：其實是從設計細節中，用圖形化的方式，不斷嘗試如何才能更和諧優雅的表示，一個細節可能決定不了一個產品的成敗，卻能決定設計的成敗?？此迫橇斜砗捅韱蔚闹Ц豆ぞ?，需要從設計層面不斷打磨，在復雜的語義中幫助用戶降低用戶的理解成本，更加便捷的達成目的；
• 包容不同品牌的過程：一如網易支付這類平臺級產品，會有各種各樣的品牌入駐，在設計時即要考慮入駐品牌的特點，突出差異，提高辨識性，又要保持主品牌（網易支付本身）的設計風格、標準和一慣性，也需要做很多嘗試，才能完成一個精巧的設計方案。

作者：郝娜，現網易UEDC資深視覺設計師

本文來源于人人都是產品經理合作媒體@網易UEDC，作者@郝娜