1、網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記 章丹陽 2013年8月22日,網(wǎng)站原軟件AxureRP分享交流,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,2,軟件設(shè)計(jì)階段，交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者OmniGraffle等）制作出靜態(tài)稿或者原型來表達(dá)設(shè)計(jì)思想。 Word：上手難度普通?？梢援嬀€框圖，能夠畫頁面流程，能夠使用批注與文字說明。但是對(duì)交互表達(dá)不好，也不利于演示。 PPT：上手難度普通。易于畫框架圖，易于做批注，也可以表達(dá)交互流程，也擅長(zhǎng)演示。但是不利于大篇幅的文檔表達(dá)。 Visio：功能相對(duì)比較復(fù)雜

2、。善于畫流程圖，框架圖。不利于批注與大篇幅的文字說明。同樣不利于交互的表達(dá)與演示。 Photoshop/Fireworks：操作難度相對(duì)較大，易于畫框架圖、流程圖。不利于表達(dá)交互設(shè)計(jì)，不擅長(zhǎng)文字說明與批注。 Dreamweaver：操作難度大，需要基礎(chǔ)的html知識(shí)。易于畫框架圖、流程圖、表達(dá)交互設(shè)計(jì)。不擅長(zhǎng)文字說明與批注。 Mind Manger 在低保真模型上梳理產(chǎn)品邏輯和流程。 騰訊的UIDesigner 、AxureRP,原型工具介紹,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,3,原型工具介紹,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,

3、網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,4,原型工具介紹,騰訊的UIDesigner, 簡(jiǎn)稱“UID”，軟件界面原型設(shè)計(jì)的工具。騰訊用戶研究與體驗(yàn)設(shè)計(jì)部（CDC）設(shè)計(jì)研發(fā)。擁有強(qiáng)大的模板和預(yù)制功能，能夠快速的搭建起軟件界面的高保真原型。 可以實(shí)現(xiàn)設(shè)計(jì)師、產(chǎn)品經(jīng)理、程序開發(fā)工程師三者間的快速溝通。 目標(biāo)用戶：交互設(shè)計(jì)師、用戶調(diào)研員、視覺設(shè)計(jì)師、產(chǎn)品經(jīng)理。,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,5,原型工具介紹,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,6,原型工具介紹,原型工

4、具,相關(guān)網(wǎng)站,輔助工具,基本操作,Fireworks繪制的原型,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,7,關(guān)于Axure,Axure的網(wǎng)站原型,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,8,關(guān)于Axure,Axure的網(wǎng)站原型,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,9,關(guān)于Axure,幫助網(wǎng)站需求設(shè)計(jì)者，快捷而簡(jiǎn)便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁文件和規(guī)格文件，以提供演示與開發(fā)。 版本： Axure的第一個(gè)版本誕

5、生在2003年的1月，是同類第一個(gè)專為基于瀏覽器的應(yīng)用程序的原型之一，到現(xiàn)在將近10年過去了，Axure已經(jīng)推出到7.0beta版，這個(gè)軟件已經(jīng)被數(shù)以萬計(jì)的用戶體驗(yàn)、業(yè)務(wù)分析、產(chǎn)品設(shè)計(jì)等人員使用，在中國(guó)，很多知名企業(yè)（百度、新浪、搜狐、淘寶、騰訊）的招聘，已經(jīng)將掌握Axure作為必備技能。 Axure RPAxure的發(fā)音是Ack-sure，RP則是 Rapid Prototyping 快速原型的縮寫。Axure RP Pro是美國(guó)Axure Software Solution公司的精心杰作。 主要目標(biāo)用戶： 軟件項(xiàng)目經(jīng)理，Web產(chǎn)品經(jīng)理，或網(wǎng)站策劃工作者,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操

6、作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,10,Axure RP 界面,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,11,網(wǎng)站地圖（sitemap）,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,12,部件（Widgets）,控件是用于設(shè)計(jì)線框圖的用戶界面元素。 在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,13,部件（Widgets）,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)

7、站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,14,部件（Widgets）,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,15,頁面設(shè)置,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,16,頁面設(shè)置,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,17,部件屬性,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,18,部件屬性,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原

8、型制作讀書筆記,19,生成html原型頁面,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,20,交互設(shè)計(jì)：事件,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,21,步驟1 選中部件,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,22,步驟2 添加事件,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,23,步驟2 添加事件,條件,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型

9、制作讀書筆記,24,步驟2 添加事件,OnClick：鼠標(biāo)點(diǎn)擊 OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對(duì)象上 OnMouseOut：鼠標(biāo)的指針移動(dòng)出對(duì)象外 OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)） OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài) （失去焦點(diǎn)） OnPageLoad：頁面或模塊載入 大多對(duì)象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter 與 OnMouseOut， 一些特殊的控件可觸發(fā)的事件有些不同： 按鈕控件只有 OnClick 單選框和復(fù)選框則具有 OnFocus、 OnLostFocus 文本框、文本域、下拉框、列表框則具有 OnK

10、eyUp、OnFocus、OnLostFocus 頁面加載或模塊被載入時(shí)則發(fā)生 OnPageLoad,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,25,步驟3 添加動(dòng)作（條件）,添加條件,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,26,步驟3 添加動(dòng)作,Open Link in Current Window：在當(dāng)前窗口打開一個(gè)頁面 Open Link in Popup Window：在彈出的窗口中打開一個(gè)頁面 Open Link in Parent Window：在父窗口中打開一個(gè)頁面 Clo

11、se Current Window：關(guān)閉當(dāng)前窗口 Open Link in Frame：在框架中打開一個(gè)頁面 Set Panel state(s) to State(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài) Show Panel(s)：顯示動(dòng)態(tài)面板 Hide Panel(s)：隱藏動(dòng)態(tài)面板 Toggle Visibility for Panel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)（顯示/隱藏） Move Panel(s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來移動(dòng)動(dòng)態(tài)面板 Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Parent Frame：在父頁面的嵌框架中打開一個(gè)頁面 Scroll to Image Map Region：滾動(dòng)頁面到 Image Map 所在位置 Enable Widget(s)：把對(duì)象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài) Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作 Other：顯示動(dòng)作的文字說明,原型工具,相關(guān)網(wǎng)站,輔助工具,基本操作,網(wǎng)站藍(lán)圖-Axure RP高保真網(wǎng)頁原型制作讀書筆記,27,坐標(biāo)設(shè)置,原型工具,相關(guān)網(wǎng)站,輔