網站藍圖:使用 Axure RP速成高擬真網頁
(附光碟CD)
前言 Axure RP就是用來給網站畫圖紙的軟體,它如同服裝設計師的樣衣、建築師的圖紙、電影導演的故事版、售樓處的樣板間……總之,它能讓你在真正付出時間和金錢來製作一個網站之前,能夠完全瞭解到最終的真正網站所具有的功能、設計、交互和用戶體驗,親眼看到、親手用到一個網站。然後在這個原型的基礎上進行用戶測試和改進,節省大量的時間和金錢。比這個更棒的是,它能讓人一下子就明白網站是做什麼的、如何使用一個網站以及要花多少人力物力把一個網站做出來。 本書以各大網站的實際頁面為實例, 詳細描述了如何從一個想法,到低傳真線框,再到高傳真頁面原型的過程,並且結合了專案管理中(提案、歸納、示範等)的各種實用建議。是產品經理、技術工程師、商務合作人員、創業者必備指南。 ★ 目錄 前言 網站藍圖——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 更多動態面板 總 結 案