4 设计Metro风格的Windows 8应用(朱宏)

设计Metro风格的应用Metro风格应用的8个特点1.Metro风格的设计2.快速且流畅3.出色的贴靠和缩放4.正确使用Contracts5.使用活动磁贴—提升用户体验6.仿佛永远在线7.漫游到云端8.拥抱Metro原则Metro风格的设计内容重于形式内容重于形式内容最为重要。用户会沉浸在他们喜爱的内容中屏幕上只留下最相关的元素，以便最大程度地减少干扰传统上，添加形式是为了：1.布局2.交互3.导航布局布局给内容呼吸的空间特意留出组织内容的空间，让您可以重点关注正确的内容删除多余的线条和框架，仅将内容本身作为一种组织以及分组排版的方式布局使用metro排版方式在内容中建立一系列的结构和层次固定的大小、粗细和颜色，向用户传达有关每块内容的重要信息使用默认样式表获得预定义的metro样式42pt20pt11pt9pt布局让内容从一个边缘流到另一个边缘只在一个轴上移动，创造一种稳定感来支撑模型牢记人体工程学。沿视图的长边平移景观和肖像沿水平方向平移垂直贴靠布局利用Metro风格的剪影创建视觉对齐效果、结构和清晰度用网格对齐元素，以创建结构化和一致的布局使用VisualStudio模板获得布局交互使用边缘通过从顶部边缘或底部边缘轻扫，使用应用栏调出所需的命令使用超级按钮作为搜索、共享、设置和设备Contracts的入口点(v=VS.85).aspx应用栏大多数应用将使用暂时性应用栏底部应用栏用于命令全局命令在右侧，上下文命令在左侧当选中上下文命令的项目时，可以通过编程调用（例如：DemoStart)如果有单个常用命令，可以将它放置在画布上菜单弹出可以用于显示相关的命令组(例如：DemoPaintPlay)顶部应用栏用于沉浸式视图中的导航（例如：返加按钮和标题）使用弹出作为显示暂时性上下文UI的一种轻量级方法弹出收集信息确认或警告(v=VS.85).aspx在可能的情况下显示内联的错误错误导航导航内容视图会显示您在哪里，不会显示您可能去哪里可以使用中心辐射型()模型来实现信息层次：中心：通常登录页包括顶层部分，可向下延伸到辐射区域辐射区域：显示页面中的一部分内容，向后延伸查看每一项的详细信息避免使用永久性导航形式，比如利用语义缩放在平展层次中的两个列表组之间跳转Contoso之旅旅游指南最后一分钟特价7夜阿拉斯加邮轮最后一分钟特价旅游指南巴塞罗那，西班牙最后一分钟特价7夜阿拉斯加邮轮海景房从内舱升级并节省$43/夜/人！优美的海洋和港口风景窗口$2,099起—双人入住，仅$150/夜/人套房从内舱升级并节省$43/夜/人！优美的海洋和港口风景窗口$2,099起—双人入住，仅$150/夜/人我的行程天气7天芝加哥（3/11–3/19)今天54/43晴天今天54/43晴天今天54/43晴天今天54/43晴天今天54/43晴天景点我的行程旅游指南2012年最热门的目标巴塞罗那，西班牙我的行程城市指南城市指南ContosoTravel旅游指南最后一分钟特价我的行程7夜阿拉斯加邮轮最后一分钟特价旅游指南巴塞罗那，西班牙最后一分钟特价7夜阿拉斯加邮轮海景房从内舱升级并节省$43/夜/人！优美的海洋和港口风景窗口$2,099起—双人入住，仅$150/夜/人套房从内舱升级并节省$43/夜/人！优美的海洋和港口风景窗口$2,099起—双人入住，仅$150/夜/人我的行程天气7天芝加哥（3/11–3/19)今天54/43晴天今天54/43晴天今天54/43晴天今天54/43晴天今天54/43晴天景点我的行程旅游指南2012年最热门目的地巴塞罗那，西班牙演示语义缩放语义缩放设计缩小的视图，以显示您所在的组的更丰富元信息尝试将内容放在1-3页内线性布局，对大型内容集使用网格您可以在缩小的视图中启用关于组的操作（选择或重新排列）例如，新闻应用：选择一个新闻源并将它固定到Start（开始）处，或重新排列新闻源的顺序在放大和缩小视图时，内容的范围应该保持不变语义缩放不是为了导航层次结构中的不同级别(v=VS.85).aspx快速且流畅有针对性的制作动画动画为Metro风格的应用带来了活力并使体验有精雕细琢过的感觉所使用的动画特意制造出一种连续的感觉并帮助建立用户对UI的信心使用内置控件免费获得动画！使用AnimationLibrary（动画库）获得预设计的、基于场景的动画动画是有意图的，而不是视觉装饰参阅有关动画的构建讨论APP-206T或APP-494T，获得更多示例轻扫进行选择点击为主要操作设计以触摸为先遵循Windows8触摸语言并只使用规定的手势集：请参阅BUILDtalkAPP-391T：设计经过触摸优化的Metro风格应用设计以触摸为先设计时应考虑到手和手指点击目标的大小和间距应该适合触摸，您的手指并不是一个指针设计时应考虑到舒适性、人体工程学和封闭设计以触摸为先在触摸时提供即时的视觉反馈，并在释放时触发操作应该是可逆的，因此用户可以放心地浏览让思路超越点击，并充分利用滑动交互。内容应该始终直接跟随您的手指即使只平移1个像素，也可以实现选择并提供更加稳定的轨迹出色的贴靠和缩放设计适用于多视图用户可从事多任务操作。应用可以显示为以下任一布局：宽屏（1366x768+)贴靠视图（必需）最小（1024x768)肖像贴靠贴靠是一个内置Windows8场景建立一个出色的贴靠视图，将您的应用保持在屏幕上设计一个有针对性的贴靠状态在贴靠中垂直平移，以符合人体工程学，并避免与边缘冲突维护贴靠与取消贴靠之间的状态和连续性贴靠和取消贴靠相当容易。当出现这种情况的时候，不要破坏用户的工作演示贴靠缩放PC有各种屏幕尺寸和分辨率使用流动的布局（例如，-ms-grid控件、ListView控件）来利用屏幕缩放至最适合的大小（例如，viewbox控件），以获得固定的布局使用来查看您的应用在不同机器上的外观效果系统提供以分辨率为基础的自动缩放使用可缩放的矢量图形，或提供3种图片资源大小（100%、140%和180%）并对位图格式的图像使用资源加载观看BUILDtalkAPP-207T/847T利用一个精美的HTML5/XAML用户界面到达客户的设备正确使用Windows8Contracts1+1=3。利用其他应用来完成场景超级按钮提供了一致的调用模型，用户始终可以自信地依靠该模型从VSItemTemplate（项目模板）开始（可用于搜索、共享、文件选取器扩展）(v=VS.85).aspx共享共享源共享在线内容的链接共享实际内容的副本共享目标使交互保持简单使用内联控件处理错误或进度(v=VS.85).aspx搜索利用搜索，使用户可以从Windows的任何位置搜索您的内容搜索与查找搜索（使用Contracts)范围是整个应用的内容集结果通常是一个包含搜索项的项清单。然后，在搜索结果页面中，您可以通过导航查看结果项查找（使用应用内UI)范围在当前视图内（例如：在IE或Word中的Ctrl+F）结果通常已经位于您正查看的页面上。您只是需要帮助定位它们即可(v=VS.85).aspx设置将所有应用设置放在一个位置下，用户总是期望在这个地方找到它们不要在应用上创建其他进入设置的入口当用户调用设置时，他们会看到您的应用的基本信息，以及由您的应用指定的设置命令常用设置命令：您的设置类别、帮助、使用条款…一旦用户选择了一个设置命令，将显示设置面板。您的应用控制设置面板内的UI保持简单、最少量的设置Account提升用户体验磁贴磁贴是应用的“窗户”。将它作为应用的扩展对待二级磁贴让用户可以在其开始屏幕上提示应用中有趣的内容提供一种方法来“深入链接”到有趣的、经常更新的应用内容照片应用中的相册、社交应用中的好友、来自源应用的新闻源，等等当关注的内容可固定为磁贴时，在应用栏中提供固定命令利用来调用系统UI，从而固定弹出信息。例如：天气仿佛永远在线活动磁贴活动磁贴可以将用户吸引到您的应用提供新鲜的个性化内容，有助于吸引用户连接到您的内容，刺激他们启动您的内容使用锁屏提醒显示简单的数字或字形信息应该能够从您的应用的主屏幕访问活动更新您可以选择循环最后5个更新：好的示例-新闻应用希望每天发送5个故事或者每天发送一个故事加上辅助图片不好的示例–购物应用每天发送一个新的每日特价通知（最近4天该通知信息仍在循环，但已过时）默认磁贴与内容磁贴、小磁贴和大磁贴都支持活动更新。观看BUILDtalkAPP-396T通知通知Toast通知提供应用上下文之外的瞬时消息当您的应用出现在背景中时，显示toast通知通知用于实时的个人内容，如IM、电话或邮件对您的应用中的上下文相关位置提供快速导航仅将通知用于必须被中断的信息仅当通知是真正时间敏感和与时间有关时才显示通知，否则用户将关闭您的应用合并通知用于在很短的时间内出现多个更新的情况不要使用通知提示错误或警告。在需要的地方使用活动磁贴是用户在开始界面时希望看到新鲜内容的地方漫游到云端漫游利用漫游跨设备维持状态和首选项漫游用户有可能在每台设备上都要设置的首选项：最喜爱的运动队（体育应用）喜欢的电影类型（媒体应用）让用户通过漫游应用数据，跨设备继续执行任务：撰写任务清单撰写电子邮件漫游最适合于用户的首选项、链接和小数据文件(v=VS.85).aspx拥抱Metro原则Metro风格的设计原则技巧上的自豪感琢磨细节信息。每个像素都很关键事半功倍内容优先于形式快速且流畅有针对性的动作和直接交互真实的数字磁贴和通知表现得更加确实可靠以整体取胜利用生态系统资源在//Build/developerscenter上的设计Metro风格的应用应用构建UX指导文章在Beta开发人员中心预览上的规划Metro风格的应用更多问题：maito:appuxguide资源