iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

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

【設計+切版30天實作】|Day14 - 簡約CTA的用處及設計的注意事項

設計大綱

設計CTA的用意一方面是讓結尾不會來得太突然,另一方面是想在網頁的最後再來一個「Call To Action」。

由於上面已經有蠻多不同樣式的設計區塊了,所以CTA就簡單帶個標題、email的input就好!CTA一樣會是以滿版的方式去設計,背景顏色會使用Primary (#9B3C05),文案顏色則會使用Secondary (#FDFCFC)。

Grid System的分配方面,左方會是標題,右方會是Input。這邊還是要再提醒一下大家:「記得不管目前文案字數為多少,都要多留位置唷!」,因為你不會知道你*8主管或是G*客戶會不會突然說要多加字或是什麼的(xxxxxxxx)。所以,這邊的分配將會是「標題佔6欄,Input佔6欄」。

步驟

滿版背景

  1. 在畫布上畫出一個滿版寬的長方形,高度先不用管
  2. 顏色為Primary (#9B3C05)
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489zDKp1s0aGN.png

標題

  1. 文字框出6欄寬,並輸入標題文案
  2. 調整文字顏色為Secondary (#FDFCFC)
  3. 調整文字大小為24px
  4. 調整文字字重為Normal
    https://ithelp.ithome.com.tw/upload/images/20210927/201394894C4gQDVtaf.png

Input

  1. 畫出只有Border的長方形,寬度先調整成佔4欄寬(因為目前不知道Button會佔多少)
  2. 調整Border顏色為Secondary (#FDFCFC)
  3. 在input內輸入placeholder的文字
  4. 調整placeholder的樣式
    • 文字大小:16px
    • 文字字重:Regular
    • 文字顏色:Secondary (#FDFCFC)、60%透明度
      https://ithelp.ithome.com.tw/upload/images/20210927/20139489lW9EC3zsFz.png
  5. 調整placeholder的Margin-y為12px、Margin-left為24px
  6. 這時候Input的高度就出來了?

Button

  1. 因為為了統一,所以整個網頁的Button樣式都會一樣(顏色可以變,但Padding最好不要),所以這邊先把上面的Button複製貼上
  2. 調整Button的文字顏色為Primary (#9B3C05)
  3. 調整Button與左邊Input的間距為16px,這樣左邊的Input長度就出來了*這邊的input與button之間沒有完全對齊Grid System是允許的,因為它們的外面已經有對齊col-6了,因此裡面就不用了喔!
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489F0FdM27ANh.png

調整間距

  1. 把標題、input、button群組起來
  2. 上下間距 96px就可以了
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489XS8s5ZPlUw.png

結論

因為已經到了設計的倒數第二個區塊了,所以要用到的技巧都是之前有提到過的東西,但這邊還是會再三強調要注意如何對齊Grid System,以及空間分配唷!
那明天再來設計最後一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀
下一篇
【設計+切版30天實作】|Day15 - 來個完美的簡約風Footer結束這回合
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言