終于又可以在每周二與大家見面啦!說到網站顏值的提升,我們上半年的一系列更新,已經足以說明我們對它的重視,畢竟關系到訪客對網站的第一印象嘛。不過大家的顏值提升的需求從未停止。

用戶反饋

  • 網站模板中的導航欄菜單位置可以調整嗎?現在太單一了。
  • 切換成新模板之后,導航欄會跟著變化,能否改變導航欄的設計?

大家想要更多樣的導航欄布局,安排!

「上線了」網站導航欄升級,支持更多款式。

網站導航欄升級

開放范圍:網站編輯器

導航欄作為網站的地圖,具有重要的引導作用。訪客可以通過導航欄縱觀整個網站的概況,并且方便他們快速到達想要了解的地方。

因此導航欄設計對于網站的整體形象和“顏值”至關重要。為了幫助大家提升網站的顏值,我們帶來了多款導航欄設計,升級了風格設置、配色方案、吸頂效果等功能!

功能入口:風格 > 標題與導航

網站導航欄升級

是不是有點似曾相識?半個月前我們發布導航欄展示社交媒體功能時,曾經稍微提到過 8 種新布局。但這些布局可不只是換個位置那么簡單,每種布局設計都包含了設計師的小巧思。跟隨上線君一起來看看吧!

布局A、B、C

這三種布局均屬于頂部導航,設計的多樣性主要體現在Logo、登錄按鈕、搜索框、社交媒體按鈕的多種組合效果。

網站導航欄升級

因此,這三種布局都是將 Logo 放置于左上角,差別是分別對導航菜單進行居右、居左、居中的布局。此外,還可以調節導航欄的寬度、內邊距、字體大小,吸頂效果。

上線了用戶案例,禁止轉載

布局D

布局 D 也是頂部導航,不過因為此種布局是將 Logo 居中,因此導航欄被拆分布局于兩側,也就不存在寬度調節了。

布局D

但是大家依然可以對內邊距、字體大小、吸頂效果進行設計喔~

上線了用戶案例,禁止轉載

上線了用戶案例,禁止轉載

布局E、F

這兩種布局是近幾年來受到設計師青睞的雙層菜單樣式。隨著網站內容和功能的不斷增加和完善,單層菜單可能無法滿足或解決某些特定功能,為了更好地應對此類情況,設計師們便設計出這類雙層菜單樣式。

布局E、F

兩種布局的差異主要是Logo、社交媒體圖標以及展示類目的位置變動。

演示效果,僅供參考

布局G

側邊欄導航設計也是流行設計之一,它對于如今許多網站來說是較為合理的選擇,尤其是諸如長滾動式的頁面。側邊欄導航通常為常駐式的,讓用戶可以隨時定位,快速跳轉,并且其中所能承載的元素相對比頂部導航更多。

布局G

因此,設計的時尤其要注意側邊導航欄的寬度、內邊距、字體大小等設計。這些我們也為大家考慮到啦!快去試試吧!

上線了用戶案例,禁止轉載

布局H

此種布局采用方塊導航欄設計+高亮設計,用來突顯導航欄,訪客的鼠標移動懸停到導航欄上,也會出現高亮效果。

布局H

它也屬于較為傳統的導航欄布局設計了,“極簡風”愛好者的心頭好。

上線了用戶案例,禁止轉載

除了導航欄布局樣式,導航欄配色也是一大亮點喔!導航欄設計同步了此前發布的網站主題配色方案。大家可以選擇我們預設的導航欄配色方案,當然也可以自定義進行偏好設置。

導航欄配色

怎么樣,這次更新不簡單吧!是時候去給導航欄做一次設計升級啦!上線君坐等大家的使用反饋喔!

「上線了sxl.cn」是一個專注自助建站與小程序開發的SaaS平臺,針對眾多行業提供多套小程序模板,目前已經幫助三百多萬沒有技術和設計基礎的用戶,通過上線了一鍵生成網站或小程序,快速建立品牌、獲取客戶、經營生意。2019年8月入選騰訊SaaS加速器首期成員。?

轉載授權請發郵件到:xmt@striking.ly (得到作者主動回復并加上本網站相關鏈接,方可轉載)。

立即免費建站