一个设计师对锤子官网的微吐槽：真的没有在黑锤子！

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

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

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

　　一、免责声明

　　设计师的强迫症导致我要求比较*。下面的意见可能对于大多数人来说这并不是“问题”。现在写出来也是基于善意，如果你判断后觉得有必要的话，不妨优化改进一下。不过因轻信和参考里面的信息而带来了任何直接或间接损失则与本人无任何关系。如对此声明有异议，则请停止阅读来信。

　　二、使用环境

　　电脑硬件：MacBook Pro (Retina, 15-inch, Late 2013)

　　系统版本：OS X 10.10 (14A329f) ［系统语言为中文］

　　浏览器：Safari 8.0(10600.1.8)

　　所有截图均来自 8 月 31 日到 9 月 2 日期间

　　三、原则基准

　　不管网站设计得怎么样，首先所有内容都必须符合中国的法律法规

　　对术语（包括翻译）的使用准确，避免产生歧义

　　对商标（包括其英文商标对应的中文商标）使用的准确，避免损害第三方利益

　　审美可以有自己的取向，但需要自圆其说，且始终贯彻这一原则

　　选择使用了真正符合自己品牌的设计

　　哪些方式可以优于业界平均水准

　　四、具体建议

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

　　1、设计字体选择

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

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

　　

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

　　

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

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

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

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

　　以上设计中，除了有锤子自己设计的 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 （除*部分的大部分）

　　

　　“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）还存在问题的结果。

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

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

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