你準備開(kāi)發(fā)小程序嗎？我這有一套規范
相比APP而言，開(kāi)發(fā)一款小程序的開(kāi)發(fā)成本更低、周期更短，同時(shí)開(kāi)發(fā)難度和維護成本也相對降低，因此越來(lái)越多的開(kāi)發(fā)者開(kāi)始入坑小程序。
湖南佰商網(wǎng)絡(luò )致力于各平臺小程序開(kāi)發(fā)，所以今天我就從設計方面聊一聊微信小程序設計規范，埋上設計中可能會(huì )出現的坑，讓你能更好的完成你的小程序～
設計尺寸
微信小程序的設計只需要以iPhone6屏幕尺寸750x1334px為視覺(jué)稿進(jìn)行設計即可，因為微信小程序以rpx為css尺寸單位，rpx可以根據屏幕寬度進(jìn)行自適應，規定屏幕寬度為750rpx，因此在iPhone6設計稿上1px=1rpx，在尺寸換算上就會(huì )很簡(jiǎn)單。
設計區域
小程序的所有頁(yè)面，包括小程序內嵌網(wǎng)頁(yè)和插件，微信都會(huì )在其右上角放置官方小程序菜單，樣式尺寸及布局如上圖。開(kāi)發(fā)者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁(yè)面設計風(fēng)格，如下圖。
官方小程序菜單放置在界面固定位置，在設計界面時(shí)要預留出該區域空間，若要在此區域附近放置可交互元素，要特別注意交互事件是否會(huì )沖突，操作是否容易被使用。
字體規范
小程序的字體依然遵循微信原生視覺(jué)規范：微信內字體的使用與所運行的系統字體保持一致，常用字號為20, 18, 17, 16,14 13, 11(pt)，使用場(chǎng)景具體如上圖。
字體顏色規范
無(wú)彩色——主內容Black黑色，次要內容Grey灰色；時(shí)間戳與表單缺省值Light灰色；大段的說(shuō)明內容而且屬于主要內容用Semi黑；
有彩色——藍色為鏈接用色，綠色為完成字樣顏色，紅色為出錯用色，Press與Disable狀態(tài)分別降低透明度為20%與10%；
頂部導航欄 navigationBar
頂部導航欄一般簡(jiǎn)稱(chēng)導航欄，標準高度：128rpx，一般只做底色修改，標題區與導航區要進(jìn)行自定義開(kāi)發(fā)也是可以的，不過(guò)要注意設計的自有導航樣式與微信官方小程序菜單樣式要保持一定差異，以便區分。
標簽分頁(yè)導航 tabBar
標簽分頁(yè)導航欄一般簡(jiǎn)稱(chēng)標簽欄，標準高度：98rpx，可固定在頁(yè)面的頂部或底部，便于用戶(hù)在不同分頁(yè)間做切換。標簽數量在2-5個(gè)，為確保點(diǎn)擊區域，建議標簽數量不超過(guò)4項。一個(gè)頁(yè)面也不應出現一組以上的標簽欄，可根據產(chǎn)品需求選擇或去掉標簽欄。
1. 底部標簽欄
小程序首頁(yè)可選擇微信提供的原生底部標簽分頁(yè)樣式，該樣式僅供小程序首頁(yè)使用。開(kāi)發(fā)時(shí)可自定義圖標樣式、標簽文案以及文案顏色等。特別說(shuō)明：這里圖標控件尺寸是54x54px，但是小程序開(kāi)發(fā)需要的是81x81px，正好是1.5倍，需要注意一次給到位。
2. 頂部標簽欄
頂部標簽分頁(yè)欄顏色可自定義。在自定義顏色選擇中，務(wù)必注意保持分頁(yè)欄標簽的可用性、可視性和可操作性。
彈窗
無(wú)論是APP還是Web網(wǎng)頁(yè)，彈窗總是出現在頁(yè)面的最上層，但是在小程序里導航欄跟標簽欄的層級是最高的，以至于優(yōu)先級較高的彈窗在這里也要有所收斂，因此在設計和開(kāi)發(fā)時(shí)，都需要注意避免踩坑。
啟動(dòng)頁(yè)
小程序啟動(dòng)頁(yè)是小程序在微信內一定程度上展現品牌特征的頁(yè)面之一。本頁(yè)面將突出展示小程序品牌特征和加載狀態(tài)。啟動(dòng)頁(yè)除品牌標志（Logo）展示外，頁(yè)面上的其他所有元素如加載進(jìn)度指示，均由微信統一提供且不能更改，無(wú)需開(kāi)發(fā)者開(kāi)發(fā)。
加載樣式
無(wú)論是APP還是小程序，加載都不可避免，同樣長(cháng)時(shí)間的加載等待會(huì )引起用戶(hù)的不良情緒，因此，在不可避免的加載和等待時(shí)，給予及時(shí)的反饋以舒緩用戶(hù)等待的不良情緒都是必需的。小程序里除了自定義加載樣式，更是依賴(lài)微信提供了一系列加載樣式：
1. 頁(yè)面下拉刷新加載
在微信小程序內，微信提供標準的頁(yè)面下拉刷新加載能力和樣式，開(kāi)發(fā)者無(wú)需自行開(kāi)發(fā)。
2. 頁(yè)面內加載反饋
開(kāi)發(fā)者可在小程序里自定義頁(yè)面內容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該盡可能簡(jiǎn)潔，并使用簡(jiǎn)單動(dòng)畫(huà)告知用戶(hù)加載過(guò)程。
3. 模態(tài)加載
模態(tài)的加載樣式將覆蓋整個(gè)頁(yè)面，由于無(wú)法明確告知具體加載的位置或內容可能引起用戶(hù)的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態(tài)的加載。
4. 局部加載反饋
局部加載反饋是只在觸發(fā)加載的頁(yè)面局部進(jìn)行反饋，這樣的反饋機制更加有針對性，頁(yè)面跳動(dòng)小，是微信推薦的反饋方式。
5. 全局加載反饋
最后
關(guān)于微信小程序的設計開(kāi)發(fā)，官方平臺給出了相關(guān)說(shuō)明介紹及資源文檔，其中設計文件包含Sketch和PS基礎組件庫。
