寫在前面：
看了一千個(gè)故事素材 才知道第一個(gè)故事怎么寫會(huì)比較動(dòng)人
練習(xí)如何更快更好地使用工具輸出原型ing...

實(shí)例分析：商品促銷工具

本篇文章為大家詳細(xì)地介紹了促銷工具的整個(gè)產(chǎn)品設(shè)計(jì)的思路和原型產(chǎn)出，供大家學(xué)習(xí)！

image

本文按照用戶體驗(yàn)5要素的方式進(jìn)行講解，如果閱讀者對用戶體驗(yàn)要素陌生，可以在人人都說產(chǎn)品經(jīng)理搜索查閱，本文不再贅述了。

上一篇文章《商品促銷工具的產(chǎn)品設(shè)計(jì)三步走！》講過戰(zhàn)略層（為什么做），在此總結(jié)一下：

• 對用戶來說，商品促銷意味著省錢，這是優(yōu)惠敏感型用戶樂于看見的；
• 對于商家，希望通過某種營銷的方式獲取更多的流量，實(shí)現(xiàn)單量轉(zhuǎn)化，提高營收；
• 平臺(tái)需要平衡整個(gè)業(yè)務(wù)鏈條里的角色，讓他們進(jìn)來在這個(gè)生態(tài)圈都能滿足自己的需求，所以平臺(tái)搭建這種促銷工具激勵(lì)和引導(dǎo)商家促銷，給與商家更多的曝光機(jī)會(huì)，讓商家有錢可掙。

本文要點(diǎn)提煉：

1. 范圍層–核心需求場景；
2. 結(jié)構(gòu)層—產(chǎn)品結(jié)構(gòu)；
3. 框架層—界面設(shè)計(jì)。

本文主要講述范圍層（功能和內(nèi)容）、結(jié)構(gòu)層（交互和信息架構(gòu)）、框架層（界面設(shè)計(jì)），因是后臺(tái)產(chǎn)品，需求方比較重視流程和效率，不關(guān)注表現(xiàn)層（視覺設(shè)計(jì)）。

一、范圍層–核心需求場景

產(chǎn)品設(shè)計(jì)的過程是解析需求的過程，這個(gè)過程是需要分析操作者什么時(shí)間，什么地點(diǎn)，做什么，怎么做，簡單來說就是5W1H，這就是場景描述。

以下表格是我與需求方溝通確認(rèn)后得到的核心場景，我的產(chǎn)品設(shè)計(jì)就是基于核心場景搭建的，需要做什么功能或內(nèi)容才能滿足需求。

image

二、結(jié)構(gòu)層-產(chǎn)品結(jié)構(gòu)

2.1 頁面架構(gòu)

每個(gè)餐廳或連鎖餐廳有需求做促銷商品活動(dòng)，操作者（市場部/菜單部）需要操作單餐廳或連鎖餐廳配置商品促銷活動(dòng)，每家餐廳都有這類促銷活動(dòng)，每一個(gè)商品是通過活動(dòng)建立的促銷，需要有這類促銷活動(dòng)的餐廳管理界面和每家餐廳下的促銷商品管理界面。

image

2.2 促銷商品的流程

活動(dòng)是建立在商品身上的，“增刪改查”四個(gè)流程主要是在商品上去擴(kuò)展。

image

三、框架層-界面設(shè)計(jì)

3.1 餐廳管理

初始化的時(shí)候這個(gè)界面是空的，沒有任何餐廳。當(dāng)操作者在此處新增了活動(dòng)，那么那家餐廳就真正的啟用了這個(gè)促銷類型，會(huì)記錄在促銷商品類型的數(shù)據(jù)庫中，在這個(gè)界面產(chǎn)生一條記錄。

這條餐廳記錄可以查閱所有的有效的和無效的商品活動(dòng)，并且可以配置每家餐廳的對購買促銷商品的限定商品數(shù)量和限定訂單的規(guī)則。

image

3.2 商品管理

這個(gè)界面是由餐廳管理下的二級(jí)頁面，通過餐廳管理的查看商品進(jìn)來的。這個(gè)頁面是對該餐廳的所有的有效和無效的商品活動(dòng)的管理。

管理列表需要展示基本的商品促銷規(guī)則：價(jià)格和時(shí)間，當(dāng)然可以展示更多的規(guī)則。

活動(dòng)未開始和進(jìn)行中會(huì)出現(xiàn)各種情況，這里的修改主要解決修改促銷規(guī)則如價(jià)格和活動(dòng)時(shí)間等。

當(dāng)商家由于某些原因不能繼續(xù)活動(dòng)，作廢是更改活動(dòng)的狀態(tài)，這樣用戶端看到的商品是恢復(fù)原價(jià)了。

image

3.3 新增活動(dòng)

新增活動(dòng)主要是配置促銷規(guī)則的地方，主要包含哪些商品參加促銷，商品配置的各項(xiàng)優(yōu)惠，活動(dòng)日期和面向的用戶。

選擇餐廳處支持單一餐廳和連鎖餐廳的選擇方式，連鎖餐廳通常在平臺(tái)上屬于一家商戶且共用一套菜單，自然是可以同時(shí)配置的。

商品優(yōu)惠，此處會(huì)獲取整個(gè)菜單的所有分類和商品，可多選并分別配置商品促銷價(jià)格和促銷庫存以及每單限購。

為了控制每個(gè)商品的優(yōu)惠成本會(huì)在商品名稱下面提示“已有商品活動(dòng)”來提醒，當(dāng)然這里直接選擇覆蓋之前的活動(dòng)。

日期，因商品促銷的背景行業(yè)是外賣，商家可以在不同的飯點(diǎn)配置不同的活動(dòng)，也可以針對工作日和周末。面向用戶，商家可以面對不同的用戶類型給與不同的優(yōu)惠價(jià)格。

image

3.4 修改活動(dòng)

修改活動(dòng)，其實(shí)是修改某一個(gè)商品的某些活動(dòng)規(guī)則，應(yīng)對活動(dòng)效果及時(shí)調(diào)整。

修改應(yīng)該注意哪些內(nèi)容能改，哪些內(nèi)容不能修改。

例如圖中，餐廳和商品是不能修改的，這是這個(gè)功能的主體；其他規(guī)則如優(yōu)惠，日期和面向用戶都是可以修改的，但切記一定要記錄日志，這樣才能整體掌握這個(gè)活動(dòng)的成本消耗，這對后面的結(jié)算對賬都是依據(jù)。

image

以上是促銷工具的整個(gè)產(chǎn)品設(shè)計(jì)的思路和原型產(chǎn)出。

為什么會(huì)花3天的時(shí)間寫了兩篇文章，目的是整理這些年的工作方法論和思路。

當(dāng)我置身的環(huán)境非常包容或者工作流程不嚴(yán)謹(jǐn)?shù)臅r(shí)候，會(huì)被影響，從而變得局限，主觀或者傲嬌。

以這兩篇文章自省，希望自己不管處于什么環(huán)境都有著不斷進(jìn)化的產(chǎn)品思維，也希望自己的文章能夠給一樣背景的人一些感觸。

Axure原型設(shè)計(jì)：活動(dòng)抽獎(jiǎng)轉(zhuǎn)盤

生活中在購物的時(shí)候經(jīng)常會(huì)遇到一些可以抽獎(jiǎng)的活動(dòng)，很多時(shí)候都采用轉(zhuǎn)盤抽獎(jiǎng)的形式，抽中獎(jiǎng)自然很開心啦，但是這個(gè)轉(zhuǎn)盤原型是怎樣做出來的呢，馬上來看下吧！

image

先來個(gè)完整圖，所有的布局結(jié)構(gòu)，如下圖：

image

步驟一：搭建組件

“轉(zhuǎn)盤”：一個(gè)300×300白底黑框的圓形（大小適中就可以），一條垂直線，一條45度垂直線，一條水平線，一條45度水平線，四條線組成8等份，放置在圓形的正中；每一等份放置一個(gè)文本標(biāo)簽，用于抽獎(jiǎng)憑證，以上所有組件組合并命名為“轉(zhuǎn)盤”。

“抽獎(jiǎng)按鈕”與“抽獎(jiǎng)指針”：一個(gè)100×100的灰底黑框圓形，中間文字為“抽獎(jiǎng)”，命名為“抽獎(jiǎng)按鈕”，并放置于轉(zhuǎn)盤的正上方；一個(gè)10×30的灰底黑框的三角形，命名為“抽獎(jiǎng)指針”并放置于“抽獎(jiǎng)按鈕”正上方。

步驟二：為“抽獎(jiǎng)按鈕”添加鼠標(biāo)點(diǎn)擊時(shí)用例

只要一個(gè)用例就可以完成轉(zhuǎn)盤抽獎(jiǎng)效果啦

該用例動(dòng)作：相對旋轉(zhuǎn)轉(zhuǎn)盤，角度為[[100000+Math.random()*360]]，順時(shí)針方向，錨點(diǎn)為中心，動(dòng)畫為線性，時(shí)間為2000毫秒（時(shí)間主要控制轉(zhuǎn)的速度）。

image

這樣就全部完成了，這個(gè)只用設(shè)置一個(gè)用例，所以相對會(huì)簡單一些。

弄好趕緊看看預(yù)覽效果：https://83ompk.axshare.com/index.html

希望讀完的你也有所收獲

原文：
http://www.woshipm.com/pd/1642245.html
http://www.woshipm.com/rp/1292008.html