用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

小蜜锋    -  云代码空间

—— 技术宅拯救世界!

METRO STYLE win8 metro风格设计

2013-10-07|4341阅||

摘要:Metro 设计是一个不容忽视的市场大趋势。这是全新的用户体验,将成为微软未来的操作系统——Windows 8和Windows phone 的一部分。随着移动时代的到来,metro UI 风格被推向新的高度,“METRO STYLE”的浪潮下,你被打湿了吗? Metro

封面

Metro 设计是一个不容忽视的市场大趋势。这是全新的用户体验,将成为微软未来的操作系统——Windows 8和Windows phone 的一部分。随着移动时代的到来,metro UI 风格被推向新的高度,“METRO STYLE”的浪潮下,你被打湿了吗?

Metro是由微软公司开发的内部名称为“ typography-based design language”(基于排版的设计语言)。Metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。

metro这是一个全新的界面,你有足够的空间去创造去发挥你的创意。我们仍处于它的成长曲线的起步阶段,所以面临的挑战新鲜而有趣。当我第一次看到 WP7 的展示时,我在想,“我一定要为它设计些什么。”探索是最好的学习方式,学着为用户创建一个激动人心的用户体验吧。

Picture3

早期Metro风格应用

2006年著名的Zune播放器开始使用类似Metro的设计风格。微软的设计师计划重新设计现 有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的桌面客户端程序也使用了不同于以往Portable Media Center用户界面,其清爽排版和设计给用户耳目一新的冲击。

etwt-1

源自瑞士的设计风格:Metro UI    Segoe WP字体

求本溯源,Metro UI是基于瑞士平面设计原则,其最初在Windows XP的Windows Media Center就中有体现,这有利于以文字为主的界面导航。我们的设计灵感来自字体, 漂亮的字体, 我们要让界面变得像这些字体一样美。文字体现了信息, 文字的美感是无法取代的。

Windows8

win8发布以来,受到很大的追捧,特别是设计领域,掀起的平面化设计浪潮,下面是Windows8开始界面

win8使用的是多宝阁的设计理念。多宝格又称“百宝格”或“博古格”,是专为陈设古玩器物的。它是进入清代才兴起,并十分流行的家具品种。多宝格的独特之处在于,它将格内做出横竖不等、高低不齐、错落参差的一个个空间。人们可以根据每格的面积大小和高度,摆放大小不同的陈设品。在视觉效果上,它打破了横竖连贯等极富规律 性的格调,因而开辟出新奇的意境来。

多宝阁设计具有强大的内容分层结构,始于内容简述,层层递进,深入细节,就在实时图块中, Mango 的新功能。在 WP7 首发时,图块充其量是一个静态叠加的程序图标,何在 IOS 和 Android 里的一样。现在,一个新的模式被引进过来。主屏幕只显示简洁的通知,即应用程序中最重要的那部分信息,就像杂志的文摘部分一样。想想看,这块空间能够提供有意义的内容,并且是实时更新可用的。

用户们如果只想扫一眼天气情况,他们不需要打开应用就可以办到,因为最基本的信息都在那上面了。但是如果他们想看未来五天的天气或是其他细节,他们还是要打开应用的。实时图块被设计成可以任意变换的,你可以创造性地组合不同的实时图块。

image23

windows phone

用户手中的这台WP7手机的可视区域是十分有限的。例如诺基亚Lumia 800的屏幕仅为3.7寸,为了能让用户透过窄小的手机屏幕,看到更为宏大的场景,在Metro UI中就采用了这种Panorama设计的概念。它最大的益处是可以在一个二维平面内,集中显示多种类型、多种来源的信息内容。

Panorama环景界面概念:环景一词源自于“panorama”,又称全景图,它是一种广角图,可以以画作、照片、视频、三维模型的形式存在。 全景图这个词最早由爱尔兰画家罗伯特•巴克提出,用以描述他创作的爱丁堡全景画。现代的全景图多指通过相机拍摄并在电脑上加工而成的图片。19世纪中叶, 全景图成为最常用的景观和历史事件的表现手法。

image32

开始界面:下面我们来看一下Windows Phone中Metro UI的开始界面。它具备一些用户经常使用的必要信息。图片、游戏、音乐和视频、办公、电子市场等。这个界面,其内容可以竖向滚动,方便单手拇指操作。同时在狭小的手机屏幕中,可以显示更多内容。

image20

windows phone另一个最大的特性就是活动方格翻转动画的设计;

在Metro界面中,应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的 “收藏品”一样,每一个应用都会给用户爱不释手的感觉。可翻转的图标,同时又印证了多宝格精致的机关设计,给人以一种不断幻化的新奇感。让人忍不住去探索 Metro UI中的各种内容。

可以翻转的图标通过刷新活动方格的内容,可以让一片狭小的区域显示更多背后的内容。这种设计,要比单纯的图标式界面能呈现更多丰富的内容。WP7动画模块和转场效果深深植入独创的 UI 概念中,成为了最基本的元素。你不仅能及时给与反馈(正如一个实时通知功能一样),还能把用户的注意力集中到当下正发生的事情上,并为他们提供与众不同的体验image30

image38

图标

Live & rich tiles对决静态图标。在Windows Phone中,图标按钮可以呈现出更加丰富的信息。

Metro、iOS、Android之三大UI风格对比

三种移动平台,三种风格迥异的UI界面。先有iOS,后有Android,但是Metro UI的风格,早在许久之前就深入现代设计殿堂。

twtrert

三大智能手机UI谁看上去更艺术?

你可能会偶尔看到,某个餐厅的菜单,用的是iOS的界面风格。也许你能听说某人,设计了一个随身记事本,其外观与三星的note手机极为相似。你可 能会哇的赞叹,其UI设计的影响力,已经从移动领域延伸到了日常生活中。但Metro UI则完全相反,它是先被广泛应用在日常的生活中,然后再经过各种优化,才植入智能手机中的。源于生活而高于生活,这才能称之为艺术。我国某位著名的根雕艺术大师曾经说过这样一句话:工艺品和艺术品的价值至少差着五个档次。

metro 风格软件设计

同样有国外的设计师进行了各种尝试,比如对windows8的文件系统设计的更有metro风。Metro风格采取了一种“大刀阔斧”的方式来删除用户界面中哪些非必须的元素, 无论是装饰性的视觉元素还是多余的动作。这使得我们能够专注于用户界面中最主要的元素, 并让这些元素变得更加智能化、更加开放, 整个用户界面也更加轻盈。

image24

真正的内容,而不是质感

我们相信设计中的真实感。一套用户界面是由无数个像素组成的, 在Metro中, 去掉了所有的渐变和阴影, 为用户呈现了真正数字化的界面。

当然,对win8软件的概念设计也会有很多的尝试,

image19

干净,简约

image25

window phone APP设计以色块、大而纤细的字体为主,留白更多,便于阅读,手的触点更大,更容易操作,动画更出色。

4363466546

metro风格网页设计

越来越多的设计师喜欢使用metro风格,轻薄化已经成为设计的趋势,网页设计也受到了metro风格的影响。他引领了未来设计的方向。

7y g h

f

工具型网站也会有metro的风格。你会发现,用metro风格来做数据型网站是在合适不过了,因为metro的精髓就在于信息的表达。他可以清晰的表达各种信息层次,图形更加直观。

g

有了 Metro, Windows Phone 7 对设计师来说打开了一扇设备和操作系统领域的新的大门。它代表了与苹果和 Google的设备界面完全不同的新方向。这也给我们提供了工作的基准以及未来拓展的方向。

本文只是抛砖引玉,如有不妥之处,还请斧正!

顶 0踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 小蜜锋
    • 等级: 高级设计师
    • 积分: 7088
    • 代码: 757 个
    • 文章: 360 篇
    • 随想: 211 条
    • 访问: 1263 次
    • 关注

    标签

    设计模式(4)java(9)命名规范(2)广告创意(1)愤怒的小鸟(1)游戏(5)jsp(1)配置(1)Surface(1)windows(1)javabean(1)设计方法(1)开发工具(2)web(4)大数据(2)GPU(1)硬盘(1)内部结构(1)黑客(1)窃取(1)编码(1)解决方法(1)php(28)mysql(9)数据库备份(1)数据库还原(1)命令(2)数据库(1)安装(1)2012(2)世界末日(3)仙剑5前传(1)默哀(1)电源(1)女生(1)装饰器模式(2)古剑奇谭(1)电脑桌(1)史上最牛(1)编程语言(2)小米(3)电视机顶盒(1)营销策略(1)Android(8)手势(1)诺亚方舟(1)Eclipse(1)汽车(1)操作系统(1)软件(1)互联网(5)大事记(1)设计师(2)壁纸(1)古剑奇谭2(1)古剑奇谭网络版(1)云计算(2)服务器(1)框架(2)Socket(1)jquery(1)构造函数执行顺序(1)火车票(1)3D(1)数据中心(2)正则表达式(2)Web前端(1)开发框架(1)系统瘫痪(1)12306(2)cpu(1)javascript(2)开发日记(15)体育馆管理系统(15)网页设计(1)CSS3(3)腾讯(3)小游戏(1)interface(1)平板(2)面试(2)设计(5)摄影(2)数据挖掘(1)钢琴谱(1)情人节(1)陈欧体(1)程序员(3)漫画(1)UserAgent(1)iPhone(2)NoSQL(1)ui(9)越狱(1)指南(1)abstract(1)css(3)git(2)八核(2)三星(1)linux(11)数据类型(1)html5(2)UML(2)perftools(1)创意(1)logo(1)色谱(1)响应式(5)Metro(2)虚拟机(1)jvm(1)垃圾回收(1)left(1)join(1)连接查询(1)溯源系统(1)Override(1)SAE(2)WordPress(1)指针(1)链表(1)系统分析师(1)中间件(1)corba(1)static(1)无线(1)监控(1)iPad(1)Apache(2)比特币(2)命名规则(1)手机支付(1)curl(3)笔记(1)导航(1)thinkphp(1)异常导致本地路径泄漏(1)web设计(1)网络安全(1)诗句(1)4K对齐(1)代码库(1)色彩(1)动画片(1)struts2(3)漏洞(5)确认框(1)心情驿站(1)ArscEditor(1)resources.(1)apktool(1)AppKey(1)新浪微博(1)app(5)广告(3)赚钱(1)响应式布局(1)html(1)淘宝(2)微信(1)重构(5)缓存(1)破解(1)后门(1)七夕(1)SEO(2)概念设计(1)面向对象(1)bootstrap(1)性能(2)优化(1)iis(1)爬虫(1)采集(1)算法(2)文本相似度(2)cto(1)js(1)fsockopen(1)扁平化设计(2)网页(1)心情(7)小米电视(1)开箱(1)励志(2)招聘(3)命名(1)notepad++(1)python(1)配色(3)扁平化(4)ps(2)搞笑(2)创业(3)渲染(1)电影(1)模板(1)微博(1)企业家(1)公司(1)总结(1)前端(1)运营(1)变形(1)svn(4)教程(3)搜狗(1)泄密(1)双11(1)天猫(1)UC(1)启动界面(1)光棍节(1)双十一(2)物流(1)备份(1)更新(1)插入(1)插件(2)jsTree(1)(1)海量数据(1)分辨率(1)草图(1)手绘(1)速度(1)文本处理(1)实习(1)感想(1)文件(1)简历(1)65.49.2.17(1)yum(1)解决办法(1)阿里云(2)推广(1)来往(1)春运(1)LBS(1)gb2312(1)utf-8(1)log4j(1)详解(1)收购(1)私服(1)TortoiseGi(1)post(1)异常(2)flappyBird(1)应用创新大赛(1)宙斯杯(1)学习方法(1)xp(1)退役(1)安全(1)技术贴(1)flash(1)刷机(1)京东(1)电商(1)Tomcat(1)JDK(1)免费(1)长投影(1)图标(1)Photoshop(1)云端集成开发环境(1)软件开发(1)可视化(1)工具(2)OpenSSL(1)Heartbleed(1)vsftp(1)中国知网(1)学术论文(1)免费下载(1)开发(1)手册(1)速查表(1)追随战略(1)sdk(1)文章(1)发布(1)文件管理(1)沙画(1)动效(2)原型(1)感悟人生(1)哲理(1)Bash(1)类图(1)知识管理(1)Console(1)调试命令(1)rpm(1)报错(1)挂载(1)数据盘(1)云主机(1)产品经理(1)原型设计(1)mql4(1)mt4(1)ea(1)程序化交易(1)CURLOPT_PO(1)阿里云​(1)CentOS6(2)OpenSSH(1)漏洞修复(2)升级(1)安骑士(1)链克(1)

    站长推荐