分享:给老罗的一封公开信,官网设计吐槽

发送到手机
使用"扫一扫"即可发送至手机

老罗:

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

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

一、免责声明

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

二、使用环境

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

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

3. 浏览器:Safari 8.0.7 (10600.7.5)

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

三、问题概括

· 文案啰嗦

· 前端奇葩

· 流程混乱

· 人才缺失

四、具体说明

(一)文案啰嗦

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

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

blob.png

图中小标题(论点)看起来是要论述「OS 美观、易用和人性化」。正文(论据)句子主干却是:「提高至程度」、「打磨至程度」和「贯彻至程度」,超长定语组合而成的三个排比句,没有明确主语,读得人云里雾里,也跟「美观」、「易用」和「人性化」没什么对应关系。第二段的句子主干是「新特性让你无回头之路。」多少给人一种很恐怖的感觉。另外,「七年一遇」的哏默认谁都知道吗?埋了包袱却不抖,给人一种另一只鞋没落地的感觉。

blob.png

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

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

(二)前端奇葩

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

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

blob.png

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

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

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

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

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

blob.png

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

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

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

(三)流程混乱

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

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

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

blob.png

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

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

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

blob.png

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

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

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

产品经理的缺失

没有产品经理来把任务的真实需求了解,来把「使用情景」分析,甚至导致了 key feature 的丢失。

blob.png

让无数「锤粉」、「罗粉」扬眉吐气的 IF 获奖页面: 不能复制任何一个字,没有任何一个分享按钮。

因为靠切片贴图的方式来实现,IF 获奖的荣誉页面既然没有任何一个字可以供用户或者科技媒体复制。同时这个页面从头到尾从上到下没有一个「分享」按钮。难道锤子希望的,用户需要的不就是一个「传播」的功能吗?既然就这样 miss 掉了。

在锤子「好看」往往成为需求,而它其实只是要求。对需求的理解是产品经理的职责。


分享:给老罗的一封公开信,官网设计吐槽

分享:给老罗的一封公开信,官网设计吐槽

分享: