APP詳情頁如何用Axure畫出來

3 評論 42578 瀏覽 104 收藏 6 分鐘

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

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

APP詳情頁往往包含上導航,內容區,工具欄三大部分,內容區會因為業務畫起來很復雜。所以我們重點來聊聊內容區的畫法。

常見的詳情頁類型

我們經常遇到的詳情頁有電商類的商品詳情、團購詳情、訂單詳情、活動詳情,專題詳情,以及社交類的聊天詳情、主頁詳情、動態詳情等。

商品詳情頁

訂單詳情頁

活動詳情頁

常見的詳情頁組件

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

圖片輪播

圖文卡片

通欄banner

文字列表項&圖標列表項

圓形按鈕&直角按鈕

創建元件庫并使用

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

元件庫的制作方法并不復雜,點擊Axure左方元件庫-創建元件庫即可。

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

之所以大家從網上下載回來的元件庫,放到自己項目中感覺大小不太合適。主要就是尺寸不是遵循一個標準。

引用過去的rp源文件

每次畫APP詳情頁的時候,我們可能會畫一些以前畫過的功能組件。所以我們應該養成保存過往項目RP源文件的習慣,

需要用到的時候除了可以打開過去的的rp源文件,復制所需的內容到當前rp源文件。

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

其他技巧

講幾個經常需要用到的技巧,供大家參考。

  • 如果該詳情頁的部分內容其他頁面也會用到,請使用母版。
  • 如果需要復制當前詳情頁,請使用頁面快照功能。
  • 如果需要使用地圖,請使用內聯框架功能。
  • 如果需要播放視頻,請使用內聯框架功能。

總結

希望這些踩過坑總結出來的經驗,能夠讓大家畫APP詳情頁的時候少走一些彎路。

相關閱讀

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

APP上導航如何用Axure畫出來

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

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

#專欄作家#

浪子,業務型PM,浪子PRD系列51prd.com,公眾號langzisay,個人微信nuanai88。

本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來源于網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 基本原件中的,矩形2和矩形3有什么區別

    來自山西 回復
    1. 填充色有深淺區別,其他屬性樣式完全一樣:

      回復
  2. ?? ??

    來自重慶 回復