责编：王亚南

随着联通电信试运营网络的加入，国内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>