干貨:小程序開發文檔和設計指南要點詳解

本文主要對微信官方發布的開發文檔和設計指南進行詳解:

小程序開發文檔

小程序開發方式的整體介紹,并提供了一個官方范例。如果是受邀體驗的開發者,可以掃碼進行小程序體驗。

小程序設計指南

小程序設計規范方面的規定,從用戶體驗、元素樣式到排版,頗為全面。這里很能體現微信對于小程序的重視以及它的巨大能力,擔心若貿然開放而不做限定會導致產品碎片化嚴重。

接下來,我們開始介紹兩個文檔的具體內容。

一、小程序開發文檔

文檔中開頭即提到:

支持調用微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。

其實這里舉例的幾個功能,在之前的公眾號開發都能夠實現。對我們來說這句話的重點是“原生”——基本可以判斷例如導航條、按鈕之類的組件其實都是經過微信的中間層進行了原生組件轉化,將有效提高頁面的渲染速度和運行效率,提供更加接近于原生App的體驗。

演示程序里面顯示了幾種新的組件,例如下拉,導航條等。由于小程序還提供了基本類似HTML+CSS這樣的組合語言工具,我們對新的組件并不驚訝。只要你能夠想到,開發者通過微信提供的開發工具應該還能實現更多的組件。

二、小程序設計指南

微信這次的設計規范更加具體深刻,目前尚不清楚官方是否會規定需要按照微信規范去設計、否則不予上架,但我個人覺得隨著生態逐漸成熟,按照微信的強硬管理風格也并非沒有可能。

不過從另外一個方面來看,微信提供了一種稱作WXSS(CSS是它的子集)的樣式定義語言,為用戶提供了非常強的樣式定制能力,即使限制設計規范也應該不會過于死板。

1、WeUI更新

伴隨新的設計樣式和組件,微信官方的前端UI框架WeUI也迎來了重大更新,并擁有了獨立io域名:https://weui.io。

這次更新還同時提供了包括:

Sketch設計控件庫:https://github.com/weui/weui-sketch

Photoshop設計控件庫:https://wximg.gtimg.com/shake_tv/mina/WeUI1.0.psd.zip

通過提供設計源文件,設計師可以更加方便地參與到微信小程序設計過程。

為了更好地進行一致性設計,最新的設計源文件里面還提供了相應的字體文件。中文字體使用了蘋方(iOS)和思源黑體(Android),英文則是SF UI Display(iOS)與Robot(Android)。

2、用戶體驗規范

文檔里面對用戶體驗的規范也做了部分定義,什么是好、什么是不好都有說明,文檔的閱讀體驗尚可。

從設計規范中可以瞥到小程序的一些重要視覺特性: 

3、層級規范

雖然微信的層級簡單也沒有酷炫的原生動畫,但是這次的頁面層級規范依舊讓我想起Google Material Design當初推出時的驚艷感。

與微信自身類似,微信小程序4個層級很容易理解:

Popout:彈框

Mask:遮罩層

Navigation:底部導航

Content:內容 


來源:CSDN

上一篇: 10款絢麗實用的HTML5圖表動畫應用

下一篇: 解讀:八個要點看懂微信小程序

分享到: 更多
ag电子漏洞 快三如何能稳赚不赔 重庆时时五星全天计划 3D万能追号法 海南七星彩计划软件 十一选五稳赚的万能组合 网易彩票app是真的吗 ic飞艇人工计划软件下载 大小彩票计划软件 彩票追号计算器 分分彩app破解 11运夺金任2稳赚秘笈 财神捕鱼 雪缘园即时比分直播 欢乐生肖开奖结果走势图 500元 倍投方案 稳赚