更快更高更强!17款最优秀的体育类网站与APP设计 - 优设-UISDC

更快更高更强!17款最优秀的体育类网站与APP设计

2015/07/07 12660评论区

17-best-sport-websites-apps-1

在过去的几年当中,因为工作原因,我有幸参与了一些著名体育品牌的网站与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】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/17-best-sport-websites-apps

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里