iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

從零開始的寫web app 30天生活系列 第 4

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

預覽

大致上完成, 可以按這裡預覽一下整體外觀。

結語

明天再設計帖子頁


上一篇
Day 3 - 原型 (2) : 主頁元件
下一篇
Day 5 - 原型 (4): 帖子頁元件
系列文
從零開始的寫web app 30天生活10

尚未有邦友留言

立即登入留言