Day 4 - 原型 (3): 主页的元件组合

前言

今天就把刚完成的元件组合成一个页面吧。

框架 (Frame)

我先以桌面显示器为目标, 建立一个桌面的框架作为页面的外壳, 其解析度为1440x1024。

https://ithelp.ithome.com.tw/upload/images/20210912/20140375FiDUoxSaxu.png

之後, 再选择左边的"Asset" tab, 就可以看到先前建立的元件, 把它们都拉放到桌面的框架就可以开始组合了。

https://ithelp.ithome.com.tw/upload/images/20210912/201403756zG5hrWoQq.png

主页组合

  1. 先是布局

拉满整个框架

https://ithelp.ithome.com.tw/upload/images/20210912/20140375wuUUropTsZ.png

  1. 加上navigation bar的元件

https://ithelp.ithome.com.tw/upload/images/20210912/201403753cPIm5lACG.png

  1. 再来就是主页的元件

https://ithelp.ithome.com.tw/upload/images/20210912/201403751GNAENUBKX.png

  1. 调低一下这个贴子的高度, 并加入更多贴子

https://ithelp.ithome.com.tw/upload/images/20210912/20140375Xnk5dCMTmR.png

  1. 贴子与贴子之间太逼, 利用Auto layout为它们加上一些margin

https://i.imgur.com/FgG3DZU.gif

  1. 把贴子溢出的部分隐藏一下

这里可以勾取"clip content"

https://ithelp.ithome.com.tw/upload/images/20210912/20140375Fd19N8M4FN.png

  1. 隐藏橙色的column grid提示, 完整地看看外观

这里可以按右上角的zoom控制, 取消Layout grids

https://ithelp.ithome.com.tw/upload/images/20210912/20140375EaM0DCabzd.png

  1. 最後就是加上修饰, 背景图, 阴影效果等等

https://ithelp.ithome.com.tw/upload/images/20210912/20140375fJSwTvwvAl.png

预览

大致上完成, 可以按这里预览一下整体外观。

结语

明天再设计帖子页


<<:  Vue.js 从零开始:MVVM、渐进式框架

>>:  {DAY4} 资料库简介

铁人赛开场就决定是你了,Ruby 30 天刷题修行篇第一话

大家好,我叫 A Fei,目前是学习 Ruby 和 JavaScript 约三个月的新手。 在学习过...

Delegate的使用法 Day8

完蛋了今天,今天比昨天打完更严重,睡到晚上3点,被身体热醒,起床量个温度37.3好像又不是很高,但热...

【Side Project】 寻找日常生活中的问题

正当愁这次Side Project题目要找甚麽来做时,刚好运气不错碰到了一个随机事件。 让我决定了这...

[ Day 05 ] JSX 语法

我们昨天 Day 04 的时候在 App.js 档案中有看到以下的程序码: 不过,为什麽能够在一个...

2 游戏规则

所以到底是要做怎样 昨天列出了一些还在考虑的点,做了一些粗暴的决定: Q: 要让这个游戏可以用桌游的...