Live Tile是灵魂 Metro UI精髓全面解析

Metro UI的最初亮相应该属微软推出的Zune HD播放器之上,但是随着">Windows Phone的诞生和微软产品战略的转换,Zune HD的地位开始被Windows Phone所取代,而微软也逐步将“三屏一云”计划付诸实现。Windows Phone让很多用户开始领略到了Metro UI的魅力,而Windows 8消费者预览版的发布则让用户真正感受到了Metro UI在大屏幕触控设备上的惊人表现力。那么一直被疯传的Metro UI背后的精髓到底有哪些呢?

Live Tile的动态精髓

Metro UI的灵魂在于Live Tile,而并非只是用户单纯的色块形式的理解。对于微软而言,如果UI设计的革新只是仅仅停留在外观之上,那这种变革是没有意义的。那么会有很多朋友会疑惑,究竟这种块状设计背后还蕴藏着多少更深层次的意义呢?

Live Tile的奇妙之处很好的被其名称所概括,简而言之就是Live和Tile的联动。Live即Metro UI的实质,Tile仅仅只是这种实质的具体表现形式,也就是俗称的色块。究其精华部分的Live,并非是一个静态的物体,这是因为Live Tile能够实时的显示数据和信息。这也是Live Tile和iCon的区别所在。但是Live Tile和Widget又有所不同。直接采用Widget的方式来显示实况信息,操作平台首先需要顺利的加载这些类似于应用程序的Widget,同时调用的Widget越多的情况下,处理和内存的数据处理逐渐接近峰值,如果在操作平台不做很好的优化,则会导致操作平台性能大大降低,进而影响用户体验的效果。

Metro UI元素的严格界定

从Windows Phone 或者是Windows 8不难看出微软在图标和按钮等细微元素的定义上有着严格的限制,按钮即按钮,图标即是图标,没有丝毫含糊。不管是推送按钮、开关按钮、控制按钮或者是媒体播放按钮,在Metro 语言中都有一个边界的定义,而这个边界就是用户通常所见到的小圈圈,由这个小圈圈以及中间的图标构成按钮的属性。

Metro 语言中之所以选用这个小圈圈加上原有的icon组合成一个新的Button是为了增加其显著性以及与传统图标进行区别的需要。按钮更多的是为了适应人机交互的需要,而图标仅仅是作为单向展现信息的载体

滑动手势更能彰显优雅

智能终端设备越来越普及,其屏幕也越做越大,在这种情况下,大屏幕与高利用率之间该如何形成一个良好的桥节点,如果用户要把Metro UI看成单纯的色块,那么Metro UI即时为触屏设备而生,简约而明了的色块提供了连贯、精准手势操作的可能。

传统触控操作中基于Button的单一按钮即便是适应了大屏幕终端设备,但毕竟由于成本、功耗等因素决定其并不能成为主流,标准尺寸屏幕下无疑还是滑动手势将屏幕的利用率发挥到极致来得实在。Metro UI中对触控的理解更多的沿用了滑动的模式,具体表现在其全景图和枢轴结构的应用设计。基于去边缘化设计的滑动手势除了能够代替Button按钮外,还可以将Button按钮的功能丰富化。比如将2abc四个字母集合到一个按钮,通过上下左右滑动来实现不同字母的输入,极大的提高了屏幕利用率。

滑动手势相比较点击还存在一个优越的地方,即可以很好的弥补点击的精确缺陷,这一点的渊源还是与智能手机的屏幕利用率有关。绝大部分情况下其显示内容均较为密集,多半情况下一个手指可以覆盖住多个字符,在这样的情况下点击手势对于文本的编辑和光标的插入必然显得力不从心,滑动手势则很好的优化了这些方面的用户体验。

时间: 2024-08-13 10:34:39

Live Tile是灵魂 Metro UI精髓全面解析的相关文章

Windows Phone灵魂诠释:Metro UI界面完全解析

Metro在微软的内部开发名称为" typography-based design language"(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro UI,这包括:Windows媒体中心.Zune播放器等等.该技术已于2010年初(美国)获得Metro UI专利批准(USPTO).Metro UI最新的应用是windows phone 7智能手机系统,并将应用于未来的Windows 8.Office 和 Xbox 360产品中.  

五个Metro UI 风格的网页设计

 随着Windows Phone7的发布,WIN8的初露倪端,Metro这种新兴设计风格正被大家所熟悉.      Metro本意是地铁,Metro风格设计和灵感来源正是来源与机场和地铁系统所使用的视觉语言.      Metro设计具备以下五点原则:        1.干净.轻量.开放.快速       2.要内容,而不是质感       3.整合软硬件       4.世界级的动画      5.生动,有灵魂      这些设计原则都基于这样一个原则,就是所有的UI元素都应该实实在在的数字化

JS实例:模拟metro UI的等待进度条

文章简介: JS模拟metro UI的等待进度条,圆圈转转转的等待通用性比较差吧.  JS模拟metro UI的等待进度条,圆圈转转转的等待通用性比较差吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://ww

Web设计资源:Windows8的Metro UI风格布局案例

文章描述:本文收集了很多Windows 8的Metro UI风格布局资源,希望大家喜欢! 微软已经正式发布了windows 8操作系统,Windows操作系统的风格已经完全改变成了瓷贴状的Metro UI.对于微软来说这是一个巨大的改变,而且所有微软的平台,包括桌面.平板.移动及网站都使用这个UI风格.Metro UI包含了所有的现代web设计的特点:简化.基于网格的界面.富有连续性. 本文收集了很多Windows 8的Metro UI风格布局资源,希望大家喜欢! 一.Metro风格的网站框架和

从应用启动器的设计来谈谈 Metro UI 的不足

俗话说,太阳底下无新事.http://www.aliyun.com/zixun/aggregation/29847.html">Metro UI 的脱颖而出似乎是一次大的颠覆,但是任何新事物不过是旧事物换个表现方式.不妨从应用启动器的设计看,探讨一下 Metro UI 的一些缺陷和不足. 所谓智能手机,就是可以通过软件扩展手机功能,其结果就是软件不断增多,如何管理这些应用就成了问题.最普遍的方式是将应用图标化.如何管理应用图标不同系统的处理方式各有千秋. 图标和启动器 一般来说,应用以图标

不容错过的window8 metro UI风格的web资源

中介交易 SEO诊断 淘宝客 云主机 技术大厅 最近微软已经正式发布了windows 8操作系统,window操作系统的风格已经完全改变成了瓦片状的Metro UI. 对于微软来说这是一个巨大的改变,而且所有微软的平台包括,桌面,平板,移动及其网站都使用这个UI风格. Metro UI包含了所有的现代web设计的特点,包括了,简化,基于网格的界面,并且富有连续性. 大家如果有兴趣可以看看这个界面设计说明 (http://msdn.microsoft.com/en-us/library/windo

Metro UI 平板概念图

在 <从http://www.aliyun.com/zixun/aggregation/36296.html">应用启动器的设计来谈谈 Metro UI 的不足> 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同.iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.而 Metro UI 的放到平

使用WPF来创建 Metro UI程序

本文转载:http://www.cnblogs.com/TianFang/p/3184211.html 这个是我以前网上看到的一篇文章,原文地址是:Building a Metro UI with WPF,这篇文章一步步的介绍了如何实现一个Metro样式的窗口,并且效果非常好.今天看到OSChina上有这篇文章的译文:使用WPF来创建 Metro UI,翻译得非常好,这里推荐一下.  值得一提的是,除了这种一步步来的方式外,现在Codeplex中也有不少比较好的metro风格的wpf框架,可以帮

Windows Phone 及 Metro UI 设计讨论

微软最新的移动操作平台为Windows Phone提供了全新的内容组织方式和不同的用户体验,在此基础上,Windows 8 也将采用同样的Metro设计原则.与以往的侧重点不同,Windows Phone更注重于用户的社交生活,尤其是针对那些生活中离不开社交网络的用户们. 那么,作为设计师要关注些什么呢? 首先,这是一个全新的平台和用户界面,因此,我们有更多的空间为之提供更好的创意.Windows Phone目前正处在一个上升通道内,对设计师来说,也是一个全新的挑战.我们需要更多的探索来学习如何