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