对很多独立开发者来说，设计可能是除了营销推广之外第二难的事情。我们也一样，没有专业设计师，不说 Photoshop 了，连 Figma 都用不明白。但 Podwise 的 UI 设计还是收到了很多用户的好评。我们会分享我们是如何来设计 Podwise 的界面和交互，还包括一些营销内容的设计。

设计开发一体。

对于独立开发者或小团队，设计和开发一体是比较高效的方式。这并不只是说由同一个人来负责设计和前端开发工作，而是直接将设计和开发工作一次性完成。得益于现代的开发过程和工具，直接编写 Web 代码并预览效果的效率并不低。哪怕是对能熟练使用 Figma 等设计工具的开发者来说，直接编码并预览的效率也会高于先进行设计再编码实现的方式。也许在进行一些微小调整时，反复的修改代码并预览并不如在设计工具中直接修改来的直观高效。但实际上当设计完成的时候，我们的开发动作也同时完成了。0.6（设计）+ 0.6（开发）> 1（设计开发一体），很简单的道理。

与我个人而言，我会选择可以快速调整（例如 TailwindCSS）并实时预览（可以 hotreload）的技术栈。同时我会使用两个显示器，或左右分屏来提高这个阶段 修改->预览->再修改 的效率。

如何设计功能性界面？

对于产品的功能性界面，我们需要着重设计的是布局和流程，而非视觉效果。原本视觉效果就不是我们擅长的领域，因此我们完全可以将视觉效果交给 UI 组件库来确保下限。前面提到过的 shadcn/ui 、radix-ui themes 和 NextUI 都是非常优秀的带样式的组件库。这些组件库已经基本涵盖了大部分交互形式，我们只需要将它们组合起来。因此留给我们的主要工作就是设计布局和流程了。

设计布局和流程其实是 PD 的工作，而 PD 最重要的就是去理解用户。因此我们的策略就是将自己作为忠实用户，去从目标用户的角度思考这个产品怎么用起来才是最方便的。我会尝试举几个例子来说明。

• 播放器的设计：Podwise 强调阅读，或将阅读作为听播客时的重要辅助手段。因此可阅读区域就显得非常重要，而播放器本身则会被弱化。传统的播客应用往往会将播放器做的非常显眼好看，甚至做成全屏播放器。但 Podwise 选择尽可能减小播放器的大小，将更多屏幕空间留给文字内容。所以不论在桌面视图还是移动端视图下，我们都将播放器设计成了平时收起，但可通过 hover 或点击方式展开的形式。
• 思维导图样式：为播客节目提取思维导图是 Podwise 的亮点功能之一。但标准的思维导图在移动端视图下并不好用，用户必须横置手机并将思维导图全屏才勉强能阅读。为此我们专门为移动端设计了一个树形结构的纵向思维导图样式，提升用户在移动端的阅读体验。在移动端，默认展示的是这个树形结构的思维导图，而在桌面端则默认展示标准的思维导图。

如何设计 landing page ？

相比功能界面，landing page 会是更难以设计的部分。Landing page 的主要目的是将产品能力和优势展示清楚。于此同时，一个设计炫酷的 landing page 对产品传播和使用转化会带来很大的帮助。因此，相较功能界面重在交互体验，视觉样式绝大部分由组件库完成的情况不同，landing page 需要我们自己来完成视觉样式的设计。

在缺乏专业设计能力和设计经验的情况下独立完成 landing page 的设计不是一件现实的事情。但我们可以选择多观摩并借鉴别人的设计，拿来和自己的想法进行组合改良。

除了在平时留意好看的网站设计之外，有不少在线的资源可以帮助我们。

• Tailwind UI：Tailwind UI 是 TailwindCSS 的一个衍生项目，提供了非常多通过 TailwindCSS 实现的复杂组件、页面块或完整页面的模板。特别是在 Marketing 分类下，有很多适用于 landing page 的设计。你可以从里面汲取灵感，复刻你喜欢的部分，或者干脆直接购买源码。
• Flowbite：和 Tailwind UI 类似，Flowbite 也是一个基于 TailwindCSS 实现的组件库。在 Flowbite 的 blocks 菜单下，也有很多适用于 landing page 的页面块可当做参考。
• OnePageLove：onepagelove.com (opens in a new tab) 是一个收集精美设计网站的站点。OnePageLove 收集的基本全都是 landing page ，你可以翻上一整天，从中找出你喜欢的设计。
• Webflow：Webflow 是一个 No-code 网站开发工具，功能强大的同时也有很多模板可供直接套用和修改。No-code 也是一种设计开发一体的方式，如果你倾向于所见即所得的方式，可以考虑。Webflow 本身功能强大但也相对复杂，除了 Webflow 之外也有很多别的产品提供 landing page 的开发和托管，例如 UnicornPlatform 。

用 Keynote / PowerPoint 设计营销图片。

产品的视觉和交互设计可以适用设计开发一体的方式，使用开发者更熟悉的方式，也就是写代码来进行设计。但用作营销的图片就没办法用这种方式了。相比起专业的图片编辑软件，我会更推荐使用 Keynote / PowerPoint 来进行这项工作。Keynote / PowerPoint 的上手难度比专业的图片编辑软件要简单的多，且我们大多数人或多或少都使用过它们（例如写晋升答辩 PPT）。我使用 Keynote 来设计活动头图（例如黑五促销）、社媒广告图（例如小红书封面）、产品介绍图（例如用作 ProductHunt 发布）等。