店铺首页设计-实操

做设计别本末倒置——首页设计实操

呆电商这个设计行业里面已经很长的时间了，花了大半年的时间沉下心来好好的看了看设计，思考设计到底是在做什么，什么是设计，核心到底是啥等等问题。

天朝的电子商务说白了已经从1.0的随便卖货时代——2.0的视觉营销时代——现在

现在到底是一个什么样的时代，不太好界定。有人说是品牌化营销的时代，也有人坚持视觉营销至上，还有人说是微商的天下等等。当然，这东西搞不搞得清楚其实无所谓，因为压根对你的电商经营没有什么用。

入正题

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

大概是这样的：

13年底，Intercom 的产品VP Paul Adams 在Intercom 官博发表了一篇博文。文章讲述了网络上设计社区里普遍存在的一种现象，大意是“许多设计师在社区中分享的作品往往是为了炫技，而产品的逻辑通常都经不起推敲的，真正优秀的设计应该从更高的层面出发，而不只是做表面上的工作”。

（比如这些天气app中，只有一个试图解决用户的实际问题。就是最后一个告诉你，今天要带伞）

这里说到一个“真正优秀的设计应该从更高层面出发，而不是做表面上的工作。”确实颇为值得深思，就像苹果那时候带起了一波扁平化设计风潮的时候，一大群设计师跟着屁股后面开始扁平化，而事实上，扁平是扁平了，但是扁平了到底有什么用，其实压根没看出来。无非是把原来复杂一点的页面变成了干净简洁一点的东西，但实质上并没有思考扁平化的目的到底是啥。

说到这里，不得不提一个概念——design thinking即“设计思维”。设计思维的核心是以人为核心。那说白了基本可以理解成更加符合用户体验的设计。这个设计思维大部分是引用在工业设计上的，产品设计的设计标准应该更加方便消费者所使用。我们引带入页面设计中其实完全OK。网页设计的根本目的到底是什么，或者说是客户需要什么样的体验，另外一方面不要忘了从我们商家角度来出发我们需要什么，这个是作为一个页面设计师最需要思考的一个问题。

客户要的是知道怎么解决问题,就如同前面那个APP界面一样，你手机上更新了无数的天气软件，其实晴天我们压根不关心，我们需要的只是想知道突然降温了能够多加一件衣服，天

热了不要穿太多，下雨下雪的时候能够带伞，当然能有橙色红色警报这些告诉你今儿可以名正言顺的翘班啦，那就最好不过了。

一个产品如果不能解决客户需要解决的问题，那就没有价值。就好像最近这段时间到了年中大促一样，我翻了2个小时会场页面愣是没有找到我想要的东西。最后还是通过自然搜索找到了我想要的东西，当然，顺便瞄一下那个天猫年终大促的标对我会有更大的吸引力。所以我一直疑惑的一点是，为什么在活动大促页面没有类似于个性化推荐这种东西出现。

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

上面扯的远了点，来切正题，这里还是引用一下前面有提到的那个社区贴

产品设计总是与使命，愿景以及架构息息相关

从广泛的构思到像素级的细节，设计师应该始终思考公司的使命丶愿景和产品架构。他们在设计中所做的每件事都需经历这个过程。

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

在使命和愿景之后的，则是产品的架构。不是指技术层面上的东西，而是产品内各部分之间彼此的关联，是一个总体的系统。我在Facebook 上班的第一天早上，Chris Cox（产品

VP）做了一个绝妙的演讲（你可以点开感受一下）。下面的听众来自公司各个部门，C hris 侃侃而谈，然后着重阐述产品的架构，以及它是如何与公司的目标关联的。

对Facebook 来说，架构里有联系人丶好友丶兴趣点，上至世界名牌下到街边小店，还有一个能够显示所有这些事物关系的示意图。这是一个非常清晰简洁的产品，直击目标需求点。以我的经验来说，在没有一个清晰明了的构架想法前是很难在这团杂七杂八的玩意下做出一个超赞的设计的。在很多情况下，就像这个项目一样，作为设计师应该去解决问题并改进架构。比如谈到Facebook跳转其他应用的时候，我通常会在白板上画些类似这样的概念图：

产品的架构不是信息堆砌，它不是一个页面连着这个那个模块和空间，或者一堆死板的演示告诉你点这里是干嘛的，一个交互原型通常就可以很好地处理这些信息。一个更深层次的表达方式，这就是产品的架构图。它能表现出各个模块在整体系统中所处的位置以及它们的联系。而在intercom我们是用这种方式进行架构设计的：

我甚至没有印象在追波上有看到过类似上图这种表述设计思路的架构图。很少能看到设计师讲述他的作品如何匹配需求目标，如何驱使产品的视野向前，或是在整个架构中发挥了什么作用等等，以呈现这些设计的重要度。这应当是设计的基本，而非特例。

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

为什么有的店铺访问深度很高，而有的店铺很低，我相信看完上面那块的说明，应该会理解很多。

当然，这里之后会有人问的主要的两个问题：

问题1：我的SKU很少那我应该怎么去做店铺设计？

问题2：我的SKU多的无法想象，应该怎么去做店铺设计？

如果从设计的根本出发点来说，而不是只是做的炫酷的角度来说，这两个问题都不难解决。比如说问题1，SKU很少一般来说需要的是更加了解客户，因为客户不太会遇到找不到我要找的产品的问题，因为一目了然，而更多的是想知道我要这个产品有什么用，或者能给我带来什么东西。而问题2其实无非就是问题1的升级版，一方面要解决问题的需要解决的问题，另外一方面要解决客户如何找到自己需要的产品。

（一般情况下，我对搜索框的需求量远远大于左边打的那几个字的作用，因为能够更加准确的找到我所需要的东西，并且可以多条件筛选。而左边那种大类的分布实际上看过页面数据的人基本都知道，只有首页和所有宝贝的点击率高一点，另外几个，只是凑数而已。）

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

搜索本店这个功能，我相信除了经常使用的人真心没多少人有概念，所以还是给自己添加一个搜索吧。

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

恩，这里继续引用一下

思考一下设计的四个层面

设计是一个多层面的过程。以我的经验而言，如何依次经过这几个层面来思考是有一个最佳顺序的。最简单的一种就是回想一下这四个层面：

我看见一个又一个的设计师单单专注于第四个层面而完全忽视了其他因素，这样自下而上的方式做出来的设计当然不如至上而下。如果其他三个层面的问题还没有解决好，那么诸如栅格丶字体丶色彩丶美感等方面的深入都是无用功。许多设计师说他们这样考虑过而没有付诸行动，是因为有时候只是觉得画一些好看的图片，和把自己掩埋在像素中比处理一些复杂的商业决策和人际关系要更加有趣。只关注第四个层面的因素，这无伤大雅，但这只是画画而不是设计。这样的话，你是一个数字艺术家，但并不是一个设计师。

针对这个问题我们来看看实际应用（选自顾家家居旗舰店）

大促不可避免的，你家的导航肯定会打上牛皮癣，而且比你的店招更加醒目，所占位置绝对猥琐，天生的高你一等，这个时候怎么办？

打破横版导航的界限，竖型构图，改变形状。从用户体验的角度而言，消费者希望能够看到有区块的重点，有重点的重点，有顺序的重点。

而鼠标悬停的变化触发了和消费者的简单交互模式，提示他正在看这个。

至于轮播不说了，节省空间，多维展示，千万不要浪费了这寸土寸金的页面首屏！同事营造夸张的视觉张力，促销感觉杠杠的！

搜索栏位置搜索一定要明确，前期打算直接放置在左侧导航的位置，搜索中预置内容直接表现你要推荐的东西，客户不喜欢的时候就让他自己更改吧。

单模块多页面展现活动促销机制，节省空间，鼠标悬停效果。

产品成列，右上增加触发模块，可查看更多，节省页面空间。原先有构想过变成猜你喜欢这样的文字表现，来增加为客户定制的感觉。中间圆形标签直接表现促销利益点，简单直接。

促销位置别忘了增加点口味清淡的，区别开一点，可以更加吸引眼球（下文有解析）

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

当然还有很多页面设计的小细节，这里不多做阐述，可惜结合实际做详细分析。实际上这里面也有很多没有深入推敲的部分需要去一点点的改进，进一步深化页面设计。如果大家喜欢，可以加群123735798，有更好的修改方案会实时更新。

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

说到页面，不得不说页面的整体框架结构的问题，上文已经提到过在设计过过程中需要思考的几个问题，下面接着来拆解。

相对早期或者说现在还有很多商家正在使用的一个页面特点基本是这样的

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

基于这个基础上，我重新拟定出了一套新的页面呈现模式，这个呈现模式在顾家家居旗舰店的现有页面上有一定的呈现，并且在数据上和过往的相比较有较大的提升。当然，考虑到后期针对客户群体的个性化页面设计，仍然需要花比较多的心思去深入研究。

在这个思路上，重新划分页面的框架结构，这里贴出一部分供大家参考

红色区域为主点击区域：以大场景的模式展现产品1 2再分主次（场景）

橙色部分为次点击区域：以个性化导购分类+核心促销产品的成列刺激点击（悬停效果，G IF动画）

黄色部分为最次点击区域：以“猜你喜欢”的伪定向推荐模式成列产品（白底，轮播）

事实上，通过这样的框架解构以后，分清主次关系以后，做有重点的突出，流量基本流向和预估流向基本一致。

当然，针对不一样的类目和客户群体需要有不一样的结构模式，研究好客户习惯和给予优质的用户体验这个无疑是页面设计的重中之重。

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

当然，不得不说的一个，既然有模块设计的大解构了，肯定会有整个页面的解构，而页面的解构必然要深入到跳转的问题。这里上图做解释

第一步，先做总体解构

第二步，做大类解构

第三步，做详细模块化解构，并能实现页面基本框架，并划定重点模块

第四步，做模块设计化解构，如何跳转如何分流，如何做闭环流量循环。

第五步，在以上基础上，如何实现较为有重点的表现及良好的视觉表现风格。

最后说一下

以上的页面设计思维模式，除了在页面设计上可以使用外，引申到你的推广图片上也是毫无问题的，先思考再执行绝对能够减少很多不必要的消耗。这年头，省钱也是赚钱的一种手段啊！