售前设计，主要是指在To B销售中从销售线索挖掘到设计项目方案直至最终签约的这个环节。这个环节可谓是真正的商战，大家为了战胜其他竞争对手，都会绞尽脑汁投入极高的人力和时间成本竞标。
这是最近受邀参与国信期货APP产品升级竞标时候在售前所做的一个竞品分析。目的是通过拆解同行业中优秀的产品，洞察别人的设计方法，吸取别人的智慧和经验，找出国信期货APP当下所存在的真实问题，最终借此初步提炼出整个APP产品升级的设计方案。
需要说明是，由于只是初期的售前阶段，所以这篇竞品分析所筛选的产品不多、范围也只是对金融期货APP的首页设计拆解。之所以选择首页，这是因为首页是一个金融APP产品权重最高的页面，它不仅决定了用户对一个产品的视觉印象，而且对新用户的激活和老用户的留存发挥着关键作用。最后也希望借此案例的分享，让大家认识到竞品分析的价值，以及在商业设计的一些真实应用场景。
在分析竞品之前，我们先简单了解一下国信期货APP的产品目标，它主要为投资者提供期货交易、期货行情、手机开户、业务办理、热点资讯等综合金融服务，致力让每一位投资者都能享受安全、便捷、快速的期货投资服务。接下来，我们对当前国信期货APP首页进行完整的拆解，看看目前存在有什么问题。
什么是内容层？内容层就是一个产品应该围绕着业务目标制定什么设计策略和设计什么功能内容，这是一个产品设计最重要、最关键的环节，因为它决定着这个产品的成败。
从当前的首页内容规划来看，内容层主要分为三个部分。第一个部分是导航栏、核心功能和轮播图，第二个部分是金刚区，用户可左右滑动切换，第三个部分是TAB栏，有热点、资讯等栏目。不难看出，整个首页的内容设计中规中矩、缺乏创意，仅仅是产品功能的堆砌，而并没有结合国信期货APP「安全、便捷和快速」的产品理念去思考制定设计策略。
什么是视觉层？视觉层就是一个产品的界面设计，是带给用户最直观的视觉感受，它也是我们常说的「美丑」。视觉层决定着用户对这个产品的价值感知，根据尼尔森十大原则的审美和简约设计原则，我们知道用户会更信赖更美的设计，所以任何一个产品，如果要想赢得用户的好感，视觉层是非常关键的一个环节。
明确了视觉层的概念，我们再来观察当前国信期货当前的首页设计，可以发现整体的视觉体验非常粗糙，整个页面的设计无论是配色、布局，还是字体，都不和谐、不统一，图标、视觉KV图不精致，给用户留下非常混乱、廉价的视觉体验。
作为期货行业内交易平台最为齐全的期货公司之一，目前国信期货的APP首页设计，不管是内容规划还是视觉设计，都没有呼应产品的目标和设计理念，显得非常业余，完全没有体现出公司强大的品牌优势，严重影响用户对国信期货品牌价值的视觉感知。
接下来，我们将会拆解行业内和国信期货业务功能相似的其他优秀APP首页，看看他们的内容如何规划，视觉又是如何呈现。
国泰君安期货APP以「引领金融服务，共悦财富人生」为产品设计理念，主要为用户提供期货业务办理、期货行情和交易分析等功能，其次还为用户提供专业、完善、深度的期货行业动态和解读，帮助用户轻松掌握期货市场先机。
从内容层观察，国泰君安期货的首页主要分为三个部分。第一部分占据了首页0.5屏空间，从上至下分别是头部导航栏（包含了搜索框、在线客服和消息中心），五大高频核心功能（期货开户、国君研究、期货学堂、小君直播和业务办理）和KV视觉图（可根据不同的主题进行实时更新）。从这个部分看，虽然布局中规中矩，不过KV视觉图部分的设计创意很棒，可以根据不同的主题进行实时更新，有利于对新用户的激活和诱发用户进行传播，为产品拉新引流。
第二个部分是金刚区和轮播图。金刚区支持用户进入编辑页进行功能自定义，从这里可以看出国泰君安APP的核心业务包含市场数据、热门活动、研究资讯、期货学堂、交易功能、信息查询、业务办理和机构服务，非常丰富。其次支持自定义设置，也节省用户的操作成本，可以提高低频功能的高效触达。
第三个部分从0.75屏开始，是一个聚合的 TAB栏目，包含了发现、7x24、公告、要闻、自选等内容资讯栏目。其中「发现」作为首页默认的栏目，内容非常丰富，包含了行情热力图、小君直播、期货学堂（期权策略加油站和每日答题赢积分）、期货百科和深度报告，这个栏目是国泰君安首页提升用户留存率的关键内容，设计得非常用心。其他栏目则主要以资讯发布为主，为用户提供实时的金融资讯。
从视觉层观察，国泰君安的首页风格稍显混乱，头部的宣传图不够精致，也缺乏视觉冲击力，而且对头部的视觉体验造成了干扰，分散了用户的注意力，提升了用户识别成本。其次金刚区的图标不够精致，颜色的搭配和整体产品的设计调性不匹配，首屏的设计体验一般。
可以看出，国泰君安的首页在内容层的设计相对丰满，而且还有很多创新的设计，比如小君课堂，以插画形式的金融知识科普宣传图可以提升用户传播率，其次还有每日答题赢积分、期货百科等创新内容，这对用户的激活和留存有非常大的帮助。不过视觉层相对比较弱，配色非常随意，甚至和品牌的VI色调都不匹配（国泰君安VI是蓝色系，而APP是橙色+蓝色搭配，让人难以理解）。
中信期货APP集合了极速开户、高速行情、场景交易、基金优选、精选投研资讯、大咖投教等服务，致力于向投资者提供权威、及时、高效的综合金融服务，成为期货+基金的一站式综合金融理财平台。
整个首页可以拆分为五个部分。第一部分，从导航栏到轮播图，差不多占据了0.5屏的空间，包含了导航栏（包含搜索框、客服和消息）、核心功能（期货开户、基金开户、研究资讯和掌上营业厅）、金刚区（支持用户自定义，包含理财、期货、业务办理、活动、资讯等五大类功能）和轮播图。从这个部分可以看出，中信期货的功能设计得非常丰富，有财富日历、期货模拟、读书会等创新栏目，但为了降低用户的操作成本，首页又设计得非常简洁，确保用户可以快速完成操作目标，提高触达率。
第二部分占据了1-1.5屏的空间，从上至下分别为期货市场洞察、期货排行、视频专栏、热点基金、期市点金和新手投教。这个部分主要以展示专业的期货市场数据、分析为主，为用户带来全面、专业的期货数据资料，其次通过视频专栏和新手投教等知识内容，提升新用户激活率和老用户活跃度。
第三部分是财金要闻，以信息流的形式设计，用户可以一直下拉刷新查看24h快讯、期货要闻和基金要闻等，这个部分主要是为用户提供行业最新、最全的期货资讯动态，从而培养用户习惯，提升用户留存率。
中信期货的首页内容非常丰富，而且非常简洁、规整、清晰、平稳和统一，这主要归咎于中信期货使用了卡片式的设计风格，柔和、和谐、识别度高，所以仅仅从视觉层的感知，就能给用户带来非常愉悦的用户体验。虽然整体页面缺乏冲击力和品牌基因，但丝毫不影响中信期货给用户留下极其有好的产品印象。
中信期货的首页非常值得参考学习，无论是内容层还是视觉层，都非常优秀。特别是卡片式设计的应用，让整个产品给用户带来非常棒的用户体验，统一、简洁而又丰富。如果能再加入一些视觉冲击力和品牌基因，将会带给用户更完美的视觉体验。
中泰期货APP支持国内期货（含商品期权）交易及行情。包含在线开户、金融资讯、交易日历、行情观察室等特殊模块，随时为投资者提供方便、快捷、高效的服务。
中泰期货首页的内容非常精炼，长度仅有2屏，主要分为导航栏（搜索框、客服和消息），核心功能（期货开户、投研中心、场外期权和掌上营业厅）、金刚区（两排，合计20个），轮播图、瓷片区（晨会纪要、交易罗盘、私享汇和行情观察室）、主力（期货行情精选）和热点快讯。这样的设计，也许和他们「快捷、高效」的产品理念有关，干净利落、快速高效展示产品核心功能，引导用户完成操作目标。
整个首页的视觉风格和中信期货很像，统一、规整又统一，而且在视觉创意方面，图标比中信期货还要精致。其次首屏融入了品牌基因，提升了视觉冲击力，也形成了设计差异化，给用户留下较深的印象。整体的颜色也搭配得非常和谐，整个首页给用户的感觉和谐、亲和、愉悦，体验非常棒。
中泰期货的视觉风格值得借鉴，在首屏融入了品牌基因以后，和其他APP产品相比，形成了视觉差异化，提升了用户的品牌记忆度。
通过对国泰君安期货、中信期货、中泰期货的首页设计拆解，以点带面，我们为国信期货APP提炼了初步的产品升级思路和方案。
● 内容层：除了具备期货APP的必备内容之外，比如期货开户、行情分析、行业资讯等，更应该围绕着「安全、便捷和快速」的产品理念进行内容规划。内容不用过多，但需要精炼、明确和清晰，让用户感受到产品的安全、便捷和高效。
● 视觉层：从中信期货和中泰期货这两个竞品可以看出，卡片式的设计风格不仅是期货APP中使用频率最高的，而且具备极强的亲和力，层次分明、统一规整，可以给用户带来非常愉悦的用户体验。其次还需要考虑加入国信期货的品牌基因，提升首屏的视觉冲击力，让国信期货APP从视觉层就和其他产品形成差异化。
在兰迪·蔡斯的《竞争性销售如何在B2B市场中胜出》这本书的第一章，作者说，如果你想把这本书阅读下去，请你务必先认同这个观念——在商业的竞争性销售中，你的失败并不是因为竞争对手的价格比你低，而是你的设计方案价值没有比别人高。
我无比认可兰迪的观点，也感谢这本书最近给我在商业设计中带来的很多启发，甚至无比坚定了廖尔摩斯设计工作室的售前设计策略和方向。你或许会说，别人只是找你要一份报价，你为啥要白白做这么多工作，我只能告诉你，这就是策略，也是我们的设计价值观——真诚、热忱、用心对待每一个设计机会，用我们的专业解决客户的问题，让客户为价值付费！
作者：廖尔摩斯
链接：https://www.zcool.com.cn/article/ZMTU5NDc0NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
