Axure制作一個(gè)簡單的后臺(tái)管理網(wǎng)頁

時(shí)間：2023-09-26 00:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-26 00:30:01 來源：網(wǎng)站運(yùn)營

Axure制作一個(gè)簡單的后臺(tái)管理網(wǎng)頁：作為一名產(chǎn)品小白，使用Axure是我們第一步要學(xué)會(huì)使用的產(chǎn)品工具，主要是用來做什么呢。

主要是用來畫原型圖的，有人會(huì)問，原型圖是什么？不好意思，請自行百度喔。

接下來我們就分步驟來介紹，制作一個(gè)簡單的后臺(tái)管理系統(tǒng)的頁面。

首先我們要明確，要做到的頁面圖如下：

第一步，首先我們把大框架畫出來，打開你的Axure，這里我用的是8.0版本：

第二步，找到左側(cè)的元件列表，選擇矩形，拖動(dòng)到屏幕，選中矩形，在任務(wù)欄里設(shè)置矩形樣式：調(diào)整大小、填充顏色，以及邊框設(shè)置：

選中矩形，也可以在右側(cè)選擇樣式，可以設(shè)置矩形的邊框、顏色填充等各種設(shè)置，如下：

第三步，我們畫左邊的框架，一樣選擇矩形元件，這里的長寬和上面的長寬設(shè)置要注意一下。

在上方任務(wù)欄或者右側(cè)樣式欄都可以對矩形元件進(jìn)行設(shè)置，其他元件同樣都可以設(shè)置。

這里我們設(shè)置下顏色填充，邊框、和字體，具體如下：

第四步，輸入文字，設(shè)置字體樣式

先，雙擊矩形元件就可以輸入內(nèi)容了；同樣，在任務(wù)欄可以設(shè)置字體樣式，在右側(cè)的樣式欄也可以進(jìn)行設(shè)置，如下：

第五步，選擇一個(gè)矩形元件拖到左側(cè)任務(wù)欄，

1、 設(shè)置矩形大小、填充顏色和邊框設(shè)置；

2、 設(shè)置矩形字體、顏色和對齊方式；

同樣，也是可以在右側(cè)樣式欄進(jìn)行設(shè)置的；

顯示如下：

復(fù)制矩形元件，輸入不同內(nèi)容，且字體對齊選擇右對齊，則顯示如下：

第六步，這樣我們的框架就畫好了，現(xiàn)在我們來畫具體內(nèi)容，就要使用到我們的表格元件了，

首先，在左側(cè)元件這邊找到 表格元件，并拖動(dòng)到編輯區(qū)的合適位置；

雙擊單元格，可以輸入內(nèi)容，顯示如下：

選中一個(gè)單元格，選擇右側(cè)的 屬性，可以插入列或插入行；

設(shè)置字體同樣可以任務(wù)欄進(jìn)行設(shè)置或者 右側(cè) 樣式進(jìn)行設(shè)置字體；

第七步，表格內(nèi)容設(shè)置好之后，接下來我們畫搜索欄;

1、 矩形元件輸入：項(xiàng)目名稱，設(shè)置邊框?yàn)榭?，拖?dòng)到合適位置；

2、 元件庫中拖動(dòng)文本框元件，設(shè)置合適大??；

3、 放大鏡圖標(biāo)可以在元件庫中直接使用；

拖動(dòng)到合適位置，顯示如下：

第八步，設(shè)置復(fù)選框；

在元件庫，找到復(fù)選框元件并拖動(dòng)到單元格中，顯示如下：

第九步，這樣一個(gè)系統(tǒng)頁面就畫好了，我們可以在任務(wù)欄右上方，點(diǎn)擊“預(yù)覽”，在瀏覽器可以預(yù)覽畫好的原型圖，顯示如下：

---

注：以上文章為作者所有，如有轉(zhuǎn)載，請聯(lián)系公眾號【阿拼姐】