一年半的時(shí)間，我們親眼見(jiàn)證了小程序從萌芽成長(cháng)為參天大樹(shù)，支撐起我們現今的生活方式，讓我們在他的樹(shù)蔭下享受著(zhù)舒適。很多公司自然不會(huì )錯過(guò)這次機會(huì )，紛紛加入到小程序的行列。

　　這對設計和開(kāi)發(fā)而言算是一次挑戰，畢竟要快速上線(xiàn)的步伐沒(méi)有留給我們太多時(shí)間，而市面上的相關(guān)資料都太零碎，在實(shí)際中會(huì )遇到很多的坑，官方文檔也沒(méi)有說(shuō)明。所以我幫大家規避小程序設計中的那些坑。

　　一、標簽欄愛(ài)素顏

　　這個(gè)標準名稱(chēng)叫：標簽分頁(yè)導航，標準高度：98rpx

　　但這塊我寫(xiě)嗨了，就簡(jiǎn)稱(chēng)標簽欄

　　1 偷笑別人花了臉

　　又是一個(gè)安靜的晚上，一個(gè)人窩在公司里設計，我承認這樣真的很無(wú)奈，和其它小程序一樣Yeah～ 聽(tīng)說(shuō)你還在搞什么原創(chuàng )，加個(gè)投影來(lái)點(diǎn)漸變，自以為這樣很棒棒簡(jiǎn)直無(wú)懈可擊。結果開(kāi)發(fā)小哥哥哭了，我相信是很美美的圖，但是開(kāi)發(fā)做不到啊，那種表情可以想象。

　　雖然也可以，做點(diǎn)其它形態(tài)，那就拜托別，讓開(kāi)發(fā)見(jiàn)到到你。如果再能看到你，一定就是這么說(shuō)，原生控件好處多多最好能用他。不用擔心出問(wèn)題，不用維護怕麻煩。很懷念，別懷念，現在我就馬上改回來(lái)。

　　2 圖標只要 54rpx

　　還是一個(gè)安靜的晚上，還是我再做設計，這次我真的按耐不住，和其它小程序一樣Yeah～ 聽(tīng)說(shuō)你又再搞什么原創(chuàng )，中間圖標變大大，破形破形再破形，燃燒開(kāi)發(fā)腦細胞(實(shí)在抱歉，突然被另一首歌**了)

　　但是，要知道，圖標只要 54rpx，小于大于都變形，一定記得規格框。數量只能2至5，多了少了不算數，你只能去改圖標，其它組件說(shuō)了算。

　　二、彈窗不覆蓋導航跟標簽

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

　　三、設計稿最好用二倍圖

　　UI設計師都喜歡用一倍圖，但為什么用一倍圖，方便適配是表面現象，真正原因是開(kāi)發(fā)用的開(kāi)發(fā)工具支持一倍圖開(kāi)發(fā)，開(kāi)發(fā)不用再換算數值了。而小程序的開(kāi)發(fā)工具不支持一倍圖開(kāi)發(fā)，支持二倍圖開(kāi)發(fā)。小程序里的尺寸單位叫 rpx，可以根據屏幕寬度進(jìn)行自適應。在750*1334的設計稿里，1px = 1rpx。

　　如果你心疼你的開(kāi)發(fā)小哥哥，讓他少掉點(diǎn)頭發(fā)，設計稿用 750*1334 的尺寸。但如果你的開(kāi)發(fā)小哥哥之前老欺負你，那，，，你就看著(zhù)辦吧，他都能搞定。

　　四、切圖只需切750的尺寸

　　設計稿用二倍圖做的(750*1334)，只需給一倍的切片;如果是是按一倍圖設計的(375*667)，只要給二倍的切圖。真的不管其它尺寸嗎?不是不想管，而是小程序的開(kāi)發(fā)工具不支持。

　　五、導航欄不要自定義

　　標準高度：128rpx

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

　　這是官方的意思，但是，要改也是可以滴，需要客戶(hù)端版本是 6.6.0 以上，而且下拉會(huì )使整個(gè)頁(yè)面下拉，也不要維護。

　　你會(huì )說(shuō)這不有小程序已經(jīng)使用了嘛，是，這個(gè)小程序叫汪卡，現在，他們已經(jīng)改回來(lái)了。。。所以，你也別難為你的開(kāi)發(fā)小哥哥了。

　　六、視頻限時(shí)多

　　小程序對視頻的支持不是特別的好，原則上在滾動(dòng)控件里不能放視頻，而且微信官方文檔里是這樣要求的。這點(diǎn)我也像我們開(kāi)發(fā)小哥哥求證，確實(shí)是這樣，優(yōu)酷和騰訊視頻都是將視頻固定。

　　但其實(shí)吧，這點(diǎn)已經(jīng)被有些公司攻克了，比如開(kāi)眼跟京東(是的，你沒(méi)看錯，京東)。攻克是攻克了，但是體驗不怎么好。如果公司產(chǎn)品需要放視頻，建議專(zhuān)門(mén)新開(kāi)一個(gè)頁(yè)面，視頻部分最好不要有左右滾動(dòng)。

　　七、一稿適配

　　iPhone X 怎么辦，安卓怎么辦，這些都不用再設計了，開(kāi)發(fā)小哥哥都能搞定，相信他們。