網站藍圖：使用 Axure RP速成高擬真網頁 -FindBook 找書網

前言
網站藍圖——Axure RP高保真網頁原型製作
第1章關於Axure RP…
1.1 Axure公司的故事
1.2 裝潢與Axure
1.3 愛上Axure RP的十大理由
1.4 Axure RP的特色功能
1.4.1 概念圖+設計（Sketch+Design）
1.4.2 互動
1.4.3 文件
1.4.4 合作
1.5 Axure RP與其他原型工具的比較
第2章原型和高保真原型的比較
2.1 什麼是原型
2.2 高保真原型
2.3 為什麼要製作高保真網站原型
2.4 人人都愛高保真原型
2.5 誰來製作高保真原型
2.6 高保真原型的更新
2.7 開始之前
第3章 AxureRP軟體使用概述
3.1 AxureRP軟體安裝與介面
3.2 工具列區域（Toolbox）
3.3 網站地圖區域（Sitemap）
案例1 雅虎首頁幻燈
步驟1 建立新專案
步驟2 製作廣告動態面板
步驟3 製作Thumbnail區域
步驟4 滑動切換
總結
案例2 分享到新浪微網誌
步驟1 建立新專案
3.4 套件區域（Widgets）
3.4.1 線方塊圖套件函數庫
3.4.2 套件的屬性
3.5 主套件區域（Masters）
3.6 頁面區域（Pages）
3.7 頁面設定區域（Page Notes/Interactions/
Formattings）
3.8 套件屬性區域（Widget
Properties）
3.9 動態面板管理區域（Dynamic Panel
Manager）
第4章 AxureRP基礎操作與技巧
4.1 為套件增加事件
4.2 為頁面增加事件
4.3 從Photoshop到Axure RP
4.4 在Axure RP中使用Flash
4.5 背景覆蓋法
4.6 拖曳套件
4.7 座標
4.8 尺寸
4.9 設定變數值
4.10 產生原型並在瀏覽器中檢視
4.11 Snag It使用簡介
步驟2 增加分享按鈕
步驟3 製作新浪分享介面頁
步驟4 增加登入動態面板
步驟5 增加分享按鈕動作
步驟6 為Login面板增加事件
步驟7 分享成功頁面
步驟8 倒計時3秒
總結
PART 1 基礎部分
PART 2 案例部分

案例3 Gmail的進度指示器
步驟1 製作進度指示器
步驟2 製作覆蓋物
步驟3 移動覆蓋物
步驟4 登入頁和電子郵件頁
步驟5 更改Axure RP的預設開啟頁面
總結
案例4 新浪富媒體廣告示意
步驟1 準備頁面背景
步驟2 增加必勝客的Flash廣告
步驟3 調整Flash廣告的尺寸
步驟4 關閉Flash廣告
步驟5 Flash廣告的側邊欄
步驟6 Flash廣告自動關閉
總結
案例5 iCast廣告
步驟1 建立頁面背景
步驟2 增加Flash廣告
步驟3 自動關閉廣告
總結
案例6 雅虎首頁全螢幕展開的廣告
步驟1 準備廣告動態面板
步驟2 準備背景頁面
步驟3 自動關閉廣告
總結
案例7 淘寶首頁導覽滑鼠移過效果
步驟1 準備背景圖
步驟2 製作導覽選單
步驟3 另外一種方式
步驟4 進一步的可能性
總結
案例8 淘寶商城的全域導覽
步驟1 準備A區的動態面板
步驟2 準備B區的動態面板
步驟3 為面板增加事件
步驟4 增加文字鏈
步驟5 取巧的回應區域
步驟6 更多的動態面板
步驟7 更多動態面板
總結
案例9 點評網的打分效果
步驟1 準備星星的圖片
步驟2 準備動態面板的狀態
步驟3 讓“星星閃亮”
步驟4 打分完成後顯示分數
步驟5 滿天都是小星星
步驟6 Baby One More Time
總結
案例10 Google搜索提示效果
步驟1 準備背景
步驟2 準備搜索框
步驟3 準備提示框
步驟4 處理tips動態面板的狀態
步驟5 其他的關鍵字
步驟6 讓搜索提示出現
步驟7 讓頁面完整
總結
案例11 自己設計網頁播放機
步驟1 架設舞台背景
步驟2 播放和暫停按鈕
步驟3 音量調節按鈕
步驟4 播放進度指示器
總結
目錄

網站藍圖——Axure RP高保真網頁原型製作
案例12 凡客首頁的跑馬燈文字鏈
步驟1 準備頁面元素
步驟2 編輯舞台面板
步驟3 為文字鏈增加連結
步驟4 無窮迴圈
步驟5 開始無窮迴圈
總結
案例13 促銷的倒計時牌
步驟1 時•分•秒•百分之一秒
步驟2 無窮迴圈
步驟3 OnMove函數
步驟4 初始化變數
總結
案例14 製作PPT（提案）
步驟1 製作背景
步驟2 將背景製是主套件
（Masters）
步驟3 製作第一張幻燈片
步驟4 Raise Event事件
步驟5 其他幻燈片
步驟6 將專案放在公司網站上
步驟7 簡單加密
總結
案例15 淘寶商城首頁幻燈效果
步驟1 架設幻燈片
步驟2 架設幻燈片的頁碼部分
步驟3 timer面板的無窮迴圈
總結
案例16 新浪微網誌的圖片和視訊
步驟1 架設背景
步驟2 第一條微網誌
步驟3 第二條有圖有視訊的微網誌
步驟4 為Blog2增加圖片和視訊
步驟5 增加事件
步驟6 親！您有新的微網誌
步驟7 新微網誌的顯示
總結
案例17 製作iPhone互動效果
步驟1 自製iPhone 4的套件函數庫
步驟2 增加iPhone 4的按鈕套件
步驟3 滑動開關
步驟4 出現的通知視窗
步驟5 製作Tab按鈕
步驟6 其他套件
步驟7 iPhone 4的圖片應用
總結
案例18 參考任意頁面的任意部分
步驟1 火車票搜索
步驟2 機票搜索
步驟3 酒店搜索
步驟4 其他部分
總結
案例19 通用登入註冊第一部分
步驟1 完成表單的版面配置
步驟2 輸入框的邊框變化
步驟3 讓邊框跟隨滑鼠變化
步驟4 增加其他輸入框的提示
總結
案例20 通用登入註冊第二部分
步驟1 準備驗證Email輸入
步驟2 驗證Email輸入
步驟3 驗證密碼
步驟4 再次驗證密碼
步驟5 處理驗證碼
總結

案例21 Apple首頁的滑動搜索框
步驟1 準備背景圖片
步驟2 準備專案
步驟3 滑動模組
步驟4 讓搜索框變大
步驟5 讓搜索框變小
總結
案例22 優衣函數庫淘寶商城購物車
步驟1 建立商品圖片
步驟2 選擇產品顏色
步驟3 選擇尺碼
步驟4 加入購物車
步驟5 架設購物車
步驟6 購物車面板的顯示和關閉
步驟7 檢視購物車
總結
案例23 Looklet的真人試衣間
步驟1 準備模特
步驟2 第一件上裝
步驟3 第二件上裝
步驟4 第一件下裝
步驟5 脫衣服
總結
案例24 遊戲"大家來找茬"
步驟1 主介面
步驟2 關卡1
步驟3 顯示目前關卡數
步驟4 挑選關卡
步驟5 一個關鍵的地方
步驟6 倒計時
步驟7 失敗了
步驟8 一關接一關的玩
步驟9 解決幾個Bug
總結
PART 3 綜合案例
綜合案例1 電商網站
1. 需求描述
2. 線方塊圖
3. 購物流程（略，請參考素材）
4. 設計圖
5. 高保真線方塊圖
6. 試衣間
7. 結帳頁面步驟1
8. 結帳頁面步驟2
9. 結帳頁面步驟3
10. 結帳頁面步驟4
總結
外篇最簡單的專題製作方法
圖片堆砌法
直接切圖法
綜合案例2 促銷專題——迅速製作精美的
促銷專題
需求描述
步驟1：功能區域
步驟2：Logo和搜索框
步驟3：導覽條
步驟4：幻燈區域
步驟5：品牌、活動推薦區域
步驟6：分類商品區域
步驟7：頁尾
總結
綜合案例3 臭美——iphone App
需求描述
需求分析
目錄

網站藍圖——Axure RP高保真網頁原型製作
高保真線方塊圖
首頁Homepage
登入頁面login
我的臭美日記 My beauty dairy
檢視附近 nearby homepage list view
檢視附近熱門排行neaby hottest
我重視的人friend feed
圖詳情頁single image rt and flag
轉評分享rt nd share
Ta的資訊her account
拍照頁面take photo homepage
設定頁面setting pages
每日拍照鬧鈴提醒
總結
綜合案例4 沒夠網——影響力社交團購
平台
需求描述
需求分析
高保真線方塊圖
幻燈區域
目前登入使用者的資訊
好友動態
最近被我影響的
Footer
總結
綜合案例5 Morework——同行同事線上
交流平台
專案描述
需求描述
需求分析
高保真線方塊圖
“事兒”頁面single post
人的頁面
發新事兒
註冊頁面register
我的人脈圈
登入頁面
我的公司
總結