给苹果中国的公开信！一个设计师对苹果官网的微吐槽

涂鸦gz 2014-09-18

展开全文

苹果中国：

你好。我是一名设计师，有点强迫症，来信是为苹果中国的网站提一些建议。

看完苹果发布会的直播后，我浏览了下英文网站的介绍，准备睡觉。临睡时看了一眼微博，发现一堆人都在惊呼苹果中国的网站太丑了。于是我上了一下国内网站，问题真的夸张。

之前还有两篇很火的文，右戳感受强迫症：
1、《给老罗的公开信！一个设计师关于锤子官网的吐槽》

2、《给李楠的公开信！一个设计师关于魅族官网的吐槽》

问题页

http://www.apple.com/cn/iphone-6/ 及其子页面

除了苹果中国那“除却英文还不是中文”的神翻译，最大的问题无非就是字体。涉及字体问题的页面是“iPhone 介绍”全局的，我只截取了两个比较典型的图片。

以下是英文网站对照：

可以看到中文网站的问题是无论中文还是英文字体的设计都没有坚持英文网站字体的细度。而且因为这样的字体选择导致一些地方文字居然“撑破了”图片的布局，更无所谓“构图”了。

于是我通过检查器查看了相关字体的设置是这样写的：

font-family:"PingHei","Helvetica Neue”,"Helvetica","Arial","Verdana","sans-serif";

看上去没什么大问题，排在第一顺位的是“PingHei”，但我发现网页中调用的中文并不是“PingHei”。

PingHei 也叫“平黑”，是苹果中国委托“常州华文”制作的一款具有标志性意义的字体，也是苹果“御用”黑体，通常会用在苹果的网站或包装设计当中。因为这款字体的特殊性，它并没有授权任何第三方机构使用更没有预装到任何系统当中。

因为用户电脑里没有预装，想要保证最终还能以平黑字体来显示的话，则需要使用 Webfont （网页字体）技术来告诉浏览器从网络上的某个地址下载调用该字体。

我查看了苹果中国网站是否在对应的地方提供了地址，找到了下面的设置：

<link rel="stylesheet" href="//uat2.iapps.apple.com/wss/fonts?family=Myriad+Set+Pro&weights=100&v=1" type="text/css" media=“all">
<link rel="stylesheet" href=“//uat2.iapps.apple.com/wss/fonts?family=PingHei&weights=200&v=1">

可以看到下面的一行是，网站对平黑字体网络地址的声明，而上面那行则是在个别地方有用到的苹果英文御用字体“Myriad Set Pro”的声明。

但我通过浏览器检验：

http://www.apple.com/uat2.iapps.apple.com/wss/fonts?family=Myriad+Set+Pro&weights=100&v=1

以及

http://www.apple.com/uat2.iapps.apple.com/wss/fonts?family=PingHei&weights=200&v=1

却没有返回任何信息。

于是我在英文网站中找到了对应的声明地址是这个：

http://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1

所以我怀疑苹果中文网站应该是因为网站更新时间准备不足，而把字体的映射目录弄错了，根据找到这个英文字体的地址，我推测了平黑的地址应该为：

http://www.apple.com/wss/fonts?family=PingHei&weights=200&v=1

所以我用下面的两段代码替换了网页中原有的声明地址：

<link rel="stylesheet" href="/wss/fonts?family=Myriad+Set+Pro&weights=100&v=1" type="text/css" media=“all">
<link rel="stylesheet" href=“/wss/fonts?family=PingHei&weights=200&v=1">

然后世界太平了。

▲ 这是之前