一年半的時(shí)間，我們親眼見證了小程序從萌芽成長(zhǎng)為參天大樹，支撐起我們現(xiàn)今的生活方式，讓我們?cè)谒臉涫a下享受著舒適。很多公司自然不會(huì)錯(cuò)過這次機(jī)會(huì)，紛紛加入到小程序的行列。

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

一、設(shè)計(jì)稿最好用二倍圖

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

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

二、切圖只需切750的尺寸

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

三、導(dǎo)航欄不要自定義

標(biāo)準(zhǔn)高度：128rpx

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

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

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

四、標(biāo)簽欄愛素顏

這個(gè)標(biāo)準(zhǔn)名稱叫：標(biāo)簽分頁導(dǎo)航，標(biāo)準(zhǔn)高度：98rpx。但這塊我寫嗨了，就簡(jiǎn)稱標(biāo)簽欄。

4.1 偷笑別人花了臉

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

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

4.2?圖標(biāo)只要 81rpx

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

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

五、彈窗不覆蓋導(dǎo)航跟標(biāo)簽

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

六、視頻限時(shí)多

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

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

七、一稿適配

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

八、關(guān)于設(shè)計(jì)資源

微信官方雖然有提供，但是更新時(shí)間停留在了2016年。

和現(xiàn)在的區(qū)別就在頂部導(dǎo)航欄上。

下面，我給大家提供一版新的控件

這套控件我是在微信官方文件上修改的，但他們的停留在了 2016 年，沒有現(xiàn)在新版的小程序樣式。最近我正好在看小程序設(shè)計(jì)，便動(dòng)手加上了這些新樣式，雖然不多，但都是很認(rèn)真跟開發(fā)小哥哥對(duì)過的，里面也附帶了官方UI控件，提供給大家。

下載前我再說下標(biāo)簽欄圖標(biāo)切圖的事，控件里給的空間是54 * 54px，但是，小程序開發(fā)需要的是81 * 81px，正好是 1.5 倍。一次給到位，你會(huì)發(fā)現(xiàn)，開發(fā)小哥哥、小姐姐會(huì)突然對(duì)你特別的好。

每個(gè)控件我都創(chuàng)建了復(fù)用樣式，方便大家修改。類別也都分好了，是不是還挺到位的呀～

看到我的逼格黑了嗎？

下載小程序官方設(shè)計(jì)資源和新版小程序控件

總結(jié)

以上是生活随笔為你收集整理的delphi控件切图界面闪烁_小程序设计，不得不说的7个坑 （附资源：新版小程序 UI 控件，Sketch 版）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。