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