网页设计

您的位置:首页 > 网站专题 > 网页设计 > 详细内容>

一枚设计师再吐槽锤子官网

2015-06-22 22:23 作者: [ ]
看看设计师如何吐槽锤子

   去年那封公开信火得一塌糊涂,甚至惊动到老罗,木想到今天作者又出新篇了,槽点依旧犀利,不过只有强迫症设计师才找得到 >>>

一枚设计师关于锤子官网的再吐槽 脚本之家

  [核心提示] :文案啰嗦、前端奇葩、流程混乱和人才缺失,这位挑剔的设计师又有了新的槽点。

  作者公众号:OCDesigner,欢迎关注呦

  老罗:

  你好,又见面了。之前我介绍我说是一个有强迫症的设计师,后来发现有些强迫症的人洗手能洗一个小时,跟他们相比,我还是说我其实是一个眼里容不得沙子的产品经理更合适吧。

  去年 9 月给你写一封公开信,里面有关于锤子官网有不下 10 条的吐槽。然而经过和你们的良好互动,里面 95% 的问题都得以修改和规避了。所以才有了新的这封公开信。

  那封公开信:《给老罗的公开信!一个设计师关于锤子官网的吐槽》

  一、免责声明

  作为外部人士,有的「猜测」未必准确。但我相信其中一些是程度问题,而不是有没有的问题。因轻信和参考里面的信息而带来了任何直接或间接损失与本人无任何关系。如对此声明有异议,则请停止阅读来信。

  二、使用环境

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

  系统版本:OS X 10.10.4 (14E17e) [系统语言为中文]

  浏览器:Safari 8.0.7 (10600.7.5)

  所有截图均来自 5 月 9 日到 10 日期间

  三、问题概括

  文案啰嗦

  前端奇葩

  流程混乱

  人才缺失

  四、具体说明

  (一)文案啰嗦

  1)功能介绍文字的「论据」毫无说服力,逻辑混乱。

  网站的每一屏就应该是一个能够说服人的「幻灯片」,每个小标题是一个论点的话,那下面论述它的文字就应该是论据,而锤子官网的文字却可谓是乱写一通。

屏幕快照 2015-05-13 下午7.14.56.png

  via 锤子科技官网

  图中小标题(论点)看起来是要论述「OS 美观、易用和人性化」。正文(论据)句子主干却是:「提高至程度」、「打磨至程度」和「贯彻至程度」,超长定语组合而成的三个排比句,没有明确主语,读得人云里雾里,也跟「美观」、「易用」和「人性化」没什么对应关系。

  第二段的句子主干是「新特性让你无回头之路。」多少给人一种很恐怖的感觉。另外,「七年一遇」的哏默认谁都知道吗?埋了包袱却不抖,给人一种另一只鞋没落地的感觉。

屏幕快照 2015-05-13 下午7.17.25.png

  via 苹果中文官网

  而上图是来自苹果官网的例子。小标题(论点)「iOS 版本」。正文(论据)句子主干:「iOS 8 系统功能和特性将优势呈现」,主语明确,完成的任务明确。

  第二句的主干是「这不仅是绝佳匹配,更是绝佳体验。」易懂且准确。

  2)啰嗦的文案「贯彻」了网站和产品。

  文案应该追求的是简短、精准。不能长篇累牍和「讲故事」。这样的文案或许在刚开始的时候带来趣味和传播(营销),但当用户重复打开使用时,就会像一直讲的冷笑话一样无聊。

屏幕快照 2015-05-13 下午7.19.20.png

  via 湖南卫视《真正男子汉》

  累赘的文案就像是多余的配音,开始有它是为了「搞笑」,之后有它却「可笑」。上面的视频中,王宝强在训练扣动扳机时还自配音效,要说相较于没有音效的训练,教官可能更能了解的他的发射动作。而当他被训斥需要配音来十遍的时候,配音就显得多余且可笑了。

  有时候为了免责或者说明,看起来锤子不得不说上好长一段介绍性的文字。这些文字保留了我们设计功能的初衷,它也切实对功能的使用提供了趣味和说明。

  然而如果这是一个使用情景稍高的功能的话,废话连篇的说明总让人厌烦,毕竟现在没人愿意阅读,尤其是反复阅读。

屏幕快照 2015-05-13 下午7.23.18.png

  via 锤子科技英文官网

屏幕快照 2015-05-13 下午7.23.48.png

  via 锤子便签英文界面

  「What`s the point?」外国人无法 Get 到的「点」,正成为国际化的障碍。

  产品和网站文案的撰写应该「去流行化」和「去区域化」。将当下网络上流行的文字和句式写入文案将成为一场灾难。除了长达一年非更新期里它早晚会不流行,更多是因为文化差异形成的「哏」通常不能被很好的翻译并传递给外国人。

  上图 1 的 Revolutionary、Disruptive、Redefined 的哏最早来自于苹果的广告,但糟糕的是苹果广告的英文版中却从未出现过这几个词,这就造成了「点」的丢失。上图 2 所指的部分用户其实来自中国,冷嘲热讽用户还煞有介事的被翻译出来,肯定也有所不妥。

  (二)前端奇葩

  1)网站中多处文本显示都是靠图片完成。

  这既不利于传播(SEO 和复制),修改和维护的成本也被提高。当需要更新和修改文本的时候,就必须有设计介入并出多份素材最终才能更新,加长了工作链条。

屏幕快照 2015-05-13 下午7.26.31.png

  via 锤子科技官网

  上图中这些排版或简单或复杂的「文字与图片」全部靠加载一整张图片来实现的。

  没有任何理由使用图片展示网页最基本的元素,将文字在内的元素全部以图片的方式来呈现,既影响网页的加载速度,浪费服务器的资源,同时也不尊重系统本身的文字渲染方式,显示效果也不是最佳的。

  上面陈列的文字在排版样式上几乎可以说是没有任何奇特之处,通过简单代码实现,既利于维护更新,也会加快移动版的开发进度(元素复用)。

  2)前端的惰性还反映在仅对最终效果负责,而不对实现方式负责。

  样式的多样性和材质素材的使用并不应该成为偷懒的借口。我所看见的样式均可以通过代码「干干净净」的完成。

屏幕快照 2015-05-13 下午7.28.50.png

  via 锤子科技官网

  上图中为了实现页面材质底纹,前端使用了一张 2350×7146 的背景图片。

  分个层、切个片、或者什么都不做,直接一整张图放上去。用「设计图本人」来还原「设计图」,那么还原效果当然是「一级棒」啦。然而这样越是看上去的「高大上」的页面背后,实现的方式却越是 low 到了极点。

  其实并不是因为锤子因为坚持「拟物风格」才会遇此难题,游戏网站也常常使用「卷轴」样式来发布公告等,却也未曾见过如此没有技术含量的实现方式。

  (三)流程混乱

  1)代码的维护和管理暴露了流程管理的混乱。

  比如对 Retina 屏的支持,一样的内容形式,一张就支持,一张就不支持,可见缺乏规范。

  同时该公用代码的地方,没有建立起公用代码,多份不同代码同时运作才会导致 bug 改了又改。

屏幕快照 2015-05-13 下午7.30.54.png

  via 锤子科技官网

  高清屏兼容还是不兼容并不是事,是事的是没有明确的需求,就不会有明确的行动。

  锤子当然可以在意或者不在意高清屏的份额,也可以在意或不在意高清屏的体验。但无论怎样,这都是一开始就需要被定下来的需求,这样才有标准来执行和规范。

  同一个页面中,同等类型的素材,有的就是 Retina 素材,有的就不是,没有任何理由。缺乏规范的管理,必然流程混乱。

屏幕快照 2015-05-13 下午7.32.56.png

  via 锤子科技官网

  同一个世界,同一个梦想。相同的样式采用公用的代码,维护更新才可以高效便利。

  锤子科技的官方在底部样式彻底一样的情况下,却使用了分开维护的多份代码。这样的做法常常会导致 bug 死灰复燃,就如图中那样,曾更新修改了备案信息为文本,网站上却仍旧因为没有调用公用代码来再出现老的样式。

  公用代码的建立与维护的意识缺乏,暴露了产品经理的流程管理不足。

  2)项目的推进时,「相关」或「受影响」项目没有更新。

  相关部门不了解自己手中的可用资源有哪些,更不了解手中项目牵扯的项目有哪些。或者知道也不记得更新。

屏幕快照 2015-05-13 下午7.35.07.png

  via 锤子科技公众账号

屏幕快照 2015-05-13 下午7.39.40.png

  via 锤子科技官网

  图 1 的锤子科技公众账号于 5 月 4 日发布了招贤纳士的通告,招聘了文案编辑等新近人才。图 2 官方网站的最后更新时间是 3 月 20 日,找不到公号罗列的职位。

  「这个有效果先发这个,回头再更新那个。」项目推进应有流程管理,这是工作积累的最大财富。

  苹果要开发布会要上新品了,首先都会把在线商店先下线了。这样的流程即是他们的最佳实践,也给用户形成固定期待。

  懂得了解自己的资源和业务,才能安排和规划出合理的流程。推进项目时先分析出哪些项目受影响,并通过分发或自己完成的方式来避免受影响项目的滞后和出错,最终将合理流程总结固化,就能成为公司重要的财富。