交互這個概念我們經常提及，是指以反映系統狀態或者幫助用戶防錯的方式給予用戶反饋。因此，頁面跳轉方式也屬于微交互的范疇。筆者為我們講述了常見的幾種頁面跳轉方式，以及使用原因。

開始正文之前，請大家站在開發的角度，先了解一個基礎概念：移動端開發目前會有兩種常用方式，即Native App與Web App，也就是我們通常提到的“原生頁面與H5頁面”。

原生頁面：使用原生系統內核開發，直接在系統上操作。

優點：可靈活實現多種交互與視覺設置；響應速度快用戶不會有跳出感；需要調用相機或指紋功能等機能操作時，原生有其不可替代性；便于維護用戶數據和粘度等。

缺點： iOS迭代周期嚴重受限（提交官方應用商店審核）；Android兼容性差；用戶使用成本相對高（這也是推出小程序的初衷之一）；開發成本相對高等。

H5頁面：HTML5的簡稱，它是一種高級網頁標準。

優點：迭代速度快；兼容性強；易于傳播且使用成本低；開發成本低等。

缺點：受限于屏幕及瀏覽器尺寸，單屏展示空間有限；通過遠程服務器獲取數據，頁面響應耗時長；無法滿足個性化的交互設置等。

一、移動端APP頁面跳轉方式

今天討論的主題是移動端APP中原生頁面的跳轉方式。

從交互角度定義這個概念：“在當前頁面，觸發某個交互動作之后，頁面之間是如何轉換的”。

需要明確的是：自然的跳轉與承接方式、整個應用內類似場景的跳轉一致性，既可以幫助用戶更好的建立對產品的認知，也有利于降低用戶的使用成本。

一個應用內可能包含有多種不同的跳轉方式，設計師在設計考量時需要把握好兩點：

1. 區分主輔：主要的頁面跳轉方式，以及輔助型頁面跳轉方式。
2. 區分場景：明確跳轉前后頁面之間的關系。

二、常見的頁面跳轉方式

1. 水平方向跳轉

可以細分為兩種具體的跳轉方式：左右平移和覆蓋平移。

（1）目前絕大多數應用，頁面在水平方向切換，采用“左右平移和覆蓋平移結合的方式”。

下圖示例：淘寶APP，由列表頁進入詳情頁的頁面轉換。仔細觀察會發現頁面跳轉過程中：背景頁面在水平方向只移動了部分距離，之后被新頁面覆蓋替換。

（2）也有部分應用，頁面跳轉主要方式是：完全的覆蓋平移。

下圖示例：網易嚴選APP，商品列表展示頁面跳轉至商品詳情頁的過程中，背景頁面并未在水平方向移動，新頁面滑入后覆蓋在背景頁面之上。

2. 豎直方向跳轉

（1）如果跳轉前后的頁面存在比較緊密的強關聯性，不想讓用戶感知到前后頁面有明顯的隔離感。適合采用“當前頁面給出浮層展示新頁面”的方式。

下圖示例：輕芒雜志APP，在文章詳情頁查看本篇文章的全部評論時，文章詳情頁以遮蓋浮層的形式展示用戶的全部評論。

（2）若用戶在未跳轉前的頁面執行了某個操作，觸發的新頁面目的是執行重要且臨時性的操作，適合采用“在未跳轉前的頁面，從下至上彈出新頁面，且完全遮蓋”。

下圖示例：印象筆記APP，創建是工具類應用的核心功能，若未完成新建筆記，則無法查看其他頁面。

3. 頁面收縮轉換

這種頁面轉換方式類似于Material design的懸浮按鈕，點擊后由一個點放大到覆蓋原有頁面，在新頁面點擊關閉，頁面縮小恢復至前一個頁面的默認狀態。這句話解釋起來有點繞口，以下圖微信APP的浮窗功能示例說明：

4. 頁面漸變消失/出現

這種方式是在原有頁面上漸變出現或消失，不存在某個方向的移動，使界面操作輕量化，為用戶建立一種緩壓的心智。

下圖示例：騰訊視頻APP，在首頁點擊導航欄右側“更多分類”按鈕，全部頻道頁面在首頁之上漸變出現，點擊全部頻道頁面的關閉按鈕，頁面漸變消失。

5. 翻頁效果

在一些讀書類、電子雜志、電子報刊等移動應用中，瀏覽翻頁可以設置為模仿現實生活中紙張翻頁的效果。

如下圖示例：掌閱APP，閱讀書籍時頁面切換的翻頁效果。

6. 頁面轉場動效

目前很多應用中加入了操作流暢的微動效，頁面之間不再是直觀的某個方向滑動，而是使用動效引導用戶的視線聚焦。使用動效的目的是錦上添花，在應用滿足可用性和易用性的條件下，巧妙使用微交互中的動效，既可以無形中更好的引導用戶操作，又可以給用戶帶來愉悅的使用體驗。

下圖示例：最美應用APP頁面切換的動效。

三、總結

文章結合案例闡述目前移動應用中，原生頁面之間幾種常用的跳轉方式，并嘗試簡要說明使用的原因。很多應用會綜合上面舉例的多種跳轉方式，判斷使用的頁面跳轉方式是否恰當，要綜合考量具體的跳轉場景、以及整個應用規范的一致性。

未來隨著折疊屏的普及、人工智能技術與場景的完善，移動應用頁面之間的跳轉方式也將不斷迎來新的變化，例如：目前部分應用的3D/VR/AR技術的落地。需要設計師既能在現有資源和技術的框架下提出高效方案，又能不斷探索突破應對未來的變化。

作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）

本文由 @Viksea 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

習html5從入門到精通，零基礎新手也能看懂，無論你是唱歌，畫畫的藝術生，還是學習機械專業的工科生，或者大學讀的文學學科。先了解HTML5可以實現的功能有哪兒些？

1. HTML5可以同時在多種設備上運行，這一點是其他方式都無法做到的；

2. 在互聯網中隨意被分享，并且搜索時可以及時被找到；有搜索擴展性。

3. HTML5應用可以使用交互式設計來提供最佳體驗，而不需要更改代碼。你可以從桌面到手機到平板電腦無縫進行切換，而無需重復安裝不同的應用；

4. HTML5適用于多廠商標準，建立在協議之上，是眾多公司努力的結果。

所以，只要你平時上網，你看完這篇文章之后，相信你一定能夠對html5有一個基本的認識。

有小白會問html5是做什么的？

這里極其簡單的概括：用于實現我們能夠看到的所有網站，但是不涉及到數據層面（也就是負責將一張設計好的網頁圖片（設計師的工作），用代碼實現出來，在一個地方放置個塊，給一個塊設置顏色，調整字體大小，讓圖片動起來等）。

html5的由來

不熟悉html5的人，可能會很熟悉一個2005年以前常用的詞語——網頁設計與制作。

隨著行業的發展，網站的制作越來越受到了人們的重視，社會化分工越來越明細。在2005年，“web前端開發工程師”這個詞語開始出現在各個一線城市。2008年，html5橫空出世，2009年html5這個全新的詞語在北京的一些頂尖級公司出現，2012年，逐漸的普及開來，2014年迅速發展。

1. HTML5有本地存儲的特征，基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。

2. 利用HTML5非常方便的在網頁上添加視頻和音頻，不需要很復雜的代碼，就能打造一款功能齊全的HTML5播放器。

3. CSS3的使用可以提供更多的CSS屬性，可以制作更加豐富的渲染效果。

除了以上基本知識點以外，還需要掌握：HTML5的前端技術也是必備的，其中包括：CSS、HTML、DOM、javascript、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理以及存在的各種Bug。

上面講的是HTML5主要一些特征。

html5的基本組成

html5 = html + cs+ java

html指的是結構

css指樣式

js即java，指的是行為

關于結構、樣式、行為的理解

結構——在整個網頁中有標題，有列表，有圖片等。

樣式 —— 標題文字的字體大小、顏色、字體；圖片的大小；某個塊的背景色或背景圖等。

行為——在網頁上四處飄動的廣告；圖片滾動；瀏覽淘寶時鼠標移動到商品時，放大商品的效果等。

容易弄混的概念

html5移動端的功能和應用程序。

對于蘋果手機中的應用程序，屬于ios開發，語言是oc；對于其他安卓系統的手機，需要使用java語言進行開發。html5能夠做的是移動端的網頁以及微信平臺中的移動端網頁。

前端后臺的區別

無論html5還是ios，在整個網頁開發流程當中，前端（html5）開發工程師，主要負責的是“前臺頁面制作”，“網站測試”，“修改”三個部分。

html5 與 網頁設計與制作 的區別

原有的網頁設計與制作，主要針對pc平臺，進行網頁網站的設計與制作，相對會涉及一部分設計工作，并將美工圖實現成網頁。通常使用的工具是網頁三劍客——photoshop、flash、dreamweaver。然而，行業的發展使得“網頁設計與制作”這一職業逐漸遭到了淘汰，原因主要有四：

【一】：網頁設計與網頁制作是兩個完不同的領域，一個由美感主導，另一個則需要邏輯思維主導。對于開發人員來說，如果將寶貴的精力分散到兩個不同的行業中，最后通常兩方面都是半斤八兩，沒有實質的競爭力；

【二】：網頁設計與制作，這一職業中的制作，指的是網頁的結構與樣式（即html+css），而當前網站中java已經占據了極大的比重，如果還停留在原有的結構和樣式中，發展空間會變得很小；

【三】：網頁設計與制作當中的結構實現，通常采用的是table布局；而web前端開發工程師、html5當中結構的實現，采用的是div+css方式的布局，因此，dreamweaver工具的使用也就沒有什么必要性了，取而代之的是內存占用小，開發速度快的文本類編輯器。而flash，在與html5的大戰當中戰敗，當前已經退出了移動端以及電視平臺的市場爭奪，在pc平臺也越來越少。轉言之，flash在網頁制作的領域里已經江郎才盡~原來的網頁三劍客只剩下一個ps，在前端工作的要求中，需要掌握基本的切圖即可。

【四】移動互聯網的飛速發展，也使得html5的地位迅速提升。移動設備有其特殊的開發要求，原有的網頁設計與制作，早已無法滿足開發的需要。

html5是移動互聯網前端的主流開發語言，所以說，無論做手機網站還是在手機app應用，前端的樣式都是html5開發。html5作為移動互聯網主流前端開發語言，從事html5相關開發工作，就業前景真的是一片光明。在目前還沒有一個前端的開發語言能取代html5的位置。

何成為一名優秀的程序員?一名程序員如何才能變得更加優秀?如果你想知道這兩個問題的答案，那么很幸運你看到了這篇文章。其實我不懂技術，但是我知道一個300多萬程序員都在學習的網站、都在用的App，它叫“慕課網”。

慕課網是干什么的?慕課網是“中國最大的IT實戰學習平臺”。簡單的說，慕課網是學IT、學編程的網站，程序員新手入行、職場晉升必備!那么新手小白，如何利用慕課網學習才會更有效?技術大咖們又該如何使用慕課網?一張圖告訴你打開慕課網的正確姿勢!

首先，我們結合上圖來詳細說說新手小白們如何使用慕課網：

Step 1：請輸入www.imooc.com，打開慕課網。

Step 2：請將目光鎖定頂部導航欄——“課程”、“計劃”。

普通小白同學，請選擇進入“課程”界面。選擇你要學習的技術語言，同時選擇課程難度，符合需求的課程就全部展示出來了。入門學習、知識點學習，都可以在此解決。

有明確求職需求的小白同學，請選擇“學習計劃”。通過導航欄進入“計劃”界面，web前端工程師、Android工程師、PHP工程師、Java工程師……選擇心儀職位開始學習即可。系統的路徑，讓學習更省心、更高效。

Step 3：請將目光鎖定頂部導航欄——“社區”。

在學習的過程中，小白同學們一定會遇到各種問題，這個時候，請進入“慕課社區”，在此提出問題，等待大神解答。

同時，小白們還可以在社區里與其他同學進行交流，互相促進，共同提升。

下面，我們來看看大牛們如何來使用慕課網：

Step 1：請輸入www.imooc.com，打開慕課網。

Step 2：請將目光鎖定頂部導航欄——“分享”、“社區”。

大牛的技術已經有了一定的積累，初級課程已經無法滿足你了。那么，來看看慕課網與名企的合作課程吧!通過導航欄進入“分享”界面，阿里云、懶懶交流會、百度FEX團隊、去哪兒、mongoDB……一流團隊技術分享匯，大牛趕快來取經吧!

作為一名技術大牛，如果你愛分享，那么趕快進入“慕課社區”，解答小白疑惑、分享技術文章、與其他牛人一起交流經驗!

如果你是一名超級技術大牛，可以直接忽略此圖以及若干步驟，直接來慕課網應聘講師吧!

慕課網能夠為程序員提供什么?

上萬個高質量IT視頻教程，全部免費。匯集數百位互聯網企業技術精英共同完成，內容涵蓋前端開發、PHP、Html5、Android、IOS、Swift等IT前沿技術語言。慕課網為有志于從事IT行業和IT在職技能提升的需求人群，提供更多實戰技能學習服務。