iT邦幫忙

2021 iThome 鐵人賽

DAY 4
2
Modern Web

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

【設計+切版30天實作】|Day 4 - 參考Bootstrap畫出理想的header(下集)

設計大綱

上一集設計完header的滿版背景後,今天會設計Navigation bar。Navbar在網頁來說也是蠻重要的一個元件,通常會有LOGO、常用按鈕或是搜尋列等等。這次的設計就以簡單為主,所以只會有LOGO、a計結以及按鈕。另外背景顏色會用透明來呈現,因為背景圖很豐富,不想再把header的視覺感覺加重了。

步驟

  1. 去Bootstrap的官網參考navbar的元件
    https://ithelp.ithome.com.tw/upload/images/20210916/20139489LBYMJf8qKm.png
    Bootstrap 5官網-navbar
    這邊直接給大家連結,點進去就是navbar的元件了。這邊大家可以參考一下Bootstrap的元件,但我個人不想要那樣的排版,所以我在navbar的設計就不參考它們了XDD!

  2. 回Adobe XD設計Navbar

背景

https://ithelp.ithome.com.tw/upload/images/20210916/20139489z6I4P1wQH8.png

  • 先畫一個與container同寬的長方形,高度先隨便拉
  • 由於背景要透明,所以這邊就不用背景顏色
  • 但因為要方便對齊其他元件,所以先加個外框給它

製作LOGO:GYMATE(平台的名稱)

這邊我就直接用文字去呈現LOGO名稱,大家也可以自行去選擇LOGO是什麼!
https://ithelp.ithome.com.tw/upload/images/20210916/20139489RX4Tj0lUnU.png

  • 靠左輸入LOGO
  • 文字大小為48px
  • 文字樣式為Copperplate
  • 字重為Regular
  • 文字顏色為Secondary(#FDFCFC)
  • 把LOGO調整為垂直置中即可

輸入nav-items(a連結):常見問題、註冊、登入

這邊會列出平台常用的按鈕,以「常見問題」、「註冊」、「登入」為主。另外,因為我不想跟Bootstrap預設的一樣都靠左對齊,所以這邊的nav-items全都會靠右對齊喔!
https://ithelp.ithome.com.tw/upload/images/20210916/20139489iWWnLC45BV.png

  • 在右邊的位置(大概就好,之後再來調)輸入以上3個nav-items
  • 文字大小一樣為16px
  • 字重為Normal
  • 文字顏色為Secondary(#FDFCFC)
  • 文字左右之間的spacers為48px

插入button:免費試用

還記得昨天的Button嗎?這邊直接copy上來用就好XDD!
https://ithelp.ithome.com.tw/upload/images/20210916/20139489QhAsN9iVAF.png

  • 把昨天的Button copy and paste
  • 為了吸引使用者去按,所以把Button文字修改為「免費試用」

調整間距

https://ithelp.ithome.com.tw/upload/images/20210916/201394898MUoMeztsl.png
https://ithelp.ithome.com.tw/upload/images/20210916/20139489I9J1ogJgsy.png

  • 確認LOGO、a連結、Button是否都有跟框框垂直置中
  • 確認無誤後,把它們群組在一起,並向上推24px的margin
  • 把框框隱藏起來,就完成了!

https://ithelp.ithome.com.tw/upload/images/20210918/20139489NC7XgG6Teu.png

結論

在沒有考量到切版以及沒有Bootstrap的前提下去設計的話,我個人覺得會比較free一點哈哈哈哈哈(難怪設計師都會和工程師吵架OvO),但因為這一次是要自己切版,再加上自己切版能力沒有很好,所以在設計的時候都會一邊想「如果要切的話,切不切得出來呢?」。
另外,因為之後切版前會把Bootstrap做客製化,所以在設計時,也不用完全跟Bootstrap裡面預設的元件一模一樣。我想這就是客製化的好處吧:D
今天把header完成了,明天開始設計下一個區塊吧!明天見!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day3 - 參考Bootstrap畫出理想的header(上集)
下一篇
【設計+切版30天實作】|Day5 - 做出3欄式「痛點」設計
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言