使用原型設計工具 Axure RP建立一個web頁面框架

前言

什麼是原型呢？    

原型設計是交互設計師與PD、PM、網站開發工程師溝通的最好工具。而該塊的設計在原則上必須是交互設計師的產物，交互設計以用戶爲中心的理念會貫穿整個產品。利用交互設計師專業的眼光與經驗直接導至該產品的可用性。

簡單說，「原型」是在項目前期階段的重要設計步驟，主要以發現新想法和檢驗設計爲目的，重點在於直觀體現產品主要界面風格以及結構、並展現主要功能模塊以及之間相互關係，不斷確認模糊部分，爲後期的視覺設計和代碼編寫提供準確的產品信息

使用人羣

原型設計的使用者主要包括商業分析師、信息架構師、可用性專家、產品經理、IT諮詢師、用戶體驗設計師、交互設計師、界面設計師、架構師、程序開發工程師等

使用目的

用例闡釋者，用來了解用例的用戶界面；

系統分析人員，用來了解用戶界面如何影響系統分析；

設計員，用來了解用戶界面如何施加影響及它對系統「內部」的要求；

經常使用快速原型設計工具

Axure RP、Balsamiq Mockup、Pencil Project、Pencil Project、Prototype Composer、Omni Graffle、GUI Design Studio（GDS）、Office組件，這裏咱們使用的是Axure RP

Axure RP工具簡介

Axure RP是一個快速繪製Wireframe和Prototyping的工具，主要用來定義應用程序的需求與規格，以及設計使用者界面與功能。本文介紹如何使用Axure RP建立WEB頁面框架。

 

設計準備

一、軟件安裝：下載Axure RP，安裝成功

二、axure組件導入：安裝後系統自帶了一部分最基礎經常使用的，網上也有不少別人作好的，軟件使用到必定階段能夠考慮本身製做元件，以便提升產品原型的製做速度，如今咱們先去網上下載一些別人作好的組件，而後放到軟件安裝的目錄/DefaultSettings/Libraries下，重啓後就可使用了

 

設計案例——web頁面框架

設計思路：在頁面框架中通常分爲幾個區域，普通的頁面包含頭部，底部，菜單和主窗口。效果以下：

步驟1、母版的建立

在模板裏面分別建立3個母板header、foot、body

步驟2、繪製模板內容

在header界面建立一個800*40的矩形

在foot界面建立一個800*20的矩形

在body界面建立一個700*400的框架，並命名爲body

 

步驟3、建立導航頁面

在頁面區域建立一個名稱爲0index的界面並在界面上畫了一個800*460的矩形

步驟4、在頁面中進行佈局

分別將header,foot放在界面的上面和下面，body放在x:100,y:40,的位置。

 

步驟5、添加菜單導航

在部件庫中找到導航，將導航欄放在頁面X:0,Y:40的位置，讓後將菜單重命名一次，這裏以客戶管理舉例，將導航欄分別命名爲客戶管理，客戶新增、客戶查詢

 

步驟6、建立子頁面

在頁面區域分別對應建立3個界面客戶管理，客戶新增、客戶查詢

 

步驟7、自定義事件實現菜單功能

 

鼠標左鍵單機客戶新增，而後雙擊擊鼠標單擊時，彈出界面

 

 

第二步點擊新動做：點擊內部框架，第四部選配置動做：選擇body（內部框架）,打開在，選擇1-1客戶新增，點擊確認

客戶查詢與客戶新增操做同樣，而後點擊預覽

步驟8、查看預覽效果

預覽效果以下，將左側的關閉掉，分別點擊一下，客戶新增和客戶查詢，看一下效果

注意事項

1.前期設計不要加入視覺設計的元素。着眼於大局，不要糾結細枝末節。由於咱們的原型方案尚未最終經過，確定要經過屢次迭代才能肯定方案，太多的視覺設計就是浪費時間；    再者，若是原型作的十分逼真，在產品討論會上，視覺的元素會很快抓住你們的眼球，到時就會有領導來質疑你的界面是否是該換成藍色，按鈕是否是再精緻一些這樣的問題。沒有人會專一於你的交互設計了。    

2.最好在使用axure工具前，用紙和筆畫一些紙面原型，整理一下思路。    

3.這個過程應是快速的，迭代的。    

參考資料：

http://uedc.163.com/2248.html

http://www.cr173.com/html/29758_1.html