我用 Figma/Figside/浩客无代码搭了个人官网

我用 Figma/Figside/浩客无代码搭了个人官网

02 月 02 日

编注：

本文是少数派 2022 年度征文活动的入围文章。本文仅代表作者本人观点，少数派对标题和排版略作调整。

今年我们采用了更加依赖用户反馈数据的奖金结算机制，充电、收藏和阅读量都将不同程度地影响文章的最终排名与稿酬倍率。如果你喜欢这篇文章或内容对你帮助，请尽量通过充电、收藏或评论等方式表达你的支持与赞赏。

2021 年中，飞书开始掀起一股「个人说明书」的浪潮，身边很多朋友们都写了又好看又清晰的说明书。为了证明自己也是当代网上冲浪的弄潮儿，我也加入了这一队伍。

写个人说明书的好处颇多。大家通常会把自己所有对外展示的一面都写进去，这样在职场中能快速建立基本认识，让对方了解自己的业务范围和喜好，避免一些开场尴尬，也基于这些认识更快建立信任关系。非常符合当代高效有效社交的趋势，所以备受爱打直球的朋友们喜欢。

大多数朋友的个人说明书都是在飞书文档或者 Notion，再买个属于自己的域名定向。我第一版的个人说明书也在 Notion，直到我发现了一个免写代码将设计稿转前端静态页面的代码方法之后，这个人就开始卷了。

先上线官网

众所周知，想要拥有一个静态页面，是需要手敲 HTML 和 CSS 的，甚至到现在都没有什么工具可以一键将设计图转代码。

即便是强如 Figma 辅助生成的 CSS 在开发者眼里也是用处不大。所以当我发现了一个号称可以直接把 Figma 设计图转前端代码的插件——Figside 发出了赞叹：简直是不会写代码人的福音。

于是仅一个周末时间，我也可以像别人那样，拥有一个属于自己的个人官网：https://cola1106.com/

在 Figma 中做简单的自适应

Figside 支持大中小屏的自适应，所以在 Figma 中需要将所有的 frame 都设为 Auto Layout，那么这样就可以实现按照规则进行适配。

具体的教程不在这里介绍，可以在 B 站看这个视频：「Figma 新功能 | 自动布局 4.0 更新介绍（Auto Layout 4.0）」

除了设置 Auto Layout 之外，还可以在 Figside 插件中设置 frame 在哪些尺寸时可见。

比如下图中我设置了小图在 desktop 和 tablet 隐藏，下面的第二张大图在 mobile 隐藏。那么效果就是在 PC 浏览器中是图文左右结构，在中小屏图文是上下结构。

Figside 还支持将 Notion page 嵌入frame，那么博客内容就可以靠 Notion 进行管理了。

托管到 Vercel 和 GitHub

Vercel 能够免费提供网站托管服务，类似 GitHub Page。在 Figside 中生成预览后，我就将生成的代码用 Vercel 托管了。接下来就可以访问域名来看成果了，几乎和设计图一模一样。

不过仍然有一些小 bug 需要自己在设计图中对应调整。但别抱希望 Figside 会修复，因为更新日志中显示，2021 年 3 月产品发布后只更新了几个月，到 2021 年 9 月之后就再也没有更新了。

再用浩客看看浏览量

个人官网发布之后，我开始好奇，想知道有多少人访问过，他们都是从哪里了解到我的。如果使用传统的方法，我可能要寻找外援帮我做点代码工作。恰好去年 12 月初时候，畜底反弹另一位女明星慌慌告诉我，他们做用户体验分析的产品「浩客」可以白嫖使用了，白嫖大户当然不能放过这个羊毛。

浩客出品自金数据团队，一如金数据「人人可用」的理念，拉低了官网数据分析的门槛，也让访问数据和体验反馈变得人人可用。

没有代码基础的我，只是复制了浩客生成的 SDK 代码，按帮助粘贴到网站的<head>中，就看到问卷工具在我的官网工作了。

接下来后台概览中开始逐渐产生访问数据了。

对我的读者朋友们，我也知道了其分布情况。很好，广东和北京朋友们上大分。
这种简单的访问数据以外，很多企业场景下非常需要一个反馈入口来和用户建立联系，所以基于团队擅长的表单技术，浩客也「子承母业」地拥有了还不错的表单编辑能力。（🐶）

一开始我无脑新增了个「净推荐值」和「从哪里了解我」的问题：

放上去一两周后发现，填写率惨不忍睹，不到 8%。我回想了下，我看到一些产品的官网时，如果第一个问题就问我是否愿意推荐给别人，我会立马关掉这个弹框。

于是我把第二个问题和第一个问题的顺序做了交换，从更容易回答的问题开始，这样即便不回答第二个难回答的问题，我也能顺利先拿到来源的答案。果然，回答率拉上去了，现在在 10.8%。
写到这里的时候，很难不继续围绕浩客再展开一点关于数据价值话题。所以以上是搭建个人官网的攻略。下面我要开始夹带私货了（🐶）

数据的价值

数据对谁有价值

年前在和慌慌讨论，什么角色会关注数据，是产品经理吗？我想到去年在给技术服务部门做「售后工单管理系统」的案例可以来解答这个问题。（以下内容选自本人小报童「甲方视角」）

我们公司国内的技术服务部大概有两百人，每个省份都有区域办事处，主要业务是做产品卖出去之后的现场问题支持，也会包含一些工程实施的技术支持。

工单系统的背景是，技术服务部没有工具能够明确度量技术支持工程师的工作量和服务质量，而技术支持工程师会因为超长时长或异地支持提交补助。

因此业务方抱着「提升服务质量以增加产品复购率」和「明确人效以掌握区域实际支持工作量，合理进行人力资源分配来实现降本」的目标，提出工单系统的需求。

最近也读到一篇高成资本发布的《高成资本洪婧：SaaS 企业成长中的十大陷阱》，其中有一条关于 SaaS 企业的四种价值创造对客户的优先级：

能够发现，这两个目标正好对应的是「创收」「降本」。

中信证券也在美股互联网行研报告《降本增效：美股互联网巨头 2023 年利润弹性主要来源》中提出「业务聚焦、降本增效实现利润率的改善是当下美股互联网巨头最为可行的举措」的观点。

最近在开年度大会时，技术服务部使用数据报表的分析来呈现「人效」「提升服务质量」相关的业务价值（涉及实际业务，此处不便展开）。所以这一切均是由业务部门触发。

其中，关于分析产品售后问题，是属于 ITR （Issue To Resolved）流程，这个流程和 LTC（Lead To Cash）、IPD（Integrated Product Development）流程在华为属于三大流程。

在 ITR 流程中，需要售后支持反馈问题是「客户不能用」或「客户不会用」，最后反馈给产品线，而产品经理不会主动关心这些，都是技术支持给的输入。「客户不能用」对应的是产品质量，主要会传递给「测试」和「生产」进行反馈。「客户不会用」则是传递给产品设计。

给产品线压力的除了公司总部的高管，就是销售和技术服务部这样的业务部门，因为产品有问题是跟他们的工作量、他们的绩效直接相关的。

所以最先关注数据的，可能是运营、市场、销售这类业务角色。

问卷设计

明确数据价值后，接下来可以考虑问卷设计的问题。无论是从个人角度还是企业产品角度，总会存在「反馈难」的问题。

之前在做产品经理的时候，也会在产品上放一个显眼的「反馈」的按钮，希望连接用户看看产品还有哪方面还在被吐槽。选择反馈按钮的方式是因为当时产品没有客服的入口，用邮箱异步回复也不会占用过多精力。

「反馈」按钮发布之后，在后台收上来的问卷都是「我遇到了一个问题」，有的问题甚至严重阻碍了用户的使用，但令人费解的是，推荐值问题上大部分仍然选择了 8 分以上。技术支持同事对这样现象的猜测是，我们的用户可能存在「我给你好评，你快解决我的问题」的心理导致了虚假打分。

而浩客这种非模态框的主动询问形式也许在一定程度上避免了「迫于使用，虚假打分」的情况，因为触发时机从用户产生问题的「主动」行为变成了询问用户的「被动」行为，在这两种时机下，后者的真实性是要高于前者的。

不过仍然不能避免「用户不愿意反馈」的情况，除非使用工具的用户主动去思考问卷设计是否存在问题，做什么才能提升填写率。目前浩客还没有提供这样的 case 供参考，很多产品也如浩客一样，做服务只做到了一半，仅提供了工具能力，没能在其他方面辅助客户业务的成功。

所以如果数据不能很好收集上来，就会有这样一个的直观感受：业务想拿到反馈 -> 用户基于各种原因不想反馈 -> 反馈效果不好没数据 -> 业务觉得反馈工具对自己没用。

数据服务

收集上来数据之后的服务也是断开的。概览中 UV、PV、跳出率等数字由于目前无法和市场事件关联，导致这些数字背后都没有什么意义，无法衡量是什么市场事件带来了浏览、注册转化，不能让数字作为下一步策略的指导。

不止基础的浏览数据，问卷仍然存在类似的问题。虽然浩客提供了一些模板，但模板背后如何有效被使用就不在服务的范畴了。

模板中包含一些听起来相当专业的名称：NPS（净推荐值）、CSAT（满意度）、CES（费力度）。这些看似简单的问题背后，实则是方法论。

由此我想到年前组织了一次「🎭聊点 PLG」的第三次团建，其中有个话题聊到 BeeArt ，这是 IT 咨询公司 thoughtworks 内部出的一款白板工具。（以下内容节选自我的小报童「甲方视角」|《模板：领先半步是效率，领先两步是启发》）

群里一位朋友的观点认为，「它不止是在卖工具，而是把敏捷开发的各种模板通过白板进行销售。和国内的博思白板对比，有点像是 GrowingIO 和神策数据。一个是卖策略的咨询服务时顺便卖产品，另一个是在产品中卖咨询。」

我认可朋友的观点，thoughtworks 本身交付项目很多，那么在交付过程中，可能就是在销售和用户教育的过程。他们有两个销售优势，一方面，客户深度参与教育形式天然比其他形式好很多，另一方面，用户教育成本算进了他们咨询中。所以这样的产品在 IT 咨询公司来做，看起来是要比其他公司来做能赚到大 KA 的钱。

不得不说，这个产品在 thoughtworks 孵化地非常合理。

其模板的作用则成为了知识或者方法论的载体，所以 BeeArt 属于服务产品化的体现，定价策略也会偏向大 KA。

虽然他们官网的文案写的不那么好，如果他们本身是强销售导向面向大 KA 的话，官网写什么文案可能都影响不大。

但如果从 SLG 的角度来讲，BeeArt 不应该只做 Freemium，而是至少先做 Free Trial。Freemium + feature paywall 通常比较适合 PLG，而 BeeArt 走 PLG 可能打不过通用场景的博思白板。尤其是当语雀、飞书文档（据消息说年后可能会公测）都内置了白板。

针对不同成熟度的市场，产品能做的都不一样，借用神策数据 CEO 桑文锋在 onboard! 播客节目中讲到的：

明确目标客户后，一定要分清楚你到底是卖的奶瓶还是卖的保姆，到底卖的是的服务还是你的产品？

卖产品还是卖服务，这是在 PMF 不得不思考的问题。如果是卖产品，当客户明确需要某个工具，你们产品还不错时，就可以为其买单。这背后的要求是，客户对需求明确，产品本身具备竞争力。而卖服务则是客户可能有需求，但不知道产品如何为其产生价值，这就需要产品具备竞争力之外，还需要为客户提供足够的帮助，让他感受到实实在在带来了业务价值。

所以如果工具是用来承载知识或是方法论，那么必然要将很大精力放在用户教育，帮助客户业务成功，无论方式是「销售演示」是「用户案例」还是其他。

这篇文章在后半部分可能相对主观，仅代表个人立场。如有不同意见，欢迎大家来交流。

另外有两段引用自小报童专栏「甲方视角」，这两段均产生于「🎭聊点 PLG」小群的线上团建，如果你对社群也有兴趣，可以点击原文或在文末 References 查看链接了解。

最后再回归下主题，我的个人官网地址是：https://cola1106.com 欢迎查看。

> 下载少数派 2.0 客户端、关注少数派公众号，解锁全新阅读体验 📰

> 实用、好用的正版软件，少数派为你呈现 🚀