大家好，我是獨立開發者Larry，相比APP而言，開發一款小程序的開發成本更低、週期更短，同時開發難度和維護成本也相對降低，因此越來越多的開發者開始入坑小程序。

正好最近我也要開發小程序，所以今天我就從設計方面聊一聊微信小程序

設計規範，埋上設計中可能會出現的坑，讓你能更好的完成你的小程序～

設計尺寸

微信小程序的設計只需要以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. 底部標籤欄

小程序首頁可選擇微信提供的原生底部標籤分頁樣式，該樣式僅供小程序首頁使用。開發時可自定義圖標樣式、標籤文案以及文案顏色等。特別說明：這裡圖標控制項尺寸是54x54px，但是小程序開發需要的是81x81px，正好是1.5倍，需要注意一次給到位。

2. 頂部標籤欄

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

彈窗

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

啟動頁

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

載入樣式

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

1. 頁面下拉刷新載入

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

2. 頁面內載入反饋

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

3. 模態載入

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

4. 局部載入反饋

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

5. 全局載入反饋

全局載入將載入圖標放到導航標題左側，使用標題欄提示載入小程序頁面內容的過程。

最後

關於微信小程序的設計開發，官方平臺給出了相關說明介紹及資源文檔，其中設計文件包含Sketch和PS基礎組件庫，不過是16年的，另外我還在微信官方文件的基礎上增添了一些新的樣式，裡面也附帶了官方UI控制項，供大家參考，公眾號(force_code)後臺回復「小程序設計規範」獲取下載鏈接。

今天的內容就是這些，希望對你有所幫助，公眾號後臺回復『加羣』識別二維碼添加「碼力全開機器人」，回復『加羣』即可加入產品內測用戶羣，你也可以添加我的微信lishichao706，帶你進入獨立開發者的聚集地。

  • 知識小鋪
  • 工作室
  • 微博
  • 知乎
  • twitter

推薦閱讀：

相關文章