关于小程序的界面设计开发的探索【上海时时乐

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

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

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

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

上海时时乐走势图官网 1

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

上海时时乐走势图官网 2

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

上海时时乐走势图官网 3

 

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

 

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,还添加了一些基本的位图工具,比如模糊和色彩校正。Sketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所有你需要的工具都触手可及。在 Sketch 中,画布将是无限大小的,每个图层都支持多种填充模式;我们有最棒的文字渲染和文本式样,还有一些你一定会爱上的文件导出工具。

2、基于Sketch设计

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

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

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

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

上海时时乐走势图官网 4

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

上海时时乐走势图官网 5

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

上海时时乐走势图官网 6

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

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

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

上海时时乐走势图官网 7

 

 上海时时乐走势图官网 8

 

一款简洁易用的动画屏幕录制软件。licecap 捕捉屏幕的区域并保存为gif动画或lcf格式。该软件直观易用,功能灵活,支持 Windows 和 OSX。其设计思想是轻量级、适当功能、高性能。很多简书上看到的gif图大多都是用licecap生成的。

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

Logoist2是一款Mac上非常优秀的一款图标LOGO、横幅、海报快速制作工具软件内置了大量专业和漂亮的模板,Logoist是一款适用于mac作系统的制作图标软件,由于Logoist软件中就内置了超多的模板和素材,所以用户不需专业的知识就可以制作出你喜欢的图标。

上海时时乐走势图官网 9Axure RP Pro.png

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

上海时时乐走势图官网 10Reveal.png

这里只是贴上一些我平常使用的效率软件,读者如果也有高效、牛逼的软件,请在评论区贴出来,好东西应该一起分享嘛。

教程传送门:Axure教程-Axure中文网

上海时时乐走势图官网 11QuickTime Player.png

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

教程传送门:Sketch中文用户手册 - Sketch中文网

Axure RP Pro是一个产品经理必备的交互原型设计工具,能够高效率制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML 模版等。Axure RP Pro 是专为 Rapid Prototype Design 而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如 UI、UE 等等,并在讨论中不断完善。

上海时时乐走势图官网 12SourceTree.png

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

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

教程传送门:GUI for git|SourceTree|入门基础

作为程序员的我们都有一个理念,那就是什么事怎么简单怎么高效就怎么来。好的工具能够为我们带来更多的产出,提高我们的生产效率。希望大家能够好好的利用一些工具来完成我们平常的开发工作,预祝大家涨工资。。

  • ###### 扁平化UI设计工具--Sketch
  • ###### 原型设计工具--Axure RP Pro
  • ###### Svn代码界面管理工具--Cornerstone

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

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

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

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

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

上海时时乐走势图官网 13Logoist.png

上海时时乐走势图官网 14Charles.png

上海时时乐走势图官网 15Sip.png

上海时时乐走势图官网 16

教程传送门:PaintCode 教程

上海时时乐走势图官网 17CleanMyMac.png

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

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

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

上海时时乐走势图官网 18Sketch.png

上海时时乐走势图官网 19JSONExport.png

上海时时乐走势图官网 20Postman.png

教程传送门:Postman 使用详解

  • ###### Mac管家--Alfred
  • ###### Git代码界面管理工具--SourceTree
  • ###### Logo设计工具--Logoist

PaintCode是个非常棒又小而美的mac程序,主要用途是可以将你的矢量图轻松地转换成CoreGraphics代码,可以很轻松的把代码放在你的iOS app里。(好处当然是降低了图片的使用率,app容量大大减小,而且做动效也容易了很多。)它不单单是把矢量图转换为代码,更重要的是这些代码生成的图像都是动态的,意味着你可以方便的改变他们的颜色,大小,布局。一切能通过代码更改的。

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

上海时时乐走势图官网 21Cornerstone.png

QuickTime 是什么?QuickTime 是一款拥有强大的多媒体技术的内置媒体播放器,可让你以各式各样的文件格式观看互联网视频、高清电影预告片和个人媒体作品,更可让你以非比寻常的高品质欣赏这些内容。QuickTime不仅仅是一款多媒体播放器,还拥有强大的视频录制/剪辑功能。所以Quick Time的亮点不在于"播放电影"而是录制/剪辑QuickTime是Mac自带的软件,所以不用我们再去下载。

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

上海时时乐走势图官网 22PaintCode.png

上海时时乐走势图官网 23licecap.png

教程传送门:QuickTime是什么?QuickTime Player怎么使用?

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

  • ###### Gif生成工具--licecap

教程传送门:licecap for Mac 使用教程

上海时时乐走势图官网 24Alfred.png

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

CornerStone是Mac OS X系统下非常好用的一款svn软件管理工具,当然还有Versions也是可以用的,但是使用起来不如CornerStone好用、强大。注意:CornerStone是收费,如果是公司需要使用到,建议让公司购买软件使用版权,支持正版。本人所用的是公司购买了使用权的版本。当然网上也是有破解版本的。

  • ###### 视频录制--QuickTime Player

教程传送门:用CornerStone配置SVN,HTTP及svn简单使用说明

  • ###### UI与代码转换工具--PaintCode

上面提到的大多数软件都是要收费的,那么问题来了,有破解版吗??有吗?我说童鞋,别忘了咱们这是在天朝。贴上一个网站,上面提到的大多数软件的破解版这里应该都可以下载到 爱情的守望者

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

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

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

本文由上海时时乐走势图发布于web前端,转载请注明出处:关于小程序的界面设计开发的探索【上海时时乐

您可能还会对下面的文章感兴趣: