寫在前面的話干貨分享的主旨是，和大家一起探討這些實(shí)踐經(jīng)驗(yàn)，它并不一定是真理，有可能也會(huì)出錯(cuò)，就像下面福爾摩斯說的那樣：,it.（我們應(yīng)該尋找各種可能解釋事情的方法，然后想辦法試圖推翻它），所以希望大家多多拍磚。相信大家已聽過各種有關(guān)按鈕設(shè)計(jì)的分享了。今天為什么再次提出這個(gè)主題呢？因?yàn)樽罱贏IUX接觸到的許多實(shí)際項(xiàng)目中，我們發(fā)現(xiàn)了不少有趣的按鈕案例?；蛟S一個(gè)小小的按鈕的改動(dòng)，可能背后牽扯到了許多的產(chǎn)品業(yè)務(wù)邏輯，給產(chǎn)品數(shù)據(jù)直接帶來相關(guān)變化。----正式討論前，首先我們先來做一個(gè)熱身小討論，大家請看下圖的產(chǎn)品界面：請問課程開始按鈕在什么地方呢？正如大家評論里提到的那樣，我們合作這個(gè)案例，客戶反饋產(chǎn)品面臨的體驗(yàn)問題是，許多用戶進(jìn)入這個(gè)頁面后，找不到開始課程的按鈕。分析原因，其實(shí)不是因?yàn)橛脩羰切“?，而是在這個(gè)頁面的整個(gè)信息結(jié)構(gòu)設(shè)計(jì)中，我們忽略了最關(guān)鍵的一點(diǎn)：用戶認(rèn)知心理中的邊界效應(yīng)。當(dāng)視覺設(shè)計(jì)時(shí)，上下顏色采用同色設(shè)計(jì)，并且在底部欄上沒有對按鈕進(jìn)行突出設(shè)計(jì)，所以用戶在進(jìn)入這個(gè)頁面的時(shí)候會(huì)下意識(shí)地認(rèn)為上下都是界面的邊界區(qū)域，并不包含按鈕操作區(qū)域。所以修改的方式很簡單：1.修改導(dǎo)航欄顏色，突出下部操作區(qū)；2.在下部操作欄設(shè)置更明顯的按鈕區(qū)域。此次案例分享的所有設(shè)計(jì)均來自艾體驗(yàn)原創(chuàng)，如果您覺得想法不錯(cuò)并采用到了自家的產(chǎn)品中，請?jiān)趯谥懈嬷覀?.按鈕后面潛藏的用戶認(rèn)知方式圖示為一款給女性用戶提供線下服務(wù)的產(chǎn)品，在案例介紹詳情頁的底部工具欄位置，設(shè)置了一個(gè)功能按鈕，下部的"預(yù)約Ta"。原本目的是，希望用戶看過大量精美圖片和文字介紹的詳情后，點(diǎn)擊該按鈕與設(shè)計(jì)師預(yù)約，產(chǎn)生線下的轉(zhuǎn)化。但產(chǎn)品上線后，卻發(fā)現(xiàn)用戶詳情頁的訪問量還不錯(cuò)，但始終預(yù)期的預(yù)約點(diǎn)擊率始終不高，大家覺得是什么原因呢？大家想想看，在我們的日常生活中，當(dāng)我們需要去預(yù)約某人某事時(shí)，會(huì)不會(huì)是一件相當(dāng)謹(jǐn)慎，需要考慮許多事情的操作呢？所以回到這個(gè)產(chǎn)品中，當(dāng)用戶看完一個(gè)設(shè)計(jì)師的作品以后，需要點(diǎn)擊“預(yù)約Ta”時(shí)，這種操作背后對應(yīng)的用戶心智模型是否會(huì)有這種相似的“需要再考慮下后再預(yù)約”的體驗(yàn)感。所以我們建議客戶先進(jìn)行一個(gè)小改動(dòng)嘗試下，將“預(yù)約Ta”改為了“聯(lián)系策劃師”。然后實(shí)際上線后，點(diǎn)擊率就上漲了。這背后的原因大家能猜到了吧？其實(shí)這個(gè)案例背后對應(yīng)很關(guān)鍵邏輯原因即是用戶的心理認(rèn)知方式。其實(shí)我們?nèi)ゲ鸾庀逻@2個(gè)行為，預(yù)約過程，真實(shí)世界中的自然邏輯過程是留下名字，電話，確認(rèn)時(shí)間和見面地點(diǎn)，這是一個(gè)相對復(fù)雜且謹(jǐn)慎的行為方式。當(dāng)用戶看到“預(yù)約Ta”這個(gè)按鈕時(shí)，可能他下意識(shí)會(huì)認(rèn)為自己還需要考慮，或許這個(gè)案例詳情的確蠻吸引人的，但說到要去預(yù)約，也許他們就猶豫了。所以這就造成了案例詳情頁瀏覽量高，但實(shí)際點(diǎn)擊預(yù)約卻不高的原因。而修改成聯(lián)系策劃師后，為什么點(diǎn)擊率上漲了呢？同理，拆解認(rèn)識(shí)行為。當(dāng)我們遇見聯(lián)系誰誰誰時(shí)，心理活動(dòng)是，可能給他打個(gè)電話，或者是微信留個(gè)的感覺，它是一種比較簡單輕便的操作，用戶下意識(shí)不會(huì)思考太多，也就點(diǎn)擊試試看了。所以對于這個(gè)按鈕設(shè)計(jì)的修改，表面上看到只是一個(gè)文案的修改，但背后修改的卻是整個(gè)按鈕的認(rèn)知的邏輯場景。給用戶提供更輕便的按鈕點(diǎn)擊場景設(shè)定，或許產(chǎn)品業(yè)務(wù)邏輯的點(diǎn)擊率即能上漲。在用戶在使用App，認(rèn)知功能邏輯的背后，對應(yīng)的是以下心理學(xué)模型認(rèn)知吝嗇者個(gè)體在接受信息的時(shí)候，不太喜歡思考太多，他們很多是依靠過去的經(jīng)驗(yàn)、個(gè)人直覺，并應(yīng)用許多認(rèn)知的捷徑來處理這個(gè)信息，然后這種直覺的判斷系統(tǒng)可以減輕用戶在操作很多事情的時(shí)候認(rèn)知的負(fù)擔(dān)。大家回憶下，當(dāng)我們進(jìn)行許多簡單操作時(shí)，大腦并沒有經(jīng)過周密嚴(yán)格的思考，只是下意識(shí)覺得好像應(yīng)該是這樣的，然后就做了。當(dāng)在進(jìn)行App操作時(shí)，尤其是按鈕或者一些選擇行為的操作時(shí)，這種認(rèn)知吝嗇者的操作模式，實(shí)際上更顯而易見。補(bǔ)充案例這個(gè)是旅游攻略書籍的在線App，當(dāng)通過滑動(dòng)城市列表，選擇了某個(gè)城市時(shí)，會(huì)彈出要求付費(fèi)購買的界面。上面有2個(gè)按鈕，雖然著重強(qiáng)調(diào)的那個(gè)是解鎖一個(gè)城市需要2.99美金，但用戶也會(huì)不由自主地關(guān)注到，購買全部城市需要4.99美金。對于絕大多數(shù)付費(fèi)用戶來說，會(huì)選擇購買全部的選項(xiàng)。因?yàn)楫?dāng)用戶在進(jìn)入付費(fèi)操作前，印象中已經(jīng)了解到App中大概總共有10個(gè)城市。當(dāng)購買所有城市花費(fèi)4.99美金時(shí)，那平均每座城市的費(fèi)用會(huì)低很多，而紐約一個(gè)城市就需要2.99美金。通過補(bǔ)充案例，希望大家能更好的理解到認(rèn)知吝嗇者模型。第一個(gè)案例到此就討論完了，不知道大家對用戶認(rèn)知的心理歷程是否有更加詳細(xì)的認(rèn)識(shí)呢？我們采用的是學(xué)術(shù)和案例結(jié)合的模式，如果大家有更好的案例分享，歡迎私信我，因?yàn)槲覀円苍诓粩嗟娜パa(bǔ)充和擴(kuò)展案例庫。2按鈕使用，需要設(shè)置觸發(fā)條件第二個(gè)案例是一個(gè)幼兒教育類產(chǎn)品，在與合作方聊的過程中發(fā)現(xiàn)，家長使用該產(chǎn)品后，對產(chǎn)品業(yè)務(wù)的滿意度很不錯(cuò)，但始終有一個(gè)困擾，家長每周能夠通過客戶端使用預(yù)約課程功能的比例卻未達(dá)到預(yù)估的期望目標(biāo)。大家可以看一下，在圖片頁面上，第三排右邊有一個(gè)預(yù)約課程按鈕，大家覺得是什么原因造成預(yù)約課程的比例不高呢？我們來解析預(yù)約課程的動(dòng)作行為以及它面向的場景。在預(yù)約課程的過程中，有3個(gè)前置的場景條件需要設(shè)定。首先，在預(yù)約課程的時(shí)候，對于家長用戶而言，需要知道每周的預(yù)期目標(biāo)是什么，其次就是為什么要設(shè)置這個(gè)目標(biāo)，這個(gè)目標(biāo)達(dá)到以后對小朋友能有什么樣的好處？最后就是，用戶是否達(dá)到了這個(gè)目標(biāo)?；谝陨戏治觯覀儗粹o觸發(fā)的前置條件進(jìn)行了一個(gè)補(bǔ)充修改。將這個(gè)預(yù)約按鈕本身與課程展示的邏輯之間發(fā)生了關(guān)聯(lián)，即目標(biāo)是5節(jié)課，已經(jīng)約了幾節(jié)，再約幾節(jié)對孩子有什么好處。這樣，家長就能知道，為什么要去立即約課。并結(jié)合用戶約課節(jié)數(shù)不同的場景，也進(jìn)行了細(xì)分處理，大家可以具體看圖，這里不再文字贅述。我們始終認(rèn)為，好的交互是能把現(xiàn)實(shí)世界中的真實(shí)交互轉(zhuǎn)移到線上，并讓其自然地發(fā)生。補(bǔ)充案例國外的二手衣出租服務(wù)App，它在讓用戶點(diǎn)擊通知許可按鈕之前使用了非常巧妙的觸發(fā)條件設(shè)計(jì)。對于二手衣出租服務(wù)，消息的推送是非常重要的，比如說衣服的快遞情況，還有就是衣服是不是到了退還日期了，均需要準(zhǔn)確告知到用戶。但因?yàn)楝F(xiàn)在的手機(jī)都會(huì)裝載較多的App，產(chǎn)生了許多垃圾推送信息。用戶都會(huì)對App突然彈出的通知框，感覺到非常無措及惱人，一般會(huì)選擇關(guān)閉。但是，如果我們在這個(gè)通知框彈出之前增設(shè)一個(gè)前置條件呢？告知用戶需要你的通知授權(quán)，讓你能獲得一些具體的信息，比如快遞的具體狀況。在用戶選擇后，再彈出推送界面。相信用戶授權(quán)的通過率一定能夠增高。大家可以借鑒一下，特別對于創(chuàng)業(yè)產(chǎn)品，如果發(fā)現(xiàn)推送對你很重要，那么可以試著在獲得用戶推送通知權(quán)限的前面，去增設(shè)一個(gè)場景式的告知。這樣有可能推送的到達(dá)率會(huì)更高。3按鈕是獲得用戶承諾的一個(gè)通道第三個(gè)案例我們想和大家分享一個(gè)我的工作室在最近的一個(gè)研究和實(shí)際項(xiàng)目中的發(fā)現(xiàn)－－按鈕是獲得用戶承諾的一個(gè)通道。我們針對的是一款給某類事物喜歡的粉絲使用的一個(gè)產(chǎn)品，即某類粉絲專用的產(chǎn)品，那我們的合作方希望就是通過線上產(chǎn)品的傳播方式，加深對這類事物的影響意義，讓全球喜歡這類事情的人聚集在一起，然后通過分享討論吸引更多的粉絲，或者加深已經(jīng)是粉絲的人對這類事物的愛。我們根據(jù)合作方的需求，討論設(shè)計(jì)了一個(gè)草案，但是拿到草案后，我們始終感覺到產(chǎn)品中缺少一些粉絲專有的能量。對于這樣一個(gè)工具加社區(qū)類的產(chǎn)品，如何讓這些粉絲用戶可以持續(xù)地在上面活躍，形成轉(zhuǎn)化呢？我們在融入了粉絲信仰的考慮后，在首頁增加了個(gè)叫“我要打榜”的按鈕區(qū)域。它形成的轉(zhuǎn)化路徑其實(shí)就是我們通過一個(gè)粉絲信仰，然后用戶因?yàn)閾碜o(hù)某一類型的人或事物，來獲得他對這件事情的一個(gè)承諾。在《影響力》這本書里面有提到一個(gè)觀點(diǎn)：社會(huì)心理學(xué)家認(rèn)為，用戶一旦作出承諾（也即選擇立場，公開表明觀點(diǎn)）就會(huì)不假思索地照著先前的承諾去做，只要立場站穩(wěn)，人就自然想要倔強(qiáng)地按照與該立場保持一致的方式去做。哪怕在作出最終決定之前已經(jīng)有了一個(gè)初步的傾向他也會(huì)在這之后偏愛與承諾是一致的選擇。當(dāng)然這個(gè)產(chǎn)品還沒有上線，但是我們就是在設(shè)計(jì)這件事情的時(shí)候建立的這樣一個(gè)模型，希望通過這個(gè)模型去引導(dǎo)粉絲更好的在這個(gè)產(chǎn)品上去活躍，同時(shí)我們也拭目以待看這個(gè)產(chǎn)品上線以后這個(gè)區(qū)域能夠產(chǎn)生的一個(gè)具體價(jià)值。補(bǔ)充案例今年的愛奇藝，在節(jié)目區(qū)域中增加了人氣榜單的功能，圖示為《奇葩說》的界面，相信也是希望不同的粉絲去支持不同的戰(zhàn)隊(duì)和選手，獲得更多的討論。這種粉絲之間的對峙可以產(chǎn)生更多的消費(fèi)內(nèi)容。一方面可以對平臺(tái)增加UGC（用戶原創(chuàng)內(nèi)容），另一方面也增加了粉絲的粘性?；仡櫚咐拔乙虬瘛敝皇且粋€(gè)功能按鈕，但在它背后，產(chǎn)品需要去構(gòu)建建立了讓粉絲用戶留下自己承諾的通道，對產(chǎn)品更加具有歸宿感和依賴感。4一個(gè)按鈕，還是多個(gè)按鈕前陣子我們合作了一款B2C的生鮮電商產(chǎn)品，在產(chǎn)品討論時(shí)，大家在商品下單頁的產(chǎn)品設(shè)計(jì)上徘徊了許久。如果只放“加入購物車”的按鈕，購物過程會(huì)多一步，用戶就有可能會(huì)遺忘曾經(jīng)在購物車中加入了什么，購買率可能會(huì)有所下降。如果放兩個(gè)按鈕“加入購物車”和“立即購買”，卻又起不到促銷產(chǎn)品帶動(dòng)其他商品銷售的作用。在小數(shù)據(jù)的方案測試中發(fā)現(xiàn)，放兩個(gè)按鈕的話，好像銷量有一定比例的提升，但始終漲幅不不大。大家分析一下問題是出在什么地方，我們案子討論的前提是在同等價(jià)位下用戶去做出的選擇，這個(gè)干擾因素主要是按鈕而不是價(jià)格。首先對電商類型的競品進(jìn)行了對比。帶有2個(gè)按鈕組的一般是C2C這類型的產(chǎn)品。比如有淘寶和HIGO，由一個(gè)用戶商家直接賣給別的用戶買家。對于這類型產(chǎn)品，立即購買的好處在于，獨(dú)立商品無需考慮組合購買，能刺激用戶迅速下單。但是對于B2C類型的產(chǎn)品，由于App所有的商品都是由商家供貨，自己進(jìn)行出庫管理等，比如京東、一號店、易生鮮、小紅書等。那么更多的都是采用一個(gè)按鈕的設(shè)計(jì)。通過引導(dǎo)用戶加入購物車，可能還能引發(fā)用戶的后續(xù)操作，比如引導(dǎo)湊單、提供滿減、推薦商品、會(huì)員特惠等，那可能在這個(gè)過程中就能引導(dǎo)用戶去產(chǎn)生購買更多的行為。（是不是有點(diǎn)像女孩子購物的思維路徑？笑~~）但是對于立即購買的模型是什么呢？就是選擇商品－立即購買－確認(rèn)商品－買單，然后購物過程就結(jié)束了。我相信對于男生們大多都是買得這么干脆。我基于這件事情分析了這么一個(gè)思維模型以后，對這個(gè)生鮮類的電商產(chǎn)品給了他們這么一個(gè)方案，就是把原來的兩個(gè)按鈕還是改回了一個(gè)按鈕“加入購物車”，但在加入購車的過程中，會(huì)有數(shù)字提醒、倒數(shù)計(jì)時(shí)，并且我還去加入一個(gè)引導(dǎo)性的提示，比如說“你還差66元免郵費(fèi)去湊單”，把一些東西提前了。我們認(rèn)為在加入購物車過程中，生鮮B2C商城應(yīng)該給用戶提供一個(gè)按鈕的電商購物體驗(yàn)就像你推著一個(gè)購物車在逛冷鮮超市的感覺。同時(shí)我們在最底部增加了購物車的入口，這樣子想快速結(jié)賬的用戶就可以迅速找到可結(jié)算的入口。另外我們在購物車頁面還同時(shí)增加了一個(gè)時(shí)間維度的設(shè)計(jì)，一方面不斷地去強(qiáng)化用戶短時(shí)購物的體驗(yàn)；另一方面也是延續(xù)真實(shí)世界中的一種體驗(yàn)，即如果買生鮮產(chǎn)品，你推著一個(gè)超市的購物車，冷凍食品是不能放太久的，放太久就會(huì)化掉。所以說我們就想把這樣一種體驗(yàn)融在購物和加入購物車中。同時(shí)也強(qiáng)化了購物車中的消費(fèi)刺激因子。在購物車上面增加了一個(gè)“66元免郵”的顯示文案，把需要點(diǎn)進(jìn)購物車?yán)锩娌拍芸吹降囊恍┬畔@現(xiàn)出來，這樣子可以讓部分用戶逛更長時(shí)間，逛更長時(shí)間就意味著可以買更多的東西或者消費(fèi)更多的商品。我們對這個(gè)產(chǎn)品作出這樣的改動(dòng)之后，前段時(shí)間我從老板那得知現(xiàn)在他們整體的銷售量大概每個(gè)月增加了許多。所以咱們的電商場景的分析和實(shí)際購物場景的還原還是奏效了。補(bǔ)充案例之前我們說到的那幾個(gè)例子是在“購買”和“加入購物車”的時(shí)候，兩個(gè)按鈕的模型中我們選擇了一個(gè)按鈕，但是另外一個(gè)我們喜歡的社交應(yīng)用卻是將一個(gè)非常經(jīng)典的按鈕，給衍生成了多個(gè)按鈕。的這個(gè)like實(shí)際上是社交領(lǐng)域的一個(gè)非常經(jīng)典的設(shè)計(jì)，我記得很多很多大拿都寫過文章或出過書專門來說這個(gè)like有多么多么成功。但是它在今年卻進(jìn)行了一項(xiàng)大的調(diào)整，就是將原來簡單的like按鈕擴(kuò)展成多表情地表達(dá)。在產(chǎn)品圈對于這個(gè)按鈕的演變討論的人很多，有人點(diǎn)贊有人批評，而我不去就喜歡這事本身的邏輯來討論。但這個(gè)按鈕更改背后，卻是推薦算法的野心，它不僅是讓用戶去有更多的清晰表達(dá)方式，而且在智能學(xué)習(xí)，給機(jī)器學(xué)習(xí)加入了情感分析的方式，這種結(jié)果可以讓以后的社交平臺(tái)更加多元化。---------前面說到的這四種方式，不管是用認(rèn)知模型、使用場景、用戶承諾，還是一個(gè)按鈕或多個(gè)按鈕的方式去分析問題，如果大家能對這些事情有形成自己的理的話，我覺得咱們這次分享討論就達(dá)到了目的。今天的討論就到這里如果對以上分享，有任何問題都可以在專欄里留言和我們聯(lián)系喲----------第一次干貨分享料很足喲，能看完的是真愛。么么噠，堅(jiān)持拖到最下面的同學(xué)，有一個(gè)大福利喲，搜索微信""，可以添加雪梨小助手的艾體驗(yàn)私人定制服務(wù)，每天和大家分享1-2則產(chǎn)品設(shè)計(jì)，體驗(yàn)優(yōu)化，好書推薦等相關(guān)的小段子。(二維碼自動(dòng)識(shí)別)