售前設計，主要是指在To B銷售中從銷售線索挖掘到設計項目方案直至最終簽約的這個環(huán)節(jié)。這個環(huán)節(jié)可謂是真正的商戰(zhàn)，大家為了戰(zhàn)勝其他競爭對手，都會絞盡腦汁投入極高的人力和時間成本競標。
這是最近受邀參與國信期貨APP產品升級競標時候在售前所做的一個競品分析。目的是通過拆解同行業(yè)中優(yōu)秀的產品，洞察別人的設計方法，吸取別人的智慧和經驗，找出國信期貨APP當下所存在的真實問題，最終借此初步提煉出整個APP產品升級的設計方案。
需要說明是，由于只是初期的售前階段，所以這篇競品分析所篩選的產品不多、范圍也只是對金融期貨APP的首頁設計拆解。之所以選擇首頁，這是因為首頁是一個金融APP產品權重最高的頁面，它不僅決定了用戶對一個產品的視覺印象，而且對新用戶的激活和老用戶的留存發(fā)揮著關鍵作用。最后也希望借此案例的分享，讓大家認識到競品分析的價值，以及在商業(yè)設計的一些真實應用場景。
在分析競品之前，我們先簡單了解一下國信期貨APP的產品目標，它主要為投資者提供期貨交易、期貨行情、手機開戶、業(yè)務辦理、熱點資訊等綜合金融服務，致力讓每一位投資者都能享受安全、便捷、快速的期貨投資服務。接下來，我們對當前國信期貨APP首頁進行完整的拆解，看看目前存在有什么問題。
什么是內容層？內容層就是一個產品應該圍繞著業(yè)務目標制定什么設計策略和設計什么功能內容，這是一個產品設計最重要、最關鍵的環(huán)節(jié)，因為它決定著這個產品的成敗。
從當前的首頁內容規(guī)劃來看，內容層主要分為三個部分。第一個部分是導航欄、核心功能和輪播圖，第二個部分是金剛區(qū)，用戶可左右滑動切換，第三個部分是TAB欄，有熱點、資訊等欄目。不難看出，整個首頁的內容設計中規(guī)中矩、缺乏創(chuàng)意，僅僅是產品功能的堆砌，而并沒有結合國信期貨APP「安全、便捷和快速」的產品理念去思考制定設計策略。
什么是視覺層？視覺層就是一個產品的界面設計，是帶給用戶最直觀的視覺感受，它也是我們常說的「美丑」。視覺層決定著用戶對這個產品的價值感知，根據尼爾森十大原則的審美和簡約設計原則，我們知道用戶會更信賴更美的設計，所以任何一個產品，如果要想贏得用戶的好感，視覺層是非常關鍵的一個環(huán)節(jié)。
明確了視覺層的概念，我們再來觀察當前國信期貨當前的首頁設計，可以發(fā)現整體的視覺體驗非常粗糙，整個頁面的設計無論是配色、布局，還是字體，都不和諧、不統一，圖標、視覺KV圖不精致，給用戶留下非常混亂、廉價的視覺體驗。
作為期貨行業(yè)內交易平臺最為齊全的期貨公司之一，目前國信期貨的APP首頁設計，不管是內容規(guī)劃還是視覺設計，都沒有呼應產品的目標和設計理念，顯得非常業(yè)余，完全沒有體現出公司強大的品牌優(yōu)勢，嚴重影響用戶對國信期貨品牌價值的視覺感知。
接下來，我們將會拆解行業(yè)內和國信期貨業(yè)務功能相似的其他優(yōu)秀APP首頁，看看他們的內容如何規(guī)劃，視覺又是如何呈現。
國泰君安期貨APP以「引領金融服務，共悅財富人生」為產品設計理念，主要為用戶提供期貨業(yè)務辦理、期貨行情和交易分析等功能，其次還為用戶提供專業(yè)、完善、深度的期貨行業(yè)動態(tài)和解讀，幫助用戶輕松掌握期貨市場先機。
從內容層觀察，國泰君安期貨的首頁主要分為三個部分。第一部分占據了首頁0.5屏空間，從上至下分別是頭部導航欄（包含了搜索框、在線客服和消息中心），五大高頻核心功能（期貨開戶、國君研究、期貨學堂、小君直播和業(yè)務辦理）和KV視覺圖（可根據不同的主題進行實時更新）。從這個部分看，雖然布局中規(guī)中矩，不過KV視覺圖部分的設計創(chuàng)意很棒，可以根據不同的主題進行實時更新，有利于對新用戶的激活和誘發(fā)用戶進行傳播，為產品拉新引流。
第二個部分是金剛區(qū)和輪播圖。金剛區(qū)支持用戶進入編輯頁進行功能自定義，從這里可以看出國泰君安APP的核心業(yè)務包含市場數據、熱門活動、研究資訊、期貨學堂、交易功能、信息查詢、業(yè)務辦理和機構服務，非常豐富。其次支持自定義設置，也節(jié)省用戶的操作成本，可以提高低頻功能的高效觸達。
第三個部分從0.75屏開始，是一個聚合的 TAB欄目，包含了發(fā)現、7x24、公告、要聞、自選等內容資訊欄目。其中「發(fā)現」作為首頁默認的欄目，內容非常豐富，包含了行情熱力圖、小君直播、期貨學堂（期權策略加油站和每日答題贏積分）、期貨百科和深度報告，這個欄目是國泰君安首頁提升用戶留存率的關鍵內容，設計得非常用心。其他欄目則主要以資訊發(fā)布為主，為用戶提供實時的金融資訊。
從視覺層觀察，國泰君安的首頁風格稍顯混亂，頭部的宣傳圖不夠精致，也缺乏視覺沖擊力，而且對頭部的視覺體驗造成了干擾，分散了用戶的注意力，提升了用戶識別成本。其次金剛區(qū)的圖標不夠精致，顏色的搭配和整體產品的設計調性不匹配，首屏的設計體驗一般。
可以看出，國泰君安的首頁在內容層的設計相對豐滿，而且還有很多創(chuàng)新的設計，比如小君課堂，以插畫形式的金融知識科普宣傳圖可以提升用戶傳播率，其次還有每日答題贏積分、期貨百科等創(chuàng)新內容，這對用戶的激活和留存有非常大的幫助。不過視覺層相對比較弱，配色非常隨意，甚至和品牌的VI色調都不匹配（國泰君安VI是藍色系，而APP是橙色+藍色搭配，讓人難以理解）。
中信期貨APP集合了極速開戶、高速行情、場景交易、基金優(yōu)選、精選投研資訊、大咖投教等服務，致力于向投資者提供權威、及時、高效的綜合金融服務，成為期貨+基金的一站式綜合金融理財平臺。
整個首頁可以拆分為五個部分。第一部分，從導航欄到輪播圖，差不多占據了0.5屏的空間，包含了導航欄（包含搜索框、客服和消息）、核心功能（期貨開戶、基金開戶、研究資訊和掌上營業(yè)廳）、金剛區(qū)（支持用戶自定義，包含理財、期貨、業(yè)務辦理、活動、資訊等五大類功能）和輪播圖。從這個部分可以看出，中信期貨的功能設計得非常豐富，有財富日歷、期貨模擬、讀書會等創(chuàng)新欄目，但為了降低用戶的操作成本，首頁又設計得非常簡潔，確保用戶可以快速完成操作目標，提高觸達率。
第二部分占據了1-1.5屏的空間，從上至下分別為期貨市場洞察、期貨排行、視頻專欄、熱點基金、期市點金和新手投教。這個部分主要以展示專業(yè)的期貨市場數據、分析為主，為用戶帶來全面、專業(yè)的期貨數據資料，其次通過視頻專欄和新手投教等知識內容，提升新用戶激活率和老用戶活躍度。
第三部分是財金要聞，以信息流的形式設計，用戶可以一直下拉刷新查看24h快訊、期貨要聞和基金要聞等，這個部分主要是為用戶提供行業(yè)最新、最全的期貨資訊動態(tài)，從而培養(yǎng)用戶習慣，提升用戶留存率。
中信期貨的首頁內容非常豐富，而且非常簡潔、規(guī)整、清晰、平穩(wěn)和統一，這主要歸咎于中信期貨使用了卡片式的設計風格，柔和、和諧、識別度高，所以僅僅從視覺層的感知，就能給用戶帶來非常愉悅的用戶體驗。雖然整體頁面缺乏沖擊力和品牌基因，但絲毫不影響中信期貨給用戶留下極其有好的產品印象。
中信期貨的首頁非常值得參考學習，無論是內容層還是視覺層，都非常優(yōu)秀。特別是卡片式設計的應用，讓整個產品給用戶帶來非常棒的用戶體驗，統一、簡潔而又豐富。如果能再加入一些視覺沖擊力和品牌基因，將會帶給用戶更完美的視覺體驗。
中泰期貨APP支持國內期貨（含商品期權）交易及行情。包含在線開戶、金融資訊、交易日歷、行情觀察室等特殊模塊，隨時為投資者提供方便、快捷、高效的服務。
中泰期貨首頁的內容非常精煉，長度僅有2屏，主要分為導航欄（搜索框、客服和消息），核心功能（期貨開戶、投研中心、場外期權和掌上營業(yè)廳）、金剛區(qū)（兩排，合計20個），輪播圖、瓷片區(qū)（晨會紀要、交易羅盤、私享匯和行情觀察室）、主力（期貨行情精選）和熱點快訊。這樣的設計，也許和他們「快捷、高效」的產品理念有關，干凈利落、快速高效展示產品核心功能，引導用戶完成操作目標。
整個首頁的視覺風格和中信期貨很像，統一、規(guī)整又統一，而且在視覺創(chuàng)意方面，圖標比中信期貨還要精致。其次首屏融入了品牌基因，提升了視覺沖擊力，也形成了設計差異化，給用戶留下較深的印象。整體的顏色也搭配得非常和諧，整個首頁給用戶的感覺和諧、親和、愉悅，體驗非常棒。
中泰期貨的視覺風格值得借鑒，在首屏融入了品牌基因以后，和其他APP產品相比，形成了視覺差異化，提升了用戶的品牌記憶度。
通過對國泰君安期貨、中信期貨、中泰期貨的首頁設計拆解，以點帶面，我們?yōu)閲牌谪汚PP提煉了初步的產品升級思路和方案。
● 內容層：除了具備期貨APP的必備內容之外，比如期貨開戶、行情分析、行業(yè)資訊等，更應該圍繞著「安全、便捷和快速」的產品理念進行內容規(guī)劃。內容不用過多，但需要精煉、明確和清晰，讓用戶感受到產品的安全、便捷和高效。
● 視覺層：從中信期貨和中泰期貨這兩個競品可以看出，卡片式的設計風格不僅是期貨APP中使用頻率最高的，而且具備極強的親和力，層次分明、統一規(guī)整，可以給用戶帶來非常愉悅的用戶體驗。其次還需要考慮加入國信期貨的品牌基因，提升首屏的視覺沖擊力，讓國信期貨APP從視覺層就和其他產品形成差異化。
在蘭迪·蔡斯的《競爭性銷售如何在B2B市場中勝出》這本書的第一章，作者說，如果你想把這本書閱讀下去，請你務必先認同這個觀念——在商業(yè)的競爭性銷售中，你的失敗并不是因為競爭對手的價格比你低，而是你的設計方案價值沒有比別人高。
我無比認可蘭迪的觀點，也感謝這本書最近給我在商業(yè)設計中帶來的很多啟發(fā)，甚至無比堅定了廖爾摩斯設計工作室的售前設計策略和方向。你或許會說，別人只是找你要一份報價，你為啥要白白做這么多工作，我只能告訴你，這就是策略，也是我們的設計價值觀——真誠、熱忱、用心對待每一個設計機會，用我們的專業(yè)解決客戶的問題，讓客戶為價值付費！
作者：廖爾摩斯
鏈接：https://www.zcool.com.cn/article/ZMTU5NDc0NA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。
