列表頁是PM畫原型的時候最容易碰到的頁面類型，那么如何快速畫出并且展現交互呢？

我們從具體的例子開始講解其中的技巧，和各種不同的演變場景。希望初級PM可以通過這篇文章改進下自己的畫法。

列表頁基本是由頁面框架，上導航，以及內容區的列表組成，最重要的部分也是今天文章的重點是列表部分。

它可能是文字列表，圖片列表，圖文列表，表單列表，單選框列表等多種形態。

畫列表頁的基本步驟是什么？

①先畫頁面框架

②再畫上導航

③最后畫列表

畫列表項的常用畫法？

接下來細講不同的列表項該如何畫。

首先按照需求畫出一個列表項。

然后全選列表項，并復制。

然后粘貼到下方，貼緊第一個列表項。

以此類推，重復多次即可。

完全一樣的列表項如何快速畫出呢？

完全一樣的列表項，是指除了字段值不一樣之外其他一樣。

這樣的列表項，使用用中繼器很省事。

由多個列表項組成的表單該怎么畫？

使用矩形框+文本元件，打個組合，復制黏貼。最后進行修改文案。

更建議將常用的列表項等元件都制作一遍，生成自己的元件庫，然后一一調用并修改名稱即可。有興趣的朋友可以試試我總結的方法《高級PM教你定制APP通用元件庫》

當然如果只畫線框圖，不考慮交互。那么用中繼器是最省事，并且新增、刪除、修改都很方便。

如果列表項有一定差異該怎么畫？

一般來說不一樣的地方是指列表項右方的輸入區域，你可以以共性的部分作為列表項畫出，有差異的地方單獨畫出。這樣效率高。

比如姓名這一行，應該是矩形+文本框。

比如性別那一行，應該是矩形+單選框。

證件類型，同性別。

證件號碼，同姓名。

再者，你同一個APP里面的列表框的樣式不會有很多種，所以建議以此添加到元件庫。

列表項為什么不用母版畫？

雖然母版也可以用來做列表項。但是這種頁面是一次性的，不適合用母版。母版設計的初衷就是用在多個頁面，而不是同一頁面。

你可以抽象出一致的部分來做母版。只是母版不太適用這種同一個頁面的場景。

順便說一下，我的這些方法不僅僅適用于Axure。墨刀，xiaopiao，mockplus一樣試用。

常見的列表項一般需要用到幾個元件？

有人說：兩種，矩形，文本框。

有人說：三種，矩形，文本標簽，文本框。

其實都對，一般來說用兩個元件就夠了，省事方便。少用1個的技巧是在矩形中寫字表示列表項標題。

畫原型要會省力易修改。做一個這樣的列表項，畫3個不累，但是業務往往需要做3-5個，此時就會浪費時間。再者如果需要修改，耗費的時間會double。

什么時候列表項需要用到3個元件？

2個滿足不了的時候就用3個，比如以下這些場景。

比如矩形和標題，有不同的邏輯。

比如矩形和標題，有不同的交互。

比如列表項的標題是圖標+文字。

還有一種情況，像墨刀支持將原型的視覺標注展示出來，建議3個。

總結

以上是我總結出來的各種列表項場景的畫法，希望可以讓剛入門的PM了解下技巧。而不是一味的去辛苦的畫，而不去尋找捷徑。

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay

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

題圖來自 unsplash，基于 CC0 協議