先去做点设计 .. 打开项目 ... 在 design 这个目录的下面，有一个设计文档 .. 如果你用的是 macOS，并且安装了 sketch ，可以打开这个文档跟着练习一下 ...

如果没有 sketch 或者用的是 windows 系统，可以跳过这个视频，或者参考一下 .. 先了解一下我们后面要用代码的形式表示出来的这个界面的设计 ..

alt command + 3，先把边栏显示出来 ..

在这个设计文档里面有两个画板 .. 先去设计一下故事区在桌面尺寸的设备上的样式 ..

让这个 story 分组显示出来 .. 这里是我们之前做的一个线框图 .. 开始我们定的是，左边显示图片，右边是一些文字 ... 现在我想改一下 ...

先调整一下它的位置 ..

然后点击 Insert .. Image ... 插入一张图片 ... 这个图片我已经为你在项目里准备好了 .. 你可以在项目的 app .. images 目录的下面找到 ..

把它拖到 story 这个分组里面 ..

然后选中下面这个 container 图层 ... command + d 复制一份 .. 选中新复制的 container 还有上面插入进来的图片 .. command + G ，放在一个群组里 ..

打开这个群组 ... 选中这两个图层 ... ctrl + command + M ，应用一个蒙板 .. 这样图片会按照下面的这个 container 图层显示

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

再选中上面的这个 image 图层 .. 原本我想让它作为图像的蒙板 ... 改一下它的名字 ... text mask ，

颜色设置成 ededed ... 不透明度设置成 .85

把这个 text 图层删除掉 ..

在这个故事区的中间，可以再插入一条分隔线 ... 按一下 L ... 画一条垂直的线 ... 设置一下它的颜色 ... 选择白色 ..

粗线设置成 8 像素 ..

然后再调整一下这条线的位置 ..

在这个半透明的灰白色背景的前面，再去插入一些文字 .. 按一下 T ... 输入一个文字 ..

设置一下这个文字的样式 ... 让它变成大写的 ... 然后添加 3 个像素的字间距 ..

再插入一个文字 ... 揽胜历史 ... 它是故事区的大标题 .. 设置一下这个文字的样式 .. 大小是 36 ... 去掉字间距 ..

再调整一下文字的位置 ...

大标题的下面是一段描述 ... 按一下 T ，画一个文字框 . 然后插入一段文字 ..

设置一下文字的样式 ..

描述的下面可以再放个按钮 ... 在英雄区里面有个按钮，可以去复制一份 ...

粘贴过来 .. 放在描述的下面 ..

选中按钮的背景图层 ... 去掉填充 .. 添加个边框 .. 颜色选择黑色 ...

再选中按钮上的文字 ... 颜色把它设置成黑色 ...

然后调整一下图层的顺序 .. 还有名字 ..

这个图层是 sub header .. 下面这个是 header

然后是 description

这个群组里的东西是个 image

现在我们这个故事区的设计就做好了 .. 可以预览一下 ...