常用網(wǎng)頁(yè)布局原型分享

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

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

常用網(wǎng)頁(yè)布局原型分享：xiaopiu上線的新功能支持創(chuàng)建編輯web端項(xiàng)目啦！在大家的監(jiān)（cui）督（cu）下，程序員拼了老命總算趕在月底前把web項(xiàng)目的需求做完了，差點(diǎn)就要被祭天了QwQ

為了讓大家在web上線后能第一時(shí)間用上web端的基礎(chǔ)組件，我們先為大家準(zhǔn)備了五個(gè)常用的網(wǎng)頁(yè)版式，包括小米商城的首頁(yè)、網(wǎng)頁(yè)GACHA首頁(yè)、花瓣主頁(yè)、商品詳情頁(yè)、人人都是產(chǎn)品經(jīng)理首頁(yè)，其中包括頂部分頁(yè)欄、網(wǎng)頁(yè)banner輪播圖、圖片布局、排行榜、多種類的圖文列表、瀑布流圖文排版、分類菜單列表、專題列表、商品圖片展示、商品列表、標(biāo)簽、文章列表等。本期也大量用到了引用組件，引用組件功能出來(lái)也有一個(gè)月了，大家用的順手嗎~本次推出的web模板雖然是靜態(tài)模板，但是版式可以說(shuō)是非常豐富了，這套低保真常用網(wǎng)頁(yè)布局的復(fù)用性灰常高~做網(wǎng)頁(yè)的大家一定要趕緊上手試用啊！><




下載鏈接見(jiàn)文末~

小米商城首頁(yè)

小米商城網(wǎng)站是一個(gè)購(gòu)物類網(wǎng)站，首頁(yè)組件包括帶熱搜和推薦標(biāo)簽的搜索框，疊加分類菜單的banner輪播圖，圖標(biāo)組合的組件，四欄、五欄的圖文卡片布局，這些組件和布局適用于電商購(gòu)物類網(wǎng)站、網(wǎng)絡(luò)課堂類網(wǎng)站、優(yōu)選推薦類網(wǎng)站等。

高清原型預(yù)覽鏈接：

人人都是產(chǎn)品經(jīng)理主頁(yè)

人人都是產(chǎn)品經(jīng)理是產(chǎn)品經(jīng)理的分享交流平臺(tái)，首頁(yè)展示包括banner輪播圖+熱門(mén)推薦、標(biāo)簽欄、帶封面圖展示的文章列表。布局可適用于新聞資訊類網(wǎng)站、論壇類網(wǎng)站、交流分享類網(wǎng)站、創(chuàng)作社區(qū)網(wǎng)站等。

高清原型預(yù)覽鏈接：

花瓣主頁(yè)

花瓣網(wǎng)是一個(gè)圖片分享采集類網(wǎng)站，主頁(yè)組件包括搜索分類欄、圖文瀑布流布局等，瀑布流的特點(diǎn)是高效性、隨意性和具有吸引力，對(duì)于圖片的寬高比沒(méi)有固定的要求，和規(guī)整的矩陣式布局不同，隨意縱向排布的圖片版式具有流動(dòng)感而顯得生動(dòng)。適用于以圖片展示為主的購(gòu)物商品頁(yè)、時(shí)尚資訊圖展頁(yè)、圖文分享類網(wǎng)頁(yè)等。

高清原型預(yù)覽鏈接：

商品詳情頁(yè)

這一頁(yè)是一個(gè)較為通用的商品詳情網(wǎng)頁(yè)模板，布局和大多數(shù)主流購(gòu)物類網(wǎng)站相似，以大圖多圖展示放在左邊，右邊則為商品標(biāo)題、商品詳情介紹、價(jià)格數(shù)量和添加購(gòu)物車按鈕的布局。排完商品之后的其他商品推薦欄采用四欄圖文布局，有效展示圖片物品的詳細(xì)內(nèi)容。適用于各種電商類購(gòu)物商品詳情頁(yè)。

高清原型預(yù)覽鏈接：

GACHA首頁(yè)

GACHA是網(wǎng)易公司下的一個(gè)二次元交流網(wǎng)站，首頁(yè)版式布局包括頂部的搜索欄+分頁(yè)欄、滾動(dòng)的banner輪播圖、節(jié)選文字和圖片的混合式卡片布局、標(biāo)簽墻、縱向和橫向的圖文列表版式、排行榜欄、專題列表等。大圖展示的版式較多，組件種類豐富，適用場(chǎng)景可以是小說(shuō)動(dòng)漫類網(wǎng)站、繪畫(huà)交流類網(wǎng)站、視頻直播類網(wǎng)站等。

高清原型預(yù)覽鏈接：

資源鏈接

常用網(wǎng)頁(yè)布局下載：xiaopiu-「常用網(wǎng)頁(yè)布局」下載

常用網(wǎng)頁(yè)布局預(yù)覽：xiaopiu-「常用網(wǎng)頁(yè)布局」預(yù)覽

常用網(wǎng)頁(yè)布局頁(yè)面庫(kù)：xiaopiu-「常用網(wǎng)頁(yè)布局」頁(yè)面庫(kù)

常用網(wǎng)頁(yè)布局組件庫(kù)：xiaopiu-「常用網(wǎng)頁(yè)布局」組件庫(kù)

移動(dòng)端資源分享

更多移動(dòng)端資源詳見(jiàn)專欄：xiaopiu工坊

或直接訪問(wèn)我們的網(wǎng)站：xiaopiu-精選廣場(chǎng)




歡迎大家對(duì)我們的原型提出建議，對(duì)后面分享內(nèi)容有哪些期待和想法也可以跟我們交流喲！

啵啵啾_(:?」∠)_希望大家網(wǎng)頁(yè)原型體驗(yàn)愉快~~~