<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>后时代&#187; Metro</title>
	<atom:link href="http://www.houshidai.com/tag/metro/feed" rel="self" type="application/rss+xml" />
	<link>http://www.houshidai.com</link>
	<description></description>
	<lastBuildDate>Fri, 11 Oct 2019 03:37:37 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Metro风格界面设计</title>
		<link>http://www.houshidai.com/design/metro.html</link>
		<comments>http://www.houshidai.com/design/metro.html#comments</comments>
		<pubDate>Thu, 13 Dec 2012 14:00:25 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[Metro]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[微软]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[简洁]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=6664</guid>
		<description><![CDATA[Metro[ˈmetrəʊ]，译为：城市地铁(Metropolitan Railway) Metro是由微软公 [...]]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/metro" title="查看 Metro 中的全部文章" target="_blank">Metro</a></span>[ˈmetrəʊ]，译为：城市地铁(<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/metro" title="查看 Metro 中的全部文章" target="_blank">Metro</a></span>politan Railway)</p>
<p><img class="alignnone size-full wp-image-6665" title="Metro" src="http://www.houshidai.com/wp-content/uploads/2012/12/Metro.jpg" alt="" width="600" height="220" /></p>
<p><span id="more-6664"></span></p>
<p>Metro是由<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>公司开发的内部名称为“typography-based design language”（基于排版的设计语言）。最早出现在<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>电子百科全书95，后来的产品如：windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初（美国）获得Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>专利批准（USPTO）如今该技术被引入到微软最新开发的Windows Phone操作系统和已经发布的Windows 8预览版以及Office15中。</p>
<p>Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。</p>
<p>Metro设计的起源：</p>
<p>Metro基于瑞士平面设计的设计原则，本设计原则在Windows XP的Windows Media Center中有体现，这有利于以文字为主的界面导航。2006年，Zune开始使用类似Metro的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的电脑端配套程序也使用了不同于以往Portable Media Center用户界面的清爽排版和设计。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pnC-04KJ1QH_ual20HF8ednZSrSe7K86HA0QgSmtkYJ2_ZyijK3r3X3chUU6qh7g7dUBHKly9hocA8OudM5wUbyPxLlgAKLDM/Metropolitan.jpg?psid=1" alt="" /></p>
<p>Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计主题应该是：“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。</p>
<p>Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>设计具备以下五点原则：</p>
<p>1. 干净、轻量、开放、快速<br />
2. 要内容，而不是质感<br />
3. 整合软硬件<br />
4. 世界级的动画<br />
5. 生动，有灵魂</p>
<p>Metro瑞士平面设计风格概述:</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pm1hMNlRBc8GkuUneJ_c_CB5UOZiWehiViVJfhS4iD_Ba7X6RSOpprUesAS-UBFim9yIdfmbpNo9kIgeT15NiftftD_34vfb9/%E7%91%9E%E5%A3%AB%E5%B9%B3%E9%9D%A2%E8%AE%BE%E8%AE%A1.jpg?psid=1" alt="" /></p>
<p>20世纪50年代期间，一种崭新的平面设计风格终于在联邦德国与瑞士形成，被称为“瑞士平面设计风格”，由于这种风格简单明确，传达功能准确，因此很流行与全世界，成为二战后影响最大，国际最流行的设计风格，因此被称为“国际主义平面设计风格”。瑞士平面设计风格稳健，四平八稳的传达设计，给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格，瑞士设计家大部分不同意这种看法，他们往往强调瑞士国家虽然小，但是设计风格变化多端，极为丰富。</p>
<p>Windows 8看Metro风格IE 10视频</p>
<p><object width="600" height="450" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" align="middle"><param name="src" value="http://player.youku.com/player.php/sid/XMzA0MjIwNjE2/v.swf" /><param name="quality" value="high" /><param name="allowscriptaccess" value="sameDomain" /><param name="allowfullscreen" value="true" /><embed width="600" height="450" type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/XMzA0MjIwNjE2/v.swf" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" align="middle" /></object></p>
<p>微软IE10浏览器，在开发过程中使用了最新的HTML5和JavaScript改进。etro是微软内部代码的一种名称，主要用于<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>。这种俗称为“方块和文字（tile and text）”用户界面，对于其他产品微软也将采取类似的做法。</p>
<p>Metro UI界面：</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pnC-04KJ1QH8vODJQL-BWvFtOpQe1A17eWReEJOPsWL3-lrIzeKcgExVAg_3QoCjYpiW9G8Z9fR6fr2FpWUYSXiTlAsqFYk91/Metro_lockScreen_page.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pm1hMNlRBc8G17ZxLwCG8jwLDTbBEsZYVc_C4bvmQLquzlfXNBj3s4o8BPA9UFF2nmZIAvFJTH8pU3F9Jta--dFrSF7F5fogc/screenshot_photoPicker_page.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pqt7xp_I_93OlhFKJZalIZcnclXJNdj-x1I_j9LA4LYhyGGprH1ic2yxFynfQwBXNwtblG8u7nzifz2k8DTKZ1zLUeudVAsd6/screenshot_keyboard_page.jpg?psid=1" alt="" /></p>
<p>Metro现状：</p>
<p>Metro是微软在Windows Phone中正式引入的一种<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>语言，也是Windows 8的主要界面显示风格。在Windows Phone之前，微软已经在Zune Player和XBox 360主机中尝试采用过类似的界面风格，并得到了用户的广泛认可。于是，微软在新发布的Windows Phone、已经发布的Windows 8预览版以及Office 15、Xbox live中也采用了Metro设计，今后的微软产品中将更多的能看到Metro的影子，而更少的看到传统的Windows视窗界面。</p>
<p>“Windows8”推出的一个专为触摸而设计的最新Metro风格界面，能向用户显示重要信息，这个界面同时支持鼠标和键盘，并应用于平板设备。Metro风格<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>风格优雅，可以令用户获取一个美观、快捷流畅的 Metro 风格的界面和大量可供使用的新应用程序。这些应用程序拥有远远超出图形设计范畴的新特性（一个平台）。正如微软所展示的那样，通过出色的触控体验，同时又可以使用鼠标、触控板和键盘工作。如果用户希望永远沉浸在Metro界面中，那么将永远不会看到桌面，除非刻意选择，否则系统甚至不会加载它，这样的Windows 将焕然一新。将在Windows8中开放的Windows应用程序市场（类似于iOS里面的App Store）也使用并推荐采用Metro风格界面的应用程序。</p>
<p>2012年10月随着WP8与Win8的发布，微软在提及Windows8全新开始屏幕（Start Screen）时开始使用 &#8220;Metro(新Windows UI)&#8221;设计一词。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1p9ERKaL48qcBN-NjeGgV-zZvA__WwEROA_cwgDDu_pCO67c8poXL7-IW3j4kIImsG-vt7PahUG3aXbvcfriyuYGlIKd9WZkAV/Segoe-WP.jpg?psid=1" alt="" /></p>
<p>Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计，针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互，从而使用户与你的应用产生互动。</p>
<p>针对你的用户所设计的应用</p>
<p>当用户使用Metro应用时，他应该能体验到：</p>
<p>沉浸式：你的Metro应用应该是全屏幕的，让用户沉浸在你所创建的体验之中。在这种全屏体验中，用户能极力享受到他所喜爱的内容。为了充分展示你的内容，我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序，但不要让他过于杂乱。让用户专注于他需要专注的任务之中。</p>
<p>增进与活跃：你的Metro应用能帮助用户找到他们关注的信息。Live tiles的更新帮助用户在第一时间找到有用的兴趣，并引导用户进入你的应用程序。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1p65fdQGUuaTHQR8QVNjMlqOZStSWQ8J8DTTCzkaHXRF0KiQ4dSaS6aHdTWdhJdR2EkUFFOIjvjDN-r-1aXiig-fUP1oewoDfm/Lumia.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pqt7xp_I_93MZnk3ccwT6WqHiLENLUWTDpg8qEsefGxmNftLjXRst_F_RGMiGOLlr6klDYA92QH6KpCdvZzvp8LZDexpYnNXk/panorama.jpg?psid=1" alt="" /></p>
<p>活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的 “收藏品”一样，每一个应用都会给用户爱不释手的感觉。可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。让人忍不住去探索 Metro UI中的各种内容。</p>
<p>开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新，来鼓励用户进入你的应用。当我们设计tiles，我们应当：</p>
<p>1、突出你的品牌。app tile能帮助你视觉化你的品牌。应当设计得有足够吸引力以及与其它应用的差异化。</p>
<p>2、在app tile上尽可能的展现用户关注的信息以及更新。你会寄希望于用户经常来查看你的tile，查看最新的应用中的更新。你寄希望于这些更新能吸引你的用户点击使用你的应用。考虑周全的信息设计能充分增进你的用户与应用的联系。</p>
<p>Hotmail Metro官方配色：</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pwoXctWxouQ-PaO1afQb5FPyUaNg4YW9iM2-jmFcaXGi40DA-Ejzh3HMso7oKgqhy3rLCj92bA4eP0mBpVHKAYizsQfljwYnc/hotmail.jpg?psid=1" alt="" /></p>
<p>为多任务而设计:</p>
<p>当应用程序全屏幕运行时，Windows同时也能支持多任务操作。</p>
<p>1、Snapped View。用户喜欢同时做多件事情。他们希望使用你的应用时同时还能聊天、上网、看视频或其它，所以请让你的snap view能满足用户的需求，同时在Snap以及非Snap状态时能流畅的切换。</p>
<p>2、Filled View。用户可能将其它应用作为Snap View而把你的应用作为Filled View。注意考虑到水平方向减少面积时你的应用如何更好的适应。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pAFRxqOa4iSr9jcGmNZbP2y1lb8ijMI8tsuzW8GQrY8fDIdRnUbxtkzwPCKuMRZbmICcc1oWex6gg29PVXLd_5Q1Uv73hpyAq/win8.jpg?psid=1" alt="" /></p>
<p>Win8启动界面</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/metro.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
