網(wǎng)頁(yè)設(shè)計(jì)左右兩邊留窄邊的精彩設(shè)計(jì)案例

時(shí)間：2023-10-16 15:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-16 15:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)左右兩邊留窄邊的精彩設(shè)計(jì)案例：SUMAART CHRIS通過(guò)豐富的企業(yè)建站項(xiàng)目經(jīng)驗(yàn)總結(jié)出，無(wú)論是企業(yè)品牌官網(wǎng)、營(yíng)銷型網(wǎng)上、B2C網(wǎng)上商城，還是汽車交易平臺(tái)、實(shí)時(shí)賽事平臺(tái)、門戶網(wǎng)站等等，在網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格中，當(dāng)版式布局采用左右結(jié)構(gòu)排版時(shí)，不管是左邊還是右邊，只要運(yùn)用了一種超窄的菜單導(dǎo)航或預(yù)留小寬度的留白空間，這種設(shè)計(jì)風(fēng)格都會(huì)相當(dāng)別致，容易給到訪用戶耳目一新的感覺(jué)。

今天我們通過(guò)幾個(gè)在左側(cè)或右側(cè)留白、運(yùn)用超窄菜單導(dǎo)航來(lái)布局版式的精彩案例來(lái)分析一下。

01.

左側(cè)包含網(wǎng)站logo、SNS組件、且右側(cè)采用了透明底色的懸浮功能性面板。

02.

左右側(cè)均預(yù)留了一定的、不均等的空間，便于網(wǎng)頁(yè)內(nèi)容及視覺(jué)透氣。

03.

左側(cè)預(yù)留了固定的超窄寬度的空間，展示梳向排版的裝飾性文字。

04.

左側(cè)海報(bào)區(qū)域留出適當(dāng)?shù)目臻g，避開(kāi)常規(guī)的全屏海報(bào)輪播模式。

05.

左側(cè)預(yù)留網(wǎng)站logo、菜單的超窄空間。這個(gè)地方的菜單具有很強(qiáng)大的張力。

06.

左側(cè)的留白空間結(jié)合網(wǎng)站logo、banner選項(xiàng)卡切換的bar來(lái)做排版。

07.

這個(gè)網(wǎng)站設(shè)計(jì)作品比較中規(guī)中矩，左右兩側(cè)留白的空隙一致。而且跟網(wǎng)站logo形成一種對(duì)齊的關(guān)系。我們?cè)谧銎髽I(yè)網(wǎng)站界面設(shè)計(jì)時(shí)，往往遇到一個(gè)版面，具體應(yīng)該有多少中對(duì)齊關(guān)系才合適的問(wèn)題。




08.

這個(gè)網(wǎng)站設(shè)計(jì)作品的左側(cè)留白，其實(shí)不是完全的留白。利用文字的通透性，形成一個(gè)虛的空間，其實(shí)這個(gè)空間與logo還是形成對(duì)齊關(guān)系的。只是banner區(qū)域的色彩疊加邊距，與正文中的文本段落形成了新的對(duì)齊關(guān)系。這種版式通常比較有藝術(shù)感和設(shè)計(jì)感，也容易得到客戶的認(rèn)同。

09.

最后跟大家分享的這個(gè)左右結(jié)構(gòu)的網(wǎng)頁(yè)設(shè)計(jì)作品，比較另類。它在界面的周邊都預(yù)留了相同寬度的邊距，但又特意讓右側(cè)的占滿。關(guān)于這一類的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格在國(guó)外作品中還是能找到很多的?？雌饋?lái)比正統(tǒng)的官網(wǎng)布局更有個(gè)性。

我們都說(shuō)，企業(yè)做一個(gè)新網(wǎng)站其實(shí)最基本的需求就是通過(guò)網(wǎng)站能體現(xiàn)公司的實(shí)力、讓用戶知道公司是做什么的，最擅長(zhǎng)哪些方面。然而，當(dāng)我們?yōu)檫@個(gè)網(wǎng)站所提供的文案不足彰顯公司實(shí)力和市場(chǎng)戰(zhàn)略高度時(shí)，網(wǎng)站設(shè)計(jì)的版式和風(fēng)格就需要通過(guò)有創(chuàng)意的方案進(jìn)行彌補(bǔ)。否則一個(gè)網(wǎng)站的文案比較普通，版式布局和風(fēng)格也是過(guò)于正統(tǒng)，整體下來(lái)是很難給用戶留下深刻印象的。