如何设计商店图_part-3——赏析游戏圈里的“尖子生” 如何设计商店图

之前给你介绍了：

无论个人开发的独立游戏，还是大公司的大产品大制作，都需要做出一个足够吸引眼球的，能够把用户打动的，让他毫不犹豫就下载游戏的广告图。
漏斗原理。在激烈竞争中，使用夸张甚至虚假的广告图，尽可能的捞取用户，哪怕大部分的用户流失，但我只要捞用户的成本低于收益，那也是划算的。
最早向我讲述“漏斗原理”的老师父，现在已经不在讲“漏斗原理”了。由于要考虑是否有助于产品今后的生命周期，方法还需“看情况”，产品不同的阶段，可以用不同的方法。

Part3

文章图片
image.png 不知道之前的做商店图的“心理准备”，包装、误导、欺骗，有没有令你感到不适？
我们换一个角度，从一个实践者（我不喜欢“美工”、也不喜欢用“执行”来描述设计师这个身负技艺的群体）一名设计师的角度来看，做出数据表现好的广告图就是在帮助用户——还真不能全是误导欺骗——帮有闲或有钱的他/她，在众多产品中，快速找到他需要的那款产品，减少他做认知判断的成本。
如此这般想起来，你要是把商店图做好，就是做一件大好事。
怎么做到这一件大好事？
别急，比方法更重要的是如何判断一个广告图的优劣。
商店图的常见套路本篇选一些优秀产品的商店页做赏析。
我们先从欣赏商店图片开始。
Clash of clans（以下简称COC）的商店图：
游戏已经存在5年了，最近又开放12级的建筑给用户们。这是游戏里的一件大事，把文案写得大一点，把建筑都摆出来，让用户看得见游戏里有新鲜事发生。

文章图片
IMG_2474.JPG 游戏里可以敌对盟打对战，地图、UI上，都分了一左一右，各自分属不同的实力，其中左侧还有3个小兵，地图上有交战双剑和破碎效果。画框边上还有激昂的展示，注意他的拳头和表情，呐喊的大嘴上，哈喇子还拉着丝线。左上角有一只小蓝龙，和蓝天的色彩贴近了，不过还好，它不重要。

文章图片
IMG_2475.JPG 部落战打完了，能兑换好多号东西。有资源，有道具，都很实用。

文章图片
IMG_2476.JPG 建造村子，怎么工人扔了锤子跑路了？

文章图片
IMG_2477.JPG 单人对决

文章图片
IMG_2478.JPG 整个商店图，用了一张长画切割成做背景，边缘之间是可以接连的；又设计了统一的画框，5张图由此成套。
游戏内通常都是俯视视角，背景画却是平时游戏中难以表现的平视，除了打破常规，也能利用边角，再展示一些“部落”的世界观。
从 COC的商店图，我们能学到什么？
在这里我们可以看一下。COC的商店图，设计得非常真诚。它就是把游戏内的一些画面展示给用户，写了一些自己的文案。
你看到这一定会觉得，说好的包装呢？夸张化呢？COC的广告图都没有。
为什么没有？
真正的好产品不像烂产品那样紧迫地需要营销。
商店图就是游戏截图加slogan，童叟无欺，大巧不工。所以你从coc的商店图里，想学商店图的“美化之术”，你算是找错对象了。
既然学不到包装，我还给你看COC的广告图，这不是自相矛盾吗？
别急。任何一个技能都需要从基本功做起。就像学武有起手式一样。真诚的COC商店图，会教给你最基本的，不出错的制作方式。

抓眼
连接
简单
一致

名词解释
抓眼图像内容要足够抓眼球，怎么才能做到抓眼？
也许角色是某个你熟悉的演员、也许是画面有冲击力，也许表情很有代入感，也许动作看起来血脉贲张，也许是利用纵深镜头好像把你拉入画面空间、也许色彩很鲜明……
为了让你记住这一点，我找了一个眼睛被抓在手里的图：

文章图片
ni 连接商店图在内容上要连接产品，包括产品的元素、玩法；
在展示方法上，要注意与观众的互动，比如角色似乎在向观众说些什么。也许要配合文案，向观众发起一个问题……这时你最好别展示一个背影和后脑勺给观众。
这种向前连观众，向后连产品的状态，有点像……插线板。
给你放一张插线板的图。

文章图片
180819-连接_看图王.jpg 简单用户的时间是最宝贵的，要最短时间显示清楚主要内容
用户的耐心总是有限的，展示的内容含义要直来、直往、直说、直白
展示内容的空间仅仅掌上方寸之地，没把画面做清楚、没把画面做直白，就别去堆积无用的信息，别去费心想藏什么彩蛋。
一致别把画面弄成东拼西凑的杂牌军、百家饭。想办法做出套图效果。统一的色调、统一的板式、统一的背景、统一的镜头、统一的元素……想办法让多张图片展示一致。
不光是图像要一致，还要想想，单独每张商店图的文案，与图片描述的内容一致吗？
再举一个反例子。国产某游戏，为了不给它做广告，我不截取它整个产品页，也不说它叫什么（8月18日在排行榜排得很靠前）。
图1，真的要这么大言不惭吗？颜值爆表亏它敢说的出口。

文章图片
IMG_2455.JPG 图2，黑夜里的三国与“征战”有何关联呢？

文章图片
IMG_2456.JPG 图3，如何“跨服”，如何攻城略地，我真的辨识不出来。

文章图片
IMG_2457.JPG 图4，这个还算贴合吧。

文章图片
IMG_2458.JPG 图5，合击？怎么和个“合”法，集中了谁？右下角的哥们是来干嘛的？

文章图片
IMG_2459.JPG 看完以后你可以默默体会一下。这是个什么玩法的游戏？
再清点一下，你都看到了什么？
蓝黑色调，卡通英雄角色若干、圆形的版式、主标题与副标题。
但是真正留给用户的是什么呢？
你的产品长什么样？什么样的游戏玩法？有什么特点？
这些东西有吗？都没有。
文案重要吗？
如果文案不重要，为什么要做的很大很亮？
如果文案重要，为什么不把“颜值、征战、跨服、合击”等关键词在图像上充分体现出来？
这就是没有做到“连接”。
版式设计占据了一半的面积，仅剩一半面积的游戏内容又被放在一个圆形之中，有时还被分屏展示，每个子内容分别得到剩余1/2的面积。这是没有做到“简单”。
抓眼的设计可以说……没有。
最后夸它一点，“一致”算是做到位了。
整套商店图没有传达出产品的基本信息，是一个非常大的遗憾，和失误。
而这是一个非常“经（懒）典（惰）”的国产游戏商店图的设计套路。
通常发布这些游戏的账号，有一个特点，就是以“汉语拼音”为发行人。如果发行人的名字是“张三”，那么你会在发行人的名字里看到：“San Zhang”。游戏评论数通常数以千记，置顶评论都是车轱辘话夸游戏。
可以说，如果看见发行名字是用拼音的，可以毫不犹豫地放弃下载。
复习一下看完正反两个例子，你再耐心地想想“抓眼”、“连接”、“简单”、“一致”4个要素。
抓眼
因为信息太多，同质化又严重，如果不狠狠地“咋呼”，就不会有人来多看你一眼。所以要抓眼。
连接
想挖掘玩家喜闻乐见的卖点是对的，但写了各种屌炸天的宣传语，而画面中看不出来任何可对应的内容。
堆积些角色图片，但是我们都知道，这个东西在游戏里无非也就是一张透明背景的图片而已（现在流行叫它“立绘”），它们对于这个游戏的玩法没有什么促进性的作用。
如果真正确定了某一点是这个游戏的特色，那么请在在一张图，要尽可能有效利用你全部表现面积的，去把特色展示出来。
如果你强调升级，那么请把升级的概念好好包装出来；如果你强调英雄角色丰富，可选英雄非常的多，那么你就把英雄也罗列出来。
简单
这里要强调一个信噪比的概念：一个信息，真正有用的部分我们称之为“信号”，没用的部分则是“噪音”。噪音如果多了会怎样？会干扰信号，会让信号接收的强度变弱。
把精美的元素堆积起来，就会得到一张好图吗？
没用的。人的视觉是需要有主次的，而画面展示空间就只有那么方寸之地。
也就是说，如果你在一张图上展示一个信息，那你完全是充分利用这个方寸之地；但如果你要展示5个信息，那每一个信息平均分配的话，但个信息也只能获得20%的效力。而观众目光扫过时，读取信息是有先后的。这会让主要内容的展示强度大大地缩减。
信息在单张图片里，抓大放小，强调重点，去除噪音，是一个非常重要的做法。
尤其要注意，内容要表现出可辨识、可理解。注意，该由谁辨识、理解呢？
是用户。
打发时间的娱乐很多，游戏只是其中一种；游戏很多，你做的游戏也只是其中一款。
所以，用户没那么需要你，而你很需要他。想到这一点，请面对用户，向前一步走：不要把图片设计的隐晦含蓄，不要让人看图沉思片刻后才恍然大悟。
一致
一致性的反面是什么：
左一张右一张、左一样右一样。“横看成岭侧成峰，远近高低各不同。”看起来就不像一套东西，拼凑痕迹明显。这一点很要命。
东拼西凑背后的潜台词是什么？
潜台词是这个游戏没有基本做产品的诚意，随随便便就拿出来糊弄人。
如今大家都在努力的争取做一个好产品、至少假装自己在做一个好产品。
商店图做的不一致，就给不了用户一个好产品的预期。
可以说是，浪费了商店图的位置。
小结总结一些今天的内容，介绍了商店图设计的4个侧重点，这4个侧重点“抓”、“连”、“简”、“一”：

抓眼
连接
简单
一致

我们用COC作为正面的例子，来看一个不出错的游戏商店图要如何设计。

文章图片
image.png 下一篇里向你再多介绍几个商店图常见套路。 【如何设计商店图_part-3——赏析游戏圈里的“尖子生”】相关连接：
如何设计商店图_part-1——功能、目的和心理准备
如何设计商店图_part-2——骗与不骗，这是个问题
如何设计商店图_part-3——赏析游戏圈里的“尖子生”
链脑——如何让人一秒就懂
“不简单”真的是好事吗？｜设计