Metro风格用户界面设计原则

Metro风格用户界面设计原则这是翻译的一篇国外论坛上的文章 并不是很准确 想看原文的可以到这个网址 http www stephanemass com metro design principles nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp Metro 用户界面设计原则 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 注 MetroUI Metro 风格用户界面 即所谓的 Win8 风格 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 自从我在伦敦开始为用户贴近 MetroUI 和 Is

        这是翻译的一篇国外论坛上的文章,并不是很准确,想看原文的可以到这个网址:http://www.stephanemassey.com/metro-design-principles/。

       

       Metro用户界面设计原则

       (注:Metro UI,Metro风格用户界面,即所谓的Win8风格)

       自从我在伦敦开始为用户贴近Metro UI和Isotope(同位素,这里我不是很理解)工作以后,我就有一种想和你分享什么是Metro UI和我怎样理解它的冲动。

       当我们谈到“Metro”的时候总是会说到被微软开发的设计风格。准确地说Metro并不是一个新的名词,它在上世纪90年代中期左右开始发展并被应用于Encarta95(英卡塔,微软的电子百科全书)和MSN2.0的基础。多年来我们在Windows Media Center和Zune(品牌名,微软开发的一款音乐播放器)经常看到它。后来被作为视觉设计语言而精确化,并且可以在Windows Mobile操作系统、Windows Phone7、最近Xbox 360汽车仪表盘的更新和Windows 8中看到它。

       微软Segoe font family(微软公司推出的一种字体系列)一个特别制作的版本,SegoeWP,被用来作为所有印刷业(*)主要的字体。它在台北国际电脑展被微软确认用于Windows8操作系统,(尤其是Windows8的新标志)作为Windows7的继承。它的灵感来源于地铁,于是命名为Metro。

       Metro可以被分成两个部分:Metro设计原则和Metro设计语言。这些原则是Metro用户体验的关键,它扮演的角色是像Windows Phone 7 和the Xbox Dashboard update一样的产品的指导方针。后来,Metro语言成为了一套视觉财富,一种用户相关的交互,一个过渡效果、动作的集合,一种应用程序流的基础和规则,它结合了一种统一标准的用户体验。

       用类比来说明Metro设计原则和语言的关系的抽象概念就像“爱”(原则)可以被用一个具体的符号“♥”或“l-o-v-e”四个字母表示一样。我相信你可以通过无数种的方式去表达“爱”的概念,包括它本身的读音、照片或者其他元素。

       对于概念的有形表示就是语言。如果有一个像玻璃一样的原则,我需要三个图标来表现它:一支笔(写),一颗星(最喜欢的)和一个十字(关闭),再有一个像按钮一样的控制器就可以将这些表现为一种视觉语言。如果我告诉你这些,我相信你可以从其他图标设置控制器中明白它。

Metro风格用户界面设计原则

排版

       排版,排版,排版……自从这个概念被引入到Metro中后,几乎所有的事情都像是在排版。排版并不是Metro的全部,它并没有像图片、图标、动作、声音一样重要。记住最重要的两个原则:信息是显示的主角。如果它的意义是通过排版表达信息,那么其他就不要强迫它了。

如果包含了一定的设计技巧排版就会好看。例如,在Metro中,我们使用不同的尺寸和宽度来传达结构化信息(下面的例子就很漂亮)。这恰好就是在通过排版把事物从其他媒介中突出出来-它并不是为了排版而排版,而是把排版作为一个有效的、灵活的工具来传达结构化信息。它在一个特殊的区域操作图标、图片和其他媒介-结构化信息是一种有层级的信息,它表现出一种顺序 ,帮助用户把信息按照优先顺序划分。这也是我们不在Metro中使用“项目符号”的原因-如果你给了信息不同的尺寸就不需要他们了。

Windows Phone Metro设计语言

       为了使所有开发者都能够创造Windows Phone应用,微软刚刚发布/谈到了Metro设计原则但当然这意味着开发人员必须创造他们自己的设计语言,这将要花费他们很长时间。创造一门设计语言对像手机这样的现代设备是一个很大的工作量,并且需要很多时间去设计、重复、检验和用户测试。微软手机设计工作室精心制作了一门每个人都可以使用的可靠的语言。

       基于Metro设计原则,微软提供了微软手机Metro设计语言。使用它可以让你为Windows Phone成功地制作一个漂亮、引人注目、始终如一体验的应用。微软WindowsPhone设计语言取决于这些方面:

       导航、布局、成分、排版

       动作

       图解

       图片和照片

       主题和个性化

       触摸手势和目标

       用户界面控制

       计算机硬件

       服务

       市场和品牌

       和抽象的原则相比,语言是实在的。因此在Metro中有一个叫做Hub & Spoke (more here)的具体的导航系统。它有一系列的动作,像单击、双击、点选并按住、弹开、拖动等。也有一个具体的排版,用Segoe格式给结构化信息设置不同的尺寸。还有一套具体的用户界面控制系统像命令按钮、单选按钮、多选按钮、滚动条和其他UI元素。也有具体的应用程序交互元素像枢轴、全景和页面。

       所有这些组构成了Windows Phone Metro设计语言。这是一个全面的,端到端的,灵活的和可扩展的设计语言。

Metro风格用户界面设计原则

       但是,这是体现Metro设计原则这种开箱即用的设计语言的唯一方式吗?不。

       例如,我可以在我的Windows Phone应用程序中使用Helvetica或者Swiss字体吗?当然!作为无衬线字体和其他字体一样可以用来替代Segoe。

       后面还有一段关于作者说以后要发其它文章的,没翻译,没啥技术含量。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/218303.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 上午7:34
下一篇 2026年3月18日 上午7:35


相关推荐

  • MySQL数据库备份和恢复方案小结[通俗易懂]

    MySQL数据库备份和恢复方案小结[通俗易懂]这两天在调研MySQL数据库的备份和恢复方案,备份对象是对大量Innodb表,或者加上少量的MyISAM表。 InnoDB备份常见问题:文件一致性:数据文件、缓存、日志文件必须保持严格一致。加锁的方法没法保证一致性,因为InnoDB后台刷新数据是异步进行的。数据一致性:不能一次锁住一张表,这个备份的是不同时刻的表数据;如果一次锁住所有表,innodb的mvcc机制会增加undo日志…

    2022年6月6日
    29
  • 项目总结(1.TOF相机及标定相关)

    项目总结(1.TOF相机及标定相关)1.TOF相机简介:TOF是Timeofflight的简写,直译为飞行时间的意思。所谓飞行时间法3D成像,是通过给目标连续发送光脉冲,然后利用传感器接收从物体返回的光,通过探测光脉冲的飞行时间来得到目标物的距离。TOF的深度精度不随距离改变而变化,基本能稳定在cm级。2.TOF相机缺点:测量距离较常规测量仪器短,一般不超过10米测量结果…

    2022年5月9日
    35
  • caioj 1079 动态规划入门(非常规DP3:钓鱼)(动规中的坑)「建议收藏」

    caioj 1079 动态规划入门(非常规DP3:钓鱼)(动规中的坑)「建议收藏」caioj 1079 动态规划入门(非常规DP3:钓鱼)(动规中的坑)

    2022年4月20日
    59
  • mt4下载_mt4电脑下载

    mt4下载_mt4电脑下载目前,mt4软件已其特有的优势吸引了众多投资者,成为了这些年比较受欢迎的外汇交易平台。对于经常用手机进行交易的人员来说,就需要下载安卓版或者苹果版。那么分别以2个版为例,讲解一下如何下载。下面介绍第一方式:从网上下载,这个是通用方法,各个版本都可以下,例如:mt4download。cnMT4移动端优势特别多,随时随地使用,并且上面的一些功能也是其他软件没法比的。第二种方式:用googleplay下载安卓版。通过googleplay打开和浏览手机。搜索mt4软件,点击管理系统安装按钮,同意

    2022年8月15日
    6
  • OpenClaw实战教程系列第06篇 – 工具调用与 Skills:不只是聊天

    OpenClaw实战教程系列第06篇 – 工具调用与 Skills:不只是聊天

    2026年3月13日
    2
  • SQL查询最大值,返回整行数据

    SQL查询最大值,返回整行数据SQL 查询最大值 返回整行数据 1 问题部分数据如下 未完整展示 如何从 table a 表中查询 p postions 列的最大值对应的一行数据 在这里插入图片描述 2 解答方法 1 先排序 再取第一条 SELECT FROMtable aorderbyp postionsdesc 查询结果如下 在这里插入图片描述经过评论区小伙伴的提醒 这种先排序的方式虽然语法简单 但时间复杂度较高 是 O n logn 方法 2 先查最大值 再找到对应行

    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号