看完后就知道web端產(chǎn)品該如何設(shè)計(jì)了

時(shí)間：2023-09-19 23:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-19 23:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

看完后就知道web端產(chǎn)品該如何設(shè)計(jì)了：web產(chǎn)品作為最早的互聯(lián)網(wǎng)產(chǎn)品，雖然現(xiàn)在移動(dòng)產(chǎn)品是主流，但是web端也是互聯(lián)網(wǎng)產(chǎn)品一個(gè)重要的渠道，所以了解web產(chǎn)品的布局對(duì)我們?cè)O(shè)計(jì)web網(wǎng)頁(yè)產(chǎn)品大有裨益，本篇文章我們主要講解web端常見(jiàn)的布局方式，分為三個(gè)部分：

1、 搜索類的網(wǎng)站







谷歌是搜索類網(wǎng)站中做的最優(yōu)秀的，右上角顯示頁(yè)面內(nèi)容和登錄信息，中間模塊顯示logo以及它最主要的功能，搜索模塊，底部還放置了網(wǎng)站的其他信息，供我們跳轉(zhuǎn)；相反百度的搜索網(wǎng)站，考慮到自身的發(fā)展，提供了大量的推薦信息以及廣告位。










2、博客類網(wǎng)站







頂部有頁(yè)面的1級(jí)導(dǎo)航以及登錄的信息，考慮道博客類網(wǎng)站有大量的一些其他模塊，然后在左側(cè)有一個(gè)二級(jí)的樹(shù)狀性的導(dǎo)航，放在網(wǎng)頁(yè)的最左側(cè)，中間模塊是博客類網(wǎng)站的大頭，它有一個(gè)最重要的博客發(fā)文功能，然后是關(guān)于其他人發(fā)送的一些博客內(nèi)容，以及下面具體的詳細(xì)信息，而在網(wǎng)站的最右側(cè)會(huì)顯示一些不是特別重要的信息，比如博主的信息，還有熱門話題等一些其他信息。




3 、購(gòu)物類的網(wǎng)站







這種類別最常見(jiàn)的就是淘寶，我們可以看一下淘寶的整個(gè)頁(yè)面布局，像我們平時(shí)都經(jīng)常去用，但是作為產(chǎn)品經(jīng)理我們更需要去觀察它整個(gè)頁(yè)面的設(shè)計(jì)情況，我們看一下，它頂部依然是顯示了用戶的信息，以及整個(gè)網(wǎng)站的大的布局情況，對(duì)于淘寶這類的購(gòu)物網(wǎng)站，左側(cè)會(huì)顯示它的logo，中間展示它的搜索功能，在淘寶這種品類很繁雜的網(wǎng)站，搜索功能是非常有必要的，所以說(shuō)它也放在了一個(gè)很重要的位置上面，其次是天貓、聚劃算、淘寶頭條等這樣的一級(jí)菜單，因?yàn)樘詫毦W(wǎng)種類比較繁雜，所以這里列舉了它下面所有的子品牌，包括天貓、聚劃算、淘寶頭條等，同時(shí)因?yàn)樗锩娴钠贩N很多，所以在左側(cè)做了一個(gè)二級(jí)的商品分類，供用戶快速的定位自己所需要選擇的商品，中間的banner主要是推薦一些商品，或者是活動(dòng)的頁(yè)面。




4、 圖片類的網(wǎng)站







在這個(gè)網(wǎng)站我們主要是快速的瀏覽相關(guān)圖片信息，在整個(gè)網(wǎng)站上圖片的布局占了很大的篇幅，但它也提供了一些比較顯著的搜索功能，頂部很突出的提供了搜索欄和個(gè)人信息，下面是網(wǎng)站的主體，包含了圖片的陳列，右下角放置了一些不太重要，但是偶爾也會(huì)用到的一些功能，供用戶在一些特殊的情況下去使用。




5、 新聞?lì)惖木W(wǎng)站







新聞?lì)惖木W(wǎng)站也是我們經(jīng)常逛的，這是一個(gè)種類比較繁雜的網(wǎng)站，我們看到里面有很多信息，這類網(wǎng)站它導(dǎo)航做得比較強(qiáng)大，在它左上角放置了logo和導(dǎo)航的信息，新聞?lì)惖木W(wǎng)站種類比較繁雜，所以導(dǎo)航也要做的相當(dāng)強(qiáng)大，右上角放置了一些個(gè)人的信息，包含了個(gè)人名稱，關(guān)注的賬號(hào)，以及粉絲數(shù)量等。

因?yàn)橐紤]到盈利，所以要放置一些廣告鏈接。










6、 產(chǎn)品類的網(wǎng)站







我們拿蘋(píng)果的官網(wǎng)舉例，頂部依然放置了官網(wǎng)的導(dǎo)航，因?yàn)樗@里是以具體產(chǎn)品線為模塊設(shè)計(jì)的，所以這里的導(dǎo)航以各個(gè)端來(lái)命名，比如mac端、ipad、iphone等等，中間是公司產(chǎn)品的主要內(nèi)容，這里會(huì)首推當(dāng)前正在熱賣的產(chǎn)品去展示。

中間是一些其他類型的產(chǎn)品。







上面我們列舉了常見(jiàn)的web網(wǎng)站布局，分別有搜索類、博客類、電商類、圖片類、新聞資訊類、產(chǎn)品類，各個(gè)網(wǎng)站的布局可以總結(jié)如下:







除了這些布局以外，還有一些比較新穎的或者前衛(wèi)的網(wǎng)頁(yè)布局，可以向大家介紹一下。

像這種卡片式的布局，以前多用于后臺(tái)管理里面，但是現(xiàn)在也大量用于飾品類的網(wǎng)站，或者是圖片類的網(wǎng)站中。







一些關(guān)于滾動(dòng)視圖的網(wǎng)頁(yè)布局。







其次還有一些動(dòng)態(tài)效果的，像這類的網(wǎng)站可以通過(guò)動(dòng)態(tài)動(dòng)畫(huà)的效果，來(lái)瀏覽整個(gè)商品的細(xì)節(jié)。







本篇文章介紹了web端設(shè)計(jì)中幾種常見(jiàn)的布局樣式，希望對(duì)大家設(shè)計(jì)有所啟發(fā)。

歡迎有問(wèn)題的小伙伴加我得私人微信：yw5201a1交流，馬上就快要5000人了，抓住這最后不多的名額吧。







更多干貨可關(guān)注微信公眾號(hào)：chanpinliu880

http://weixin.qq.com/r/xUi6ohPENE5LrVfB9x3X (二維碼自動(dòng)識(shí)別)