在互联网产品层出不穷的世界里，从网站设计到产品功能，每个细节对于如何创造有吸引力且高效的产品都至关重要。应清华大学学生创业协会的邀请，我与清华大学的大家就自主发展进行了深入的讨论。期间分享的网站设计实战案例，蕴藏着丰富的产品设计思维和技巧。
我们以Chrome浏览器插件的官网设计为例。该产品的功能非常独特。用户只需在浏览器中安装插件，就可以用鼠标在屏幕上画一个圆圈，让AI解读圆圈内的内容，就像“什么都不会点击任何地方”一样。官网的第一个版本是由团队中一位当时还比较初级的年轻学生设计的。页面看似简单，实际上却存在很多问题。
页面上半部分是标题，下面嵌入了YouTube视频来解释产品，蓝色按钮是插件下载按钮。同学们对此展开了热烈的讨论。有人指出，视觉焦点过多，乍一看难以聚焦。在信息呈现方面，可以将文本部分和视频部分分开。先用简洁的文字概括产品，然后用视频为用户提供深入的了解。也有同学认为下载按钮“插件优先”“免费”的文案表达得很奇怪，而且按钮颜色、形状等设计也存在问题。例如，“智慧”一词用白色圈起来。虽然产品经理有意暗示产品的圈子功能，但用户并不理解。这是一种自我推销行为，反而会分散注意力。注意下载按钮。
根据同学们的讨论，我们对官网进行了一系列的优化。在按钮设计上，我们遵循“不要让用户思考”的原则，将下载按钮的文案改为业界通用的“ADD to Chrome”。这就像微信支付按钮使用了“微信支付”四个字并且采用了流行的风格一样。绿色让用户无需思考即可直接操作。
在调整视觉焦点方面，由于网页的核心目的是引导用户下载插件，因此下载按钮应该是最突出的视觉焦点。淡化其他元素，例如将原本放置在顶部以干扰用户点击下载按钮的“ping”和“隐私”等链接移至底部，并删除背景中花哨的模糊效果，使页面更加美观更干净、更简洁。同时，我们采纳了同学的建议，强调“AI导入”，在下方添加了一条深蓝色的线条，与蓝色下载按钮的颜色相呼应，吸引用户对该按钮的注意力。此外，视频也得到了适当的强调。虽然有同学建议视频不要放在一屏上，但让用户第一时间点击视频了解产品并没有太大问题。
经过这一系列的调整，原本不理想的页面变成了视觉引导、效果突出的过关页面。对于去海外做独立开发的人来说，这样的页面才会被认为是出自大师之手。可见，看似微小的调整，实际上可以带来巨大的结果差异。
该产品的支付页面也存在不少问题。原始页面展示了产品免费版和付费版的区别，以及引导用户付费的按钮。有同学提出，产品经理似乎想让用户付出太多，重点关注“尝试基本计划”和“尝试高级计划”按钮。但用户的需求是首先清楚地看到不同价格版本之间的差异，因此应该调整顺序。 ，将版本差异放在顶部，将支付按钮放在底部。同时，按钮的颜色也有讲究。如果主要宣传某项功能，按钮颜色一般最好以白底绿字呈现。
我在进行调整时，坚持让用户做出“无脑”选择的原则。在原始页面上，免费版本前面有两个对号，基本版本有三个对号，高级版本有四个对号。价格不同，会让用户感到困惑。修改后，我主要推荐中间版本，在其上方添加“流行”二字，暗示这是最受欢迎的选择。同时，我将免费版本前面的对号改为十字，暗示用户不要选择免费版本；高级版虽然功能更强大，但只用了两个对号，并注明“与pro功能相同”，以直观地凸显中级版本的优势。另外，其售价仅为九块九，是最便宜的，让用户更倾向于选择中间选项。 。
此外，价格方案的名称也进行了优化。原来“免费”、“基本”、“高级”的命名会让付费“基本”版本的用户感觉自己“很基本”。参考iPhone的命名方式，将“basic”改为“pro”，给用户花钱后专业的感觉； “进阶”改为“终极”； “免费”改为“轻便”，给人一种功能上稍有不足的感觉，从而导致用户回避免费版本。
这些看似微小的改变可能会对实际结果产生巨大的影响。根据苹果行业的经验和直觉，优化前后的页面转化率可能相差30%以上，这意味着整个产品的营收可能会出现大幅波动，由此可见产品设计细节的重要性。
回顾这两个案例，无论是官网设计还是支付页面设计，每一个细节的调整都蕴含着产品设计的思考和原则。在产品设计过程中，不能仅仅依靠主观假设，而应该深入了解用户的习惯和需求，遵循“不让用户思考”的原则，注重视觉引导和信息传递每个元素的效果。
同时，对于产品设计师来说，拆解优秀的产品是提升自身能力的关键。就像我们团队的工作习惯一样，我们会挑选制作精良的产品网站，让成员逐字拆解，分析每一个小元素为什么要这样设计，包括文案、视觉高亮方案等基本功。无论你是创业、做独立开发者、还是担任产品经理，都要多做基础技能训练，从优秀的产品中汲取精髓，不断提升自己的产品设计能力。
通过这两个实际案例的分享，希望能为大家在产品设计的道路上提供有益的参考，让我们更加尊重产品设计，用心打磨每一个细节，创造出更好更受大众欢迎的产品。用户。产品。欢迎大家在评论区分享你对产品设计的看法和经验，共同交流进步！
Share on Twitter Share on Facebook
Indie123
Comments
There are currently no comments