相比于很多APP的客戶端，APP的商戶端設(shè)計往往被容易被忽視。本文將會介紹商戶端生成收銀碼的案例，并通過該案例總結(jié)商戶端設(shè)計的幾個小tips。

需求背景

收銀碼指的是關(guān)聯(lián)了商家?guī)ぬ栍糜谑浙y的二維碼。進(jìn)店消費的顧客可以通過掃描這個二維碼，向商家付款。目前，商家申請收銀碼實物之后，會有銷售同學(xué)派送二維碼立牌并提供上門服務(wù)。然而，這樣非常依賴預(yù)算、運營、市場、銷售等部門的統(tǒng)籌支持，尤其是對銷售同學(xué)的進(jìn)店操作依賴。

與此同時，預(yù)算增加、流程長、見效慢等問題也嚴(yán)重阻礙了收銀碼實物立牌的覆蓋進(jìn)度?；谝陨媳尘?，所以在商戶端APP中提供線上收銀碼生成功能，讓商戶能夠自主下載打印收銀碼。

項目收益

1. 節(jié)約二維碼實物立牌生產(chǎn)預(yù)算5-10W/月

2. 釋放預(yù)算、運營、市場、銷售/渠道等部門在覆蓋流程上的人力投入

3. 月度新增門店覆蓋提升30%以上

頁面流程

主要就是兩個頁面：選擇門店和收銀碼結(jié)果頁。

交互設(shè)計

1. 入口

• 差的方案：無引導(dǎo)。
• 好的方案：有引導(dǎo)標(biāo)志，當(dāng)用戶點擊過一次，則不再顯示。

2. 選擇門店

• 差的方案：用戶點擊之后，新出浮層或者展開下拉列表，選擇門店之后，浮層關(guān)閉或者收起下拉列表。
• 好的方案：直接在當(dāng)頁選擇門店。

業(yè)務(wù)邏輯：要生成某一個門店的收銀碼必須滿足，該門店有到店付產(chǎn)品。

差的方案：將復(fù)雜邏輯以文字說明的方式展現(xiàn)。

好的方案：將復(fù)雜邏輯展現(xiàn)，讓后端提前判斷所有門店有無到店付產(chǎn)品。沒有到店付產(chǎn)品的門店由于無法生成收銀碼，所以不可選擇，但給出“設(shè)置到店付”的入口，幫助商戶。

3. 收銀碼結(jié)果頁

該頁面是顯示二維碼，且商戶可在此切換門店，重新生成新的二維碼；

• 業(yè)務(wù)邏輯：商戶端帳號分為總店帳號和分店帳號，總店帳號關(guān)聯(lián)多個門店，分店帳號關(guān)聯(lián)單個門店。
• 差的方案：不分帳號，用戶點擊選擇門店，出現(xiàn)浮層，進(jìn)行選擇。
• 好的方案：后端自行判斷帳號是總店帳號還是分店帳號。分店帳號（單門店）則僅顯示門店信息，不可點擊。總店帳號（多門店）才可以出線浮層，進(jìn)行選擇。

商戶端設(shè)計總結(jié)

1. 新功能需要引導(dǎo)。引導(dǎo)包括：APP新版本的引導(dǎo)頁，新手操作引導(dǎo)，小紅點引導(dǎo)等等，如下圖所示。前兩個適合復(fù)雜功能的介紹，主要目的是告知用戶更新內(nèi)容和使用方法；小紅點引導(dǎo)適合新功能或者內(nèi)容更新等場景，主要目的是讓新功能易于發(fā)現(xiàn)。

2. 不要增加沒必要的交互，且一個頁面只做一件事情。

3. 商戶端的帳號通常比客戶端的邏輯要復(fù)雜，所以復(fù)雜的邏輯要讓后端提前判斷，而不要丟給商戶自己理解。

作者：呂方（微信號公眾號lvfangtuotuo），百度交互設(shè)計師，負(fù)責(zé)百度糯米商戶端用戶體驗設(shè)計。歡迎添加個人微信號，一起交流。

本文由 @呂方 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議