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

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

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

常見的詳情頁類型

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

常見的詳情頁組件

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

圖片輪播

圖文卡片

通欄banner

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

圓形按鈕&直角按鈕

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

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

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

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

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

引用過去的rp源文件

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

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

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

其他技巧

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

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

總結(jié)

希望這些踩過坑總結(jié)出來的經(jīng)驗，能夠讓大家畫APP詳情頁的時候少走一些彎路。

相關(guān)閱讀

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

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

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

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

#專欄作家#

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

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

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