iT邦幫忙

2021 iThome 鐵人賽

DAY 11
2
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 11

【設計+切版30天實作】|Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢?

設計大綱

在上一篇設計「Reviews」這個區塊時,有提到切版時可能會有「切不出來」的情況發生,所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是!我還是很想把原本想要的樣子設計出來(哈哈哈哈),所以今天這一篇就來講所謂的「進階」設計吧XDD!Let's go!

步驟

重新修改卡片

由於要變成一行去呈現,所以要「微重新」製作卡片

  1. 但因為要做滾動式的卡片,所以不用再去修改卡片欄寬,維持col-4就好

  2. 複製之前的第一個卡片
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489h6vtDK1Mdr.png

  3. 點選「Repeat Grid」,並拉出共6個卡片(在同一行)

https://ithelp.ithome.com.tw/upload/images/20210924/201394893vMU8vgMWs.png

  1. 為了在拖曳時有空間感,記得在最後要多拉一段space出來唷~)
    https://ithelp.ithome.com.tw/upload/images/20210924/201394899kgRfFsDfO.png
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489zMpNpoZkMT.png
  2. 修改其他卡片的圖片及文案,並確認卡片與卡片之間的間距是否為24px(因為可能會跑掉)

製造超出視窗的效果

  1. 點選卡片
  2. 點選右方工具列「Scroll Group」的「水平Scroll」(第一個)
    (Scroll Group有三種,分別是水平、垂直及360度)
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489yafZwWuc4S.png
  3. 點選後,它會自動跑出藍色框框,代表這是「顯示的最大範圍」,超出這範圍的會自動消失!
    https://ithelp.ithome.com.tw/upload/images/20210924/201394890TkqRi8wEq.png

調整間距

  1. 完成後,去Play一下,看看是否有成功
    (如果有成功,在預覽裡是可以「成功拖曳」的唷!)
  2. 最後再去調整上下的margin為96px,就完成了~
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489xN5FimJmEm.png

結論

這個Scroll Group功能其實蠻常用到的,除了拖曳「使用心得」以外,最常用是「地圖瀏覽」。在上面有略略提到Scroll有分三種,分別是水平、垂直及360度,所以我們可以根據想要呈現出來的感覺再去選擇。下次有機會再來講講怎麼做,還蠻好玩的!
那明天再來設計下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊
下一篇
【設計+切版30天實作】|Day12 - 怎麼讓使用者選中您想要他選的Plans設計?
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言