微信小程序設計時需要了解的六個坑，你了解了嗎？

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

一、設計稿好用二倍圖

UI設計師都喜歡做二倍圖，但是在開發(fā)當中經常會用一倍圖，因為開發(fā)用的開發(fā)工具支持一倍圖開發(fā)，開發(fā)不用再換算數值了。但是小程序的開發(fā)工具不支持一倍圖開發(fā)，支持二倍圖開發(fā)。小程序里的尺寸單位叫 rpx，可以根據屏幕寬度進行自適應。在750*1334的設計稿里，1px = 1rpx。

rpx = px * (目標設備寬 px 值 / 750)

所以說做小程序的UI設計稿只需做二倍圖就可以。

二、導航欄不要自定義

標準高度：128rpx

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

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

三、標簽欄有標準

標簽欄標準名稱叫：標簽分頁導航，簡稱標簽欄。

UI設計當中標簽欄也是一個很出彩的點，所以有時候做標簽欄設計的時候為了更有沖擊力就會給便簽欄加陰影加漸變，中間icon變大、變形等等 各種效果。

在小程序設計當中雖然這些效果也是可以實現的，但是為了后期維護方便，避免小程序規(guī)范更改時出現錯亂的情況，好還是使用微信官方控件。

標簽欄標準：

1. 小程序標簽欄標準高度：98rpx，不能加陰影、漸變。

2. 小程序圖標大小81rpx，小于大于都變形，一定記得規(guī)格框。數量只能2至5。

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

在小程序里導航欄跟標簽欄的層級是最高的，以至于享受慣最高待遇的彈窗在這里，也要臣服于他們。目前沒有組件可以撼動他們的地位。

五、視頻限制多

小程序對視頻的支持不是特別的好，原則上在滾動控件里不能放視頻，而且微信官方文檔里是這樣要求的。經求證，確實是這樣，優(yōu)酷、開眼和騰訊視頻都是將視頻固定。

六、一稿適配

iPhone X 怎么辦，安卓手機怎么辦，這些都不用再設計了，只要你設計好你的二倍圖（750*1334）開發(fā)都能搞定，相信他們。

七、關于設計資源

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

本文名稱：微信小程序設計時需要了解的六個坑，你了解了嗎？
本文網址：http://www.hntjjpw.com/news10/210110.html

網站建設、網絡推廣公司-創(chuàng)新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有微信小程序等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯