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

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

2014/09/10 41665评论区

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

苹果中国:

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

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

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

之前还有两篇很火的文,右戳感受强迫症:
1、《给老罗的公开信!一个设计师关于锤子官网的吐槽》
see-more-debug-smartisan
2、《给李楠的公开信!一个设计师关于魅族官网的吐槽》
see-more-debug-meizu
问题页

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&amp;weights=100&amp;v=1" type="text/css" media=“all">

<link rel="stylesheet" href=“//uat2.iapps.apple.com/wss/fonts?family=PingHei&amp;weights=200&amp;v=1">

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

但我通过浏览器检验:

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

以及

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

却没有返回任何信息。

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

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

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

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

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

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

<link rel="stylesheet" href=“/wss/fonts?family=PingHei&amp;weights=200&amp;v=1">

然后世界太平了。

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

▲ 这是之前

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

▲ 这是之后

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

▲ 这是之前

 

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

▲ 这是之后

希望苹果中国能尽快修复这一 Bug,并且在下次上线前让相关设计“检查”一下。

同时想通过截图报道苹果中国网站的媒体或者有强迫症的设计师,也可以先通过自己手动修改的方式来获取这样的显示效果。

“公开信”会是我文章写作基本方式,本文是这个系列的第三篇文章,以后我还将继续写作类似文章,如果你希望,不妨扫描下方的二维码关注我吧。

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

如果作者是甲方,不想改改改的设计师赶紧来学这些!

怕甲方山寨?就得这样干!
《职场好经验!如何应对客户想看效果图的要求》

设计师必备技能之读懂甲方:
《设计师必读!如何从甲方抽象的概念里提炼LOGO创意》

教你跟设计师明确需求!
《奔走相告!甲方如何与设计师明确需求?》

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

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/debug-for-apple-website

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里