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

前言

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

• 手把手带你撸一个网易云音乐首页（一）
• 手把手带你撸一个网易云音乐首页（二）
• 手把手带你撸一个网易云音乐首页（三）
• 手把手带你撸一个网易云音乐首页 | 适配篇

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

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

Sketch

image

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

image

下载地址：https://www.sketch.com/

蓝湖

image

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

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

image

下载地址：https://lanhuapp.com/

Figma

image

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

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

下载地址：https://www.figma.com/downloads/

iconFont

image

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

Postman

image

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

下载地址：https://www.postman.com/

Sublime Text

image

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

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

下载地址：https://www.sublimetext.com/download

XMind

image

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

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

下载地址：https://www.xmind.cn/desktop/thank-you-for-downloading/

Iterm2

image

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

下载地址：https://iterm2.com/downloads.html

GitHub Desktop

image

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

image

下载地址：https://desktop.github.com/

讲在最后

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