用户登录

在这个 Article 页面上,新建一个画板 ... 可以选择一个移动尺寸的设备 ... 打开 Main 这个页面... 复制一下它的 iPhone 画板里的 Navbar ... 再回到 Article ... 选中这个 iPhone 画板 ... 把 Navbar 粘贴过来 ..

然后设置一下它的背景颜色 ..

选中桌面画板上的 标题还有作者 ... 复制一下 ... 再把它们粘贴到这个手机画板上 ...

调整一下尺寸 ... 先选中这个标题 .. 重新设置一下它的大小 ..

再去复制一下这个段落文字 ...

调整一下段落的尺寸 ... 还有它的位置 ... 段落的左右两边留出点间隔 ...

选中这个画板 ... 再给它添加点高度 ...

然后复制一下文章里面的这个图片 ... 粘贴过来 ... 调整一下图片的尺寸 ... 这个图片我打算让它占满整个屏幕的宽度 ...

调整一下图片的位置 ... 让它跟段落文字留出点空间 .. 使用方向键 ... 可以微调图层的位置 ... 也可以配合使用 shift 键 ..

再去复制一个段落文字 ... 调整尺寸 ... 还有它的位置 ..

它下面又是两张图片 ... 复制一下 ... 调整一下图片的大小 ... 图片跟图片之间可以少留一点空间 ...

下面再添加一个段落 ... 用同样的方法再调整一下这个段落的显示 ..

这个就是我们的文章内容在移动设备上的样子 ...

我们也可以使用 Sketch 的 Mirror 功能 ... 用自己的手机去预览一下这个页面 ... 打开 Mirror ... 找到 Article 这个页面上的 iPhone 画板 ...

这里显示的就是刚刚我们为手机设备设计的文章内容页面 ...

文章页面:移动设备《 网站实例:设计 》

统计

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

社会化网络

关于

微信订阅号

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