O2O設(shè)計(jì)因其使用場(chǎng)景和方式的不同，與一般設(shè)計(jì)相比會(huì)更注重功能與時(shí)效性，需要提供簡(jiǎn)潔直觀，快速響應(yīng)的用戶界面。

　　注：O2O即Online to Offline，指線上線下的電子商務(wù)，主要指在線上交易線下享受產(chǎn)品或服務(wù)的一種商業(yè)模式。

　　近期有幸參與一些O2O項(xiàng)目的設(shè)計(jì)，在線下也對(duì)”C(用戶)”及”B(商家)”進(jìn)行了走訪，引發(fā)了筆者對(duì)”走出屏幕”體驗(yàn)的一些設(shè)計(jì)思考。

　　一.前期分析

　　QQ手機(jī)版中的”生活優(yōu)惠”功能是針對(duì)大眾消費(fèi)市場(chǎng)推出的優(yōu)惠打折信息服務(wù)平臺(tái)，主要以餐飲信息為主。

　　QQ手機(jī)版生活優(yōu)惠

　　在對(duì)整體設(shè)計(jì)進(jìn)行構(gòu)思前，我們先對(duì)B商家和C用戶進(jìn)行了簡(jiǎn)單的分析：

　　1. B商家

　　為什么B商家要做優(yōu)惠?主要是兩方面原因：一是吸引客源，二是更好的提供店鋪內(nèi)增值服務(wù)(例如會(huì)員、折扣推廣等)。

　　為什么B商家要選擇O2O營(yíng)銷(xiāo)模式?愈演愈烈的移動(dòng)浪潮悄然改變著人們的生活方式，利用互聯(lián)網(wǎng)的優(yōu)勢(shì)，線上營(yíng)銷(xiāo)帶動(dòng)線下消費(fèi)，為傳統(tǒng)行業(yè)增加價(jià)值。

　　通過(guò)和用研同事的線下走訪，我們發(fā)現(xiàn)B商家線下門(mén)店的一些共通點(diǎn)：

　　1)一般都有自身優(yōu)惠宣傳介紹，如新品8折、優(yōu)惠套餐、工作日優(yōu)惠等。

　　2)同類(lèi)競(jìng)品物料宣傳琳瑯滿目，如銀行卡、信用卡、商圈會(huì)員卡的優(yōu)惠信息等。

　　基于此，線下門(mén)店物料設(shè)計(jì)要考慮的兩個(gè)問(wèn)題：

　　目標(biāo)：如何吸引C用戶?

　　環(huán)境：在人員流動(dòng)頻繁，環(huán)境嘈雜之下，如何讓設(shè)計(jì)更高效?

　　2. C用戶

　　要如何吸引用戶、使設(shè)計(jì)更高效，我們從用戶的角度進(jìn)行了分析：

　　1)“黃金2秒”法則：在碎片式和目標(biāo)性很強(qiáng)的戶外環(huán)境中，用戶一眼掃過(guò)商家海報(bào)，停留時(shí)間短短1到2秒。這就要求宣傳內(nèi)容要緊緊抓住用戶消費(fèi)的行為心理，如突出優(yōu)惠字眼，幾折、現(xiàn)價(jià)與原價(jià)的對(duì)比、滿多少送多少等，同時(shí)多用美圖來(lái)吸引用戶眼球。

　　2) 品牌識(shí)別性：類(lèi)似競(jìng)品宣傳滿天飛，如何讓用戶一眼掃過(guò)就知道這是QQ生活優(yōu)惠的并留下品牌記憶。我們可以從物料設(shè)計(jì)的統(tǒng)一性入手，如宣傳物料模版化，視覺(jué)風(fēng)格統(tǒng)一，B商家和生活優(yōu)惠LOGO規(guī)范化等。

　　3) 二維碼：線上線下互動(dòng)的橋梁，實(shí)際使用中常遇到掃碼位置大小不合適，或二維碼設(shè)計(jì)過(guò)度導(dǎo)致掃碼失敗的案例(如下圖示)。

　　二維碼設(shè)計(jì)需要注意下面兩點(diǎn)：

　　a.中國(guó)成年男性平均身高169cm，女性158cm。二維碼要放置在人在常態(tài)使用手機(jī)、方便掃描的區(qū)域。

　　b.現(xiàn)有技術(shù)條件下，二維碼的容錯(cuò)要控制在30%以內(nèi)，再考慮到打印材料，戶外環(huán)境光線，反光等因素，容錯(cuò)比例最好保證在這個(gè)之下。

　　3.網(wǎng)絡(luò)狀況

　　看到給力優(yōu)惠，打開(kāi)界面卻永遠(yuǎn)在loading，因?yàn)榫W(wǎng)絡(luò)狀況而導(dǎo)致不能使用，這是一個(gè)讓人非常掃興的經(jīng)歷。如何優(yōu)化避免類(lèi)似情況，除了做后臺(tái)性能的優(yōu)化外，設(shè)計(jì)也可以從以下方面入手：

　　1)3G網(wǎng)絡(luò)可優(yōu)先加載文字后圖片，條件允許情況下2G也可單獨(dú)處理一套;

　　2)多用純色和輕質(zhì)感的設(shè)計(jì)手法，減少太花哨的效果，用可循環(huán)紋理等來(lái)控制切圖的大小。

　　二.模版設(shè)計(jì)

　　“走出屏幕”看設(shè)計(jì)，對(duì)B商家、C用戶和網(wǎng)絡(luò)狀況進(jìn)行簡(jiǎn)單的分析后，我們對(duì)O2O的設(shè)計(jì)也有更全面和深刻的解讀，除了考慮各種綜合因素，我們更要抓住O2O設(shè)計(jì)核心理念——直指人心。

　　“走出屏幕”再”走進(jìn)屏幕”，設(shè)計(jì)的解讀會(huì)更加的形象和立體。以下是生活優(yōu)惠兩個(gè)設(shè)計(jì)模版框架的輸出：

　　1.B商家運(yùn)營(yíng)活動(dòng)線下設(shè)計(jì)模版

　　主要擺放位置是商家的店門(mén)口，故需要規(guī)范整體布局，突出主優(yōu)惠信息。

　　2.移動(dòng)端運(yùn)營(yíng)設(shè)計(jì)模版

　　主要考慮手機(jī)端展示位置比較小，通過(guò)主次內(nèi)容的梳理來(lái)提高信息傳播效率。

　　除了以上的分析，其實(shí)我們對(duì)B商家和C用戶的挖掘還有待深入，還有很多點(diǎn)也是我們正在努力學(xué)習(xí)和改進(jìn)的地方。

　　做O2O項(xiàng)目最大的感觸，我們應(yīng)該”走出屏幕”，多去線下體驗(yàn)，更了解我們的商家，更了解我們的用戶，更立體的解讀自己設(shè)計(jì)的產(chǎn)品。不管是O2O，還是移動(dòng)端的其他設(shè)計(jì)，我們都不僅要問(wèn)”什么是好的設(shè)計(jì)”，更應(yīng)該多站在用戶的角度問(wèn)問(wèn)自己”什么是有價(jià)值的設(shè)計(jì)”!

        注：更多精彩教程請(qǐng)關(guān)注三聯(lián)網(wǎng)頁(yè)設(shè)計(jì)教程 欄目，