設計大綱

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

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

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

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

步驟

滿版背景

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

小小slogan

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

Step 1

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

1. 文字大小調至48px (Bootstrap 5 的 display-5的大小)
2. 文字字重為Bold
3. 文字顏色為white(#FFFFFF)＋透明度40%
   

步驟小標題

1. 在Step 1下一行輸入小標題
2. 顏色為secondary(#FDFCFC)
3. 文字大小不想要太大，所以設成16px就好
4. 字重為Bold，讓小標題與接下來的內容有差別
   

詳細內容

1. 在小標下方輸入內容文案
2. 顏色為secondary(#FDFCFC)
3. 文字大小為p的大小(16px)
4. 字重為Normal，看起來比較舒服
   

統一靠左對齊

1. 因為左邊的小小slogan是靠左對齊，所以這邊也一樣靠左對齊
   

調整間距

1. 「小標題」與「內容」是一個小群組的感覺，所以它們只要相差8px就好
2. 「Step 1」與「小標題」+「內容」可以相差16px，這樣才看得出來差別
   
3. 把剩下兩個步驟也一併完成

調整背景的高度

1. 確定長方形裡的「slogan」、「步驟」們都有統一 水平置中
2. 用padding往上下各推96px
3. 這樣背景的高度就自然而然地設定好了
   

結論

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