移動互聯(lián)網(wǎng)原型設(shè)計，簡單來說，就是使用建模軟件制作基于手機或者平板電腦的App，HTML 5網(wǎng)站的高保真原型。在7.0 之前的版本中，使用Axure RP進(jìn)行移動互聯(lián)網(wǎng)的建模也是可以的。比如，對于桌面的網(wǎng)站模型，制作一個1024像素寬度的頁面就可以了；現(xiàn)在針對移動設(shè)備，制作320像素寬度的頁面就好了。但是在新版本的Axure RP 7.0 中，加入了大量對于移動互聯(lián)網(wǎng)的支持，如手指滑動，拖動，橫屏、豎屏的切換，自動適應(yīng)多設(shè)備等交互功能，極大地方便了移動互聯(lián)網(wǎng)原型制作。 　　《APP藍(lán)圖：Axure RP7.0移動互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計》專注于介紹移動互聯(lián)網(wǎng)的案例制作，以使用微信、LinkedIn、騰訊新聞客戶端、滴滴打車、iOS 7等主流移動互聯(lián)網(wǎng)應(yīng)用程序為案例，深入淺出地介紹了移動互聯(lián)網(wǎng)應(yīng)用程序的設(shè)計和交互精髓。并且，最終這些制作的高保真原型可以真正地在手機上進(jìn)行體驗，就好像真正安裝了它們一樣。 　　《APP藍(lán)圖：Axure RP7.0移動互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計》的作者也是《網(wǎng)站藍(lán)圖——Axure RP高保真網(wǎng)頁原型制作》的作者。對于讀者來說，無論是熟練使用Axure RP，還是第一次接觸這個軟件，本書都是一個不錯的選擇。

　　關(guān)于Axure

本書是《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁原型制作》的兄弟篇。在2 年后的今天，移動互聯(lián)網(wǎng)已是大勢所趨，之前在桌面網(wǎng)站產(chǎn)品上默默耕耘的人們，大多早已經(jīng)切換到了手機這個方寸之地�；�于iOS、Android的APP，以及微信開發(fā)已經(jīng)成了新的熱點。我們隨便走進(jìn)一家單杯咖啡超過30 元的咖啡店，你就會發(fā)現(xiàn)，一個人喝咖啡的是來蹭網(wǎng)的，兩個人喝咖啡是在討論移動互聯(lián)網(wǎng)產(chǎn)品，三個人喝咖啡是在討論移動互聯(lián)網(wǎng)創(chuàng)業(yè)，一堆人喝咖啡是剛聽了移動互聯(lián)網(wǎng)的講座。筆者也被移動風(fēng)暴推到了風(fēng)口，所以，寫下了這本《APP藍(lán)圖——Axure RP 7.0 移動互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計》。雖然叫《APP藍(lán)圖》，但是其中的方法可以適用于任何移動互聯(lián)網(wǎng)產(chǎn)品的原型制作。
本書全部基于Axure RP 7.0（最新版本），Axure RP 7.0 對移動原型的開發(fā)做了大量的升級工作。我們不但可以在傳統(tǒng)桌面電腦上進(jìn)行高保真原型的開發(fā)與操作，而且可以在真正的iPhone 上，就像真正安裝了一個應(yīng)用一樣的去測試一個移動應(yīng)用。你會在手機屏幕上看到這個應(yīng)用的圖標(biāo)，可以滑動、切換，就像運行一個真的APP 應(yīng)用，你可以讓所有相關(guān)人員“安裝”這個高保真應(yīng)用，當(dāng)你更新了原型之后，所有人不用二次安裝，全部都可以看到最新的反饋�，F(xiàn)在你再去見老板或者投資人訴說你的想法，只要把你的手機遞過去就可以了。
在首本書（《網(wǎng)站藍(lán)圖》）出版后的兩年間，筆者明顯體會到現(xiàn)在對于原型的需要越來越多。一個很大的原因是現(xiàn)在的互聯(lián)網(wǎng)行業(yè)已經(jīng)不是小眾和行內(nèi)人士獨享的行業(yè)，所有行業(yè)都在互聯(lián)網(wǎng)化，所以有更多的人員、資本來自于對互聯(lián)網(wǎng)不那么了解的領(lǐng)域。如何準(zhǔn)確地向不那么了解你所從事的工作的人解釋你做的事情，變成了一個大的挑戰(zhàn)。尤其是行業(yè)的混亂再加上全球化的趨勢，你會發(fā)現(xiàn)向美國和印度的同事去解釋你的想法——比如一個基于微信朋友圈分享的超級互聯(lián)網(wǎng)創(chuàng)意——變得難上加難。這個時候，高保真原型是最有效和直接的武器——發(fā)一個PPT 或者一個Email 過去，遠(yuǎn)遠(yuǎn)不如一個能直接看到效果的原型有效果。而制作原型的成本又因為Axure RP 7.0 這個卓越的工具而進(jìn)一步的下跌了。說，是說不清楚的，動手做吧！
最后，對于剛?cè)牖ヂ?lián)網(wǎng)職場的，或者想進(jìn)行一些改變的讀者們，與其去學(xué)習(xí)已經(jīng)被很多人詬病的PPT 和Excel，不如好好花時間學(xué)一學(xué) Axure，你的同事和老板會立刻對你刮目相看。無論在任何地方，“特別”都是一個特別的優(yōu)點。
呂皓月

前.言

建模，又常被稱為畫線框圖、mockup、原型圖、demo，其主要用途是在正式進(jìn)行設(shè)計和開發(fā)之前，通過一個逼真的效果圖來模擬最終的視覺效果和交互效果。
在現(xiàn)代企業(yè)當(dāng)中，尤其是互聯(lián)網(wǎng)企業(yè)，無論企業(yè)規(guī)模大小，時間都意味著金錢。開發(fā)出的產(chǎn)品不符合最初的要求，不滿足用戶期待，會白白浪費大量的人力物力。所以決策者在將產(chǎn)品推向市場之前，都希望最大程度地去了解最終的產(chǎn)品到底是什么樣子的，但是又不能投入時間真正地做出一個真實的產(chǎn)品。所以，模型就成了最好的幫手。建筑行業(yè)中的設(shè)計圖，汽車行業(yè)中的概念車，零售行業(yè)中小規(guī)模局部上市的一些實驗商品，手機行業(yè)中的工程原型機，都是建模的好例子。
本書就是要向大家介紹如何使用Axure RP 7.0 軟件制作移動互聯(lián)網(wǎng)的網(wǎng)站原型。比如，如何制作一個微信那樣的聯(lián)系人對話框，如何制作一個像iOS 里面拖動的橡皮筋效果。通過這些具體應(yīng)用的案例，讓讀者熟悉整個建模的過程，從而利用Axure RP 7.0 這個神奇的工具，將自己的想法轉(zhuǎn)化成可以向別人介紹的逼真的原型。然后通過這個原型，獲得企業(yè)內(nèi)部的資源支持或項目主導(dǎo)者的認(rèn)可，確認(rèn)討論的需求，甚至獲得潛在投資人的支持，把握一個機會。
如果大家對傳統(tǒng)的互聯(lián)網(wǎng)建模有興趣，可以參考筆者的另外一本書《網(wǎng)站藍(lán)圖——Axure RP高保真網(wǎng)頁原型制作》，也由清華大學(xué)出版社出版。在那本書中，從簡單的原型到復(fù)雜的交互，讀者可以全面了解Axure RP 的功能。在本書中，對于完全沒有使用過Axure RP 的讀者來說，可能會需要一點兒時間適應(yīng)。
在《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁原型制作》出版后，很多讀者提出了一個疑問，那就是原型到底要做得多“逼真”才算是令人滿意的？是否需要100% 的模擬真實的情況？那樣可能意味著原型的制作也要花費相當(dāng)多的時間和精力。筆者的答復(fù)是：看應(yīng)用場景。
如果你的原型就是用來跟你熟識的一些產(chǎn)品經(jīng)理和工程師進(jìn)行溝通交流，那么也許一個非常簡單的用于示意的原型圖就足夠了。因為你們彼此了解，很多的溝通可以通過語言和默契來完成，甚至不需要原型。
如果你的原型是用來跟上司提案用的，那么就要做相對詳細(xì)一些，尤其是涉及用戶交互和流程的部分。要讓他們清楚了解，你這個頁面是做什么的？怎么用？如何展現(xiàn)每個細(xì)節(jié)？尤其是在產(chǎn)品立項或者階段性審核的時候，做得越詳細(xì)，證明準(zhǔn)備得越充分，也就越容易面對質(zhì)疑，最終獲得認(rèn)可。注意，“細(xì)節(jié)決定成敗”這句話，其實應(yīng)該是“關(guān)鍵的細(xì)節(jié)決定成敗”，并非所有細(xì)節(jié)都要在模型階段進(jìn)行展現(xiàn)。
如果你的原型是給客戶提案用的，那么這個時候要盡可能的詳細(xì)。因為你希望客戶能夠說一句：“這就是我想要的，就照著這個去做就可以了�！庇辛丝蛻舻拇_認(rèn)，你才能放心地去制作和開發(fā)，才不會在最后面對客戶的一句：“這不是我們開始說的啊？”既然客戶是消費者，

那么就一定要盡量讓他們在開始階段就了解到自己買了什么東西。筆者強烈建議在進(jìn)行互聯(lián)網(wǎng)開發(fā)工作的時候，能夠在合同之外附上客戶確認(rèn)的高保真原型圖，以給項目的最終審批設(shè)定一個雙方共同認(rèn)可的標(biāo)桿，避免損失和誤解。
最后，最重要的一點，也是建議：如果你自己做原型的時候都覺得做得太過復(fù)雜，想不清楚，那么也就到了適可而止的時候了。畢竟，原型只是表達(dá)方式之一，你可以用文字、視頻、面對面的交流、比喻、類比，甚至是采用與另外一個網(wǎng)站來直接做對比的方式來把你的想法說清楚。很多偉大的創(chuàng)意和想法不是用PPT 表達(dá)的，那么很多精彩的設(shè)計自然也可以不靠原型來展現(xiàn)。
在《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁原型制作》這本書中，筆者確實提供了一些比較復(fù)雜的案例，大量的交互和變量的使用。其實這不是非常必要的。筆者的目的是讓用戶了解Axure RP 的一些復(fù)雜的功能和對于復(fù)雜項目的把握，而并非讓大家學(xué)會了Axure RP 這個工具而陷于另外一個制作原型的黑洞。
下面讓我們快一點兒開始使用強大的最新版本的Axure RP 7.0 吧。
作者：呂皓月（阿睡）

第1章 
Axure基礎(chǔ)交互 
024 1.1 歡迎界面 
024 1.1.1 Axure的文件格式 
025 1.1.2 團(tuán)隊項目 
025 1.1.3 工作環(huán)境 
026 1.1.4 自定義工作區(qū) 
026 1.2 站點地圖 
026 1.3 部件概述 
027 1.3.1 部件詳解 
047 1.3.2 部件操作 
051 1.3.3 頁面樣式 
054 1.4 交互基礎(chǔ) 
055 1.4.1 事件（Events） 
058 1.4.2 用例（Cases） 
060 1.4.3 動作（Actions） 
062 1.4.4 交互基礎(chǔ)案例 
066 1.5 總結(jié) 
第2章 
母版詳解 
068 2.1 母版基礎(chǔ) 
068 2.1.1 創(chuàng)建母版的兩種方法 
068 2.1.2 使用母版 
069 2.1.3 母版的行為特性（Master Behaviors） 
第3章 
動態(tài)面板高級應(yīng)用 
074 3.1 動態(tài)面板事件 
074 3.1.1 狀態(tài)改變時（OnPanelStateChange） 
074 3.1.2 拖動時（OnSwipe） 
074 3.1.3 滾動時（OnScroll） 
074 3.1.4 改變大小時（OnResize） 
074 3.1.5 載入時（OnLoad） 
075 3.2 拖放事件 
075 3.3 動態(tài)面板案例 
076 3.3.1 燈箱效果 
078 3.3.2 自動圖片輪播 
第4章 
流程圖 
080 4.1 流程圖概述 
080 4.2 創(chuàng)建流程圖 
080 4.2.1 流程圖形狀 
081 4.2.2 連接模式 
081 4.2.3 標(biāo)記頁面為流程圖 
081 4.2.4 連接線 
082 4.3 添加參照頁 
082 4.4 生成流程圖 
課前準(zhǔn)備知識 
070 2.2 自定義事件 
070 2.2.1 自定義事件概述 
071 2.2.2 創(chuàng)建和使用自定義事件 
071 2.3 母版使用案例 
第5 章 
自定義部件庫 
084 5.1 自定義部件庫概述 
084 5.2 加載和創(chuàng)建自定義部件庫 
085 5.2.1 添加注釋和交互 
085 5.2.2 組織部件庫到文件夾 
085 5.2.3 使用自定義樣式 
086 5.2.4 編輯自定義部件屬性 
086 5.2.5 保留角部第7 章 
團(tuán)隊項目 
120 7.1 團(tuán)隊項目概述 
122 7.2 創(chuàng)建團(tuán)隊項目 
123 7.3 團(tuán)隊項目環(huán)境和本地副本 
123 7.4 獲取并打開已有團(tuán)隊項目 
124 7.5 使用團(tuán)隊項目 
第8 章 
AxShare 
130 8.1 Axshare 基礎(chǔ) 
130 8.1.1 Axshare 概述 
131 8.2 AxShare 生成原型 
131 8.2.1 上傳原型到AxShare 
132 8.2.2 管理項目 
133 8.2.3 討論 
133 8.2.4 插件 
134 8.2.5 漂亮URL 
135 8.2.6 重定向 
136 8.2.7 如何給原型添加域名 
第6 章 
高級交互 
088 6.1 條件邏輯（Condition Logic） 
088 6.1.1 條件邏輯概述 
089 6.1.2 交互和條件邏輯 
091 6.1.3 多條件用例 
092 6.1.4 條件邏輯案例 
096 6.2 設(shè)置部件值 
097 6.2.1 設(shè)置文本（Set Text） 
098 6.2.2 設(shè)置圖像（Set Image） 
099 6.2.3 設(shè)置選擇/ 選中（Set Selected/Checked） 
099 6.2.4 設(shè)置選定的列表項（Set Select List Option） 
100 6.3 變量 
100 6.3.1 變量概述 
101 6.3.2 創(chuàng)建和設(shè)置變量值 
101 6.3.3 在動作中設(shè)置變量值 
103 6.3.4 使用變量值 
108 6.4 函數(shù)（Functions） 
108 6.4.1 函數(shù)列表 
113 6.4.2 創(chuàng)建數(shù)學(xué)表達(dá)式 
113 6.4.3 創(chuàng)建字符串表達(dá)式 
114 6.5 案例 
114 6.5.1 賬單四舍五入 
115 6.5.2 全局變量在不同頁面間傳遞與動態(tài)面板交互第9章 
自適應(yīng)視圖 
138 9.1 自適應(yīng)視圖概述 
138 9.2 自適應(yīng)設(shè)計與響應(yīng)式設(shè)計 
139 9.3 創(chuàng)建和設(shè)置自適應(yīng)視圖 
139 9.4 編輯自適應(yīng)視圖 
140 9.4.1 修改自適應(yīng)視圖 
140 9.4.2 繼承 
141 9.4.3 改變樣式怎樣影響視圖 
141 9.4.4 在視圖中添加或刪除部件 
141 9.4.5 未入選部件 
142 9.4.6 添加未入選部件 
142 9.4.7 完全刪除部件 
1429.4.8 自適應(yīng)視圖的局限性 
142 9.5 案例：制作簡單的自適應(yīng)視圖 
第10章 
中繼器部件的高級應(yīng)用 
146 10.1 排序數(shù)據(jù) 
146 10.1.1 新增排序（Add Sort ） 
146 10.1.2 移除排序（Remove Sort） 
147 10.2 過濾數(shù)據(jù) 
147 10.2.1 新增過濾器（Add Filter） 
147 10.2.2 移除過濾器（Remove Filter） 
148 10.3 分頁 
148 10.3.1 設(shè)置當(dāng)前頁（Set Current Page） 
149 10.3.2 設(shè)置每頁項數(shù)目（Set items per Page） 
149 10.4 添加/移除中繼器的項 
149 10.4.1 添加行（Add Rows）到中繼器數(shù)據(jù)集 
150 10.4.2 標(biāo)記行（Mark Rows ） 
150 10.4.3 取消標(biāo)記行（Unmark Rows） 
151 10.4.4 更新行（Update Rows） 
152 10.4.5 刪除行 （Delete Rows ） 
第11章 
用戶界面規(guī)范文檔 
154 11.1 規(guī)范文檔概述 
155 11.2 Axure規(guī)范文檔 
156 11.3 生成器和輸出文件 
157 11.4 部件注釋 （Widget Notes） 
157 11.4.1 自定義注釋集合 
158 11.4.2 添加注釋 
158 11.4.3 復(fù)制和清除注釋 
159 11.4.4 多部件添加、編輯、刪除注釋 
159 11.5 頁面注釋（Page Notes） 
159 11.5.1 自定義頁面注釋字段 
159 11.5.2 頁面注釋和富文本 
160 11.6 生成規(guī)范文檔（規(guī)格說明書） 
161 11.6.1 配置一個或多個部件表 
161 11.6.2 配置布局 
第12 章 
APP 原型設(shè)計 
164 12.1 概述 
164 12.2 APP 原型模板 
164 12.2.1 制作iPhone APP 原型模板 
167 12.2.2 制作 Android APP 原型模板 
168 12.3 制作簡單的 APP 原型 
168 12.3.1 可滾動內(nèi)容 
170 12.3.2 滑動幻燈 
174 12.4 在移動設(shè)備中預(yù)覽原型 
174 在iPhone 中預(yù)覽原型 
177 12.5 APP 原型的尺寸設(shè)計 
177 12.5.1 viewport 概述 
177 12.5.2 CSS 中的px 與移動設(shè)備中的px 
第13 章 
綜合案例 
181 13.1 使用Axure 制作 im.qq.com 網(wǎng)頁效果 
181 13.1.1 頂部導(dǎo)航欄 
195 13.1.2 首頁幻燈輪播 
203 13.1.3 圖片移動 
208 13.1.4 下載頁面 
218 13.2 大眾點評網(wǎng) 
218 13.2.1 大眾點評首頁全局導(dǎo)航 
225 13.2.2 大眾點評會員注冊 
238 13.3 網(wǎng)易云課堂 
238 13.3.1 云課堂首頁頂部菜單跟隨效果 
245 13.3.2 云課堂首頁圖片縮放效果 
附錄A 
APP 原型尺寸速查表 
附錄B 
Axure RP7 部件操作快捷鍵 
光盤目錄 
01 新方法實現(xiàn)跳轉(zhuǎn)回登錄前頁面 
02 Gmail 進(jìn)度條加載效果 
03 使用Axure 制作數(shù)獨解謎小游戲 
04 雅虎首頁全屏展開廣告 
05 淘寶網(wǎng)手機充值效果 
06 大眾點評網(wǎng)打分效果 
07 百度搜索提示效果 
08 跑馬燈文字鏈 
09 鍵盤觸發(fā)快捷鍵效果 
10 淘寶首頁幻燈 
11 凡客網(wǎng)的全局導(dǎo)航 
12 新浪微博的圖片與視頻 
13 歐美系視差效果 
14 引用任意頁面的任意部分和攜程酒店地址選擇 
15 圖片動態(tài)放大縮小