阅读 14049

手把手带你撸一个网易云音乐首页-工具篇

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」

前言

俗话说的好:工欲善其事,必先利其器。作为一名程序员,写代码的能力固然重要,但光会敲代码可就太偏科了,所以我们要学会利用身边现有的高效率开发工具来协助开发工作,达到事半功倍的效果。截止到目前,我已经写了4篇实现网易云音乐首页的教程,链接如下:

在这个项目的开发过程中,我用到了一些我经常会使用到的工具,这些工具我觉得值得推荐给每一个开发的程序猿,于是,今天这篇文章我就打算来和大家分享一些开发中用到的高效率神器。

ps: 本篇文章不包括这些开发工具的使用教程,如需了解可以上 YouTube 或者 B 站观看视频教程。

Sketch

image

Sketch 是一款轻量,易用的矢量设计工具。我们可以通过它来设计 App 的原型,然后将设计稿上传到蓝湖(我在下面会介绍到),还可以通过它来制作 @2x, @3x 的切图。

image

下载地址

蓝湖

image

蓝湖是一款产品文档和设计图的共享平台,它具有以下优势:

  • 支持标注,相比其他标注工具,它的标注功能完胜所有, 甚至还有切图自动压缩功能。
  • 整合了设计图的跳转流程展示、设计图历史版本管理、多种状态的 设计图管理等功能。
  • 设计图从 Sketch 、 Ps 中导出后,即可直接在蓝湖上基于设计图快速制作 一个高保真的交互原型,让工程师不用再跑来问你“这个按钮跳到哪啊”, 同时支持手机上和微信中预览、操作和分享。
  • 支持 Word / Excel / PPT / PDF 在线预览和共享。
  • 设计图更新或在讨论中被 @ 后可以自动通知团队成员,支持微信推送。
  • 成员、团队权限分级和管理,保证了设计稿的准确性和安全性。
  • 可以部署到自己公司的服务器上,除了速度更快,也彻底解决了设计图等文件的安全风险问题。

image

下载地址

Figma

image

Figma 和上面所说的 Sketch 一样,也是一款非常好用的 UI 设计工具,它俩的功能很相似。但是 Figma 相比于 Sketch 来说它的优势在于它不局限于某一平台,因为它是基于浏览器的,而 Sketch 只支持在 Mac 平台使用。

Figma 还提供了许多强大的功能,工程师可以将设计图导出为所需要的任何平台代码(包括 CSS、iOS、Android 样式),而且设计和协作可以是同时进行的,任何人都可以在设计图的任何地方进行标注和评论。

下载地址

iconFont

image

iconFont 是阿里巴巴提供的矢量图标库,可以为用户提供矢量图标的下载,在线存储,格式转换等功能。如果你正在为缺少合适的矢量图素材而烦恼的时候,不妨上这个网址去搜索一下,说不定有意外的惊喜哦!

Postman

image

Postman 是一款功能强大的 API 开发测试工具。通过它你可以快速轻松地发送 REST、SOAP 和 GraphQL 请求。在与服务端调试接口的时候,我们可以通过该工具来模拟网络请求,并查看返回的数据,来验证接口是否调通。

下载地址

Sublime Text

image

Sublime Text 是一款强大的跨平台编辑器。单从界面上看非常简洁,可以说让人一见倾心的感觉,完全符合码农的口味~~。

Sublime Text 提供了安装插件的方式,可以任意安装你想要的插件,功能强大到可以用一句话总结那就是 “只有你想不到,没有它做不到”。它支持跨平台,包的体积小,Sublime 占用的内存很小,且运行速度超快!可以多屏显示,Sublime Text 编辑器可以显示多个屏幕,方便你编写及查看对应的文档代码,如果你屏幕够大,分四个屏同时开发,那工作效率可谓杠杠滴~。还可以快速编写代码,要是 sublime 编辑器安装了 emmet 的插件,写 html 那速度可谓是空前绝后,三下五的功夫就能编出一整段 html。

下载地址

XMind

image

XMind 是一款非常出色的思维导图制作软件,作为一款能有效提升工作和生活效率的生产力工具,XMind 具有以下优势:

  • 它是非常实用的思维导图软件,高效易用的可视化思维软件。
  • 通过 XMind 可以随时开展头脑风暴,帮助人们快速理清思路。
  • 可以绘制思维导图、鱼骨图、二维图、树形图、逻辑图、组织结构图等。
  • 可以直接把做好的思维导图导出成 word、excel、pdf,PPT 等。

下载地址

Iterm2

image

iTerm2 是一个用来取代系统终端的命令行工具,功能比原生的终端程序强大很多。我们可以为 iTerm2 设置背景图,并切分出多个窗口来使用,这样看上去是不是高大上很多。

下载地址

GitHub Desktop

image

GitHub Desktop 是 GitHub 官方的代码同步工具,想必大家也都非常熟悉了,类似的还有 Source Tree,这里就不多做介绍啦!

image

下载地址

讲在最后

即使我们作为程序猿需要单打独斗的能力,但是我们也需要借助外部的力量,来将自己的战力值推的更高,工欲善其事必先利其器,如果上面的工具恰好能够帮助到你,那本篇文章的目的就达到了。小伙伴们如果你们手上也有高效率的开发工具,不妨在评论区里与大家交流一下哦。

往期文章:

请你喝杯 ☕️ 点赞 + 关注哦~

  1. 阅读完记得给我点个赞哦,有👍 有动力

  2. 关注公众号--- HelloWorld杰少,第一时间推送新姿势

最后,创作不易,如果对大家有所帮助,希望大家点赞支持,有什么问题也可以在评论区里讨论😄~

文章分类
前端
文章标签