How to Build Maintainable Backend System Prototypes with Axure

1. Determine Framework Structure and Layout

Before designing a backend prototype, define its framework: a navigation area (logo, menu), a function area (account info, system messages, logout), and a content area (data lists, forms). Typically the navigation and function areas stay fixed at the top or left, while only the content area scrolls.

Using a single framework page with an inline frame for content allows easy maintenance, adaptive browsing, and lighter exported files.

2. Build the Structure in Axure

After choosing a layout (horizontal or vertical), create a top dynamic panel (navigation + function), a left dynamic panel (secondary navigation), and an inline frame for content.

Set panel dimensions (e.g., top panel 1366 px × 50 px, left panel 200 px × 800 px, inline frame 1166 px × 800 px) and adjust as needed.

Configure page style to left‑align, enable vertical scrollbars on the left panel, set the inline frame’s default page, and hide its border.

3. Implement Responsive Behavior with Functions

Use Axure functions to adjust panel sizes when the browser window changes. Set the left panel height to [[Window.height-50]] and the inline frame height to the same value. Set the inline frame width to [[Window.width-200]] so the layout adapts without horizontal scrollbars.

When the window width exceeds 1366 px, also set the inline frame width; when it is smaller, omit the width setting to prevent scrollbars.

4. Create Multi‑Level Menus Quickly

Rename the states of the secondary‑menu dynamic panel to match the text of the primary‑menu items. Add a click event on each primary‑menu widget that sets the secondary panel’s state to [[This.text]], enabling automatic state switching without configuring each menu individually.

5. Organize Functions and Build a Site Map

Classify backend functions (e.g., order management, product management, user management) using a mind‑map, keeping hierarchy shallow (2‑3 levels). Then use Axure’s page management to create a site map that helps estimate workload and plan iterations.

6. Design Content Pages

Set content page width to about 1100 px (based on a 1366 px window and a 200 px left menu). Use reference lines to keep 20 px margins and center the page layout.

Display the page title automatically with the [[PageName]] function.

7. Add Charts

Since Axure lacks native chart widgets, generate charts with tools like ECharts, export them as images, and insert them into the prototype.

8. Use Master Pages for Common Elements

Create masters for headers, footers, pagination, and buttons to reuse them across pages and update them globally.

9. Manage Lists with Repeaters

Use the repeater widget to define a single row and then generate multiple rows automatically, saving time compared to manual duplication.

10. Collect Common Interaction Components

Build a library of menus, icons, buttons, and forms for quick reuse, and consider creating a personal Axure component library for future projects.

11. Icon Tips

Download SVG or PNG icons from platforms like Iconfont or FontAwesome; Axure can convert SVGs to shapes for easy styling.

12. Focus on Core Interactions

Avoid spending excessive time on minor interaction details; instead, document common feedback and loading effects on a separate reference page.

All referenced images illustrate the described concepts: