五个Metro UI 风格的网页设计

 随着Windows Phone7的发布,WIN8的初露倪端,Metro这种新兴设计风格正被大家所熟悉。

     Metro本意是地铁,Metro风格设计和灵感来源正是来源与机场和地铁系统所使用的视觉语言。

     Metro设计具备以下五点原则: 

      1.干净、轻量、开放、快速

      2.要内容,而不是质感

      3.整合软硬件

      4.世界级的动画

     5.生动,有灵魂

     这些设计原则都基于这样一个原则,就是所有的UI元素都应该实实在在的数字化,并附以和谐的,功能化的,吸引人的视觉元素。应用程序应该用探索精神和激动人心的视觉设计去打动用户。       

      metro UI是由微软公司开发的内部名称为“ typography-based design language”(基于排版的设计语言)。最早出现在微软电子百科全书95,后来的产品如:windows媒体中心、Zune播放器 都有用到这项技术。该技术已于2010年初(美国)获得Metro UI专利批准(USPTO)。metro UI最新的应用是windows phone 7智能手机系统,并将应用于未来的windows 8、office 和 xbox 360产品中。      

  metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面,这有助于形成一种身临其境的感觉

     Metro设计不仅仅是用于移动应用和应用程序的设计,越来越多的网站也融入了Metro UI,下面我就推荐几个我收藏的Metro UI风格的网页设计.这 类的网站也是从微软的网站开始流行的。

1 最先发现的是MSDN了。http://msdn.microsoft.com/

2 www.msn.com 

3.www.microsoftmag.eu/

4http://www.mdong.org/

5theie6countdown.cn/educate-others.aspx

时间: 2024-10-24 11:12:54

五个Metro UI 风格的网页设计的相关文章

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

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

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

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

网页视觉设计:光亮风格的网页设计作品案例

文章描述:强质感高光风格网页欣赏及其表现手法总结. 经常能见到这一类的风格的网页设计作品,它们有如下共同的特点.背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光:在页面元素的边缘部分有着强烈的1像素高光:元素表面有如玻璃般的明显反光:底部和背景接触的部分经常会设计出倒影.这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象. 我这里将这些常用的表现方法提取了出来,共有6种样式,分别是:1.镜面的内容背景:2.光亮的按钮:3.浮动的圆角水晶按钮

网页设计技巧:炫彩和透明风格的网页设计

文章描述:炫光和透明风格网页设计作品及教程. 炫彩和透明风格的网页设计是我个人喜欢的设计风格之一.下面的设计作品和教程是我接触和收集到的这一类的设计风格的代表.这些作品和教程可以在我们动手创建个人的网页设计时给我们以启发,并且教会我们实际实现的技巧.总结起来,这些设计有着如下共同特点: 一.非常漂亮的抽象背景图片,内容以光晕.烟雾类为主.这些图片有着非常好的渐变,可以很好的和网页背景色融合在一起,便于后期代码实现实际的效果.在站酷上搜索这一类的素材,你会发现很多非常漂亮的图片可以用到你的设计上.

网页设计作品欣赏:破旧风格的网页设计实例

破旧风格的网页设计应该说是一种有着强烈风格的设计,给人的感官冲击十分突出.但是如果适度的应用破旧风格的元素,或者和相应的一些色彩搭配的话还是可以做到含蓄的同时不失破旧风格的魅力.而这种相对温和的设计风格更容易为人所接受.下面是网上的一些设计作品,风格相对温和一些,值得在设计时参考和借鉴. 1.CorkingDesign 2.31Three 3.Mindutopia 4.Snook 5.LePush Mail 6.Kean Richmond 7.Jason Julien 8.Abbey Theat

40个漂亮的应用插画风格的网页设计实例

在网页设计中,把不断变换着的内容变成一个漂亮的设计有无限种可能 .风格和技术能够使用.插画是其中风格之一,它能带给网站一个全新的水平,插画变得越来越流行,并且一些设计师真正的把一些风格发挥到极至. 下面,您将发现40个功能巧妙.插画漂亮的设计,恰到好处的结合创造了一个养眼的风格. 网页设计中的漂亮插画 DivVoted一个全方位的漂亮布局,加上一些漂亮颜色的插画. The Alamo Basement 一个好的,丰富多彩的插画可以营运一个舒适的氛围. StrawPoll StrawPoll有一个

28例卡通风格的网页设计

  如果你想自己设计网页时不再循规蹈矩,可以尝试通过艺术风格为网页加入一些趣味性的元素,比如我们今天要谈到的卡通风格插画. 通过这些令人愉悦的卡通.妙趣横生的图像来打造一款网页设计,肯定效果会非常出众.极富娱乐性. 那么立即让我们来欣赏这28例超赞的卡通风格网页设计吧. Fabrika Online 展示了游戏中壮观的场景,角色看起来很酷. Shape 单色调,线条风插画,整体看起来非常整洁,操作起来感觉会很精确. Web Design Wigan 非常愉悦的氛围,各个角色栩栩如生.卡通人物的色

深底色风格的网页设计的策略

译者:西乔 来源:www.webdesignerdepot.com 原作者:Kayla Knight 深底色风格的页面设计很受欢迎,它可以创造出别致优雅,极富创造力的效果. 深底色设计适用于许多网站类型,但并非所有.这种风格应该在恰当的条件下使用. 虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反.失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题. 所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,

PS网页设计教程XVI——在PS中创建一个摩登实验室风格的网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的