关于小程序的界面设计开发的探索,iOS工程师M

作者: 前端知识  发布:2019-12-07

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

金沙澳门官网网址 1

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

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

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

这些开发平台一般不给导出源码(如代表的凡科轻站

金沙澳门官网网址 2

也有一些能够给导出源码,源码要求符合小程序的标准格式,较好的阅读的(这个代表有意派Coolsite360 

金沙澳门官网网址 3

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

金沙澳门官网网址 4

 

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

 

iOS工程师一直都是那么的高逼格,用的是Mac电脑,耍的是iPhone手机,哇咔咔~~ 但是,作为一名iOS开发工程师,我们除了高逼格外,还必须是全能的。你不会点UI设计、不会点后台语言、不会点安卓开发...那都是不可能的事情。 好了,今天咱们不是来吹牛逼的。而是给大家添虎翼的。做了iOS开发也有一年多了,懂得了工欲善其事,必先利其器的道理。Mac上有很多好用的软件,有的能提升我们的开发效率,有的能提升我们的工作效率。今天我就来介绍一些Mac上对我们开发有帮助的软件。

2、基于Sketch设计

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

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

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

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

金沙澳门官网网址 5

金沙澳门官网网址 , 它的界面分为几个区域,如下所示

金沙澳门官网网址 6

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

金沙澳门官网网址 7

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

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

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

金沙澳门官网网址 8

 

 金沙澳门官网网址 9

 

这里介绍的软件都是我日常使用的,在此记录并分享出来,如有更好用的软件也可以在评论区介绍给我,感激不尽。

  • ###### Mac管家--Alfred

金沙澳门官网网址 10Alfred.png

记得以前在 Windows 平台有一个叫 Everything 的软件,主要特色就是输入关键字后能够快速得定位出你想要的文件。今天我们要介绍的 Alfred 也有和它有一样的功能。当然,如果只是简单的搜搜文件那也就称不上「神软」了。Alfred 是一个用键盘通过热键、关键字、自定义插件来加快操作效率的工具,它不但是搜索工具,还是快速启动工具,甚至能够操作许多系统功能,扩充性极强,如果有兴趣应该还可以写一个煮咖啡的插件出来。简单点说就是使用了 Alfred 后你就可以丢掉鼠标了!

教程传送门:从零开始学习Alfred:基础功能及设置

  • ###### Mac清理工具--CleanMyMac

金沙澳门官网网址 11CleanMyMac.png

作为一名iOS开发工程师,每天Xcode产生的缓存数据可以达到1G之多。Mac用户认为电脑不需要清理垃圾,但想法是好的。当你有一天发现你的电脑运行速度缓慢,而且时常卡顿,就是你电脑的内存不够用了。对于128G内存的电脑来说,这简直是个痛苦。终于有一天我发现了CleanMyMac,它是一款界面简洁,清理高效的清理工具,每天上班的第一件事就是用它清理一下电脑,那么接下来的一天你就不用愁了。

  • ###### UI调试神器--Reveal

金沙澳门官网网址 12Reveal.png

Reveal是一个界面调试工具。使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面。它类似Chrome的“审查元素”功能,我们不但可以在运行时看到iOS程序的界面层级关系,还可以实时地修改程序界面,不用重新运行程序就可以看到修改之后的效果。

教程传送门:iOS开发中集成Reveal

  • ###### 接口调试--Postman

金沙澳门官网网址 13Postman.png

在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具。Postman就是一种网页调试与发送网页http请求的chrome插件。我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。

教程传送门:Postman 使用详解

  • ###### 网络拦截--Charles

金沙澳门官网网址 14Charles.png

Charles是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。除了在做移动开发中调试端口外,Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能,Charles 还可以分析 Https 协议。很多iOS的高仿应用都是用Charles来拦截获取网络数据的。

教程传送门:Charles 从入门到精通

  • ###### 取色工具--Sip

金沙澳门官网网址 15Sip.png

Sip 是全栈开发人员的利器,用户只需轻点鼠标便可快速取得屏幕当前位置的颜色值,并将数据自动存到剪切板,方便随时粘贴出来。支持 CSS、UIColor 等多种格式。

  • ###### JSON生成数据模型工具--JSONExport

金沙澳门官网网址 16JSONExport.png

JSONExport 是一个 Mac OS X 应用,用 Swift 编写。它可以将 JSON 自动生成指定语言的Model类代码,包括属性,属性的getters和setters方法等。。不管你json数据多复杂,里面嵌套多少层,该工具都可以将它转换出来,这对于我们开发生成数据模型节省了不少时间。JSONExport支持OC、Swift、Java等语言。

  • ###### Git代码界面管理工具--SourceTree

金沙澳门官网网址 17SourceTree.png

SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作。同时它也是Mercurial和Subversion版本控制系统工具。支持创建、提交、clone、push、pull 和merge等操作。

本文由金沙澳门官网发布于前端知识,转载请注明出处:关于小程序的界面设计开发的探索,iOS工程师M

关键词: 金沙澳门官网

上一篇:工具相关
下一篇:没有了