HTC新版全球官網(wǎng) 高清多圖傾情呈現(xiàn)背后故事

數(shù)英評分

收藏評論

舉報 2011-07

掃描,分享朋友圈

—— 還是那句話：一看就非常非常Fi的作品！好設(shè)計永遠有激勵人心的力量！

Creating a Brilliant Experience

盡管，與所有類似的代理商經(jīng)歷的一樣，這同樣是一場歷時長久且充滿考驗的故事. 從Pitch, 用戶調(diào)查, Presentation的前后準備,具體的設(shè)計與開發(fā)過程，思維過程，怎樣與客戶之間周旋等等??看看Fi是怎樣讓HTC突破傳統(tǒng)，打破Marketing定式，令全新的HTC全球官網(wǎng)煥發(fā)一新，在簡約與細節(jié)之中，怎樣激發(fā)互動，創(chuàng)造體驗，怎樣最終令”Quietly Brilliant”這幾個原本頗有距離的品牌 Slogan, 頓時充滿生氣！

URL：http://www.htc.com/www/

本文內(nèi)容均來自: Fi HTC Case Study
文章所有圖片與版權(quán)歸: Fantasy Interactive(Fi) 所有, 請尊重版權(quán)!
翻譯、編輯: Viking Wong@DamnDigital
編輯: Vivian Peng; Image: Wang Qi@DamnDigital
(轉(zhuǎn)載請注明來自DamnDigital)

還記得去年10月底我們曾分享的來自Fantasy Interactive (Fi): HTC Sense 關(guān)于體驗與體驗背后的故事案例分享嗎？是的，數(shù)月之后，F(xiàn)i又給大家?guī)砹梭@喜——全新HTC全球官方網(wǎng)站。

由Fi為HTC設(shè)計的官網(wǎng)HTC.com突破了以往傳統(tǒng)的營銷網(wǎng)站風(fēng)格，用更加直觀卻又不失精美的方式呈現(xiàn)產(chǎn)品信息，同時也加強了用戶與網(wǎng)站之間的互動交流。

通過以下的產(chǎn)品演示，突出了網(wǎng)站的亮點和功能性，以及隱藏于產(chǎn)品背后的創(chuàng)新與靈感。HTC.com——簡單、謙和之中見卓越。

Phase 1——Pitch & Initial concepts 比稿 & 初步概念

歷時6周、經(jīng)過5次利益協(xié)商會議、交涉覆蓋面達4個時區(qū)，可謂是一次全球冒險?？纯碏i究竟是如何使HTC.com煥發(fā)活力的。

從16家頂級創(chuàng)意機構(gòu)中脫穎而出

HTC邀請Fi與其他15家頂級創(chuàng)意機構(gòu)一同參與此次的RFP流程。通過對HTC的持續(xù)關(guān)注以及我們手頭正在處理的幾個案子，我們清晰的知道該采用何種策略、創(chuàng)意和技術(shù)，來說服HTC，F(xiàn)i將使HTC.com煥然一新，并提高用戶體驗。

大家?guī)е约旱南敕ㄅc創(chuàng)意，穿梭于千里之外的臺北、斯德哥爾摩、西雅圖、倫敦和紐約。我們有機會與許多精英團隊及HTC全球辦事處的人員一起共事，對我們來說是非常難得的體驗。在此過程中，如何提升品牌的整體盈利實力成了所有人共同的信念和目標。

我們向20位股東成員陳述了我們的研究與建議。第二天，我們收到了好消息！

在第一輪比稿Presentation之前，打擊全力準備迎戰(zhàn)，稿子貼滿了墻。

競爭分析

通過對HTC競爭者以及非同業(yè)競爭之間的差距分析，我們的UX戰(zhàn)略團隊成功的在數(shù)字領(lǐng)域構(gòu)建出了框架，并確定了有效及無效部分。

概念的論證與探索

根據(jù)漏斗式的經(jīng)典理論，用戶與HTC產(chǎn)品之間的互動是品牌認知的第一步。

我們利用互動技術(shù)，使用戶能容易的發(fā)現(xiàn)產(chǎn)品，并且更直觀的體驗產(chǎn)品。這樣的交互式旨在計劃設(shè)計一個簡單，卻又包含時尚的色彩設(shè)計、排版及互動功能的開發(fā)、以及含有社交元素的復(fù)雜用戶體驗設(shè)計。

Phase 2 ——UX & strategy 用戶體驗研究 & 整體策略形成

隨著項目的全面展開，需要制定網(wǎng)站的整體框架。我們的Brief目標是：保持用戶的參與度，不斷推動銷售、同時提供一個能良好呈現(xiàn)品牌與產(chǎn)品信息的網(wǎng)站導(dǎo)航系統(tǒng)。

前期調(diào)研與分析報告

了解目標人群是創(chuàng)建任何網(wǎng)站最重要的因素。HTC.com同樣如此。對HTC 7大類目標用戶的研究，使我們對于整體的策略更為有理可據(jù)。從這些用戶群體中，我們可以了解其特定需求和行為，以確保HTC.com達到預(yù)期的效果。

除此之外，我們分析了定量和定性的歷史數(shù)據(jù)資料，以確保優(yōu)化部分的功能有效。

我們的研究最后以線型結(jié)構(gòu)圖的方式呈現(xiàn)，具有高針對性的同時也成為了項目中每個階段比較的根據(jù)。當在項目推進的過程中，這份研究總結(jié)報告能確保我們沒有偏離整體戰(zhàn)略方針。

高層會議連番”轟炸”

基于HTC全球企業(yè)的架構(gòu)，從西雅圖到臺北，我們會見了將近25位高層，以確保大家對作進度流程達成共識。

我們與市場部經(jīng)理及產(chǎn)品開發(fā)人員進行大規(guī)模面對面的策略會議。會議結(jié)束后，HTC的市場工作人員會給到我們一張非常詳盡和明確的會議討論議題及各方任務(wù)清單。這也是完善網(wǎng)站功能的藍本。

品牌調(diào)性&網(wǎng)站功能的矩陣研究

你不可能建造一幢連需要多少間臥室都搞不清的房子。同樣的，在HTC.com的設(shè)計與開發(fā)中，我們需要確保其特征與功能，以防任何疏忽。這意味著，我們要確定究竟分別需要多少間臥室。

每個功能應(yīng)該與商業(yè)目標、功能設(shè)置、具有引導(dǎo)性的導(dǎo)航欄設(shè)計、以及對于用戶體驗的無上重視，所有這些策略的思考維度都是相一致的。

網(wǎng)站線框與網(wǎng)站架構(gòu)設(shè)計

既然我們已經(jīng)掌握了HTC.com的需求，那下一步就該網(wǎng)站的框架。線框的設(shè)計應(yīng)該適應(yīng)用戶的網(wǎng)站瀏覽路徑、頁面內(nèi)容和設(shè)計布局。

線框與網(wǎng)站導(dǎo)航的設(shè)計非常重要，它是最終網(wǎng)站頁面視覺設(shè)計和內(nèi)容排版上的重要參照指標。此外，注釋詳盡完善的線框稿也可以讓客戶以及制作方更清晰地了解頁面元素與功能模塊的設(shè)置布局。

Phase 3 —— Design 設(shè)計

以體驗為設(shè)計核心，以強烈的交互視覺吸引用戶參與，這是整站設(shè)計的主導(dǎo)原則。

線框設(shè)計

產(chǎn)品頁面設(shè)計進展

在產(chǎn)品頁面的Layout設(shè)計上，我們前前后后加上最終確認的一稿，總共做了六稿……

Version 1：

Version 2：

Version 3：

Version 4：

Version 5：

最終確認稿：

Smart Phones Design Process 智能手機產(chǎn)品設(shè)計

產(chǎn)品頁面設(shè)計完了，之后輪到智能手機產(chǎn)品的設(shè)計了，沒想到更過猶不及，光是智能手機產(chǎn)品的設(shè)計，就足足做了六稿:

Version 1：

Version 2：

Version 3：

Version 4：

Version 5：

最終確認稿：

互動式組件

現(xiàn)在回想起當初與HTC客戶一起做這個官網(wǎng)的過程時，還是會馬上聯(lián)想到，HTC對于互動性體驗的一再強調(diào)與重視，他們希望官方網(wǎng)站的每一個元素都充滿互動性，吸引消費者能進一步了解產(chǎn)品細則，并且用最簡易的方法找到個性化的產(chǎn)品推薦。。。?？墒牵鳛楣俜骄W(wǎng)站，需要承載的產(chǎn)品信息與內(nèi)容量又相當龐大復(fù)雜。最終，我們設(shè)計了一系列互動小工具，便于訪問者根據(jù)自己需求，只要拖動生動便于理解的小iCon，就能快速找到相應(yīng)的產(chǎn)品和信息，最終實現(xiàn)了令訪問者在富有趣味的體驗過程中，最快速度地找到符合其個性化的產(chǎn)品組合推薦。

將極富個性的特色元素放到人們視線的最中央

交互式地圖，響應(yīng)性觸摸屏設(shè)計，最流暢的畫面過渡效果……一系列極富巧心的設(shè)計，最終目的是使得每一個方塊能最便捷地找到最適合自己的產(chǎn)品推薦。基于這一原則，我們將每一個產(chǎn)品的視覺呈現(xiàn)設(shè)計得盡可能符合該產(chǎn)品的賣點與調(diào)性，同時輔以流媒體視頻，音效，便捷的按鍵操作功能設(shè)置，將所有重要的產(chǎn)品信息一步步以最符合用戶體驗習(xí)慣的方式呈現(xiàn)。當然，更不會少了一個“Buy Now 立即購買”的按鈕，而且一定要再最便捷最誘惑的位置進行呈現(xiàn)。

Phase 3.2——Final Design 最終頁面定稿設(shè)計

經(jīng)過為期數(shù)月的前期設(shè)計階段，以及多次成功愉快的客戶會面與設(shè)計稿確認會議之后，終于，走到了最終的頁面設(shè)計定稿階段，對每一個頁面，每一個元素，每一個互動元素的設(shè)計進行最終的優(yōu)化，審核，確認。以便將工作順利無誤地移交至下一階段代碼與程度開發(fā)制作團隊的手上。

首頁

首頁需要最先給予強烈的視覺與情感沖擊，在最短的時間內(nèi)，建立HTC品牌與來訪者之間的第一好感度與最初的連結(jié)。因此，在首頁的視覺設(shè)計上，我們使用了強烈的具有生活氣息與溫馨感的畫面設(shè)計。通過頁面程序與前端之間的良好配合，共同呈現(xiàn)出良好的視覺與情感傳達、共鳴效果。

人氣機型/推薦新品頁面

產(chǎn)品總覽頁面

產(chǎn)品總覽頁強調(diào)非常清晰簡約的產(chǎn)品陳列結(jié)構(gòu),有效利用Tags標簽進行引導(dǎo)。有力配合所有產(chǎn)品的信息架構(gòu)與體驗效果。抱歉的呈現(xiàn)也需要通過縝密的設(shè)計，突出最為核心的產(chǎn)品賣點關(guān)鍵詞，技術(shù)參數(shù)關(guān)鍵詞，達到最好的吸引用戶點擊的效果。

產(chǎn)品具體信息頁面

該頁面最強調(diào)的是全部內(nèi)容以該產(chǎn)品為中心，減少各種產(chǎn)品以外信息的干擾。因此，你會發(fā)現(xiàn)在產(chǎn)品的具體信息頁面的設(shè)計方式與整站的設(shè)計理念并不相同。因為當用戶在某個產(chǎn)品的具體信息頁面時，最關(guān)鍵的目標是讓消費者能夠不受干擾地，安心地，完整地閱讀信息，了解希望獲得的內(nèi)容那個。從而進行下一步行動。所以。在這一頁面的設(shè)計上，信息元素越簡單越好。

智能手機應(yīng)用程序與插件工具頁面

今時今日，我們的手機擔(dān)負的功能絕對不僅僅是手機而已，而是人們與世界相互聯(lián)通的重要窗口。因此，在全新的HTC官網(wǎng)上，我們強化了應(yīng)用程序和各種插件工具的豐富功能與用戶使用便捷性。

社交網(wǎng)站官方賬號信息與服務(wù)幫助

無論手機的功能多么供不應(yīng)求，然而，直到今天，人性化的服務(wù)與聯(lián)系窗口依然是企業(yè)與品牌面對消費者與廣大市場時重要的形象展示窗口，對于建立消費者的品牌好感度與忠實度非常重要，因而，品牌的聯(lián)系窗口越多越好，包括盡可能多地建立品牌的官方社交平臺賬號，facebook，youtube，twitter，盡可能多地向受眾陳列。

網(wǎng)站訪問小貼士

各種小貼士，小指南雖然只是整個網(wǎng)站中很小的一部分，但是對于用戶的好感度建立非常有幫助，往往是消費者對一個品牌建立長期信任與忠誠關(guān)系的極為重要的環(huán)節(jié)，不可忽視。

產(chǎn)品幫助與咨詢 FAQ

產(chǎn)品維修與售后幫助服務(wù)

企業(yè)財務(wù)/投資者關(guān)系

作為一家國際型的上市企業(yè)，一定的企透明度和法定責(zé)任制信息已經(jīng)是必不可少的一個環(huán)節(jié)了，包括公司的財務(wù)狀況報表，公司企業(yè)新聞，公共文件，從本質(zhì)上講，需要建立一個面向各種（潛在）投資合作伙伴的內(nèi)容維系與日常更新服務(wù)團隊。

聯(lián)系方式與人才招聘

站內(nèi)搜索

Phase 4——Technology 技術(shù)

Teamsite的CMS后端支持前端HTML5和Flash的整合，我們旨在將HTC.com發(fā)展成為提供產(chǎn)品和訪客生活息息相關(guān)的內(nèi)容類型及培養(yǎng)訪客忠誠度。

技術(shù)將營銷戰(zhàn)略、用戶體驗和設(shè)計統(tǒng)籌到一起。通過嚴格的技術(shù)審查，硬件與軟件的評估以及最佳的方法實踐，我們的開發(fā)團隊將HTC.com用戶的需求體驗與技術(shù)支持緊緊相連。另外，我們整合了一系列方法以應(yīng)對網(wǎng)站更好的適應(yīng)我們所知的探索階段的各種商業(yè)需求。使用如此強悍的內(nèi)容管理系統(tǒng)CMS,使我們能夠更容易的實現(xiàn)跨區(qū)域網(wǎng)站的內(nèi)容管理、50種語言的轉(zhuǎn)換、產(chǎn)品與服務(wù)的更新及各種變化。