Week 22 — Axure筆記 | 預覽表格時如何做出ScrollBar(滾動軸)?

Max 麥克斯
Oct 27, 2019

--

在用Adobe Xd做出UI前,如果資料雜亂、功能很多、或需求定義不清楚時,我會習慣先用紙筆畫出大概的草稿,然後把這些草稿的畫面用Axure這套原型軟體,快速地拉出來介面的樣子,並做出簡易的互動效果(ex:彈跳視窗、tab頁籤切換…等),最後就是在開會時,跟大家討論和確認各個功能需求,也因有畫面有互動效果,可以更加確保大家在講的是同一個事情,降低彼此溝通的落差。

所以Axure是我很愛的一套軟體,裡面的功能強大,強大到會以為做出來的互動效果是程式寫出來的!個人也非常喜歡去鑽研Axure的各個功能,但有時太久沒用到很容易忘記,所以就把一些覺得很難做、很容易忘記或很棒的互動效果記錄在這裡!

當「表格的欄寬或列高」超出頁面時,該怎麼辦?

假設今天做出了一個表格要放進一個tab頁籤,但表格的資料很多,導致表格的欄寬和列高超出tab頁籤的頁面大小,如下圖所示

將表格放入tab頁籤
表格資料太多,tab頁籤的頁面不夠放...

所以表格需要有ScrollBar(滾動軸),但要怎麼做...?

1.在Libraries裡找到Dynamic Panel(動態面板),把它拉出來後,再自己決定這個Dynamic Panel要多大或多小,Dynamic Panel的大小就是之後表格呈現的大小(我已經有先幫Dynamic Panel設定border邊框)

2.滑鼠雙擊Dynamic Panel後,進入「Dynamic Panel的編輯畫面」,將表格複製進來,完成後,再按右上角的「Close」離開「Dynamic Panel的編輯畫面」

3.回到原本的製作原型畫面,發現表格已經變成Dynamic Panel的大小,但超過的地方都被裁掉了,所以在Dynamic Panel上直接按右鍵找到「Scrollbars」,再選擇「Scroll as Needed」(如果只有欄寬太寬就選Scroll Horizontal、列高太高就選Scroll Vertical、兩者都有就選Scroll as Needed)

4.大功告成!!!幫表格加上ScrollBar後,就成功的解決表格超過頁面時無法完整呈現的問題囉

5.最後附上製作的整個過程的影片,以後回憶時會更快!

問題:表格超出頁面(網址)
解決:做出ScrollBar(網址)

--

--

Max 麥克斯

UI設計師 | 相信閱讀 | 喜歡有溫度的文字 | 致力於介面設計 | 記錄自學設計的一隅