在過去的幾年當(dāng)中，因?yàn)楣ぷ髟?，我有幸參與了一些著名體育品牌的網(wǎng)站與APP設(shè)計(jì)，在此過程中，我花費(fèi)了大量的時(shí)間和精力來研究體育類網(wǎng)站和APP，對(duì)于整個(gè)市場(chǎng)有了比較清晰的認(rèn)知。通過對(duì)比，我發(fā)現(xiàn)絕大多數(shù)的英超、NFL和NBA的網(wǎng)站模板是如此的相似而過時(shí)，反而是有些球隊(duì)和俱樂部的網(wǎng)站打破了常規(guī)，打造出令人耳目一新的優(yōu)質(zhì)產(chǎn)品。

今天這篇文章，我會(huì)將我最喜歡的體育類網(wǎng)站和APP都列出來，并對(duì)它們進(jìn)行簡(jiǎn)要的分析。這些產(chǎn)品在排版布局，圖片處理、用戶體驗(yàn)、可用性和易用性上，多有其獨(dú)到之處，希望我的這個(gè)列表能給你幫助！

在諸多體育類網(wǎng)站中，我關(guān)注得更多的是體育信息相對(duì)密集的站點(diǎn)，諸如俱樂部、球隊(duì)和球員的個(gè)人網(wǎng)站，球迷可以在那里定期獲得相關(guān)的信息更新、新聞和門票的相關(guān)資訊。

而諸如Reebok和Nike這樣的品牌網(wǎng)站則往往能給你帶來耳目一新的視覺設(shè)計(jì)。接下來，我們具體看看每一個(gè)網(wǎng)站都有什么亮點(diǎn)吧。

Manchester City Football Club

這是曼徹斯特城足球俱樂部的網(wǎng)站，也就是我們常說的曼城。作為一個(gè)有幾年歷史的專業(yè)足球網(wǎng)站，它至今沒有廣告，當(dāng)然這得歸功于它背后錢多得不得了的俱樂部老板。網(wǎng)站整體設(shè)計(jì)漂亮，大膽而明確，品牌感極其強(qiáng)烈，很明顯網(wǎng)站的設(shè)計(jì)者打一開始就在視覺和品牌營(yíng)造上下了極大的功夫。

Arsenal Football Club

在設(shè)計(jì)技巧、可用性與內(nèi)容構(gòu)建上，令人印象最深刻的俱樂部網(wǎng)站應(yīng)該就是阿森納的了。網(wǎng)站使用了時(shí)下流行的響應(yīng)式設(shè)計(jì)，而令人驚艷的地方在于，不論在什么設(shè)備上查看，網(wǎng)站內(nèi)容的排版設(shè)計(jì)都驚人的一致且賞心悅目，閱讀體驗(yàn)極好，這一點(diǎn)非常難得。

FIFA 官方 app

FIFA的官方APP整體設(shè)計(jì)清爽，UI排版在同類產(chǎn)品中非常突出。清晰的大字體、帥氣的大圖和清爽的圖標(biāo)共同營(yíng)造出APP的愉悅使用體驗(yàn)。值得一提的是，APP的設(shè)計(jì)給人的感覺和阿森納的官網(wǎng)很相似，但是這并不是壞事——相似的美感并不會(huì)構(gòu)成抄襲。

Formula 1 official website

這是一級(jí)方程式賽車的官網(wǎng)，整體設(shè)計(jì)漂亮，反應(yīng)靈敏，視覺設(shè)計(jì)豐富而不單調(diào)，交互有趣而執(zhí)行有力，動(dòng)畫元素的引入為整個(gè)網(wǎng)站創(chuàng)造出引人入勝的體驗(yàn)。

Adidas website

阿迪達(dá)斯的官網(wǎng)同樣是使用大量精致而富有張力的影像來營(yíng)造氛圍，如果你仔細(xì)研究網(wǎng)站的每個(gè)Banner和每個(gè)標(biāo)題，你會(huì)從中學(xué)到許多吸引用戶注意力的設(shè)計(jì)技巧。

Lecoqsportif

運(yùn)動(dòng)品牌 le coq sportif 官網(wǎng)設(shè)計(jì)非?，F(xiàn)代，扁平而干凈的風(fēng)格可能是這個(gè)列表中最清爽簡(jiǎn)約的一個(gè)。網(wǎng)站的整體結(jié)構(gòu)溫故，干凈的排版設(shè)計(jì)和高品質(zhì)的圖片選取使得整個(gè)網(wǎng)站的可讀性非常高。

Fight4pride.ca

大膽清晰的排版，在暗色調(diào)的背景襯托之下，讓網(wǎng)站內(nèi)容在視覺上脫穎而出，設(shè)計(jì)師還使用了大量的過度動(dòng)效來呈現(xiàn)交互，為整個(gè)網(wǎng)站的氣質(zhì)加分不少。從網(wǎng)站設(shè)計(jì)和功能，我們可以清晰地觀察到設(shè)計(jì)師和開發(fā)者在完成整個(gè)網(wǎng)站的過程中，有著高度協(xié)調(diào)的合作。

BBC Sport app

對(duì)于英國(guó)的體育迷而言，BBC的體育APP客戶端讓關(guān)注比賽成為了一件極為簡(jiǎn)單的事情。作為世界著名的媒體大鱷，BBC一直堅(jiān)持不懈地完善他們的數(shù)字產(chǎn)品，而他們的這款A(yù)PP也秉承著他們一貫的風(fēng)格：清爽、實(shí)用、良好的用戶體驗(yàn)。

Amir Khan World

這是拳擊手 Amir Kahn 的官方網(wǎng)站，網(wǎng)站的配色方案取自阿森納的官網(wǎng)，排版大膽，外觀走的典型的簡(jiǎn)約風(fēng)，這也使得設(shè)計(jì)師所選取的圖片質(zhì)感更加突出。這個(gè)網(wǎng)站曾獲得了多項(xiàng)大獎(jiǎng)，但是稍加思考你就知道為什么：完備的品牌形象設(shè)計(jì)，精致的動(dòng)畫和交互讓網(wǎng)站的質(zhì)量和氣質(zhì)有了明顯的提升。

Nike Move

Nike Move 的應(yīng)用和網(wǎng)站的設(shè)計(jì)都以其順滑而富有質(zhì)感的UI設(shè)計(jì)而著稱，它不僅看起來漂亮，更重要的是用起來也非常舒服。這款A(yù)PP會(huì)用直觀但是豐富多彩圖形來呈現(xiàn)動(dòng)態(tài)的數(shù)據(jù)。

Puma

有了Nike和Adidas珠玉在前，Puma的設(shè)計(jì)在保持自有品牌風(fēng)格的同時(shí)，可以說整體設(shè)計(jì)是完全有跡可循的。Puma的網(wǎng)站和APP的設(shè)計(jì)堪稱強(qiáng)大，交互與內(nèi)容則豐富有趣，圖片品質(zhì)子不必說，結(jié)合清爽的排版，也是同類設(shè)計(jì)中的翹楚。

Makurasport

Makura Sport的網(wǎng)站使用了垂直視差滾動(dòng)的設(shè)計(jì)，清晰銳利的圖片和霸氣的排版結(jié)合在一起，帶來明顯的視覺沖擊力。網(wǎng)站并沒有大量的文字內(nèi)容，但是可靠的交互與完備的導(dǎo)航設(shè)計(jì)使得整個(gè)網(wǎng)站的品質(zhì)感十足。

Suunto

Suunto 是一個(gè)銷售戶外運(yùn)動(dòng)設(shè)備的網(wǎng)站，網(wǎng)站清爽的外觀，大膽的設(shè)計(jì)，令人耳目一新。作為一個(gè)產(chǎn)品銷售類的網(wǎng)站，大量的產(chǎn)品細(xì)節(jié)和清晰的描述豐富了網(wǎng)站的內(nèi)容，響應(yīng)式的設(shè)計(jì)使得你在小屏幕上一樣可以無損的獲取到產(chǎn)品的相關(guān)信息。

Showtime Sports

這個(gè)網(wǎng)站的內(nèi)容令人印象深刻。黑暗的色調(diào)深得我心，這種內(nèi)容呈現(xiàn)方式可以說恰到好處，你可以在這里清晰地看到黑色的背景襯托之下，網(wǎng)站內(nèi)容顯得非常突出。

Life Fitness Sochi2014

坦率的講，這并不是一個(gè)全新的網(wǎng)站，但是作為2014年索契冬奧會(huì)的網(wǎng)站，設(shè)計(jì)師使用了非常優(yōu)秀的視差滾動(dòng)設(shè)計(jì)和交互動(dòng)效。當(dāng)然，高品質(zhì)的多媒體資源是整個(gè)設(shè)計(jì)的基石。

Nike+

實(shí)際上這是入圍這個(gè)列表的第二個(gè)Nike家的產(chǎn)品，Nike+ 從網(wǎng)站APP都以大膽和簡(jiǎn)約的UI設(shè)計(jì)而著稱，在移動(dòng)應(yīng)用中，這樣的設(shè)計(jì)合理且易用。

Freeletics

這是另外一個(gè)健身類的APP網(wǎng)站。大膽的視覺效果和易用性結(jié)合地很好，加上APP還同大型社區(qū)結(jié)合到了一起，功能上的完備也做的不錯(cuò)。大膽的圖片選取和精簡(jiǎn)的配色方案，令網(wǎng)站的視覺設(shè)計(jì)引人入勝，給人一種自信、直接的第一印象。

【那些充滿異域風(fēng)情的網(wǎng)頁(yè)設(shè)計(jì)】

《狂拽酷炫！20個(gè)來自美國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《KEEP CALM & DESIGN！26個(gè)來自英國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《嚴(yán)謹(jǐn)而浪漫！20個(gè)來自德國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《情迷西班牙！20個(gè)來自西班牙最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《時(shí)尚雅致！25個(gè)來自法國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《請(qǐng)多關(guān)照！20個(gè)來自日本最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》

原文地址：egrappler
優(yōu)設(shè)譯者：@陳子木

「子木說」

反觀這些優(yōu)秀的網(wǎng)站額APP設(shè)計(jì)，雖然同樣是圍繞著體育這個(gè)主題，但是由于對(duì)象不同，其設(shè)計(jì)千差萬別。新聞?lì)惖淖匀粡?qiáng)調(diào)內(nèi)容的呈現(xiàn)，俱樂部和體育明星的網(wǎng)站對(duì)于個(gè)人品牌的呈現(xiàn)有著狂熱的追求，健康類的APP似乎在信息呈現(xiàn)上訴求顯得更加明顯，最有意思的則是體育品牌，他們從圖片到內(nèi)容都在竭盡全力地展現(xiàn)他們的理念尋求認(rèn)同……

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量97萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：