iT邦幫忙

2021 iThome 鐵人賽
DAY 4
0
Modern Web

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

Day 4 - 原型 (3): 主頁的元件組合

13th鐵人賽 figama prototype ui
819 瀏覽

  • 分享至 

  • xImage
    •  

前言

今天就把剛完成的元件組合成一個頁面吧。

框架 (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 篇
  1. 6
    Day 6 - 原型 (5): 帖子頁的元件組合
  2. 7
    Day 7 - 原型 (6): 預覽主頁
  3. 8
    Day 8 - 原型 (7): 完成
  4. 9
    Day 9 - HTML
  5. 10
    Day 10 - JavaScript(1) : 變數與資料類型
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙