iT邦幫忙

2021 iThome 鐵人賽

DAY 8
2
Modern Web

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

【設計+切版30天實作】|Day8 - 看起來簡單但不單調的steps設計

設計大綱

稱讚完平台的優點後,接下來的區塊就要向使用者介紹使用的流程,但因為現代人都很懶得看很冗長的「說明書」,所以使用流程會採用簡約的方式去做介紹。

因為上面的區塊都是屬於橫向的發展,所以這邊也會想用從左到右的方式去設計。另外在步驟方面也會簡化至3個步驟就好,以免太多會讓使用者覺得「哇,怎麼那麼難啊!不想用了!」這種情況發生。

但是只有步驟的話,會讓使用者覺得很突然就開始,所以在最前面還是會加個小小的slogan作為開場。由此可見到時候總共會有4個小區塊,所以各區塊就會佔3欄唷!

由於上一個區塊不是用滿版,所以這邊就會用滿版的方式去設計。但不想要太花俏,所以一樣只用背景顏色上去設計就好,如果不想太單調,這邊可以試著用漸層去呈現喔!

步驟

滿版背景

https://ithelp.ithome.com.tw/upload/images/20210923/20139489RhWZ0MABJL.png

  1. 在畫布上畫出一個滿版的長方形,高度先隨便就好,之後再去調整
  2. 顏色設為Primary(#9B3C05),並加上漸層

小小slogan

  1. 在長方形背景的左側輸入slogan的文案
  2. 調整顏色為secondary (#FDFCFC)
    https://ithelp.ithome.com.tw/upload/images/20210923/201394899Ew2XqxZ0Q.png
  3. 由於文案超出3欄,所以這邊會把它變成兩行,這樣看起來也比較不會太少字的感覺!
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489tpwaMfnFQq.png
  4. 在下方把上面的button複製貼上,再改成只有外框顏色的btn(比較有簡約感),顏色為Secondary(#FDFCFC)
  5. 把btn文字改成「免費試用」,顏色為Secondary(#FDFCFC)
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489g4I8zfncML.png
  6. 把button也統一靠左對齊
    *加button是想讓使用者看完使用步驟後,方便他們直接按下去註冊。
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489lS5HiVmNcI.png

Step 1

想要「Step 1」看起來大一點,讓使用者看得到,但又不要搶風頭!

  1. 文字大小調至48px (Bootstrap 5 的 display-5的大小)
  2. 文字字重為Bold
  3. 文字顏色為white(#FFFFFF)+透明度40%
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489HK66amL4lp.png

步驟小標題

  1. 在Step 1下一行輸入小標題
  2. 顏色為secondary(#FDFCFC)
  3. 文字大小不想要太大,所以設成16px就好
  4. 字重為Bold,讓小標題與接下來的內容有差別
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489GiuLehobFq.png

詳細內容

  1. 在小標下方輸入內容文案
  2. 顏色為secondary(#FDFCFC)
  3. 文字大小為p的大小(16px)
  4. 字重為Normal,看起來比較舒服
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489FlKw6ththL.png

統一靠左對齊

  1. 因為左邊的小小slogan是靠左對齊,所以這邊也一樣靠左對齊
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489TTAtMVcGUq.png

調整間距

  1. 「小標題」與「內容」是一個小群組的感覺,所以它們只要相差8px就好
  2. 「Step 1」與「小標題」+「內容」可以相差16px,這樣才看得出來差別
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489im3nuECwxb.png
  3. 把剩下兩個步驟也一併完成

調整背景的高度

  1. 確定長方形裡的「slogan」、「步驟」們都有統一 水平置中
  2. 用padding往上下各推96px
  3. 這樣背景的高度就自然而然地設定好了
    https://ithelp.ithome.com.tw/upload/images/20210923/20139489KtjaASYlDO.png

結論

其實這個使用步驟流程也是無框對齊,但因為這次設計是直接用「內容物去填滿3欄」,所以就不需要加一個外框給它們對齊。另外因為設計靠左對齊,所以在切版時就可以直接用d-flex就好喔!
明天再來設計下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day7 - 設計出無外框式的三欄式pros區塊
下一篇
【設計+切版30天實作】|Day9 - 把Bootstrap預設的Carousel新增變化
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言