国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

方法1：使用多個(gè)頁面

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

然后需要把點(diǎn)擊tab的效果補(bǔ)上，在剛剛畫出的每個(gè)頁面中分別設(shè)置點(diǎn)擊tab的跳轉(zhuǎn)鏈接，總計(jì)2個(gè)tab，需要重復(fù)添加到不同頁面，需設(shè)置4次。

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

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

然后對(duì)tab按鈕設(shè)置交互事件，點(diǎn)擊tab打開動(dòng)態(tài)面板的某一狀態(tài)?？傆?jì)2個(gè)tab，需要重復(fù)添加到不同狀態(tài)，需設(shè)置4次。

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

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

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

這樣依然可以打開2個(gè)不同的內(nèi)容區(qū)，但是tab的樣式?jīng)]有隨著我們點(diǎn)擊而變化，所以我們需要對(duì)這2個(gè)tab設(shè)置選中和未選中的效果來區(qū)分。

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

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

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

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

其實(shí)這個(gè)方法我們?cè)谖恼隆?a href="http://zhangjingwei.cn/rp/783247.html" target="_blank" rel="noopener">APP下導(dǎo)航如何用Axure畫出來》的時(shí)候就講過，本質(zhì)是一樣的，但是這里會(huì)復(fù)雜一些。因?yàn)?個(gè)tab的形狀不一樣，否則設(shè)置完一個(gè)tab的樣式之后，格式刷另外一個(gè)即可。

方法四：選中選項(xiàng)組+內(nèi)聯(lián)框架

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

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

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

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

總結(jié)

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

相關(guān)閱讀

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

APP上導(dǎo)航如何用Axure畫出來

APP下導(dǎo)航如何通過Axure畫出來

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

APP詳情頁如何用Axure畫出來

#專欄作家#

浪子，公眾號(hào)：浪子畫原型。擅長(zhǎng)于APP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

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

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