用户登录

导航的下面是一个 Hero Section .. 英雄区 .. 就是页面上最引人注意的那块儿地方 .. 在这里你可以告诉用户你是谁 .. 提供了什么样的产品,发出了什么样的重要事件 ..

这块内容我会用幻灯片的形式表示出来 .. 就是会用一组幻灯片,可以循环的展示一些内容 .. 用户也可以控制幻灯片的显示 ..

先去做一下桌面设备的这个英雄区的设计 ..

幻灯片上面会显示一个大的图像背景 .. 在项目的下面你可以找到要需要图像文件 .. 在 app .. images 目录的下面 .. 有一张图片 ..

把它放到我们的设计里 .. 放在 design 下面的 slideshow 这里 .. 然后选中下面这个 container 图像 .. 我们可以把这个 container 作为这个图像的一个蒙板 ..

先把它们放在一个群组里 .. 选中图层 .. ctrl + command + M ,应用蒙板 ..

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

每张幻灯片除了一个图像以后,还会有一些文字 .. 按一下 t ,插入一个文字 .. Discovery

设置一下字体 ... 颜色是黑色 .. 让它变成大写的 ...

字号选择 18 .. 再添加点字间距

它是一个小标题 .. 再添加一个大标题 .. 全新一代发现

设计一下字体 ... 颜色也是黑色 .. 大小可以是 48 ...

下面还有一小段描述的文字 .. 全尺寸七座 SUV,现已接受预订。

再设置一下这段文字的样式 ...

下面是一个按钮 .. 按一下 r .. 画个矩形 ..

尺寸是 153 .. 49

没有边框 .. 颜色是黑色

上面再添加一个文字 ... 了解更多 ... 文字的颜色是白色 ... 大小是 18 ..

调整一下这些图层的位置 ..

再修改一下它们的图标的名字 .. 这个是 sub header ... 这个文字是 header ... 然后是 description ... 表示描述 ... 下面这两个图层放在一个群组里 .. 名字是 btn 表示按钮 ..

在幻灯片的底部还有两个控制按钮 ..

先画一个圆形 .. 设置一下它的尺寸 ... 宽度还有高度都设置成 32

颜色是纯白色 ... 不透明度可以设置成 40

上面还有一个小箭头 ..

在项目下面,可以找到这个小图标 ...

调整一下尺寸 ... 设置成 32

不透明度设置成 40%

选中它们,放在一个群组里 ... 名字可以是 left btn .. 然后再复制一份 ... 放在幻灯片的右边儿 ..

替换一下里面的小图标 .. 再修改一下图层的名字 ...

现在你看到的就是在桌面尺寸的设备上, 我们的 Hero 区域的样式 ...

英雄区 / 幻灯片:设计《 网页设计案例:英雄区 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点