让我们来做个前端和用户体验的评测——马丁博士

在本系列文章中，我将随机选择一个网站，分析其前端代码（性能和最佳实践）和用户体验，并分享我的发现。通过研究现有项目中的问题，我们可以提升编码和用户体验设计技能，并学习如何避免在自己的项目中出现类似问题。

我在前端开发、电子商务和编写专业级前端审计方面拥有超过 5 年的经验，并且通过进行审计学到了很多东西。

今天，我们将一起看看马丁博士的网站，因为我喜欢他们家的鞋子，而且它还是个电商网站。这真是开启本系列的完美组合！我会介绍一下我在使用这个网站时注意到的一些事情。

我们开始吧！

标题和导航

页眉需要展示页面品牌标识（标志和颜色），并让用户对页面内容以及品牌所属领域有一个大致的了解。虽然马丁博士是一个知名品牌，但页眉很好地为用户提供了与该品牌相关的不同产品（靴子、鞋子、鞋带、工装靴等）的概览。

我发现的唯一问题是页眉占用空间过大。如果页眉不是固定的，而是在用户滚动页面时始终可见，那就不会有问题了。但在较小的移动设备屏幕上，页眉可能会占用高达 25% 的屏幕空间。

导航是网站最重要的元素之一，因此其实现至关重要。然而，桌面端的导航存在一些用户体验问题。首先，当用户鼠标悬停在菜单项上时，超级菜单会立即显示，这会导致用户无意中将鼠标悬停在菜单项上，而实际上并不想打开菜单的情况。

此外，用户需要注意，如果鼠标悬停在主类别上，不小心移到了链接上，可能会切换大型菜单。

类别页面

产品图片制作精良，完美展现了产品特性。我个人更倾向于这种马丁靴的分类页面布局，而不是传统的双栏布局，筛选条件放在侧边栏。由于筛选条件只有十几个选项，所以采用单行下拉菜单的筛选方式是明智之举。

产品卡片本身的设计略显不足。在桌面端，颜色选项会在鼠标悬停时显示，而首页上类似的产品卡片却始终显示颜色选项。如果可以的话，最好能将颜色样本显示在一行中。

此外，产品卡片缺少悬停（聚焦）样式，无法向用户显示哪些是指向产品的链接，哪些不是。

产品页面

大多数情况下，产品页面布局看起来还可以。

当鼠标悬停在产品图片色板时，主产品图片会发生变化，这让我感到困惑。点击图片色板会将用户带到完全不同的产品页面，因此当前页面上的所有更改和预览都与图片色板无关。如果用户选择了鞋码，之后又更改了鞋子颜色（链接到新产品），由于他们跳转到了其他页面，所以之前选择的鞋码会丢失。这一点需要改进，但或许需要重新设计这个部分才能解决。

另外，我发现产品描述有个小问题。文本框太宽，导致在普通屏幕和宽屏电脑上阅读起来比较困难。

查看

结账流程的用户体验设计非常出色。简洁的页眉设计让顾客的注意力集中在结账表单上。这是一种行之有效的提升转化率的方法。

结账表格分为几个步骤，每行只有一个输入框，确保了可读性。

前端性能

根据请求数量，开发人员应考虑合并单个 JS 和 CSS 文件以减少请求数量。此外，还应考虑使用图片懒加载。

以下是我使用马丁博士官网时遇到的一些性能问题。

首页文档大小约为 5Mb，对于首次加载来说，这是一个很大的数据量，尤其是在网速较慢且不稳定的情况下。

每次页面加载时都会出现未样式化文本（FOUT）的短暂闪烁，因此会显示备用字体，直到主字体加载完毕。这可以通过缓存来解决。

此外，图片懒加载机制还可以进一步优化。首屏下方的图片可以采用懒加载方式来提升加载速度。图片文件大小最多可占网站下载量的 50%，因此更严格的懒加载机制或许能够提升性能。

也可以改进阻塞渲染的资源的加载方式，从而缩短网站渲染时间。

结论

马丁博士的网站设计精美，但头部和导航存在一些基本的用户体验问题，需要改进。此外，产品页面上的颜色选择功能也需要以不同的方式呈现。购物车和结账流程做得非常出色——头部和导航元素被精简到极致，使用户能够专注于结账流程；结账表单的输入框被放置在单独的行中，并分为多个步骤，从而提高了转化率。

前端方面，网站首次加载时会下载大量数据（首页约 5MB），可以通过图片懒加载、使用关键 CSS 和改进缓存来提升性能。页面加载时出现的 FOUT 字体也显得不协调，这可以通过缓存字体或使用更好的备用字体来解决。

这些文章都是靠咖啡支撑着写出来的。所以，如果您喜欢我的作品并觉得它有用，不妨请我喝杯咖啡吧！我将不胜感激。

感谢您抽出时间阅读这篇文章。如果您觉得有用，请点赞❤️或🦄，分享并留言。