起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識如何用Axure設(shè)計APP頻道頁
頻道頁是APP中常見的頁面，那么如何高效率的畫出它的原型呢？
之前的文章已經(jīng)講解了APP常見功能中的頁面模板、下導(dǎo)航、上導(dǎo)航、列表頁，詳情頁怎么畫出來，請繼續(xù)關(guān)注教你畫APP原型后續(xù)的其他功能模塊。
常見的頻道頁有淘寶APP的微淘，通訊錄的首頁，微信的表情。該叫法來源于以前Web門戶的不同頻道。簡單來說就是由幾個tab按鈕和多個頁面組成，點擊tab可以切換到不同的頻道頁。
接下來分別用四種方法來畫出“微信-我的-表情”這個頻道頁的原型效果。
點擊查看4種效果 http://51prd.com/case/appcomponent/pindaoye/start.html?，以及他們的頁面結(jié)構(gòu)和實現(xiàn)邏輯。
方法1：使用多個頁面
相信每個剛開始使用Axure畫原型的PM都會選擇這么操作，即然點擊不同tab會顯示不同的內(nèi)容，那么我就畫出多個頁面來表示吧。
然后需要把點擊tab的效果補(bǔ)上，在剛剛畫出的每個頁面中分別設(shè)置點擊tab的跳轉(zhuǎn)鏈接，總計2個tab，需要重復(fù)添加到不同頁面，需設(shè)置4次。
方法2：使用動態(tài)面板
當(dāng)你對Axure有一定了解之后，應(yīng)該會知道動態(tài)面板最適合表現(xiàn)同一功能的不同狀態(tài)。那么可以把上面多個頁面的方法，替換成使用同一動態(tài)面板的多個狀態(tài)。
然后對tab按鈕設(shè)置交互事件，點擊tab打開動態(tài)面板的某一狀態(tài)?？傆?個tab，需要重復(fù)添加到不同狀態(tài)，需設(shè)置4次。
方法3：選中選項組+動態(tài)面板
當(dāng)你研究比較深入之后，你會發(fā)現(xiàn)頂部的tab需要畫多次比較麻煩，添加交互也需要重復(fù)多次，那么有沒有辦法簡化tab的畫法呢。
我們發(fā)現(xiàn)這些tab按鈕在每個頻道頁面的交互事件是一樣的（單擊打開同一個頻道頁），而樣式也是相似的，但是顯示在當(dāng)前頻道的tab按鈕不一樣，我們先把tab從動態(tài)面板里面移出。
這樣依然可以打開2個不同的內(nèi)容區(qū)，但是tab的樣式?jīng)]有隨著我們點擊而變化，所以我們需要對這2個tab設(shè)置選中和未選中的效果來區(qū)分。
需要注意的是精選表情默認(rèn)是選中狀態(tài)，而它的未選中狀態(tài)和更多表情是一樣的，也需要設(shè)置，最后設(shè)置“精選表情”為選中狀態(tài)。
按照同樣的方法將更多表情設(shè)置默認(rèn)樣式和選中樣式，然后選中這2個按鈕然后設(shè)置為單選組。
然后我們需要設(shè)置單擊這2個按鈕的時候，選中自身即可。
最后我們生成原型就可以達(dá)到一樣的效果。
其實這個方法我們在文章《APP下導(dǎo)航如何用Axure畫出來》的時候就講過，本質(zhì)是一樣的，但是這里會復(fù)雜一些。因為2個tab的形狀不一樣，否則設(shè)置完一個tab的樣式之后，格式刷另外一個即可。
方法四：選中選項組+內(nèi)聯(lián)框架
在上面方法的基礎(chǔ)上，刪除動態(tài)面板，替換成內(nèi)聯(lián)框架。
然后我們修改精選表情的交互事件為這樣。
需要提前把上面動態(tài)面板的2個狀態(tài)，改成2個新頁面。
最后的原型效果依然是一樣的。(需要注意的是最好隱藏內(nèi)聯(lián)框架的邊框，以及設(shè)置打開該頁面“表情”的時候打開內(nèi)聯(lián)框架中的精選表情頁面。)
總結(jié)
相信大家可以看得出來，第三種方法是畫起來效率最高的，但是也是很難理解的。但是掌握了這樣的技巧，像文中最開始的幾種頻道頁畫起來是輕而易舉。
相關(guān)閱讀
#專欄作家#
浪子，公眾號：浪子畫原型。擅長于APP原型設(shè)計和產(chǎn)品架構(gòu)。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels ，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
