简单而不简陋﹣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,如需转载请自行联系原作者

相关文章
|
4月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
266 0
|
6月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
92 1
|
7月前
二次元风格404页面源码
二次元风格404页面源码
150 10
二次元风格404页面源码
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
前端开发
在笔记软件Notion中嵌入音乐歌单
在笔记软件Notion中嵌入音乐歌单
|
弹性计算 运维 小程序
开发一个类似 midjourney 的网站或小程序
开发一个类似 midjourney 的网站或小程序
154 0
|
移动开发 HTML5
10个超棒的HTML5素描及绘画设计工具
1. Mr. Doob’s Harmony 非常适合随手绘制勾勒图像轮廓的一个工具。 2. Sketch 这个工具的开发者是Hakim El Hattab。你会发现用它画素描非常有趣,甚至还可以画3D草图。
1036 0
|
移动开发 HTML5
界面绝佳、体验超棒的HTML5上传插件zyUpload
好插件推荐 插件描述:支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改 多图上传预览 图片发自简书App 删除 图片发自简书App 拖拽上传 图片发自简书App 插件下载 :http://www.
1429 0