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

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

小米商城首頁

小米商城網站是一個購物類網站建設，首頁組件包括帶熱搜和推薦標簽的搜索框，疊加分類菜單的banner輪播圖，圖標組合的組件，四欄、五欄的圖文卡片布局，這些組件和布局適用于電商購物類網站、網絡課堂類網站、優選推薦類網站等。

高清原型預覽鏈接：

xiaopiu-小米商城首頁

人人都是產品經理主頁

人人都是產品經理是產品經理的分享交流平臺，首頁展示包括banner輪播圖+熱門推薦、標簽欄、帶封面圖展示的文章列表。布局可適用于新聞資訊類網站、論壇類網站、交流分享類網站、創作社區網站等。

高清原型預覽鏈接：

xiaopiu-人人都是產品經理布局

花瓣主頁

花瓣網是一個圖片分享采集類網站，主頁組件包括搜索分類欄、圖文瀑布流布局等，瀑布流的特點是高效性、隨意性和具有吸引力，對于圖片的寬高比沒有固定的要求，和規整的矩陣式布局不同，隨意縱向排布的圖片版式具有流動感而顯得生動。適用于以圖片展示為主的購物商品頁、時尚資訊圖展頁、圖文分享類網頁等。

高清原型預覽鏈接：

xiaopiu-花瓣瀑布流布局

商品詳情頁

這一頁是一個較為通用的商品詳情網頁模板，布局和大多數主流購物類網站相似，以大圖多圖展示放在左邊，右邊則為商品標題、商品詳情介紹、價格數量和添加購物車按鈕的布局。排完商品之后的其他商品推薦欄采用四欄圖文布局，有效展示圖片物品的詳細內容。適用于各種電商類購物商品詳情頁。

高清原型預覽鏈接：

xiaopiu-商品詳情頁

GACHA首頁

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

高清原型預覽鏈接：

xiaopiu-網易GACHA主頁

移動端資源分享

更多移動端資源詳見專欄：xiaopiu工坊

或直接訪問我們的網站：xiaopiu-精選廣場

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

啵啵啾_(:?」∠)_希望大家網頁原型體驗愉快~~~

分享文章：常用網頁設計布局原型分享
當前網址：http://m.2m8n56k.cn/news/212265.html

成都網站建設公司_創新互聯，為您提供品牌網站建設、手機網站建設、網站設計、自適應網站、Google、全網營銷推廣

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯