Metro UI在很大程度上并非只是简单的块状界面设计,而是UI元素的趋于统一,之前我们提到《缘何Windows Phone图标都喜欢套个小圈圈?》即Metro UI的统一性的一个方面,而这个方面的具体体现就在于其严格的规定了Button和icon之间的区别,而今天我们要为大家介绍的则是在Metro UI中手势操作由单纯的点击向滑动和点击联动的转变。
手势操作是智能手机逐渐脱离按键化而向触屏化转变的衍生品,并且日益成为智能手机用户惯用的操作习惯。而这其中手势操作的方式也开始由单一的点击向一连贯的滑动手势进行转变。这也使得人机交互的层次不断的被提升,其根本依旧旨在更好地满足用户的需求,响应用户操作,从而提高操作平台的用户体验,Windows Phone就是从这样细致入微的方面着手,而不是单纯的排版和图标的转变。
Metro UI的滑动手势基础
Metro UI之所以能够将单一的点击手势转变为更为丰富的滑动操作,其中最根本的原因则在于其独特的视图设计,最为主要的代表就是Metro UI的 Panorama(全景图)视图和Pivot(枢轴)视图。基于这两种视图,Metro UI才有可能逐步的在人机交互方面引导用户由单一的点击向点击与滑动联动的操作方式转变。
Panorama 全景视图则构筑了Windows Phone滑动世界的基础,这种视图的设计会引导用户尽量通过滑动去切换去导航。而这里我们可以看到所有的标题均没有之前所提到的圈圈,也就是说这些Title仅仅是显示信息所用而并非常见的Button按钮,而按钮的功能即被全景视图的滑动操作所取代。所以说全景视图是WP7特有的交互形式之一,其一般应用于app的第一层级。
Pivot(枢轴)视图可以说是Panorama 全景视图的进化版,在全景视图左右滑动的基础上加入了上下滑动,从而形成一个二维的枢轴模型。与全景视图相比,Pivot更加注重体现内容,而不是结构,所以其适用于结构关系比较简单,但是内容比较丰富的APP,当然其也适合做全景页面的下一层级使用。除此之外,枢轴视图对全景视图的Title做了重定义,全景视图中的Title并不能形成人机交互,而在枢轴试图中,Titile被重新定义为“页签”,这也是可以点击的地方,而全景图则不能。
去边缘化设计也可以当做Metro UI的滑动转变基础,之所以这样说是因为在Metro UI中,为了使得屏幕的利用率极大化,设计团队采用了一种全新的去边缘化设计,(举一个简单的例子,IMDB应用在WP7和iOS的不同)上左图即Windows Phone平台的IMDB应用,右图即IMDB在iOS平台的应用,我们可以明显的看出,Windows Phone去边缘化后,界面得到的极大的拓展,而iOS平台则因为形形色色的按钮使得屏幕利用率大幅度缩水。那么用户可能会问,没有了这些按钮,该怎么操作呢?没错,就是您想的滑动手势。
触屏点击本身存在的缺陷
触屏单击本身上即智能手机操作方式的革新,但是相对于传统的按键操作和PC平台的鼠标操作存在着先天的缺陷。但却存在极大的优化空间,而变单一的点击向滑动和点击联动以及其他手势操作转变则是一个重要的方向。
触摸屏点击形式本身单一,没有左右键点击之分。对于移动操作平台而言,虽然可以根据触摸目标和时间长短衍生出长按操作,相当于鼠标右键点击;根据触摸的时间间隔衍生出双击,相比之下简化了操作,但是少了必要的富交互效果,比如查看图标属性。此外鼠标可以精确到1像素,触摸屏点击区域推荐为29像素,而且用户在点击触摸屏目标区域时并没有真正点中,存在一定偏差。这种缺陷在按键密集的输入法上体现尤为明显,频繁的误点击会影响用户的操作流。
如果需要通过Button按钮的方式解决这些问题,势必就要求按钮不断的被放大,那反过来这样就会导致用户的屏幕被大块头的按钮所侵占,显然这是不理想的方案,也正是在这种情况下,滑动手势操作应运而生。
滑动手势更能彰显优雅
智能终端设备越来越普及,其屏幕也越做越大,在这种情况下,大屏幕与高利用率之间该如何形成一个良好的桥节点,无疑这一点需要通过更为连贯的操作手势来完成,基于Button的单一按钮即便是适应了大屏幕终端设备,但毕竟由于成本、功耗等因素决定其并不能成为主流,标准尺寸屏幕下无疑还是滑动手势将屏幕的利用率发挥到极致来得实在。
基于去边缘化设计的滑动手势除了能够代替Button按钮外,还可以将Button按钮的功能丰富化。早在塞班时代我们就可以看到部分输入法将几个字母集合到一个按钮之上,比如将2abc四个字母集合到一个按钮,通过上下左右滑动来实现不同字母的输入,同样可以避免屏幕占有率过高的现象。
滑动手势相比较点击还存在一个优越的地方,即可以很好的弥补点击的精确缺陷,这一点的渊源还是与智能手机的屏幕利用率有关。绝大部分情况下其显示内容均较为密集,多半情况下一个手指可以覆盖住多个字符,在这样的情况下点击手势对于文本的编辑和光标的插入必然显得力不从心,滑动手势则很好的优化了这些方面的用户体验。
结语:Metro UI的手势高级化的滑动手势操作并非是对点击手势进行否定,而是在其基础上对人机交互进行了更为友好的优化,加之点击操作缘由的优势发挥智能手机触屏的特色。同样的,Metro UI在这些方面的改进也不是对iOS和Android平台UI和UX的颠覆,而是为了更好的适应和满足用户的交互需求。
1 | 苹果 iPhone 4(16GB) | ¥4950 | 论坛 |
2 | 诺基亚 X7 | ¥3000 | 论坛 |
3 | 诺基亚 C5-03 | ¥1150 | 论坛 |
4 | 诺基亚 Vertu Constellati | ¥219400 | 论坛 |
5 | HTC 野火 A315c | ¥1600 | 论坛 |
6 | 诺基亚 N8 | ¥2900 | 论坛 |
7 | 诺基亚 C7 | ¥2150 | 论坛 |
8 | HTC Desire S(G12) | ¥2450 | 论坛 |
1 | HTC 野火 A315c | ¥1600 | 论坛 |
2 | HTC Desire S(G12) | ¥2450 | 论坛 |
3 | HTC Sensation(G14) | ¥3300 | 论坛 |
4 | 诺基亚 N9 64G | ¥4850 | 论坛 |
5 | 三星 i9100(16GB) | ¥4160 | 论坛 |
6 | HTC Wildfire S(G13) | ¥1700 | 论坛 |
7 | 诺基亚 N8(粉色) | ¥2650 | 论坛 |
8 | 三星 C6712 | ¥1100 | 论坛 |
1 | 三星 i9100(16GB) | ↘340 | 论坛 |
2 | 诺基亚 E7 | ↘250 | 论坛 |
3 | 诺基亚 C6 | ↘250 | 论坛 |
4 | HTC 野火 A315c | ↘200 | 论坛 |
5 | 诺基亚 X7 | ↘120 | 论坛 |
6 | HTC Sensation(G14) | ↘100 | 论坛 |
7 | HTC 惊艳 S710d | ↘100 | 论坛 |
8 | 摩托罗拉 Atrix 4G | ↘100 | 论坛 |