iT邦幫忙

2021 iThome 鐵人賽

DAY 12
2
Modern Web

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

【設計+切版30天實作】|Day12 - 怎麼讓使用者選中您想要他選的Plans設計?

設計大綱

今天要來設計「方案」,外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話,那通常會有一個是「免費試用」方案讓使用者試用,從而引導使用者註冊會員。因此今天這個「方案的區塊」會以3個方案為主,分別是「免費試用」、「斜桿方案」以及「專業方案」。

如同上面幾個區塊所講的,因為Grid systems有12欄,所以每個方案會佔4欄。而方案裡面的內容會包括「標題」、「價格」、「內容」以及「按鈕」。

最後,基於本平台首要的目的是讓使用者免費試用,因此「免費試用」的方案會用主要色作為背景顏色;另外兩個方案則以透明度較淺的主要色作為背景顏色,以突出「免費試用」的方案。

步驟

標題

https://ithelp.ithome.com.tw/upload/images/20210926/20139489VXGRL6zpNv.png

  1. 在畫布中間輸入標題文案
  2. 標題的大小為32px
  3. 標題的字重為Bold
  4. 標題的顏色為Primary(#9B3C05)
  5. 把標題置中對齊

免費試用方案

  1. 在下方畫出一個4欄寬的長方形,高度先隨便拉
  2. 背景顏色為Primary(#9B3C05),並加入陰影(#792C00,X4,Y4,B8)
    https://ithelp.ithome.com.tw/upload/images/20210926/20139489HIBL0JKTU7.png
  3. 在長方形裡面,輸入「免費試用」方案標題,並設定樣式
    • 輸入**「免費試用」**,並設定樣式
      a. 文字大小:24px
      b. 字重:Bold
      c. 文字顏色:Primary-light(#EFEAE5)
      d. 與上方距離 48px
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489gHlHY99Gyh.png

    • 下一行輸入「$0」,並設定樣式
      a. 文字大小:48px
      b. 字重:Bold
      c. 文字顏色:Primary-light(#EFEAE5)
      d. 與上方距離 8px
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489m1NRUQDfCa.png

    • 下一行輸入「/月」,並設定樣式
      a. 文字大小:16px
      b. 字重:Regular
      c. 文字顏色:Primary-light(#EFEAE5)
      d. 與左方距離 16px
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489qAR3kIwlRo.png

  4. 把整個標題group起來,並置中對齊
  5. 輸入「免費試用」的「方案內容」,並設定樣式
    • 載入icon,並調整樣式
      a. 大小:24px x 24px
      b. 顏色為Primary-light(#EFEAE5)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489orkp3rTAdO.png
    • 輸入文案內容,並調整樣式
      a. 文字大小:16px
      b. 字重:Regular
      c. 文字顏色:Primary-light(#EFEAE5)
      d. Margin-top為 32px
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489XaUMisnGj9.png
      e. 用Repeat Grid拉出其它內容
      f. 下方每個文案內容都相距 12px
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489neJgPpwIYL.png
      g. 與方案背景框左右margin保持 40px,並置中
  6. 畫出button,並調整樣式
    • button 寬度與上方方案內容同寬
    • button底色為 Secondary (#FDFCFC)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489M0Db1ghQua.png
    • button 文字樣式為 16px、Normal、Primary(#9B3C05)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489hZfcdqxHuD.png
    • 確認按鈕與上方間距32px、與下方間距 96px
  7. 檢查所有內容物是否置中,並且「方案背景框」是否有留48px、40px、96px、40px的Padding

斜桿方案

  1. 把「免費方案」複製貼上
  2. 修改背景框底色
    • 把背景框底色的透明度調整為8%
    • 刪掉陰影
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489009KC59nwh.png
  3. 修改文案,並修改文字顏色
    • 標題文字顏色統一改為Primary(#9B3C05)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489xfhuOhiJoS.png
    • 方案內容和icon顏色改為Dark(#707070)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489xJpmKsZyC7.png
  4. 修改button文案和顏色
    • 修改Button的文案、顏色為Primary(9B3C05)
    • 修改button的顏色為透明、Border為Primary(9B3C05)
      https://ithelp.ithome.com.tw/upload/images/20210926/20139489lAxXeF2zVO.png
  5. 檢查所有內容物是否置中,並且「方案背景框」是否有留48px、40px、96px、40px的Padding

專業方案

  1. 把斜桿方案直接Copy and Paste
  2. 修改方案名稱
  3. 再多新增一項方案內容
  4. 一樣檢查所有內容物是否置中,並且最終方案背景框是否有留48px、40px、96px、40px的Padding
    https://ithelp.ithome.com.tw/upload/images/20210926/20139489vMYR24gBsM.png

調整間距

  1. 所有方案與上方大標題的間距為 40px
  2. 這樣就完成啦!?
    https://ithelp.ithome.com.tw/upload/images/20210926/20139489DEBeevOmVG.png

結論

設計方案時要先想好「平台的目的為何?」、「有要突出哪一個方案嗎?」,然後,那一個方案就要設計得與其他方案不太一樣,例如顏色的不同、加入陰影等等,以突出它。

這一個區塊的設計一樣可以先參考其他網站,再來想想看Bootstrap有沒有哪裡可以「幫忙」的?,總之腦袋就是要保持著一個一邊設計一邊想的模式囉!
那明天再來設計下一個區域吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢?
下一篇
【設計+切版30天實作】|Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言