Fantasy Interactive (Fi): 直击“美国内战150周年”网站背后制作全过程

为了纪念美国内战(The Civil War)150周年,Fi为A+E Networks Digital旗下所属的历史频道(History Channel)精心打造的互动网站。网站主体通过6张信息图所呈现的丰富内容与数据,完美的还原并揭秘了美国内战的历史。Fi通过简洁的设计感及有趣的互动体验方式,让沉重的历史话题变得不再无趣。

URL: http://www.history.com/interactives/civil-war-150

本文内容均来自: Fi Civil War 150 case study 
文章所有图片与版权归: Fantasy Interactive(Fi) 所有, 请尊重版权!
翻译、编辑: Viking Wong@DamnDigital
Image: Wang Qi@DamnDigital
(转载请注明来自DamnDigital)

Infomation architecture & concepting 信息架构 & 概念

A&E TV Networks希望在美国内战150年之际,通过一种新鲜、有趣并且充满活力的互动体验方式,来详述战争中各种重大事件,以此纪念美国历史上具有里程碑意义的战争。这个idea很简单;为各式各样的观众人群制造一个结合了丰富动态与深刻教育的体验,从内战的铁杆狂热份子到7年级正在学习内战的学生,让他们从中得到乐趣。

整体策略及视觉设计师项目成功的关键点。Fi以高直观的方式呈现了150个与内战有关的热门专题,同时也引入了一些更深层次并改变人类生活的事件。这150个专题与6个生动的信息图很好的引导辅助用户,从关键战役、武器使用、骑兵人数统计到科技发展的关键时间节点等方面,提供了大量丰富的内容。

Infographics的制作流程

  • 他们是谁——信息图同时统计比较了联盟和同盟军的士兵基本情况。从工资到物资、口粮,相信你一定会被这个数字震撼到。
  • 战争武器——展示了内战中最关键的武器,明确的阐释了这些武器的开发时间、性能以及在这些武器威力下所带来的转折点。
  • 他们是如何牺牲——战争让数十万名人失去生命。信息图让用户深入了解事件真相,细数足以导致动摇一个国家人口的大规模死亡人数的原因。
  • 5场致命性战役——这一部分描绘了最血腥、最致命的机场战役,其中包括了军队战斗次数,及具体伤亡人数。
  • 战争开销——战争所造成的损失难以估计,即使在150年前也同样如此。用户可以利用信息提示小工具,了解战争是如何获得资助。
  • 西点战士——在这一部分中通过互动数据,例举了战争中著名的领导人物及其轶事。

The design progression 设计进展

从这个项目开始以来,我们不断完善设计以确保最终产品的卓越精美。设计一个便捷的集中导航,可以为用户提供即时途径随时了解他们感兴趣的信息。我们希望用户在浏览网站主页时,就有种身临其境的感觉。
我们利用音效及闪光效果,从一开始就抓住浏览者的视线。同时,用户可以从主页、页脚和专题页面中采用的关键元素看出,设计元素的完善性和导航的直观性。正确的浏览顺序和层次结构同样不可忽视。当然,最重要的一点就是用户访问页面的方便与流畅了。

Homepage 主页

FROM SIMPLE TO SPECTACULAR——从简单到华丽

标签导航带有暗蓝灰色金属感十足的设计风格,引用知名的图片强调真实性和内战的历史基准,而精致的预览风格则呈现了内战中的标志性事件,赋予用户更好的交互体验。独特的翻转效果、微妙的闪光和简洁的线条完美的诠释了网站从简单到华丽的转身。

Footer 页脚

MORE INFORMATION, LESS CLUTTER——多信息,少文化

页脚部分的“Historian’s” ,让用户更为方便的访问关键主题,推广有价值的资讯信息。在这一部分,我们还原历史的真实性,突出重要事实,用户可以投票选出他所认为的精彩内容及热门话题。

“Valuable Historian精选”有助于指导用户掌握与内战有关的关键数据。多点导航以确保通过丰富的浏览体验,提供你想要和需要了解的内战讯息。

Topic page 专题页面

我们开发了一个自定义的WIKI项目,以此促进与内战有关的150个最吸引人的专题。相关的图像与信息,结合不同丰富的浏览选项,提供用户参与度与用户体验。

Final Designs 设计终稿

Project: Civil War 150
Client: A&E TV Networks/ History.com
Agency: Fi

 


6 Comments

Have Your Say »

Required

Required, never published