整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
onic是開源的移動應用開發(fā)框架，便于構(gòu)建高質(zhì)量的本地和網(wǎng)絡技術(shù)先進的web應用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進行改進。只需要會一點前端知識就能玩轉(zhuǎn)Ionic。
Ionic的應用程序創(chuàng)建開發(fā)主要通過Ionic命令行實用工具(“CLI—命令行界面”)，并使用cordova構(gòu)建和部署本地應用。建立Ionic項目，您需要安裝最新版本的CLI和cordova。在你這樣做之前，你需要一個node.js的最新版本。這些在我之前的文章有安裝教程。
官網(wǎng)地址：
http://ionicframework.com/
版本更新說明：
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
學習ionic需要了解的知識：
HTML5
CSS3
TypeScript（JavaScript）
Angular2+
下面是一些組件的示例，不同系統(tǒng)有不同的樣式，下面展示iOS上的。
動作表單-Action Sheets
時間選擇器-DateTime
浮動的按鈕-Floating Action Buttons
分割按鈕-Segment
Inputs-輸入框
表格布局-Grid
小芯片-Chip
彈窗對話框1-Alert
彈窗對話框2-Popover
想要查看更多的ionic組件示例，可以在App Store和Google Play下載Ionic2Components應用，該APP即為官方所有組件的展示。
組件在線演示地址：
http://ionicframework.com/docs/api/
組件只能作用在用戶與界面交互上，想要調(diào)用原生設(shè)備功能就需要cordova，他提供了一組設(shè)備相關(guān)的API，通過這組API，移動應用能夠以JavaScript訪問原生的設(shè)備功能，如攝像頭、麥克風、GPS等。在應用商店下載Ionic Native即可體驗部分插件。
離子原生包裝插件：
http://ionicframework.com/docs/native/
通過以上組件配合使用，即使只懂css3一點皮毛也能做出一個漂亮簡單的HTML5 APP，想要了解更多ionic，可以關(guān)注我或者在官網(wǎng)查看最新消息。
近接了個需求，要求長按某個標簽顯示刪除一個懸浮的刪除按鈕。這個需求其實在app上很常見，但是在移動端h5中，我們沒有長按的事件，所以就需要自己模擬這個事件了。
大概效果如下：
設(shè)計思路：
由此我們可以實現(xiàn)模擬的長按事件了。
上代碼
請把重點放在JS上，這里貼出來完整的代碼是為了方便大家看個仔細，代碼可以拷貝直接看效果
css中大部分只是做了樣式的美化，還有一開始讓刪除按鈕隱藏起來
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./longpress.css" /> </head> <body> <div class="container"> <div class="label" id="label">長按我</div> <div class="delete_btn">刪除</div> </div> <script src="./longpress.js"></script> </body> </html>
JS
let timer = null
let startTime = ''
let endTime = ''
const label = document.querySelector('.label')
const deleteBtn = document.querySelector('.delete_btn')
label.addEventListener('touchstart', function () {
startTime = +new Date()
timer = setTimeout(function () {
deleteBtn.style.display = 'block'
}, 700)
})
label.addEventListener('touchend', function () {
endTime = +new Date()
clearTimeout(timer)
if (endTime - startTime < 700) {
// 處理點擊事件
label.classList.add('selected')
}
})
CSS
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.label {
display: inline-block;
box-sizing: border-box;
width: 105px;
height: 32px;
line-height: 32px;
background-color: #F2F2F2;
color: #5F5F5F;
text-align: center;
border-radius: 3px;
font-size: 14px;
}
.label.selected {
background-color: #4180cc;
color: white;
}
.delete_btn {
display: none;
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) translateY(-100%);
color: white;
padding: 10px 16px;
background-color: rgba(0, 0, 0, .7);
border-radius: 6px;
line-height: 1;
white-space: nowrap;
font-size: 12px;
}
.delete_btn::after {
content: '';
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, .7) transparent transparent transparent;
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
}
ps: touchstart和touchend只有在移動端設(shè)備上才有用，如果要看代碼示例的話請:
即點擊如下圖:
交互這個概念我們經(jīng)常提及，是指以反映系統(tǒng)狀態(tài)或者幫助用戶防錯的方式給予用戶反饋。因此，頁面跳轉(zhuǎn)方式也屬于微交互的范疇。筆者為我們講述了常見的幾種頁面跳轉(zhuǎn)方式，以及使用原因。
開始正文之前，請大家站在開發(fā)的角度，先了解一個基礎(chǔ)概念：移動端開發(fā)目前會有兩種常用方式，即Native App與Web App，也就是我們通常提到的“原生頁面與H5頁面”。
原生頁面：使用原生系統(tǒng)內(nèi)核開發(fā)，直接在系統(tǒng)上操作。
優(yōu)點：可靈活實現(xiàn)多種交互與視覺設(shè)置；響應速度快用戶不會有跳出感；需要調(diào)用相機或指紋功能等機能操作時，原生有其不可替代性；便于維護用戶數(shù)據(jù)和粘度等。
缺點： iOS迭代周期嚴重受限（提交官方應用商店審核）；Android兼容性差；用戶使用成本相對高（這也是推出小程序的初衷之一）；開發(fā)成本相對高等。
H5頁面：HTML5的簡稱，它是一種高級網(wǎng)頁標準。
優(yōu)點：迭代速度快；兼容性強；易于傳播且使用成本低；開發(fā)成本低等。
缺點：受限于屏幕及瀏覽器尺寸，單屏展示空間有限；通過遠程服務器獲取數(shù)據(jù)，頁面響應耗時長；無法滿足個性化的交互設(shè)置等。
今天討論的主題是移動端APP中原生頁面的跳轉(zhuǎn)方式。
從交互角度定義這個概念：“在當前頁面，觸發(fā)某個交互動作之后，頁面之間是如何轉(zhuǎn)換的”。
需要明確的是：自然的跳轉(zhuǎn)與承接方式、整個應用內(nèi)類似場景的跳轉(zhuǎn)一致性，既可以幫助用戶更好的建立對產(chǎn)品的認知，也有利于降低用戶的使用成本。
一個應用內(nèi)可能包含有多種不同的跳轉(zhuǎn)方式，設(shè)計師在設(shè)計考量時需要把握好兩點：
可以細分為兩種具體的跳轉(zhuǎn)方式：左右平移和覆蓋平移。
（1）目前絕大多數(shù)應用，頁面在水平方向切換，采用“左右平移和覆蓋平移結(jié)合的方式”。
下圖示例：淘寶APP，由列表頁進入詳情頁的頁面轉(zhuǎn)換。仔細觀察會發(fā)現(xiàn)頁面跳轉(zhuǎn)過程中：背景頁面在水平方向只移動了部分距離，之后被新頁面覆蓋替換。
（2）也有部分應用，頁面跳轉(zhuǎn)主要方式是：完全的覆蓋平移。
下圖示例：網(wǎng)易嚴選APP，商品列表展示頁面跳轉(zhuǎn)至商品詳情頁的過程中，背景頁面并未在水平方向移動，新頁面滑入后覆蓋在背景頁面之上。
（1）如果跳轉(zhuǎn)前后的頁面存在比較緊密的強關(guān)聯(lián)性，不想讓用戶感知到前后頁面有明顯的隔離感。適合采用“當前頁面給出浮層展示新頁面”的方式。
下圖示例：輕芒雜志APP，在文章詳情頁查看本篇文章的全部評論時，文章詳情頁以遮蓋浮層的形式展示用戶的全部評論。
（2）若用戶在未跳轉(zhuǎn)前的頁面執(zhí)行了某個操作，觸發(fā)的新頁面目的是執(zhí)行重要且臨時性的操作，適合采用“在未跳轉(zhuǎn)前的頁面，從下至上彈出新頁面，且完全遮蓋”。
下圖示例：印象筆記APP，創(chuàng)建是工具類應用的核心功能，若未完成新建筆記，則無法查看其他頁面。
這種頁面轉(zhuǎn)換方式類似于Material design的懸浮按鈕，點擊后由一個點放大到覆蓋原有頁面，在新頁面點擊關(guān)閉，頁面縮小恢復至前一個頁面的默認狀態(tài)。這句話解釋起來有點繞口，以下圖微信APP的浮窗功能示例說明：
這種方式是在原有頁面上漸變出現(xiàn)或消失，不存在某個方向的移動，使界面操作輕量化，為用戶建立一種緩壓的心智。
下圖示例：騰訊視頻APP，在首頁點擊導航欄右側(cè)“更多分類”按鈕，全部頻道頁面在首頁之上漸變出現(xiàn)，點擊全部頻道頁面的關(guān)閉按鈕，頁面漸變消失。
在一些讀書類、電子雜志、電子報刊等移動應用中，瀏覽翻頁可以設(shè)置為模仿現(xiàn)實生活中紙張翻頁的效果。
如下圖示例：掌閱APP，閱讀書籍時頁面切換的翻頁效果。
目前很多應用中加入了操作流暢的微動效，頁面之間不再是直觀的某個方向滑動，而是使用動效引導用戶的視線聚焦。使用動效的目的是錦上添花，在應用滿足可用性和易用性的條件下，巧妙使用微交互中的動效，既可以無形中更好的引導用戶操作，又可以給用戶帶來愉悅的使用體驗。
下圖示例：最美應用APP頁面切換的動效。
文章結(jié)合案例闡述目前移動應用中，原生頁面之間幾種常用的跳轉(zhuǎn)方式，并嘗試簡要說明使用的原因。很多應用會綜合上面舉例的多種跳轉(zhuǎn)方式，判斷使用的頁面跳轉(zhuǎn)方式是否恰當，要綜合考量具體的跳轉(zhuǎn)場景、以及整個應用規(guī)范的一致性。
未來隨著折疊屏的普及、人工智能技術(shù)與場景的完善，移動應用頁面之間的跳轉(zhuǎn)方式也將不斷迎來新的變化，例如：目前部分應用的3D/VR/AR技術(shù)的落地。需要設(shè)計師既能在現(xiàn)有資源和技術(shù)的框架下提出高效方案，又能不斷探索突破應對未來的變化。
作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）
本文由 @Viksea 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
