網(wǎng)站藍(lán)圖

內(nèi)容概要

　　Axure RP，一款偉大的，默默無聞的網(wǎng)站建模軟件。說它偉大，是因?yàn)樗萌绱撕唵蔚姆绞剑瑢⑶а匀f語化作無聲的默契；說它默默無聞，是因?yàn)橹挥泻苌俚娜嗽谕低档氖褂弥?，編織和描繪自己的夢(mèng)想和創(chuàng)意。而大部分人尚不知道有這樣一款神奇的軟件，可以讓人們?nèi)绱饲逦挠|摸一個(gè)網(wǎng)站的脈絡(luò)。仁者見仁，智者見智這樣一句話，不知道讓多少網(wǎng)站的建設(shè)經(jīng)歷了推倒重來，混亂之治，莫名其妙，虎頭蛇尾的痛苦過程。這一切的原因都是因?yàn)?，文字是不可靠的！文字的不可靠在于，不同的人?duì)于同樣的文字，會(huì)有不同的理解。這樣不同的理解也就從一開始將網(wǎng)站建設(shè)帶入了深淵。所有的人都知道，建筑是靠圖紙?jiān)斐鰜淼摹＝ㄖD紙?jiān)敿?xì)說明了建筑是什么樣子的，所有人照著圖紙施工，造出來的大樓是跟圖紙一模一樣的。正因?yàn)楹芏嗑W(wǎng)站沒有好的圖紙，才導(dǎo)致了網(wǎng)站建設(shè)中的拖沓與混亂。那么，如何制作網(wǎng)站的圖紙？　　Axure RP就是用來給網(wǎng)站畫圖紙的軟件。它如同服裝設(shè)計(jì)師的樣衣，如同建筑師的圖紙，如同電影導(dǎo)演的故事板，如同售樓處的樣板間?？傊?，它能讓你在真正付出時(shí)間和金錢來制作一個(gè)網(wǎng)站之前，能夠完全了解到最終真正網(wǎng)站所具有的功能，設(shè)計(jì)，交互和用戶體驗(yàn)。就親眼看到，親手用到一個(gè)網(wǎng)站。然后在這個(gè)原型的基礎(chǔ)上進(jìn)行用戶測(cè)試和改進(jìn)，節(jié)省大量的時(shí)間和金錢。比這個(gè)更棒的是，它能讓別人一下子就明白網(wǎng)站是做什么的，如何使用一個(gè)網(wǎng)站以及要花多少人力物力把一個(gè)網(wǎng)站給做出來。

作者簡介

呂皓月，網(wǎng)名阿睡（MrSleepy），2002年畢業(yè)于北京大學(xué)物理系。畢業(yè)后出國未遂，一直從事互聯(lián)網(wǎng)相關(guān)的工作。曾就職于雅虎，阿里巴巴、公司A、公司B等公司。擔(dān)任過工程師、產(chǎn)品經(jīng)理、銷售策劃、市場(chǎng)策劃、營銷總監(jiān)、營銷副總裁等職務(wù)。對(duì)互聯(lián)網(wǎng)行業(yè)的產(chǎn)品、技術(shù)、營銷等方面有著持續(xù)的熱情。 曾為產(chǎn)品上線徹夜不眠，曾為書寫需求文檔嘔心瀝血，曾為表明觀點(diǎn)苦口婆心，曾為實(shí)現(xiàn)功能軟磨硬泡、威逼利誘，曾為爭取資源據(jù)理力爭，也曾為了進(jìn)發(fā)的靈感奮筆疾書到凌晨。不敢說對(duì)互聯(lián)網(wǎng)行業(yè)有多么深的理解，但是卻對(duì)自己喜歡的事情熱情未泯。期望能與互聯(lián)網(wǎng)的同業(yè)者共勉，能夠多勞真的多得。 楊長韜，網(wǎng)名Tom Yang，近洋海歸。2004年初離開任職3年的卓越網(wǎng)出國深造，學(xué)習(xí)廣告營銷與視覺設(shè)計(jì)。2007年回國至今從事商業(yè)品牌建立、互聯(lián)網(wǎng)營銷以及體驗(yàn)設(shè)計(jì)等相關(guān)工作，參與的項(xiàng)目包括雀巢、北歐航空、三里屯Village以及釣魚臺(tái)米高梅集團(tuán)酒店等，然而最值得稱道的作品是2010年為其太太制作的Google Map電子賀卡，在被Google官方取締前的4天中，其坊問流量Alexa排名Google Map關(guān)鍵司全球第二。

書籍目錄

PART 1 基礎(chǔ)部分 第1章 關(guān)于Axure RP 1.1 Axure公司的故事 1.2 裝修與Axure 1.3 愛上Axure RP的十大理由 1.4 Axure RP的特色功能 1.4.1 概念圖+設(shè)計(jì)（Sketch+Design） 1.4.2 互動(dòng) 1.4.3 文檔 1.4.4 合作 1.5 Axure RP與其他原型工具的比較 第2章 原型和高保真原型的比較 2.1 什么是原型 2.2 高保真原型 2.3 為什么要制作高保真網(wǎng)站原型 2.4 人人都愛高保真原型 2.5 誰來制作高保真原型 2.6 高保真原型的更新 2.7 開始之前 第3章 AxureRP軟件使用概述 3.1 AxureRP軟件安裝與界面 3.2 工具欄區(qū)域（Toolbox） 3.3 站點(diǎn)地圖區(qū)域（Sitemap） 3.4 部件區(qū)域（Widgets） 3.4.1 線框圖部件庫 3.4.2 部件的屬性 3.5 主部件區(qū)域（Masters） 3.6 頁面區(qū)域（Pages） 3.7 頁面設(shè)置區(qū)域（Page Notes/Interactions/Formattings） 3.8 部件屬性區(qū)域（Widget Properties） 3.9 動(dòng)態(tài)面板管理區(qū)域（Dynamic Panel Manager） 第4章 AxureRP基礎(chǔ)操作與技巧 4.1 為部件添加事件 4.2 為頁面添加事件 4.3 從Photoshop到Axure RP 4.4 在Axure RP中使用Flash 4.5 背景覆蓋法 4.6 拖曳部件 4.7 坐標(biāo) 4.8 尺寸 4.9 設(shè)置變量值 4.10 生成原型并在瀏覽器中查看 4.11 Snag It使用簡介 PART 2 案例部分 案例1 雅虎首頁幻燈 步驟1 創(chuàng)建新項(xiàng)目 步驟2 制作廣告動(dòng)態(tài)面板 步驟3 制作Thumbnail區(qū)域 步驟4 滑動(dòng)切換 總結(jié) 案例2 分享到新浪微博 步驟1 創(chuàng)建新項(xiàng)目 步驟2 添加分享按鈕 步驟3 制作新浪分享接口頁 步驟4 添加登錄動(dòng)態(tài)面板 步驟5 添加分享按鈕動(dòng)作 步驟6 為Login面板添加事件 步驟7 分享成功頁面 步驟8 倒計(jì)時(shí)3秒 總結(jié) 案例3 Gmail的進(jìn)度條 步驟1 制作進(jìn)度條 步驟2 制作覆蓋物 步驟3 移動(dòng)覆蓋物 步驟4 登錄頁和郵箱頁 步驟5 更改Axure RP的默認(rèn)打開頁面 總結(jié) 案例4 新浪富媒體廣告示意 步驟1 準(zhǔn)備頁面背景 步驟2 添加必勝客的Flash廣告 步驟3 調(diào)整Flash廣告的尺寸 步驟4 關(guān)閉Flash廣告 步驟5 Flash廣告的側(cè)邊欄 步驟6 Flash廣告自動(dòng)關(guān)閉 總結(jié) 案例5 iCast廣告 步驟1 創(chuàng)建頁面背景 步驟2 添加Flash廣告 步驟3 自動(dòng)關(guān)閉廣告 總結(jié) 案例6 雅虎首頁全屏展開的廣告 步驟1 準(zhǔn)備廣告動(dòng)態(tài)面板 步驟2 準(zhǔn)備背景頁面 步驟3 自動(dòng)關(guān)閉廣告 總結(jié) 案例7 淘寶首頁導(dǎo)航鼠標(biāo)懸停效果 步驟1 準(zhǔn)備背景圖 步驟2 制作導(dǎo)航菜單 步驟3 另外一種方式 步驟4 進(jìn)一步的可能性 總結(jié) 案例8 淘寶商城的全局導(dǎo)航 步驟1 準(zhǔn)備A區(qū)的動(dòng)態(tài)面板 步驟2 準(zhǔn)備B區(qū)的動(dòng)態(tài)面板 步驟3 為面板添加事件 步驟4 添加文字鏈 步驟5 取巧的響應(yīng)區(qū)域 步驟6 更多的動(dòng)態(tài)面板 步驟7 更多動(dòng)態(tài)面板 總結(jié) 案例9 點(diǎn)評(píng)網(wǎng)的打分效果 步驟1 準(zhǔn)備星星的圖片 步驟2 準(zhǔn)備動(dòng)態(tài)面板的狀態(tài) 步驟3 讓“星星閃亮” 步驟4 打分完成后顯示分?jǐn)?shù) 步驟5 滿天都是小星星 步驟6 Baby One More Time 總結(jié) 案例10 谷歌搜索提示效果 步驟1 準(zhǔn)備背景 步驟2 準(zhǔn)備搜索框 步驟3 準(zhǔn)備提示框 步驟4 處理tips動(dòng)態(tài)面板的狀態(tài) 步驟5 其他的關(guān)鍵詞 步驟6 讓搜索提示出現(xiàn) 步驟7 讓頁面完整 總結(jié) 案例11 自己設(shè)計(jì)網(wǎng)頁播放器 步驟1 搭建舞臺(tái)背景 步驟2 播放和暫停按鈕 步驟3 音量調(diào)節(jié)按鈕 步驟4 播放進(jìn)度條 總結(jié) 案例12 凡客首頁的跑馬燈文字鏈  步驟1 準(zhǔn)備頁面元素 步驟2 編輯舞臺(tái)面板 步驟3 為文字鏈添加鏈接 步驟4 無限循環(huán) 步驟5 開始無限循環(huán) 總結(jié) 案例13 促銷的倒計(jì)時(shí)牌 步驟1 時(shí)?分?秒?百分之一秒 步驟2 無限循環(huán) 步驟3 OnMove函數(shù) 步驟4 初始化變量 總結(jié) 案例14 制作PPT（提案） 步驟1 制作背景 步驟2 將背景制作為主部件（Masters） 步驟3 制作第一張幻燈片 步驟4 Raise Event事件 步驟5 其他幻燈片 步驟6 將項(xiàng)目放在公司網(wǎng)站上 步驟7 簡單加密 總結(jié) 案例15 淘寶商場(chǎng)首頁幻燈效果 步驟1 搭建幻燈片 步驟2 搭建幻燈片的頁碼部分 步驟3 timer面板的無限循環(huán) 總結(jié) 案例16 新浪微博的圖片和視頻 步驟1 搭建背景 步驟2 第一條微博 步驟3 第二條有圖有視頻的微博 步驟4 為Blog2添加圖片和視頻 步驟5 添加事件 步驟6 親！您有新的微博 步驟7 新微博的顯示 總結(jié) 案例17 制作iPhone交互效果 步驟1 自制iPhone 4的部件庫 步驟2 添加iPhone 4的按鈕部件 步驟3 滑動(dòng)開關(guān) 步驟4 彈出的通知窗口 步驟5 制作Tab按鈕 步驟6 其他部件 步驟7 iPhone 4的圖片應(yīng)用 總結(jié) 案例18 引用任意頁面的任意部分 步驟1 火車票搜索 步驟2 機(jī)票搜索 步驟3 酒店搜索 步驟4 其他部分 總結(jié) 案例19 通用登陸注冊(cè)第一部分 步驟1 完成表單的布局 步驟2 輸入框的邊框變化 步驟3 讓邊框跟隨鼠標(biāo)變化 步驟4 添加其他輸入框的提示 總結(jié) 案例20 通用登陸注冊(cè)第二部分 步驟1 準(zhǔn)備驗(yàn)證Email輸入 步驟2 驗(yàn)證Email輸入 步驟3 驗(yàn)證密碼 步驟4 再次驗(yàn)證密碼 步驟5 處理驗(yàn)證碼 總結(jié) 案例21 Apple首頁的滑動(dòng)搜索框 步驟1 準(zhǔn)備背景圖片 步驟2 準(zhǔn)備項(xiàng)目 步驟3 滑動(dòng)模塊 步驟4 讓搜索框變大 步驟5 讓搜索框變小 總結(jié) 案例22 優(yōu)衣庫淘寶商城購物車 步驟1 創(chuàng)建商品圖片 步驟2 選擇產(chǎn)品顏色 步驟3 選擇尺碼 步驟4 加入購物車 步驟5 搭建購物車 步驟6 購物車面板的顯示和關(guān)閉 步驟7 查看購物車 總結(jié) 案例23 Looklet的真人試衣間 步驟1 準(zhǔn)備模特 步驟2 第一件上裝 步驟3 第二件上裝 步驟4 第—件下裝 步驟5 脫衣服 總結(jié) 案例24 游戲“大家來找茬” 步驟1 主界面 步驟2 關(guān)卡1 步驟3 顯示當(dāng)前關(guān)卡數(shù) 步驟4 挑選關(guān)卡 步驟5 一個(gè)關(guān)鍵的地方 步驟6 倒計(jì)時(shí) 步驟7 失敗了 步驟8 一關(guān)接一關(guān)的玩 步驟9 解決幾個(gè)Bug 總結(jié) PART3 綜合案例 綜合案例1 電商網(wǎng)站 1.需求描述 2.線框圖 3.購物流程（略，請(qǐng)參考素材） 4.設(shè)計(jì)圖 5.高保真線框圖 6.試衣間 7.結(jié)賬頁面步驟1 8.結(jié)賬頁面步驟2 9.結(jié)賬頁面步驟3 10.結(jié)賬頁面步驟4 總結(jié) 綜合案例2 促銷專題——迅速制作精美的促銷專題 需求描述 步驟1：功能區(qū)域 步驟2：Logo和搜索框 步驟3：導(dǎo)航條 步驟4：幻燈區(qū)域 步驟5：品牌、活動(dòng)推薦區(qū)域 步驟6：分類商品區(qū)域 步驟7：頁腳 總結(jié) 外篇 最簡單的專題制作方法 圖片堆砌法 直接切圖法 綜合案例3 臭美——iphoto App 需求描述 需求分析 高保真線框圖 首頁Homepage 登錄頁面login 我的臭美日記My beauty dairy 查看附近nearby homepage list view 查看附近熱門排行neaby hottest 我關(guān)注的人friend feed 圖詳情頁single image rt and flag 轉(zhuǎn)評(píng)分享rt nd share  Ta的信息her account 拍照頁面take photo homepage 設(shè)置頁面setting pages 每日拍照鬧鐘提醒 總結(jié) 綜合案例4 沒夠網(wǎng)——影響力社交團(tuán)平臺(tái) 需求描述 需求分析 高保真線框圖 幻燈區(qū)域 當(dāng)前登錄用戶的信息 好友動(dòng)態(tài) 最近被我影響的 Footer 總結(jié) 綜合案例5 Morework——同行同事在線交流平臺(tái) 項(xiàng)目描述 需求描述 需求分析 高保真線框圖 “事兒”頁面single post 人的頁面 發(fā)新事兒 注冊(cè)頁面register 我的人脈圈 登錄頁面 我的公司 總結(jié)

章節(jié)摘錄

版權(quán)頁：   插圖：    設(shè)計(jì)師關(guān)心的是：我們要為什么樣的人，設(shè)計(jì)什么樣的東西？ 設(shè)計(jì)師都是很有想象力，很有想法的人。但是我們不能讓設(shè)計(jì)師天馬行空地去設(shè)計(jì)。如果你是一個(gè)設(shè)計(jì)師，有人對(duì)你說：設(shè)計(jì)一個(gè)xx東西吧，沒有任何限制，讓你的創(chuàng)意盡情發(fā)揮吧！那你千萬別高興，你要對(duì)他說：回去再想想吧。否則，你很有可能收不到設(shè)計(jì)費(fèi)哦！我們需要的設(shè)計(jì)師，是能夠在“框中作畫”的設(shè)計(jì)師。他們一定要受到各方面的限制，然后在各種限制中尋求平衡。是的，就像運(yùn)動(dòng)員，你要遵守一個(gè)運(yùn)動(dòng)的基本規(guī)則（沒聽說過奧林匹克隨便做運(yùn)動(dòng)吧？），才能成為一個(gè)偉大的運(yùn)動(dòng)員。而我們要傳達(dá)給設(shè)計(jì)師的，就是他們要遵循的限制和規(guī)則。所以，你想得到最好的結(jié)果，就要設(shè)定最好的、最合適的限制。 不以規(guī)矩，不成方圓，全是規(guī)矩，方圓難辨。高保真原型對(duì)于設(shè)計(jì)師來說： ?首先能讓他們非常清楚限制之所在（—個(gè)7個(gè)字的標(biāo)題設(shè)計(jì)與一個(gè)200字的文章設(shè)計(jì)完全沒有可比性）； ?其次能讓設(shè)計(jì)師以較低成本表達(dá)他們的多個(gè)創(chuàng)意方案，供決策者和目標(biāo)用戶測(cè)試，發(fā)現(xiàn)最好的方案； ?最后，能夠讓設(shè)計(jì)師從頭到尾的去想—件事情，避免出現(xiàn)設(shè)計(jì)師想得很好，設(shè)計(jì)得很棒，但是卻根本無法在時(shí)間和金錢預(yù)算內(nèi)做出來的尷尬局面。 客服人員 客服人員關(guān)心的是：如果用戶問我這個(gè)問瘤，我該怎么回答？ 客服人員的挑戰(zhàn)在于，他們要用人類的語言來回答。他們不能說“就是這么設(shè)計(jì)的！”，說“會(huì)在下個(gè)版本中實(shí)現(xiàn)”也不是一句很體面的話。所以，客服人員是除了產(chǎn)品經(jīng)理外的產(chǎn)品專家。

媒體關(guān)注與評(píng)論

欲成其事，先利其器，對(duì)于許多互聯(lián)網(wǎng)從業(yè)人員(尤其是產(chǎn)品人員或UE設(shè)計(jì)師)來說，Axure RP無疑是你行走江湖、養(yǎng)家糊口的必備兵刃，這是一本讀起來像小說的劍譜，閱讀過程很輕松，卻對(duì)功力提升大有助益。 ——暴風(fēng)影音 產(chǎn)品副總裁 崔天龍  該書詳盡剖析實(shí)用案例，充分展現(xiàn)編者在宏觀教學(xué)上的掌控力。作為iOS開發(fā)者來說，Axure RP無疑是必備軟件之一，如何在工作中充分運(yùn)用Axure RP，卻成為許多iOS開發(fā)者的心頭病。Axure RP本身并沒有教學(xué)說明，網(wǎng)絡(luò)上只有一些簡單介紹，想要做到玩轉(zhuǎn)Axure RP，單靠這些是無法實(shí)現(xiàn)的。而現(xiàn)在，該書的出現(xiàn)，成為iOS開發(fā)者的福音，草草翻閱便愛不釋手，不僅可幫助初學(xué)者迅速學(xué)習(xí)技巧，也可用于高級(jí)開發(fā)者的進(jìn)階提升，實(shí)用性很強(qiáng)，圖文配合簡明文字，清楚易學(xué)，絕對(duì)是不可錯(cuò)過的iOS開發(fā)者必備建模書。 ——IMOHOO INFOTECH 副總經(jīng)理 王斐  本書以各大網(wǎng)站的實(shí)際頁面為例子，詳細(xì)描述了如何從一個(gè)想法，到低保真線框圖，再到高保真頁面原型的過程，并且結(jié)合了項(xiàng)目管理中（提案、歸納、演示等）的各種實(shí)用建議。是產(chǎn)品經(jīng)理、技術(shù)工程師、商務(wù)合作人員、創(chuàng)業(yè)者必備指南。 ——百度資深產(chǎn)品經(jīng)理 閆研  技術(shù)人員經(jīng)常說：好的產(chǎn)品經(jīng)理就和一段完美的愛情一樣，是可遇而不可求的。和呂皓月同事了兩家公司，并肩作戰(zhàn)了多個(gè)項(xiàng)目，他一直都是我們公認(rèn)的優(yōu)秀產(chǎn)品經(jīng)理，他編寫的產(chǎn)品文檔也是我們最愿意拿給新人學(xué)習(xí)的。 ——混跡于互聯(lián)網(wǎng)的 @博升優(yōu)勢(shì)王志強(qiáng)  這本書從Axure RP的歷史背景、適用范圍入手，通過跟其他圖形工具的對(duì)比充分展示了它在項(xiàng)目開發(fā)中的重要性和優(yōu)越性。在對(duì)Axure RP有了一個(gè)初步了解之后，又通過圖文搭配的方式詳細(xì)具體地介紹了Axure RP的特色功能，同時(shí)結(jié)合實(shí)際教學(xué)案例，使用戶能夠輕松、快速地掌握學(xué)習(xí)內(nèi)容，并在實(shí)際操作中熟練運(yùn)用，使項(xiàng)目開發(fā)事半功倍。 ——魔盒信息科技有限公司 技術(shù)總監(jiān) 王寶存  網(wǎng)站開發(fā)中，產(chǎn)品經(jīng)理無論是寫文檔還是讓技術(shù)人員去閱讀文檔，無疑都是一件非常低效的事情。嘗試更高效的工具吧！Axure高保真的原型效果既能直觀體現(xiàn)出產(chǎn)品經(jīng)理的想法，又能和技術(shù)人員達(dá)成無障礙的溝通。這是一本循序漸進(jìn)地講解Axure RP使用的書，有大量和實(shí)戰(zhàn)相關(guān)的案例講解，如果您要更高效地闡述您的想法，更快速地建立產(chǎn)品原型，那么本書是您的案頭必備！ ——美樂網(wǎng)技術(shù)總監(jiān) 冷昊  非常實(shí)用，是互聯(lián)網(wǎng)產(chǎn)品經(jīng)理提高效率的必備工具書。 ——淘寶聯(lián)盟廣告策劃 黛羽  這是一本深入淺出的Axure實(shí)戰(zhàn)寶典，鮮活生動(dòng)的案例式教學(xué)，讓經(jīng)典原型制作工具的學(xué)習(xí)不僅僅是紙上談兵。幫助你簡單、全面、深刻了解Axure。 ——去哪兒網(wǎng) 產(chǎn)品總監(jiān) 高興  每個(gè)產(chǎn)品經(jīng)理都會(huì)喜歡上這本書，因?yàn)樗茏屇愕拿恳粋€(gè)奇妙想法都快速展現(xiàn)在大家面前，它能讓投資人喜歡你、讓老板喜歡你、讓設(shè)計(jì)師喜歡你、讓工程師喜歡你…… ——新浪樂居 劉博  不管是一本好書還是一款優(yōu)秀的軟件，都不可能永久稱霸。而本書，我不敢說永遠(yuǎn)不會(huì)被超越，但我敢說一定是未來三年內(nèi)最受用的互聯(lián)網(wǎng)工作者用書——記?。骸安皇侵弧?。我建議本書應(yīng)該作為互聯(lián)網(wǎng)從業(yè)人士的必讀書籍。 ——前雅虎網(wǎng)高級(jí)編輯 胡燁

編輯推薦

《網(wǎng)站藍(lán)圖:Axure RP高保真網(wǎng)頁原型制作》直入正題，用24個(gè)取自淘寶、雅虎、新浪、谷歌、蘋果等著名網(wǎng)站的網(wǎng)頁功能點(diǎn)和5個(gè)整體網(wǎng)站的綜合案例，詳細(xì)說明如何使用Axure RP一步一步制作網(wǎng)站高保真原型圖，也就是網(wǎng)站的圖紙。在功能點(diǎn)中，與時(shí)俱進(jìn)地選擇了當(dāng)前互聯(lián)網(wǎng)最流行的功能和技術(shù)，比如社交網(wǎng)絡(luò)、團(tuán)購、iPhone4、電子商務(wù)、微博、富媒體廣告等，也充分考慮了互聯(lián)網(wǎng)從業(yè)人員中各個(gè)角色的需求，比如產(chǎn)品經(jīng)理、決策者、工程師、市場(chǎng)營銷人員、廣告公司、設(shè)計(jì)師等。

圖書封面

圖書標(biāo)簽Tags

無

評(píng)論、評(píng)分、閱讀與下載

---

    網(wǎng)站藍(lán)圖 PDF格式下載

---