常用網(wǎng)頁(yè)設(shè)計(jì)布局原型分享

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

　　為了讓大家在web上線(xiàn)后能第一時(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輪播圖、圖片布局、排行榜、多種類(lèi)的圖文列表、瀑布流圖文排版、分類(lèi)菜單列表、專(zhuān)題列表、商品圖片展示、商品列表、標(biāo)簽、文章列表等。本期也大量用到了引用組件，引用組件功能出來(lái)也有一個(gè)月了，大家用的順手嗎~本次推出的web模板雖然是靜態(tài)模板，但是版式可以說(shuō)是非常豐富了，這套低保真常用網(wǎng)頁(yè)布局的復(fù)用性灰常高~做網(wǎng)頁(yè)的大家一定要趕緊上手試用啊！

　　小米商城首頁(yè)

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

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

　　xiaopiu-小米商城首頁(yè)

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

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

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

　　xiaopiu-人人都是產(chǎn)品經(jīng)理布局

　　花瓣主頁(yè)

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

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

　　xiaopiu-花瓣瀑布流布局

　　商品詳情頁(yè)

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

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

　　xiaopiu-商品詳情頁(yè)

　　GACHA首頁(yè)

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

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

　　xiaopiu-網(wǎng)易GACHA主頁(yè)

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

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

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

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

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