用Axure做原型（1）-零基礎(chǔ)向

時間：2023-07-06 21:03:01 | 來源：網(wǎng)站運營

時間：2023-07-06 21:03:01 來源：網(wǎng)站運營

用Axure做原型（1）-零基礎(chǔ)向：目前主流的原型設(shè)計工具有兩個：axure和墨刀。

首先，學哪個軟件更好？

Axure是美國公司開發(fā)的，因此網(wǎng)上下載的安裝包均需要手動安裝漢化包（過程較為簡單）,或者去官網(wǎng)下載正版，均有30天試用期，個人版的正版授權(quán)是5000元終身，上手比墨刀稍微難一點，但是可以實現(xiàn)更復雜的交互等。

墨刀是國內(nèi)研發(fā)，不需要漢化，操作非常簡單，基本1天就可以上手，但超過20個頁面，就需要開通會員，199元一年。

至于用哪個軟件，仁者見仁，也要看工作環(huán)境。有一些公司基本實現(xiàn)了墨刀為主導，有些公司招聘的硬性需求必須是會Axure。

所以，最好兩個都會，為后面的工作打好基礎(chǔ)（筆者認為各行各業(yè)，其實基本功都非常重要）。

本文主要分享Axure的使用，墨刀的使用以后分享~

學習軟件其實是一件非?？菰锏氖虑?，而往往去工作以后可以把“以前學不會的東西學會”。一方面是，因為有工作任務壓力，任務意味著有時間限制，并且有明確的標準。另一方面是，完成實際任務會顯得“更加有意義”，容易激發(fā)自己的激情，通過完成獲得成就感。

所以打算從臨摹一個實際的案例 ，來帶入基礎(chǔ)操作。下面是從網(wǎng)上找到的案例，我們將對其進行原型臨摹：



















Axure才拿到的時候，界面整體是一個白色（上圖），個人認為非常不利于眼睛的保護，以及容易看花眼，所以可以通過手動設(shè)置，調(diào)整操作區(qū)域顏色來解決這個問題。

























表單的主要目的是采集數(shù)據(jù)和信息，從圖上來看這是一個網(wǎng)站的后臺頁面。

首行是后臺名稱及歡迎文字。

第二行是一個導航器功能。

從第三行得知，我們是在首頁這個版塊的數(shù)據(jù)頁面。

并且有一個篩選導航器，可以通過選擇，查看首頁的總數(shù)據(jù)，或者分開查看PC、移動端的數(shù)據(jù)。

第四行開始是詳細數(shù)據(jù)。列出了瀏覽量、訪客數(shù)、新增登陸用戶和平均方位時長等關(guān)鍵數(shù)據(jù)。

第五行是查看之前數(shù)據(jù)的功能。列出了常用的幾個選項，以及可以根據(jù)需要選擇時間段。

第六行是關(guān)鍵指標的分類導航器。

第七行是分類導航的圖標展示區(qū)。







知道各個功能的意義后，下面思考-用什么來制作？

界面左下方是Axure自帶的元件庫，可以用這些元件完成界面的“組裝”。

Default元件庫是這款軟件的核心，包含有基本元件、菜單和表格、標記元件等常用元件。













把需要使用的元件拖動到畫布上







1.1直線，需要延長的時候，按住shift再拉伸，可以保持直線平行。

1.2文本標簽，頁面中純文字部分，可以使用這個元件。

1.3圖片，圖片拉出來的時候默認為長方形，可以根據(jù)自己的需要進行調(diào)節(jié)，這里我們需要一個圓形，所以需要設(shè)置圓角和長寬。

1.3.1長寬設(shè)置







拖動邊緣線或者在頂部工具欄直接設(shè)置長寬，長款輸入一樣的數(shù)值可以得到一個正方形，再設(shè)置圓角，即可得到圓形。







1.3.2設(shè)置圓角







1.4單選按鈕

這個在菜單和表格中。

默認是3*3格。整體操作邏輯和EXCEL差不多。拖動左上角方塊， 可以挪動位置。雙擊格子進行文字輸入。鼠標放到兩格中間時可以調(diào)整行/列間距。













1.5按鈕

操作方法和表格類似。

2提高制作效率

2.1如何復制元件：直接ctrl+cctrl+v，或者鼠標選中需要復制的元件，然后按住ctrl再進行拖拽，就可以復制出來。

2.2如何對齊：(1)挪動的時候盡量按住shift;(2)拖動時，注意軟件提示的參考數(shù)值；（3）拉參考線（下圖）







通過以上方法，即可臨摹出這個頁面（下圖）。后面也可以嘗試做一些自己的頁面~