根據(jù)一些用戶調(diào)研與數(shù)據(jù)顯示，舊版官網(wǎng)PV/UV數(shù)據(jù)不太理想，訪問量不高。用戶反饋?zhàn)疃嗟膯栴}是：“分不清產(chǎn)品之間的差異化功能點(diǎn)在哪里？”這就 好比一個(gè)用戶從打開電腦，點(diǎn)開瀏覽器，輸入網(wǎng)址，最后看到這個(gè)頁(yè)面，前面已經(jīng)經(jīng)歷了繁瑣的過程，而最后看到的頁(yè)面如果連基本信息都沒有傳遞清晰，用戶自然 會(huì)直接關(guān)掉網(wǎng)頁(yè)，而舊版官網(wǎng)就存在這些問題。

就官網(wǎng)存在的問題，我們主要以如下四個(gè)維度進(jìn)行分析：

內(nèi)容&結(jié)構(gòu)

我們首先在內(nèi)容&結(jié)構(gòu)上針對(duì)舊版官網(wǎng)減少信息模塊、直觀展示產(chǎn)品——“去其糟粕取其精華”。
將舊版官網(wǎng)繁雜的信息進(jìn)行篩檢，提煉出核心內(nèi)容，展示給用戶最想了解的產(chǎn)品內(nèi)容。官網(wǎng)是為產(chǎn)品服務(wù)的，服務(wù)的目的與最終導(dǎo)向是告訴用戶四點(diǎn)內(nèi)容：

1.Who we are

2.What we do

3.What is the difference

4.Market position & Product?image

我們將原有的9大信息模塊精簡(jiǎn)出四塊核心信息，包括首頁(yè)、產(chǎn)品介紹、下載、聯(lián)系。調(diào)整后的新版首頁(yè)與舊版相比，產(chǎn)品展示單純直接，操作指引更明顯，引導(dǎo)用戶的目的性更強(qiáng)。一個(gè)網(wǎng)站的操作難度與其操作步驟的平方成正比，視覺呈現(xiàn)越直觀，用戶越買賬！
在界面展示上也遵循了費(fèi)茨定律：用戶的當(dāng)前鼠標(biāo)位置和目標(biāo)位置（引導(dǎo)用戶點(diǎn)擊的位置）距離越短越好，目標(biāo)位置的面積越大越好，因此在前期的交互上我們盡量突出核心操作，比如Button設(shè)計(jì)的很大。

設(shè)計(jì)呈現(xiàn)

1.場(chǎng)景化設(shè)計(jì)

如果把設(shè)計(jì)比作炒菜，那么前期需要的菜品已經(jīng)切好，分類好，分別放在不同的碟子里。隨后是如何把這道菜做成美味，在設(shè)計(jì)上就是官網(wǎng)的風(fēng)格定義。同樣的菜， 不同的做法可以呈現(xiàn)不同的味道，帶給人不同的味覺體驗(yàn)。視覺體驗(yàn)亦如此，Qrobot品牌風(fēng)格推導(dǎo)過程參考了很多競(jìng)品，許多智能設(shè)備官網(wǎng)首頁(yè)多以場(chǎng)景化設(shè) 計(jì)的方式來呈現(xiàn)產(chǎn)品，場(chǎng)景設(shè)計(jì)容易通過背景人物行為表情等傳遞產(chǎn)品信息，而且可以讓用戶產(chǎn)生共鳴感。

2.產(chǎn)品圖直觀展示

在產(chǎn)品細(xì)節(jié)的呈現(xiàn)上鋪以簡(jiǎn)單的背景色，最大化地展示產(chǎn)品。?產(chǎn)品圖直觀展示，能夠讓用戶直觀了解產(chǎn)品構(gòu)造與細(xì)節(jié)，一方面能夠加強(qiáng)對(duì)產(chǎn)品的認(rèn)知度，另一方面 樹立信任感。而從用戶體驗(yàn)的角度出發(fā)，直觀展示產(chǎn)品圖，可以減少網(wǎng)站打開的時(shí)間。作為一名用戶，最多能容忍一個(gè)網(wǎng)站的打開時(shí)間停留在2-5秒之間。而每增 加一個(gè)元素（Html/CSS/Javascript/Flash/圖片），網(wǎng)頁(yè)載入時(shí)間就會(huì)增加25-40毫秒。

新版Qrobot官網(wǎng)視覺呈現(xiàn)，希望通過貼合產(chǎn)品形象與情感的場(chǎng)景地點(diǎn)，人物模特，故事畫面描述，以求最大化來突顯產(chǎn)品性格，傳達(dá)出這是一款大人小 孩一起使用溝通的歡樂親子伴侶。由于產(chǎn)品特性的關(guān)系，在場(chǎng)景化素材的搜集上門檻很高，因此，我們組織了團(tuán)隊(duì)內(nèi)的小型外拍，而前期的準(zhǔn)備工作顯得尤為重要。

拍攝環(huán)節(jié)

1.場(chǎng)地

我們?cè)趲准揖频昱c大型家具賣場(chǎng)做了調(diào)研，尋找匹配于我們產(chǎn)品特色的場(chǎng)景地點(diǎn)。最后我們選擇了深圳某五星酒店，主要原因是酒店的內(nèi)景布置家居氛圍感很強(qiáng)，以 清新的淺色木質(zhì)家具為主，很符合我們產(chǎn)品的使用人群的裝潢審美。而宜家這類大型的家具賣場(chǎng)有兩個(gè)劣勢(shì)，一個(gè)是現(xiàn)場(chǎng)人流量不可控，拍攝效率會(huì)很低；另外宜家 的燈光很多，素材呈現(xiàn)出的光影效果是很雜亂的，這造成后期P圖的成本很高。

2.模特

在模特的選擇上我們特意挑選了80后的模特和1歲的小寶寶，來突顯我們的使用人群年齡。

3.服裝

模特服裝上的選擇更貼合購(gòu)買人群的身份形象特征，讓畫面的呈現(xiàn)上能讓用戶更有共鳴感。比如大人的服裝我們挑選的更多的是家居風(fēng)格為主，避免花俏，奢侈的服 飾，簡(jiǎn)單的淺色棉質(zhì)為主。小孩更多的是粉嫩色系為主，突顯可愛的形象。這么做的最大目的是畫面呈像上能夠最大程度突顯產(chǎn)品。

4.鏡頭腳本

鏡頭腳本更多的闡述當(dāng)前畫面需要呈現(xiàn)的故事內(nèi)容，氛圍，能夠更方便讓模特理解，而且在設(shè)計(jì)師、攝影師與模特溝通過程中減少了很多溝通成本。

5.調(diào)動(dòng)拍攝現(xiàn)場(chǎng)氛圍

拍攝過程中經(jīng)常會(huì)遇到模特?zé)o法正常發(fā)揮自己的精神狀態(tài)，或者投入度不夠高，尤其這次拍攝有一個(gè)1歲小寶寶的參與，現(xiàn)場(chǎng)的不可控性會(huì)更強(qiáng)。如何能捕捉到小孩 最佳的精神狀態(tài)，最佳的表現(xiàn)形態(tài)呢？我們調(diào)動(dòng)了現(xiàn)場(chǎng)的兩到三名工作人員，主要針對(duì)小寶寶，不停的做現(xiàn)場(chǎng)的氛圍營(yíng)造，引導(dǎo)小寶寶。例如現(xiàn)場(chǎng)可以播放音樂，音 樂比較容易讓人放松緊張的情緒；不停的跟模特溝通，聊天，調(diào)和陌生感，小孩也如此。

6.鏡頭捕捉

面部表情在畫面構(gòu)成里最重要了，模特的每一肢體動(dòng)作與面部表情直接影響畫面?zhèn)鬟f給用戶的信息。前期會(huì)針對(duì)畫面中模特需要呈現(xiàn)的臉部，肢體動(dòng)作等有一個(gè)初步的草圖。

從首頁(yè)滾動(dòng)到第二屏，以小小Q與手機(jī)作為主視覺，目的通過小小Q產(chǎn)品展示，加深用戶對(duì)產(chǎn)品的信任度；手機(jī)的多屏展示來向用戶宣導(dǎo)我們與其他競(jìng)品的差異化。

官網(wǎng)首頁(yè)：http://qrobot.qq.com/

動(dòng)態(tài)影像引起共鳴

視頻宣導(dǎo)的大人與小孩可通過小小Q逗趣表情，聊一聊情感交流。視頻的畫面不僅可以短時(shí)間內(nèi)把信息清晰表達(dá)清楚，表現(xiàn)畫面感會(huì)比圖形化的元素來的更有張力，影響用戶。

用戶體驗(yàn)

化繁為簡(jiǎn)把功能點(diǎn)以動(dòng)態(tài)可視化圖形進(jìn)行串聯(lián)。

前期拿到產(chǎn)品經(jīng)理長(zhǎng)達(dá)幾頁(yè)的產(chǎn)品文檔的時(shí)候，我先程序化的閱讀文檔，將逐條功能以關(guān)鍵字的形式列在本子上，接下來可以跟產(chǎn)品經(jīng)理PK，找出產(chǎn)品的核心功能點(diǎn)，最后將一詞多義的關(guān)鍵字拆分出來。

通過這種梳理，能由這些簡(jiǎn)單的關(guān)鍵字聯(lián)想出很多與此相關(guān)的圖形與畫面，最后進(jìn)行串聯(lián)。這讓我聯(lián)想起小時(shí)候數(shù)學(xué)老師的一句話，復(fù)雜的題目只不過里面包涵了很多個(gè)公式化的考點(diǎn)而已，只要逐條拆分即可。對(duì)于用戶而言也一樣的，這么設(shè)計(jì)能讓用戶清晰易懂每個(gè)核心功能點(diǎn)。

在畫面與畫面滾動(dòng)過程中，融入了scrollSpy（滾動(dòng)加載）畫面在用戶鼠標(biāo)滾動(dòng)的同時(shí)，加載動(dòng)畫演示效果。優(yōu)勢(shì)有兩點(diǎn)：

1.可以節(jié)省加載網(wǎng)頁(yè)加載時(shí)間，畢竟對(duì)于用戶而言能容忍一個(gè)界面的加載時(shí)間通常是2-4秒，而這種表現(xiàn)形式不僅可以加速加載時(shí)間。

2.通過有節(jié)奏的畫面出場(chǎng)順序來輔助用戶理解閱讀畫面。

品牌

馬克 吐溫：“如果你說一句真話，你根本不必記住任何事情。”

這句話引申的含義是設(shè)計(jì)的一致性有助于用戶學(xué)習(xí)和長(zhǎng)期保留。在設(shè)計(jì)上也是同樣的，保持一貫的品牌個(gè)性能讓用戶更加容易記憶與了解產(chǎn)品。希望用戶不管 通過什么渠道什么平臺(tái)看到Qrobot的營(yíng)銷頁(yè)面的時(shí)候，都能第一時(shí)間識(shí)別出我們的品牌，就好比香奈兒的經(jīng)典黑白色搭配，無論是從包到服裝到鞋子它的可識(shí) 別性都非常強(qiáng)。

而在各終端的視覺呈現(xiàn)上也保持統(tǒng)一，與上述道理一樣。讓用戶無論使用哪個(gè)平臺(tái)的Qrobot頁(yè)面，都有一致性的體驗(yàn)。體驗(yàn)一致的交互流程，視覺信息的呈現(xiàn)。做到一個(gè)產(chǎn)品下圖形的表意是一致的，信息呈現(xiàn)結(jié)構(gòu)是一致的。

靈動(dòng)的細(xì)節(jié)-3D模型圖

Qrobot官網(wǎng)的界面設(shè)計(jì)中運(yùn)用到的所有產(chǎn)品圖，不難發(fā)現(xiàn)都是通過3D建模出來的。3D模型圖在一定程度上相對(duì)于實(shí)物圖有更強(qiáng)大的靈活性，產(chǎn)品細(xì) 節(jié)能夠展現(xiàn)更到位，可360度無死角的查看產(chǎn)品。因此在網(wǎng)站里我們有專設(shè)這么一塊區(qū)域，可方便用戶用鼠標(biāo)拖拽即可查看不同方位的小小Q。
可在線體驗(yàn)，網(wǎng)址：http://qrobot.qq.com/qrobotq

線下營(yíng)銷

8月8日騰訊大廈小小Q特惠日。

在這次項(xiàng)目設(shè)計(jì)過程中，我更多的體會(huì)到了用戶不是需要設(shè)計(jì)師把他們的要求一一列出來，而是把他們真正的需求呈現(xiàn)出來。在這次項(xiàng)目設(shè)計(jì)中，把一個(gè)設(shè)計(jì)給一個(gè)不是互聯(lián)網(wǎng)人士的陌生人講清楚，不是一蹴而就的事情，需要自己本身更多的站在用戶的使用角度出發(fā)，思考產(chǎn)品的使用人群究竟最介意的是什么，究竟最希望我們帶給他們什么。

開學(xué)季不寂寞哦，快來找小小Q一起玩吧！