APP藍(lán)圖:Axure RP7.0移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)
定 價(jià):69 元
- 作者:呂皓月編著
- 出版時(shí)間:2015/2/1
- ISBN:9787302385622
- 出 版 社:清華大學(xué)出版社
- 中圖法分類:TP393.092
- 頁(yè)碼:284
- 紙張:膠版紙
- 版次:1
- 開(kāi)本:16K
移動(dòng)互聯(lián)網(wǎng)原型設(shè)計(jì),簡(jiǎn)單來(lái)說(shuō),就是使用建模軟件制作基于手機(jī)或者平板電腦的App,HTML 5網(wǎng)站的高保真原型。在7.0 之前的版本中,使用Axure RP進(jìn)行移動(dòng)互聯(lián)網(wǎng)的建模也是可以的。比如,對(duì)于桌面的網(wǎng)站模型,制作一個(gè)1024像素寬度的頁(yè)面就可以了;現(xiàn)在針對(duì)移動(dòng)設(shè)備,制作320像素寬度的頁(yè)面就好了。但是在新版本的Axure RP 7.0 中,加入了大量對(duì)于移動(dòng)互聯(lián)網(wǎng)的支持,如手指滑動(dòng),拖動(dòng),橫屏、豎屏的切換,自動(dòng)適應(yīng)多設(shè)備等交互功能,極大地方便了移動(dòng)互聯(lián)網(wǎng)原型制作。
《APP藍(lán)圖:Axure RP7.0移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)》專注于介紹移動(dòng)互聯(lián)網(wǎng)的案例制作,以使用微信、LinkedIn、騰訊新聞客戶端、滴滴打車、iOS 7等主流移動(dòng)互聯(lián)網(wǎng)應(yīng)用程序?yàn)榘咐,深入淺出地介紹了移動(dòng)互聯(lián)網(wǎng)應(yīng)用程序的設(shè)計(jì)和交互精髓。并且,最終這些制作的高保真原型可以真正地在手機(jī)上進(jìn)行體驗(yàn),就好像真正安裝了它們一樣。
《APP藍(lán)圖:Axure RP7.0移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)》的作者也是《網(wǎng)站藍(lán)圖——Axure RP高保真網(wǎng)頁(yè)原型制作》的作者。對(duì)于讀者來(lái)說(shuō),無(wú)論是熟練使用Axure RP,還是第一次接觸這個(gè)軟件,本書(shū)都是一個(gè)不錯(cuò)的選擇。
關(guān)于Axure
本書(shū)是《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁(yè)原型制作》的兄弟篇。在2 年后的今天,移動(dòng)互聯(lián)網(wǎng)已是大勢(shì)所趨,之前在桌面網(wǎng)站產(chǎn)品上默默耕耘的人們,大多早已經(jīng)切換到了手機(jī)這個(gè)方寸之地。基于iOS、Android的APP,以及微信開(kāi)發(fā)已經(jīng)成了新的熱點(diǎn)。我們隨便走進(jìn)一家單杯咖啡超過(guò)30 元的咖啡店,你就會(huì)發(fā)現(xiàn),一個(gè)人喝咖啡的是來(lái)蹭網(wǎng)的,兩個(gè)人喝咖啡是在討論移動(dòng)互聯(lián)網(wǎng)產(chǎn)品,三個(gè)人喝咖啡是在討論移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè),一堆人喝咖啡是剛聽(tīng)了移動(dòng)互聯(lián)網(wǎng)的講座。筆者也被移動(dòng)風(fēng)暴推到了風(fēng)口,所以,寫(xiě)下了這本《APP藍(lán)圖——Axure RP 7.0 移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)》。雖然叫《APP藍(lán)圖》,但是其中的方法可以適用于任何移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的原型制作。
本書(shū)全部基于Axure RP 7.0(最新版本),Axure RP 7.0 對(duì)移動(dòng)原型的開(kāi)發(fā)做了大量的升級(jí)工作。我們不但可以在傳統(tǒng)桌面電腦上進(jìn)行高保真原型的開(kāi)發(fā)與操作,而且可以在真正的iPhone 上,就像真正安裝了一個(gè)應(yīng)用一樣的去測(cè)試一個(gè)移動(dòng)應(yīng)用。你會(huì)在手機(jī)屏幕上看到這個(gè)應(yīng)用的圖標(biāo),可以滑動(dòng)、切換,就像運(yùn)行一個(gè)真的APP 應(yīng)用,你可以讓所有相關(guān)人員“安裝”這個(gè)高保真應(yīng)用,當(dāng)你更新了原型之后,所有人不用二次安裝,全部都可以看到最新的反饋。現(xiàn)在你再去見(jiàn)老板或者投資人訴說(shuō)你的想法,只要把你的手機(jī)遞過(guò)去就可以了。
在首本書(shū)(《網(wǎng)站藍(lán)圖》)出版后的兩年間,筆者明顯體會(huì)到現(xiàn)在對(duì)于原型的需要越來(lái)越多。一個(gè)很大的原因是現(xiàn)在的互聯(lián)網(wǎng)行業(yè)已經(jīng)不是小眾和行內(nèi)人士獨(dú)享的行業(yè),所有行業(yè)都在互聯(lián)網(wǎng)化,所以有更多的人員、資本來(lái)自于對(duì)互聯(lián)網(wǎng)不那么了解的領(lǐng)域。如何準(zhǔn)確地向不那么了解你所從事的工作的人解釋你做的事情,變成了一個(gè)大的挑戰(zhàn)。尤其是行業(yè)的混亂再加上全球化的趨勢(shì),你會(huì)發(fā)現(xiàn)向美國(guó)和印度的同事去解釋你的想法——比如一個(gè)基于微信朋友圈分享的超級(jí)互聯(lián)網(wǎng)創(chuàng)意——變得難上加難。這個(gè)時(shí)候,高保真原型是最有效和直接的武器——發(fā)一個(gè)PPT 或者一個(gè)Email 過(guò)去,遠(yuǎn)遠(yuǎn)不如一個(gè)能直接看到效果的原型有效果。而制作原型的成本又因?yàn)锳xure RP 7.0 這個(gè)卓越的工具而進(jìn)一步的下跌了。說(shuō),是說(shuō)不清楚的,動(dòng)手做吧!
最后,對(duì)于剛?cè)牖ヂ?lián)網(wǎng)職場(chǎng)的,或者想進(jìn)行一些改變的讀者們,與其去學(xué)習(xí)已經(jīng)被很多人詬病的PPT 和Excel,不如好好花時(shí)間學(xué)一學(xué) Axure,你的同事和老板會(huì)立刻對(duì)你刮目相看。無(wú)論在任何地方,“特別”都是一個(gè)特別的優(yōu)點(diǎn)。
呂皓月
前.言
建模,又常被稱為畫(huà)線框圖、mockup、原型圖、demo,其主要用途是在正式進(jìn)行設(shè)計(jì)和開(kāi)發(fā)之前,通過(guò)一個(gè)逼真的效果圖來(lái)模擬最終的視覺(jué)效果和交互效果。
在現(xiàn)代企業(yè)當(dāng)中,尤其是互聯(lián)網(wǎng)企業(yè),無(wú)論企業(yè)規(guī)模大小,時(shí)間都意味著金錢。開(kāi)發(fā)出的產(chǎn)品不符合最初的要求,不滿足用戶期待,會(huì)白白浪費(fèi)大量的人力物力。所以決策者在將產(chǎn)品推向市場(chǎng)之前,都希望最大程度地去了解最終的產(chǎn)品到底是什么樣子的,但是又不能投入時(shí)間真正地做出一個(gè)真實(shí)的產(chǎn)品。所以,模型就成了最好的幫手。建筑行業(yè)中的設(shè)計(jì)圖,汽車行業(yè)中的概念車,零售行業(yè)中小規(guī)模局部上市的一些實(shí)驗(yàn)商品,手機(jī)行業(yè)中的工程原型機(jī),都是建模的好例子。
本書(shū)就是要向大家介紹如何使用Axure RP 7.0 軟件制作移動(dòng)互聯(lián)網(wǎng)的網(wǎng)站原型。比如,如何制作一個(gè)微信那樣的聯(lián)系人對(duì)話框,如何制作一個(gè)像iOS 里面拖動(dòng)的橡皮筋效果。通過(guò)這些具體應(yīng)用的案例,讓讀者熟悉整個(gè)建模的過(guò)程,從而利用Axure RP 7.0 這個(gè)神奇的工具,將自己的想法轉(zhuǎn)化成可以向別人介紹的逼真的原型。然后通過(guò)這個(gè)原型,獲得企業(yè)內(nèi)部的資源支持或項(xiàng)目主導(dǎo)者的認(rèn)可,確認(rèn)討論的需求,甚至獲得潛在投資人的支持,把握一個(gè)機(jī)會(huì)。
如果大家對(duì)傳統(tǒng)的互聯(lián)網(wǎng)建模有興趣,可以參考筆者的另外一本書(shū)《網(wǎng)站藍(lán)圖——Axure RP高保真網(wǎng)頁(yè)原型制作》,也由清華大學(xué)出版社出版。在那本書(shū)中,從簡(jiǎn)單的原型到復(fù)雜的交互,讀者可以全面了解Axure RP 的功能。在本書(shū)中,對(duì)于完全沒(méi)有使用過(guò)Axure RP 的讀者來(lái)說(shuō),可能會(huì)需要一點(diǎn)兒時(shí)間適應(yīng)。
在《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁(yè)原型制作》出版后,很多讀者提出了一個(gè)疑問(wèn),那就是原型到底要做得多“逼真”才算是令人滿意的?是否需要100% 的模擬真實(shí)的情況?那樣可能意味著原型的制作也要花費(fèi)相當(dāng)多的時(shí)間和精力。筆者的答復(fù)是:看應(yīng)用場(chǎng)景。
如果你的原型就是用來(lái)跟你熟識(shí)的一些產(chǎn)品經(jīng)理和工程師進(jìn)行溝通交流,那么也許一個(gè)非常簡(jiǎn)單的用于示意的原型圖就足夠了。因?yàn)槟銈儽舜肆私,很多的溝通可以通過(guò)語(yǔ)言和默契來(lái)完成,甚至不需要原型。
如果你的原型是用來(lái)跟上司提案用的,那么就要做相對(duì)詳細(xì)一些,尤其是涉及用戶交互和流程的部分。要讓他們清楚了解,你這個(gè)頁(yè)面是做什么的?怎么用?如何展現(xiàn)每個(gè)細(xì)節(jié)?尤其是在產(chǎn)品立項(xiàng)或者階段性審核的時(shí)候,做得越詳細(xì),證明準(zhǔn)備得越充分,也就越容易面對(duì)質(zhì)疑,最終獲得認(rèn)可。注意,“細(xì)節(jié)決定成敗”這句話,其實(shí)應(yīng)該是“關(guān)鍵的細(xì)節(jié)決定成敗”,并非所有細(xì)節(jié)都要在模型階段進(jìn)行展現(xiàn)。
如果你的原型是給客戶提案用的,那么這個(gè)時(shí)候要盡可能的詳細(xì)。因?yàn)槟阆M蛻裟軌蛘f(shuō)一句:“這就是我想要的,就照著這個(gè)去做就可以了。”有了客戶的確認(rèn),你才能放心地去制作和開(kāi)發(fā),才不會(huì)在最后面對(duì)客戶的一句:“這不是我們開(kāi)始說(shuō)的?”既然客戶是消費(fèi)者,
那么就一定要盡量讓他們?cè)陂_(kāi)始階段就了解到自己買了什么東西。筆者強(qiáng)烈建議在進(jìn)行互聯(lián)網(wǎng)開(kāi)發(fā)工作的時(shí)候,能夠在合同之外附上客戶確認(rèn)的高保真原型圖,以給項(xiàng)目的最終審批設(shè)定一個(gè)雙方共同認(rèn)可的標(biāo)桿,避免損失和誤解。
最后,最重要的一點(diǎn),也是建議:如果你自己做原型的時(shí)候都覺(jué)得做得太過(guò)復(fù)雜,想不清楚,那么也就到了適可而止的時(shí)候了。畢竟,原型只是表達(dá)方式之一,你可以用文字、視頻、面對(duì)面的交流、比喻、類比,甚至是采用與另外一個(gè)網(wǎng)站來(lái)直接做對(duì)比的方式來(lái)把你的想法說(shuō)清楚。很多偉大的創(chuàng)意和想法不是用PPT 表達(dá)的,那么很多精彩的設(shè)計(jì)自然也可以不靠原型來(lái)展現(xiàn)。
在《網(wǎng)站藍(lán)圖——Axure RP 高保真網(wǎng)頁(yè)原型制作》這本書(shū)中,筆者確實(shí)提供了一些比較復(fù)雜的案例,大量的交互和變量的使用。其實(shí)這不是非常必要的。筆者的目的是讓用戶了解Axure RP 的一些復(fù)雜的功能和對(duì)于復(fù)雜項(xiàng)目的把握,而并非讓大家學(xué)會(huì)了Axure RP 這個(gè)工具而陷于另外一個(gè)制作原型的黑洞。
下面讓我們快一點(diǎn)兒開(kāi)始使用強(qiáng)大的最新版本的Axure RP 7.0 吧。
作者:呂皓月(阿睡)
第1章
Axure基礎(chǔ)交互
024 1.1 歡迎界面
024 1.1.1 Axure的文件格式
025 1.1.2 團(tuán)隊(duì)項(xiàng)目
025 1.1.3 工作環(huán)境
026 1.1.4 自定義工作區(qū)
026 1.2 站點(diǎn)地圖
026 1.3 部件概述
027 1.3.1 部件詳解
047 1.3.2 部件操作
051 1.3.3 頁(yè)面樣式
054 1.4 交互基礎(chǔ)
055 1.4.1 事件(Events)
058 1.4.2 用例(Cases)
060 1.4.3 動(dòng)作(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章
動(dòng)態(tài)面板高級(jí)應(yīng)用
074 3.1 動(dòng)態(tài)面板事件
074 3.1.1 狀態(tài)改變時(shí)(OnPanelStateChange)
074 3.1.2 拖動(dòng)時(shí)(OnSwipe)
074 3.1.3 滾動(dòng)時(shí)(OnScroll)
074 3.1.4 改變大小時(shí)(OnResize)
074 3.1.5 載入時(shí)(OnLoad)
075 3.2 拖放事件
075 3.3 動(dòng)態(tài)面板案例
076 3.3.1 燈箱效果
078 3.3.2 自動(dòng)圖片輪播
第4章
流程圖
080 4.1 流程圖概述
080 4.2 創(chuàng)建流程圖
080 4.2.1 流程圖形狀
081 4.2.2 連接模式
081 4.2.3 標(biāo)記頁(yè)面為流程圖
081 4.2.4 連接線
082 4.3 添加參照頁(yè)
082 4.4 生成流程圖
課前準(zhǔn)備知識(shí)
070 2.2 自定義事件
070 2.2.1 自定義事件概述
071 2.2.2 創(chuàng)建和使用自定義事件
071 2.3 母版使用案例
第5 章
自定義部件庫(kù)
084 5.1 自定義部件庫(kù)概述
084 5.2 加載和創(chuàng)建自定義部件庫(kù)
085 5.2.1 添加注釋和交互
085 5.2.2 組織部件庫(kù)到文件夾
085 5.2.3 使用自定義樣式
086 5.2.4 編輯自定義部件屬性
086 5.2.5 保留角部第7 章
團(tuán)隊(duì)項(xiàng)目
120 7.1 團(tuán)隊(duì)項(xiàng)目概述
122 7.2 創(chuàng)建團(tuán)隊(duì)項(xiàng)目
123 7.3 團(tuán)隊(duì)項(xiàng)目環(huán)境和本地副本
123 7.4 獲取并打開(kāi)已有團(tuán)隊(duì)項(xiàng)目
124 7.5 使用團(tuán)隊(duì)項(xiàng)目
第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 管理項(xiàng)目
133 8.2.3 討論
133 8.2.4 插件
134 8.2.5 漂亮URL
135 8.2.6 重定向
136 8.2.7 如何給原型添加域名
第6 章
高級(jí)交互
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è)置選定的列表項(xiàng)(Set Select List Option)
100 6.3 變量
100 6.3.1 變量概述
101 6.3.2 創(chuàng)建和設(shè)置變量值
101 6.3.3 在動(dòng)作中設(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 全局變量在不同頁(yè)面間傳遞與動(dòng)態(tài)面板交互第9章
自適應(yīng)視圖
138 9.1 自適應(yīng)視圖概述
138 9.2 自適應(yīng)設(shè)計(jì)與響應(yīng)式設(shè)計(jì)
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 案例:制作簡(jiǎn)單的自適應(yīng)視圖
第10章
中繼器部件的高級(jí)應(yīng)用
146 10.1 排序數(shù)據(jù)
146 10.1.1 新增排序(Add Sort )
146 10.1.2 移除排序(Remove Sort)
147 10.2 過(guò)濾數(shù)據(jù)
147 10.2.1 新增過(guò)濾器(Add Filter)
147 10.2.2 移除過(guò)濾器(Remove Filter)
148 10.3 分頁(yè)
148 10.3.1 設(shè)置當(dāng)前頁(yè)(Set Current Page)
149 10.3.2 設(shè)置每頁(yè)項(xiàng)數(shù)目(Set items per Page)
149 10.4 添加/移除中繼器的項(xiàng)
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 頁(yè)面注釋(Page Notes)
159 11.5.1 自定義頁(yè)面注釋字段
159 11.5.2 頁(yè)面注釋和富文本
160 11.6 生成規(guī)范文檔(規(guī)格說(shuō)明書(shū))
161 11.6.1 配置一個(gè)或多個(gè)部件表
161 11.6.2 配置布局
第12 章
APP 原型設(shè)計(jì)
164 12.1 概述
164 12.2 APP 原型模板
164 12.2.1 制作iPhone APP 原型模板
167 12.2.2 制作 Android APP 原型模板
168 12.3 制作簡(jiǎn)單的 APP 原型
168 12.3.1 可滾動(dòng)內(nèi)容
170 12.3.2 滑動(dòng)幻燈
174 12.4 在移動(dòng)設(shè)備中預(yù)覽原型
174 在iPhone 中預(yù)覽原型
177 12.5 APP 原型的尺寸設(shè)計(jì)
177 12.5.1 viewport 概述
177 12.5.2 CSS 中的px 與移動(dòng)設(shè)備中的px
第13 章
綜合案例
181 13.1 使用Axure 制作 im.qq.com 網(wǎng)頁(yè)效果
181 13.1.1 頂部導(dǎo)航欄
195 13.1.2 首頁(yè)幻燈輪播
203 13.1.3 圖片移動(dòng)
208 13.1.4 下載頁(yè)面
218 13.2 大眾點(diǎn)評(píng)網(wǎng)
218 13.2.1 大眾點(diǎn)評(píng)首頁(yè)全局導(dǎo)航
225 13.2.2 大眾點(diǎn)評(píng)會(huì)員注冊(cè)
238 13.3 網(wǎng)易云課堂
238 13.3.1 云課堂首頁(yè)頂部菜單跟隨效果
245 13.3.2 云課堂首頁(yè)圖片縮放效果
附錄A
APP 原型尺寸速查表
附錄B
Axure RP7 部件操作快捷鍵
光盤(pán)目錄
01 新方法實(shí)現(xiàn)跳轉(zhuǎn)回登錄前頁(yè)面
02 Gmail 進(jìn)度條加載效果
03 使用Axure 制作數(shù)獨(dú)解謎小游戲
04 雅虎首頁(yè)全屏展開(kāi)廣告
05 淘寶網(wǎng)手機(jī)充值效果
06 大眾點(diǎn)評(píng)網(wǎng)打分效果
07 百度搜索提示效果
08 跑馬燈文字鏈
09 鍵盤(pán)觸發(fā)快捷鍵效果
10 淘寶首頁(yè)幻燈
11 凡客網(wǎng)的全局導(dǎo)航
12 新浪微博的圖片與視頻
13 歐美系視差效果
14 引用任意頁(yè)面的任意部分和攜程酒店地址選擇
15 圖片動(dòng)態(tài)放大縮小