相比于很多APP的客戶端宜雀，APP的商戶端設(shè)計(jì)往往被容易被忽視切平。本文將會(huì)介紹商戶端生成收銀碼的案例，并通過該案例總結(jié)商戶端設(shè)計(jì)的幾個(gè)小tips辐董。
需求背景
收銀碼指的是關(guān)聯(lián)了商家?guī)ぬ?hào)用于收銀的二維碼悴品。進(jìn)店消費(fèi)的顧客可以通過掃描這個(gè)二維碼，向商家付款郎哭。目前他匪，商家申請收銀碼實(shí)物之后，會(huì)有銷售同學(xué)派送二維碼立牌并提供上門服務(wù)夸研。然而邦蜜，這樣非常依賴預(yù)算、運(yùn)營亥至、市場悼沈、銷售等部門的統(tǒng)籌支持，尤其是對銷售同學(xué)的進(jìn)店操作依賴姐扮。
與此同時(shí)絮供，預(yù)算增加、流程長茶敏、見效慢等問題也嚴(yán)重阻礙了收銀碼實(shí)物立牌的覆蓋進(jìn)度壤靶。基于以上背景惊搏，所以在商戶端APP中提供線上收銀碼生成功能贮乳，讓商戶能夠自主下載打印收銀碼忧换。
項(xiàng)目收益
1. 節(jié)約二維碼實(shí)物立牌生產(chǎn)預(yù)算5-10W/月
2. 釋放預(yù)算、運(yùn)營向拆、市場亚茬、銷售/渠道等部門在覆蓋流程上的人力投入
3. 月度新增門店覆蓋提升30%以上
頁面流程
主要就是兩個(gè)頁面：選擇門店和收銀碼結(jié)果頁。
交互設(shè)計(jì)
1. 入口
差的方案：無引導(dǎo)浓恳。
好的方案：有引導(dǎo)標(biāo)志刹缝，當(dāng)用戶點(diǎn)擊過一次，則不再顯示颈将。
2. 選擇門店
差的方案：用戶點(diǎn)擊之后梢夯，新出浮層或者展開下拉列表，選擇門店之后晴圾，浮層關(guān)閉或者收起下拉列表厨疙。
好的方案：直接在當(dāng)頁選擇門店。
業(yè)務(wù)邏輯：要生成某一個(gè)門店的收銀碼必須滿足疑务，該門店有到店付產(chǎn)品沾凄。
差的方案：將復(fù)雜邏輯以文字說明的方式展現(xiàn)。
好的方案：將復(fù)雜邏輯展現(xiàn)知允，讓后端提前判斷所有門店有無到店付產(chǎn)品撒蟀。沒有到店付產(chǎn)品的門店由于無法生成收銀碼，所以不可選擇温鸽，但給出“設(shè)置到店付”的入口保屯，幫助商戶。
3. 收銀碼結(jié)果頁
該頁面是顯示二維碼涤垫，且商戶可在此切換門店姑尺，重新生成新的二維碼；
業(yè)務(wù)邏輯：商戶端帳號(hào)分為總店帳號(hào)和分店帳號(hào)蝠猬，總店帳號(hào)關(guān)聯(lián)多個(gè)門店切蟋，分店帳號(hào)關(guān)聯(lián)單個(gè)門店。
差的方案：不分帳號(hào)榆芦，用戶點(diǎn)擊選擇門店柄粹，出現(xiàn)浮層，進(jìn)行選擇匆绣。
好的方案：后端自行判斷帳號(hào)是總店帳號(hào)還是分店帳號(hào)驻右。分店帳號(hào)（單門店）則僅顯示門店信息，不可點(diǎn)擊崎淳】柏玻總店帳號(hào)（多門店）才可以出線浮層，進(jìn)行選擇。
商戶端設(shè)計(jì)總結(jié)
1. 新功能需要引導(dǎo)森爽。引導(dǎo)包括：APP新版本的引導(dǎo)頁礼华，新手操作引導(dǎo)，小紅點(diǎn)引導(dǎo)等等拗秘，如下圖所示。前兩個(gè)適合復(fù)雜功能的介紹祈惶，主要目的是告知用戶更新內(nèi)容和使用方法雕旨；小紅點(diǎn)引導(dǎo)適合新功能或者內(nèi)容更新等場景，主要目的是讓新功能易于發(fā)現(xiàn)捧请。
2. 不要增加沒必要的交互凡涩，且一個(gè)頁面只做一件事情。
3. 商戶端的帳號(hào)通常比客戶端的邏輯要復(fù)雜疹蛉，所以復(fù)雜的邏輯要讓后端提前判斷活箕，而不要丟給商戶自己理解。
