責編：王亞南

隨著聯通電信試運營網絡的加入，國內4G市場的局面愈發繁榮，這也催生了終端產品的陸續推出。同時作為最早商用的移動TD-LTE網絡，自然也擁有著為數眾多的終端支持。其中不乏高端旗艦領域的機型，當然針對入門以致中端用戶，酷派都有相應的產品推出，除了前面發布的幾款低于千元價位的入門產品之外，這里帶來的是硬件規格更上一層次的中端產品酷派8732。

千元雙卡4G機 智尚白酷派8732全面評測

酷派8732正面采用一塊5.5英寸顯示屏，分辨率為1280*720像素，顯示效果中規中矩。在核心方面搭載了一顆主頻為1.2GHz的高通驍龍MSM8926四核處理器，以及1GBRAM+8GB ROM。同時該機設有一枚1300萬像素后置攝像頭予以沒200萬像素前置鏡頭，并配備LED補光燈，支持最大4128*3096分辨率照片拍攝。酷派8732為雙卡雙待，并支持移動4G網絡。該機擁有一塊2500毫安時電池。

酷派8732

編織紋理后殼設計

正面是酷派手機今年一貫的設計風格，作為一家并不以設計見長的公司，而且“8732”而不是“大觀4”這樣一個無法讓人一下記住的代號也注定了這款產品并不會在設計上太出格。

不過作為一款普通手機來說，酷派8732還是能夠滿足正常用途的；正面通體白色的面板內嵌5.5英寸的720p大屏，這在如今來說非常常見；不過酷派8732采用的屏幕素質還是非常不錯，具備90%的色彩飽和度以及高達900:1的對比度，可視角度也令人滿意。

此外酷派8732的背部并沒有采用太過俗套的光面處理，而是在塑料外殼表面做了編織紋理效果，拿在手上具備不錯的磨砂手感，而且也無法留下指紋，使得整機看起來非常整潔干凈。

背部中間的位置設計有1300萬像素主攝像頭以及較大顆單LED閃光燈，頂部則留下了降噪麥克風的開孔；底部的移動4G標志著這也是一款千元級別的4G機型。另外酷派8732還在機身周圍裝飾了一圈金色的細窄邊框裝飾條。

酷派8732采用雙卡雙待設計，支持主卡通話過程中副卡來電也可接聽的雙通功能；4G語音方面則采用SG-LTE技術，可以滿足數據上網以及語音業務的同時工作，提供5模13頻全網絡的支持。

蛻變 CoolLife UI 5.5

不同于手機本身的普通設計，酷派8732所采用的Coollife從去年底開始改變還是很大的，特別是到目前的5.5版本已經一改往日的風格，變得更加迎合時下流行的多彩及扁平化風格。不過無論是圖標、文件夾設計等等都有些MIUI的影子。

酷派8732的Coollife UI 5.5也為通知中心加入了毛玻璃的設計，兼具功能性與美觀的考慮；另外該UI當中比較值得稱贊的就在于桌面不同主屏之間的動態插件，無論是音樂播放器、應用商店還是新聞中心等小窗口的設計都大有改觀。

另外酷派Coollife深諳國內用戶對于個性化的強烈需求，“酷秀”當中提供的定制內容也堪稱豐富；從整體的系統主題、到壁紙、鎖屏、系統字體以及局部系統級APP的配色方案等等，不一而足。而使用起來也是基本能夠一鍵搞定的，比如更換字體就不需要任何重啟等操作，下載完字體的ttf文件就可以直接更換。

接下來讓我們一起來對比一下三款產品的多媒體表現。

1080p格式視頻測試結果

1300萬像素攝像頭樣張表現

拍照上，酷派8732采用了主流級別的1300萬像素的后置攝像頭，而功能上則跟擁有Coollife UI 5.5的機型一樣擁有豐富的拍照模式，例如：畫中畫、軌跡拍照、弱光拍照、美容拍照、留聲拍照、背景移除等功能。

直接來看樣張表現，由于拍攝地天氣不佳，因此可著重對比室內樣張表現。

焦距:4mm 光圈:f/2.0 ISO感光度:100

焦距:4mm 光圈:f/2.0 ISO感光度:100

焦距:4mm 光圈:f/2.0 ISO感光度:100

焦距:4mm 光圈:f/2.0 ISO感光度:100

室外的糟糕天氣還是對酷派8732的測光表現有一定程度的影響，大光比條件下畫面明暗對比強烈，細節確實比較嚴重；光照充分的條件下這樣的情況應該有所改觀。而在室內條件下，酷派8732的曝光表現還是可以令人滿意的，畫面對比度仍然略高，部分樣張白平衡略有偏差。

驍龍400處理器平臺簡介

酷派8732也不出所料的采用了千元4G機廣泛采用的驍龍400平臺，驍龍400系列是屬于高通移動芯片解決方案的中端級別產品，其有雙核、四核兩種核心數量版本，雙核版本有1.7GHz主頻Krait 300 CPU和1.2GHz主頻Krait 200 CPU兩種核心架構，四核版本為最高1.6GHz主頻ARM Cortex-A7 CPU核心架構。

型號包括有8028、 8228、 8628、 8928、 8926、 8030AB、8226、8230、8230AB、8626、8630、8630AB、8930、8930AB多種。

其中型號MSM8x26為2012年底發布，采用四核Cortex-A7微架構，最高主頻為1.2GHz（后升級至1.6GHz），被Moto G、中興紅牛V5以及諸多已經誕生的千元4G手機所采用。

CPU-Z是電腦端一款家喻戶曉的檢測軟件，該軟件主要能夠檢測到CPU的名稱、代號、核心電壓、工藝、緩存、總線速度、插槽類型等等信息，之后又加入了對主板、內存、顯卡等信息檢測功能，是電腦端一款非常全面的硬件檢測軟件，能夠令用戶清楚的了解到自己電腦的硬件情況。

超級兔子系統評測AnTuTu Benchmark是一個專門給Android系統的手機、平板電腦硬件跑分的軟件，它能一鍵運行完整測試項目，通過內存性能、CPU整數性能，CPU浮點性能、2D、3D繪圖性能、數據庫I/O、SD卡讀、寫速度等多項性能測試，并對手機的整體和單項硬件性能做出評分。同時上傳分數并查看該設備在世界的排名。

Vellamo是由Qualcomm（高通公司）開發的一個基準測試應用（類似于Neocore），它可以讓你對手機瀏覽器的性能及穩定性進行測試，包括像Java腳本性能、渲染、聯網和用戶界面等。該工具的結果同樣包括多個子項，但我們只取總成績，分數越高則表明手機對瀏覽器的優化程度越高，網頁瀏覽體驗更好。

Vellamo作為一種手機網頁標尺工具，如今已擴展至包括兩個主要模塊。HTML5模塊可用來評估移動網頁瀏覽器性能，而Metal模塊可對移動處理器的CPU子系統性能進行測量。測試套件點擊即用，方便快捷，分模塊進行管理，Vellamo可對滾動縮放，3D圖形，視頻性能，內存讀寫，帶寬峰值性能等諸多方面進行評估。

評測總結：

與今年酷派推出的眾多機型一樣，酷派8732并沒有旗艦產品線那樣出彩的特點以及性能，總體印象只有均衡二字；比較值得稱贊的地方在于后殼的設計，雖然材質并沒有多高大上但是手感尚可；CoolLife UI的美觀程度也相比一年前大有改觀；驍龍400尚能滿足普通用戶的性能需求。整機的賣點還是偏向于大屏以及4G網絡的支持，對于想要平價享用4G的用戶來說是個不錯的選擇。

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

開始正文之前，請大家站在開發的角度，先了解一個基礎概念：移動端開發目前會有兩種常用方式，即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 協議

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
 <circle cx="200" cy="100" r="100" stroke="#afeedd"
 stroke-width="5" fill="#f0ddff" />
 </svg>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
 <rect x="50" y="100" width="300" height="150"
 style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
 </svg>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#B4EEB4;stroke:#DB7093 ;stroke-width:3;fill-rule:nonzero;"/>
 </svg>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
 <filter id="keai" x="0" y="0">
 <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
 </filter>
 </defs>
 <rect width="150" height="100" stroke="red" stroke-width="5"
 fill="#7EC0EE" filter="url(#keai)" />
 </svg>
</body>
</html>

<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <defs>
 <filter id="myImg" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
 <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
 <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 </filter>
 </defs>
 <rect width="200" height="200" stroke="#90EE90" stroke-width="5" fill="#FFEFDB" filter="url(#myImg)" />
 </svg>
</body>

<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <defs>
 <linearGradient id="yuan" x1="0%" y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(238,210,238);stop-opacity:1" />
 <stop offset="100%" style="stop-color:rgb(255,250,205);stop-opacity:1" />
 </linearGradient>
 </defs>
 <ellipse cx="200" cy="200" rx="150" ry="80" fill="url(#yuan)" />
 </svg>
</body>