一年半的時間，我們親眼見證了小程式從萌芽成長為參天大樹，支撐起我們現今的生活方式，讓我們在他的樹蔭下享受著舒適。很多公司自然不會錯過這次機會，紛紛加入到小程式的行列。

這對設計和開發而言算是一次挑戰，畢竟要快速上線的步伐沒有留給我們太多時間，而市面上的相關資料都太零碎，在實際中會遇到很多的坑，官方文件也沒有說明。所以我拉著我們開發小哥哥 Yog，幫大家規避小程式設計中的那些坑。

一、設計稿最好用二倍圖

UI設計師都喜歡用一倍圖，但為什麼用一倍圖，方便適配是表面現象，真正原因是開發用的開發工具支援一倍圖開發，開發不用再換算數值了。而小程式的開發工具不支援一倍圖開發，支援二倍圖開發。小程式裡的尺寸單位叫 rpx，可以根據螢幕寬度進行自適應。在750*1334的設計稿裡，1px = 1rpx。

如果你心疼你的開發小哥哥，讓他少掉點頭髮，設計稿用750*1334的尺寸。但如果你的開發小哥哥之前老欺負你，那你就看著辦吧，他都能搞定。

二、切圖只需切750的尺寸

設計稿用二倍圖做的（750*1334），只需給一倍的切片；如果是按一倍圖設計的（375*667），只要給二倍的切圖。真的不管其它尺寸嗎？不是不想管，而是小程式的開發工具不支援。

三、導航欄不要自定義

標準高度：128rpx

小程式很輕量，同時也有很多限制。導航欄不能自定義就是其中之一，能改變的只有顏色。

這是官方的意思，但是，要改也是可以的，需要客戶端版本是6.6.0以上，而且下拉會使整個頁面下拉，也不好維護。

你會說這不有小程式已經使用了嘛，是，這個小程式叫汪卡，現在，他們已經改回來了。所以，你也別難為你的開發小哥哥了。

四、標籤欄愛素顏

這個標準名稱叫：標籤分頁導航，標準高度：98rpx，簡稱標籤欄。

1. 偷笑別人花了臉

又是一個安靜的晚上，一個人窩在公司裡設計，我承認這樣真的很無奈，和其它小程式一樣。聽說你還在搞什麼原創，加個投影來點漸變，自以為這樣很棒簡直無懈可擊。結果開發小哥哥哭了，我相信是很美美的圖，但是開發做不到啊，那種表情可以想象。

雖然也可以，做點其它形態，那就拜託別讓開發見到你。如果再能看到你，一定就是這麼說，原生控制元件好處多多最好能用它。不用擔心出問題，不用維護怕麻煩。

2. 圖示只要81rpx

還是一個安靜的晚上，還是我在做設計，這次我真的按耐不住，和其它小程式一樣。聽說你又再搞什麼原創，中間圖示變大大，破形破形再破形，燃燒開發腦細胞。

但是，要知道，圖示只要81rpx，小於大於都變形，一定記得規格框。數量只能2至5，多了少了不算數，你只能去改圖示，其它元件說了算。

五、彈窗不覆蓋導航跟標籤

在小程式裡導航欄跟標籤欄的層級是最高的，以至於享受慣最高待遇的彈窗在這裡，也要臣服於他們。

六、視訊限時多

小程式對視訊的支援不是特別的好，原則上在滾動控制元件裡不能放視訊，而且微信官方文件裡是這樣要求的。這點我也像我們開發小哥哥求證，確實是這樣，優酷和騰訊視訊都是將視訊固定。

但其實吧，這點已經被有些公司攻克了，比如開眼跟京東。攻克是攻克了，但是體驗不怎麼好。如果公司產品需要放視訊，建議專門新開一個頁面，視訊部分最好不要有左右滾動。

七、一稿適配

iPhone X 怎麼辦，安卓怎麼辦，這些都不用再設計了，開發小哥哥都能搞定，相信他們。

八、關於設計資源

微信官方雖然有提供，但是更新時間停留在了2016年，沒有現在新版的小程式樣式，和現在的區別就在頂部導航欄上。

最近我正好在看小程式設計，便動手加上了這些新樣式，雖然不多，但都是很認真跟開發小哥哥對過的，裡面也附帶了官方 UI 控制元件，提供給大家。《資源：新版小程式 UI 控制元件，Sketch 版》