文章彙整

運用 Axure Repeater Widget 優化 Prototype

Astral WebBy Astral Web 6 days agoNo Comments
首頁  /  網站設計與開發  /  運用 Axure Repeater Widget 優化 Prototype

網站開發時,有沒有過這樣的經驗…網站提案階段設計師提出美美的設計稿,但在開發完成後,卻怎麼看起來不太一樣?

通常這樣的情形容易發生在動態生成的頁面,實際串接的資料樣貌,會影響最終頁面的長相。

也因此,在規劃網頁結構時,我們會期望能將實際的資料納入考量,盡可能讓 Prototype 更接近實際的使用需求,藉此減少開發後期來回溝通、修調版面的人力成本。

 

今天讓我們以電商平台的產品列表頁舉例,簡介如何使用 Axure 的 Repeater Widget 製作Prototype,藉以及時確認並優化規劃內容。

1.使用 Repeater Widget 規劃產品資訊

在繪製網頁 Wireframe 時,我們可以先想想:

  • 眾多商品資訊中,哪些會影響消費者的決定?
  • 消費者被吸引後,下一步又會是什麼?

當你能回答這兩個核心問題,相信產品的卡面結構也在你腦海中有了雛形。

緊接著,我們將Repeater Widget 拖曳至工作區,點兩下即可開始編輯單一張產品資訊卡的內容。

我們可依需求調整矩形的長寬,並加入所需的欄位及按鈕元素,甚至進一步定義文字樣式、間距等細節。

(小秘訣:適當地命名元素,可有助於後續的操作唷!)

2.於 Repeater 中加入產品資料

於右邊欄中找到 STYLE > Data,並將產品欄位依序建立於列表中,像是:品牌名稱、產品名稱、價格、容量…等等。但須特別留意:欄位的命名僅能使用英數命名,且需以英文字母開頭。

欄位資訊建立完成後,便可開啟存放產品資料的 EXCEL 或 Google Sheet,選取、Ctrl+C、Ctrl+V,彈指間匯入產品資料,且同時 Repeater 卡片也會自動產生。

透過 DATA 表格,除了可彈性的新增、刪除、修改產品資訊,更可改變產品資訊卡於頁面的排列方式,甚至分頁規則。

3.連結卡面元素與產品數據

最後一步,也是最關鍵的一步,我們要把產品列表中的元素與數據整合,讓每張卡面上都能顯示不同的資訊。

點選工作區中的 Repeater,並於右側邊欄找到 INTERACTIONS > REPEATER INTERACTIONS,並依序完成以下設置:

  • Add Action:設定數據連結的方式

運用 Set Text 設定文字類資訊;運用 Set Image 設定圖片。

圖片可以選擇上傳圖片(Image) 或填入圖片的網址 (Value)。若選擇填入網址,圖片僅會在預覽時顯示。

  • TARGET:選擇卡面上的文字或圖片元素

挑選元素時,除了透過元素名稱辨識,試滑動鼠標,左方也會即時顯示縮圖輔助挑選。

  • VALUE:選擇元素套用的數據

點擊右方的方程式圖示,可展開編輯器,並透過「Insert Variable or Function」選擇產品數據。

4.檢視並修調 Prototype 成果

在整合實際產品數據後,我們更能檢視 Prototype 規劃的適用性,藉以及時調整規劃內容。

總結

採用 Repeater 製作 Prototype,除了可檢視規劃是否吻合資料面的需求,同時也可更快速地產出規劃內容,修改起來也彈性許多。

有製作 Prototype 需求的朋友們,不仿也動手試試,感受一下 Repeater 帶來的便利。

 

如對 Axure 相關的文章感興趣,可以追蹤歐斯瑞臉書粉絲團Instagram,以及訂閱我們的電子報,隨時接收第一手新知分享唷!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

請到您的信箱確認,即可完成訂閱。