技術博客——微信小程序UI的設計與美化
在alpha階段的開發過后,我們的小程序也上線了。看到自己努力之后的成果大家都很開心,但對比已有的表情包小程序,我們的界面還有很大的提升空間,許多的界面都是各個開發者分小組開發的,有很多界面的UI格式是不統一的。所以在beta階段,我們展開了對UI界面美化的探討與實現。
微信小程序的UI設計與網頁端有很多相似的地方,但也有他自己的獨特之處,例如導航欄,文字格式等等。要想設計出好看又簡潔的UI,需要不斷的收集資料,測試,改進,我們才能最終使用,由於我們都是第一次接觸小程序的開發,雖然想要設計出高端大氣的界面,讓用戶用起來舒舒服服,但最后設計出來總是讓我們自己都不滿意,所以在Beta階段我們決定下一次大功夫來改進我們的UI界面。下面我就來總結一下我們是如何對我們的UI系統進行完善的。
我們有一位同學專門負責收集優秀的UI界面樣式,方便其他開發者的使用。然而,對於UI界面來說,一萬個開發者就有一萬個自己的想法,要想滿足每一個開發者的要求幾乎是不可能的,我們只能通過討論決定出最好看的UI模板,再交由負責的同學收集這一類的UI樣式,放入到我們的小程序中供其他開發者使用。(對於UI設計的收集UI樣式主要是在這個網站上實現的ColorUI組件庫,這里面有着大量的優質UI設計。)當我們的有了一定的UI樣式之后,就可以將我們原本的UI進行替換了,一開始我們是直接將UI樣式替換到我們的程序之中,但如果是簡簡單單的替換將會出現很多奇怪的BUG。經過了反復的測試和討論,我們才將大部分的UI界面替換成為了理想的界面。
下面是我們改進前后的對比:
商店界面
編輯界面
用戶主頁
最后UI界面的替換是一項工作量非常大的工作,尤其是在我們完成新任務的同時還要完成大量的修改工作。像我們這樣沒有經驗的開發者所作出的前端設計工作有着很大的問題,UI風格的統一應該是在着手開發之前就做好,而不是在開發工作已經過半了,大家發現UI設計有所不足,才一起開討論出最新的模板。所以在以后的開發工作之前,我們的首要工作應該是了解微信小程序的基本設計指南:微信小程序設計指南和微信樣式庫。通過了解這些開發平台為開發者量身打造好的計划並提前制定好我們開發時需要遵守的UI設計規則,而開發者們從一開始開發時就遵守按照規則中的模板來開發,這樣在最終合並時,無論時界面設計還是風格樣式都會更加統一。