电商设计三部曲之认知篇-集创堂纯色

一、建立认知

下面一个电商项目，先看看项目是干啥的，100个，90个看不懂这个产品，学生回答（培训、教育），答案电商类百度vip返利商城。性质从我的网站到淘宝买鞋子，100块反10块。设计非常糟糕，以至于很多人把它看成培训类的产品，结果很多人就会放弃他，后面讲怎么一步一步优化。

认知，即怎么通过设计让用户快速知道这个产品是干什么的。普及一个知识，什么是枪型思维，发现社会节奏的改变对我们挑选产品，设计，购买选择带来非常大变化。

二、社会节奏的变化对设计的影响

通过对比淘宝10年间的变化。淘宝2007年的设计，发现那个时代设计的特点抛开色彩等，发现信息多，特别的密集，大量的信息堆积在一起，2016年设计，发现信息量少了很多 ，发现广告区更大更加精简。

2007年淘宝设计

现在淘宝设计

2007年特点：信息特别多，特别密集，信息的大量堆积

现在特点：信息量变少，广告区变大，变精简

三、人和信息可以分成三个阶段，信息Psat，信息now时代，信息future时代

过去会发现时代画像，纸质信息，内容非常繁杂，覆盖能力要强

信息past时代的特点：我们获取信息可能是几天以前的，我们很难及时获取信息

信息now时代的特点：我们可以随时随地的获取信息 例：给别人发商业信息马上收到，发朋友圈大量人都收到

信息future时代的特点：很多信息我们不知道需要，忽然间来了推荐，而且这条信息确实是需要，（女朋友过生日，推荐买裙子的例子）

1、PAST时代用户画像

信息past时代划分为移动互联网出现之前，最大特点获取信息的能力是非常不足的，所以人非常有耐心，经常围绕一个信息打转，渴望大量的信心，我们在抢夺，非常有耐心，那个时代有趣的事，我们东西往往会看看种类够不够多。（纯色买随声听的故事，一个是松下产的，结构简单，按钮非常少，卖200元。索尼产的高端的随声听，按钮特别的复杂，各种各样的功能，各种各样的模式，卖600元），信息贫瘠的时代里我们渴望更多的信息，渴望更多的功能。

2、PAST时代诞生渔网逻辑

渔网逻辑：信息需要覆盖，不关心用户需要什么东西，只要东西又多又全，就能吸引用户消费。渔网逻辑内容是开发逻辑，产品逻辑，会发现现在很多设计领导不关注用户想什么，只为能想到的功能都实现出来，认为功能越多，产品的成功率就越高。关注功能，关注覆盖率，大而全的这种设计

渔网逻辑的画像：关注产品本生的覆盖率（淘宝，天猫、京东等电商网站），发现平台化的产品基本上都是在覆盖。小商户，小产品很难用渔网逻辑去做，没有强的运营能力，没有强的资源，小创业者面临的共同问题，很难拼覆盖

现今节奏发生巨大的变化，我讨厌更多的噪音，讨厌更多的不属于我的内容，过滤就会消耗大量的时间成本

上面是纯色现在特别喜欢用的电商，产品运营非常的少，基本上可以用便宜的价钱买没牌子的奢侈品，喜欢一句话“我要的才是必要的”。

3、信息now时代

感受和之前渔网逻辑间的变化

新闻例子：过去你关注更多的是四大门户，新浪门户覆盖率非常强，新闻、金融、医疗等，但是今天这个时代很多人用的是今日头条，会发现用的越多，推送的信息越符合我的口味。

今天则个时代里会存在大量的时代噪音。信息噪音的产生，人人都可以是一个自媒体，朋友圈，每天都有大量信息，最大恐惧朋友做电商了，就可能失去这个朋友 例：纯色女同事生小孩了，第一天发了个九宫格，默默点赞；第二天连发四个九宫格，靠着30年的交情给了点赞，第三天连发九个九宫格，果断把别人屏蔽了。

源于每个人都变成了自媒体， 最开始做微商可能还可以赚点甜头，现在可能拼概率，所以噪音特别大，每个人都渴望获得敬请的信息，以前有人想他要学习材料，推荐100本书，非常感激，现在时代推荐100本书可能就是坑人，负责可能只会推荐1本。

每个人都是信息源

朋友圈做微商的、常发动态的

特点：人人都是自媒体，讨厌噪音，讨厌不喜欢的内容，每个人希望获得精确的信息。

4、Now时代与之相对应—枪型思维

简单枪型思维理解：更好的研究用户，然后开枪。想想我们的用户到底是谁，什么样的信息让他们嗨到爆，以至于他们愿意去购买，愿意帮我们传播。

枪型思维是集创堂重要的逻辑，希腊神殿有一句哲学最高境界的话—认识你自己，跟枪型思意思差不多，认识你自己，然后去做设计。通过对电商产品的接触，做之前首先要清晰定位自己的产品维度 ，从市场定位，是现有市场、细分市场、全新市场，打法是不一样的；产品到底是针对老人的、小孩的、还是其他的，打法也是不一样的；例：去年医药网的项目，一个有意思的现象，奶粉卖给老人和卖给小孩关注的点是不一样的，打折奶粉卖给老人可能会促销，但是卖给儿童，可能一罐都卖不出去，所以这时候就要看产品针对的人他们的特性是什么；

还有看产品用什么作为驱动力，比如技术作为驱动，运营作为驱动，模式作为驱动，特殊资源作为驱动，四种驱动力也会决定产品与众不同；看产品处在什么样一个阶段，到底是在前期核心功能做到很准的阶段，还是中期要求有活跃度的阶段，或者是在后期商业变现的阶段；看我们产品的生态，产品是单独作为载体的商铺，还是商铺作为整个销售载体里的一环。

四、怎么根据用户的喜好来设计

这个时代比较有意思的现象，很多老板上线了新的产品，发现我们用了六个月时间开发，结果用户六秒钟给我们卸载。大家可能有这种感觉，我们用了很多钱去推广我们产品，获取一个用户的成本是5~10块钱，但是用户很快就卸载了产品。

重点解决问题，怎么能让用户留的时间更长一点

首先，转换视角，从老板、设计师的视角转换为用户的视角；产品的使用者、产品设计和产品的使用者视角是不一样的。使用和购买产的人是没有耐心的，因为看到的东西太多了，产品竞争对手太多了；会发现留给你去研究一个产品的时间是一辈子，留给用户去研究这个产品的时间是六秒，那么怎么用六秒钟抓住用户

重点怎么让用户快速的认知我们的界面

中国现阶段能解决好认知问题的公司不多，很多大家知道比较出名的产品不一定能解决好认知问题，但是他们之所以被使用，可能具备品牌价值，人们愿意留的时间更长一点，但很遗憾我们很多产品前期不具备这样的价值

上图用户视角的产品

五、认知—头屏三要素

头屏：一个网站，一个页面，一个app最开始打开看到的界面，相当于人的脸。

头屏一定要解决是三个认知，我是谁、我有什么、什么内容吸引用户—头屏三要素。解决清楚这三个问题用户才能够留下来

腾讯新闻手机的网站：我是谁的问题除了logo，还有从整个结构里去感知的，我有什么内容往往靠导航，导航能够清晰的知道到底有多少内容，多少类别，我有什么吸引着你，形成认知结构以后，就必须要有一条足够吸引的信息迫使用户形成第一次的点击，第一次点击很重要，所以就要求产品符合人大脑认知习惯。

最开始的画面，第一我是谁的问题没有解决，看完根本不知道这个产品是干嘛的，一个糟糕的自我介绍，做商铺做自我介绍一定要清晰，让人清晰知道你是什么。第二没有吸引点击的内容，大屏区域并没有让人点击的冲动的内容吸引。

六、认知—文案

纯色最近1年非常重视文案的设计，发现电商让改dna，改品牌形象，重新树立一个模式，对于一个小创业者不现实 。首先自己不是很懂，很难把这个东西做的很好，其次需要很多钱，可能需要团队；改文案的性价比最高，而且非常见效果。经典的案例：360曾经做过一款产品360省电，后来产品什么都没干，只加了个王字，变成360省电王，访问量上升好多个点。

1、价值描述清晰

唯品会：一家专门做特卖的网站

烟七七：烟七七时尚欧美女装

上面是不价值描述清晰的案例，在产品前期，当很多人不知道产品的时候，一句话定义了产品的价值。当形成品牌概念以后可能又会产生副作用，可能限制商业模式，可能浪费商业空间。

比较从差的文案设计，没看懂，认知很吃力

ipod：最初文案“纤细灵动，有容乃大”看似华丽，其实没用，后来改成“将1000首个放到你的口袋里”

知乎：总有一个领域你比别人做的更专业

qq阅读：一生阅读伙伴，感知到量很大，很贴心

好的文案能够把产品的特点通过一种有情怀的方式传达给你，知道是干什么的。很多产品设计主观意识太强，并没有清晰描述自己的产品。

2、建立场景

上面两款产品头屏，一看就知道买粽子的，辣条：带你重回儿童时代，能够快速帮助用户建立场景认知。

3、列数据

数据的呈现方式能够让人快速感知

4、做过对

商家比较熟悉地方式，原价1000元，现价只要100元

七、认知—什么东西在吸引

通过眼动仪测试，可以清晰看到设计的问题。高亮部分是吸引人眼球的，高亮部分面积越大，程度越高，说明最吸引眼球。图中banner页占据空间最大，但是基本很少点击。发现最应该吸引用户的位置，用户根本上没怎么看。

最吸引人的位置感知不到产品的特点

眼动仪逻辑：越红的区域表示看的的越多，越绿越淡表示看的越少，白的区域表示没有停留

标准一：信息的强点是不是信息的强点

视觉的强点就是图中最亮的地方，信息的强点就是最希望被人看到的地方，希望被点击的东西

淘宝页中加入购物车是信息的强点，视觉的强点？最吸引眼球的红色，面积大，人脸，动画；设计不能出现太多的强点，头屏里面只需要一个强点，多了反而起容易出问题。

五芳斋：banner页面是信息的强点，结果发现页面点击不了，没有设置转换的入口

辣条：两边的辣条产品是信息的强点，但是并没有描述产品的价值，以至于第一眼看可能 不会点击；到底是从价值驱动还是文化驱动不并不明确，或者是打折还是有促销的信息不清楚，虽然呈现很多信息，但是没有点击的冲动。

标准二：视觉平衡，一致性，避免太强太弱

商品的条目的视觉要平衡，每条信息的强弱是差不多，没有特别强，特别弱的。如果有一条特别强，而且并不是用户想买的，可能会忽略其他信息。排列一起的时候一定要力求视觉的稳定

京东双十一：发现每条强弱差不多，所以分流方面没有太大问题。

发现用户选择时候会错失很多信息，商品强弱明显是不一样的；会发现右下角的包明显很弱，可能就会导致视觉的盲点。

标准三、避免视觉的黑洞

图中右上角，可能根本就看不到，所以应该避免视觉的黑洞

设计中很容易出现视觉的黑洞，很容易看不到，可能就会导致用户忽略一些信息

人视觉逻辑：我们在关注一些内在的内容时，视觉是带有一定的能量的，视觉比越高可能分配的能量就会越多，视觉比低的能量的分配就会越少，分配能量越少，体会到信息的感知就会偏弱，无法建立清晰的认知，导致一扫而过。

总结：货品的排列、对方在色彩和感知 上要趋于平衡，不要出现暗角，暗角是通过对比产生的

把banner页面换成吸引人点击的页面，会发现点击率会上升，但是还不够，发现我是谁，我有什么内容，什么内容吸引这我这三点中第三点解决了，但是前两点还没解决，虽然改变的文案为“省钱、省事、省时”，但并不清晰知道是干什么的，价值描述不够清晰。

有时发现的有些电商是模式的创新例：卖茶的，传统的方式就是卖茶，但是模式创新可能会让你花20000买茶园10年的一亩地产权，一年给800包，而且帮你印制企业的logo，但是很多企业家会觉得一年800包不够，可能会买2000包，额外的1200包就需要花钱去买。

模式的创新前期做成界面可能形成不了清晰的认知，百度返利就是模式的创新，以至于前期大家看不懂，这就遵循一致性原则，保持和其他产品的一致。但又并非单纯抄袭那样的简单，一致性起码保持认知的一致。

比如看到两个页面，会发现右侧的更像电商的产品，淘宝、天猫、京东都差不多这样。

百度的一个竞品—返利网

返利的品牌有超级反，淘宝反、商城买…9.9，返利是一个高级的品牌，在解答我是谁，我有什么，什么内容吸引我三个方面就做得好，最后就把这种样式抄到百度返利。

发现文案购物省钱神器，相比认知更清晰了。一元抢，超级反…跟返利差不多。这种抄袭是合理的，原因是建立认知是一个比较复杂的过程，在前期没有建立认知的最好的办法是跟产品的一致趋同，会降低人认知的的成本。

生活例子：面试的时候穿皮衣皮裤不就不符合公司的一致，就很可能被拒绝。付同虽然很优秀但是面试屡战屡败，问纯色原因，纯色分析可能是他长得太帅，面试官觉得可能不是来干事的，建议他带个眼镜，之后面试得到很多officer。

一句话，不要挑战设计的规则，除非你根本性改变了问题。但是一般团队没有能力改变根本性的问题。

八、用户模型认知

每一个产品都有一个用户模型，

团购例子：纯色喜欢吃巧克力，但是很抠，所以他选择团购。当他打开这个页面，没发现团购的按钮，他顿时惊呆了，第一反应是不是浏览器的问题，连换几个浏览器，发现不并不是浏览器的问题，可能是页面的问题。作为专家用户类型的他对页面做了深入研究，发现只能订阅不能开团是设计者的模式，但是作为购买者，并不想这样，想直接买，这两者发生强烈的冲突，所以就会导致认知成本高，转化率下降

现今当信息流通快的时候，人的个性化会变强，垂直的机会才会出现。完成个性化就必须了解我们用户，对用户进行人物建模。

人物建模：用户买我们产品的时候他的想法是什么、行为是什么、期待是什么。

明星衣橱的案例

产品简介：通过明星的打扮，匹配有多少件产品可以在淘宝上买的链接，通过明星、达人的打扮为衣服进行倒流。

目的：了解谁会用这些东西，谁会期待这些东西。

研究过程可称之为，了解、假设、验证。了解前面要收集数据，然后假设是一个什么养的人，假设他的行为方式，假设他的想法，最后进行验证假设是不是合理，就会是的人物更加的清晰。

建模的过程A抽取产品数据，确定产品目标人群，B定义产品的关键词C线下实体店观察，通过观察购买行为，通过行为解读的数据更准确，到自己实体店铺观察可能会有宜兴不到的结果，两不需要太多，六个人左右；D头脑风暴E总结得到关键词（明星、跨境、品质）F假设的阶段的人物建模，得到跟明星学搭配的年轻白领的行为以及最求时尚白领行为，得到他们关注什么东西，内心想法是什么。通过了解他们喜好，想法，就能得到在关键位置放什么;G收集问卷和用户访谈;H调研的部分数据；I调研数据的总结：J明星衣橱老用户的吐槽：K深度访谈，访谈比较有代表性的人；L人物建模，行为，需求，痛点，建模时候尽量描述人的行为特点，有助于设计师发现创新的东西，创新的东西可能有助于大卖。好的人物建模能够对产品的嫁接，有助于设计，有利于产品产品dna去执行, 品牌建立。最后就是调研总结，优化方向。