iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

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

Day 6 - 原型 (5): 帖子頁的元件組合

前言

利用剛設計好的帖子頁元件, 組合成帖子頁。

元件組合

  1. 建立一個屬於帖子頁的frame

先在Pages/Blog中, 按一下主頁的frame, 再按快捷鍵Ctrl + D來複製一個新的frame

https://ithelp.ithome.com.tw/upload/images/20210918/20140375eBiBGB0mqd.png

  1. 清除帖子頁中不用的元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375tlD4OfspxP.png

  1. 加上帖子頁元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375cu7KdxluvQ.png

  1. 增加一些帖子, 滿足一下空間感

https://ithelp.ithome.com.tw/upload/images/20210918/20140375nxkh2JCzXP.png

帖子內容應延伸至滿, 這個可以利用Resizing的Fill container
https://ithelp.ithome.com.tw/upload/images/20210918/20140375Hmh489IqEW.png

延伸的效果
https://ithelp.ithome.com.tw/upload/images/20210918/20140375JSh0entc66.png

  1. 修正一下回覆條和帖子的佈局跟樣式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375yR8kkQup4a.png

  1. 修正"回到主頁"按鈕的樣式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375Z4X4163Xog.png

  1. 大致上完成, 看看整體效果

https://ithelp.ithome.com.tw/upload/images/20210918/20140375m6tPRC48Vk.png

結語

明天利用Figma的預覽原型功能展示一下Blog。


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

尚未有邦友留言

立即登入留言