最近設計群里經(jīng)常有人問起小程序設計規(guī)范的問題，雖然官方有提供樣式庫的下載，但是停留在16年版，不是最新的，而設計經(jīng)驗這部分網(wǎng)絡上也沒有比較全面的分享，這促使我停下手上計劃，加快輸出本篇文章，正好近期剛結束幾個小程序項目，總結下經(jīng)驗，并結合微信小程序的官方設計指南，一起分享給大家，希望幫助大家更快速的上手。

隨著2018年小程序的迅猛發(fā)展，小程序現(xiàn)已為各大企業(yè)廣泛采用，“觸手可及、用完即走”的用戶體驗備受青睞，隨之小程序設計也成為設計師的必備技能，那在進行小程序界面設計時，應該如何快速做設計？過程中又要注意哪些問題呢？

接下來是干貨時間～

內(nèi)容大綱

一、小程序設計區(qū)域

二、Nav Bar設計

三、Tool Bar設計

四、Tab Bar設計

五、啟動頁設計

六、加載樣式

七、沒有App如何設計

八、推薦幾個常用的平臺設計網(wǎng)站

對于已經(jīng)開發(fā)了App的產(chǎn)品，在進行小程序設計時需遵守小程序的規(guī)范，同時要保持小程序界面設計與App的風格統(tǒng)一性。

在設計過程中主要注意以下幾點：

一、小程序設計區(qū)域

小程序的“所有頁面”右上角位置，都固定放置了小程序的菜單，在設計界面時需預留出該區(qū)域空間。

二、Nav Bar設計

1、小程序菜單固定樣式

微信提供了深淺兩種配色樣式，以便更好的融合到各種風格的頁面中，需注意保持小程序菜單清晰的辨識度。

線上案例：

2、交互注意事項

如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應盡量避免誤觸的可能。

建議開發(fā)者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。

如上圖，小紅書的自有導航樣式個人不推崇，理由如下：

1）樣式與官方菜單樣式未區(qū)分開，容易產(chǎn)生疑惑

2）NavBar欄兩端對稱在頂部，視覺上顯得過于呆板

微信讀書既有微信線條外框的DNA, 又區(qū)別于官方樣式，是不錯的綜合。以上僅限個人觀點，還需用戶數(shù)據(jù)來客觀驗證。

3、搜索框常見的幾種表現(xiàn)形式

三、Toolbar設計

1、小程序設計規(guī)范

頂部標簽分頁欄顏色可自定義，一般會沿用App的設計風格，以保證兩個平臺的視覺統(tǒng)一性。

2、常見的幾種表現(xiàn)形式

四、Tab Bar設計

1、小程序設計規(guī)范

微信有提供小程序的底部標簽樣式，建議標簽數(shù)量在2-4個適宜。

也可根據(jù)產(chǎn)品需要選擇或者去掉底部標簽欄功能

2、常見的幾種表現(xiàn)形式

五、啟動頁圖標

啟動頁除品牌Logo外，其他元素都由微信統(tǒng)一提供，且不能更改，設計師需要提供2倍和3倍尺寸的Logo即可。

六、加載樣式

1、小程序設計規(guī)范

全局加載是小程序名稱左側的加載圖標。模態(tài)的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，建議謹慎使用。

2、常用的加載樣式

需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。

七、沒有App如何設計

對于沒有開發(fā)App來說，可依據(jù)官方推出的《微信小程序設計指南》來設計，以確?？焖僭O計出符合規(guī)范的小程序。

小程序設計應遵循友好、高效、一致的設計原則，每個頁面都應有明確的重點，清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。

八、推薦幾個常用的平臺設計網(wǎng)站

1、BAT各平臺小程序設計規(guī)范網(wǎng)站

1）微信小程序設計指南：

https://developers.weixin.qq.com/miniprogram/design/

2）支付寶小程序設計規(guī)范：

https://docs.alipay.com/mini/design

3）百度-智能小程序設計規(guī)范：

https://smartprogram.baidu.com/docs/design/overview/introduction/

2、其他常用的設計規(guī)范網(wǎng)站：

1）蘋果-人機界面指南

詳細介紹了ios設計規(guī)范，同時還提供了Ui設計資源下載

https://developer.apple.com/design/human-interface-guidelines/

2）安卓-MD設計指南

https://material.io/design/

3）螞蟻設計

提供移動和Web端的設計組建，還有設計案例和心得的文章供學習

https://design.alipay.com/#ds

4）微信樣式庫

提供微信內(nèi)的網(wǎng)頁和小程序設計規(guī)范

https://weui.io/

作者：孫青Cynthia_Sun

文章來源：https://www.zcool.com.cn/article/ZOTM4NjQ0.html