阿森納網(wǎng)站改版：一次負(fù)責(zé)任的再設(shè)計

張爭輝

倫敦機構(gòu)Ostmodern公司和阿森納足球俱樂部再次攜手，重新設(shè)計了阿森納的網(wǎng)站。在專訪當(dāng)中，讀者將了解到這個瘋狂的賽場是如何跨越那條邊界線的。

英超俱樂部似乎從最近開始才逐步肯定了數(shù)字市場對擴大球迷數(shù)量的重要性。

在此之前，這些俱樂部網(wǎng)站看起來似乎都是千篇一律的設(shè)計，外包給第三方提供商后沒有過多要求，這使得與這些精彩絕倫的賽事相齊名的部族認(rèn)同感大打折扣。在如今這個移動化數(shù)字化普及的時代里，一個網(wǎng)站的成功與否直接會影響到你的雇傭支持者們的忠實度和粘度，甚至包括一些非支持者的青睞。

合作的開始

那些著眼于在全球范圍內(nèi)塑造出知名品牌形象的俱樂部們，諸如曼聯(lián)和曼城俱樂部、切爾西以及阿森納，他們已經(jīng)形成了第一陣營并已定制頂級獨立機構(gòu)的服務(wù)去實現(xiàn)俱樂部的目標(biāo)。

Ostmorden便是一家在該行業(yè)有著實戰(zhàn)經(jīng)驗的創(chuàng)新型公司，其曾在2012年接受阿森納俱樂部技術(shù)合作伙伴Rippleffect公司的邀請，徹底的修復(fù)了網(wǎng)絡(luò)泡沫的存在。

如今視頻點播技術(shù)興起，在諸多知名公司（比如英國廣播公司、英國獨立電視臺第四頻道、EE、維珍傳媒以及澳式橄欖球聯(lián)賽）為客戶開發(fā)網(wǎng)頁媒體項目的背景下，Ostmorden這家全球二十強的公司當(dāng)然也會有他獨到的優(yōu)勢和技術(shù)。

“我們過去遇到的挑戰(zhàn)就是如何最有效的利用這些俱樂部提供的深層次內(nèi)容，包括攝影、社論、球員簡介、元數(shù)據(jù)和視頻，并觀察編輯團(tuán)隊是如何制作內(nèi)容，以及他們的用戶群是如何使用這些內(nèi)容，這是我們深入制作的關(guān)鍵所在?！表椖控?fù)責(zé)人詹姆斯·坎伯尼（James Cambourne）解釋道。

這次Ostmorden的任務(wù)主要圍繞提升用戶體驗、引入一個可擴展的后端和為網(wǎng)站制定一個新的編輯策略而進(jìn)行全方位的重新設(shè)計，所有這些需要在2013年2月以前完成。

為了使絕大多數(shù)的阿森納球迷滿意這次改版的結(jié)果，Ostmorden在阿森納官網(wǎng)做了一個設(shè)計日記全天候現(xiàn)場分析欄，邀請球迷們發(fā)表自己的意見。

找準(zhǔn)切入點

當(dāng)被問到此次項目是如何開始時，UX部門負(fù)責(zé)人理查德·拉莫斯（Richard Amos）這樣說道：“我們和阿森納俱樂部的友誼起始于2010年，當(dāng)時他們邀請我們對網(wǎng)站的視頻點播服務(wù)進(jìn)行重新設(shè)計，也就是現(xiàn)在的阿森納播放器。從一開始我們就不斷強調(diào)阿森納播放器只是對這個世界知名品牌重新定義的第一步，很顯然，我們正在使其內(nèi)容輸出這一項發(fā)展到超越其系統(tǒng)內(nèi)部其余所有部分的功能，之后把這移進(jìn)阿森納的官網(wǎng)也是水到渠成的事情。”

從有機的進(jìn)展和工作信任上來說，Ostmodern公司一直都是最完美最適合的那一個，通過更精細(xì)的感知，了解到顧客到底需要什么，從而使這些更廣泛的網(wǎng)絡(luò)力量重新恢復(fù)活力。“從技術(shù)角度來說，網(wǎng)站簡介只是一個進(jìn)步，而非一次革命。但是從一開始我們的意圖就很明確，那就是我們的網(wǎng)站不能以任何非同尋常的方式存在?！崩估^續(xù)說道。“我們第一階段的工作目標(biāo)集中在和阿森納官網(wǎng)相關(guān)的廣泛主題上。通過和編輯團(tuán)隊一起共事，我們剖析了目前的編輯發(fā)行方式并制定了簡單明了的內(nèi)容模型。這提出了報道內(nèi)容應(yīng)具有的廣度、深度和質(zhì)量，并突出了現(xiàn)有網(wǎng)站基礎(chǔ)設(shè)施的復(fù)雜性和面臨的挑戰(zhàn)。

通過觀察我們發(fā)現(xiàn)阿森納官網(wǎng)的內(nèi)容過于繁雜，應(yīng)該簡化，而這也在阿森納的編輯團(tuán)隊中引起共鳴。于是‘簡化就成了我們工作的切入點?！?/p>

作為現(xiàn)在網(wǎng)站上訴的中流砥柱，Ostmodern公司獲得的社論方面的欣賞，對這個團(tuán)隊來說，無疑是一支強心劑。

資源和團(tuán)隊的結(jié)合

促成這一內(nèi)容成行將是至關(guān)重要的，就如拉莫斯所說，對實際工作流程的認(rèn)識是非常寶貴的。“作為一個有著雄厚歷史的新聞公司，阿森納的編輯團(tuán)隊和Ostmodern公司一起花費了相當(dāng)多的時間，幫助我們了解他們的工作流程和編輯風(fēng)格。

盡最大努力把我們提供的想法和現(xiàn)下的工具相結(jié)合，試圖達(dá)到目標(biāo)的完美融合，這個是關(guān)鍵之匙。了解現(xiàn)有的工作流程是非常重要的，找出彼此需求和影響的契合點也是重中之重。對于網(wǎng)站我們都有自己的概念想法，很大一部分工作都是圍繞著早期概念闡述和理解彼此的目的進(jìn)行。

隨著項目的發(fā)展，阿森納的網(wǎng)站經(jīng)理和我們的Shoreditch工作室團(tuán)隊在一起工作，這確保他能夠理解用戶的各方面需求，還能為我們的品牌修護(hù)和在新框架中創(chuàng)造出新品牌方面提供力所能及的幫助。

最重要的是，我們是一個團(tuán)隊，我們一起負(fù)責(zé)整個網(wǎng)站的概念推出， 一旦網(wǎng)站如期所望推出成功，我們希望最終他能使這個角色獨立于我們而存在。”

確定編輯內(nèi)容是關(guān)鍵，團(tuán)隊可以深入了解反饋過來的關(guān)鍵信息，定期更新和編輯新鮮事， 以吸引瀏覽者再次登錄。

當(dāng)它涉及到謠言或者傳聞，再根據(jù)反饋的信息來提供球員的其它狀況給有質(zhì)疑的球迷們?！案鶕?jù)網(wǎng)站的數(shù)據(jù)分析，很明顯，新聞是吸引球迷一天內(nèi)多次登陸阿森納網(wǎng)站的最優(yōu)版塊?！庇脩趔w驗設(shè)計師露西·修斯（Lucy Hughes）強調(diào)道。

忠實的支持者

對于網(wǎng)站現(xiàn)在瀏覽不佳的情況，制作團(tuán)隊也沒有打算袖手旁觀。委員會將始終與阿森納俱樂部建立并保持一個長期合作伙伴的關(guān)系，并將繼續(xù)為未來的合作提供寶貴的經(jīng)驗教訓(xùn)。正如項目經(jīng)理坎伯尼所說，像這樣的項目，一旦網(wǎng)站連接到了服務(wù)器，就不會結(jié)束。

Ostmodern繼續(xù)與阿森納合作改善網(wǎng)站，在嚴(yán)格的管理范圍之內(nèi)，將提供一個可行的、完整的產(chǎn)品，在功能增減的同時而不影響功能的完整性。

“我們現(xiàn)在能夠重新審視一個連貫和完整的產(chǎn)品，改進(jìn)并進(jìn)一步加強它的內(nèi)容、功能和特性?！笨膊嵴f到“有了像這樣大的一個網(wǎng)站，對我們這家機構(gòu)和阿森納這家企業(yè)來說，能從中吸取經(jīng)驗教訓(xùn)，對我們以后的工作都是至關(guān)重要的。為此，我們通過制圖分析和社會媒體的反饋，來選了解這些設(shè)計對用戶行為的具體影響，以及這將如何影響到我們未來的設(shè)計方向和阿森納的編輯團(tuán)隊的不斷更新和使用該網(wǎng)站?！?/p>

坎伯尼表示，在概念方面，團(tuán)隊想要呈現(xiàn)一個全新的報道方式，即把以前的實足博客式報道轉(zhuǎn)變?yōu)閯討B(tài)新聞報道形式?！斑@樣的話粉絲們就可以隨時隨地獲得報道的最新內(nèi)容。通過建立俱樂部的每周計劃表和每年計劃表的對比模型，我們可以掌握阿森納所有經(jīng)營業(yè)務(wù)的低潮期和未來動向。

通過這些，我們既能看到我們期待的新聞，比如俱樂部的裝置情況，又能獲得我們意想不到的新聞，比如傷病情況、爭議事件以及頭條新聞事件”。

“迷失在網(wǎng)絡(luò)中是很容易的事，為了獲得真實的阿森納體驗，項目小組進(jìn)行了一場模擬。我們對發(fā)生在酋長球場內(nèi)部以及比賽中的數(shù)據(jù)統(tǒng)計和新聞充滿了期待，”設(shè)計師修斯津津樂道的對自己的項目介紹道。“現(xiàn)在的挑戰(zhàn)是如何將‘蜂鳴器轉(zhuǎn)換成一種連貫高效的工具，方便俱樂部和球迷之間的交流溝通。

我知道我們擁有使球迷趨之若鶩的豐富內(nèi)容，所以挑戰(zhàn)就是把它呈現(xiàn)出來，以使球迷們能看到最新的消息并能輕易地了解比賽的全過程。這需要我們不停地起稿、做原型，直到我們滿意才能呈獻(xiàn)給球迷們?！?/p>

專業(yè)的合作伙伴

由于阿森納俱樂部熱衷于提供一個干凈的具有創(chuàng)造性的平臺，這種偵測工作延伸到了網(wǎng)站的視覺效果上。“一次對球場細(xì)致入微的游覽使我們在現(xiàn)實中獲取了很多視覺素材，比如那些工業(yè)建筑、室內(nèi)主題設(shè)計，甚至是整潔的廁所。”

Ostmodern公司的設(shè)計主管克里斯·蘭道爾（Chris Randall）笑著說。“最終的結(jié)果是一系列有關(guān)攝影、印刷、設(shè)計表格、色彩質(zhì)地、文章格式以及數(shù)字語言的板塊。我們最初在印刷、攝影和圖形組件的整體平衡方面已經(jīng)探索出一些概念性的路線?！?/p>

一旦這些核心想法獲得通過，團(tuán)隊就可以解決前端構(gòu)造的一系列問題。“交替變化是一個重要的因素。我們的方案必須對網(wǎng)站傳播和商業(yè)影響起到控制力和影響，同時又能適應(yīng)跨越性平臺，”蘭道爾解釋道?！岸喾N屏幕密度嚴(yán)重影響了我們的設(shè)計思路，所以一般情況下我們盡量會使用單一的CSS樣式?！?/p>

這里的一些經(jīng)驗教訓(xùn)都取自于阿森納播放器項目，這個項目試圖預(yù)測可能內(nèi)容的重復(fù)，但被證明有局限性。之前設(shè)計用來確保一致性的內(nèi)容模板，根據(jù)坎伯尼的測試結(jié)果，易變的單調(diào)化和差異化。

“最新的阿森納網(wǎng)頁框架正是解決這一問題的良藥。該網(wǎng)頁采用信息集群的模塊化格式，這就使社論能及時對團(tuán)隊的重心和活動變化做出反應(yīng)。

比如當(dāng)阿森納的第一支團(tuán)隊遭受了一連串重大失敗后，就會出現(xiàn)新聞的真空期。有了這樣的教訓(xùn)，阿森納采用網(wǎng)頁框架來報道一年中的重大事件，相反傳統(tǒng)的規(guī)范性布局和體系結(jié)構(gòu)則可能會使這個內(nèi)容石沉大海?！?/p>

球迷在面對逆境時會表現(xiàn)得優(yōu)柔寡斷，所以你對一個足球網(wǎng)站的目標(biāo)客戶會持懷疑態(tài)度，擔(dān)心他們是不是一個堅定的用戶團(tuán)體，這樣就會導(dǎo)致所有外觀、感覺和聲音的鋪墊都會白白浪費。在2013賽季的英超圣誕大戰(zhàn)和新年對決之后，設(shè)計師們就能在社交媒體的入口處獲取確定的消息了。

“我們決定將對編輯方法和網(wǎng)站設(shè)計進(jìn)行全方位的改進(jìn)，以期重振雄風(fēng)?！笨膊釓娬{(diào)道，“我們通過Twitter和Facebook來評估反應(yīng)。有些球迷不喜歡這樣大波動的變化，但隨著人們發(fā)現(xiàn)并掌握這些新設(shè)計和新功能的優(yōu)勢時，大家就會接受并喜歡上這些好的想法。”

經(jīng)驗的形成

任何項目設(shè)計的絕大部分工作就是和客戶建立友誼。一旦這些進(jìn)入軌道，那接下來的工作就是客戶解決方案。然而對設(shè)計師們來說，這經(jīng)常意味著要進(jìn)行一個未知的航行和一段發(fā)現(xiàn)之旅。

就目前Ostmodern公司的發(fā)展階段來說，凝聚力在這兩個階段都不可欠缺，正如被證明很有效的原型設(shè)計過程一樣。UX項目負(fù)責(zé)人拉莫斯詳細(xì)講述了當(dāng)其測試開發(fā)時所實施的戰(zhàn)略?！耙粋€單獨的構(gòu)建和設(shè)計團(tuán)隊之間所面臨的挑戰(zhàn)之一就是清晰地表達(dá)系統(tǒng)和交互設(shè)計的細(xì)微差別。反而會常使優(yōu)秀的想法在傳達(dá)的過程中慢慢消失。不能清晰的表達(dá)想法常常是設(shè)計中最脆弱的一環(huán)，而并非是設(shè)計者無法提供好的創(chuàng)意。

“為了緩和這種情況，我們投入了大量時間去研制HTML（超文本標(biāo)記語言）以及在Heroku（無需準(zhǔn)備的部署服務(wù)）上運行的Python或Django（用Python語言寫的開源Web開發(fā)框架）數(shù)據(jù)驅(qū)動。這能讓我們在數(shù)據(jù)模型基礎(chǔ)上去實驗我們的核心概念。我們花費大量的時間去探索諸如‘話題這樣的數(shù)據(jù)源，以及與之匹配的內(nèi)容。但這些目前還沒有展現(xiàn)。”

“我們可以測試用戶流量是如何在這些內(nèi)容構(gòu)架上運行的，并向技術(shù)供應(yīng)商證明我們是如何設(shè)想這些數(shù)據(jù)出現(xiàn)在真實網(wǎng)絡(luò)上。我們也在設(shè)計‘巨型下拉菜單時經(jīng)歷了嚴(yán)峻的考驗，即使這些想法在紙面上看來非常妥當(dāng)，我們也會等到全部做好之后再和制作團(tuán)隊進(jìn)行深入并且清晰的溝通?！?/p>

（編輯：楊磊）