这个故事区的下面还可以继续是一个故事区，在这里可以提供一些用户可以参与的活动，比如报名参加路虎体验中心提供的试驾。一起自驾到一些美丽的地方等等 ...

这部分内容我们也可以管它叫故事区 .. 先把项目切换到一个特定的标签，这样你在项目里会看到我在后面会用到的一些资源 ..

在项目目录的下面 .. 执行一下 git checkout v9.3.1-start

先打开我们的设计文档 ...

在这个桌面画板上， 把 desgin 下面的 action 展示出来 ... 先调整一下它的位置 ..

最开始我们定的这部分内容的展示是，上面是一些文字 ... 下面有一些图片 ...

这里我们可以用一个旋转木马组件来表示 ... 滚动下面的图片，上面的文字也会随着变化 ...

先插入一个标题 .. 按一下 T ... 输入一个标题 ...

设置一下它的样式 ... 字号可以是 36 ... 让它在这个区域上居中显示 ...

它的下面是一段描述的文字 ... 按一下 T ... 画一个文字框 ... 插入一段文字 ...

设置一下它的字体 ... 大小可以是 20 像素 ... 颜色可以再设置一下 ... 黑色 ... 不透明度设置成 50 .

描述的下面是一组图片 ... 插入图片 ... 我在项目里已经给你准备好了需要的图片 ... 在 app ... images 目录的下面你可以找到这些图片资源 ..

调整一下图片的尺寸 ... 还有它的位置 ...

然后再去插入两张图片 ...

导航按钮

这组图片可以用旋转木马组件去展示 ... 所以左右两边儿可以添加一个控制按钮 ... 这个控制按钮在我们的 hero 区域里已经设计好了 ... 找到它们 ...

我们可以把这两个按钮都转换成符号 .. 这样你可以重复去使用它们 ... 选中其中的一个 ... create symbol ... 再选中另一个 ... create symbol

这样在 Symbols 页面，你可以找到这两个按钮 ... 在这里你可以修改这两个按钮 ... 这些修改会影响到所有使用它们的地方 ..

再把这两个 按钮符号 复制一份 .. 放到我们这个 action 的里面 ...

再调整一下它们的位置 ...

导航点

这组图片的下面可以再显示一组导航点 ... 在 Mobile 这个画板上的 hero 这个群组里有一组这样的导航点 ..

现在它们是方形的 ... 可以先把它转换成圆形的 ... 选中其中的一个给它应用一个圆角效果 ... 再用同样的方法处理一下另外的两个导航点 ..

然后选中其中的一个，设置一下它的激活状态 ... 这种点的颜色要比正常的深一点 ..

然后把它们也转换成一个 Symbol ...

复制一份 ...

把它粘贴到桌面画板上的 actio 这个群组里 ... 放在这组图片的下面 ...

然后再预览一下 ...