学会UI设计-页码控制器

1本课【学会UI设计-页码控制器】主要内容，具体如图所示。

2.打开sketch49.1，新建文档命名，按住【a】新建一个iPhone8画板，选择【插入】，【ios用户界面设计】，【bars】，【status】，【白色】并选择【居中对齐】【顶部对齐】，按住【r】新建矩形图形，创建状态栏导航栏高度底色，高度【64】。

3.修改颜色，选择【紫色调】，按住【r】创建和导航栏高度一致的矩形在旁边打上文字，大小【17】，和创建的矩形进行【居中对齐】，按住【command+b】复制文字并修改，大小【14】【不透明度】60%。

4.删除导航栏矩形，选择文字按住【alt】，并选择另一目标图层，显示两者距离，将距离调整为【40】，选择文字按住【command+d】编组并命名，【居中对齐】，在导航栏右侧新建【圆角矩形】并复制，修改颜色位置大小并编组命名，与文字【居中对齐】，并修改距离【15】【30】。

5.增加矩形高度【108】，选择【插入】，【ios用户界面设计】，【bars】，【搜索】，【search bar】，直接调用控件，将搜索栏【从组件分离】，按住【command】选择搜索图层，【填充】颜色白色，调高【不透明度】100%，修改搜索栏字体，选择【浅灰色】，选择图标，【从组件分离】选择图标图层，选择【浅灰色】，另一图标办法相同，具体如图所示。

6.将组与44像素对齐，将搜索栏距离调整为【15】，图标与搜索栏距离【10】，增加矩形高度将搜索栏与底部距离调整为【15】，具体如图所示。

7.按住【r】用矩形规定banner区域，添加素材，选中下方矩形点击【蒙版】，在图片上面添加文字，按住【command+b】复制文字并修改文字，文字字体与大小，之后复制文字，文字【填充】为0，打开【描边】，移动文字位置错位，做出立体效果，将图层编组降低【不透明度】50%，将文字与矩形编组，将文字进行【居中对齐】之后往上调整【10】像素，按住【o】绘制圆进行画面点缀，并适当降低圆的【不透明度】，banner完成，具体如图所示。