Qrobot官網(wǎng)改版設(shè)計總結(jié)

0 評論 12711 瀏覽 23 收藏 16 分鐘

前言

在電影《卡薩布蘭卡》中,有這樣一句臺詞:

世上有這么多的城鎮(zhèn),每個城鎮(zhèn)有那么多的酒館,她卻走進了我的酒館。這就是情感,美好的設(shè)計總能碰觸到人內(nèi)心最脆弱的部分,從而引起共鳴、駐足、留戀。這無疑已經(jīng)是情感化設(shè)計所追求的最高境界了。

這次在Qrobot官網(wǎng)重新改版設(shè)計過程中,尤其體會到了這點的重要性。

項目背景

Qrobot是2006年騰訊與中國科學院重大戰(zhàn)略合作的項目,目前該品牌已擁有三款智能產(chǎn)品,分別是小Q機器人、Q影、以及7月份剛上市的小小Q 智能親子伴侶。小小Q智能親子伴侶,是一款可配合手機APP進行互動操控的智能早教設(shè)備,擁有豐富的正版早教資源和新穎的親子互動功能。因為Qrobot 官網(wǎng)架構(gòu)及功能都過于陳舊,對于產(chǎn)品展示及營銷都很不利,為了更好的推廣小小Q這個新產(chǎn)品,設(shè)計側(cè)自發(fā)提出這次Qrobot官網(wǎng)的優(yōu)化改版。本次改版時間 周期比較緊張,經(jīng)歷了五個階段。

1.網(wǎng)站前期的競品分析,用戶模型設(shè)定,思考并推導視覺風格。

2.向上匯報,Demo展示以及視覺稿展示。

3.整體網(wǎng)站界面視覺元素優(yōu)化,梳理規(guī)范。

4.開發(fā)上線。

5.營銷設(shè)計。

我們?yōu)榱私⑷宋锬P屯ㄟ^如下幾個步驟進行前期數(shù)據(jù)分析:

Qrobot官網(wǎng)改版設(shè)計總結(jié)

根據(jù)一些用戶調(diào)研與數(shù)據(jù)顯示,舊版官網(wǎng)PV/UV數(shù)據(jù)不太理想,訪問量不高。用戶反饋最多的問題是:“分不清產(chǎn)品之間的差異化功能點在哪里?”這就 好比一個用戶從打開電腦,點開瀏覽器,輸入網(wǎng)址,最后看到這個頁面,前面已經(jīng)經(jīng)歷了繁瑣的過程,而最后看到的頁面如果連基本信息都沒有傳遞清晰,用戶自然 會直接關(guān)掉網(wǎng)頁,而舊版官網(wǎng)就存在這些問題。
Qrobot官網(wǎng)改版設(shè)計總結(jié)
就官網(wǎng)存在的問題,我們主要以如下四個維度進行分析:
Qrobot官網(wǎng)改版設(shè)計總結(jié)

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

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

1.Who we are

2.What we do

3.What is the difference

4.Market position & Product?image

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

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

1.場景化設(shè)計

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

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

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)
Qrobot官網(wǎng)改版設(shè)計總結(jié)

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

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

1.場地

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

2.模特

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

3.服裝

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

4.鏡頭腳本

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

5.調(diào)動拍攝現(xiàn)場氛圍

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

6.鏡頭捕捉

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

從首頁滾動到第二屏,以小小Q與手機作為主視覺,目的通過小小Q產(chǎn)品展示,加深用戶對產(chǎn)品的信任度;手機的多屏展示來向用戶宣導我們與其他競品的差異化。

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

Qrobot官網(wǎng)改版設(shè)計總結(jié)

 

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

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

用戶體驗

Qrobot官網(wǎng)改版設(shè)計總結(jié)

化繁為簡把功能點以動態(tài)可視化圖形進行串聯(lián)。

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

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

在畫面與畫面滾動過程中,融入了scrollSpy(滾動加載)畫面在用戶鼠標滾動的同時,加載動畫演示效果。優(yōu)勢有兩點:

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

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

品牌

馬克 吐溫:“如果你說一句真話,你根本不必記住任何事情?!?/p>

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

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

Qrobot官網(wǎng)改版設(shè)計總結(jié)

Qrobot官網(wǎng)改版設(shè)計總結(jié)

靈動的細節(jié)-3D模型圖

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

線下營銷

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

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

開學季不寂寞哦,快來找小小Q一起玩吧!

原文來自:騰訊ISUX (http://isux.tencent.com/qrobot-website-redesign.html)
更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!