选中 Navbar Content Searching ... shift + command + H ,暂时先把它隐藏起来 .. 点一下 Navbar 上的 menu 图标,我希望可以在页面的左边出现一个导航栏。
control + L 显示布局 ... 按一下 R,在面板上画一个矩形,让它占用三个网格的宽度 ... 高度可以跟页面的高度一样 ...
去掉边框 ... 填充的颜色选择 白色 ..
把它放在页面的最左边儿 .. 把它移到 Navbar 群组的外面 ... 图层的名字设置成 Container ..
在 Assets 里面,复制一下 close 这个小图标 .. 粘贴过来 .. 把它放在顶部左边这个位置上 ..
选中这两个图层 .. command + G .. 群组的名字是 Sidebar ... 再选中这个 close 图标 .. Resizing 设置成 pin to corner ..
放大一下画布的显示比例 .. 再画一个矩形 .. 让它跟 Sidebar 的 Container 一样宽 .. 去掉边框 .. 高度设置成 56 ..
调整一下它的位置 .. 再把它放到 Sidebar 这人群组的里面 .. 名字设置成 Container ..
按一下 T ,插入一个文字 ... Size 选择 20 .. Weight 是 light .. 颜色是黑色 ... 不透明度设置成 70 .. 调整一下它的位置 .. 文字的右边留出大概有 16 像素的边距 ..
选中文字,按住 option ,鼠标悬停到其它元素上,可以显示这个标尺 ..
这个文字图层的名字设置成 Sidebar / Item / Text ..
选中下面的这个 Container ,把它放到一个群组里 .. 名字是 Sidebar / Item:normal ... 同时再选中上面的文字图层,把它们放到一个群组里 ... 名字是 Sidebar / Item ..
然后选中这个群组里的文字 ... Resizing 设置成 Pin to corner
再选中 item:normal 里的 Container ,去掉它的填充 .. 现在这是边栏上的导航项目的正常的样式 ..
选中这个 normal ,command + D 复制一份 .. 名字设置成 Sidebar Item:hover .. 表示鼠标悬停在这个项目上的状态 ..
设置一下 Container 的样式 .. 选择一个填充颜色 ... fbfbfb,把这个颜色添加到文档颜色里,以后我们可能还会用到它 .
再给它添加一个 Inner Shadows .. 内部的阴影 .. x 是 0,y 是 -1 .. Blur 是 0 ..
阴影的颜色是黑色,不透明度设置成 6 ..
选中这个群组,再复制一份,再去设计一下项目的激活状态 .. 名字是 Item:active .. 选中里面的 Container .. 去掉内阴影 .. 填充颜色 设置成f8f8f8 ..
这个就是边栏导航项目的激活状态 .. 这个边栏上的导航项目有三种状态,正常 .. 悬停 .. 还有 激活 ...
最后,我们可以再去预览一下这个边栏的设计 ...