关于小程序的界面设计开发的探索

时间 2021-08-13

原文原文链接

关于小程序的界面设计开发的探索

在咱们作不少软件的时候，通常都会前端后端分开，对于咱们通常的开发人员来讲，侧重一个方向居多，如编码的就较少设计UI的设计开发，特别在目前一些APP、Web方面，界面的设计方面更加是比较精细化，也愈来愈须要一些专业化的人员去专门处理。不过话说回来，不少时候，咱们小项目也须要本身可以举得起大刀，用得了菜刀，有时候形势所逼也须要咱们擅长后端开发的人员兼顾UI的开发，通常不太复杂的界面也不用去专门找一个UI设计的人员了。本篇专门针对于小程序的界面设计方面进行一些探索性的研究讨论，介绍小程序界面设计的一些思路和方向。

一、基于快速开发的设计平台

在网上搜索一下，关于小程序零编码的平台如雨后春笋通常，使人应接不暇，各类设计平台的网站使人眼花缭乱，随着这几年H5页面设计的兴起，不少这样的设计平台，换一个马甲就继续囊括小程序的在线设计了，感受上是重复了互联网早期网页设计的那种风潮，小程序零代码？那种是一种比较简单的静态小程序，也多是具备一些表单填写功能的小程序，不过这种需求随着小程序的热度高升而带动了不少这些商机，毕竟通常商家没有一个看着顺眼的小程序，感受就低人一等般，所以这样相似静态页面般的小程序仍是有很大的市场。小程序

而基于这些快速开发的设计平台，只须要缴纳年费，就能够套用模板，快速设计出比较美观的界面了，速度第一啊，通常设计人员搞一套过得去的界面，还须要了解客户需求，还须要设计下，至少一个一天半天，人家直接出效果部署，先后几分钟就搞定，所以有很大的市场。后端

这些开发平台通常不给导出源码（如表明的凡科轻站 http://www.fkw.com/），即便可以使用其余途径下载到小程序的源码，也是高度被高度封装混淆的，很难搞的明白，固然部分样式仍是能够参考下的，这类设计平台的特色是付费模板比较多，并且也比较好看。微信

也有一些可以给导出源码，源码要求符合小程序的标准格式，较好的阅读的（这个表明有意派Coolsite360 http://www.coolsite360.com/wxapp/），基于快速设计小程序界面，基于一些组件模板的开发，不过缺点是组件模板太少，这个应该是基于开发人员的视角来作的，若是可以坚持能够导出文件，且组件内容比较多的话，应该颇有吸引力。app

另一个也值得提一下的是墨刀，这个也是基于设计师的视角来设计小程序界面的，界面元素比较丰富，略显得臃肿一些。这个是一个客户端的软件，安装后能够进行界面的设计，另外能够导出网页文件，但非小程序格式内容，这点作的没有前面说的意派Coolsite360好。ide

基于这些开发，应该是在素材或者模板比较丰富的时候，快速套用一些设计风格比较方便，能够很方便作出比较专业的效果，不过也缺点是受制于人，还有就是要交纳很多的费用，这对于通常小项目或者偶尔作的小程序项目的团队来讲，是一个很多的费用。模块化

二、基于Sketch设计

通常如今设计APP、Web网站、小程序等，均可能会用到强大的设计工具Sketch，这个工具在设计领域用的愈来愈普遍，并且功能确实也够好，不过和其余工具同样，须要花点时间来学习下如何使用，目前微信官方不少资源都同时放出Sketch的设计原稿，能够在网站上下载到的。工具

Sketch 是一款适用于全部设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。学习

Sketch 是为图标设计和界面设计而生的，它是一个有着出色 UI 的一站式应用。网站

Sketch是一个功能强大的、易用的伟大产品，是应用在Mac上的一款设计软件，在UI设计领域有着很好的声誉，只要搜一下这个关键字，不少教程和相关资源都会出现，学习起来也不算太难。

它的界面分为几个区域，以下所示

基于Sketch的设计，咱们也能够用按部就班的方式来组合咱们的设计图，也就是原子设计理念来指导模块化处理。

基于Sketch的开发，须要积累必定的时间，不过好处就是不用受制于一些貌似很强大的界面设计平台，那些早期使用、或者快速交付的时候使用却是能够，长久的话，仍是须要掌握相关的设计知识，利用专业工具快速开发本身的界面。

厚积薄发，慢慢的积累更多一些Sketch的素材以及设计资源，多动手解决问题才是根本。

在小程序的界面设计完成后，咱们就能够结合咱们的后端API，在客户端封装相关的JS的处理，从而实现一个前端后端完整的解决方案。