iT邦幫忙

2021 iThome 鐵人賽

DAY 10
2
Modern Web

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

【設計+切版30天實作】|Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊

  • 分享至 

  • xImage
  •  

設計大綱

原本想把Reviews做成一行六個、並且可以超出視窗,另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網,目前好像沒辦法切出超出視窗且可拖曳的卡片,所以就把原本想做的想法,改成「單純卡片式」的方式去呈現。

這次的Reviews卡片會包含「使用者頭像、使用者名稱、日期、回饋內容」。Grid system共12欄,因此這邊將會是「每個卡片佔4欄」,一行會有3個卡片。因為怕一行只有三個卡片會太少,所以這邊會設計「兩行的卡片」。

由於上一個區塊是以滿版去設計,所以這邊就不會用滿版去設計。另外,卡片會以主要色再加上漸層作為卡片的背景顏色唷!

步驟

畫出卡片及設定背景顏色

https://ithelp.ithome.com.tw/upload/images/20210924/20139489j15gDELGju.png

  1. 在畫布上畫出4欄寬的卡片,高度先不用設定
  2. 卡片背景顏色為Primary(#9B3C05)
  3. 另外再加上Linear Gradient 漸層顏色(#9B3C05 > #4E1E03)

使用者的Profile Picture

https://ithelp.ithome.com.tw/upload/images/20210924/20139489dK4fan7Qgb.png

  1. 在卡片裡畫出96x96的圓形
  2. 把icon圖片直接拖拉進去圓形裡面
  3. 與上方和左方維持24px的間距

使用者的Profile Picture、留言日期

https://ithelp.ithome.com.tw/upload/images/20210924/20139489xAvNH95Kcl.png

  1. 在Profile Picture下方輸入「使用者的名稱」及「留言日期」
  2. 文字的大小為p的大小(16px)
  3. 文字的字重為regular
  4. 文字的顏色為secondary(#FDFCFC)
  5. 「使用者名稱」與「Profile Picture」維持16px的間距

留言內容

https://ithelp.ithome.com.tw/upload/images/20210924/201394899IuwgHjvwY.png

  1. 在「使用者名稱與日期」的下方距離8px
  2. 輸入「留言內容」
  3. 文字的大小、字重、顏色都與「使用者名稱」相同
  4. 與卡片下方間距24px
  5. 此時卡片的高度就自然而然出來了

完成剩下的卡片

  1. 點選已完成的卡片,再選取右上角的「Repeat Grid」
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489PHQnvj2aMv.png
  2. 往右、往下拉出兩行的「一行三個卡片」
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489aju6X6sxso.png
  3. 把剩下卡片的「Profile Picture」和「文案」作修改即可
    https://ithelp.ithome.com.tw/upload/images/20210924/2013948981lk3unWRE.png

調整間距

  1. 再次確認卡片之間的間距是否為上下24px
  2. 調整整個區塊的上下間距為96px
  3. 完成!
    https://ithelp.ithome.com.tw/upload/images/20210924/20139489DhwIllIuED.png

結論

在設計前都可以先參考外面各種網頁的區塊,再想想Bootstrap有哪些元件可以提供切版,另外再來看要不要把原本的想法作修改,像這一次的Reviews區塊一樣。另外一樣是提醒到爛掉的「高度不用自己設定,用padding去推就好」 (不要嫌我煩哈哈哈哈哈)。
明天再來設計其他區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day9 - 把Bootstrap預設的Carousel新增變化
下一篇
【設計+切版30天實作】|Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢?
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言