简单而不简陋﹣wp7视觉点滴

简介:
 


一直就很期待,引入了Metro设计理念的wp7的真实操作体验,现在终于如愿了。拿到测试机,首先迅速的过了一遍,第一印象就是界面简单明了,没有华丽的高光、没有跌宕的质感,真的感觉就像在公共场所看到的信息指示牌一样简洁清晰、快速、内容为主。

下面让我们从手机的第一个界面开始看起:

与众不同的解锁界面

Wp7的解锁界面是非常与众不同的。位于中间偏下位置上的时间信息是最吸引人眼球的,即利用了英文在排版设计中的优势又贯彻了一下返璞归真的视觉设计理念,将信息以一种毫无负担的展现方式给用户呈现出来。在时间信息的下面会有短信、闹钟等推送信息。最顶部自然少不了设备电量、信号等系统信息。
 


整个界面中没有我们已经习以为常的解锁提示,或者“锁”的提示,整个界面看起来更像是一幅画。但是在使用手机的时候,用户一点都不用担心不知道怎么进入待机界面。当用户手指触碰到屏幕上任何地方的时候,手机画面就会有一个模拟重物落地再弹起的拟物动画。
 


通过这样一个动画提示,相信绝大多数用户都会,尝试着往上滑动界面,那么恭喜你,你已经知道如何来进入待机画面了。显然,这样的动画提示,比任何形式的文字提示都生动、直接的多。界面简洁、干净,操作提示生动、形象且没有任何视觉负担,这就是wp7给我们带来的第一个惊喜。
当用户往上滑动画面,待机界面徐徐展现给到用户的眼前,整个过程犹如大幕拉开一般。这期间有个小细节值得我们注意,那就是解锁界面上的时间信息会随着整个画面的上升而逐渐消失。
 


在防止误操作造成的解锁问题上,wp7也考虑的非常周到。如果对解锁界面的上滑动作快速有力,即被系统识别为有效操作,会立即进入待机界面。反之,上滑动作缓慢,则需要将锁屏界面上滑至屏幕1/3处才会完成解锁。


 

简洁清晰的待机界面

完成解锁之后就能看到Wp7的待机界面了。待机界面采用了全新的内容展现和布局形式,不是千篇一律的图标也不是厚重的widget与质感的图标组合,而是采用更为抽象化的界面,大块的方块、超大的字体,让用户一目了然。
 


在应用图标的内容表现上也根据应用属性的不同,所涵盖的内容也不同。功能类应用,如电话、邮件等会以单色图标来展现功能,当有新消息或未接来电等,会在图标边上显示相应的数字;
 


信息类应用,如联系人、图片等就会以联系人照片、部分图片内容来展现。
 


从应用的图标的信息构成上来看,我们可以把每个图标分成三层来看待:最底层是背景图也可以是系统的色块,中间一层是应用的名称,最上面是推送的信息。
 


对各应用入口的编辑可以通过长按,然后激活应用入口的编辑状态,来进行位置的调整和删除操作。位置的调整可以通过手指的拖拽来完成,删除操作则是通过点击当前激活应用的右上角图标来完成。完成操作之后点击任意空白区域就可以退出编辑状态。
 


在待机界面向左滑屏或者点击右上角有个向右的箭头,就进入了应用程序列表。同理,在程序列表页点击左上角向右的箭头或者向右滑屏就能回到待机界面。程序列表中图标大小都为62*62px,在保证不易误点的情况下,可以尽可能多的展现列表内容。
 


在应用程序列表,用户可以通过长按某个应用,然后激活对其的编辑菜单从而进行卸载、添加到待机界面,以及查看热度和进行评论的操作。
 



 

画卷般的全景视图

要说wp7中的应用,就不得不先介绍一下Panorama,即全景视图。它是由Metro的引入而带来手机界面上的重大变革,它不同于以往的任何一个手机系统的用户界面。不再是让你的内容去适应狭小的手机屏幕,也不再是在不同的窗体之间来回切换。它提供了一种全新的视图,在水平方向上扩展内容到屏幕之外,来展现/集成不同的控件、数据和服务,就好像把它们排布在一张横轴的画卷上。当前可视区域所停留的部分,只是手机屏幕的大小部分,就好像画卷上的一个滑动窗口。用户所需要做的只是轻轻地在界面上横向滑动手指,这张画卷就会随之而动将你想要看的内容带到你眼前的焦点区域。
 


wp7中的所有应用都是采用这种架构来实现的。不论在视觉还是在交互上都是区别于以往其他任何手机中的程序的。这点相信会给用户带来更多的新鲜感
 


 

新颖的动画效果

如果说wp7的特点就这些的话,那它也不足以引发这么大的影响。除了新创的Metro理念以及panorama的全景视图外,在视觉特效上也是相当给力的。比较有代表性的是流畅的滑屏效果、层级进出之间的翻页效果以及动态的载入动画。
滑屏效果,流畅的横向滑屏是与全景视图紧密相关的衍生品。
 


由于采用了全景视图,所以在当前屏是可以在右侧看到横向的下一屏的一部分内容的,这也给横向滑屏的动画做好了铺垫,使得实际在滑屏操作时真的有再看画卷一样的体验。
翻页动画,在不同类型的页面中,它的具体表现形式也是有所不同的。
待机画面的翻页动画,当用户在点击一个应用之后,被点击的应用本身暂时不动,其他应用一起向外翻(向左翻)走,类似翻书,然后被点击的应用也跟着单独向外翻出。给人感觉就像打开了一扇神奇的门似地,不论是语义还是动画都传达了一种开启的感觉,很符合打开应用这样操作。
 


内容列表的翻页动画有三种,一种是进入文字列表项时——向外翻(向左翻)、一种是退出文字列表项时——列表项逐条向里翻(向右翻),还有一种是退出整个页面内容——整个页面一起向里翻(向右翻)。感觉上就像迎面打开,和随风消逝的感觉。
 


Wp7是一个款非常有突破性的系统,它带给我们的不仅仅是视觉上的冲击,更多的是设计理念上的开阔。相信伴随着wp7上的应用的丰富,它会带给我们更多惊喜。
 













本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/747625,如需转载请自行联系原作者

相关文章
|
2月前
二次元风格404页面源码
二次元风格404页面源码
83 10
二次元风格404页面源码
|
9月前
|
前端开发
在笔记软件Notion中嵌入音乐歌单
在笔记软件Notion中嵌入音乐歌单
|
10月前
|
存储 API 图形学
【2023unity游戏制作-mango的冒险】-2.开始画面API制作
【2023unity游戏制作-mango的冒险】-2.开始画面API制作
103 0
|
11月前
|
弹性计算 运维 小程序
开发一个类似 midjourney 的网站或小程序
开发一个类似 midjourney 的网站或小程序
123 0
|
移动开发 HTML5
10个超棒的HTML5素描及绘画设计工具
1. Mr. Doob’s Harmony 非常适合随手绘制勾勒图像轮廓的一个工具。 2. Sketch 这个工具的开发者是Hakim El Hattab。你会发现用它画素描非常有趣,甚至还可以画3D草图。
1010 0
|
前端开发 容器
如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1295 0