1.3.3 模仿好的产品

有时候设计师为了与竞争对手的App有所区别，会绞尽脑汁绘制出比较特别的导航条图标，制作出一套精美的转场动画等。但是在制作这些精美的设计效果时，需要有个前提，即设计师是否充分了解自己的竞争对手的App，能否基于竞争对手的App现有的设计方案做改进和创新。跟竞争对手的App设计相比，用户不太关心设计师精心设计出来的按钮的位置，用户更多的是关心产品所提供的服务是否满足了他们的需求。

模仿竞争对手的设计一方面是为了少犯错，但是无论是产品经理还是设计师，在做决策时一定要提醒自己跟竞争对手不是比谁做得更多，而是比谁犯的错更少；从另一方面来说，不必再花时间重新教用户使用新的设计和节省用户进入页面的时间。最重要的是让产品先在市场上立足，再去慢慢追求产品差异化，而不是一开始就追求产品差异化。当一个产品以一个迥异的方式被呈现出来时，必须要考虑该产品被用户接受的时间。所以在做设计的时候，要模仿优质的竞争对手。最终衡量一个产品成功与否的关键点是利益，而不是美观。那么如何通过模仿好的产品做出符合自己产品商业诉求的App呢？下面将从设计出发点、设计逻辑、信息提炼和设计实现方式这4个环节进行讲解。

◎设计出发点

设计师接到一个设计任务时，需要先明确设计这个方案的出发点是什么。首先，要清楚地知道设计的总体目标是什么，重点要向用户传递的是什么信息，是想向用户宣传自己的品牌文化，还是想让用户更容易地阅读信息。如果是为了提高商品的转化率，那么设计师要在用户从进入商品列表到支付的这个过程中，在视觉上去引导用户，引导用户完成支付这一决策。其次，要理解产品的受众。如果是个人用户（To Consumer，2C）类的产品，受众即用户，设计师要直接为这些受众设计产品；如果是企业用户（To Business，2B）类的产品，受众可能并非用户，例如内容管理系统（Content Management System，CMS）产品的功能是帮助企业管理用户关系、订单、资产和库存等，受众是负责采购软件的人或者是老板，而用户是使用此软件的人。

设计师在考虑设计方案的出发点时，还需要关注用户对设计的期许。如果要鼓励用户使用自己的产品，要通过合理的设计方案让用户感受到自己的产品能陪伴他们。例如，可以突出页面上的用户头像，让进入该页面的用户有一种有人陪伴的感觉。期许不一样，设计方案也不一样。下面分别分析一下大众点评App和Instagram App的页面。

如果用户没有将大众点评App与微信绑定，那么用户进入大众点评App时首页的底部会弹出一个浮层来引导用户去绑定，浮层的内容从左到右分别放了两个女生的头像、引导文案和绑定按钮。其中，两个女生的头像可以向用户传递“我的好友也在这里”的信息，更好地提高了用户绑定微信的意愿。Instagram App发现页的顶部浮动着一行头像，第一个是正在直播的用户的头像，这里的头像会不停地更换，其他的是推荐用户的头像。这个设计方案有两个比较好的点值得借鉴：第1点是变动的内容能更好地吸引用户注意力，引导用户去看当前的直播；第2点是使用和头像一样的UI样式能够保证页面的协调性，又不会降低页面的引导性。

设计师在做设计的时候，除了要明确设计的出发点外，还需要关注产品方对用户行为的期望，以及关注用户在使用产品的过程中产生的情感依赖。

◎设计逻辑

设计师在明确了设计的出发点后，还需要分析与自己产品相似的产品的设计方案。

设计师可以通过尼尔森数据或行业数据来分析用户特征。设计师也可以和产品经理交流得到用户的基本画像。如果是海淘类产品的设计方案，目标用户的用户特征是喜欢品牌和正品，对质量的要求高，消费没那么理性，知道产品的方式更多的是通过身边的人或口碑互相传播，更愿意跟随名人的建议去做决策。针对这些用户特征，设计师可以总结出：当向用户传达产品是正品并且质量很高的信息时，用户首先会想到香奈儿和法拉利等大品牌的产品。

分析数据元素是指观察竞争对手的产品的设计风格或元素的处理特点，如在电商类App中，设计师将商品图片多余的元素去掉了，只留下了白色的背景。

分析框架布局是指分析具有承载功能的控件的摆放。例如，搜索输入框一般是放在头部导航条上面的，并且占了很大的面积。海狐海淘App和洋码头App主要是以商品图片在左、信息在右的方式对商品信息进行展示，网易考拉App主要是以商品图片在上、信息在下的方式对商品信息进行展示。

分析交互逻辑是指分析元素之间的关系。例如，网易考拉App中的商品都是通过一张封面引导用户，每一个封面都是一个主题，这些主题里面都有相关的推荐商品。用户可以通过左右滑动的方式来查看其他商品，当用户滑到最后一个产品时，会有一个“查看更多”的引导按钮，点击该按钮后就到了该主题的二级页面，该主题里面的所有商品信息都会展示在这里。

◎信息提炼

设计师对设计逻辑进行分析后，可以把数据元素对应的排列方式、框架布局的规划策略和交互逻辑的跳转方式都提炼出来，并有针对性地截取图片。笔者经常会将截取的图片打印出来，然后做分析记录，提炼出符合自己设计要求的要素。但设计师在这个过程中要注意一点，那就是考虑好自身产品所处的阶段和在该阶段公司对这个产品的运营能力。例如，设计师设计的海淘类产品处在刚起步的阶段，公司对供应链、物流的把控能力没那么强，所以所售商品品类不会很丰富。此时，设计方案就不能按照一个很成熟的海淘平台的设计模式去设计。因为信息的丰富度不够，对设计来说也是一个很大的挑战。因此在这样的产品阶段，设计方案采用如海狐海淘App的部分页面的排版方式会比较合适。

◎设计实现方式

设计师的最后输出物是高保真的设计稿。设计的实现方式不仅是指设计师做出来的页面是什么颜色和内容布局是怎样的，更重要的是验证自己的设计方案是否符合一开始的设计出发点。如笔者在做maxIN海淘App这个项目时，第一阶段的设计出发点不是为了引导用户赶紧下单，而是要向用户传递这款产品是一家注重品质和情调的海淘App。产品的价值主张不仅是买家与卖家之间的交易关系，最主要的目的是让买家提升生活的品质。

笔者在做maxIN海淘App的设计方案时，采用了本书1.3.3节中提到的设计的4个环节来做决策，但是在商品的布局上并没有模仿小红书或考拉等主流海淘App的设计方式。笔者团队在仔细分析产品的风格与哪一款App比较像时，决定模仿国内几款垂直类App的布局，如想去、良仓和片刻等App。考虑到maxIN海淘App是刚起步的产品，产品内信息量较少，可能最多有20条，采用这样的首页文字布局方式一方面能体现UI的大气，另一方面也能弥补信息不丰富造成页面空白的问题。

设计师在模仿与自己产品相似的产品的风格进行设计后，还需要进行方案自查，以检验设计方案的效果。方案的自查主要围绕以下3点展开。

第1点：设计的出发点。检验设计方案是否符合本阶段产品向用户传递的价值主张。例如，maxIN海淘App给用户传递的价值主张是maxIN海淘App是一个提升买家和卖家生活品质的平台，所以视觉上主要突出内容和用户，弱化了商品价格和履约订单的按钮设计。这些设计方案会在用户查阅自己主页和商品详情时传递给用户。

第2点：易用性。好的设计方案应该在符合用户场景和用户使用能力的前提下，用最简洁的页面和简单的按钮帮助用户去完成操作目标。当设计师拿出设计方案后，需要多去推演设计方案是否符合用户的使用场景。设想在某一具体的场景下，用户是否能顺利地完成他们期望的目标，如果用户使用得不顺畅，那设计方案就是不合理的。

第3点：符合公司的商业策略。不管是什么行业的公司，在公司的商业策略中一定会有成本优先这一条。设计师很难接触到成本方面的东西，同时设计方面的成本也比较难量化。但有一个理念设计师要知道，不从长远规划考虑的设计方案都不是好的方案。例如，设计师在做一个方案时，如果不考虑未来一段时间内商品丰富度或业务增加后需要修改页面的情况，到了真的需要修改页面的时候，就会发现客户端和服务端的方案都要重新修改，设计师很难预料这种情况所造成的结果。所以，设计师不是去做迭代方案，而是去做一个完美的解决方案。如果方案不合理，会导致老用户流失和新用户转化率低等问题。虽然多数情况下没法将问题产生的原因归结为设计方案，但设计师要有这样的意识。

下面举两个引导用户主动关注他人的例子，分别是氧气App（性感内衣生活社区）和大众点评App引导用户关注的设计方案。

用户在未关注任何人的情况下，进入氧气App的“推荐师”这一页时，“推荐关注”会出现在“推荐师”的页面，用户需要用手指在页面上滑动一下才能看见推荐关注的区域。而用户第一次进入大众点评App的“关注”这一页面时，页面会先弹出一个“推荐关注”的列表，可以在该列表上直接关注感兴趣的用户。从操作结果来看，大众点评App的方案会让用户多进行一步操作，也会提高用户对该页面内容的注意力，引导效果更好，也比较符合该产品的业务诉求。