新HTC全球官网 高清多图倾情呈现背后故事

Creating a Brilliant Experience

尽管，与所有类似的代理商经历的一样，这同样是一场历时长久且充满考验的故事. 从Pitch, 用户调查, Presentation的前后准备,具体的设计与开发过程，思维过程，怎样与客户之间周旋等等??看看Fi是怎样让HTC突破传统，打破Marketing定式，令全新的HTC全球官网焕发一新，在简约与细节之中，怎样激发互动，创造体验，怎样最终令”Quietly Brilliant”这几个原本颇有距离的品牌 Slogan, 顿时充满生气！

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

还记得去年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/

Project: HTC New Global Website
Client: HTC Global
Agency: Fi

本文内容均来自:?Fi HTC Case Study
文章所有图片与版权归:?Fantasy Interactive(Fi)?所有, 请尊重版权!
转载自DamnDigital