起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識常見的列表頁如何用Axure畫出來
列表頁是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 協議
- 目前還沒評論，等你發揮！
