先看看微信官方文檔的微信小程序設計指南-連接,熟悉下官方的設計指南老是沒有錯的,不期望本身設計的多麼完美,至少和微信的風格差很少就好。小程序
官方文檔還提供了一套可供Web設計和小程序使用的基礎控件庫,說是爲方便設計師進行設計,同時提供方便開發者調用的資源。我們仍是先使用原生的組件來攢一個簡單的小程序吧。先實現功能,在研究美化的事情。微信小程序
先紙筆勾畫一波:微信
先是首頁-打卡頁,頭部顯示當前周的七天,今日下方有小點點來指示;中間就是展現須要今天打卡的全部目標。.net
然後是目標頁,點擊下方的目標按鈕進來是目標列表頁。設計
然後是目標添加和修改頁,在目標列表頁點擊添加按鈕或者目標打開記錄頁點擊編輯按鈕會跳到此頁面。3d
最後是目標打卡記錄頁,在目標列表頁點擊某個目標便可到達此頁面。blog
爲了顯得高大上一點,咱們使用axure來輔助作原型設計。很久以前用過一次,如今早就忘了,正好借這個機會回顧一下。因爲篇幅過長,已經整理到另外一篇文章中,連接。事件
下載一些微信的組件庫,找了一個免費的:連接,加到axure的library中。資源
而後就是搭積木環節,固然積木搭完了以後還得加一些事件,讓其有交互的功能,最終成品以下:開發
發佈到了axure share上了,連接,密碼是123456,能夠訪問後點擊看看。
是否是看起來像樣了?