iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
Modern Web

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

【設計+切版30天實作】|Day5 - 做出3欄式「痛點」設計

設計大綱

早安!今天來設計痛點,這邊我想要做三欄式,列出三個他們目前主要可能會遇到的問題,再加上圖片,讓使用者有感到身受的感覺。另外,因為Grid system共有12欄,所以三欄式的分配下剛剛好每個卡片佔4欄。標題的部分,就以水平置中就好,另外再幫它加個highlight作為裝飾。

步驟

標題

https://ithelp.ithome.com.tw/upload/images/20210917/20139489GzAEiBpbza.png

  1. 與上一個區塊(Header)的margin距離96px
  2. 在置中的位置輸入標題
  3. 文字大小為40px(Bootstrap 5的h1大小)
  4. 文字字重為Bold
  5. 文字顏色為Primary(#9B3C05)

標題的Highlight

https://ithelp.ithome.com.tw/upload/images/20210917/201394897lqG0IrvV3.png

  1. 在標題下方加個highlight裝飾
  2. 畫一個長方形
  3. 長度和高度跟標題一樣就好(好隨性哈哈哈哈哈)
  4. 長方形的顏色用Primary(9B3C05)+16%的透明度

圖片與內容

由於卡片是三欄式,所以我們從最左開始畫!
https://ithelp.ithome.com.tw/upload/images/20210917/20139489JxUeINlql1.png

  1. 把第一張痛點的圖片拉進來,並縮放成四欄寬,高度以4:3的比例去調整
  2. 在圖片下方距離24px,再輸入文案內容
  3. 內容字體大小為16px(Bootstrap 5 p的大小)
  4. 內容字重為Normal
  5. 內容字體顏色為先前選好的Text(#707070)

完成剩下的兩個卡片

https://ithelp.ithome.com.tw/upload/images/20210917/20139489zxLRmiH2IU.png

  1. 把第一個完成的卡片複製貼上
  2. 再把圖片和文案修改一下就完成了

結論

今天這個區塊其實真的不難實作,畢竟就是每個卡片都在4個裡欄畫出來而已,主要是注意Margin、Padding、Font-size、Font-weight、Text-color。另外要注意的是, 區塊的數量欄數 是息息相關的,所以在規劃時可以先想好。再來是 字數、字行,通常會建議文案剛剛好 3行 就好,不然字數太多,會讓使用者覺得太冗長不想看,因此想文案也是另類有挑戰的事情唷!
那明天再來實作下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day 4 - 參考Bootstrap畫出理想的header(下集)
下一篇
【設計+切版30天實作】|Day6 - 設計出背景上又有背景的吸睛小廣告
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言