Stripe 设计主管 Katie Dill 评审初创公司网站

摘要

在本期设计评审节目中，Stripe 设计主管 Katie Dill 对多个用户提交的初创公司网站进行了深度点评。Katie 拥有丰富的设计领导经验，曾担任 Lyft 设计主管和 Airbnb 体验设计主管。评审过程揭示了网站设计中一系列常见但关键的问题。

Katie 首先强调了第一印象的重要性：着陆页必须清晰传达产品的价值主张，明确指出目标用户，避免让访问者猜测。许多网站存在的问题是，用过多的动画或视觉炫技取代了信息的有效传递，导致用户无法快速理解产品或服务。

她反复提及"每个像素都应增值"的原则，并指出了细节上的具体问题，例如：不应为了追求视觉效果而劫持用户的滚动行为；产品截图和视频的缩略图本身必须提供有价值信息；页面信息的层次架构必须清晰，以便为只进行快速扫描的用户服务；从大小写、拼写到阴影等微小的设计细节都会影响用户的信任感。此外，评审还深入探讨了如何优化行动呼唤按钮来提高转化率，平衡 B2B 领域的趣味性与专业感，以及确保设计风格与品牌调性一致。核心结论是：优秀的设计始于对用户需求的深刻理解，而非单纯的视觉装饰。

正文

开场介绍与 Meo 网站初印象

本期的设计评审由主持人 Ain Epstein 在 Stripe 办公室与 Katie Dill 一同展开。Katie 是 Stripe 的设计主管，此前曾在 Lyft 担任设计主管，并在 Airbnb 担任体验设计主管。评审的第一家公司是 Meo，其标语是"预测你的未来健康"。

Katie 的第一反应集中在网站传达的情感基调上。她认为，Meo 的初始氛围显得有些"沉闷"，对于一个关乎未来健康的产品，可能"振奋人心"的基调会更合适。主持人补充道，网站首屏（above the fold）信息量极少，却提示用户"滚动探索"。

当滚动发生时，一张略显怪异的图片放大并占据了屏幕，这一设计引发了 Katie 的批评。她指出，这种设计无异于"劫持滚动"。在网络时代，用户的注意力极易分散，网站的任务是清晰地展示停留的价值。过长的滚动路径和强制性的视觉行为会耗费用户的耐心。更糟糕的是，网站还需要文字指导用户如何操作，这本身就说明其交互设计不够直观。

当页面最终展示"血液检测和个性化洞察，助您活得更健康、更长寿"这一核心信息时，Katie 和主持人一致认为，这才是网站应该开始的位置。这段文案清晰地描述了产品的功用和价值。随后，页面中出现了一个看起来像可滚动轮播图（Carousel）的元素，但其边缘的设计暗示了它可以滑动，实际却并非如此，这进一步造成了困惑。

Meo 的信息层次与细节问题

Katie 接着分析了 Meo 的信息传递架构。她提出了一个关键的审视方法：多数用户只会快速扫描页面，因此设计师必须确保仅通过阅读标题和加粗文字，用户就能大致理解核心内容。若遵循此法审视 Meo，会发现其信息层级存在问题，关键信息不够突出。

在产品使用步骤的说明上，"预约检测（Schedule Test）"和"接受结果"等环节中，缺少了"进行检测（Take the Test）"这一关键动作，逻辑上存在缺失。虽然网站展示了产品截图和使用步骤，这一点值得肯定，但其展示的案例显示用户年龄为 21 岁，这与页面中出现的年长者形象存在矛盾，让访问者难以判断产品的目标受众。

此外，Katie 还注意到"Measure"按钮下方有一个不够精致的投影效果。她强调，这类细节虽小，但往往并非无意为之，会潜移默化地影响用户对产品品质的感知。针对 Meo 创始人提出的"如何平衡引人入胜的故事叙述与转化率"的问题，Katie 认为，他们虽然在整个页面中都保持了行动呼唤按钮（Call to Action, CTA）的可见性，但开场的叙事过于冗长且价值不高，很可能导致用户在感受到价值前就已经离开。她的建议是，从更具体的内容入手，直接说明"这是什么产品？为谁服务？"。

Signoz：清晰开场的优势与页面复杂性

第二家被评审的公司是 Signoz，一个开源可观测性平台。与 Meo 形成鲜明对比，Signoz 的网站一开场就直接用"Open Telemetry 原生日志、指标和追踪，尽在单一窗格"这段文案清晰地说明了产品是什么、有何用，并直接展示了产品界面的截图。

Katie 对此大加赞赏，认为这种做法非常有力，能让用户立刻对产品形成直观认识。她还特别指出，该截图是一个视频的缩略图，但即使不播放视频，静态的缩略图本身也提供了足够的信息价值，避免了那些只放一个空白视频按钮的无效设计。

随后的页面上出现了许多知名公司的标志，这有助于迅速建立信任和公信力。然而，Katie 也指出了一个问题：页面排版中充斥着大量不同字号的文字，信息密度过高，让人难以消化。她再次提出了"每个像素是否都在增值"的反思原则，认为像"这些是信赖我们的公司"这样的说明文字显得多余，因为仅展示标识就足以传达这层含义。页面中复杂的图表和充斥着代码文字的截图，与网站本身的解释性文字产生了视觉竞争，使得整体观感有些"不堪重负"。

优化转化率与用户旅程图

对于 Signoz 创始人提出的"如何提高'免费试用'按钮的点击转化率"问题，Katie 给出了更深层次的建议。虽然页面上按钮清晰可见，价值主张也展示得很好，但提升转化率的关键可能并不在于按钮本身的设计。

首先，她建议团队进行用户测试，聆听首次访问网站的目标用户在使用时自言自语的反应，了解他们对文案的理解是否与预期一致。其次，也是最重要的一点，是绘制完整的用户旅程图（User Journey Map）。设计师需要思考，用户是从哪里、通过何种信息被吸引到着陆页的？着陆页是否兑现了引导链接所承诺的价值？点击按钮后的注册和上手体验是否顺畅？

很多时候，转化率问题并不出在着陆页本身，而在于前后的环节。例如，一个广告承诺了 A 内容，但着陆页展示的是 B 内容，这种脱节就会导致用户流失。从纯视觉角度看，Signoz 的按钮和 CTA 设计已经足够清晰，真正需要优化的，是价值传递的精准度和整个用户旅程的一致性。

Taive：信息过载与品牌一致性

接下来评审的是 Taive，一个为餐厅电视提供增强服务的产品。网站的初始页面充满了动态背景、发光的按钮和方向不一的箭头等大量视觉元素。Katie 认为，虽然设计试图传达信息，但过多的元素导致页面杂乱，给用户带来了不小的认知负荷。

她批评了那些未能增加价值的视觉干扰。例如，背景中移动的图像和意义不明的箭头：一个向上的箭头和一个向下的箭头，点击后可能都导向页面向下滑动，这种设计纯粹是多余的装饰。她重申了"每个像素都应增值"的原则。类似的，导航栏中为不同功能区域添加的彩色框也显得有些多余。

Katie 还对品牌信息的传达提出了疑问。标语"赋予你的电视超能力（Give Your TVs Superpowers）"虽然有趣，但不一定是餐厅老板这类目标用户对产品的描述方式。一个更好的方法是从现有用户那里寻找答案：询问他们如何向同行描述这款产品。好在，副标题"增强餐厅内直播电视，以增加收入并节省时间"迅速点明了产品价值和目标客户，页面上的合作伙伴标识也强化了"餐厅"这一场景。

在细节上，Katie 指出了几个具体问题：
1. 大小写不一致：标题、按钮之间存在标题大小写和句子大小写混用的问题，这种不一致会带来微小的阅读摩擦，进而侵蚀用户对产品的信任感。
2. Logo 含义模糊：Taive 的 Logo 看起来像一台被切开的电视，这个意象可能传递出"割裂"或"破坏"的负面含义，与品牌想要建立的正面形象不符。此外，图标和文字的纵向视觉重心也显得不平衡。

Metriport：动态设计与 CTA 层级

第四家公司是 Metriport，一个通用医疗数据 API。其宣传语"在几秒而非几周内获取全面的患者医疗数据"清晰地传达了其价值主张，Katie 明确表示他们做到了这一点。

网站中使用了一种动态不定形动画元素（Amorphis blob animation），这引发了 Katie 对设计中视觉趋势运用的讨论。她认为，引入动态和美感元素来为网站增添活力本身是件好事，但设计师必须反问自己：这个动画在传达什么？它与品牌的调性是否一致？

她分享了一个有用的方法：在设计网站前，先写下希望用户感受到的几个核心形容词，明确品牌的能量与个性。例如，Stripe 刻意运用丰富的色彩，以此来传达乐观、积极和进步的品牌精神。回到 Metriport 的动画上，Katie 认为它既没有传达出任何特定的品牌特质，也没有展现出医疗数据领域所需的技术实力感，而且动画的边缘被生硬地截断，给人以不完整的印象。

在行动呼唤方面，Metriport 有一个"预约演示"的一级 CTA，但在下方"医疗 API"和"仪表盘"两个产品卡片中，"了解更多"的按钮设计得过于突出，在视觉上抢占了主 CTA 的风头。Katie 建议，应该将这些卡片中的按钮弱化为次级链接样式，以建立清晰的 CTA 层级结构，引导用户优先点击最重要的按钮。此外，一个产品演示视频的缩略图仅仅是下方内容的重复，未提供任何额外信息，这也是一种无效的设计。

Amino Analytica：B2B 的趣味性与可用性平衡

最后评审的是 Amino Analytica，一家蛋白质设计工程公司。他们提出了一个精彩的 B2B 设计难题：一个看起来有趣、个性化、华丽的 B2C 风格网站，能否适用于传统企业级 B2B 工程公司？还是会显得不严肃？

Katie 非常喜欢这个问题。她坚定地认为，B2B 世界绝对可以充满趣味，因为所有产品的使用者都是人，而人需要在工作日中获得一点愉悦感。她欣赏网站鲜艳色彩带来的活力。然而，她也立刻指出了问题的核心：趣味性不能以牺牲可用性为代价。

网站存在多个影响可用性的具体问题：
* Logo 难以识别：设计过于复杂，可读性差。
* 信息层级混乱：标题中的"Adaptation"字号大而"accelerated"字号小，无端地创造了优先级差异。
* 动态背景过于复杂：不断运动和辐射状的图形，加上多种混合使用的字体，使得阅读本身变得困难，干扰了用户理解和学习产品信息。

主持人补充说，他作为首次访问者，完全不清楚这家公司到底为谁服务、解决什么问题。网站几乎没有提供实质内容，而是迫使用户点击"了解更多"按钮才能获取信息。Katie 建议，相比让用户点击，人们更愿意滚动浏览，因此应该将核心洞察和价值主张直接呈现在页面上。

在用户浏览习惯方面，Katie 强调，用户扫描页面时会重点关注加粗和标题文字。她发现，网站的加粗文字中包含"试错"、"随机突变"等负面词汇。这意味着，即使是匆匆一瞥，用户也可能对该公司的技术留下负面印象。正确的做法是突出传递价值的正面词语。总而言之，不要丢掉趣味性，但必须回归根本，让设计更有效地服务于沟通与转化。

结语

评审环节结束，Katie 对受邀表示感谢，并认为整个过程非常有趣。主持人也向 Stripe 提供了场地表示感谢，并希望观众能从 Katie 的反馈中获益匪浅，期待下一期设计评审与大家再见。