几个国内科技公司网站的产品展示页面

找了几个国内科技公司网站的产品展示页面设计，了解一下现在产品展示页面设计的趋势与特点。超大的产品图片，二级产品导航菜单，滚动页面时触发动画，这些都是现在产品展示页面经常用到的技巧。

产品

产品页面的关键，就是那几张产品图片，一般会使用 3D 软件制作的产品效果图，也会用到一些摄影作品，或者 3D 与产品摄影的结合。小米的产品页面上经常会看到实际的摄影作品，我猜是因为黎总比较擅长商业摄影。不过怎样，这些产品图片都相当讲究。我怀疑有个专门的机构做这种东西，一些商业摄影或广告可以做这样业务，收费也得相当不便宜。

这些产品图片构图都很简单，重点是在产品本身，体现产品的质感，背景一般都是实色的。有阵子流行背景是虚化以后的实际的场景，要小心，因为大部分显得并不好，因为那个虚化一看就是软件做出来的（高斯模糊之类的滤镜），并不是真正的镜头效果，所以感觉会不专业。用实色的背景，也可以只展示产品的局部，这样安全一些。

布局

页面的布局都比较相似，分区块，贯穿屏幕。导航下面一般是大副的产品图，向下滚动浏览，页面会分成不同的区块，不同的区块介绍产品的不同特性。相邻的区块背景颜色会不同，好处是在视觉上划分一下，这样你可以在这些区块上应用不同的布局。每个区块通常配合主题文字与图片，排版里大量留白，上字下图，左图右字，右图左字，这些都是经常在特性展示区块里常用的布局方式。

在产品页面上，除了主导航以后，还会有个关于产品的导航。通常都是在主导航的下面显示，可以看成是二级导航栏。产品导航原始状态可以是静态的，一般它会配合滚动的动作，当你向下滚动页面浏览产品页面的时候，产品导航会固定在屏幕的顶部显示。有些设计会根据用户的滚动方向，来显示或隐藏产品导航，可以使用 headroom.js 实现。

有些设计会添加页面导航，这些导航定位的当前页面的不同的部分，一般会在页面右侧显示这个导航，通常就是用一些圆点表示页面不同的部分。Smartisan 在这种导航上添加了提示，鼠标放上去，会显示提示的文字。不过我非常不喜欢全页滚动效果，就是你向下每滚动一次，会滚动一整页内容，滚动期间会有一个动画效果，显得有些拖沓，很憋屈。fullpage.js 提供这样的功能。

动画

产品页面的动画都很细腻，一般是在你向下滚动页面的时候，露出内容以后才会触发精心设计的动画，比如在关键元素上添加一个进场动画，引导用户视觉的方向。简单的可以是滑入，滑出，慢慢的向一个方向移动。有些比较复杂，比如分层显示产品的结构，这个要花些功夫。还有的就是直接用视频。scrollreveal.js 可以让你在进入屏幕显示的元素上添加动画效果。高级些的可以使用 scrollmagic 。

http://www.mi.com/mi4c/