乾貨:小程式開發文件和設計指南要點詳解

高洛峰
發布: 2017-02-23 14:42:25
原創
1763 人瀏覽過

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

小程式開發文件

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

小程式設計指南

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

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

一、小程式開發文件

文件中開頭即提到:

支援呼叫微信原生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中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板