中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

網絡上的教程都是關于Axure的某個功能，或者基于某個實現方法而進行解釋的。但作者更希望，是從頭到尾打造一個完整的應用，而從中學習到Axure的使用與方法。

Axure是產品經理最常用的工具軟件之一，熟練掌握這一工具對產品經理至關重要。在學習的時候，我一直推崇“練中學、學中練”的學習方法，相較于單純的原理學習或者一個控件、一個原理的實現，一個完整的項目會激發你所有可用的知識，并要求你去不斷學習新的知識點，同時高強度的重復操作也會加深對Axure基本操作的認知。

同時，我也更為推崇文章類型的教程，因為可以反復查看、反復對照，比音頻更直觀、比視頻更省時間。

可惜的是，在我學習的時候并沒有找到這種符合要求的教程。

最近，因為個人原因，需要仿制一個拼多多的原型文件。借助這一契機，我寫了這樣一篇文章，希望能對同好有所幫助。

因為這是一篇實戰性的文章，所以對原理部分介紹的比較少。如果大家需要，可以根據自己的需要學習研究。

一、拼多多原型項目的難點

在制作拼多多原型的過程中，除了動態面板、中繼器等對新手來說比較難的常規操作之外，還有三個地方給我留下了深刻的印象：

第一個，很多頁面都會出現在頂部的浮動信息欄，時隱時現，并交替出現不同的內容，同時在頁面滑動時始終保持固定的位置；

第二個，商品詳情頁中的參與拼單倒計時，會顯示不同用戶的信息，同時剩余時間還會以秒為單位減少。這個效果相當酷炫，當然實現它也耗費了我大量的精力；

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

當然，以上三點是我個人感覺在制作拼多多Axure原型中比較困難的地方，其他Banner切換、菜單切換、商品列表、彈窗等常規操作沒有一一列出，在后續的內容中都會一一描述，為Axure新手提供相應的參考。

二、拼多多Axure原型制作的前期準備

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

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

在這里，我詳細列出了主要的頁面和頁面內各模塊的相關信息，并提前預演了不同模塊的實現方式。通過提前制作思維導圖，可以理清思路，同時也方便在原型制作過程中一一對照，防止遺u漏。順便一提，我所使用的思維導圖工具是XMind，基礎功能已經足夠使用，不用破解。

三、拼多多APP設計

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

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

1. 退出按鈕的功能實現

退出按鈕的功能實現非常簡單，直接點擊相應熱區，在右側選擇用例編輯“鼠標點擊時”。用例設置為“打開鏈接”——“鏈接到當前項目的某個頁面”，我選擇的是“說明”這個頁面。在部分原型中沒有“說明”頁面，也可以鏈接到“首頁”。

“打開底部菜單”功能較為復雜，且顯示層級高于其它模塊，所以放在后面實現。

2. 頂部分類導航的Axure原型

在完成頂部狀態欄之后，接下來就是一個橫條的分類導航頁面，其效果如下圖所示：

分析可知，這個模塊要實現的功能包括：

• 左右滑動，可以切換不同的導航項目；
• 點擊不同的項目可以打開相應的頁面；
• 打開頁面時，導航項目處于選中狀態（文字變紅，且下方有紅線）；

我是通過動態面板實現這一功能的，具體操作如下：

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

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

3.復制第一個矩形到8個，并調整矩形文字和排列；

4.全選8個矩形，將其轉換為動態面板；

5.雙擊動態面板，命名為頂部分類導航；

6.雙擊State1，打開頁面；

7.為每個菜單編輯“鼠標單擊時”事件，打開相應的鏈接；

8.全選8個矩形，右鍵單擊后選擇設置選項組（確保選擇的唯一性）；

9.在“熱門”菜單下畫一條線，設置選中狀態為紅色，復制到各個菜單；

10.為紅線命名后，全選所有紅線，設置為選項組；

11.將所有紅線都改為透明/無色狀態；

12.關閉State1后，雙擊動態面板，復制State1到State5；

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

14.關閉各個State后，設置頂部導航動態面板的用例，主要是三個：向左拖動結束時、向右拖動結束時、以及載入時

• 向左拖動結束時：設置條件為：面板狀態不是State5；動作為：向后循環，并設置動畫
• 向右拖動結束時：設置條件為：面板狀態不是State1；動作為：向前循環，并設置動畫
• 設置載入時動作為：設置“熱門”矩形塊和對應線條為選中狀態

這樣頂部導航的效果就基本實現了，在其他頁面需要使用時，直接復制此控件，并改變對應菜單選中狀態即可。

在這里要說明的有三點：

一是選項組的作用，設置選項組之后，選中其中一個元件，其它元件會立刻取消選中狀態，這樣能夠避免多個元件同時被選中的情況出現。

二是矩形塊和線條分別設置選項組，是因為組合之后不能設置選項組。

三是向左、向右滑動，設置相應的條件是為了避免出現菜單循環的情況。

最后，如果你下載了我做的AYang原型，就會發現頂部導航菜單的選中狀態并未設置，這是我的失誤。寫文章的時候才發現這個問題，但我不想改了，請大家參照教程改正即可，多謝~

3. 循環Banner的Axure原型實現（動態面板）

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

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

• 圖片每隔3秒/5秒自動循環切換；
• 右下角三個圓點隨圖片切換而改變顏色；

這是一個比較簡單的動態面板實現效果，非常適合新人練手使用，操作過程如下：

1.在頂部導航下方插入一個圖片控件，上傳提前制作好的圖片（375*140，推薦用創客貼制作）；

2.拖入一個圓形控件，調整尺寸為：w10、h10，復制三個排列一行后，將第一個改為紅色；

3.全選圖片和三個圓點，右鍵點擊，將其轉換為動態面板，命名為“首頁banner”；

4.點擊State1，并復制2個，點擊右上角倒數第二個按鈕，全部打開；

5.在State2、State3中分別更換圖片，并調整圓點顏色；

6.關閉State1、State2、State3；

7.設置動態面板載入時動作為：向后循環、循環間隔3000毫秒、向左滑動500毫秒；

保存預覽就可以了。這種banner切換的實現方法比較簡單，適合作為練手案例。

4. 模塊導航的Axure原型實現（中繼器）

在首頁banner下面是模塊導航，要實現的效果如圖所示：

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

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

實現上述效果有兩種方法，一種是直接排列10個圖標菜單+圖形，然后通過動態面板實現切換；另一種是通過中繼器的方式實現菜單展現，然后通過動態面板實現切換。我選擇的是用中繼器的方式。具體的操作步驟如下：

1.在banner下方拖入一個中繼器模塊，調整其樣式為——布局：水平、網格布局：每排項目數-5、分頁-每頁顯示10個；

2.雙擊中繼器，進入編輯頁面，拖入一個圖片模塊，調整尺寸為40*40，位置居中；

3.圖片下方拖入一個文本標簽，居中對齊；

4.在右側屬性欄下拉，找到中繼器窗口，第一列命名為mkimage、第二列命名為mkname，然后上傳相應數據（上傳圖片只要右鍵單擊，選擇導入圖片即可），共10個；

5.設置左側用例：每項加載時，設置文字于矩形=mkname，設置圖片于圖片=mkiamge（注意這是兩個不同的動作，請認真選擇）；

6.確認可以正常顯示后，右鍵單擊將中繼器轉換為動態面板；

7.雙擊動態面板，將其命名為“模塊導航”，復制后全部打開；

8.在State1中拖入兩個矩形，調整寬度、高度和圓角半徑和顏色，形成長條紅和短條灰的狀態；

9.復制State1中的兩個矩形到State2，并調整長短條的位置；

10.改變State2中的中繼器數據，在右側屬性中修改即可；

11.關閉State1和State2，點擊動態面板，設置動作，分別是向左拖動結束時和向右拖動結束時，動作為切換狀態。

12.中繼器中也可以為每個元素添加鏈接，因為我想省事，所以在這里并未實現（實現方法為：添加一列，然后右鍵單擊“添加引用”，輸入相應的鏈接，然后在賦值時選擇“打開鏈接”，選擇第三項，輸入fx即可）

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

5. 商品列表的中繼器實現方法

在模塊導航之后要實現的商品列表，這是電商平臺主要的內容展現形式，通過中繼器可以非常方便的實現。具體操作步驟如下：

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

2.分析清楚之后，在頁面中拖入一個中繼器，調整其結構為水平布局、每行兩個、行間距5、列間距2；

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

4.在屬性欄分別設置：spimage、spname、spjiage、spjindu、spima01、spima02，并填充相應數據（需提前準備）；

5.參照上文賦值方法，在右側編輯用例：每項加載時，分別設置文字和圖像的對應關系；

6.還有一個問題是拖入的圖片控件是方的，而商品價格旁邊的頭像是圓的，實現方法是點擊圖片，等待其出現倒立三角符號后拖動這個符號，拖動中間位置即可。

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

6. 底部菜單的實現方法

底部菜單要實現的效果非常簡單：

• 點擊相應按鈕可以到達對應頁面；
• 當前顯示頁面對應的選項為紅色；

實現方法也比較簡單，基本上是上文中頂部分類導航的簡化版，具體操作步驟如下：

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

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

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

4.分別選中icon和菜單文字，設置選項組；

5.組合單個菜單的icon和文字，并設置其動作——鼠標單擊時，在當前窗口打開鏈接、設置選中；

6.編輯頁面載入時用例，設置相應的底部按鈕為選中狀態；

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

7. 底部呼出菜單的Axure實現方法

之前說過每個小程序頁面上方都有兩個按鈕，一個是退出，一個是呼出底部菜單。退出按鈕的實現方法已經說過，下面我們來實現呼出底部菜單的效果，示意圖如下：

分析可知，要實現的功能如下：

• 點擊頂部三個點呼出菜單，再次點擊收起菜單；
• 點擊菜單中“取消”選項，收起菜單；
• 始終保持呼出菜單位于頁面底部；

這里通過簡單的元件和動作組合就可以實現，具體操作步驟如下：

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

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

3.然后就是設置相應的動作，點擊頂部三個點的熱區，設置鼠標點擊時動作為：if元件狀態不可見，則顯示下方元件（重要！?。≡诟嘀?，選擇燈箱效果，可實現全屏遮罩效果）；if元件可見，則隱藏三個元件；

4.底部呼出菜單和狀態欄、包括頂部的狀態欄都需要處于固定狀態，而這只能通過動態面板實現，所以將呼出菜單全選后轉換為動態面板；

5.右鍵點擊動態面板，選擇“固定到瀏覽器”選項，將垂直固定改為“下”，邊距改為55（底部菜單的高度），上下打勾；

這樣就可以實現我們想要的效果。

補充一點：瀏覽器固定非常有用，每個頁面的頂部狀態欄和底部菜單都要進行同樣的操作。后續遇到相同的場景，大家可自行操作，AYang就不再特別指出了。

8. 拼多多浮動信息條的Axure實現

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

具體講需求就是：

• 內容周期性出現，且每次內容有所變化；
• 浮于頁面上方，在頁面滑動的情況下位置不變；

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

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

2.繼續拖入一個圖形空間、一個矩形/文本空間、一個右箭頭，并調整為合適的樣式；

3.全選以上元件，轉換為動態面板，命名為：頂部滾動條；

4.復制三個State，并全部打開，更換其中的頭像和文字內容；

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

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

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

預覽一下，看看是不是已經實現我們想要的浮動信息條效果。如果還有不清楚的地方，歡迎下載AYang原型文件查看。

9. 回到頂部按鈕的Axure實現方法

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

需要實現的效果如下：

• 頁面下滑一段距離后出現“回到頂部”按鈕；
• 點擊按鈕，頁面滾動至頂部；
• 回到頂部后，按鈕消失

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

1.在頁面右下角拖入一個圓形、一個文本標簽、一個向上箭頭，并調整其樣式；

2.在頂部拖入一個熱區，調整為w375、h10，并命名為“頂部熱區”；

3.將上述三個元件全選后右鍵單擊“轉換為動態面板”；

4.設置“頁面滾動時”動作為：if window.scrollY > 375，則顯示上述元件；if window.scrollY ≤ 375，則隱藏上述元件；

5.設置“鼠標單擊時”動作為：滾動到“頂部熱區”，僅垂直滾動，動畫為線性500ms；

6.設置上述元件為隱藏狀態；

通過上述簡單的設置就可以實現我們想要的效果了。如果你已經練習過上文所有的操作，這一操作就非常簡單；

10. 彈窗的Axure實現方法

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

• 頁面加載時彈出第一個頁面，要求除了彈窗區域外，其它地方為透明；
• 點掉第一個彈窗后，出現第二個彈窗；
• 點掉第二個彈窗后，出現首頁；

它的實現方式也非常簡單：

1.準備兩個彈窗圖片；

2.在頁面正面拖入一個動態面板，將其命名為“首頁彈窗”；

3.雙擊后復制State1，全部打開，分別放入提前準備的圖片，并在右上角拖入一個“x”標記；

4.在State1中，設置圖片“鼠標單擊時”動作為：打開商品詳情頁；“x”標記“鼠標單擊時”動作為：設置動態面板狀態為State2；

5.在State2中，設置圖片“鼠標單擊時”動作為：打開商品詳情頁；“x”標記“鼠標單擊時”動作為：隱藏“首頁彈窗”；

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

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

拼多多的其它頁面都可以參考首頁快速完成，我一般是按照：復制首頁——改頁面名稱——刪除不需要的部分——添加不同的元件的步驟進行，制作速度會提高不少。所以，后面的內容重點講講比較難做的兩個效果：秒級變動的倒計時和頁面左右聯動。

11. 毫秒級變動倒計時的Axure實現方法

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

其功能需求為：

• 顯示用戶頭像、昵稱、拼單進度、成單倒計時及拼單按鈕；
• 不斷切換不同用戶，倒計時以毫秒為單位變動，同時還需要連續變動；

按照之前的思路，用戶切換比較簡單，可以通過動態面板實現，但是要想實現毫秒級的連續倒計時還是需要花費一點心思的。經過多方探索，我最終通過“變量”的方式實現了這一效果，具體操作如下：

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

2.在商品詳情頁中，依次拖入圖片、文本標簽和按鈕空間，并調整其樣式與拼多多原始界面相似（注意剩余時間單獨占據一個文本標簽控件）；

3.將上述元件轉換為動態面板，并命名為“拼單邀請”，打開State1；

4.拖入一個動態面板，并設置其動作，分別為：載入時——設置值m=5、ma=4、sa=2，設置面板狀態為向后循環，循環間隔100ms；

5.繼續設置上述動態面板“狀態改變時”的動作為：設置值于sa=sa-1、if sa≤0，則ma=ma-1并且sa=9、if ma≤0，則m=m-1且ma=9、if m≤0，則m=5、設置文字于剩余時間=剩余23:54：[m][ma].[sa]

6.點擊State1中的空白區域，然后設置整個區域的動作，為：鼠標移入時——設置動態面板停止循環、鼠標移出時——動態面板恢復循環、載入時——向下循環；

7.關閉State1后，雙擊拼單動態面板，復制出State2和State3，并修改其中的頭像和相關數據；

預覽就可以看到最終的效果了。這里嵌套了兩個動態面板，第一個動態面板實現頁面內容的切換，第二個內嵌的動態面板主要實現數字的變動。大家可以自己實踐一下，如果還弄不清楚，歡迎下載AYang原型查看。

12. 左右頁面分別滑動且聯動的Axure實現方法

拼多多的搜索頁面是我當時遇到的最后一個難點頁面，這個界面看起來簡單，但要實現的功能卻一點也不簡單（效果圖見文章第一部分），具體如下：

• 頁面分為兩部分，左邊為菜單導航，右邊為相應內容；
• 菜單導航可自由滑動，不帶動右側頁面移動；
• 點擊菜單選項則右側內容移動到相應位置；
• 右側內容滑動，帶動左側菜單位置和選中狀態改變；

主要難點在于這三種動作之間的聯動，每一種變化都可能帶來想不到的結果，所以試了很多調整方法。最終確定的操作方式如下：

1.拖入一個矩形，設置為w90、h50，調整其交互樣式為：選中狀態——底為白色、字為紅色，并復制18個，組成左側內容菜單；

2.將矩形編為選項組；

3.添加右側內容，可用圖片代替，或調整原有的中繼器展現形式，在做好一個后，復制即可，注意按照菜單欄為主要元件命名，避免后續操作找不到相應的元件；

4.首先設置比較簡單的單擊動作，動作設置為：當鼠標單擊時，則設置本按鈕為選中狀態，同時右側內容滾動至上一個菜單處，如點擊鞋包菜單，則設置鞋包選中，同時滾動至男裝，這樣能確保當前菜單對應的內容處于頁面中央位置；

5.在右側內容區域中間位置添加一個熱區，將其命名為“中部錨點”、w260、h10，位置根據需要進行調整，調整后轉換為動態面板，并固定與瀏覽器中；

6.設置右側內容的滾動狀態，如中繼器（icon部分）接觸中部錨點，則設置對應菜單為選中狀態，同時移動左側內容to絕對位置[0，Window.scrollY-145]，這個值需要根據菜單不同而調整，每次增加50；

7.最后設置左側菜單的拖動效果，將菜單項全選后轉換為動態面板，并設置其“拖動時”動作為：垂直拖動，邊界為頂部大于等于Window.scrollY-380，≤Window.scrollY+105；

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

13. 清除搜索歷史記錄的Axure原型實現

拼多多搜索頁面還有一個次級頁面，效果如下：

需要實現的效果是：

• 搜索框可輸入內容；
• 點擊刪除按鈕，可刪除歷史搜索記錄；

這種效果的實現也比較簡單，具體操作步驟如下：

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

2.全選歷史搜索及以下的元件，將其轉換為動態面板，命名為“搜索頁面”；

3.復制一個頁面，然后在State2中，把歷史搜索相關的內容刪除，只保留熱門搜索的內容；

4.在搜索頁面拖入一個選擇框元件（這里用的成熟元件），設置其“取消”按鈕動作為鼠標單擊時，隱藏選擇框；“確定”按鈕動作為鼠標單擊時，面板狀態為State2且隱藏選擇框；

5.在State1中，選擇刪除按鈕，設置其“鼠標單擊時”動作為：顯示選擇框組合、燈箱效果；

6.設置選擇框組合狀態為隱藏；

這樣就可以預覽最終的效果了。

四、總結

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

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

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

本文由 @AYang 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議