iT邦幫忙

2021 iThome 鐵人賽

DAY 7
2
Modern Web

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

【設計+切版30天實作】|Day7 - 設計出無外框式的三欄式pros區塊

設計大綱

上一個區塊賣完小廣告後,今天馬上就給它塞個平台的優點進來,這樣可以讓使用者有「感同身受」的感覺,同時也能讓他們覺得「哇!好像真的很棒唷!」。

「優點」的話一樣是用三欄式去呈現,從而呼應上面的三個痛點。不過,這一次的優點想要做「無框」的三欄式,所以等等會講到圖片與文字要如何對齊。

由於小廣告是滿版,所以Pros的設計就不做滿版了,但又不想要背景空空的那麼空虛,所以想了想決定用「微透明色的品牌名稱」作為背景圖,這樣就不會讓人覺得是滿版的感覺!

聽完上面講得所有東西很抽象對吧XD?沒關係!直接來做給大家看就清楚了!

步驟

設計三欄式後面的背景

  1. 在畫布上,直接輸入品牌名稱「GYMATE」
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489Ny7vAqSYFJ.png
  2. 調整文字大小為224px
    (因為文字純粹為了背景美觀用途,所以這裡的大小可以很浮跨,但還是有維持在8的倍數)
  3. 調整文字字重為HeadLineA(這只是我靠感覺去選擇適合的字型而已XDD)
  4. 調整文字顏色為Primary(#9B3C05)+ 透明度8%,讓它不會過於搶眼
  5. Margin就先不用調,維持置中就好
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489yOKc3M2ckP.png

設計三欄式的其中一欄

要做無框式三欄,但還是要對齊的喔!

  1. 先畫一個佔4欄的長方形,高度先不用管
    (這個長方形之後會隱藏掉,只是為了對齊用的)
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489cCyQejKxVO.png

  2. 在長方形裡面插入icon,貼齊上方的線,並調整大小為96px,以及垂直置中
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489N5azs4VtXW.png

  3. 輸入小標顯:文字大小為24px、字重為Bold、文字顏色為Primary(#9B3C05),並垂直置中
    https://ithelp.ithome.com.tw/upload/images/20210921/201394897FllLY6ONy.png

  4. 輸入內容:文字大小為16px、字重為regular、文字顏色為Dark(#707070),並垂直置中
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489LuGgX7iRow.png

  5. 把內容物都備好,確定都有垂直置中,把間距調整為16px
    (這時候懂長方形的用途是什麼了吧?就是要利用它來對齊XD)
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489dbaNNkSs9L.png

  6. 對齊完後,就可以把長方形給隱藏掉了
    (也可以刪掉,只是我會隱藏就好,怕之後還會需要用到~)
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489fYgjl8kqhb.png

  7. 把第這一整個卡片複製並貼上,再把剩下兩個「優點」的內容文案修改好,就完成了!

調整整體間距

  1. 選取所有卡片們,並調整與上方的Margin為96px
  2. 把卡片們先鎖起來,現在要回頭去調整背景的上下間距
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489ijI41BHAEX.png
  3. 這邊直接讓背景與整個卡片們都維持水平對齊即可
    https://ithelp.ithome.com.tw/upload/images/20210921/20139489VXBA1WZ2Rn.png

結論

其實卡片的外框除了可以協助設計以外,在切版時也有幫助,這樣可以讓大家更能理解無框式的三欄式是什麼概念,而且在切版時也比較知道要對齊哪裡喔!
明天再來寫下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day6 - 設計出背景上又有背景的吸睛小廣告
下一篇
【設計+切版30天實作】|Day8 - 看起來簡單但不單調的steps設計
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言