—— 還是那句話：一看就非常非常Fi的作品！ 好設計永遠有激勵人心的力量！
Creating a Brilliant Experience
盡管，與所有類似的代理商經歷的一樣，這同樣是一場歷時長久且充滿考驗的故事. 從Pitch, 用戶調查, Presentation的前后準備,具體的設計與開發過程，思維過程，怎樣與客戶之間周旋等等??看看Fi是怎樣讓HTC突破傳統，打破Marketing定式，令全新的HTC全球官網煥發一新，在簡約與細節之中，怎樣激發互動，創造體驗，怎樣最終令”Quietly Brilliant”這幾個原本頗有距離的品牌 Slogan, 頓時充滿生氣！
本文內容均來自: Fi HTC Case Study
文章所有圖片與版權歸: Fantasy Interactive(Fi) 所有, 請尊重版權!
翻譯、編輯: Viking Wong@DamnDigital
編輯: Vivian Peng; Image: Wang Qi@DamnDigital
(轉載請注明來自DamnDigital)
還記得去年10月底我們曾分享的來自Fantasy Interactive (Fi): HTC Sense 關于體驗與體驗背后的故事案例分享嗎？ 是的，數月之后，Fi又給大家帶來了驚喜——全新HTC全球官方網站。
由Fi為HTC設計的官網HTC.com突破了以往傳統的營銷網站風格，用更加直觀卻又不失精美的方式呈現產品信息，同時也加強了用戶與網站之間的互動交流。
通過以下的產品演示，突出了網站的亮點和功能性，以及隱藏于產品背后的創新與靈感。HTC.com——簡單、謙和之中見卓越。
Phase 1——Pitch & Initial concepts 比稿 & 初步概念
歷時6周、經過5次利益協商會議、交涉覆蓋面達4個時區，可謂是一次全球冒險。看看Fi究竟是如何使HTC.com煥發活力的。
從16家頂級創意機構中脫穎而出
HTC邀請Fi與其他15家頂級創意機構一同參與此次的RFP流程。通過對HTC的持續關注以及我們手頭正在處理的幾個案子，我們清晰的知道該采用何種策略、創意和技術，來說服HTC，Fi將使HTC.com煥然一新，并提高用戶體驗。
大家帶著自己的想法與創意，穿梭于千里之外的臺北、斯德哥爾摩、西雅圖、倫敦和紐約。我們有機會與許多精英團隊及HTC全球辦事處的人員一起共事，對我們來說是非常難得的體驗。 在此過程中，如何提升品牌的整體盈利實力成了所有人共同的信念和目標。
我們向20位股東成員陳述了我們的研究與建議。第二天，我們收到了好消息！
在第一輪比稿Presentation之前，打擊全力準備迎戰，稿子貼滿了墻。
競爭分析
通過對HTC競爭者以及非同業競爭之間的差距分析，我們的UX戰略團隊成功的在數字領域構建出了框架，并確定了有效及無效部分。
概念的論證與探索
根據漏斗式的經典理論，用戶與HTC產品之間的互動是品牌認知的第一步。
我們利用互動技術，使用戶能容易的發現產品，并且更直觀的體驗產品。這樣的交互式旨在計劃設計一個簡單，卻又包含時尚的色彩設計、排版及互動功能的開發、以及含有社交元素的復雜用戶體驗設計。
Phase 2 ——UX & strategy 用戶體驗研究 & 整體策略形成
隨著項目的全面展開，需要制定網站的整體框架。我們的Brief目標是：保持用戶的參與度，不斷推動銷售、同時提供一個能良好呈現品牌與產品信息的網站導航系統。
前期調研與分析報告
了解目標人群是創建任何網站最重要的因素。HTC.com同樣如此。對HTC 7大類目標用戶的研究，使我們對于整體的策略更為有理可據。從這些用戶群體中，我們可以了解其特定需求和行為，以確保HTC.com達到預期的效果。
除此之外，我們分析了定量和定性的歷史數據資料，以確保優化部分的功能有效。
我們的研究最后以線型結構圖的方式呈現，具有高針對性的同時也成為了項目中每個階段比較的根據。當在項目推進的過程中，這份研究總結報告能確保我們沒有偏離整體戰略方針。
高層會議連番”轟炸”
基于HTC全球企業的架構，從西雅圖到臺北，我們會見了將近25位高層，以確保大家對作進度流程達成共識。
我們與市場部經理及產品開發人員進行大規模面對面的策略會議。會議結束后，HTC的市場工作人員會給到我們一張非常詳盡和明確的會議討論議題及各方任務清單。這也是完善網站功能的藍本。
品牌調性&網站功能的矩陣研究
你不可能建造一幢連需要多少間臥室都搞不清的房子。同樣的，在HTC.com的設計與開發中，我們需要確保其特征與功能，以防任何疏忽。這意味著，我們要確定究竟分別需要多少間臥室。
每個功能應該與商業目標、功能設置、具有引導性的導航欄設計、以及對于用戶體驗的無上重視，所有這些策略的思考維度都是相一致的。
網站線框與網站架構設計
既然我們已經掌握了HTC.com的需求，那下一步就該網站的框架。線框的設計應該適應用戶的網站瀏覽路徑、頁面內容和設計布局。
線框與網站導航的設計非常重要，它是最終網站頁面視覺設計和內容排版上的重要參照指標。此外，注釋詳盡完善的線框稿也可以讓客戶以及制作方更清晰地了解頁面元素與功能模塊的設置布局。
Phase 3 —— Design 設計
以體驗為設計核心，以強烈的交互視覺吸引用戶參與，這是整站設計的主導原則。
線框設計
產品頁面設計進展
在產品頁面的Layout設計上，我們前前后后加上最終確認的一稿，總共做了六稿……
Version 1：
Version 2：
Version 3：
Version 4：
Version 5：
最終確認稿：
Smart Phones Design Process 智能手機產品設計
產品頁面設計完了，之后輪到智能手機產品的設計了，沒想到更過猶不及，光是智能手機產品的設計，就足足做了六稿:
Version 1：
Version 2：
Version 3：
Version 4：
Version 5：
最終確認稿：
互動式組件
現在回想起當初與HTC客戶一起做這個官網的過程時，還是會馬上聯想到，HTC對于互動性體驗的一再強調與重視，他們希望官方網站的每一個元素都充滿互動性，吸引消費者能進一步了解產品細則，并且用最簡易的方法找到個性化的產品推薦。。。。可是，作為官方網站，需要承載的產品信息與內容量又相當龐大復雜。最終，我們設計了一系列互動小工具，便于訪問者根據自己需求，只要拖動生動便于理解的小iCon，就能快速找到相應的產品和信息，最終實現了令訪問者在富有趣味的體驗過程中，最快速度地找到符合其個性化的產品組合推薦。
將極富個性的特色元素放到人們視線的最中央
交互式地圖，響應性觸摸屏設計，最流暢的畫面過渡效果……一系列極富巧心的設計，最終目的是使得每一個方塊能最便捷地找到最適合自己的產品推薦。基于這一原則，我們將每一個產品的視覺呈現設計得盡可能符合該產品的賣點與調性，同時輔以流媒體視頻，音效，便捷的按鍵操作功能設置，將所有重要的產品信息一步步以最符合用戶體驗習慣的方式呈現。當然，更不會少了一個“Buy Now 立即購買”的按鈕，而且一定要再最便捷最誘惑的位置進行呈現。
Phase 3.2——Final Design 最終頁面定稿設計
經過為期數月的前期設計階段，以及多次成功愉快的客戶會面與設計稿確認會議之后，終于，走到了最終的頁面設計定稿階段，對每一個頁面，每一個元素，每一個互動元素的設計進行最終的優化，審核，確認。以便將工作順利無誤地移交至下一階段代碼與程度開發制作團隊的手上。
首頁
首頁需要最先給予強烈的視覺與情感沖擊，在最短的時間內，建立HTC品牌與來訪者之間的第一好感度與最初的連結。 因此，在首頁的視覺設計上，我們使用了強烈的具有生活氣息與溫馨感的畫面設計。通過頁面程序與前端之間的良好配合，共同呈現出良好的視覺與情感傳達、共鳴效果。
人氣機型/推薦新品頁面
產品總覽頁面
產品總覽頁強調非常清晰簡約的產品陳列結構,有效利用Tags標簽進行引導。有力配合所有產品的信息架構與體驗效果。抱歉的呈現也需要通過縝密的設計，突出最為核心的產品賣點關鍵詞，技術參數關鍵詞，達到最好的吸引用戶點擊的效果。
產品具體信息頁面
該頁面最強調的是全部內容以該產品為中心，減少各種產品以外信息的干擾。因此，你會發現在產品的具體信息頁面的設計方式與整站的設計理念并不相同。因為當用戶在某個產品的具體信息頁面時，最關鍵的目標是讓消費者能夠不受干擾地，安心地，完整地閱讀信息，了解希望獲得的內容那個。從而進行下一步行動。所以。在這一頁面的設計上，信息元素越簡單越好。
智能手機應用程序與插件工具頁面
今時今日，我們的手機擔負的功能絕對不僅僅是手機而已，而是人們與世界相互聯通的重要窗口。因此，在全新的HTC官網上，我們強化了應用程序和各種插件工具的豐富功能與用戶使用便捷性。
社交網站官方賬號信息與服務幫助
無論手機的功能多么供不應求，然而，直到今天，人性化的服務與聯系窗口依然是企業與品牌面對消費者與廣大市場時重要的形象展示窗口，對于建立消費者的品牌好感度與忠實度非常重要，因而，品牌的聯系窗口越多越好，包括盡可能多地建立品牌的官方社交平臺賬號，facebook，youtube，twitter，盡可能多地向受眾陳列。
網站訪問小貼士
各種小貼士，小指南雖然只是整個網站中很小的一部分，但是對于用戶的好感度建立非常有幫助，往往是消費者對一個品牌建立長期信任與忠誠關系的極為重要的環節，不可忽視。
產品幫助與咨詢 FAQ
產品維修與售后幫助服務
企業財務/投資者關系
作為一家國際型的上市企業，一定的企透明度和法定責任制信息已經是必不可少的一個環節了，包括公司的財務狀況報表，公司企業新聞，公共文件，從本質上講，需要建立一個面向各種（潛在）投資合作伙伴的內容維系與日常更新服務團隊。
聯系方式與人才招聘
站內搜索
Phase 4——Technology 技術
Teamsite的CMS后端支持前端HTML5和Flash的整合，我們旨在將HTC.com發展成為提供產品和訪客生活息息相關的內容類型及培養訪客忠誠度。
技術將營銷戰略、用戶體驗和設計統籌到一起。通過嚴格的技術審查，硬件與軟件的評估以及最佳的方法實踐，我們的開發團隊將HTC.com用戶的需求體驗與技術支持緊緊相連。另外，我們整合了一系列方法以應對網站更好的適應我們所知的探索階段的各種商業需求。使用如此強悍的內容管理系統CMS,使我們能夠更容易的實現跨區域網站的內容管理、50種語言的轉換、產品與服務的更新及各種變化。
后期制作攻堅階段的五大支柱型成果
后臺程序兼容性問題
HTML5 & Flash并用
整站最終的優化
清理并優化代碼
網站地圖（內容導覽）
上線前就位準備
最終，全新的HTC全球官網于2011年7月正式上線！ 真不容易！為Fi歡呼！
HTC全球官網URL：http://www.htc.com/www/
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）