發表於2024-11-05
APP藍圖:Axure RP7.0移動互聯網産品原型設計 pdf epub mobi txt 電子書 下載
相關好書推薦:
移動互聯網原型設計,簡單來說,就是使用建模軟件製作基於手機或者平闆電腦的App,HTML 5網站的高保真原型。在7.0 之前的版本中,使用Axure RP進行移動互聯網的建模也是可以的。比如,對於桌麵的網站模型,製作一個1024像素寬度的頁麵就可以瞭;現在針對移動設備,製作320像素寬度的頁麵就好瞭。但是在新版本的Axure RP 7.0 中,加入瞭大量對於移動互聯網的支持,如手指滑動,拖動,橫屏、竪屏的切換,自動適應多設備等交互功能,極大地方便瞭移動互聯網原型製作。
《APP藍圖:Axure RP7.0移動互聯網産品原型設計》專注於介紹移動互聯網的案例製作,以使用微信、LinkedIn、騰訊新聞客戶端、滴滴打車、iOS 7等主流移動互聯網應用程序為案例,深入淺齣地介紹瞭移動互聯網應用程序的設計和交互精髓。並且,最終這些製作的高保真原型可以真正地在手機上進行體驗,就好像真正安裝瞭它們一樣。
《APP藍圖:Axure RP7.0移動互聯網産品原型設計》的作者也是《網站藍圖——Axure RP高保真網頁原型製作》的作者。對於讀者來說,無論是熟練使用Axure RP,還是一次接觸這個軟件,本書都是一個不錯的選擇。
★欲成其事,先利其器,對於許多互聯網從業人員(尤其是産品人員或UE設計師)來說,Axure RP無疑是你行走江湖、養傢糊口的必備兵刃,這是一本讀起來像小說的劍譜,閱讀過程很輕鬆,卻對功力提升大有助益。
——暴風影音 産品副總裁 崔天龍
★該書詳盡剖析實用案例,充分展現編者在宏觀教學上的掌控力。作為iOS開發者來說,Axure RP無疑是必備軟件之一,如何在工作中充分運用Axure RP,卻成為許多iOS開發者的心頭病。Axure RP本身並沒有教學說明,網絡上隻有一些簡單介紹,想要做到玩轉Axure RP,單靠這些是無法實現的。而現在,該書的齣現,成為iOS開發者的福音,草草翻閱便愛不釋手,不僅可幫助初學者迅速學習技巧,也可用於高級開發者的進階提升,實用性很強,圖文配閤簡明文字,清楚易學,絕對是不可錯過的iOS開發者必備建模書。
——IMOHOO INFOTECH 副總經理 王斐
★本書以各大網站的實際頁麵為例子,詳細描述瞭如何從一個想法,到低保真綫框圖,再到高保真頁麵原型的過程,並且結閤瞭項目管理中(提案、歸納、演示等)的各種實用建議。是産品經理、技術工程師、商務閤作人員、創業者必備指南。
——百度專業産品經理 閆研
★技術人員經常說:好的産品經理就和一段完美的愛情一樣,是可遇而不可求的。和呂皓月同事瞭兩傢公司,並肩作戰瞭多個項目,他一直都是我們公認的齣色産品經理,他編寫的産品文檔也是我們願意拿給新人學習的。
——混跡於互聯網的 @博升優勢王誌強
★這本書從Axure RP的曆史背景、適用範圍入手,通過跟其他圖形工具的對比充分展示瞭它在項目開發中的重要性和優越性。在對Axure RP有瞭一個初步瞭解之後,又通過圖文搭配的方式詳細具體地介紹瞭Axure RP的特色功能,同時結閤實際教學案例,使用戶能夠輕鬆、快速地掌握學習內容,並在實際操作中熟練運用,使項目開發事半功倍。
——魔盒信息科技有限公司 技術總監 王寶存
★網站開發中,産品經理無論是寫文檔還是讓技術人員去閱讀文檔,無疑都是一件非常低效的事情。嘗試更高效的工具吧!Axure高保真的原型效果既能直觀體現齣産品經理的想法,又能和技術人員達成無障礙的溝通。這是一本循序漸進地講解Axure RP使用的書,有大量和實戰相關的案例講解,如果您要更高效地闡述您的想法,更快速地建立産品原型,那麼本書是您的案頭必備!
——美樂網技術總監 冷昊
★非常實用,是互聯網産品經理提高效率的必備工具書。
——淘寶聯盟廣告策劃 黛羽
★這是一本深入淺齣的Axure實戰寶典,鮮活生動的案例式教學,讓經典原型製作工具的學習不僅僅是紙上談兵。幫助你簡單、全麵、深刻瞭解Axure。
——去哪兒網 産品總監 高興
★每個産品經理都會喜歡上這本書,因為它能讓你的每一個奇妙想法都快速展現在大傢麵前,它能讓投資人喜歡你、讓老闆喜歡你、讓設計師喜歡你、讓工程師喜歡你……
——新浪樂居 劉博
★不管是一本好書還是一款齣色的軟件,都不可能長久稱霸。而本書,我不敢說永遠不會被超過,但我敢說一定是未來三年內非常受用的互聯網工作者用書——記住:“不是之一”。我建議本書應該作為互聯網從業人士的必讀書籍。
——前雅虎網高級編輯 鬍燁
第1 章 隆重介紹 Axure RP 7.0
1.1 更多的事件支持
1.2 快速預覽
1.3 文本輸入控件的輸入提示
1.4 豐富的輸入控件內容
1.5 新的控件形狀
1.6 動態麵闆的新屬性
1.7 切割圖片
1.8 所有控件都可以被隱藏
1.9 控件可以被設置為圓角、透明、陰影
1.10 部件管理區域(Uidget Manager)取代瞭動態麵闆管理區域(Dynamic Panel Manager)
1.11 跨頁麵的撤銷功能
1.12 全新的部件類型——Repeater(循環列錶部件)
1.13 Adaptive View (自適應視野)的支持
1.14 Axure Share 發布平颱
1.15 高亮顯示所有有互動事件的部件
1.16 Sitemap 中的變量跟蹤器
1.17 界麵上的調整
1.18 預置參數的添加
第2 章Axure RP 7.0 的基本操作
2.1 界麵介紹
2.2 添加事件
2.3 添加變量
2.4 fx
第3 章 移動互聯網原型設計九原則
原則1:産品設計者要是産品的重要用戶
原則2:在每一個界麵上考慮用戶在界麵上要獲得什麼
原則3:用最閤適的方式顯示信息
原則4:考慮移動互聯網設備的特殊性
原則5:實在想不明白,就看看彆人怎麼做吧
原則6:從簡單的産品開始
原則7:將美好的情感融入産品
原則8:內容與形式同樣重要
原則9:數據分析與用戶分析同樣重要
第4 章 移動建模
4.1 場景模擬
4.2 真實模擬
第5 章常見的APP 界麵布局
5.1 頂部導航
5.2 標簽式導航
5.3 抽屜式
5.4 九宮格式
5.5 下拉列錶式
5.6 異形
5.7 分級菜單
第6 章 第三方控件庫
第7 章 iPhone 5s 橫嚮滑動效果
第8 章 應用程序的啓動過渡頁麵
第9 章 微信的縱嚮滑動效果
第10 章 騰訊新聞客戶端的橫嚮/ 縱嚮交織的拖動效果
第11 章 iOS 7 信息應用的刪除效果
第12 章 下拉緩衝效果
第13 章 圖片的單擊和雙擊效果
第14 章 滴滴打車的現在用車效果
第15 章 股票的局部縱嚮和橫嚮滾動效果
第16 章 LinkedIn 的抽屜式菜單
第17 章 iOS 的單選按鈕
第18 章 Passbook 的Tab 效果
第19 章 提醒事項
第20章 時鍾拖拽
第21章 聯係人字母導航
第22章 新手提示
第23 章 郵箱的自適應視圖
第24 章 iOS 7 的控製中心效果
第25 章 iOS 的提示
第26 章 彈齣幻燈界麵
第27 章 響應式頁麵設計
第28 章 iOS 8 的即時信息迴復
第29 章 iOS 8 的iMessage 加入照片和視頻
結束語
移動建模
本書的大部分內容和案例將是關於移動建模的。所以我們先來介紹一下如何進行移動建模。使用Axure RP 7.0 進行移動建模跟桌麵建模是很不相同的。因為如果直接使用“Preview(預覽)”,我們會發現項目在桌麵瀏覽器(如IE、Chrome或者Safari)中自動打開瞭。而我們並沒有一個移動版本的Axure RP 7.0 能夠直接在手機或者平闆電腦上運行,然後使用移動瀏覽器來預覽。所以,我們需要在桌麵上完成原型的建模工作然後讓模型“看起來”或者“感覺起來”是在移動設備上運行。為瞭做到這一點,我們使用以下兩種方式進行“模擬”的移動建模。
4.1 場景模擬
簡單來說,我們製作一個跟移動設備屏幕尺寸相同的“頁麵”區域,然後把它放到一個移動設備的背景前麵。這樣,整體看來,就好像我們在一個移動設備上運行該原型一樣。為瞭做到這一點,我們先去下載一個移動設備的“背景”。
在本書中,筆者將使用“iPhone 5s”來作為建模的背景圖片。大傢可以在本章的素材部分下載相應的圖片。建議大傢直接使用這張設計好的圖片。
在開始創作前,我們先簡單介紹一下iPhone 5s 的各個部分的屏幕尺寸。iPhone 5s 的屏幕顯示部分的尺寸是640 像素x1136 像素。每英尺的像素數是326。有些讀者可能對這些概念並不熟悉。沒有關係,我們隻需要設定一個大小閤適的背景圖片,然後在它上麵進行原型創作就好瞭。背景大,我們製作的原型尺寸也可以大;背景小,我們製作的尺寸就小。隻要二者閤適就好瞭。
iPhone 5s 的狀態欄,也就是顯示信號、電池容量的這個部分的尺寸是640 像素x40 像素。一般來說,在進行原型創作的時候,我們不能使用這個部分的顯示。所以,我們的有效創作麵積為640像素x1096像素。
但是640 像素x1096 像素這個尺寸對於普通的電腦屏幕來說,仍然太大瞭,不方便我們進行創作和演示。而在iPhone 上之所以這麼大的區域能夠在手掌大的一塊地方顯示齣來,是因為iPhone 的分辨率達到瞭視網膜級彆。所以,我們要把背景圖進行一下縮小處理,以使我們具有一個等比例縮小的,320像素x548 像素的背景。為做到這一點,我們需要使用專業的圖片軟件Photoshop 來處理這個圖片。在本章的素材中,我們已經處理好瞭一張iPhone 5s 圖片,其外圍尺寸為443 像素x900 像素,有效的顯示區域為320 像素x568 像素。也就是寬和高都縮小瞭一半,剛好適閤我們的屏幕尺寸。
下麵我們就來在Axure RP 7.0 中製作一個iPhone 5s 的工作區域。
首先,在Axure RP 7.0 中創建一個新項目,然後添加一個新的頁麵叫作“場景模擬”。
然後,我們把“iPhone-5s-Golden”這張JPG 圖片添加到Axure RP 7.0 中。我們可以直接通過文件拖拽的方式,也可以在Axure RP 7.0 中拖拽一個圖片控件到編輯區中,然後雙擊它。
選中“iPhone-5s-Golden ”這張圖片,Axure RP 7.0會發現這是一張很大的圖片,所以會詢問是否要優化這張圖片。因為我們希望保持圖片的清晰度,所以我們選擇“否”。然後Axure RP 7.0A 會提示是否要自動修改該圖片的尺寸,這個時候要選擇“是”。
我們把這張圖片放在X 100:Y 0 的位置,這個時候,整個頁麵的樣子如下圖所示。
我們之後的主要工作區域,就是如下圖所示的這個區域(青色的區域),尺寸為320 像素x548 像素。而對於整個iPhone 5s 背景,一般是不動的,它隻是一個背景;上麵的狀態欄,一般也是不需要使用的。下麵讓我們嚮這個背景圖上添加一些元素。我們先添加一個矩形控件來蓋住原先的iPhone 桌麵。該矩形控件的屬性如下錶所示。
名 稱 類 型 坐 標 尺 寸 填充色/ 邊框色
無 Rectangle X162:Y198 W320:H548 #FFFFFF/#FFFFFF
現在的頁麵的樣子如下圖所示。:
接下來,嚮頁麵中添加四個菜單選項,就像我們在很多應用中看到的一樣。每個菜單選項其實就是一個矩形控件,它們的屬性如下錶所示。
名 稱 類 型 坐 標 尺 寸 文 本 填充色/ 邊框色
rectMenu1 Rectangle X162:Y700 W80:H46 菜單1 #CCCCCC/ 無
rectMenu2 Rectangle X242:Y700 W80:H46 菜單2 #CCCCCC/ 無
rectMenu3 Rectangle X322:Y700 W80:H46 菜單3 #CCCCCC/ 無
rectMenu4 Rectangle X402:Y700 W80:H46 菜單4 #CCCCCC/ 無
設置完成後,頁麵是這樣的(見下圖)。
頁麵似乎看起來有趣瞭。我們會持續添加元素,直到頁麵看起來是這樣的(見下圖)。
看起來很像一個應用程序瞭吧?
有瞭這樣的一個背景,雖然我們還是在桌麵電腦上進行模型的創作和演示,但是看起來就像是我們在用iPhone 5s 體驗。這樣也同樣能夠以非常簡單的方式,讓所有人對原型最終的效果有一個非常直觀的瞭解。當然,觀看原型也是在桌麵瀏覽器上進行的。
使用320 像素x548 像素的創作區域的理由是,320像素的寬度,建立4 個菜單的話,如上圖中的菜單1、菜單2、菜單3、菜單4,每個菜單的寬度就是80 像素,如果是5 個菜單,每個寬度就是64 像素,寬度都很閤適。而如果對背景圖片處理不當的話,如寬度變成瞭很隨意的340 像素,那麼在製作的時候,就會齣現寬度不平均的現象。另外,還有一個理由,就是很多iPhone 應用的菜單都是4 個。
場景模擬是一種較為簡單和高效的製作移動原型的方式,通過不同的手機背景,我們就可以很容易地製作基於iPhone 5s、三星Galaxy、小米等熱門手機的應用場景的應用,而不用去真的購買和擁有這些手機。如下圖所示,我們更換圖片背景後,同樣的內容可以在三星手機上展現。
但是如果我們真的想在手機上來體驗我們的原型,就隻能使用下一節的方法瞭。
4.2 真實模擬
真實模擬的做法就是,我們僅在Axure RP 7.0 中製作一個320 像素x568 像素的頁麵區域,然後生成HTML 的頁麵,並將其發布到Axure Share 上。接下來用iPhone 5s 使用移動版本的瀏覽器打開Axure Share 上的項目地址進行瀏覽。然後將這個頁麵保存為一個主屏幕快捷方式,接下來運行這個快捷方式。這樣,我們就真的可以在移動設備上真實地體驗原型瞭。
我們接下來按照如下步驟來創建一個真實模擬的項目。
1. 製作原型頁麵
我們在本章的項目中添加一個新的頁麵叫作“真實模擬”,嚮其中添加如下錶所示的元素。
名 稱 類 型 坐 標 尺 寸 文 本 填充色/ 邊框色
rectStatus Rectangle X0:Y0 W320:H20 無 #000000/#000000
rect1 Rectangle X0:Y20 W320:H40 應用1 #999999/#999999
Label1 Label X16:Y75 W292:H288 內容內容 無/ 無
Bs1 Button Shape X16:Y392 W292:H40 按鈕1 無/ 無
Bs2 Button Shape X16:Y442 W292:H40 按鈕2 無/ 無
rectMenu1 Rectangle X0:Y522 W80:H46 菜單1 #CCCCCC/ 無
rectMenu2 Rectangle X80:Y522 W80:H46 菜單2 #CCCCCC/ 無
rectMenu3 Rectangle X160:Y522 W80:H46 菜單3 #CCCCCC/ 無
rectMenu4 Rectangle X240:Y522 W80:H46 菜單4 #CCCCCC/ 無
現在界麵如下圖所示,包含所有元素的外圍尺寸是320 像素x568 像素。
然後,我們為按鈕1 添加一個OnClick 事件,讓大傢體會一下在手機上點擊按鈕的效果。我們拖拽一個矩形控件到頁麵區域,設置屬性如下錶所示。
名 稱 類 型 坐 標 尺 寸 文 本
rectPopup Rectangle X60:Y180 W200:H100 按鈕1 被點擊瞭
將這個矩形控件設置為“隱藏”。我們希望點擊按鈕1 的時候再顯示該矩形,為此右鍵單擊這個矩
形控件,然後在彈齣菜單中選擇“Set Hidden”命令。
然後,我們為按鈕1 添加如下圖所示的事件,當該按鈕被點擊時,可以顯示矩形區域。
這個簡單的頁麵就製作好瞭。其實跟“場景模擬”中的頁麵是類似的。
2. 設置發布參數
在發布前,因為最終的原型是要用在移動端的,所以我們要控製一下生成原型的一些參數。這些參數非常重要,直接決定瞭我們的原型在移動端的體驗。這與“場景模擬”中發布並且在桌麵瀏覽器中預覽的過程是不一樣的。在場景模擬中,隻要使用默認的參數就可以瞭。
為此,我們點擊“Publish”按鈕,在下拉菜單中選擇“Preview Options”。
然後,在彈齣的窗口中選擇“Con.gure”。
接下來,就會看到如下圖所示的窗口,我們在窗口中選擇“Mobile/Device(移動設備)”。
該頁麵是用來配置在移動端生成的頁麵的一些參數和規格的。下麵我們分彆解釋每個參數的意義。
. Include Viewport Tag :添加視圖標簽。打開這個開關後,我們纔能設置如下的參數。
書還可以,入門不錯
評分不錯,已經看瞭三分之二瞭 適閤新手學習
評分非常不錯的書,就是沒有沒有光盤
評分作為産品入門書籍來看,希望能有用
評分非常好用,已多次購買!
評分可惜講的是英文版的,還要翻譯,英文不好的請慎買
評分非常好用,已多次購買!
評分 評分很好的一本工具書,學習學習!
APP藍圖:Axure RP7.0移動互聯網産品原型設計 pdf epub mobi txt 電子書 下載