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

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

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

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

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

这些开发平台一般不给导出源码(如代表的凡科轻站 http://www.fkw.com/),即使能够使用其他途径下载到小程序的源码,也是高度被高度封装混淆的,很难搞的明白,当然部分样式还是可以参考下的,这类设计平台的特点是付费模板比较多,而且也比较好看。

image

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

image

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

image

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

2、基于Sketch设计

一般现在设计APP、Web网站、小程序等,都可能会用到强大的设计工具Sketch,这个工具在设计领域用的越来越广泛,而且功能确实也够好,不过和其他工具一样,需要花点时间来学习下如何使用,目前微信官方很多资源都同时放出Sketch的设计原稿,可以在网站上下载到的。

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

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

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

image

它的界面分为几个区域,如下所示

1209576-22edbd0253f51834

基于Sketch的设计,我们也可以用循序渐进的方式来组合我们的设计图,也就是原子设计理念来指导模块化处理。

image

基于Sketch的开发,需要积累一定的时间,不过好处就是不用受制于一些貌似很强大的界面设计平台,那些早期使用、或者快速交付的时候使用倒是可以,长久的话,还是需要掌握相关的设计知识,利用专业工具快速开发自己的界面。

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

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

image
image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 纵观历史,走近世界,才深深领悟到人的渺小。
    如简Jane阅读 110评论 0 1
  • 01 在我的印象中,少年时代的每周末,父母各种大扫除的轰鸣声夹杂着古典音乐的震撼旋律,每每顺着透过窗帘的晨曦...
    Hattie小小阅读 817评论 6 51
  • 清晨,沿着运河走到东门乘车。清风拂面,阳光带着一丝丝秋意穿云破雾而来,此时的太阳仿佛也初醒一般,揉着朦胧的睡眼,轻...
    凡心尘语阅读 1,086评论 3 10
  • 重新听了丫丫老师的30讲音频,让我对亲子时间管理有了一些更加深刻的认识。 第一,榜样的力量。 亲子时间管理得靠全家...
    6f22daf3cea6阅读 208评论 0 0
  • 1《留月》 文/阿雷 满月西关沉, 海天着墨色。 借我一臂力, 九天揽落月。 2 月下 文/小军 衣袂飘飘之何处 ...
    苗苗_2223阅读 312评论 0 1