網(wǎng)站設(shè)計(jì)

Website development

側(cè)邊欄與無邊欄：的利弊不同布置形式

發(fā)布時(shí)間：2017-01-19 14:43:06

TAGS：網(wǎng)站設(shè)計(jì)

一個(gè)側(cè)邊欄的利弊是什么？

贊成的意見

做廣告
增加郵箱注冊
促進(jìn)相關(guān)產(chǎn)品
組織（尤其是電子商務(wù)）

欺騙

視力unappealing UX的
與手機(jī)不兼容
cluttered和clunky信息
不必要的許多企業(yè)和投資組合

網(wǎng)站特色的側(cè)邊欄可以追溯到90年代中期，早期的網(wǎng)站簡單卻實(shí)用，而我們二十多年后，在網(wǎng)頁設(shè)計(jì)中許多巨大的進(jìn)步。

然而，邊欄仍對(duì)每個(gè)站點(diǎn)的一個(gè)常見的主食，從博客到小企業(yè)和電子商務(wù)商店。

但隨著響應(yīng)式設(shè)計(jì)的發(fā)展，這是值得質(zhì)疑的側(cè)邊欄的目的了。在這篇文章中，我將分享一些想法和例子是否考慮你的下一個(gè)網(wǎng)站真的需要一個(gè)側(cè)邊欄部分。

在側(cè)邊欄或者不側(cè)邊欄？

這是個(gè)問題。這似乎是要求越來越多，每過一年。

有一個(gè)設(shè)計(jì)師，感覺大運(yùn)動(dòng)側(cè)邊欄是無用的。移動(dòng)設(shè)備上的用戶越多，側(cè)邊欄經(jīng)常看不見下面的含量下降。與桌面的分辨率越來越大，已經(jīng)沒有空間不斷擴(kuò)大的網(wǎng)頁。他們需要有一些類型的寬度限制。

我看著這個(gè)從一個(gè)網(wǎng)站的方法。我沒有考慮到webapps或單頁應(yīng)用側(cè)邊欄（溫泉），因?yàn)檫@些都是不同的野獸共

例如，我喜歡用側(cè)邊欄Gmail的界面，我希望它繼續(xù)這樣。

gmail sidebar

但許多簡單的網(wǎng)站可以做的更好，沒有一個(gè)側(cè)邊欄。有多少網(wǎng)站的投資組合需要一個(gè)側(cè)邊欄？什么是博客或企業(yè)網(wǎng)站？

絕大多數(shù)商業(yè)網(wǎng)站的實(shí)際工作，更沒有側(cè)邊欄。一個(gè)企業(yè)不需要廣告，也不需要側(cè)邊欄作為額外的鏈接、按鈕資源。

退房Wacom的主頁明白我的意思。他們的布局是大，但它的流量在一個(gè)單一的柱。他們在一個(gè)單流單內(nèi)容與圖形和大塊的內(nèi)容填寫頁面。

wacom tablet ituos

你也會(huì)看到這Adobe的網(wǎng)站，讓人吃驚的是，因?yàn)樗麄冇写罅康漠a(chǎn)品和大量的內(nèi)容去用它。

adobe photoshop

博客的設(shè)計(jì)可以去無論哪種方式，它涉及到的主題，設(shè)計(jì)風(fēng)格，和側(cè)邊欄內(nèi)容的必要性。

每個(gè)博客都可以受益從側(cè)邊欄如果目標(biāo)是投放廣告，增加電子郵件注冊，或推動(dòng)相關(guān)產(chǎn)品。

webdesigner depot sidebar

但較小的博客，只運(yùn)行小的廣告可以用單柱布置工作。這也提高了用戶體驗(yàn)，所以如果可能的話，它通常是更好的去簡單。

側(cè)邊欄可以但取消博客如果替代收入來源變得可用。

這個(gè)崛起的AdBlock再加上流行廣告盲點(diǎn)似乎也不支持側(cè)邊欄博客設(shè)計(jì)。

沒人說側(cè)邊欄不能擁有有價(jià)值的內(nèi)容。但隨著移動(dòng)邊欄只復(fù)制信息的人多了，似乎少了，在2017欄設(shè)計(jì)的那么有用（及以后）。

極簡主義的方法

一個(gè)簡單的網(wǎng)站往往更容易瀏覽，更容易使用，并提供了更舒適的閱讀體驗(yàn)。去除側(cè)邊欄的快的方式簡化布局

但這不會(huì)對(duì)每一個(gè)網(wǎng)站。有時(shí)奢侈的設(shè)計(jì)答案。

我發(fā)現(xiàn)博客是更容易與一個(gè)完整的無邊欄簡約的方法讀。然而他們有較少的空間選擇的領(lǐng)域，相關(guān)的部件，分類列表，和那些可愛的側(cè)邊欄廣告橫幅。

權(quán)衡取決于博客和你的貨幣化策略的類型。

拉姆齊博客的暴君是一個(gè)簡單的博客設(shè)計(jì)作品的一個(gè)很好的例子。內(nèi)容受到了所有人的關(guān)注，大多數(shù)游客不會(huì)錯(cuò)過的側(cè)邊欄。

blog tyrant no sidebar

這個(gè)投資組合的網(wǎng)站，應(yīng)該重視的工作也是如此。

設(shè)計(jì)師，攝影師，藝術(shù)家和作家都能從一個(gè)側(cè)邊欄不投資效益。

rad sechrist art school

Rad Sechrist藝術(shù)網(wǎng)站不打擾任何欄或多欄的方法。內(nèi)容就流下來的頁面，它是一個(gè)更容易消耗這種方式。

但其中分裂的地區(qū)電子商務(wù)設(shè)計(jì)

另一方面，極簡主義通常會(huì)提高可用性保持潛在客戶網(wǎng)頁上的時(shí)間。

但電子商務(wù)網(wǎng)站有很多功能，這些按鈕/鏈接要去某個(gè)地方。

從側(cè)邊欄的電子商務(wù)網(wǎng)站，大多數(shù)人受益。但我認(rèn)為側(cè)邊欄內(nèi)容應(yīng)保持在低限度。

barbell apparel homepage

UX杠鈴服裝將手機(jī)完全不同的但它還是有用的。因此設(shè)計(jì)一個(gè)極簡主義的方法，但仍使用側(cè)邊欄的產(chǎn)品分類鏈接。

你如何處理極簡主義將每個(gè)項(xiàng)目的變化。但似乎沒有欄的方法是獲得牽引力。

移動(dòng)響應(yīng)式設(shè)計(jì)

未來的互聯(lián)網(wǎng)是快速，可靠，和完整的網(wǎng)站響應(yīng)

越來越多的人瀏覽互聯(lián)網(wǎng)的移動(dòng)設(shè)備。事實(shí)上，2016是移動(dòng)互聯(lián)網(wǎng)應(yīng)用的第一次超過桌面，我不期望有減小的趨勢。

響應(yīng)式設(shè)計(jì)通常移動(dòng)或隱藏側(cè)邊欄，因?yàn)橛性谛∑聊簧蠜]有房間。你如何對(duì)待這個(gè)會(huì)有所不同，根據(jù)現(xiàn)場。

第一，好的選擇是刪除移動(dòng)設(shè)備上的側(cè)邊欄。你可以看到這creativebloq在側(cè)邊欄消失，超過一定的斷點(diǎn)。

creative bloq sidebar

另一個(gè)策略是把欄下面的主要內(nèi)容。你可以在看到這tutsplus布局

當(dāng)然，后的和顯著的選擇是完全忘記邊欄。這樣你不動(dòng)額外的內(nèi)容在移動(dòng)用戶。網(wǎng)站的寬度可以縮小無邊欄，它會(huì)更容易重新布局。

沒有一個(gè)工具，你的網(wǎng)頁也加載更快。但該網(wǎng)站可能沒有太多的桌面上的奢華的設(shè)計(jì)。

這一切都?xì)w結(jié)到你一直在側(cè)邊欄和內(nèi)容的價(jià)值。

Mashable網(wǎng)站跨度達(dá)1440px寬一些頁面有3-4列的內(nèi)容。但他們的移動(dòng)網(wǎng)站看起來很棒。

針對(duì)不同的用戶不同的選擇。

mashable homepage sidebars

除去每個(gè)站點(diǎn)只是為了安撫移動(dòng)用戶側(cè)邊欄是不公平的。而不是試圖找到一個(gè)平衡點(diǎn)。

如果一個(gè)網(wǎng)站的好處有一個(gè)側(cè)邊欄，然后使它的桌面用戶和移動(dòng)/隱藏它的移動(dòng)。

問題不是：“我應(yīng)該使用一個(gè)工具嗎？“問題是，”是一個(gè)有價(jià)值的對(duì)這個(gè)網(wǎng)站的側(cè)邊欄？“

在側(cè)邊欄有價(jià)值？

十年前，側(cè)邊欄就會(huì)被認(rèn)為是“對(duì)每一個(gè)網(wǎng)站的規(guī)范”。

但現(xiàn)在，我認(rèn)為設(shè)計(jì)師需要使用側(cè)邊欄的證明自己的選擇。如果你想不出一個(gè)好的理由有一個(gè)側(cè)邊欄，然后添加一個(gè)為什么？

只是因?yàn)檫厵谝恢痹诓⒉灰馕吨麄儜?yīng)該留下來。網(wǎng)絡(luò)并不總是建立移動(dòng)，但改變快。CSS并不總是支持動(dòng)畫也。

唯一不變的是這與技術(shù)；事情的變化，和設(shè)計(jì)師也需要改變。

在典型的一看后布局TechCrunch。設(shè)計(jì)手機(jī)外觀時(shí)尚，簡約，而臺(tái)式機(jī)的設(shè)計(jì)有兩個(gè)側(cè)邊欄的主要內(nèi)容夾在中間。

techcrunch sidebars blog post layout

但其實(shí)我喜歡的桌面設(shè)計(jì)。它提供了在側(cè)邊欄區(qū)域相關(guān)的很多功能。如果顯示器是足夠?qū)?，那么為什么不展開布局？

有添加側(cè)邊欄本身沒有錯(cuò)。它將是桌面和筆記本電腦用戶有用的。如果不加重視，那么它可能是值得去完全。

我發(fā)現(xiàn)小博客和簡單的商業(yè)網(wǎng)站好沒有側(cè)邊欄。商人的網(wǎng)站，創(chuàng)意組合，餐飲網(wǎng)站所有工作更好的無側(cè)邊欄。但是博客和電子商務(wù)商店可以從兩個(gè)甚至三個(gè)側(cè)邊欄布局中收獲很多。

不要讓一個(gè)選擇成為一個(gè)硬快，你的工作規(guī)則。設(shè)計(jì)永遠(yuǎn)是可塑的，每個(gè)情況是不同的。

但看起來我們正在變成一個(gè)移動(dòng)的第一世界，所以側(cè)邊欄的統(tǒng)治終可能會(huì)被下一個(gè)可用的解決方案。

在你的

你如何看待網(wǎng)頁設(shè)計(jì)的側(cè)邊欄？哪個(gè)網(wǎng)站他們獲益多？他們?nèi)匀皇潜匾膯幔?/span>

這是一個(gè)棘手的問題，因?yàn)閭?cè)邊欄提供了許多常見問題的解決方法。想想你喜歡的側(cè)邊欄和什么樣的價(jià)值，他們提供的。如果你有任何相關(guān)的想法，隨時(shí)分享的討論區(qū)。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7072,0.html

上一篇：如何添加“最近更新”的日期分的博客文章的元數(shù)據(jù)

下一篇：指導(dǎo)的PaaS解決方案：7個(gè)問題需要你回答

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理