起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識
前言
在電影《卡薩布蘭卡》中，有這樣一句臺詞：
世上有這么多的城鎮，每個城鎮有那么多的酒館，她卻走進了我的酒館。這就是情感，美好的設計總能碰觸到人內心最脆弱的部分，從而引起共鳴、駐足、留戀。這無疑已經是情感化設計所追求的最高境界了。
這次在Qrobot官網重新改版設計過程中，尤其體會到了這點的重要性。
項目背景
Qrobot是2006年騰訊與中國科學院重大戰略合作的項目，目前該品牌已擁有三款智能產品，分別是小Q機器人、Q影、以及7月份剛上市的小小Q 智能親子伴侶。小小Q智能親子伴侶，是一款可配合手機APP進行互動操控的智能早教設備，擁有豐富的正版早教資源和新穎的親子互動功能。因為Qrobot 官網架構及功能都過于陳舊，對于產品展示及營銷都很不利，為了更好的推廣小小Q這個新產品，設計側自發提出這次Qrobot官網的優化改版。本次改版時間 周期比較緊張，經歷了五個階段。
1.網站前期的競品分析，用戶模型設定，思考并推導視覺風格。
2.向上匯報，Demo展示以及視覺稿展示。
3.整體網站界面視覺元素優化，梳理規范。
4.開發上線。
5.營銷設計。
我們為了建立人物模型通過如下幾個步驟進行前期數據分析：
根據一些用戶調研與數據顯示，舊版官網PV/UV數據不太理想，訪問量不高。用戶反饋最多的問題是：“分不清產品之間的差異化功能點在哪里？”這就 好比一個用戶從打開電腦，點開瀏覽器，輸入網址，最后看到這個頁面，前面已經經歷了繁瑣的過程，而最后看到的頁面如果連基本信息都沒有傳遞清晰，用戶自然 會直接關掉網頁，而舊版官網就存在這些問題。
就官網存在的問題，我們主要以如下四個維度進行分析：
內容&結構
我們首先在內容&結構上針對舊版官網減少信息模塊、直觀展示產品——“去其糟粕取其精華”。
將舊版官網繁雜的信息進行篩檢，提煉出核心內容，展示給用戶最想了解的產品內容。官網是為產品服務的，服務的目的與最終導向是告訴用戶四點內容：
1.Who we are
2.What we do
3.What is the difference
4.Market position & Product?image
我們將原有的9大信息模塊精簡出四塊核心信息，包括首頁、產品介紹、下載、聯系。調整后的新版首頁與舊版相比，產品展示單純直接，操作指引更明顯，引導用戶的目的性更強。一個網站的操作難度與其操作步驟的平方成正比，視覺呈現越直觀，用戶越買賬！
在界面展示上也遵循了費茨定律：用戶的當前鼠標位置和目標位置（引導用戶點擊的位置）距離越短越好，目標位置的面積越大越好，因此在前期的交互上我們盡量突出核心操作，比如Button設計的很大。
設計呈現
1.場景化設計
如果把設計比作炒菜，那么前期需要的菜品已經切好，分類好，分別放在不同的碟子里。隨后是如何把這道菜做成美味，在設計上就是官網的風格定義。同樣的菜， 不同的做法可以呈現不同的味道，帶給人不同的味覺體驗。視覺體驗亦如此，Qrobot品牌風格推導過程參考了很多競品，許多智能設備官網首頁多以場景化設 計的方式來呈現產品，場景設計容易通過背景人物行為表情等傳遞產品信息，而且可以讓用戶產生共鳴感。
2.產品圖直觀展示
在產品細節的呈現上鋪以簡單的背景色，最大化地展示產品。?產品圖直觀展示，能夠讓用戶直觀了解產品構造與細節，一方面能夠加強對產品的認知度，另一方面 樹立信任感。而從用戶體驗的角度出發，直觀展示產品圖，可以減少網站打開的時間。作為一名用戶，最多能容忍一個網站的打開時間停留在2-5秒之間。而每增 加一個元素（Html/CSS/Javascript/Flash/圖片），網頁載入時間就會增加25-40毫秒。
新版Qrobot官網視覺呈現，希望通過貼合產品形象與情感的場景地點，人物模特，故事畫面描述，以求最大化來突顯產品性格，傳達出這是一款大人小 孩一起使用溝通的歡樂親子伴侶。由于產品特性的關系，在場景化素材的搜集上門檻很高，因此，我們組織了團隊內的小型外拍，而前期的準備工作顯得尤為重要。
拍攝環節
1.場地
我們在幾家酒店與大型家具賣場做了調研，尋找匹配于我們產品特色的場景地點。最后我們選擇了深圳某五星酒店，主要原因是酒店的內景布置家居氛圍感很強，以 清新的淺色木質家具為主，很符合我們產品的使用人群的裝潢審美。而宜家這類大型的家具賣場有兩個劣勢，一個是現場人流量不可控，拍攝效率會很低；另外宜家 的燈光很多，素材呈現出的光影效果是很雜亂的，這造成后期P圖的成本很高。
2.模特
在模特的選擇上我們特意挑選了80后的模特和1歲的小寶寶，來突顯我們的使用人群年齡。
3.服裝
模特服裝上的選擇更貼合購買人群的身份形象特征，讓畫面的呈現上能讓用戶更有共鳴感。比如大人的服裝我們挑選的更多的是家居風格為主，避免花俏，奢侈的服 飾，簡單的淺色棉質為主。小孩更多的是粉嫩色系為主，突顯可愛的形象。這么做的最大目的是畫面呈像上能夠最大程度突顯產品。
4.鏡頭腳本
鏡頭腳本更多的闡述當前畫面需要呈現的故事內容，氛圍，能夠更方便讓模特理解，而且在設計師、攝影師與模特溝通過程中減少了很多溝通成本。
5.調動拍攝現場氛圍
拍攝過程中經常會遇到模特無法正常發揮自己的精神狀態，或者投入度不夠高，尤其這次拍攝有一個1歲小寶寶的參與，現場的不可控性會更強。如何能捕捉到小孩 最佳的精神狀態，最佳的表現形態呢？我們調動了現場的兩到三名工作人員，主要針對小寶寶，不停的做現場的氛圍營造，引導小寶寶。例如現場可以播放音樂，音 樂比較容易讓人放松緊張的情緒；不停的跟模特溝通，聊天，調和陌生感，小孩也如此。
6.鏡頭捕捉
面部表情在畫面構成里最重要了，模特的每一肢體動作與面部表情直接影響畫面傳遞給用戶的信息。前期會針對畫面中模特需要呈現的臉部，肢體動作等有一個初步的草圖。
從首頁滾動到第二屏，以小小Q與手機作為主視覺，目的通過小小Q產品展示，加深用戶對產品的信任度；手機的多屏展示來向用戶宣導我們與其他競品的差異化。
官網首頁：http://qrobot.qq.com/
動態影像引起共鳴
視頻宣導的大人與小孩可通過小小Q逗趣表情，聊一聊情感交流。視頻的畫面不僅可以短時間內把信息清晰表達清楚，表現畫面感會比圖形化的元素來的更有張力，影響用戶。
用戶體驗
化繁為簡把功能點以動態可視化圖形進行串聯。
前期拿到產品經理長達幾頁的產品文檔的時候，我先程序化的閱讀文檔，將逐條功能以關鍵字的形式列在本子上，接下來可以跟產品經理PK，找出產品的核心功能點，最后將一詞多義的關鍵字拆分出來。
通過這種梳理，能由這些簡單的關鍵字聯想出很多與此相關的圖形與畫面，最后進行串聯。這讓我聯想起小時候數學老師的一句話，復雜的題目只不過里面包涵了很多個公式化的考點而已，只要逐條拆分即可。對于用戶而言也一樣的，這么設計能讓用戶清晰易懂每個核心功能點。
在畫面與畫面滾動過程中，融入了scrollSpy（滾動加載）畫面在用戶鼠標滾動的同時，加載動畫演示效果。優勢有兩點：
1.可以節省加載網頁加載時間，畢竟對于用戶而言能容忍一個界面的加載時間通常是2-4秒，而這種表現形式不僅可以加速加載時間。
2.通過有節奏的畫面出場順序來輔助用戶理解閱讀畫面。
品牌
馬克 吐溫：“如果你說一句真話，你根本不必記住任何事情?！?/p>
這句話引申的含義是設計的一致性有助于用戶學習和長期保留。在設計上也是同樣的，保持一貫的品牌個性能讓用戶更加容易記憶與了解產品。希望用戶不管 通過什么渠道什么平臺看到Qrobot的營銷頁面的時候，都能第一時間識別出我們的品牌，就好比香奈兒的經典黑白色搭配，無論是從包到服裝到鞋子它的可識 別性都非常強。
而在各終端的視覺呈現上也保持統一，與上述道理一樣。讓用戶無論使用哪個平臺的Qrobot頁面，都有一致性的體驗。體驗一致的交互流程，視覺信息的呈現。做到一個產品下圖形的表意是一致的，信息呈現結構是一致的。
靈動的細節-3D模型圖
Qrobot官網的界面設計中運用到的所有產品圖，不難發現都是通過3D建模出來的。3D模型圖在一定程度上相對于實物圖有更強大的靈活性，產品細 節能夠展現更到位，可360度無死角的查看產品。因此在網站里我們有專設這么一塊區域，可方便用戶用鼠標拖拽即可查看不同方位的小小Q。
可在線體驗，網址：http://qrobot.qq.com/qrobotq
線下營銷
8月8日騰訊大廈小小Q特惠日。
在這次項目設計過程中，我更多的體會到了用戶不是需要設計師把他們的要求一一列出來，而是把他們真正的需求呈現出來。在這次項目設計中，把一個設計給一個不是互聯網人士的陌生人講清楚，不是一蹴而就的事情，需要自己本身更多的站在用戶的使用角度出發，思考產品的使用人群究竟最介意的是什么，究竟最希望我們帶給他們什么。
開學季不寂寞哦，快來找小小Q一起玩吧！
