自 2017 年开始，就有想塑造些优质个人产品；目前仍继续在维护的倾城之链，就是对这一夙愿的实践和坚持；在「倾城」的设计和运营中，接触了蛮多工具型产品，颇受启发的同时，也起到了很大帮助；此篇文章，旨在跟朋友们分享下那些神器、以及对工具 vs 产品、知识 vs 思维相关思考。

超棒的样机生成器

Choose from ready-made templates to generate mockups, screenshots and video previews and for your app. All screenshots are ready for App Store and Google Play

推荐语：Previewed.app：一个非常漂亮的样机生成器网站；它上不仅能够快速生成 App Store 和 Google Play 的应用截图，还可以生成产品的宣传视频和精美的应用样机模板（App Mockup Templates）；在样机模板这块，它支持的设备也比较多样，比如：iPhone、iPad、Mac、Android 等机型；iPad、Apple Watch 等设备；Safari、Google Chrome 等浏览器；以及促销横幅（Promo Banners）、产品搜寻（Product Hunt）等场景。有了这款工具，您即可像让专业设计师一样，处理您的应用程序屏幕截图。坦白说，这是同类型产品中，我所见过最棒的，强烈推荐。

Photopea | Online Image Editor

关键字： Photopea, PSD, XCF, Sketch, Photoshop, Gimp, 图片编辑器, 在线, 免费, Convert

Open and edit PSD, XCF, Sketch (Photoshop, Gimp and Sketch) or any other image files. Inspect PSD and Sketch files. Convert Sketch to PSD. Apply photo effects and filters. A perfect alternative to Photoshop or Gimp.

推荐语：Photopea 是一款免费的在线图像编辑器；它能打开并编辑 PSD，XCF，草图（Photoshop，Gimp 和Sketch ）或任何其他图像文件。 检查 PSD 和 Sketch 文件。 将草图转换为 PSD。 应用照片效果和滤镜。是 Photoshop 或 Gimp 的完美替代品。

鉴于篇幅，本文就暂分享这两款在线 Web 应用；接下来，想通过这两款应用，跟朋友们谈一谈「工具和产品的区别」，以及「知识储量与思维能力之差异」，从而探讨下抉择时之侧重倾向；;如果您对类似网站感兴趣，可以参见先前写的系列文章：

• 欲问美图何处寻？倾城之链有定音
• 如何选定搭建个人独立博客工具
• 超实用图片工具网站，值得典藏

关于工具和产品的区别

产品的发展，将经历了概念、原型、Demo 版本、工具化、产品化等诸个阶段。其中有个简要的说法：Demo 版本，是给研发人员使用； 工具的用户对象是专业人士；产品则是普通用户来用（强调用户体验，简单便捷）。从工具到产品，其实凝聚了最关键的一段路程：如何提供符合用户使用场景；良好使用的产品是需要不断打磨。换句话陈述则是：产品是在降低人类掌握技能的门槛，而工具只是在优化操作体验。

虽然，Photopea 做的已经比较人性化，但非专业人士用起来，依旧很是吃力；自然只能将其界定为工具，同类型的仍有很多，诸如编程语言、汽车、飞机等等。而 Previewed.app，是普通人也可以轻松使用，那么即可将其归结为工具型产品，譬如微信、抖音、支付宝云云。这两者无所谓孰优孰劣，只不过使用成本高低不同罢了。

于芸芸众生，更推荐留意些优质工具；知晓它，才有使用的可能；运用它，方可衍生更多可能；它可以帮你节省效率同时，更能带给你处理问题不同方式、甚至解决问题创新思维，更能拉开你与他人的差距。比如同样是抓取网络简历、处理 Excel 表，如果懂些 Python 或 Node.js， 写个脚本，手到擒来，相比手动操作，要高效快捷。

有朋友可能会觉得，用简单“产品”，也可以完成专业工具所做的事儿，如用手机美图替代 PhotoShop；事实上，这只是能替代些相对简单操作，更高阶任务，仍是遥不可及。如果人类日常生活、工作、研究等，都可以基于轻松即可使用产品完成，那么将可断定人类，已进入相对现在更为崭新的文明。程序员群体，是所有行业平均薪资最高，也是一个有力佐证，毕竟使用编程工具，对于绝大多数人，属于较高门槛一类。

知识储量 VS 思维能力

思维能力：是通过分析（检索）、综合、概括、抽象、比较、具体化和系统化等一系列过程，对感性材料进行加工，并转化为理性认识，从而解决问题的一种能力。

信息时代，知识储量并不是最重要的，Google 和 Wikepedia（国内如无法使用，对应的是某度某狗，和相关性百科） 可以找到绝大多数信息，最重要的是思维能力：分析问题的本源，清晰用力的方向，知道要获取什么、从何处获取、怎么去获取，如何过滤以及处理得到信息，从而找到解决问题方案；人脑要在一些电脑不及的地方拓展，而不是和电脑去竞争计算和存储。

在两千年前的战国时期，荀子就有感悟曰：

吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。

君子生非异也，善假于物也。远古时期，以石头、铁，青铜器为生存工具；文字的发明，使得历史得以记载；…… 工业时代，各类工具如雨后春笋般骤起，使得交流、运输、医疗等更是有了质的飞跃；进入信息数字化时代，工具可谓是伴随于世间生灵左右，甚至“左右”了世间生灵。于此，当不断更新自己思维，立于更高维度来看待它，了解它，运用它，取其精华，成心中所愿；而不是被某些“产品”蹉跎了光阴、夺取了心智，以致辛苦兮连连，却仍总是碌碌而无为。

如果您尚未有良好途径来获取优质工具，不妨关注「倾城之链」：她作为一个开放平台，旨在云集全球优秀 Web 应用，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。目前有提供 Web、小程序、快应用等版本；下面是倾城小程序码：

于 2020 年 08 月，深圳.福田。

原文首发于个人最新博客：静轩之别苑 — 工具 vs 产品 And 知识 vs 思维。

您可能感兴趣的文章

• 超实用图片工具网站，值得典藏
• 为批量图片添加外阴影效果
• 前端项目开发规范意见
• Arya - 在线 Markdown 编辑器
• 前端开发与 DevOps 实践
• Npm vs Yarn 之备忘详单
• 前端利器之 npx 使用纪要
• 关乎 package.json 的详细介绍
• 如何为项目编写良好 README
• 最好的前端黑客秘籍