一个设计师对锤子官网的微吐槽

编辑注记：本文来自 Jason2be，节选自给老罗的一封公开信——关于锤子官网的微吐槽中的部分内容。

老罗：你好。我是一名设计师，有点强迫症，来信是为给锤子手机的官网提一些建议。

和你之前在采访中见过，那次我们跟你聊了将近十个产品的问题，你都坚持听完了，因此印象挺好。

具体建议

字体选择（带有主观性，仅供参考）

1、设计字体选择

标题字体 锤子官网多数宣传图的字体使用的是方正兰亭系列，其中大标题是超细黑，副标题是纤黑。这并不是一个“问题”，不过虽然兰亭系列可以算是国内数一数二的中文字体，但绝大数的中文字体提供的西文都差强人意。

问题页： http://www.smartisan.com/#/detail（第一部分）下图所举“i”就是一个非常糟糕的设计。

它让人感觉这个“i”是带有拼音的声调，而是锤子官方的 logo 却正好是一个连竖线上的那个“点”都省略的设计。

640 (1).png

而“，”的设计真的诠释了什么叫“屌丝（字面意思）”。

建议： 使用一款字体其实未必就一定要使用该字体的全套字符，有足够字体排印（Typography）经验的设计师，通常会让中文使用中文字体，而西文采用与中文字体搭配和谐的西文字体来配合，至于原设计中太难看的标点符号则可以用其他合理的标点符号替代或者重新设计一个。

文字标识（Logotype） 如果西文部分决定了兰亭系列，那么就需要看网站是否“贯彻”了这一决定。遗憾的是呈现在我们眼前的设计并不是这样的。下面截取了网站上提到“smartisan”的地方。

问题页： http://www.smartisan.com （全站）注：截图部分的实现方式都是图片，换句话说，不管用户电脑里都是否安装了设计中使用的字体，锤子只要想，都可以轻松做到让它们呈现出统一的设计感。

640 (2).png 640 (3).png 640 (4).png 640 (6).png 640 (5).png

以上设计中，除了有锤子自己设计的 Logo 字体以后，大部分的西文采用了兰亭系统的西文，因为粗细不同视觉上稍有不同以外。我们还看到了锤子自制 logo 字体、微软雅黑（西文部分）和 DIN Next Ultra Light （目测）。导致的问题就是 Smartisan 的 “i” 头上，一会儿没点、一会儿有一个圆形的点、一会儿有方形的点、一会儿有一个像捺的点，实在欠专业。

相关链接：

来源：Fonts: DIN Next Ultra Light

建议： Smartisan 自制 Logotype 看起来是参考了 FF Signa 之后的设计，不过个人觉得其间距（spacing）和字距（kerning）并不是很理想，但尽管如此这并不妨碍锤子在整个网站“贯彻”此字体设计，制作一套属于自己的 Logo 字体然后用于网站上是非常常见的做法。

我们也可以同时看到，上面的“smartisan os”字样使用了 DIN Next Ultra Light。这是一款由 Akira Kobayashi 设计的出色字体，不仅能有较细的笔划，跟锤子整个网站审美取向相同，也能与 Logo 字体达到一定程度的和谐。作为一款需要支付购买的商业字体，锤子既然在这里用了它，我假设就是已经进行了购买，那么只在这一处使用不仅“浪费”，也缺少将设计精神贯彻的魄力。

不到万不得已的时候都不应该使用微软雅黑或者兰亭系列的西文（包括数字、标点部分）。而且就算要用，也至少坚持要么用兰亭系列要么用雅黑系列的西文，统一很重要。

2、正文字体选择

这里说的“正文字体”指的是，通过代码指定的“字体列表”，它们在用户浏览器中显示的效果与用户使用的系统、浏览器、是否安装得有对应字体甚至操作系统及浏览器的语言都有关系。因为这些诸多原因，制作网页的前端工程师，通常会在代码里通过一个叫做“font-family”的属性来执行浏览器优先显示的字体。

font-family: “字体1",“字体2",“字体3",“字体4",“字体5",“字体6", 某一类字体的类型; 以上“代码”在浏览器渲染网页时，工作原理是这样的：

如果用户设备里安装（包括预装和自行购买）了的“字体1”，则以“字体1”显示文字，否则开始判断“字体2”的情况；如果“字体2”有安装，则正确显示，否则就继续向后匹配到已安装字体才用对应字体来显示它，如果所列字体都没有安装则按照最后准则“某一类字体的类型”（如广义上的“黑体”，是黑体就可以）来显示。

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

640 (2).jpg

“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 的方法修正由此带来的西文标点问题，此处省略。