用户登录

每个文章都会有一些相关的信息,比如分类,发布的日期这些东西 ... 我打算把这些东西放在文章的左边儿 ... 这块还剩下 3 个网格的宽度 ..

按一下 L .. 画一条垂直的分隔线 .. 分隔线的颜色可以手工的输入一个 ... dbdbdb ..

把它放在桌面画板上 ... 再调整一下它的位置 ..

然后按一下 T ,插入一个文字 .. 这个文字表示文章的分类 .. 选择一个样式 .. Text Secondary ..

可以把这个文字改的小一点 .. 大小换成 16 ... 再更新一下这个样式 . 然后重新再调整一下它的位置 ..

按住 option .. 拖动它,复制一份 .. 再输入文字 ... 这个是文章的发布日期 ...

然后再复制一份 ... 这个文字是文章的更新日期 ..

下面我要去搜索两个小图标 .. 要使用国外的搜索服务,所以需要做点特别的准备 ..

打开浏览器 .. 搜索 Material design icon ...

搜索一下 comment 这个小图标 .. 下载 svg 格式的小图标 ..

再搜索一下 share ... 分享 ... 下载它的 svg ...

在系统上找到下载下来的这两个小图标 ... 打开 Assets 页面 ... 直接把它们拖到设计里 ...

调整一下位置 ..

选中一个小图标 .. 改一下名字 .. 再把它转换成一个符号 ... 同样再处理一下另外一个小图标 ...

选中它们 .. 复制一下 ... 回到 Article ... 粘贴过来 ..

选中这个评论 ... 调整一下位置 ... 在它下面再插入一个文字 ... 输入一个数字 ... 它表示的是文章的评论的数量 .

它的下面是这个 分享 小图标 ...

再选中这两个小图标 ... 改一下不透明度 ..

隐藏布局 ... 这就是我们的文章页面的信息栏的设计 ...

文章信息《 网站实例:设计 》

统计

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

社会化网络

关于

微信订阅号

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