iT邦幫忙

2021 iThome 鐵人賽

DAY 9
2
Modern Web

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

【設計+切版30天實作】|Day9 - 把Bootstrap預設的Carousel新增變化

設計大綱

一個平台要成功,當然少不了圖片/照片的介紹(很愛看圖的懶人XD),所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。
Bootstrap 5 本身是有carousel這個元件可以提供切版使用的,所以這邊就會參考它的設計唷!
(下方附上Bootstrap 5 的carousel)

https://ithelp.ithome.com.tw/upload/images/20210922/20139489wZVa7TPKpn.png

但由於它的設計不一定符合每個人的口味(對,就是不太符合我的口味-v-),所以這邊會幫它做點小變化。這次會讓carousel不是滿版,但因為怕太單調,所以在背後加一條長方形作為小裝飾!

步驟

背景條

https://ithelp.ithome.com.tw/upload/images/20210922/20139489pVdWNblAio.png

  1. 在畫布上畫出一條「滿版寬」的長方形,高度先隨便拉個480px(之後再微調)
  2. 顏色調整為Primary(#9B3C05)+透明度16%

carousel的圖片

https://ithelp.ithome.com.tw/upload/images/20210922/20139489ey9pUx7zZm.png

  1. 把carousel所需的圖片,直接拉進來
  2. 大小拉到與container同寬
  3. 高度這邊就不特別去改了,因為目前的圖片都是一樣 14:9 的比例,到時候切版直接下w-100就可以了
  4. 與底下的背景條是維持垂直置中
  5. 再與上方區塊維持96px

再度微調背景條高度

https://ithelp.ithome.com.tw/upload/images/20210922/20139489DTYTbigkLM.png

  1. 背景條與上方的間距是170px,但因為非8的倍數,所以把背景條的高度調整為468px
  2. 這時候背景條與上方區塊間距為176px、與carousel圖片的間距為80px
  3. 以上為完美的數字 ~v~

carousel的字幕

  1. 在照片正中央輸入字幕標題文案
  2. 調整文字大小為56px (display-4的大小)、font-weight為Bold、顏色為secondary-color(#FDFCFC)
    https://ithelp.ithome.com.tw/upload/images/20210922/20139489IGorwHZoRk.png
  3. 在標題下一行輸入小標題文案
  4. 調整文字大小為32px (h2的大小)、font-weight為normal、顏色為secondary-color(#FDFCFC)
    https://ithelp.ithome.com.tw/upload/images/20210922/20139489o51xBxfhfo.png
  5. 因為不想跟Bootstrap一樣在圖片的下方,所以這邊會把標題和小標群組起來,再來放在水平及垂直的置中位置

carousel的btn

  1. 這邊因為不會跟Bootstrap一樣有左右的按鈕,所以就不會畫出來喔
  2. 另外,原本Bootstrap下方的三條按鈕,這邊會改成以「三個圓點」來呈現
  3. 在下方畫出一個圓形,並調整大小為16px、顏色為white(#FFFFFF)
    https://ithelp.ithome.com.tw/upload/images/20210922/20139489qB7hTZVRPe.png
  4. 再另外複製兩個出來
  5. 把排第一的圓點顏色調整為text(#707070)
    https://ithelp.ithome.com.tw/upload/images/20210922/20139489Qzyzv3PPV2.png
  6. 調整彼此間距為24px,margin-bottom為40px,這樣就完成了!
    https://ithelp.ithome.com.tw/upload/images/20210922/20139489SJgeOrBmtI.png

結論

這個區塊是不是其實不難~~~ 把原本預設的carousel改成自己想要的樣子,再把數值改成完美的8倍數,就可以完成了!雖然目前看起來改設計好像蠻簡單,但這邊還是要提醒一下大家,在切版時,畢竟有改到預設值的元件,所以到時候切版就會比較複雜了(詳情見後面切版實作)。不過,我覺得是值得的哈哈哈哈,因為這樣才會有獨一無二的設計?!!!
那明天再來設計下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day8 - 看起來簡單但不單調的steps設計
下一篇
【設計+切版30天實作】|Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言