形隨心動 – QQ國際版官網改版

0 評論 8521 瀏覽 2 收藏 8 分鐘

記得剛剛從學校畢業,正式開始在工作中學習設計時,如雷貫耳的金科玉律是“形式追隨內容” “視覺設計為易用性服務”,當時覺得身為視覺設計師比較慘,因為要時刻“追隨產品經理和交互設計師”,當然到了今天已經不會這樣理解問題了,提起這個話題 是因為最近團隊里的視覺設計師Jerry主設的新版QQ國際版官網上線了,整個過程中和很多同事就設計方案進行了交流,做了不少新的嘗試,在這里我簡單整 理一下其中的思路與觀點。 官網地址:imqq.com

pic1

我們團隊比較小,不會細分交互設計師和視覺設計,基本討論過程中就把交互和視覺表現形式給定了。過程大約是先確定網站的導航模塊,然后抽取了產品最具代表性的功能和特點,與項目組同事溝通確定沒有問題后針對其中的每一個要表現的點來尋找最合適的表現方式。

目前較流行的產品官網設計是圖片文字左右錯排的功能介紹,例如line的官網。它的目的性很強,就是希望用戶能通過一次瀏覽就把產品的功能點爛熟于心。而達到這個目的,用反復重復的方式和固定的內容排版很明顯更能達到目的。

pic2

這次QQ國際版的官網,我們并沒有采用這種方案,而是選擇了非常多樣的表現形式。在設計過程中,我們反復問一個問題,我們官網設計的目標是什么?

最關鍵也是最容易衡量的一點是下載轉化率。所以,設計要解決的問題是用戶看到網頁后有沒有足夠的興趣和好感,并樂意去點擊和下載產品。

這種下載的動力無可否認的會包含需求是否被滿足,但是需求與功能點的匹配是否是唯一的動力?

我們都有過并不因為需要,單純因為喜歡而購買商品,尤其是女生,血拼過程中看到喜歡的衣服絕大多數是不會考慮衣櫥里當季是否有足夠的衣物的。

說回互聯網產品,我為數不多花錢購買的APP中有一款叫Sooshi,是一個介紹壽司相關的食材、做法,器具的APP,購買到現在也有很長一段時間了,很多次打開,翻看,但是其實從未閱讀文字,對壽司的故事的不敏感并未影響到我對這個APP的喜愛,它精致得如同藝術品。

pic3

言歸正傳,QQ國際版的官網設計在用戶情感,包括喜愛,認同,興趣激發上和對于功能介紹上應該做到的權衡是什么?

我個人的理解是這樣的:QQ國際版是QQ的兄弟產品,用戶定位更偏向于需要涉外溝通,跨語言溝通和簡潔體驗的群體。首先,從本質上說兩者在功能上的 差異并不顯著,我們并沒有太多QQ沒有的功能可以吸引用戶。其次,產品目前的用戶群體仍然以華人居多,對QQ本身的定位和功能已經有一定認知。第三,我們 需要給用戶足夠的動力使用我們的產品,所以和QQ的差異點需要明確傳達。

在頁面設計中,我們做了一些努力:

最重要的功能差異,消息即時翻譯功能上給足篇幅

官網上用一個篇章來重點介紹消息即時翻譯功能,并且引入互動形式,吸引用戶點擊氣泡,這樣用戶會有直觀的感受和深一層的理解,也多一個渠道教育用戶點擊氣泡就能翻譯消息。

pic4

用戶群體的暗示和人群定位的引導

我們發動身邊的朋友和同事拍攝了一些國外用戶使用QQ國際版的場景,也找了團隊里的美女設計師以外灘為背景拍攝使用QQ國際版的畫面,突出國內外交 流,把我們全球化的定位用更加生動的方式展示出來,會給我們的目標用戶強烈的人群認同感,對于身在國外或者需要和國外交流的用戶,會自然地覺得QQ國際版 是最適合的產品,比列出一堆功能點更加直接打動用戶。

pic5

品牌效果提升

我們整個網頁盡量采用大圖的表現方式,簡潔的內容展現,希望用前沿大膽的設計語言傳達出我們產品的氣質,拉開和其他競品的差距,這些因素都會給QQ 國際版的品牌帶來助力,積累品牌效應。在鼠標滾動過程中我們加入一些細膩的動畫,希望當它們出現時會給用戶帶來驚喜,這種驚喜會讓用戶對網頁的品質產生認 同,進而愿意相信我們APP的品質。

究竟國際版改版的情況怎樣,在官網上線后我們拉取了一些數據:

我們官網在3月27日下午正式上線,下載轉化率從20%穩定提升至35%,跳出率從60%降至44%。

pic6

為了了解用戶對于官網的直觀感受,我們也做了用戶訪談,用戶對國際版QQ官網的品牌感受和印象如下:大氣,國際化,高端,簡潔,商業化,看著舒服, 挺清爽,時尚。這些印象基本符合設計師的設計初衷,訪談過程中我們也發現了一些問題,比如并沒有將用戶普遍會有疑問的問題(QQ國際版支持哪些語言,賬號 是否和QQ互通等)都在首頁上給出解答,我們會在后面進行持續優化。

回到形式追隨內容這個話題,我的理解是:

內容追隨需求,形式服務情感,內容與形式找到最好的匹配。

最后給國際版QQ打個廣告,歡迎大家體驗和交流,下載鏈接官網上有哦~

 

?原文來自:騰訊ISUX

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!