先预览一下我做好的产品页面的设计 ... 打开项目 ... 在 design 目录的下面，有一个设计文档 ... 如果你用的是 macos ，并且安装了 sketch 这个应用，就可以打开这个设计文件 ...

或者你也可以打开这个 pdf 版本的设计文档 ...

因为没有新的设计技巧，所以设计这部分工作我们就不一起做了 ... 这个系列课程的前半部分我们已经使用了这个 sketch 设计工具一起做了一个页面 ... 你应该已经学会了足够的技巧 ... 现在完全可以自己设计一个这里你看到的这个产品页面 ...

对于我们要做的这个网站，产品主要就是汽车 .. 这个页面的导航跟之前是一样的 .. 导航的下面是一个英雄区 ... 这里可以用一张大的产品图片作为这块区域的背景 ...

左下角这里是当前这个产品的名字 .. 这块区域也可以使用一个视频作为它的背景 ... 视频可以无限循环播放 ... 感觉会比图片更有冲击力 ..

要注意的是，在 ios 设备上，视频不能自动播放，需要通过用户的交互才能播放视频 ..

英雄的下面是一个子导航 ... 这个导航可以是一个页内导航，就是导航上的菜单项目指向的当前页面的不同的区域 ..

菜单项上的激活状态要根据用户滚动到的页面的位置自动变化 ... 导航栏的左边是产品的名字 .. 这个导航栏会在页面滚动到它这个位置上的时候，固定在页面的项部 ..

这里需要用到点 JavaScript ... 我们会使用 Semantic UI 框架里提供的一些功能，所以实现这个功能写不了几行代码 ..

然后是页面的主体区域 .. 可以根据产品的特性分割成几块区域 .. 这里展示的是产品的外观 ...

这个产品页介绍的是汽车，所以汽车的内饰也非常重要 ...

这两块内容都可以使用旋转木马组件 ..

然后是产品的一些特性 ... 这里我用了几个文字块 .. 你也可以加入图片或者视频 ..

一个产品可能会有不同的型号 ... 下面这块区域里面放的就是不同型号的产品的一些参数 ...

主体的最后一块内容是一些行动，这里我为用户提供了两个选择，可以找经销商，可以申请试驾这款车 ...