起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識APP九宮格如何用Axure畫出來？
九宮格用來平鋪展示很多頻道或者欄目。那么如何用Axure畫出該功能呢?
常用場景有“微信APP-我-錢包”、“淘寶APP-首頁-頻道”、“支付寶APP-首頁”。
一、原型畫法(無交互)
九宮格通常包含N個格子，每行3個，每個格子由按鈕和圖標組成。
1. 從默認元件庫拖動“中繼器”到工作區(qū)合適位置。
2. 雙擊該中繼器進入內(nèi)部，即可編輯每一個格子。
3. 先畫按鈕。選擇矩形并修改尺寸為125*125px（每行3個，則單個寬度=375/3）。雙擊輸入文字“標題”，然后對齊方式為底部對齊。
4. 再畫圖標。從默認元件庫拖動“圖片”到合適位置，修改尺寸為75*75px。
5. 點擊空白區(qū)域即可設(shè)置中繼器屬性，添加更多的行，直到9個。這里輸入的內(nèi)容直接代表原型中的每個格子名稱。
6. 設(shè)置中繼器的樣式，布局改成水平，勾選網(wǎng)格分布，每行項目數(shù)為3。
7. 回到工作區(qū)，就可以看到九宮格效果。
8. 生成原型HTML并在瀏覽器中查看效果。
二、原型畫法(有交互)
九宮格的常見交互效果：點擊每個格子，跳轉(zhuǎn)到新頁面。
接下來以“微信APP-我-錢包”來作為案例詳細講解。
9. 修改每個格子的標題，雙擊Column0的每一行，依次輸入對應(yīng)的標題。
10. 然后畫出每個宮格對應(yīng)的頁面，總共9個，依次創(chuàng)建。
11. 雙擊該中繼器進入內(nèi)部，選中按鈕和圖標，進行組合。
12. 選擇該組合，設(shè)置它的交互事件“鼠標單擊時”，但是很容易發(fā)現(xiàn)無法設(shè)置它跳轉(zhuǎn)到哪個頁面。因為這個組合代表九個格子，所以理論上應(yīng)該設(shè)置跳轉(zhuǎn)到9個子頁面。然后需要利用中繼器的屬性進行設(shè)置。點擊column0，然后點擊“左側(cè)添加列”，生成Column1這一列。
13. 選中Column1的第一行，然后右鍵點擊“引用頁面”，然后選擇第一個格子對應(yīng)的子頁面。同理設(shè)置下面8個行。
14. 設(shè)置該組合的交互事件“鼠標單擊時”，添加動作“鏈接-打開鏈接-當前窗口”，組織動作“選中鏈接到url或文件”，點擊“fx”打開“編輯值”彈窗，然后點擊“插入變量或函數(shù)”，然后選中“中繼器/數(shù)據(jù)集-Column1”，最后確定。
15. 生成原型HTML并在瀏覽器中查看效果。
三、添加到APP功能庫
不同場景下的九宮格功能，標題不一樣，樣式相對固定。
根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出2種常用的“九宮格”，添加到APP元件庫，供后續(xù)調(diào)用。
九宮格![]()
十六宮格
提供源文件下載學(xué)習(xí)https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g
相關(guān)閱讀
#專欄作家#
浪子，公眾號：langzisay，人人都是產(chǎn)品經(jīng)理專欄作家。業(yè)務(wù)型PM。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels ，基于 CC0 協(xié)議
請教一下老師
怎么加給每一項單獨加圖片呢
不需要給每一項都添加圖片，只需要添加一次。
中繼器的特性就是可復(fù)用。你拖一個中繼器去工作區(qū)，雙擊之后添加任何內(nèi)容都會自動變成多份的。
好厲害