關于微信小程序UI界面設計的經驗分析

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

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

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

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

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

:

小程序如何進行規范設計

1.本課程主要內容【如圖】。

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

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

4.至于導航欄，標準高度是120rpx，不能用漸變或者透明。Titleber按鈕提供了兩種風格可供選擇【如圖】。

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

6，小程序就像web前端開發。還是有一些區別的。

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

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

9.彈出窗口不能覆蓋導航欄和標簽欄，它們的級別最高。

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

:

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

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

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

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

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

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

:

小程序開發中需注意的幾點問題

1.選項卡欄的高度和選項卡欄的分頁導航高度是標準化的。一般其高度為98rpx，圖標建議為54rpx，這樣不會變形。

2.導航欄不能自定義。小程序導航欄的標準高度是：128rpx，很輕量，但是也有很多限制。所以，他不能定制，只能換顏色。

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