移動APP的競爭越來越激烈，在產(chǎn)品設(shè)計中更應(yīng)該注重交互、視覺設(shè)計等與品牌基因的融合，才能更好的展現(xiàn)品牌特色，以便在市場中生存發(fā)展。

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

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

產(chǎn)品定位衍生出的設(shè)計體系

1.從設(shè)計角度進(jìn)行前期產(chǎn)品分析

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

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

2.產(chǎn)品關(guān)鍵詞

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

3.依據(jù)產(chǎn)品方向和數(shù)據(jù)，理解業(yè)務(wù)，了解用戶群、用戶場景

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

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

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

可是如何將這些icon做到統(tǒng)一？

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

第一版

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

第二版

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

第三版

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

栗子2：網(wǎng)易游戲主題品牌的卡片化嘗試

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

— MatiasDuarte

最近在與產(chǎn)品大大和運(yùn)營小姐姐共同打造網(wǎng)易支付游戲中心，目的是結(jié)合網(wǎng)易經(jīng)典游戲品牌和網(wǎng)易支付的便捷充值通道，設(shè)計出一站式的充值服務(wù)。

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

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

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

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

思考：設(shè)計時兼顧擴(kuò)展性和靈活性強(qiáng)的業(yè)務(wù)訴求，采用圖文分離的設(shè)計思路，將圖標(biāo)、標(biāo)題、入口圖片分成三部分設(shè)計在統(tǒng)一合成，方便后續(xù)維護(hù)。

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

視覺設(shè)計和品牌的關(guān)系，應(yīng)該包括如何定義品牌、展示品牌、包容不同的品牌三個層面的價值。

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

作者：郝娜，現(xiàn)網(wǎng)易UEDC資深視覺設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@郝娜