一鍵新聞網

2019年3月18日星期一

Test Post from 酷播亮新聞

Test Post from 酷播亮新聞
http://www.kubonews.com

2019年1月28日星期一

「羽球女神」林芷煖網絡爆紅！堅強挺過28次化療，「骨癌正妹」代表香港傷殘羽球隊奪銅牌！

最近有一名香港羽球運動員在網路爆紅，她就是林芷煖。

林芷煖爆紅的原因有兩個：第一，她的長相清新甜美；第二，她曾經患上骨癌，並經過28次化療，在左手留下了缺陷。

後來，她參加了2018年的亞殘運會，並勇奪羽球女子單打銅牌，背後的故事非常勵志！

這名香港傷殘羽球隊代表，出生於羽球世家。父母自小就訓練林芷煖和弟弟打羽球，想把他們訓練成專業羽球選手。

林芷煖不幸在小六時患上骨癌，所以只能停止訓練，住院一年半。就因為這樣，她不但錯過了學習羽球的最佳時機，左手臂還被植入了金屬，為她的行動帶來不便。

林芷煖在IG提到，自己10年前罹患骨癌，所以白白斷送了可以當運動員的機會。當時她年紀還小，所擔心的不是死亡，而是自己的頭髮掉光後會變得非常醜！

養病期間，她被28次的化療折磨得體無完膚，過後成為插班生，卻被全世界認為是異類。

由於左手臂的骨頭在治療中被取出，改裝上金屬，這不但造成林芷煖的手臂無法輕易舉高，還讓她對羽球失去了興趣，甚至對所有運動都提不起勁來。

她曾經一個星期練球6日，到後來幾個月才練習一次，中間的轉變連自己也對自己覺得失望。

後來，林芷煖與羽球教練重逢，讓她塵封在心底已久的夢想再度甦醒。

因此，她重拾球拍，努力不懈地練球，後來成功加入了香港傷殘羽球代表隊，還在去年亞殘運會中女子SU5級單打單循環賽事中奪得了銅牌，為港增光。

她在IG表示：「當上帝關了一扇門，一定會給你開一扇窗。雖然這扇窗離那扇門也太遠了一點，足足相隔了10年，不過這一切都好像已經安排好了一樣，總會再次把你帶到屬於你的位置。」

她認為自己算是幸運的，因為裝了金屬的那隻手只是自己不常用到的副手，自己至少還可以打球。

videoPlayerId=0436b50b0

林芷煖的故事打動了很多粉絲，而她也立志要當一名專業的運動員，希望自己可以繼續在球場上綻放光芒。

（life網搜小組／綜合報導）

美麗日報YouTube頻道: https://goo.gl/YsjB9G

更多有趣新聞請上：http://www.kubonews.com

9000字完整案例，模擬拼多多APP學會Axure常見及酷炫操作

網絡上的教程都是關於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.首先設置比較簡單的單擊動作，動作設置為：當鼠標單擊時，則設置本按鈕為選中狀態，同時右側內容滾動至上一個菜單處，如點擊鞋包菜單，則設置鞋包選中，同時滾動至男裝，這樣能確保當前菜單對應的內容處於頁面中央位置；

http://www.kubonews.com/2019012942885.html