關(guān)于微信小程序UI界面設(shè)計的經(jīng)驗分析

1，微信導(dǎo)航欄，微信導(dǎo)航欄，直接從客戶端繼承。除了導(dǎo)航欄顏色，開發(fā)導(dǎo)航欄不需要也不能自定義。但是開發(fā)需要指定小程序的各個頁面的跳轉(zhuǎn)關(guān)系，這樣導(dǎo)航系統(tǒng)才能合理的工作。微信導(dǎo)航欄分為導(dǎo)航區(qū)、標(biāo)題區(qū)和操作區(qū)。導(dǎo)航區(qū)域控制程序頁面處理。目前導(dǎo)航欄分為兩種基本顏色：淺色和深色。

2.導(dǎo)航區(qū)域(iOS)。導(dǎo)航區(qū)通常只有一個操作，就是回到上一級界面。這是熟悉的，可以理解的。

3.導(dǎo)航區(qū)域(Android)。和IOS一樣，導(dǎo)航區(qū)只有一個返回上一頁的操作。其實這里的iOS也有嚴(yán)格的規(guī)范，Appstore的大部分評論都是提交失敗的。這里有很多可以分享經(jīng)驗的地方。

4.微信中字體的使用與運行中的系統(tǒng)字體一致。常見的字體大小有20，18，17，16，1413，10(pt)。使用場景如下：

5.字體顏色規(guī)范，主要內(nèi)容為黑色，次要內(nèi)容為灰色；時間戳的默認(rèn)值是淺灰色；大段的描述內(nèi)容和它所屬的主要內(nèi)容都用半黑色；

:

小程序如何進(jìn)行規(guī)范設(shè)計

1.本課程主要內(nèi)容【如圖】。

2.首先，我找到一個案例給你看。我們進(jìn)入的第一頁小程序可以指定【如圖】。

3.在750*1334的尺寸中，1px=1rpx，

4.至于導(dǎo)航欄，標(biāo)準(zhǔn)高度是120rpx，不能用漸變或者透明。Titleber按鈕提供了兩種風(fēng)格可供選擇【如圖】。

5.導(dǎo)航欄使用純色，但您可以在下面的橫幅圖中添加其他效果，如漸變[如圖所示]。

6，小程序就像web前端開發(fā)。還是有一些區(qū)別的。

7.標(biāo)簽欄呢？還有一些注意事項，這里列出來【如圖】。

8.剪切圖片時，tab欄標(biāo)簽尺寸為81 * 81 rpx(54 * 54的1.5x切片)，目標(biāo)只需。先導(dǎo)出2x圖片中的1x切片就夠了。

9.彈出窗口不能覆蓋導(dǎo)航欄和標(biāo)簽欄，它們的級別最高。

10.滾動控件不能播放視頻，視頻窗口只能固定。

:

不懂代碼怎么制作微信小程序

1.選模板先挑一個你喜歡的模板開始編輯。

2.只要點擊“添加新貨”，就可以把你所有的商品上架了。如果商品很多，別忘了在【店鋪設(shè)置】中設(shè)置商品分類。

3.選擇你喜歡的主題顏色和導(dǎo)航欄。您也可以自定義顏色。

4.添加或刪除各種板。一小程序商城由各個板塊組成：輪播圖、快捷按鈕、滑動布局、優(yōu)惠活動等等。

5.一篇自己的文章小程序完成于制作。給你剛注冊的微信公眾號平臺的小程序賬號，一切搞定！

:

小程序開發(fā)中需注意的幾點問題

1.選項卡欄的高度和選項卡欄的分頁導(dǎo)航高度是標(biāo)準(zhǔn)化的。一般其高度為98rpx，圖標(biāo)建議為54rpx，這樣不會變形。

2.導(dǎo)航欄不能自定義。小程序?qū)Ш綑诘臉?biāo)準(zhǔn)高度是：128rpx，很輕量，但是也有很多限制。所以，他不能定制，只能換顏色。

3.樣式表不支持級聯(lián)選擇器。WXSS支持以。你可以使用標(biāo)簽選擇器來控制同一個類的樣式組件。