頻道頁是APP中常見的頁面，那么如何高效率的畫出它的原型呢？

之前的文章已經講解了APP常見功能中的頁面模板、下導航、上導航、列表頁，詳情頁怎么畫出來，請繼續(xù)關注教你畫APP原型后續(xù)的其他功能模塊。

常見的頻道頁有淘寶APP的微淘，通訊錄的首頁，微信的表情。該叫法來源于以前Web門戶的不同頻道。簡單來說就是由幾個tab按鈕和多個頁面組成，點擊tab可以切換到不同的頻道頁。

接下來分別用四種方法來畫出“微信-我的-表情”這個頻道頁的原型效果。

點擊查看4種效果 http://51prd.com/case/appcomponent/pindaoye/start.html?，以及他們的頁面結構和實現(xiàn)邏輯。

方法1：使用多個頁面

相信每個剛開始使用Axure畫原型的PM都會選擇這么操作，即然點擊不同tab會顯示不同的內容，那么我就畫出多個頁面來表示吧。

然后需要把點擊tab的效果補上，在剛剛畫出的每個頁面中分別設置點擊tab的跳轉鏈接，總計2個tab，需要重復添加到不同頁面，需設置4次。

方法2：使用動態(tài)面板

當你對Axure有一定了解之后，應該會知道動態(tài)面板最適合表現(xiàn)同一功能的不同狀態(tài)。那么可以把上面多個頁面的方法，替換成使用同一動態(tài)面板的多個狀態(tài)。

然后對tab按鈕設置交互事件，點擊tab打開動態(tài)面板的某一狀態(tài)?？傆?個tab，需要重復添加到不同狀態(tài)，需設置4次。

方法3：選中選項組+動態(tài)面板

當你研究比較深入之后，你會發(fā)現(xiàn)頂部的tab需要畫多次比較麻煩，添加交互也需要重復多次，那么有沒有辦法簡化tab的畫法呢。

我們發(fā)現(xiàn)這些tab按鈕在每個頻道頁面的交互事件是一樣的（單擊打開同一個頻道頁），而樣式也是相似的，但是顯示在當前頻道的tab按鈕不一樣，我們先把tab從動態(tài)面板里面移出。

這樣依然可以打開2個不同的內容區(qū)，但是tab的樣式沒有隨著我們點擊而變化，所以我們需要對這2個tab設置選中和未選中的效果來區(qū)分。

需要注意的是精選表情默認是選中狀態(tài)，而它的未選中狀態(tài)和更多表情是一樣的，也需要設置，最后設置“精選表情”為選中狀態(tài)。

按照同樣的方法將更多表情設置默認樣式和選中樣式，然后選中這2個按鈕然后設置為單選組。

然后我們需要設置單擊這2個按鈕的時候，選中自身即可。

最后我們生成原型就可以達到一樣的效果。

其實這個方法我們在文章《APP下導航如何用Axure畫出來》的時候就講過，本質是一樣的，但是這里會復雜一些。因為2個tab的形狀不一樣，否則設置完一個tab的樣式之后，格式刷另外一個即可。

方法四：選中選項組+內聯(lián)框架

在上面方法的基礎上，刪除動態(tài)面板，替換成內聯(lián)框架。

然后我們修改精選表情的交互事件為這樣。

需要提前把上面動態(tài)面板的2個狀態(tài)，改成2個新頁面。

最后的原型效果依然是一樣的。(需要注意的是最好隱藏內聯(lián)框架的邊框，以及設置打開該頁面“表情”的時候打開內聯(lián)框架中的精選表情頁面。)

總結

相信大家可以看得出來，第三種方法是畫起來效率最高的，但是也是很難理解的。但是掌握了這樣的技巧，像文中最開始的幾種頻道頁畫起來是輕而易舉。

相關閱讀

定義頁面模板是畫APP原型的必備工作

APP上導航如何用Axure畫出來

APP下導航如何通過Axure畫出來

常見的列表頁如何用Axure畫出來

APP詳情頁如何用Axure畫出來

#專欄作家#

浪子，公眾號：浪子畫原型。擅長于APP原型設計和產品架構。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

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