本文主要針對微信官方發布的開發文件和設計指南進行詳解:
小程式開發文件
小程式開發方式的整體介紹,並提供了一個官方範例。如果是受邀體驗的開發者,可以掃碼進行小程式體驗。
小程式設計指南
小程式設計規範方面的規定,從使用者體驗、元素樣式到排版,相當全面。這裡很能體現微信對於小程式的重視以及它的巨大能力,擔心若貿然開放而不做限定會導致產品碎片化嚴重。
接下來,我們開始介紹兩個文件的具體內容。
一、小程式開發文件
文件中開頭即提到:
支援呼叫微信原生API,可以方便的調起微信提供的能力,如取得用戶信息,本地存儲,支付功能等。
其實這裡舉例的幾個功能,在之前的公眾號開發都能夠實現。對我們來說這句話的重點是「原生」——基本上可以判斷例如導航條、按鈕之類的組件其實都是經過微信的中間層進行了原生組件轉化,將有效提高頁面的渲染速度和運行效率,提供更加接近原生App的體驗。
示範程式裡面顯示了幾種新的元件,例如下拉,導航條等。由於小程式也提供了基本類似HTML+CSS這樣的組合語言工具,我們對新的元件並不驚訝。只要你能想到,開發者透過微信提供的開發工具應該還能實現更多的元件。
二、小程式設計指南
微信這次的設計規範更加具體深刻,目前尚不清楚官方是否會規定需要按照微信規範去設計、否則不予上架,但我個人覺得隨著生態逐漸成熟,依照微信的強硬管理風格也並非沒有可能。
不過從另一個面向來看,微信提供了一種稱作WXSS(CSS是它的子集)的樣式定義語言,為使用者提供了非常強的樣式自訂能力,即使限制設計規範也應該不會過於死板。
1、WeUI更新
伴隨新的設計樣式和元件,微信官方的前端UI框架WeUI也迎來了重大更新,並擁有了獨立io網域:https: //weui.io。
這次更新也同時提供了包含:
Sketch設計控制項庫:https://github.com/weui/weui-...
#Photoshop設計控制庫:https://wximg.gtimg.com/shake...
透過提供設計原始檔,設計師可以更方便地參與微信小程式設計過程。
為了更好地進行一致性設計,最新的設計原始檔裡面也提供了對應的字體檔案。中文字體使用了蘋方(iOS)和思源黑體(Android),英文則是SF UI Display(iOS)與Robot(Android)。
2、使用者體驗規格
文件裡面對使用者體驗的規格也做了部分定義,什麼是好、什麼是不好都有說明,文檔的閱讀體驗尚可。
從設計規格可以瞥見小程式的一些重要視覺特性:
3、層級規格
雖然微信的層級簡單也沒有酷炫的原生動畫,但這次的頁面層級規範依舊讓我想起Google Material Design當初推出時的驚艷感。
與微信本身類似,微信小程式4個層級很容易理解:
更多乾貨:小程式開發文件與設計指南要點詳解相關文章請關注PHP中文網!