2022-11-01 分類: 微信小程序
微信小程序設(shè)計(jì)時(shí)需要了解的六個(gè)坑,你了解了嗎?
經(jīng)過這兩年的時(shí)間,我們親眼見證了小程序從萌芽成長為參天大樹,支撐起我們現(xiàn)今的生活方式,讓我們在他的樹蔭下享受著舒適。很多公司自然不會(huì)錯(cuò)過這次機(jī)會(huì),紛紛加入到小程序的行列。
一、設(shè)計(jì)稿好用二倍圖
UI設(shè)計(jì)師都喜歡做二倍圖,但是在開發(fā)當(dāng)中經(jīng)常會(huì)用一倍圖,因?yàn)殚_發(fā)用的開發(fā)工具支持一倍圖開發(fā),開發(fā)不用再換算數(shù)值了。但是小程序的開發(fā)工具不支持一倍圖開發(fā),支持二倍圖開發(fā)。小程序里的尺寸單位叫 rpx,可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。在750*1334的設(shè)計(jì)稿里,1px = 1rpx。
rpx = px * (目標(biāo)設(shè)備寬 px 值 / 750)
所以說做小程序的UI設(shè)計(jì)稿只需做二倍圖就可以。
二、導(dǎo)航欄不要自定義
標(biāo)準(zhǔn)高度:128rpx
小程序很輕量,同時(shí)也有很多限制。導(dǎo)航欄不能自定義就是其中之一,能改變的只有顏色。
這是官方的意思,但是,要改也是可以的,需要客戶端版本是6.6.0以上,而且下拉會(huì)使整個(gè)頁面下拉,也不好維護(hù)。
三、標(biāo)簽欄有標(biāo)準(zhǔn)
標(biāo)簽欄標(biāo)準(zhǔn)名稱叫:標(biāo)簽分頁導(dǎo)航,簡稱標(biāo)簽欄。
UI設(shè)計(jì)當(dāng)中標(biāo)簽欄也是一個(gè)很出彩的點(diǎn),所以有時(shí)候做標(biāo)簽欄設(shè)計(jì)的時(shí)候?yàn)榱烁袥_擊力就會(huì)給便簽欄加陰影加漸變,中間icon變大、變形等等 各種效果。
在小程序設(shè)計(jì)當(dāng)中雖然這些效果也是可以實(shí)現(xiàn)的,但是為了后期維護(hù)方便,避免小程序規(guī)范更改時(shí)出現(xiàn)錯(cuò)亂的情況,好還是使用微信官方控件。
標(biāo)簽欄標(biāo)準(zhǔn):
1. 小程序標(biāo)簽欄標(biāo)準(zhǔn)高度:98rpx,不能加陰影、漸變。
2. 小程序圖標(biāo)大小81rpx,小于大于都變形,一定記得規(guī)格框。數(shù)量只能2至5。
四、彈窗不覆蓋導(dǎo)航跟標(biāo)簽
在小程序里導(dǎo)航欄跟標(biāo)簽欄的層級是最高的,以至于享受慣最高待遇的彈窗在這里,也要臣服于他們。目前沒有組件可以撼動(dòng)他們的地位。
五、視頻限制多
小程序?qū)σ曨l的支持不是特別的好,原則上在滾動(dòng)控件里不能放視頻,而且微信官方文檔里是這樣要求的。經(jīng)求證,確實(shí)是這樣,優(yōu)酷、開眼和騰訊視頻都是將視頻固定。
六、一稿適配
iPhone X 怎么辦,安卓手機(jī)怎么辦,這些都不用再設(shè)計(jì)了,只要你設(shè)計(jì)好你的二倍圖(750*1334)開發(fā)都能搞定,相信他們。
七、關(guān)于設(shè)計(jì)資源
微信官方雖然有提供,但是更新時(shí)間停留在了2016年,沒有現(xiàn)在新版的小程序樣式,和現(xiàn)在的區(qū)別就在頂部導(dǎo)航欄上。
文章名稱:微信小程序設(shè)計(jì)時(shí)需要了解的六個(gè)坑,你了解了嗎?
轉(zhuǎn)載來源:http://redsoil1982.com.cn/news/210110.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容