乐学淘宝 2023-03-06 9:52:03

[鸡叔说设计（实 * ⑤）]做设计别本末倒置——首页设计实 *

本文主题为天猫首页、天猫页面、天猫页面设计、天猫鸡叔、天猫年中促销、天猫营销引流。

年中促销的前一天，各位运营人员，你们准备好为艺人做最后的努力了吗！

电商进入设计行业已经很久了。花了半年时间，沉下心来好好看看设计，思考设计在做什么，设计是什么，核心是什么等等。

当然，就目前的趋势而言，想也没用，因为大多数人都会想，但结果是没有提出具体的解决方案。

说白了，中国的电商已经从1.0的随便卖时代——2.0的视觉营销时代——走到了现在。

很难定义现在是一个什么样的时代。有人说是品牌营销的时代，有人坚持视觉营销至上，有人说是微信商业的天下等等。当然，这个东西清楚不清楚并不重要，因为它对你的电商业务根本没有任何用处。

进入正题

之前看到一个关于设计本质回归的分享，觉得有必要讨论一下。

事情是这样的:

2013年底，Intercom的产品VPPaulAdams在Intercom的官方博客上发表了一篇博文。

本文描述了互联网上设计社区的一个普遍现象。大意是“很多设计师在社区分享自己的作品是为了炫技，产品的逻辑通常经不起推敲。真正优秀的设计应该从更高的层面出发，而不仅仅是做表面文章”。

(例如，这些天气应用中只有一个试图解决用户的实际问题。是今天最后一个告诉你带伞的)

这里说的是“真正优秀的设计应该从更高的层面出发，而不是做表面的工作。”真的很值得玩味，就像当时苹果掀起一波扁平化设计的时候，一大群设计师屁股后开始扁平化。其实扁平化就是扁平化，但是扁平化有什么用呢？其实我根本没看出来。无非是把原本复杂的页面变成干净简洁的东西，却没有真正思考扁平化的目的是什么。

在这里，不得不提一个概念——设计思维就是“设计思维”。设计思维的核心是以人为中心。说白了，基本可以理解为更符合用户体验的设计。这种设计思维在工业设计中多被引用，产品设计的设计标准应该更方便消费者使用。其实我们把它带入页面设计是完全可以的。网页设计的根本目的是什么，或者说客户需要什么样的体验？另一方面，不要忘记从我们业务的角度来看我们需要什么。这是作为一个页面设计师要思考的最重要的问题。

客户想要的是知道如何解决问题。就像之前的APP界面一样，你手机上更新了无数的天气软件。其实我们根本不在乎晴天。我们只需要知道，气温骤降的时候，你可以多加一件衣服。天热的时候不要穿太多。下雨或下雪时，你可以带把伞。当然，你可以有一个橘红色的警报。这些告诉你，你今天可以名正言顺地翘班了。那是最好的。

一个产品如果不能解决客户需要解决的问题，那它就是没有价值的。最近一段时间好像到了年中。我搜索了2个小时的会议页面，但我没有找到我想要的。最后通过自然搜索找到了自己想要的。当然，顺便看一眼天猫的年终促销标志，会更吸引我。所以我一直很奇怪，为什么活动推广页面没有个性化推荐这种东西。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上有点过了。让我们言归正传。这里引用前面提到的社区帖子。

产品设计总是和使命、愿景、架构息息相关。

从宽泛的想法到像素级的细节，设计师要时刻思考公司的使命、愿景和产品架构。他们做设计的一切都要经过这个过程。

设计始于公司最顶层的使命，其次是公司的愿景。在一个没有清晰和可执行的使命与愿景的团队中，很难开展设计。不要低估这个问题的重要性，如果你所在的公司缺少清晰的使命，那就将缔造它作为你工作的一部分。设计始于公司的最高使命，其次是公司的愿景。在一个没有清晰可执行的使命和愿景的团队中，很难进行设计。不要低估这个问题的重要性。如果你的公司缺乏明确的使命，那就让它成为你工作的一部分。

在使命和愿景之后，才是产品的架构。不是技术层面上的东西，而是产品各部分之间的关系，是一个整体系统。我在脸书的第一天早上，克里斯科斯(产品副总裁)做了一个精彩的演讲(你可以点击它来感受一下)。下面的听众来自公司的各个部门，克里斯·侃侃，然后重点介绍产品的结构以及它与公司目标的关系。

对于脸书来说，在建筑中有联系、朋友和兴趣点，从世界著名品牌到街头商店，以及可以显示所有这些事情之间关系的示意图。这是一款非常清晰简洁的产品，直击目标需求点。根据我的经验，在没有清晰的架构概念的情况下，很难在这种混乱的情况下做出令人敬畏的设计。很多时候，就像这个项目一样，设计师要解决问题，改进架构。比如说脸书跳转到其他应用的时候，我一般会在白板上画一些这样的概念图:

产品架构不是信息堆砌，不是用空连接这个模块的页面，也不是一堆死板的演示告诉你这里是怎么回事。交互式原型通常可以很好地处理这些信息。更深一层的表达，这是产品的架构图。它可以显示各个模块在整个系统中的位置以及它们之间的关系。在intercom，我们这样设计架构:

我甚至没有印象，我见过像上面这样的架构图来表达设计思想。很少看到设计师讲述自己的作品如何与需求和目标相匹配，如何推动产品的愿景向前发展，或者在整个架构中扮演什么角色等等。，以显示这些设计的重要性。这应该是设计的基础，而不是特例。

上面说的这么多东西，其实是我在很久以前的《如何做好详细的页面设计》里面会特别强调的一个点，强调一个思考的过程，也可以说是逻辑架构的问题。其实我们在设计页面的时候，要考虑流量会不会进来，客户的兴趣点，流量跳转后的闭环，商家期望的消费者浏览路线等等。

为什么有的店铺访问量深，有的访问量差？相信看完上面的解释我会明白很多。

当然，下面是后面要问的两个主要问题:

问题1:我的SKU很少，应该怎么做店铺设计？

问题2:我有难以想象数量的SKU。店铺设计应该怎么做？

这两个问题从设计的根本出发点来说并不难解决，不仅仅是酷炫的角度。比如问题1，SKU很少需要多了解客户，因为客户更不容易遇到找不到我要找的产品的问题，因为一目了然，他们更想了解这个产品的用途或者能给我带来什么。其实问题2只不过是问题1的升级版。一方面要解决需要解决的问题，另一方面要解决客户如何找到自己需要的产品。

(一般我对搜索框的需求远大于左边打出来的字，因为我可以更准确的找到我需要的，我可以通过多个条件进行筛选。还有左边大类的分布，其实看过页面数据的人基本都知道只有首页和所有宝贝的点击率比较高，其他的就那么几个。)

（一个店铺的首页做成这样类型的形式，除了浪费寸土寸金的页面前三屏位置以外，全部在展现商家想要表达的东西，而不是满足客户的需求，跳失率高能怪谁呢？要我我连1秒钟都不想多看）(商店的首页就是用这种形式制作的。除了废页的前三屏，都是在展示商家想要表达的东西，而不是满足顾客的需求。跳出率高该怪谁？我一秒钟都不想看)

搜索我们店的这个功能，相信除了经常用的人，很少有人真正有概念，那就自己加个搜索吧。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

好吧，让我们继续引用这里

想想设计的四个层次。

设计是一个多层次的过程。以我的经验来看，如何依次思考这些层面是有一个最优顺序的。最简单的是回忆这四个层次:

我见过一个又一个设计师专注于第四级，完全忽略了其他因素。这种自下而上的方式做出来的设计肯定不如自上而下。如果其他三个问题都没有解决，那么在网格、字体、色彩、美感等方面再深入也没用。很多设计师说，想了想却不付诸行动，因为有时候画一些漂亮的画，把自己埋在像素里，比处理一些复杂的商业决策和人际关系更有意思。只关注第四层次的因素是无伤大雅的，但只是画画而不是设计。在这种情况下，你是一个数字艺术家，但不是设计师。

要解决这个问题，我们来看看实际应用(选自顾家家居旗舰店)

不可避免的，你家的导航肯定会标上牛皮癣，而且会比你店里的更醒目。它占据的位置绝对猥琐，它自然比你优越。这时候我该怎么办？

打破横向导航，纵向构图，改变形状的界限。从用户体验的角度来说，消费者希望看到区块的焦点，焦点的焦点，顺序的焦点。

并且鼠标悬停的改变触发了与消费者的简单交互模式，提示他观看这个。

至于旋转木马，省空空间和多维显示。不要浪费这珍贵的一页的第一屏！同事制造夸张的视觉张力，升职感觉像杠杠的！

搜索栏位置搜索必须清晰。前期计划直接放在左侧导航位置。搜索中的预置内容直接显示你想推荐的内容。如果客户不喜欢，就让他自己换。

在单个模块中多页显示活动推广机制，节省空和鼠标悬停效果。

产品在列，右上方增加了触发模块，可以查看更多，节省页数空。本来我以为我会猜你喜欢这种文字表达来增加给客户定制的感觉。中间标签直接代表推广兴趣点，简单直接。

别忘了在推广位加一点轻的东西，稍微区分一下就能吸引更多的注意力(下面解释)。

不同的模块可以满足客户的个性化需求。

当然还有很多页面设计的小细节，这里就不细说了。可惜我会根据实际情况做详细分析。其实还有很多部分没有推敲透彻，需要一点点改进，进一步深化页面设计。如果你愿意，可以继续关注照顾家人和家，更好的改装方案会实时更新。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

说到页面，不得不说一下页面的整体框架结构。设计过程中需要考虑的几个问题上面已经讲过了，下面就来拆解一下。

早期或者现在，还是有很多商家在使用一个页面，它的特点基本是这样的。

这个模式基本算是在2.0时代是个主流。但是面向于现阶段流量的细化程度更高，客户对购买体验的要求提高，流量获取成本更高的这个大环境下面，视觉突出是在浪费空间，均衡展现变成了没有重点，单页呈现变成了无聊宠物，静态呈现变成了毫无特色，全分流的导向型则是浪费流量入口和页面空间。这种模式在2.0时代基本是一种主流。但面对流量更加精细化，客户对购买体验要求更高，流量获取成本更高的现状，视觉突出度浪费空，均衡呈现变得不聚焦，单页呈现变得无趣宠物，静态呈现变得无特色，全导流导向呈现浪费流量入口和页面空。