建站功能更新：重構(gòu)導(dǎo)航欄設(shè)計(jì)，提升網(wǎng)站顏值！

時(shí)間：2023-06-06 03:09:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-06-06 03:09:01 來源：網(wǎng)站運(yùn)營

建站功能更新：重構(gòu)導(dǎo)航欄設(shè)計(jì)，提升網(wǎng)站顏值?。赫f到「上線了」網(wǎng)站顏值的提升，我們上半年的一系列更新，已經(jīng)足以說明我們對(duì)它的重視，畢竟關(guān)系到訪客對(duì)網(wǎng)站的第一印象嘛。不過大家的顏值提升的需求從未停止。




用戶反饋

• 網(wǎng)站模板中的導(dǎo)航欄菜單位置可以調(diào)整嗎？現(xiàn)在太單一了。
• 切換成新模板之后，導(dǎo)航欄會(huì)跟著變化，能否改變導(dǎo)航欄的設(shè)計(jì)？

大家想要更多樣的導(dǎo)航欄布局，安排！




「上線了」網(wǎng)站導(dǎo)航欄升級(jí)，支持更多款式。










開放范圍：網(wǎng)站編輯器

導(dǎo)航欄作為網(wǎng)站的地圖，具有重要的引導(dǎo)作用。訪客可以通過導(dǎo)航欄縱觀整個(gè)網(wǎng)站的概況，并且方便他們快速到達(dá)想要了解的地方。

因此導(dǎo)航欄設(shè)計(jì)對(duì)于網(wǎng)站的整體形象和“顏值”至關(guān)重要。為了幫助大家提升網(wǎng)站的顏值，我們帶來了多款導(dǎo)航欄設(shè)計(jì)，升級(jí)了風(fēng)格設(shè)置、配色方案、吸頂效果等功能！




功能入口：風(fēng)格 > 標(biāo)題與導(dǎo)航




是不是有點(diǎn)似曾相識(shí)？半個(gè)月前我們發(fā)布導(dǎo)航欄展示社交媒體功能時(shí)，曾經(jīng)稍微提到過 8 種新布局。但這些布局可不只是換個(gè)位置那么簡(jiǎn)單，每種布局設(shè)計(jì)都包含了設(shè)計(jì)師的小巧思。跟隨上線君一起來看看吧！

布局A、B、C

這三種布局均屬于頂部導(dǎo)航，設(shè)計(jì)的多樣性主要體現(xiàn)在Logo、登錄按鈕、搜索框、社交媒體按鈕的多種組合效果。




因此，這三種布局都是將 Logo 放置于左上角，差別是分別對(duì)導(dǎo)航菜單進(jìn)行居右、居左、居中的布局。此外，還可以調(diào)節(jié)導(dǎo)航欄的寬度、內(nèi)邊距、字體大小，吸頂效果。

布局D

布局 D 也是頂部導(dǎo)航，不過因?yàn)榇朔N布局是將 Logo 居中，因此導(dǎo)航欄被拆分布局于兩側(cè)，也就不存在寬度調(diào)節(jié)了。




但是大家依然可以對(duì)內(nèi)邊距、字體大小、吸頂效果進(jìn)行設(shè)計(jì)喔~

布局E、F

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




兩種布局的差異主要是Logo、社交媒體圖標(biāo)以及展示類目的位置變動(dòng)。

布局G

側(cè)邊欄導(dǎo)航設(shè)計(jì)也是流行設(shè)計(jì)之一，它對(duì)于如今許多網(wǎng)站來說是較為合理的選擇，尤其是諸如長滾動(dòng)式的頁面。側(cè)邊欄導(dǎo)航通常為常駐式的，讓用戶可以隨時(shí)定位，快速跳轉(zhuǎn)，并且其中所能承載的元素相對(duì)比頂部導(dǎo)航更多。




因此，設(shè)計(jì)的時(shí)尤其要注意側(cè)邊導(dǎo)航欄的寬度、內(nèi)邊距、字體大小等設(shè)計(jì)。這些我們也為大家考慮到啦！快去試試吧！

布局H

此種布局采用方塊導(dǎo)航欄設(shè)計(jì)+高亮設(shè)計(jì)，用來突顯導(dǎo)航欄，訪客的鼠標(biāo)移動(dòng)懸停到導(dǎo)航欄上，也會(huì)出現(xiàn)高亮效果。




它也屬于較為傳統(tǒng)的導(dǎo)航欄布局設(shè)計(jì)了，“簡(jiǎn)約風(fēng)”愛好者的心頭好。

除了導(dǎo)航欄布局樣式，導(dǎo)航欄配色也是一大亮點(diǎn)喔！導(dǎo)航欄設(shè)計(jì)同步了此前發(fā)布的網(wǎng)站主題配色方案。




大家可以選擇我們預(yù)設(shè)的導(dǎo)航欄配色方案，當(dāng)然也可以自定義進(jìn)行偏好設(shè)置。

怎么樣，這次更新不簡(jiǎn)單吧！是時(shí)候去給導(dǎo)航欄做一次設(shè)計(jì)升級(jí)啦！

上線君坐等大家的使用反饋喔！

本文章由【上線了】原創(chuàng)，未經(jīng)授權(quán)，禁止轉(zhuǎn)載。歡迎關(guān)注我以及公眾號(hào)上線了（sxl-cn)，如果在使用過程中有任何疑問或建議，你可以隨時(shí)通過公眾號(hào)后臺(tái)留言哦。