惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

大猫的无限游戏
大猫的无限游戏
J
Java Code Geeks
小众软件
小众软件
D
Docker
腾讯CDC
H
Hackread – Cybersecurity News, Data Breaches, AI and More
V
V2EX
博客园 - 叶小钗
GbyAI
GbyAI
Microsoft Azure Blog
Microsoft Azure Blog
Stack Overflow Blog
Stack Overflow Blog
B
Blog RSS Feed
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 【当耐特】
IT之家
IT之家
博客园 - 司徒正美
M
MIT News - Artificial intelligence
T
The Blog of Author Tim Ferriss
The GitHub Blog
The GitHub Blog
罗磊的独立博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
L
LangChain Blog
阮一峰的网络日志
阮一峰的网络日志
C
Check Point Blog

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
把图文卡片玩出新花样,我用 DrawLink 做了这些尝试 - 少数派
2024-11-24 · via 少数派

多图预警。如果你懒得读完本文,可以直接前往 DrawL.ink 自己探索。

在这个信息过载的时代,一张精心设计的图片往往比千言万语更有效。研究表明,人类可以在 13 毫秒内识别一张图片的基本内容1。小小的方寸屏幕上,图片总会比文字先抓住我们的注意力。

而链接的信息往往都「隐藏」在背后的服务器中,直接通过文字难以预见其内容,于是就诞生了很多链接可视化方案,包括:

  • Safari 长按链接可以弹出预览小窗。
  • 朋友圈、微博等通过抓取标题、图片等源信息,展示一个固定样式的卡片。
  • 飞书 IM 会对特定链接展示特殊的预览卡片,例如飞书文档、飞书待办等。
Safari 的链接可视化方案

这样做最大的原因就是:对于未知的链接,尤其是缺乏上下文的情况下,人们往往是不愿意点击的。而这样做的一个附加的好处就是:提高链接点击率

本文将结合 DrawLink,与大家一起探索普通的链接的无数种展示与玩法,以图文卡片为载体,将链接背后蕴藏的无限信息通过创意释放。

基础使用

想象一下,当你想分享一个链接时,不再是枯燥的蓝色文字,而是一张精美的卡片。DrawLink 的使用非常简单:

  1. 复制你想分享的链接
  2. 粘贴到 DrawLink
  3. 选择模板风格
  4. 保存或者分享卡片(支持一键复制)

此外,部分模版支持一键添加二维码,可以为图片写入更多的信息,同时适合移动端的传播。如果对自动抓取的链接内容不满意,你还可以手动调整内容。

还有个更快速的生成方法:只需要在任何链接前加上 drawl.ink/#/ 前缀即可快速获得卡片,如下图所示。

通过加前缀快速生成卡片

进阶使用

除了基础的卡片制作,DrawLink 还有一些进阶能力,拓展能力边界,包括:

  • 🔗 生成动态图片直链,可以嵌入 GitHub 的 Markdown 或者你的文章中。
  • ⚡️ 生成动态嵌入代码,可以嵌入 HTML 页面或者 Notion 中(如下图所示)因为图片是动态生成的,所以不用担心链接内容变化。结合 Notion 丰富的布局能力,可以创造出漂亮的 Notion 页面。
  • 🎨 设计稿状态与当前页面链接同步,直接把链接分享给他人,TA 们就可以查看、修改你的设计。下面会介绍一些玩法,就是通过这个方法允许读者自由编辑。

接下来再分享一些我探索出的特殊玩法。

玩法|分享 Apple Music 上的音乐

得益于 Apple Music 优秀的 Web 端体验,你可以直接把歌曲链接放入 DrawLink。

Lover - Taylor Swift

当你听到一首让人心动的音乐,想要分享给朋友时,分享 Apple Music 的链接可能显得很普通(直接在 iMessage 分享除外)。而通过 DrawLink,你可以生成一张包含专辑封面、歌手名称和歌名的精美卡片,让你的音乐分享更有格调。

在微信中的显示效果

👉 点我立即制作同款卡片

玩法|结合古诗词网分享诗词

古诗词的魅力不仅在于文字,更在于意境。你可以将诗词网站的链接转化为充满中国传统美学的视觉卡片。以古诗词网为例,效果如下:

定风波 · 莫听穿林打叶声

👉 点我立即制作同款卡片

玩法|结合 App Store 或 Play Store 分享产品

对于开发者或产品爱好者,分享一个好用的 App 或者产品时,你可以用 DrawLink 生成一张包含 App 图标、名称和简介的精美卡片,让你的产品更惹眼。

目前对 App Store 和 Play Store 的支持已经过我测试,你只需要输入分享链接即可。你还可以输入你的产品落地页,如果 SEO 完善,那么也会有很好的展示效果(即使不完善,你仍然可以手动填入内容)。

FlowFerry from App Store

👉 点我立即制作同款卡片

玩法|结合图片直链美化照片

有时候,一张普通的照片可能缺少点什么。DrawLink 支持图片直链转换,你可以为照片添加精美的边框、文字说明,让照片讲述更完整的故事。

在互联网上看到好看的图片,右键复制图片链接,再粘贴到 DrawLink,就可以立马得到带边框的图片。

图片来源: Unsplash

当然,你也可以上传本地图片,把它作为一个图片美化工具使用,再分享到社交媒体。

👉 点我立即制作同款卡片

玩法|为 YouTube 视频生成卡片

如果你直接输入 YouTube 的视频链接,再搭配使用 YouTube 模版,就可以得到让人一眼看出上下文的卡片,你可以用它分享你自己的视频,或者你喜欢的视频。这个模版对其他链接也适用。

图片来源:YouTube

👉 点我立即制作同款卡片

下一步

对我个人而言,DrawLink 给我带来了许多的练习设计机会。我不是专业的设计师,从一张张的卡片的设计中,我可以不断磨炼自己的设计水平,这也是我的初衷。

而对每一个用户而言,我希望 DrawLink 能帮助你放大链接的价值,让你的链接更惹眼。

我会继续探索一个链接背后的无数种可能,带来更多的卡片设计和体验。如果你有好的设计或者想法,可以直接在评论区告诉我,或者把设计稿发给我,一起来丰富玩法。

移动端海报

目前 DrawLink 已经有了不错的移动端适配,你可以在手机上轻松进行创作。如果我的精力允许,可能还会有个原生 App。

感谢你阅读到这里,我很乐意和你分享一下我的制作过程。

十一月的一天下午,坐地铁的我突然萌生了这个想法,于是我在地铁上思考产品并买下了域名,借助 Cursor,当天晚上就完成了 MVP 的开发以及上线。

之后的几天,我快速完善、迭代,同时在互联网上分享、获取反馈。到今天发文,DrawLink 才诞生不到半个月。现在,AI 可以是每个人的创意加速器。


🧑‍🎨 关于作者

00 后,创业者 & 设计工程师,喜欢做简洁又能改变生活方式的产品。做了 ClipMemo / Dali / FlowFerry / DrawLink / Geekits。目前在字节跳动做软件工程师。

欢迎在评论区交流你对 DrawLink 或者图文卡片的创意和见解!