一个Web程序员对锤子官网的吐槽

问题页：

http://www.smartisan.com/#/os （除第一部分的大部分）

“Smartisan OS 的桌面再现了经典的九宫/十六宫格设计”这段文字的“字体列表”是这样的：

font-family: 方正兰亭黑,STHeiti,华文黑体，”Microsoft YaHei”，微软雅黑,STHei,华文黑体，”Helvetica Neue”,Helvetica,sans-serif;

源代码虽然是用户不会看到的东西，但它却影响了所有用户最终的显示效果，锤子官网的这段代码其“业余”程度让人震惊。

具体的问题如下：

（1）使用了中文来作为字体的名称：

这可能会导致非常多的非中文系统和非中文浏览器没法正确查找到对应的字体

（2）使用了字体的“显示名称”而非“字体名称”来书写：

“方正兰亭黑”是字体在用户电脑上显示的名称，如果希望浏览器准确对应到该字体的话，对应的字体名应该是“FZLanTingHei-R-GBK”。

（3）使用了大部分人电脑里没有安装的字体作为最优先字体来显示：

“方正兰亭黑”是一款付费字体， Windows 系统的电脑并没有预装这款字体，全中国恐怕也就只有几个设计公司的电脑最终能看到“你们最想传达的视觉设计”。

而虽然苹果 OS X 系统预装了“方正兰亭黑”，但其在电脑里面的名字叫“兰亭黑-简”，而字体名称叫“Lantinghei SC”。写“方正兰亭黑”根本无法使它工作，也就是说锤子第一顺位的字体居然是对所有人都冗余的无用代码。

（4）使用了实际上相同的字体来占领字体顺位：

列表中“STHeiti”和“华文黑体”是同一个字体，而且“华文黑体”的中文还出现了两次。而“Microsoft YaHei”和“微软雅黑”也是相同的字体，这样的写法简直让人怀疑锤子的前端工程师是否了解“font-family”的工作原理。

（5）使用了错误的字体名称：

在“微软雅黑”和“华文黑体”中间有一个字体叫“STHei”，不存在这样一款字体。

（6）将中文字体的优先级放在了西文字体之前：

中文字体设计得有西文字符，而西文字体没有设计中文字符，将中文字体的优先级放在西文字体的前面，网页中的西文就都是中文字体中的设计了，这几乎失去了后面再设计西文字体的意义。

（7）所列字体列表对跨平台显示的情况考虑不足：

因为 Windows 、Linux 和大部分 Android 等系统上没有预装“Helvetica Neue”和“Helvetica”，而列表中并没有提供第二顺位的西文，最终在所列设备上的显示效果会随着系统和浏览器的设定，变得千奇百怪。

建议：

font-family: “DIN Next Ultra Light”，”Helvetica Neue”,Helvetica, Arial,”Lantinghei SC”，”Hiragino Sans GB”,STHeiti, “Noto Sans S Chinese”， “Microsoft Yahei”， “Microsoft Sans Serif”， “WenQuanYi Micro Hei”,sans-serif;font-weight:300;

然后可用 Unicode Range 的方法修正由此带来的西文标点问题，此处省略。

［七］网页 Bug

一个要急死处女座的网页 Bug

问题页：

http://www.smartisan.com/#/design

“技术规格”与“优先购买通道”之间的垂直分割线，随着页面滚动，一会儿变长一会儿变短，而且当是白色背景时，它的中心还不是跟文字处于同一水平线。

建议：

统一该分割线的长度和位置。

［八］Retina 屏适配

想要在 Retina 屏幕上还能保持清晰，就需要上传图片的长宽是普通屏幕所需的 2 倍才行，这些图片通常在文件名后面会以 @2x 的方式结尾。

锤子的官网为大部分宣传图片都提供了 @2x 的图片，可惜不是所有。我想如果锤子本意是让使用 Retina 屏的人能获得更佳的浏览体验的话，那理所应当将全站都做到兼容。

问题页：

http://www.smartisan.com （全站有很多，我只说首页的情况）

首页 Hero 图下面的这三个橱窗中提供的图片未支持 Retina、“在线咨询”背景图未支持 Retina、网站备案信息（采用图片提供的）也未支持 Retina。

这种情况还出现在“公司简介”、“加入我们”等系列头图上配的文字等。我觉得这显然不是能力的问题，而是没有规范的需求管理系统，同时公司内部的工作流（Wokrflow）还存在问题的结果。

好了，就是这些。我上面说的肯定不能保证全对，谨慎参考吧。

***

另，好朋友知道我在写这封邮件的时候，他第一反应是“你为什么也要黑老罗？”他甚至没有看过内容，就先从我的“动机”开始怀疑起来了。

说说我的动机，我开了一个微信公众帐号，名字就叫“强迫症设计诗”，想吸点粉丝，所以将这封原本准备私下发给你的邮件最终变成了“公开信”。写作的目的不是“黑”锤子，这只是系列文章的第一篇。

还想看到这类文章的朋友，不妨扫描下面的二维码，关注一下吧，微信号是 OCDesigner。