詳情頁(yè)是App原型中比較復(fù)雜的頁(yè)面類型，熟悉它的常用套路有助于快速畫出。

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

APP詳情頁(yè)往往包含上導(dǎo)航，內(nèi)容區(qū)，工具欄三大部分，內(nèi)容區(qū)會(huì)因?yàn)闃I(yè)務(wù)畫起來(lái)很復(fù)雜。所以我們重點(diǎn)來(lái)聊聊內(nèi)容區(qū)的畫法。

常見(jiàn)的詳情頁(yè)類型

我們經(jīng)常遇到的詳情頁(yè)有電商類的商品詳情、團(tuán)購(gòu)詳情、訂單詳情、活動(dòng)詳情，專題詳情，以及社交類的聊天詳情、主頁(yè)詳情、動(dòng)態(tài)詳情等。

常見(jiàn)的詳情頁(yè)組件

相信大家很容易分析得出，它們都包含很多相似的元件，比如通欄Banner，圖片輪播，文字列表項(xiàng)，圖標(biāo)列表項(xiàng)。限于文章篇幅有限，下面是我經(jīng)常用到的詳情頁(yè)組件：

圖片輪播

圖文卡片

通欄banner

文字列表項(xiàng)&圖標(biāo)列表項(xiàng)

圓形按鈕&直角按鈕

創(chuàng)建元件庫(kù)并使用

所謂的畫線框圖，本質(zhì)上就是堆砌各種組件。請(qǐng)根據(jù)自己項(xiàng)目的特點(diǎn)，將APP詳情頁(yè)常見(jiàn)的這些組件制作成Axure元件庫(kù)。

元件庫(kù)的制作方法并不復(fù)雜，點(diǎn)擊Axure左方元件庫(kù)-創(chuàng)建元件庫(kù)即可。

需要注意的是：創(chuàng)建元件的時(shí)候，盡量以375×667的框架來(lái)建立，當(dāng)然也可以以360×640來(lái)建立比較通用。具體原因參見(jiàn)《 為什么375×667是移動(dòng)端原型的最佳分辨率 》。

之所以大家從網(wǎng)上下載回來(lái)的元件庫(kù)，放到自己項(xiàng)目中感覺(jué)大小不太合適。主要就是尺寸不是遵循一個(gè)標(biāo)準(zhǔn)。

引用過(guò)去的rp源文件

每次畫APP詳情頁(yè)的時(shí)候，我們可能會(huì)畫一些以前畫過(guò)的功能組件。所以我們應(yīng)該養(yǎng)成保存過(guò)往項(xiàng)目RP源文件的習(xí)慣，

需要用到的時(shí)候除了可以打開(kāi)過(guò)去的的rp源文件，復(fù)制所需的內(nèi)容到當(dāng)前rp源文件。

如果需要用到整個(gè)頁(yè)面或者多個(gè)頁(yè)面，更建議使用“文件-導(dǎo)入RP源文件”批量導(dǎo)入更快捷，以及能夠繼承原先頁(yè)面的注釋，母版等功能。

其他技巧

講幾個(gè)經(jīng)常需要用到的技巧，供大家參考。

• 如果該詳情頁(yè)的部分內(nèi)容其他頁(yè)面也會(huì)用到，請(qǐng)使用母版。
• 如果需要復(fù)制當(dāng)前詳情頁(yè)，請(qǐng)使用頁(yè)面快照功能。
• 如果需要使用地圖，請(qǐng)使用內(nèi)聯(lián)框架功能。
• 如果需要播放視頻，請(qǐng)使用內(nèi)聯(lián)框架功能。

總結(jié)

希望這些踩過(guò)坑總結(jié)出來(lái)的經(jīng)驗(yàn)，能夠讓大家畫APP詳情頁(yè)的時(shí)候少走一些彎路。

相關(guān)閱讀

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

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

APP下導(dǎo)航如何通過(guò)Axure畫出來(lái)

常見(jiàn)的列表頁(yè)如何用Axure畫出來(lái)

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay，個(gè)人微信nuanai88。

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

題圖來(lái)源于網(wǎng)絡(luò)