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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言)。它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro UI,这包括:Windows媒体中心、Zune播放器等等。

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 Phone 7和多款微软产品。微软Segoe WP字体,属于Segoe字体家族的一员,细腻坚韧给人一种优雅的美感,同时它也是WP7手机系统的默认字体。

源自瑞士的设计风格:Metro UI

求本溯源,Metro UI是基于瑞士平面设计原则,其最初在Windows XP的Windows Media Center就中有体现,这有利于以文字为主的界面导航。2006年著名的Zune播放器开始使用类似Metro的设计风格。微软的设计师计划重新设计现 有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的桌面客户端程序也使用了不同于以往Portable Media Center用户界面,其清爽排版和设计给用户耳目一新的冲击。

\" width=

图:Segoe WP字体

机场和地铁的指示牌给了微软设计团队灵感,其设计团队指出:Metro UI是来源于美国华盛顿州金县都会交通局(King County Metro)的标识设计,这种风格大量采用硕大突兀的字体,能吸引读者的注意力。微软认为Metro设计主题应该是:“光滑、快、现代”。Metro UI中图标设计也会不同于Android和iOS界面。

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

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

2. 要内容,而不是质感

3. 整合软硬件

4. 世界级的动画

5. 生动,有灵魂

Metro之父:瑞士平面设计风格概述

20世纪50年代期间,一种崭新的平面设计风格终于在联邦德国与瑞士形成,被称为“瑞士平面设计风格”,由于这种风格简单明确,传达功能准确,因此很流行与全世界,成为二战后影响最大,国际最流行的设计风格,因此被称为“国际主义平面设计风格”。

\" width=

图:瑞士平面设计

瑞士平面设计风格稳健,四平八稳的传达设计,给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格,瑞士设计家大部分不同意这种看法,他们往往强调瑞士国家虽然小,但是设计风格变化多端,极为丰富。

\" width=

图:瑞士平面设计

对于瑞士设计学校的师生来说,瑞士国际主义风格已经是过去的事情了,但是,瑞士的设计教育却深深地受到这种50 、60 年代发展起来的风格的影响。直到现在,瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征,一丝不苟,传达准确,形式单调乏味,不少年轻人感到 瑞士设计,特别是平面设计已经太深地陷人瑞士国际主义风格中,瑞士设计界需要一次真正的革命、造反,来荡涤过往风格的阴影。

\" width=

图:瑞士平面设计

独特风格:Metro UI强调信息本身

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

\" width=

图:Metro UI强调信息本身

Metro UI强调利用时间碎片

在时间碎片中找寻到更多的信息。这就是MetroUI为Windows Phone所订制的设计理念。现在社会连呼吸都要赶时间,很多用户没有过多的时间来用复杂的手势操控手机。在公交车上,我们可能利用从座位起身到在后门排 队等着下车的这个狭窄的时间间隔中,还想着要看一条微博。也许趁着在超市排队结账的时候,都要用微信摇一下周围的新朋友。着重提高用户的单手操作准确性, 就能让用户死死的黏在你的应用上。

40年用户界面设计历史简单回溯

界面设计是软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一 样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用 者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果, 而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。在漫长的人机交互史中,UI设计的理念也在不停迭 代。

1984年1月1日,Apple MacOS 1.1 

\" width=

1995年,微软 Windows 95

\" width=

2005年,Apple OS X Tiger

\" width=

今天,Metro UI设计语言诞生

Metro的设计灵感来自交通系统:它需要帮助人们能够在短时间内,快速找到自己所需的信息。Metro一词在英文中译为地铁的意思,这充分体现了它的渊源和其艺术风格。

 \" width=

图:地铁中的Metro信息版

干货好料:Metro UI中的设计元素

你觉得Metro UI界面非常的简单?它的设计理念就是要突出简洁与视觉焦点的引导。如果你是一名Windows Phone移动应用开发者,或是应用UI的设计者,那么下面提到的Metro UI中设计元素,你都必须应该知道。

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

\" width=

图:Windows Phone中的“开始菜单”

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

\" width=

图:多宝阁传统家具

\" width=

图:Metro UI的“多宝阁设计”

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

\" width=

图:可以翻转的图标

通过刷新活动方格的内容,可以让一片狭小的区域显示更多背后的内容。这种设计,要比单纯的图标式界面能呈现更多丰富的内容。

Metro UI活动方格设计精要:

1. 活动方格式的图标可以反映出更多应用程序的信息。

2. 图片丰富细腻,每一个小方框由173 X 173像素阵列组成,其可以显示精致细腻的图片。

3. 多标题的图片,可以容纳下更多内容,可以给设计师更多的灵感空间,每一个应用都有机会构建自己的独特风格。

Panorama环景界面概念:环景一词源自于“panorama”,又称全景图,它是一种广角图,可以以画作、照片、视频、三维模型的形式存在。 全景图这个词最早由爱尔兰画家罗伯特•巴克提出,用以描述他创作的爱丁堡全景画。现代的全景图多指通过相机拍摄并在电脑上加工而成的图片。19世纪中叶, 全景图成为最常用的景观和历史事件的表现手法。1881年,荷兰海景画家梅斯达格(Hendrik Willem Mesdag)等人创作了梅斯达格全景画,并将画放在一个直径约40米的环形面内,画长约120米,高14余米。

\" width=

图:2011中国移动开发者大会现场环景图

\" width=

图:清明上河图画卷

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

正如这张清明上河图所呈现出来的景象,宽大的卷轴不可能在手机中整体呈现出来。但是通过Panorama设计的概念,用户可以横向滚动卷轴,一点一 点地将整张清明上河图浏览完。并且在花卷横向滚动时,人脑会记住当前屏幕所展示的内容以外的部分,并且人脑会自动将这些顺序与逻辑关系都有机的结合起来。 在人的脑海中会自然呈现出原画磅礴的内容。

\" width=

图:Panorama风格应用

Panorama设计的准则,让用户可以控制自己的视野,通过用手指在屏幕上滑动来获得自己想要看的内容。同时,这种操控方式也是可以全屏幕进行的,并且可以视作是一种应用程序内的导航模式。

1. 使用任意单一的颜色作为背景色,或者是一张图片作为Panorama环景的背景。

2. 用户不必使用任何额外的触笔或者按键就能完成对Panorama的控制。

3. 在应用UI的设计时,微软对设计师有一个明确的要求:Panorama界面不能过长,要限定在4个屏幕宽度之内。

\" width=

图:Panorama风格应用

Pivot枢纽:是指最重要的部分,事物相互联系的中心环节。在构造地质学中,在褶皱的各个横剖面上,同一褶皱面的各最大弯曲点的联线叫做枢纽。Pivot枢纽通过不同的方式显示设置,Pivot枢纽的概念类似古代的“雕花灯笼”在转动的样子。

\" width=

Pivot是立体的,它像是一个有许多面的实体

\" width=

图:雕花灯笼

在Metro UI中的枢纽控制,提供了一种快速的获取和管理信息的途径,它能够以多种窗格的形式滚动呈现出来。用户能够使用它来过滤较大的数据,通过它来查看多重数据,或者在应用程序之间进行切换查看。

微软官方设计建议:

1. Pivot枢纽控制仅仅能显示一组项目,或者是类似的数据类型。

2. 绝对不要在Pivote枢纽中包含Panorama型的环景控制,或者是在Pivot枢纽中再加入Pivot类型的控制。

3.Pivot枢纽中的页面,不应该被应用于任务流。

4.不要试图使用触笔控制或者是滚动控制来代替Pivot枢纽控制。尤其是在sllder、Toggles、Map控制中。

\" width=

图:Pivot控件结构

Pivot VS. Panorama

Pivot和Panorama都是可以横向拓展视野,一个是翻转,一个是平移。但是在开发者设计UI时,往往会将他们相互混淆。

Pivot可以支持更长数字的项目,因为它每个翻转层都是类似的数据。而Panorama主要追求的是更炫的用户体验,在Panorama中每一组数据要足够在一屏的宽度内显示出来,这样用户不必来回滚动屏幕翻看内容。

在Pivot中,支持丰富的代码内容,开发者可以调用许多数据内容,并且以不同的方式呈现出来。而在Panorama中,需要与一些系统操作相匹配,因此其代码实现的功能也相对简单一些。

在Pivot中LoadingPivotltem和UnloadingPivotltem事件可以简单的被推迟。另外Pivot还可以让用户更加高效的利用屏幕空间。

对于Panorama来说,其背景图片可以是任意尺寸,在垂直方面,系统都会自动的适应屏幕的大小,确保顶部和底部都完全吻合,而在水平方向,将图片等分成四个屏幕视野,同时确保屏幕滑动流畅。

\" width=

Pivot(下) VS. Panorama(上)

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

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

\" width=

图:Metro UI(左)、iOS UI(中)、Android UI(右)

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

\" width=

图:Metro UI能推送更多信息

集成流与独立应用。WP和Android在一个应用中,四步即可对一张照片完成剪裁。而在iOS中,需要频繁的在2个应用中切换,至少6步才能搞定。

\" width=

图:三大平台操作谁更简单?

简单的菜单 VS. 各种高级子选项。没有选项卡,没有古怪的按钮,有的仅仅是简洁明了的菜单。Metro UI回归质朴,所带给用户的是极简式的操作体验。

\" width=

图:三大平台操作谁更直观?

MetroUI的秘密:谁更适合视力有障碍的人?

\" width=

图:在你视力好的时候,可能不会觉得他们有太大差别

\" width=

图:当你视力有些许的问题时,你依旧能准确操作手机

MetroUI未来发展之势

现在,微软开始整合本设计风格到其他产品中,如新版本的Windows Live Messenger和Live Mesh。而微软也确认Windows 8将全面集成Metro UI设计。而根据Office最新内部测试版的截图,Office也会使用Metro设计。微软美国官方网站亦部分使用本设计。

\" width=

图:Windows8的Metro界面

Metro UI会被广大消费者接受吗?

Metro UI会被消费者所接受吗?这个情况与iPhone不同,苹果的iPhone已经非常有名,它的各种消息都是媒体们争相报道的好题材。当iPhone的用户 在iPhone初代、iPhone 3G和iPhone 3GS时就有了深厚的积累和广泛的认知,由此在iPhone4推出时其销量的爆炸式增长也就是必然的事情了。对于iOS的界面来说,消费者经历了漫长的过 程才接受它的。同时在这个接受的过程中,iOS的界面也在各种的反馈声中不断的进化。

\" width=

当Android出现的时候,其界面与iPhone基本相同。Android抄袭iOS的界面设计之所以让乔布斯非常恼火,就说明谷歌在这方面是非常成功的。虽然这二者也有着明显的差异,但是从主界面的网格式图标布局来看,容易让用户找到所需内容。

微软需要与合作伙伴一起精心的打造Windows Phone的生态链,Windows Phone手机会在更多的国家上市销售。如果人们买不到Windows Phone,那么其他人就不会买它。这与手机系统的设计和手机的质量无关,可以说目前Windows Phone手机上Metro UI正缺乏被社会广泛接受的一些必要条件。但是这一设计语言必然会慢慢流行起来。

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

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

目录
相关文章
|
4月前
|
存储 算法 C++
【Qt应用开发】复刻经典:基于Qt实现Windows风格计算器(加减乘除、删除、归零功能全解析)
在Qt中,"栈"的概念主要体现在两个层面:一是程序设计中的数据结构——栈(Stack),二是用户界面管理中的QStackedWidget控件。下面我将分别简要介绍这两个方面:
143 4
|
1月前
|
网络协议 定位技术 Windows
Windows Server 2019 DNS服务器搭建
Windows Server 2019 DNS服务器搭建
|
1月前
|
域名解析 缓存 网络协议
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
|
1月前
|
域名解析 网络协议 安全
Windows Server 2003 DNS服务器搭建
Windows Server 2003 DNS服务器搭建
|
2月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
58 1
|
3月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
70 0
|
3月前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
184 0
|
3月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
64 0
|
3月前
|
API C# Shell
WPF与Windows Shell完美融合:深入解析文件系统操作技巧——从基本文件管理到高级Shell功能调用,全面掌握WPF中的文件处理艺术
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的关键组件,用于构建 Windows 桌面应用程序。WPF 提供了丰富的功能来创建美观且功能强大的用户界面。本文通过问题解答的形式,探讨了如何在 WPF 应用中集成 Windows Shell 功能,并通过具体示例代码展示了文件系统的操作方法,包括列出目录下的所有文件、创建和删除文件、移动和复制文件以及打开文件夹或文件等。
77 0
|
3月前
|
数据库 Windows
超详细步骤解析:从零开始,手把手教你使用 Visual Studio 打造你的第一个 Windows Forms 应用程序,菜鸟也能轻松上手的编程入门指南来了!
【8月更文挑战第31天】创建你的第一个Windows Forms (WinForms) 应用程序是一个激动人心的过程,尤其适合编程新手。本指南将带你逐步完成一个简单WinForms 应用的开发。首先,在Visual Studio 中创建一个“Windows Forms App (.NET)”项目,命名为“我的第一个WinForms 应用”。接着,在空白窗体中添加一个按钮和一个标签控件,并设置按钮文本为“点击我”。然后,为按钮添加点击事件处理程序`button1_Click`,实现点击按钮后更新标签文本为“你好,你刚刚点击了按钮!”。
267 0

推荐镜像

更多
下一篇
无影云桌面