網(wǎng)絡(luò)上的教程都是關(guān)于Axure的某個(gè)功能，或者基于某個(gè)實(shí)現(xiàn)方法而進(jìn)行解釋的。但作者更希望，是從頭到尾打造一個(gè)完整的應(yīng)用，而從中學(xué)習(xí)到Axure的使用與方法。

Axure是產(chǎn)品經(jīng)理最常用的工具軟件之一，熟練掌握這一工具對(duì)產(chǎn)品經(jīng)理至關(guān)重要。在學(xué)習(xí)的時(shí)候，我一直推崇“練中學(xué)、學(xué)中練”的學(xué)習(xí)方法，相較于單純的原理學(xué)習(xí)或者一個(gè)控件、一個(gè)原理的實(shí)現(xiàn)，一個(gè)完整的項(xiàng)目會(huì)激發(fā)你所有可用的知識(shí)，并要求你去不斷學(xué)習(xí)新的知識(shí)點(diǎn)，同時(shí)高強(qiáng)度的重復(fù)操作也會(huì)加深對(duì)Axure基本操作的認(rèn)知。

同時(shí)，我也更為推崇文章類型的教程，因?yàn)榭梢苑磸?fù)查看、反復(fù)對(duì)照，比音頻更直觀、比視頻更省時(shí)間。

可惜的是，在我學(xué)習(xí)的時(shí)候并沒有找到這種符合要求的教程。

最近，因?yàn)閭€(gè)人原因，需要仿制一個(gè)拼多多的原型文件。借助這一契機(jī)，我寫了這樣一篇文章，希望能對(duì)同好有所幫助。

因?yàn)檫@是一篇實(shí)戰(zhàn)性的文章，所以對(duì)原理部分介紹的比較少。如果大家需要，可以根據(jù)自己的需要學(xué)習(xí)研究。

一、拼多多原型項(xiàng)目的難點(diǎn)

在制作拼多多原型的過程中，除了動(dòng)態(tài)面板、中繼器等對(duì)新手來說比較難的常規(guī)操作之外，還有三個(gè)地方給我留下了深刻的印象：

第一個(gè)，很多頁面都會(huì)出現(xiàn)在頂部的浮動(dòng)信息欄，時(shí)隱時(shí)現(xiàn)，并交替出現(xiàn)不同的內(nèi)容，同時(shí)在頁面滑動(dòng)時(shí)始終保持固定的位置；

第二個(gè)，商品詳情頁中的參與拼單倒計(jì)時(shí)，會(huì)顯示不同用戶的信息，同時(shí)剩余時(shí)間還會(huì)以秒為單位減少。這個(gè)效果相當(dāng)酷炫，當(dāng)然實(shí)現(xiàn)它也耗費(fèi)了我大量的精力；

第三個(gè)，搜索界面中，菜單和頁面內(nèi)容呈左右排列，兩邊均可自由拖動(dòng)，內(nèi)容拖動(dòng)帶動(dòng)菜單改變；菜單拖動(dòng)，頁面內(nèi)容不變；點(diǎn)擊菜單，頁面內(nèi)容滾動(dòng)到相應(yīng)位置——為了實(shí)現(xiàn)這一效果，我先后使用了三種方法，最終才找到現(xiàn)在的解決之道。

當(dāng)然，以上三點(diǎn)是我個(gè)人感覺在制作拼多多Axure原型中比較困難的地方，其他Banner切換、菜單切換、商品列表、彈窗等常規(guī)操作沒有一一列出，在后續(xù)的內(nèi)容中都會(huì)一一描述，為Axure新手提供相應(yīng)的參考。

二、拼多多Axure原型制作的前期準(zhǔn)備

對(duì)初學(xué)者來說，必須首先熟悉Axure的各項(xiàng)基本操作，這里推薦小樓的基礎(chǔ)教程，網(wǎng)上一搜就可以找到。在掌握基礎(chǔ)操作之后，就需要制作一張拼多多功能列表的思維導(dǎo)圖，我的成果如下所示：

通過思維導(dǎo)圖分析，我們可以看到拼多多原型主要會(huì)有5個(gè)頁面：首頁、推薦、搜索、聊天、個(gè)人中心

在這里，我詳細(xì)列出了主要的頁面和頁面內(nèi)各模塊的相關(guān)信息，并提前預(yù)演了不同模塊的實(shí)現(xiàn)方式。通過提前制作思維導(dǎo)圖，可以理清思路，同時(shí)也方便在原型制作過程中一一對(duì)照，防止遺u漏。順便一提，我所使用的思維導(dǎo)圖工具是XMind，基礎(chǔ)功能已經(jīng)足夠使用，不用破解。

三、拼多多APP設(shè)計(jì)

對(duì)于仿制工作來說，最大的好處就是不用思考布局問題。在Axure中插入圖片控件——拖入拼多多首頁截圖——固定長寬比例——設(shè)置寬度為375——畫出各模塊參考線

這里，我又偷了一個(gè)懶，直接右鍵選擇“分割圖片”，把頁面頂部保留下來作為原型的一個(gè)模塊，然后添加兩個(gè)熱區(qū)分別實(shí)現(xiàn)“退出”和“打開底部菜單”的交互。

1. 退出按鈕的功能實(shí)現(xiàn)

退出按鈕的功能實(shí)現(xiàn)非常簡單，直接點(diǎn)擊相應(yīng)熱區(qū)，在右側(cè)選擇用例編輯“鼠標(biāo)點(diǎn)擊時(shí)”。用例設(shè)置為“打開鏈接”——“鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面”，我選擇的是“說明”這個(gè)頁面。在部分原型中沒有“說明”頁面，也可以鏈接到“首頁”。

“打開底部菜單”功能較為復(fù)雜，且顯示層級(jí)高于其它模塊，所以放在后面實(shí)現(xiàn)。

2. 頂部分類導(dǎo)航的Axure原型

在完成頂部狀態(tài)欄之后，接下來就是一個(gè)橫條的分類導(dǎo)航頁面，其效果如下圖所示：

分析可知，這個(gè)模塊要實(shí)現(xiàn)的功能包括：

• 左右滑動(dòng)，可以切換不同的導(dǎo)航項(xiàng)目；
• 點(diǎn)擊不同的項(xiàng)目可以打開相應(yīng)的頁面；
• 打開頁面時(shí)，導(dǎo)航項(xiàng)目處于選中狀態(tài)（文字變紅，且下方有紅線）；

我是通過動(dòng)態(tài)面板實(shí)現(xiàn)這一功能的，具體操作如下：

1.在頁面放置1個(gè)矩形，寬度w 48，高度h 35；

2.在矩形上右鍵單擊，選擇“交互樣式”——“選中”，設(shè)置字體顏色為紅色；

3.復(fù)制第一個(gè)矩形到8個(gè)，并調(diào)整矩形文字和排列；

4.全選8個(gè)矩形，將其轉(zhuǎn)換為動(dòng)態(tài)面板；

5.雙擊動(dòng)態(tài)面板，命名為頂部分類導(dǎo)航；

6.雙擊State1，打開頁面；

7.為每個(gè)菜單編輯“鼠標(biāo)單擊時(shí)”事件，打開相應(yīng)的鏈接；

8.全選8個(gè)矩形，右鍵單擊后選擇設(shè)置選項(xiàng)組（確保選擇的唯一性）；

9.在“熱門”菜單下畫一條線，設(shè)置選中狀態(tài)為紅色，復(fù)制到各個(gè)菜單；

10.為紅線命名后，全選所有紅線，設(shè)置為選項(xiàng)組；

11.將所有紅線都改為透明/無色狀態(tài)；

12.關(guān)閉State1后，雙擊動(dòng)態(tài)面板，復(fù)制State1到State5；

13.編輯后續(xù)的State，每個(gè)State調(diào)整一個(gè)菜單，簡單舉例，State1為：甲乙丙丁，State2為：乙丙丁戊，每次刪除第一個(gè)，在后面添加一個(gè)，以此類推；

14.關(guān)閉各個(gè)State后，設(shè)置頂部導(dǎo)航動(dòng)態(tài)面板的用例，主要是三個(gè)：向左拖動(dòng)結(jié)束時(shí)、向右拖動(dòng)結(jié)束時(shí)、以及載入時(shí)

• 向左拖動(dòng)結(jié)束時(shí)：設(shè)置條件為：面板狀態(tài)不是State5；動(dòng)作為：向后循環(huán)，并設(shè)置動(dòng)畫
• 向右拖動(dòng)結(jié)束時(shí)：設(shè)置條件為：面板狀態(tài)不是State1；動(dòng)作為：向前循環(huán)，并設(shè)置動(dòng)畫
• 設(shè)置載入時(shí)動(dòng)作為：設(shè)置“熱門”矩形塊和對(duì)應(yīng)線條為選中狀態(tài)

這樣頂部導(dǎo)航的效果就基本實(shí)現(xiàn)了，在其他頁面需要使用時(shí)，直接復(fù)制此控件，并改變對(duì)應(yīng)菜單選中狀態(tài)即可。

在這里要說明的有三點(diǎn)：

一是選項(xiàng)組的作用，設(shè)置選項(xiàng)組之后，選中其中一個(gè)元件，其它元件會(huì)立刻取消選中狀態(tài)，這樣能夠避免多個(gè)元件同時(shí)被選中的情況出現(xiàn)。

二是矩形塊和線條分別設(shè)置選項(xiàng)組，是因?yàn)榻M合之后不能設(shè)置選項(xiàng)組。

三是向左、向右滑動(dòng)，設(shè)置相應(yīng)的條件是為了避免出現(xiàn)菜單循環(huán)的情況。

最后，如果你下載了我做的AYang原型，就會(huì)發(fā)現(xiàn)頂部導(dǎo)航菜單的選中狀態(tài)并未設(shè)置，這是我的失誤。寫文章的時(shí)候才發(fā)現(xiàn)這個(gè)問題，但我不想改了，請大家參照教程改正即可，多謝~

3. 循環(huán)Banner的Axure原型實(shí)現(xiàn)（動(dòng)態(tài)面板）

頂部導(dǎo)航完成之后，接著要做的是首頁Banner。拼多多的首頁Banner有8個(gè)之多，為了減少工作量，我減少到了3個(gè)。效果如下圖所示：

分析可知，其需求主要為：

• 圖片每隔3秒/5秒自動(dòng)循環(huán)切換；
• 右下角三個(gè)圓點(diǎn)隨圖片切換而改變顏色；

這是一個(gè)比較簡單的動(dòng)態(tài)面板實(shí)現(xiàn)效果，非常適合新人練手使用，操作過程如下：

1.在頂部導(dǎo)航下方插入一個(gè)圖片控件，上傳提前制作好的圖片（375*140，推薦用創(chuàng)客貼制作）；

2.拖入一個(gè)圓形控件，調(diào)整尺寸為：w10、h10，復(fù)制三個(gè)排列一行后，將第一個(gè)改為紅色；

3.全選圖片和三個(gè)圓點(diǎn)，右鍵點(diǎn)擊，將其轉(zhuǎn)換為動(dòng)態(tài)面板，命名為“首頁banner”；

4.點(diǎn)擊State1，并復(fù)制2個(gè)，點(diǎn)擊右上角倒數(shù)第二個(gè)按鈕，全部打開；

5.在State2、State3中分別更換圖片，并調(diào)整圓點(diǎn)顏色；

6.關(guān)閉State1、State2、State3；

7.設(shè)置動(dòng)態(tài)面板載入時(shí)動(dòng)作為：向后循環(huán)、循環(huán)間隔3000毫秒、向左滑動(dòng)500毫秒；

保存預(yù)覽就可以了。這種banner切換的實(shí)現(xiàn)方法比較簡單，適合作為練手案例。

4. 模塊導(dǎo)航的Axure原型實(shí)現(xiàn)（中繼器）

在首頁banner下面是模塊導(dǎo)航，要實(shí)現(xiàn)的效果如圖所示：

分析可知，其主要需求為：

• 每頁顯示10個(gè)icon+名稱，共兩頁（每頁有4個(gè)是相同的，實(shí)際是16個(gè)菜單）；
• 頁面可以滑動(dòng)切換；
• 底部有狀態(tài)顯示條，通過長寬和顏色的變化表明切換狀態(tài)。

實(shí)現(xiàn)上述效果有兩種方法，一種是直接排列10個(gè)圖標(biāo)菜單+圖形，然后通過動(dòng)態(tài)面板實(shí)現(xiàn)切換；另一種是通過中繼器的方式實(shí)現(xiàn)菜單展現(xiàn)，然后通過動(dòng)態(tài)面板實(shí)現(xiàn)切換。我選擇的是用中繼器的方式。具體的操作步驟如下：

1.在banner下方拖入一個(gè)中繼器模塊，調(diào)整其樣式為——布局：水平、網(wǎng)格布局：每排項(xiàng)目數(shù)-5、分頁-每頁顯示10個(gè)；

2.雙擊中繼器，進(jìn)入編輯頁面，拖入一個(gè)圖片模塊，調(diào)整尺寸為40*40，位置居中；

3.圖片下方拖入一個(gè)文本標(biāo)簽，居中對(duì)齊；

4.在右側(cè)屬性欄下拉，找到中繼器窗口，第一列命名為mkimage、第二列命名為mkname，然后上傳相應(yīng)數(shù)據(jù)（上傳圖片只要右鍵單擊，選擇導(dǎo)入圖片即可），共10個(gè)；

5.設(shè)置左側(cè)用例：每項(xiàng)加載時(shí)，設(shè)置文字于矩形=mkname，設(shè)置圖片于圖片=mkiamge（注意這是兩個(gè)不同的動(dòng)作，請認(rèn)真選擇）；

6.確認(rèn)可以正常顯示后，右鍵單擊將中繼器轉(zhuǎn)換為動(dòng)態(tài)面板；

7.雙擊動(dòng)態(tài)面板，將其命名為“模塊導(dǎo)航”，復(fù)制后全部打開；

8.在State1中拖入兩個(gè)矩形，調(diào)整寬度、高度和圓角半徑和顏色，形成長條紅和短條灰的狀態(tài)；

9.復(fù)制State1中的兩個(gè)矩形到State2，并調(diào)整長短條的位置；

10.改變State2中的中繼器數(shù)據(jù)，在右側(cè)屬性中修改即可；

11.關(guān)閉State1和State2，點(diǎn)擊動(dòng)態(tài)面板，設(shè)置動(dòng)作，分別是向左拖動(dòng)結(jié)束時(shí)和向右拖動(dòng)結(jié)束時(shí)，動(dòng)作為切換狀態(tài)。

12.中繼器中也可以為每個(gè)元素添加鏈接，因?yàn)槲蚁胧∈?，所以在這里并未實(shí)現(xiàn)（實(shí)現(xiàn)方法為：添加一列，然后右鍵單擊“添加引用”，輸入相應(yīng)的鏈接，然后在賦值時(shí)選擇“打開鏈接”，選擇第三項(xiàng)，輸入fx即可）

做完這一步就可以實(shí)現(xiàn)我們開頭實(shí)現(xiàn)的效果。如果還有不明白的地方，可以下載AYang拼多多案例的Axure文件查看。

5. 商品列表的中繼器實(shí)現(xiàn)方法

在模塊導(dǎo)航之后要實(shí)現(xiàn)的商品列表，這是電商平臺(tái)主要的內(nèi)容展現(xiàn)形式，通過中繼器可以非常方便的實(shí)現(xiàn)。具體操作步驟如下：

1.分析商品列表的構(gòu)成元素，主要包括：主圖、商品名、價(jià)格（包括￥和數(shù)字兩部分）、已拼xxx件、拼單用戶頭像這幾個(gè)部分；

2.分析清楚之后，在頁面中拖入一個(gè)中繼器，調(diào)整其結(jié)構(gòu)為水平布局、每行兩個(gè)、行間距5、列間距2；

3.雙擊中繼器，編輯詳情——按照第一步分析的項(xiàng)目，分別拖入相應(yīng)的控件，布局情況如下圖所示：

4.在屬性欄分別設(shè)置：spimage、spname、spjiage、spjindu、spima01、spima02，并填充相應(yīng)數(shù)據(jù)（需提前準(zhǔn)備）；

5.參照上文賦值方法，在右側(cè)編輯用例：每項(xiàng)加載時(shí)，分別設(shè)置文字和圖像的對(duì)應(yīng)關(guān)系；

6.還有一個(gè)問題是拖入的圖片控件是方的，而商品價(jià)格旁邊的頭像是圓的，實(shí)現(xiàn)方法是點(diǎn)擊圖片，等待其出現(xiàn)倒立三角符號(hào)后拖動(dòng)這個(gè)符號(hào)，拖動(dòng)中間位置即可。

完成以上操作后，就可以看到很好的商品列表效果了。

6. 底部菜單的實(shí)現(xiàn)方法

底部菜單要實(shí)現(xiàn)的效果非常簡單：

• 點(diǎn)擊相應(yīng)按鈕可以到達(dá)對(duì)應(yīng)頁面；
• 當(dāng)前顯示頁面對(duì)應(yīng)的選項(xiàng)為紅色；

實(shí)現(xiàn)方法也比較簡單，基本上是上文中頂部分類導(dǎo)航的簡化版，具體操作步驟如下：

1.在頁面底部拖入一個(gè)白色矩形；

2.將頁面五等分，然后在白色矩形上分別放入5個(gè)icon和菜單名字；

3.分別設(shè)置icon和菜單文字的選中效果——變紅色

4.分別選中icon和菜單文字，設(shè)置選項(xiàng)組；

5.組合單個(gè)菜單的icon和文字，并設(shè)置其動(dòng)作——鼠標(biāo)單擊時(shí)，在當(dāng)前窗口打開鏈接、設(shè)置選中；

6.編輯頁面載入時(shí)用例，設(shè)置相應(yīng)的底部按鈕為選中狀態(tài)；

這個(gè)操作是比較簡單的，也可以使用成熟的控件直接復(fù)制。

7. 底部呼出菜單的Axure實(shí)現(xiàn)方法

之前說過每個(gè)小程序頁面上方都有兩個(gè)按鈕，一個(gè)是退出，一個(gè)是呼出底部菜單。退出按鈕的實(shí)現(xiàn)方法已經(jīng)說過，下面我們來實(shí)現(xiàn)呼出底部菜單的效果，示意圖如下：

分析可知，要實(shí)現(xiàn)的功能如下：

• 點(diǎn)擊頂部三個(gè)點(diǎn)呼出菜單，再次點(diǎn)擊收起菜單；
• 點(diǎn)擊菜單中“取消”選項(xiàng)，收起菜單；
• 始終保持呼出菜單位于頁面底部；

這里通過簡單的元件和動(dòng)作組合就可以實(shí)現(xiàn)，具體操作步驟如下：

1.在底部菜單之上拖入一個(gè)矩形，寬375、高170；

2.在矩形之上再拖入一個(gè)矩形，寬375、高40，然后復(fù)制3個(gè)，分別填入菜單內(nèi)容后將其組合；

3.然后就是設(shè)置相應(yīng)的動(dòng)作，點(diǎn)擊頂部三個(gè)點(diǎn)的熱區(qū)，設(shè)置鼠標(biāo)點(diǎn)擊時(shí)動(dòng)作為：if元件狀態(tài)不可見，則顯示下方元件（重要?。?！在更多中，選擇燈箱效果，可實(shí)現(xiàn)全屏遮罩效果）；if元件可見，則隱藏三個(gè)元件；

4.底部呼出菜單和狀態(tài)欄、包括頂部的狀態(tài)欄都需要處于固定狀態(tài)，而這只能通過動(dòng)態(tài)面板實(shí)現(xiàn)，所以將呼出菜單全選后轉(zhuǎn)換為動(dòng)態(tài)面板；

5.右鍵點(diǎn)擊動(dòng)態(tài)面板，選擇“固定到瀏覽器”選項(xiàng)，將垂直固定改為“下”，邊距改為55（底部菜單的高度），上下打勾；

這樣就可以實(shí)現(xiàn)我們想要的效果。

補(bǔ)充一點(diǎn)：瀏覽器固定非常有用，每個(gè)頁面的頂部狀態(tài)欄和底部菜單都要進(jìn)行同樣的操作。后續(xù)遇到相同的場景，大家可自行操作，AYang就不再特別指出了。

8. 拼多多浮動(dòng)信息條的Axure實(shí)現(xiàn)

完成以上操作后，拼多多商城首頁的框架就基本完善了，剩下的就是兩個(gè)錦上添花的地方：浮動(dòng)信息條和彈窗。浮動(dòng)信息欄的效果如下圖所示，

具體講需求就是：

• 內(nèi)容周期性出現(xiàn)，且每次內(nèi)容有所變化；
• 浮于頁面上方，在頁面滑動(dòng)的情況下位置不變；

雖然需求不多，但是實(shí)現(xiàn)這樣的效果還是要花一些心思的，具體的實(shí)現(xiàn)方法如下：

1.首先在banner上方拉入一個(gè)矩形框，設(shè)置w250、h40、圓角半徑5、顏色深灰色、透明度80%、位置x10、y104；

2.繼續(xù)拖入一個(gè)圖形空間、一個(gè)矩形/文本空間、一個(gè)右箭頭，并調(diào)整為合適的樣式；

3.全選以上元件，轉(zhuǎn)換為動(dòng)態(tài)面板，命名為：頂部滾動(dòng)條；

4.復(fù)制三個(gè)State，并全部打開，更換其中的頭像和文字內(nèi)容；

5.關(guān)閉所有State后，我們來設(shè)置動(dòng)態(tài)面板的動(dòng)作，首先要實(shí)現(xiàn)的內(nèi)容周期性出現(xiàn)，且每次都變換內(nèi)容。這里我們通過設(shè)置“顯示時(shí)”的用例來實(shí)現(xiàn)，具體規(guī)則為：等待3000毫秒、隱藏所有元件、等待1000毫秒、設(shè)置動(dòng)態(tài)面板為Next wrap、顯示所有元件（注意以上動(dòng)作的順序不能亂 ）；

6.然后我們再來實(shí)現(xiàn)第二項(xiàng)需求：滾動(dòng)條隨著頁面滑動(dòng)而滑動(dòng)，此處需要設(shè)置“窗口滾動(dòng)時(shí)”的動(dòng)作，具體為：if window.scrollY > 104，則移動(dòng)頂部滾動(dòng)條 to（絕對(duì)位置：10 , window.scrollY+104）；反之，if window.scrollY ≤ 104，則移動(dòng)頂部滾動(dòng)條 to（絕對(duì)位置：10 , 104）；

7.經(jīng)過以上設(shè)置，已經(jīng)可以基本可以實(shí)現(xiàn)我們所需要的效果，但是還有一個(gè)地方需要設(shè)置：信息條并非一開始就出現(xiàn)，而是頁面加載后一段時(shí)間才出現(xiàn)，所以我們還需要設(shè)置一個(gè)動(dòng)作如下——右鍵單擊信息條，將其設(shè)為隱藏；然后設(shè)置頁面“載入時(shí)”的動(dòng)作為——等待1000毫秒，顯示信息條所有元件；

預(yù)覽一下，看看是不是已經(jīng)實(shí)現(xiàn)我們想要的浮動(dòng)信息條效果。如果還有不清楚的地方，歡迎下載AYang原型文件查看。

9. 回到頂部按鈕的Axure實(shí)現(xiàn)方法

拼多多的頁面較長，幾乎可以無限下滑，所以“回到頂部”按鈕是必不可少的。

需要實(shí)現(xiàn)的效果如下：

• 頁面下滑一段距離后出現(xiàn)“回到頂部”按鈕；
• 點(diǎn)擊按鈕，頁面滾動(dòng)至頂部；
• 回到頂部后，按鈕消失

在了解Axure基本操作后，要實(shí)現(xiàn)這一需求還是比較簡單的，具體操作步驟如下：

1.在頁面右下角拖入一個(gè)圓形、一個(gè)文本標(biāo)簽、一個(gè)向上箭頭，并調(diào)整其樣式；

2.在頂部拖入一個(gè)熱區(qū)，調(diào)整為w375、h10，并命名為“頂部熱區(qū)”；

3.將上述三個(gè)元件全選后右鍵單擊“轉(zhuǎn)換為動(dòng)態(tài)面板”；

4.設(shè)置“頁面滾動(dòng)時(shí)”動(dòng)作為：if window.scrollY > 375，則顯示上述元件；if window.scrollY ≤ 375，則隱藏上述元件；

5.設(shè)置“鼠標(biāo)單擊時(shí)”動(dòng)作為：滾動(dòng)到“頂部熱區(qū)”，僅垂直滾動(dòng)，動(dòng)畫為線性500ms；

6.設(shè)置上述元件為隱藏狀態(tài)；

通過上述簡單的設(shè)置就可以實(shí)現(xiàn)我們想要的效果了。如果你已經(jīng)練習(xí)過上文所有的操作，這一操作就非常簡單；

10. 彈窗的Axure實(shí)現(xiàn)方法

拼多多的首頁還有一個(gè)突出特征就是每次都會(huì)彈出的兩層彈窗，通常還比較有吸引力，這一效果在很多產(chǎn)品中都很常見。它的需求比較清晰：

• 頁面加載時(shí)彈出第一個(gè)頁面，要求除了彈窗區(qū)域外，其它地方為透明；
• 點(diǎn)掉第一個(gè)彈窗后，出現(xiàn)第二個(gè)彈窗；
• 點(diǎn)掉第二個(gè)彈窗后，出現(xiàn)首頁；

它的實(shí)現(xiàn)方式也非常簡單：

1.準(zhǔn)備兩個(gè)彈窗圖片；

2.在頁面正面拖入一個(gè)動(dòng)態(tài)面板，將其命名為“首頁彈窗”；

3.雙擊后復(fù)制State1，全部打開，分別放入提前準(zhǔn)備的圖片，并在右上角拖入一個(gè)“x”標(biāo)記；

4.在State1中，設(shè)置圖片“鼠標(biāo)單擊時(shí)”動(dòng)作為：打開商品詳情頁；“x”標(biāo)記“鼠標(biāo)單擊時(shí)”動(dòng)作為：設(shè)置動(dòng)態(tài)面板狀態(tài)為State2；

5.在State2中，設(shè)置圖片“鼠標(biāo)單擊時(shí)”動(dòng)作為：打開商品詳情頁；“x”標(biāo)記“鼠標(biāo)單擊時(shí)”動(dòng)作為：隱藏“首頁彈窗”；

6.關(guān)閉所有State，設(shè)置“頁面載入時(shí)”的動(dòng)作為“顯示彈窗”，在下方的“更多選項(xiàng)”中選擇“燈箱效果”，這樣可以實(shí)現(xiàn)彈出后其它部分為透明的效果；

通過以上設(shè)置，就可以實(shí)現(xiàn)拼多多首頁彈窗的效果。如果還有不清楚的地方，歡迎參考AYang原型文件。

拼多多的其它頁面都可以參考首頁快速完成，我一般是按照：復(fù)制首頁——改頁面名稱——?jiǎng)h除不需要的部分——添加不同的元件的步驟進(jìn)行，制作速度會(huì)提高不少。所以，后面的內(nèi)容重點(diǎn)講講比較難做的兩個(gè)效果：秒級(jí)變動(dòng)的倒計(jì)時(shí)和頁面左右聯(lián)動(dòng)。

11. 毫秒級(jí)變動(dòng)倒計(jì)時(shí)的Axure實(shí)現(xiàn)方法

拼多多必不可少的就是拼單功能，它在商品詳情頁的拼單模塊也比較酷炫，效果圖如下：

其功能需求為：

• 顯示用戶頭像、昵稱、拼單進(jìn)度、成單倒計(jì)時(shí)及拼單按鈕；
• 不斷切換不同用戶，倒計(jì)時(shí)以毫秒為單位變動(dòng)，同時(shí)還需要連續(xù)變動(dòng)；

按照之前的思路，用戶切換比較簡單，可以通過動(dòng)態(tài)面板實(shí)現(xiàn)，但是要想實(shí)現(xiàn)毫秒級(jí)的連續(xù)倒計(jì)時(shí)還是需要花費(fèi)一點(diǎn)心思的。經(jīng)過多方探索，我最終通過“變量”的方式實(shí)現(xiàn)了這一效果，具體操作如下：

1.在“項(xiàng)目”——“全局變量”中增加三個(gè)變量：m、ma、sa，并設(shè)置他們的初始值為0；

2.在商品詳情頁中，依次拖入圖片、文本標(biāo)簽和按鈕空間，并調(diào)整其樣式與拼多多原始界面相似（注意剩余時(shí)間單獨(dú)占據(jù)一個(gè)文本標(biāo)簽控件）；

3.將上述元件轉(zhuǎn)換為動(dòng)態(tài)面板，并命名為“拼單邀請”，打開State1；

4.拖入一個(gè)動(dòng)態(tài)面板，并設(shè)置其動(dòng)作，分別為：載入時(shí)——設(shè)置值m=5、ma=4、sa=2，設(shè)置面板狀態(tài)為向后循環(huán)，循環(huán)間隔100ms；

5.繼續(xù)設(shè)置上述動(dòng)態(tài)面板“狀態(tài)改變時(shí)”的動(dòng)作為：設(shè)置值于sa=sa-1、if sa≤0，則ma=ma-1并且sa=9、if ma≤0，則m=m-1且ma=9、if m≤0，則m=5、設(shè)置文字于剩余時(shí)間=剩余23:54：[m][ma].[sa]

6.點(diǎn)擊State1中的空白區(qū)域，然后設(shè)置整個(gè)區(qū)域的動(dòng)作，為：鼠標(biāo)移入時(shí)——設(shè)置動(dòng)態(tài)面板停止循環(huán)、鼠標(biāo)移出時(shí)——?jiǎng)討B(tài)面板恢復(fù)循環(huán)、載入時(shí)——向下循環(huán)；

7.關(guān)閉State1后，雙擊拼單動(dòng)態(tài)面板，復(fù)制出State2和State3，并修改其中的頭像和相關(guān)數(shù)據(jù)；

預(yù)覽就可以看到最終的效果了。這里嵌套了兩個(gè)動(dòng)態(tài)面板，第一個(gè)動(dòng)態(tài)面板實(shí)現(xiàn)頁面內(nèi)容的切換，第二個(gè)內(nèi)嵌的動(dòng)態(tài)面板主要實(shí)現(xiàn)數(shù)字的變動(dòng)。大家可以自己實(shí)踐一下，如果還弄不清楚，歡迎下載AYang原型查看。

12. 左右頁面分別滑動(dòng)且聯(lián)動(dòng)的Axure實(shí)現(xiàn)方法

拼多多的搜索頁面是我當(dāng)時(shí)遇到的最后一個(gè)難點(diǎn)頁面，這個(gè)界面看起來簡單，但要實(shí)現(xiàn)的功能卻一點(diǎn)也不簡單（效果圖見文章第一部分），具體如下：

• 頁面分為兩部分，左邊為菜單導(dǎo)航，右邊為相應(yīng)內(nèi)容；
• 菜單導(dǎo)航可自由滑動(dòng)，不帶動(dòng)右側(cè)頁面移動(dòng)；
• 點(diǎn)擊菜單選項(xiàng)則右側(cè)內(nèi)容移動(dòng)到相應(yīng)位置；
• 右側(cè)內(nèi)容滑動(dòng)，帶動(dòng)左側(cè)菜單位置和選中狀態(tài)改變；

主要難點(diǎn)在于這三種動(dòng)作之間的聯(lián)動(dòng)，每一種變化都可能帶來想不到的結(jié)果，所以試了很多調(diào)整方法。最終確定的操作方式如下：

1.拖入一個(gè)矩形，設(shè)置為w90、h50，調(diào)整其交互樣式為：選中狀態(tài)——底為白色、字為紅色，并復(fù)制18個(gè)，組成左側(cè)內(nèi)容菜單；

2.將矩形編為選項(xiàng)組；

3.添加右側(cè)內(nèi)容，可用圖片代替，或調(diào)整原有的中繼器展現(xiàn)形式，在做好一個(gè)后，復(fù)制即可，注意按照菜單欄為主要元件命名，避免后續(xù)操作找不到相應(yīng)的元件；

4.首先設(shè)置比較簡單的單擊動(dòng)作，動(dòng)作設(shè)置為：當(dāng)鼠標(biāo)單擊時(shí)，則設(shè)置本按鈕為選中狀態(tài)，同時(shí)右側(cè)內(nèi)容滾動(dòng)至上一個(gè)菜單處，如點(diǎn)擊鞋包菜單，則設(shè)置鞋包選中，同時(shí)滾動(dòng)至男裝，這樣能確保當(dāng)前菜單對(duì)應(yīng)的內(nèi)容處于頁面中央位置；

5.在右側(cè)內(nèi)容區(qū)域中間位置添加一個(gè)熱區(qū)，將其命名為“中部錨點(diǎn)”、w260、h10，位置根據(jù)需要進(jìn)行調(diào)整，調(diào)整后轉(zhuǎn)換為動(dòng)態(tài)面板，并固定與瀏覽器中；

6.設(shè)置右側(cè)內(nèi)容的滾動(dòng)狀態(tài)，如中繼器（icon部分）接觸中部錨點(diǎn)，則設(shè)置對(duì)應(yīng)菜單為選中狀態(tài)，同時(shí)移動(dòng)左側(cè)內(nèi)容to絕對(duì)位置[0，Window.scrollY-145]，這個(gè)值需要根據(jù)菜單不同而調(diào)整，每次增加50；

7.最后設(shè)置左側(cè)菜單的拖動(dòng)效果，將菜單項(xiàng)全選后轉(zhuǎn)換為動(dòng)態(tài)面板，并設(shè)置其“拖動(dòng)時(shí)”動(dòng)作為：垂直拖動(dòng)，邊界為頂部大于等于Window.scrollY-380，≤Window.scrollY+105；

完成上述操作后，就可以預(yù)覽最終效果了。我寫的這種方法涉及很多重復(fù)操作，并且頁面長度較長、內(nèi)容重復(fù)也比較多。但是已經(jīng)是我能找到的最好方法，歡迎有更好方法的人瀏覽討論。如果還看不清楚的，歡迎下載AYang原型查看。

13. 清除搜索歷史記錄的Axure原型實(shí)現(xiàn)

拼多多搜索頁面還有一個(gè)次級(jí)頁面，效果如下：

需要實(shí)現(xiàn)的效果是：

• 搜索框可輸入內(nèi)容；
• 點(diǎn)擊刪除按鈕，可刪除歷史搜索記錄；

這種效果的實(shí)現(xiàn)也比較簡單，具體操作步驟如下：

1.按照原始頁面拖入所有元件，并完成頁面布局；

2.全選歷史搜索及以下的元件，將其轉(zhuǎn)換為動(dòng)態(tài)面板，命名為“搜索頁面”；

3.復(fù)制一個(gè)頁面，然后在State2中，把歷史搜索相關(guān)的內(nèi)容刪除，只保留熱門搜索的內(nèi)容；

4.在搜索頁面拖入一個(gè)選擇框元件（這里用的成熟元件），設(shè)置其“取消”按鈕動(dòng)作為鼠標(biāo)單擊時(shí)，隱藏選擇框；“確定”按鈕動(dòng)作為鼠標(biāo)單擊時(shí)，面板狀態(tài)為State2且隱藏選擇框；

5.在State1中，選擇刪除按鈕，設(shè)置其“鼠標(biāo)單擊時(shí)”動(dòng)作為：顯示選擇框組合、燈箱效果；

6.設(shè)置選擇框組合狀態(tài)為隱藏；

這樣就可以預(yù)覽最終的效果了。

四、總結(jié)

事實(shí)上，Axure還可以實(shí)現(xiàn)輸入搜索內(nèi)容出現(xiàn)在下方歷史搜索的效果，但是我覺得沒有必要在這里體現(xiàn)，就沒有做。有興趣的同學(xué)可以自行探索~

寫到這里，我覺得在做拼多多原型仿制中能寫的內(nèi)容就已經(jīng)寫完了。當(dāng)然由于我水平有限、考慮不周，文章和原型中出現(xiàn)錯(cuò)誤和疏漏在所難免，希望大家在查看時(shí)足夠包容，也歡迎在評(píng)論中指出，以免后人誤入歧途，感恩！

最后附上原型的效果演示：AYang拼多多商城仿制原型演示

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

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