如何借鉴一个优秀的网站

心得

如果想成为一个优秀的前端开发者，我觉得浏览大量优秀的网站是必不可少的。除了提高自己的审美以外，还可以欣赏到许多特别优秀的交互效果，这样不仅可以迅速提高自己的技能，还可以丰富自己的想象力。当然这一切都需要具有一定的基础才行。我觉得借鉴相比于模仿，最大的区别是可以融入自己的思考，学习前端大神们构建网站的思路，分析他们如何实现优秀的交互效果，揣摩他们如何思考用户体验等等。

什么是优秀的网站

我个人觉得一个优秀的网站应该具备以下几点：

（1）结构清晰，导向明确

（2）体验优秀，交互敏捷

（3）新颖个性，风格独特

界面自然十分重要，它决定了用户下一秒的去和留，但是这是UI设计师的功劳，我觉得前端开发者在实现网页设计图的时候，应该融入自己的思考，把一张张平面的美图变成多维度体验的网站。此时简洁明了的页面结构和优雅细腻的交互效果，成为了衡量用户体验的重要标准。

分析优秀的网站

最近发现了一个国外很酷的网站——toolofna。模仿它，学习它，借鉴它，也是件很酷的事情。

1、tool页面（主页）很简约大气，酷炫的全页视频加上联动的文字，这在国内十分少见，第一眼就抓住了我的心。

2、work页面主要是滚动面板＋旋转图片+优秀素材

3、vr/360页面同样简洁明了，采用高素质背景图来区分模块，达到导向明确的作用

4、directors是我最喜欢的页面，首先是一道闪电划破黑夜，然后呈现简约明亮的背景，凸显文字的锐利清晰。然后是自然细腻的交互动画，黑白分明，黑红点缀，色彩简洁不失优雅

5、awards页面主要是数字滚轮

6、about页面比较简单，主要是内容和背景图之间的色彩搭配，符合整个网站的主色调

7、contact页面主要是字体滑动效果

借鉴优秀的网站

面对这样一个优秀的网站，首先要先平复一下激动的心情。我觉得借鉴一个优秀的网站，先看它的页面结构，toolofna页面结构十分简洁，以上页面基本都是一个个小模块搭建起来，就跟搭积木一样，不同的搭配擦出不一样的火花。然后是交互效果，每个交互动画都可以分解为一个个小小的demo。只要认真分析，都可以自己独立做出来。最后是色彩和字体，虽然这是美工或者设计师的领域，但是我觉得学习就得要多多益善。

导航栏——toolofna
http://blog.csdn.net/iamcgt/article/details/72863303

tool——toolofna
http://blog.csdn.net/iamcgt/article/details/72864735

work——toolofna
http://blog.csdn.net/iamcgt/article/details/72865021

vr/360——toolofna
http://blog.csdn.net/iamcgt/article/details/72870499

directors——toolofna
http://blog.csdn.net/iamcgt/article/details/72871123

awards——toolofna
http://blog.csdn.net/iamcgt/article/details/72870871

contact——toolofna
http://blog.csdn.net/iamcgt/article/details/72870931

总结

虽然我只是个“小学生”，但我觉得前端开发，不仅仅是页面的修修补补。任何领域都有它高深莫测的一面。前端也好，后台也罢，都需要彼此紧密合作，才能做出一个优秀的作品。如果说不久的将来是大数据时代，我认为前端也会有一席之地，尤其是Node.js和微信小程序的出现，使我相信前端有无限的可能性。

toolofna

http://toolofna.com/#!/home