zoukankan      html  css  js  c++  java
  • 使用C#开发Metro 风格应用的路线图 metro设计原则

    使用 Metro 风格设计

    内容是 Metro 风格应用的核心,并且在镶边前放置内容是 Metro 风格应用设计的关键。其他一切都是附属—或镶边—,可帮助显示和实现与内容的交互。

    显示内容

    设计你的应用 UI 以显示内容。

    清除并打开布局

    • 仅在屏幕上保留最相关的元素,从而最大程度地减少干扰,帮助人们沉浸在内容中。
    • 移除线条、框和不必要的图形效果(如模糊和渐变),使界面有充分的空间来显示内容。使用开放空间来构建内容框架。
    • 限制屏幕上持久显示的导航框,如选项卡。让人们关注当前内容,避免花哨的镶边分散注意力。

    清除信息层次结构  Metro 设计语言建立在整齐、美观的版式上,可帮助用户了解内容的层次结构。使用版式而不是线条和框,以帮助建立结构和层次结构。

    • 对文本使用一致的大小、粗细和颜色,可以传递出内容的重要性信息。各种变化要小,这样人们可以轻松看到内容在整体层次结构中的组合方式。请参阅文本和版式指南
    • 使用默认样式表来获得文本的预定义类型渐变。

    Metro 风格剪影  当人们专注于内容时,这些组成内容的部件便形成了应用程序的标识。 一个熟悉的剪影可帮助人们本能地将你的应用识别为 Metro 风格(与其相对,如一个网页)。

    • 与 Metro 风格剪影保持一致可营造一种亲切感和信任感。
    • 首先使用 Visual Studio Grid 或 Split 项目模板来获得布局。请参阅 Visual Studio Metro 风格应用的 JavaScript 项目模板指南。

    与内容交互

    使用交互可以使用户掌握控制权,且让他们感到自信。

    直接交互  人们与内容交互的最自然方式是直接参与,无需中间镶边。

    • 在可能的情况下,要求人们通过直接控制内容来完成操作,而不是使用控件进行间接控制。

      例如,让人们点按某个项目以查看其详细信息,横向滑动以选择它,拖动以移动它,缩小以查看完整上下文—,而不是在屏幕上添加按钮来执行这些操作。

    • 导航长的内容列表时可以使用语义缩放方法,该方法用起来非常迅速、流畅并且以内容为中心。

    利用边缘  某些操作无法通过直接控制来完成。对于那些需根据上下文显示的命令,仅在需要时才显示,以避免弄乱你的画布。利用屏幕或设备的边缘,人们可以放心地找到命令。

    • 将这些命令放置在应用栏中,这样,从上边缘或下边缘轻扫可将其按需显示出来,在用户完成操作后可将其取消。
    • 利用超级按钮(从右边缘轻扫可将其按需显示出来)调用“搜索”、“共享”、“设备”或“设置”超级按钮。
    • 避免在屏幕上持久放置命令,并避免显示可使用超级按钮访问的合约重复入口点。
    • 设计应满足舒适的要求,并将常用的交互表面放在边缘附近。

    有关详细信息,请参阅命令设计

    保持迅速和流畅

    以相应的精力快速响应用户操作。

    有针对性的动画  

    运动是 Metro 设计语言的核心部分。精心设计的动画可以使应用变得更丰富,并且使体验感觉精良和完美。

    • 使用有针对性的动画可直观地与体验联系起来,并进行阐述。在流畅的界面中,一切事物都有来龙去脉。
    • 利用特定情景动画的动画库集,其目的是传递信息。熟悉的运动可以增强对概念的理解,帮助人们了解期待的内容,以及建立自信。请参阅实现 UI 动画部分中的动画指南。

    触控功能设计  

    Metro 风格应用的设计首先要考虑触控功能。它们利用了手和手指的优势,并且考虑了舒适度和人机工程学。

    • 充分使用 Windows 8 触控功能语言并使用规定的手势,让人们始终都可以自然地控制内容。有关详细信息,请参阅触控交互设计
    • 使内容紧紧跟随你的手指。除了考虑点按外,使用滑动交互(如语义缩放)可让人们快速轻松地导航内容并与其交互。
    • 提供触控功能的即时视觉反馈,这样人们可以放心地知道自己是否命中了预定目标。保持交互的可逆性,并且仅在人们确认的情况下提交操作,以便提供发现错误的空间并鼓励探索。
    • 请勿构建单独的触控和鼠标交互。

    内置控件  

    利用内置控件以获得流畅、优美、一致的动画和优化的触控功能行为。下面举几个例子:

    • 通过轻扫手势(横向滑动)的选择功能会在 ListView 控件内构建。它可以扩展为语义缩放,让人们快速流畅地在长列表中进行导航。请参阅 ListView 控件指南。
    • FlipView 控件可让用户通过拖动在项目间移动,并且内置了过渡动画。
    • 按钮、切换、复选框、单选按钮、评级以及滑块控件都提供了有关向下触控的视觉反馈,仅在向上触控时提交操作,同时允许用户通过拖动方式取消,从而撤销操作。请参阅按钮、切换、复选框、单选按钮、日期和时间选取器、评级和滑块控件指南。

    请参阅内置控件的列表详细用户体验 (UX) 指南

    巧妙地贴靠和缩放

    在每个外观规格上都形成绝佳体验,且每个视图选项都向用户公开。

    按比例缩放为多个外观规格  你的应用有机会在数以亿计的运行 Windows 8 的电脑上使用。这些电脑的屏幕大小和分辨率千差万别,范围从 <10" 的平板电脑到 >27" 的屏幕。

    • 通过使用平台控件中内置的流动布局支持,充分利用屏幕上的不动产。例如,ListView 将会基于可用的空间自动重排内容。
    • 平台将根据设备屏幕大小和分辨率实现自动缩放。 提供了 3 种大小的资产,或使用标量的矢量图形以确保你的应用看上去始终清晰和完美。请参阅按比例缩放屏幕指南按比例缩放像素密度指南
    • 使用 Microsoft Visual Studio 中的模拟器,查看你的应用在不同外观规格上的外观。

    查看状态的设计  人们通常会运行多个任务,并通过贴靠并排运行两个应用。所有应用都必须实现贴靠状态,并且较长的贴靠状态要求用户将你的应用在屏幕上保留较长时间。请参阅贴靠和填充视图指南

    • 设计一个可提供应用功能视图的有用贴靠视图。当用户在多个视图状态间切换时保留用户的上下文。
    • 贴靠后,应用的宽度会固定为 320 像素,但高度是可变的。垂直平移可避免与边缘和贴靠边线冲突。
    • 当你的应用在屏幕上时也可以贴靠其他应用,因此请将你的应用设计为可从最小宽度 1024 像素中顺利重排。

    使用正确的合约

    合约是将 Metro 风格应用与系统 UI 绑定在一起的纽带。已实现相同合约的两个应用可以搭配使用,以完成广泛或复杂的方案。

    • 对于搜索、共享和文件选取器等一些最常见的合约,请首先使用对应的 Visual Studio 项目模板。
    • 依赖超级按钮来获得用户可放心使用的一致调用模型。应避免在应用画布上创建备选 UI 来调用合约,这样会使用户产生困惑。
    • 请参阅应用合约的完整列表。

    共享  共享合约可让人们将一个应用中的数据与其他应用共享。源应用是提供一些要共享内容的应用,而目标应用会接收使用一组常见数据格式的共享内容。请参阅共享内容指南

    • 每个应用都应当是共享源,并且尽可能采用最广泛的格式。
    • 用于发布、存储或转换共享数据的应用非常适合作为共享目标。例如,通信、社交网络和启用连接的设备的应用。

    搜索  搜索合约可让人们搜索 Windows 中任何位置的应用内容。结果由应用提供,并在应用自身的 UI 中显示。请参阅搜索指南和核对清单

    • 使用搜索超级按钮,而不是自定义的应用内搜索,当范围是应用的整个内容集(如搜索商店应用中的某个产品)时尤其如此。请勿将搜索用作现成的“查找”功能,该功能的范围限制为当前视图(如在某个文档中查找某个字词)。
    • 提供搜索建议可帮助人们更快地查找某些内容。
    • 提供一种可在结果页面和应用的主 UI 间导航的方式。

    文件选取器    文件选取器合约可让人们从其他应用访问某个应用的内容。当调用文件选取器时,用户可以浏览和选择本地存储或支持文件选取器合约的其他应用中的文件。请参阅文件选取器指南

    • 如果你的应用访问或存储了对其他上下文中的用户非常有用的文件,则可以使用该合约。
    • 利用 ListView 控件可获得内置流动布局和选择行为。

    在功能强大的磁贴上进行投资

    磁贴功能是应用中的门户。磁贴位于“开始”屏幕上,它是应用的扩展,与传统图标相比它提供的信息更个性化,也更吸引人。在功能强大的磁贴上进行投资,这将引起人们对你的应用的关注。请参阅磁贴指南

    • 使磁贴显示的内容满足用户需求,并且当应用内容发生更改时进行更新,使内容保持最新状态。提供了各种预定义的磁贴模板,可选择最适合你的内容类型的设计。
    • 参考位于你的应用主页上的内容,这样用户在启动应用后可以轻松找到它。
    • 使用辅助磁贴来激发人们的兴趣,经常更新“开始”屏幕上应用中的子部分内容。请参阅辅助磁贴指南

    感觉已连接且处于活动状态

    通过实时磁贴和通知提供全新的内容,让人们感觉已连接到你的应用。实时磁贴和通知使用相同的基础结构,它们可于应用在本地运行时使用 Windows 推送通知服务随时更新或在预先安排的时间更新。

    实时磁贴  在你的应用磁贴上提供动态、相关和个性化的内容,持续吸引人们的注意力。 新颖的磁贴内容会让人们有理由将磁贴置于“开始”屏幕上的显眼位置,并多次启动应用。

    • 实时磁贴最多可在 5 个更新之间循环。例如,一个新闻应用的实时磁贴每天可在多个事件之间循环。
    • 实时更新中显示的内容应该可以从你的应用主页访问。如果这些过期通知变得无关紧要或无法从主页访问,请删除它们。
    • 使用锁屏提醒显示简单的数字或字形信息。

    通知  应用可以使用通知简要地向人们显示具有时效性的消息,这些消息需要从 Windows 中的任何位置打断才能显示出来。请参阅 Toast 通知指南

    • 大多数应用应当是无提示的—人们应选择启用应用中的通知。
    • 人们可以控制应用的通知功能,这样仅当它们确实具有时效性和相关性时才进行通知。如果它们非常重要,则会在应用的磁贴上显示错过的通知。
    • 如果短时间内出现了多个更新,则会对通知进行组合。
    • 请勿使用通知来显示错误或警告。错误应另外显示在内联或弹出项目中,以及消息对话框中。

    漫游到云

    漫游  通过漫游数据在设备间形成一个持续的体验,这样人们可以正确地选择他们退出时的任务。请参阅漫游应用数据指南

    • 使用 Microsoft 帐户和每位用户的云存储来存储和漫游数据、状态和少量的用户内容。
    • 非常适合漫游的应用设置示例有:
      • 天气应用中的城市,以及摄氏温度与华氏温度首选项
      • 新闻应用中用户订阅的 RSS 源
      • 体育应用中最喜欢的球队
    • 非常适合漫游的应用状态示例有:
      • 阅读应用中读到的最远位置
      • 游戏中已完成的上次检查点或动作
      • 音乐应用中上次播放的曲目

    进程生命期管理(应用生命期)  通过在没有进行明确保存操作的情况下保留用户状态,确保一种持续的体验。请参阅管理应用生命期指南

    • 一般情况下,可以恢复用户退出时的应用,而不是重新启动。人们应能够切换到其他应用,返回到购物车、未完成的电子邮件或他们退出时暂停的游戏。
    • 如果自用户上次访问以来经过了很长时间,并且以前的上下文变得无关紧要,则重新启动应用。例如,在新闻应用中,如果自用户上次打开某篇现在已过期的文章以来经过了很长时间,则将用户引导至主页。
    • 请勿在应用移动到屏幕外时终止应用。保持应用生命期与系统一致,以确保你的用户可以尽可能有效地返回你的应用。请勿向用户提供终止你的应用的方法。

    充分利用 Metro 风格设计原则

    使用这些原则来帮助引导你的设计。有关详细信息,请参阅 Metro 风格设计原则

    为出色的技能感到自豪

    • 全身心地投入到许多人经常会看到的一些细节上。
    • 设计出每个阶段都完美无缺的体验。

    实现以较少投入取得极大成绩

    • 解决干扰问题,不要扼杀创新。让人们沉浸于他们喜欢的事物,他们会探索其余事物。
    • 仅在屏幕上保留最相关的元素,从而形成有针对性的简洁体验,使人们可以沉浸于内容之中。

    保持迅速和流畅

    • 让人们直接与内容进行交互,利用与其相符的精力对操作进行响应。
    • 通过使用有意义的运动使得体验更加丰富,形成持续的感觉并进行阐述。

    实现真正意义上的数字化

    • 充分利用数字媒体。突破物理限制,创建比实际更有效更轻松的体验。
    • 接受这一事实:我们都是屏幕上的像素。设计时使用的色彩和图像应该是显眼、充满活力且明快的,超越现实世界材料的限制。

    合作共赢

    • 利用生态系统并与其他应用、设备和系统搭配使用,为人们完成各种方案。
    • 符合 UI 模型以减少冗余。充分利用人们所掌握的知识,提供一种熟悉感、控制感和自信。
  • 相关阅读:
    大战设计模式【5】—— 工厂方法模式
    通过spring抽象路由数据源+MyBatis拦截器实现数据库自动读写分离
    大战设计模式【4】—— 简单工厂模式
    大战设计模式【3】—— 装饰模式
    大战设计模式【2】—— 观察者模式
    大战设计模式【1】—— 策略模式
    回顾:maven配置和常用命令整理
    idea properties文件unicode码问题
    Nginx学习笔记
    tomcat添加context方式部署web应用
  • 原文地址:https://www.cnblogs.com/icuit/p/2477778.html
Copyright © 2011-2022 走看看