网站推荐

推荐之一ning

推荐理由：这是ning网站的页面之一：what is ning。即对ning这个网站功能的介绍。首先这个网站配色和页面结构不错。颜色以蓝绿为主，用黄色对想要引起读者注意的信息进行强调。页面整体很简洁，有一种纸质手绘的感觉，每个页面都有一定的底纹，从而不会导致太过单调。页面的结构也很好：一般一个页面的中间偏上位置是用户打开一个页面视线最先看的地方，这个网页的信息都放在了中间的方框中，这样用户的注意力就不会被打扰，顶部的导航条始终伴随着用户浏览的整个过程。其次，网页的文字和图片有一些动效，让页面更加有生命力。再者，这个网页进度条拉倒最下面的时候，信息不再以垂直的方式继续向下排列，而是横向滚动，这样使页面不至于过于长。（这样的再垂直显示信息的页面部分信息横向展示的方法在锤子手机的官网也有体现，如下图）

锤子手机官网

顺带说说锤子手机官网，个人比较喜欢它的导航栏和右边的导航条，半透明导航栏会随着每个页面的颜色变化，而且滚动滑轮如同翻页，就像手机的切换屏幕的感觉，不会有显示出上一个页面的下半部分加下一个页面的上半部分。如下图

导航栏颜色和右侧的导航

导航栏颜色和右侧的导航

推荐之二betterment

推荐理由：我把这个网站的优点归结为：巧妙地一步一步把浏览者引导为用户。与大多首页只鼓励用户注册的页面不同，betterment的首页给用户以“帮助”，让用户填自己的年龄和收入，从而给用户以投资方面的指导。值得注意的是：用户打开betterment，age框是一般用户未填写信息从而进行提示的红色，光标就自动在第一个age的框中闪烁，这个细节的暗示就让人更容易随手写下自己的年龄，虽然是细节，却事半功倍，效果显著。而且注意一开始betterment只让人填写了age和income两项，着也是大大提升用户填写的信心，有的没有这方面打算的人可能也会抱着“反正很简单，我填填看”的心态迈入网站的第一步。

引导用户使用的第一步

当你填好age和annual income之后，网站会帮你制定简单的理财目标，给出具体的数字，这样抱着试一试心态的人可能会引起兴趣了，吸引人的数字关系到了自己切身利益了。（很多有此需求的人可能会直接注册，也可能填age和income来看看，但对投资一开始没有兴趣的人一定不会点注册，而是抱着随便填填看的心态填写age和income，所以网站后面的引导也很重要，一定要继续引起浏览者的注意。）下面就是我填写好age和income之后的页面。

帮用户制定投资目标

还有一个注意的优点是，当你对网站给出的理财计划感兴趣时，你可以点开某一项进行具体的查看，如下图我点开safety net进行查看，如果我仍旧很感兴趣，想看更多，就可以点开图中红圈部分来read more。试想一开始就把密密麻麻的信息展开在浏览者面前，这会大大削弱人们的阅读兴趣和信心。这个网站对浏览者循循善诱，慢慢引导浏览者产生兴趣。这就让人感觉这个网站礼貌友好。

不会把密密麻麻的信息全列出来

当你注册填写生日时，还会显示你下次生日的时间，这个小细节带给人惊喜。

下次生日的天数

推荐之三nipponcolors

这是个小而美的网站，采用竖排模式排版，给人耳目一新的感觉。它是一个展示munsell色卡的简单网站，以展示的色卡颜色做背景。首先它有两种模式，一种是由用户选择颜色的模式，另一种是随机模式。随机模式是一个色卡在不停地做三维旋转，让人觉得很炫。其次两种模式切换时，颜色信息会左右平移。再者，颜色和文字之间的切换使用了渐变——上一个逐渐消失，下一个逐渐显现，让整体页面变得细腻。虽然页面简单，但是随机模式下的三维旋转效果，以及两种模式切换的信息平移的动作，以及颜色切换的渐变，让网站看起来不单调。而且每次打开都是随机的颜色，也会让人不觉得乏味。

还想说一个动效做的很棒的网站：milwaukeepolicenews