给老罗的公开信！一个设计师关于锤子官网的吐槽

老罗：

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

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

一、免责声明

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

二、使用环境

1. 电脑硬件：MacBook Pro（Retina, 15-inch, Late 2013）
2. 系统版本：OS X 10.10（14A329f）［系统语言为中文］
3. 浏览器：Safari 8.0（10600.1.8）
4. 所有截图均来自 8 月 31 日到 9 月 2 日期间

三、原则基准

• 不管网站设计得怎么样，首先所有内容都必须符合中国的法律法规
• 对术语（包括翻译）的使用准确，避免产生歧义
• 对商标（包括其英文商标对应的中文商标）使用的准确，避免损害第三方利益
• 审美可以有自己的取向，但需要自圆其说，且始终贯彻这一原则
• 选择使用了真正符合自己品牌的设计
• 哪些方式可以优于业界平均水准

四、具体建议

［一］政策相关：

（一）备案号链接：

服务器在国内的网站受工信部监管，并受其颁布的《管理办法》约束。根据《互联网信息服务管理办法》及《非经营性互联网信息服务备案管理办法》的法律法规，要求网站必须在其主页添加其备案号，且备案编号需要链接到信息产业部备案管理系统。

问题页：

全站：http://www.smartisan.com （最底部）

锤子科技的网站底部提供了网站的备案号，但不可点击，也就是说没有链接工信部网站，这不符合法规，有可能会被处罚五千元以上一万元以下罚款。

相关法规如下：

1）《互联网信息服务管理办法》

第二十二条　违反本办法的规定，未在其网站主页上标明其经营许可证编号或者备案编号的，由省、自治区、直辖市电信管理机构责令改正，处 5000 元以上 5 万元以下的罚款。

来源：中国政府网

http://www.gov.cn/gongbao/content/2011/content_1860864.htm

2）《非经营性互联网信息服务备案管理办法》

第二十五条 违反本办法第十三条的规定，未在其备案编号下方链接信息产业部备案管理系统网址的，或未将备案电子验证标识放置在其网站指定目录下的，由住所所在地省通信管理局责令改正，并处五千元以上一万元以下罚款。

来源：中华人民共和国工业和信息化部官网

http://www.miit.gov.cn/n11293472/n11294912/n11296542/12095560.html

建议：

将备案信息修改为文字，并及时链接至工信部网站。

（注：文章发表后锤子官网已修改）

（二）视频播放相关

制作、编辑、集成并通过互联网向公众提供视音频节目被称为“互联网视听节目服务”，受国家新闻出版广电总局监管，并受其颁布的《管理规定》约束。按规定锤子如果要自己提供视频地址在自己服务器的视频播放的话，则需要取得广播电影电视主管部门颁发的《信息网络传播视听节目许可证》并备案，否则可能会被主管部门警告并处 3 万元以下罚款。

问题页：

http://www.smartisan.com/#/video （Smartisan T1 宣传视频）

http://www.smartisan.com/#/videoDesigner （Smartisan T1 主设计师 - Robert Brunner）

及其源代码

 

从源代码中可以看到，该视频存放在锤子自己的网站上并向网友提供观看，这是不符合规定的。

相关法规如下：

《互联网视听节目服务管理规定》

第二十四条 擅自从事互联网视听节目服务的，由县级以上广播电影电视主管部门予以警告、责令改正，可并处3万元以下罚款；情节严重的，根据《广播电视管理条例》第四十七条的规定予以处罚。

来源：中华人民共和国国家新闻出版广电总局官网

http://www.sarft.gov.cn/articles/2007/12/29/20071229131521450172.html

建议：

移除放置在自己网站的视频，采用提供类似《锤子发布会》那样的跳转到优酷或将优酷视频集成到官网的做法来解决。

（以上对政策的理解为个人的意见）

［二］中文标点的使用规范：

1、问题页：http://www.smartisan.com/#/overview全站：（第二部分）

“前所未有的左右手操作习惯全支持…这一切，全都来自”中的“…”是什么？我想它试图表示“省略号”的意思，但这并不符合现行的《标点符号用法》国家标准。

国家标准：

《标点符号用法》

4.1 省略号

4.11.1 定义

标点的一种，标示语段中某些内容的省略及意义的断续等。

4.11.2 形式

省略号的形式是“……”

来源：《中国人民共和国国家标准——标点符号用法》 GB/T 15834 - 2011

建议：

中文的省略号源自英文的 ellipsis，原为三点，但由于直排时易于冒号混淆，才改为六点，并占两个字宽。

“…”不仅没有出现过在我们的语文书上，还与常出现在数学书上的“⋯”（Mid-line ellipsis，同为三个点的字符，部分浏览器可能无法正常显示）容易产生混淆。

或许这样更美观，为避免“重新发明”中文符号的尴尬，建议修改省略号为“……”或其他符号。

2、问题页：http://www.smartisan.com/#/detail（技术规格：音频播放、视频播放部分，以及几乎相同的订购页面）

页面中“支持声音文件格式：MP3, M4A, AAC, MKA, AMR”及以下类似文本的“逗号”都是半宽的英文逗号（COMMA，Unicode 为 U+002C），如果要用“逗号”则应该使用的是全宽的中文逗号（FULLWIDTH COMMA，Unicode 为 U+FF0C）。但此处应该使用的其实是“顿号”，因为后面跟的格式其关系是并列，且根据可读性和语意要求，它们之间的停顿应该较短。

国家标准：

4.5 顿号

4.5.1 定义

句内点号的一种，表示语段中并列词语之间或某些序次语之后的停顿。

4.5.3 基本用法

4.5.3.1 用于并列词语之间。

示例1：这里有自由、民主、平等、开放的风气和氛围。

示例2：造型科学、技艺精湛、气韵生动，是盛唐石雕的特色。

附录 B

B.1.1 逗号、顿号表示并列词语之间停顿的区别

逗号和顿号都表示停顿，但逗号表示的停顿长，顿号表示的停顿短。并列词语之间的停顿一般用顿号，但当并列词语较长或其后有语气词时，为了表示稍长一点的停顿，也可用逗号。

来源：《中国人民共和国国家标准——标点符号用法》 GB/T 15834 - 2011

建议：

将类似文本的半角逗号，改成全角逗号。

［三］相关术语的使用准确：

问题页：http://www.smartisan.com/#/os（相机部分）

“相机还内置了 180°~360° 全景拍摄”中的“全景”表述有误。低于 360° 的广角图并不能被称为“全景”。该词来自希腊语的“all sight”，专指视角涵盖了 360° 的画面，而 180°~ 359°之间照片，只能被称为“宽景”。

相关引用：

宽景
是指画面比普通的广角的水平视角大，却又未涵盖到整个周围360°。

全景
源自于传统平面的概念，水平视角包含完整一周360°，但受限于二度空间，无法完整呈现出置身于球体，或是立方体内部的那种三维的立体空间之视觉效果，谓之为全景。

来源：维基百科

http://zh.wikipedia.org/wiki/全景图

建议：

修改文案为“相机还内置了宽景与全景拍摄、二维码识别等功能。”

［四］英文缩写的正确书写

问题页：http://www.smartisan.com/#/os（录音机部分）

“支持录制 wav 格式，多种音质的音频”中的“wav”三个字母应该全部大写。当“wav”小写时，通常是在“被忽略大小写”的情景下，也就是做“扩展名”时，通常写作“.wav”。

相关引用：

WAV（Waveform Audio Format），是微软与IBM公司所开发的一种声音编码格式，在Windows平台的应用软件受到广泛的支援。由于此音频格式未经过压缩，所以在音质方面不会出现失真的情况……

来源：维基百科

http://zh.wikipedia.org/wiki/WAV

建议：

将这处字母大写，使其与“技术规格”页面的正确书写保持一致。

［五］商标的正确使用

问题页：http://www.smartisan.com/#/overview（第一部分）

“以至于你很难相信它是一部基于安卓系统的智能手机”其中的“安卓”应该指的是 Android 系统。遗憾的是，谷歌并没有成功将“安卓”两字申请为自己操作系统的名字，它的正式的中文商标是“安致”。

相关查询：

在国家工商总局，搜索“谷歌公司”。可以发现 Google 其实确实注册了“Android”（英文）、“安卓”和“安致”等商标。

但遗憾是“安卓”的“商品/服务列表”，都离我们真正想表达的“Android”系统相去甚远。

而“安致”商标则更接近我们理解的“Android”系统。

查询地址：国家工商总局——商标查询

http://www.saic.gov.cn/ywbl/zxcx/sbcx/

建议：

因为 Android 商标还在谷歌手中，而“安致”商标公众又不够熟悉，因而建议将文字换成“你很难相信它是一部基于 Android 系统的智能手机”。

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

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

http://www.fonts.com/font/linotype/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）还存在问题的结果。

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

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

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

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

你看，网页设计就是慢工出细活。锤子官网用了很多单页设计的技巧，有兴趣不妨看看下面的文章：

想了解单页设计，不妨先看看这些好案例：
《制造惊喜！15个优秀的单页网站设计案例》

如果非要我给你选择单页设计的理由的话，不妨看看这篇文章：
《I WANT YOU！选择单页设计的五个理由》

既然有了经验，找了理由，接下来的技巧就不容错过啦：
《立竿见影！掌握单页网站设计的5大技巧》

作者：强迫症设计诗
uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量77万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：