1.调整栅格

打开 Layout Setting 勾选 Rows，垂直方向的栅格就出现了，注意检查参数是否与下图一致。

2.建立标题文字

我们先从文字的颜色说起，参照的是 Material Design 背景和颜色选择规范。

对于浅色背景下的深色文字，应该采用以下透明度级别：

§  重要文字的不透明度为 87％。

§  次要文字（在视觉层次结构中较低）的不透明度为 54％。

§  提示文字（如文字字段和标签中的提示文字）和禁用文字的视觉突出性较低，不透明度为38％。

对于我们这次临摹的 Airbnb，Primary color（主色）是品牌的颜色，也就是 logo 的颜色 #FF7977。Accent color（强调色）为 #00a699。Accent color 的目的是为了突入，所以通常选择品牌色的对比色。

现在要进入 Symbols 页，把 Lists/Navigation Bar 中的导航文字的 Opacity 调整成次要文字的不透明度 54%，以符合文字层级规范。调整后返回 Page1。

标题文字参照的是 Material Design 中文字体排版规范，选用的是 Display 2 这个级别。

因为这个级别并不常用，所以偷了个懒没有加入到 Type Style 里。这里我们按 T 在页面中输入相应文案。这里注意一个细节，文本框的上沿和左右两边都应在栅格之上，只有这样，我们的设计才是有规可循的。前面粉色的文字色值选择 #FF5A5F/不透明度 100%，Weight 为 Medium；后面黑色的文字色值选择 #000000/不透明度 87%，Weight 为 Thin。

3. 建立搜索组件

按 R 画三个矩形，尺寸和位置注意调整到栅格上。由于前两栏的字段比第三栏的字段要长，所以我按照 Airbnb 的布局这里也没有三等分，而是前两栏略长一些，第三栏略短，分别是 368、368、352。它们的宽度综合与 Layout Setting 中 Total Width 一致，都是 1088。高度设置为 78（16+14+16+16+16），五项数值分别代表的含义是：

§ 16（第一行文字与组件上沿距离）

§ 14（第一行文字选择 Type Style 中 的 Body/L/S/L）

§ 16（第一行文字与第二行文字间距离）

§ 16（第二行文字选择 Type Style 中 的 Subheading/L/S/L）

§ 16（第一行文字与组件下沿距离）

第一步我们创造了搜索框的布局，颜色描边这些我都没有调整，图标我也只是用 24x24 的矩形暂时占住位置。图标的占位矩形与组件下沿的距离是 12，这样能保证这个图标与第二行文字水平居中。

选中第一行文字，将它们的 Opacity 调整成主要文字的不透明度 87%；选中第二行文字中的“目的地城市”、“入住日期”、“退房日期”，将它们的 Opacity 调整成提示文字的不透明度 38%；选中第二行文字中的“1位访客”，将它的 Opacity 调整成次要文字的不透明度 54%。

Tips：如果“地点”下面第二行的文案是“北京”，那么第二行就不是提示文字，而是次要文字，不透明度 54%。

选中左边第一个矩形，关闭它的 Fills 和 Borders，当然细思恐极的同学可以点击旁边的垃圾桶符号彻底删了。然后点击 Inter Shadows 右边的加号，按下图参数设置，注意不透明度 12%。不透明度的选择，参照的是 Material Design 背景和颜色选择规范。

想学习UI设计相关的课程记得关注我们武汉北大青鸟官网。