更快更高更強！17款最優秀的體育類網站與APP設計

在過去的幾年當中，因為工作原因，我有幸參與了一些著名體育品牌的網站與APP設計，在此過程中，我花費了大量的時間和精力來研究體育類網站和APP，對于整個市場有了比較清晰的認知。通過對比，我發現絕大多數的英超、NFL和NBA的網站模板是如此的相似而過時，反而是有些球隊和俱樂部的網站打破了常規，打造出令人耳目一新的優質產品。

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

在諸多體育類網站中，我關注得更多的是體育信息相對密集的站點，諸如俱樂部、球隊和球員的個人網站，球迷可以在那里定期獲得相關的信息更新、新聞和門票的相關資訊。

而諸如Reebok和Nike這樣的品牌網站則往往能給你帶來耳目一新的視覺設計。接下來，我們具體看看每一個網站都有什么亮點吧。

Manchester City Football Club

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

Arsenal Football Club

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

FIFA 官方 app

FIFA的官方APP整體設計清爽，UI排版在同類產品中非常突出。清晰的大字體、帥氣的大圖和清爽的圖標共同營造出APP的愉悅使用體驗。值得一提的是，APP的設計給人的感覺和阿森納的官網很相似，但是這并不是壞事——相似的美感并不會構成抄襲。

Formula 1 official website

這是一級方程式賽車的官網，整體設計漂亮，反應靈敏，視覺設計豐富而不單調，交互有趣而執行有力，動畫元素的引入為整個網站創造出引人入勝的體驗。

Adidas website

阿迪達斯的官網同樣是使用大量精致而富有張力的影像來營造氛圍，如果你仔細研究網站的每個Banner和每個標題，你會從中學到許多吸引用戶注意力的設計技巧。

Lecoqsportif

運動品牌 le coq sportif 官網設計非常現代，扁平而干凈的風格可能是這個列表中最清爽簡約的一個。網站的整體結構溫故，干凈的排版設計和高品質的圖片選取使得整個網站的可讀性非常高。

Fight4pride.ca

大膽清晰的排版，在暗色調的背景襯托之下，讓網站內容在視覺上脫穎而出，設計師還使用了大量的過度動效來呈現交互，為整個網站的氣質加分不少。從網站設計和功能，我們可以清晰地觀察到設計師和開發者在完成整個網站的過程中，有著高度協調的合作。

BBC Sport app

對于英國的體育迷而言，BBC的體育APP客戶端讓關注比賽成為了一件極為簡單的事情。作為世界著名的媒體大鱷，BBC一直堅持不懈地完善他們的數字產品，而他們的這款APP也秉承著他們一貫的風格：清爽、實用、良好的用戶體驗。

Amir Khan World

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

Nike Move

Nike Move 的應用和網站的設計都以其順滑而富有質感的UI設計而著稱，它不僅看起來漂亮，更重要的是用起來也非常舒服。這款APP會用直觀但是豐富多彩圖形來呈現動態的數據。

Puma

有了Nike和Adidas珠玉在前，Puma的設計在保持自有品牌風格的同時，可以說整體設計是完全有跡可循的。Puma的網站和APP的設計堪稱強大，交互與內容則豐富有趣，圖片品質子不必說，結合清爽的排版，也是同類設計中的翹楚。

Makurasport

Makura Sport的網站使用了垂直視差滾動的設計，清晰銳利的圖片和霸氣的排版結合在一起，帶來明顯的視覺沖擊力。網站并沒有大量的文字內容，但是可靠的交互與完備的導航設計使得整個網站的品質感十足。

Suunto

Suunto 是一個銷售戶外運動設備的網站，網站清爽的外觀，大膽的設計，令人耳目一新。作為一個產品銷售類的網站，大量的產品細節和清晰的描述豐富了網站的內容，響應式的設計使得你在小屏幕上一樣可以無損的獲取到產品的相關信息。

Showtime Sports

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

Life Fitness Sochi2014

坦率的講，這并不是一個全新的網站，但是作為2014年索契冬奧會的網站，設計師使用了非常優秀的視差滾動設計和交互動效。當然，高品質的多媒體資源是整個設計的基石。

Nike+

實際上這是入圍這個列表的第二個Nike家的產品，Nike+ 從網站APP都以大膽和簡約的UI設計而著稱，在移動應用中，這樣的設計合理且易用。

Freeletics

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

【那些充滿異域風情的網頁設計】

《狂拽酷炫！20個來自美國最優秀的網頁設計》
《KEEP CALM & DESIGN！26個來自英國最優秀的網頁設計》
《嚴謹而浪漫！20個來自德國最優秀的網頁設計》
《情迷西班牙！20個來自西班牙最優秀的網頁設計》
《時尚雅致！25個來自法國最優秀的網頁設計》
《請多關照！20個來自日本最優秀的網頁設計》

原文地址：egrappler
優設譯者：@陳子木

「子木說」

反觀這些優秀的網站額APP設計，雖然同樣是圍繞著體育這個主題，但是由于對象不同，其設計千差萬別。新聞類的自然強調內容的呈現，俱樂部和體育明星的網站對于個人品牌的呈現有著狂熱的追求，健康類的APP似乎在信息呈現上訴求顯得更加明顯，最有意思的則是體育品牌，他們從圖片到內容都在竭盡全力地展現他們的理念尋求認同……

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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