小程序尺寸是多少

Ⅰ 小程序設計稿能用828嗎

微信小程序的設計只需要以iPhone6屏幕尺寸750x1334px為視覺稿進行設計即可，因為微信小程序以rpx為css尺寸單位，rpx可以根據屏幕寬度進行自適應，規定屏幕寬度為750rpx，因此在iPhone6設計稿上1px=1rpx，在尺寸換算上就會很簡單。

在這里插入圖片描述

小程序的所有頁面，包括小程序內嵌網頁和插件，微信都會在其右上角放置官方小程序菜單，樣式尺寸及布局如上圖。開發者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格，如下圖。

在這里插入圖片描述

字體規范

在這里插入圖片描述

小程序的字體依然遵循微信原生視覺規范：微信內字體的使用與所運行的系統字體保持一致，常用字型大小為20, 18, 17, 16,14 13, 11(pt)，使用場景具體如上圖。

在這里插入圖片描述

無彩色——主內容Black黑色，次要內容Grey灰色；時間戳與表單預設值Light灰色；大段的說明內容而且屬於主要內容用Semi黑；

在這里插入圖片描述

有彩色——藍色為鏈接用色，綠色為完成字樣顏色，紅色為出錯用色，Press與Disable狀態分別降低透明度為20%與10%；

頂部導航欄navigationBar

在這里插入圖片描述

頂部導航欄一般簡稱導航欄，標准高度：128rpx，一般只做底色修改，標題區與導航區要進行自定義開發也是可以的，不過要注意設計的自有導航樣式與微信官方小程序菜單樣式要保持一定差異，以便區分。

標簽分頁導航tabBar

標簽分頁導航欄一般簡稱標簽欄，標准高度：98rpx，可固定在頁面的頂部或底部，便於用戶在不同分頁間做切換。標簽數量在2-5個，為確保點擊區域，建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽欄，可根據產品需求選擇或去掉標簽欄。

1.底部標簽欄

在這里插入圖片描述

頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。

彈窗

在這里插入圖片描述

無論是APP還是Web網頁，彈窗總是出現在頁面的最上層，但是在小程序里導航欄跟標簽欄的層級是最高的，以至於優先順序較高的彈窗在這里也要有所收斂，因此在設計和開發時，都需要注意避免踩坑。

啟動頁

在這里插入圖片描述

小程序啟動頁是小程序在微信內一定程度上展現品牌特徵的頁面之一。本頁面將突出展示小程序品牌特徵和載入狀態。啟動頁除品牌標志（ Logo ）展示外，頁面上的其他所有元素如載入進度指示，均由微信統一提供且不能更改，無需開發者開發。

載入樣式

無論是APP還是小程序，載入都不可避免，同樣長時間的載入等待會引起用戶的不良情緒，因此，在不可避免的載入和等待時，給予及時的反饋以舒緩用戶等待的不良情緒都是必需的。小程序里除了自定義載入樣式，更是依賴微信提供了一系列載入樣式：

1.頁面下拉刷新載入

在這里插入圖片描述

在微信小程序內，微信提供標準的頁面下拉刷新載入能力和樣式，開發者無需自行開發。

2.頁面內載入反饋

在這里插入圖片描述

開發者可在小程序里自定義頁面內容的載入樣式。建議不管是使用在局部還是全局載入，自定義載入樣式都應該盡可能簡潔，並使用簡單動畫告知用戶載入過程。

3.模態載入

在這里插入圖片描述

模態的載入樣式將覆蓋整個頁面，由於無法明確告知具體載入的位置或內容可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態的載入。

4.局部載入反饋

在這里插入圖片描述

局部載入反饋是只在觸發載入的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。

5.全局載入反饋

Ⅱ 小程序碼可以生成尺寸

小程序開發尺寸是rpx（responsive pixel），可以實現一稿適配所有屏幕尺寸，小程序編譯後，rpx會做一次px換算。換算是以375個物理像素為基準，也就是在一個寬度為375物理像素的屏幕下，1rpx = 1px。這里了解就行，設計稿尺寸375px或750px都沒問題。在不同的設備下，rpx換算成不同的px，意思就是在開發小程序時，只需要按照標准設計設置好尺寸（多少rpx），小程序會根據對應的設備，計算出應該顯示的尺寸（多少px），所以開發時只需要按照標准規則寫，就可以適配不同的設備。

Ⅲ 求教各位，微信小程序發布產品的圖片規格是多少啊

求教各位，微信小程序發布產品的圖片規格是多少啊？

1、微信小程序發布商品為了最佳體驗效果，注意商品圖尺寸，建議詳情圖尺寸：寬度800，高度不限，輸出畫質70%，格式:jpg.

1、目前小程序上的輪播圖的圖片是16:9的寬高比例,所以商家在給小程序商城設計輪播圖的時候，盡量按照這個尺寸來選擇。如果有多張輪播圖，建議幾張的輪播圖的尺寸大小保持一致，這樣整體的視覺上看起來就非常美觀、整潔。

3、目前微信小程序分享圖片分享卡片的圖片尺寸長寬比例是5:4，只要是這樣的比例就可以了，比如50px*40px；100px*80px…設置成這樣的圖片大小，在分享卡片是就不會出現圖片變得扭曲或者寬高被隱藏的問題出現了。另外還需要注意的是，圖片盡量設置成jpg、png等常見格式.

Ⅳ 小程序商城運營推廣所需的設計和詳情頁是尺寸是多少

一般情況下，一場小程序營銷活動，我們會設計相應的專題頁，如果是當月的大型促銷活動，首頁也會同步更新調整架構內容。

如服裝類，我們會在架構表備注的要求

商品詳情頁：750或800的寬度皆可，適應手機閱讀，高度則根據商品本身實際情況而定，建議單張圖片150-200KB之間比較好，方便用戶下拉圖片時快速載入圖片內容，提升體驗感。

商品活動標：500*500，其實只要是1:1的方圖即可。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上就是我的分享

如果對你有用，就點個贊吧！予人玫瑰，手有餘香~