網站藍圖: 使用Axure RP速成高擬真網頁 (附光碟) | 誠品線上

網站藍圖: 使用Axure RP速成高擬真網頁 (附光碟)

內容簡介

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

作者介紹

作者介紹 ■作者簡介呂皓月 楊長韜

產品目錄

產品目錄 前言網站藍圖——Axure RP高保真網頁原型製作第1章 關於Axure RP…1.1 Axure公司的故事 1.2 裝潢與Axure1.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 RP4.4 在Axure RP中使用Flash4.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. 結帳頁面步驟18. 結帳頁面步驟29. 結帳頁面步驟310. 結帳頁面步驟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 shareTa的資訊her account 拍照頁面take photo homepage設定頁面setting pages 每日拍照鬧鈴提醒 總 結 綜合案例4 沒夠網——影響力社交團購 平台需求描述 需求分析 高保真線方塊圖幻燈區域 目前登入使用者的資訊好友動態 最近被我影響的Footer 總 結 綜合案例5 Morework——同行同事線上交流平台 專案描述 需求描述 需求分析 高保真線方塊圖“事兒”頁面single post人的頁面 發新事兒 註冊頁面register我的人脈圈登入頁面 我的公司 總 結

商品規格