元素周期表Periodic Table of the Elements

备注

本文讨论了我们在 混合现实设计实验室中创建的探索示例,这是我们与混合现实应用开发的知识和建议。This article discusses an exploratory sample we’ve created in the Mixed Reality Design Labs, a place where we share our learnings about and suggestions for mixed reality app development. 我们设计相关的文章和代码将随着我们的新发现而发展。Our design-related articles and code will evolve as we make new discoveries.

定期表 是 Microsoft 混合现实设计实验室的开源示例应用。Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. 了解如何使用 对象集合 在三维空间中布局对象的数组。Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. 还将了解如何创建响应 HoloLens 标准输入的种不可交互对象。Also learn how to create interactable objects that respond to standard inputs from HoloLens. 您可以使用此项目的组件来创建自己的混合现实应用程序体验。You can use this project's components to create your own mixed reality app experience.

元素应用的 Period 表

演示视频Demo video

使用混合现实捕获记录了 HoloLens 2Recorded with HoloLens 2 using Mixed Reality Capture

关于应用About the app

元素的周期性表在三维空间中直观显示化学元素及其每个属性。Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. 它结合了 HoloLens 的基本交互,如注视和分流。It incorporates the basic interactions of HoloLens such as gaze and air tap. 用户可以了解带有动画3D 模型的元素。Users can learn about the elements with animated 3D models. 它们可以直观地了解元素的 electron shell 及其核心,这是由 protons 和 neutrons 组成的。They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.

背景Background

在我首次体验 HoloLens 后,我知道我想在混合现实中试用定期表应用程序。After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. 由于每个元素都有多个与文本一起显示的数据点,因此,我认为这对于浏览三维空间中的排版组合非常重要。Since each element has many data points that are displayed with text, I thought it would be great subject matter for exploring typographic composition in a 3D space. 使用户有机会直观显示元素的 electron 模型是此项目的另一个有趣的部分。Giving users the chance to visualize the element's electron model was another interesting part of this project.

设计Design

对于周期性表的默认视图,我想要将包含每个元素的 electron 模型的三维方框。For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. 每个框的表面都是透明的,这样用户就可以大致了解元素的音量。The surface of each box would be translucent so that the user could get a rough idea of the element's volume. 使用注视和空中点击,用户可以打开每个元素的详细视图。With gaze and air tap, the user could open up a detailed view of each element. 为了使表视图和详细信息视图之间的过渡平滑和自然,我使其类似于实际生活中打开的方框的物理交互。To make the transition between table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.

设计草图Design sketch
设计草图Design sketches

在详细信息视图中,我想要将每个元素的信息可视化到三维空间中完美呈现的文本。In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. 动画 3D electron 模型将显示在中心区域,并且可以从不同角度查看。The animated 3D electron model is displayed in the center area and can be viewed from different angles.

交互

原型Prototypes
交互原型Interaction prototypes

用户可以通过点击表格底部的按钮来更改曲面类型,它们可以在平面、圆柱、球和散点之间切换。The user can change the surface type by air tapping the buttons on the bottom of the table - they can switch between plane, cylinder, sphere, and scatter.

此应用中使用的公共控件和模式Common controls and patterns used in this app

种不可交互对象 (按钮) Interactable object (button)

种不可交互对象 是一个对象,它可以响应基本的 HoloLens 输入。Interactable object is an object, which can respond to basic HoloLens inputs. 它作为 prefab/script 提供,你可以轻松地将其应用于任何对象。It's provided as a prefab/script, which you can easily apply to any object. 例如,你可以在场景种不可交互中发出咖啡杯,并对输入(如注视、分流、导航和操作手势)做出响应。For example, you can make a coffee cup in your scene interactable and respond to inputs such as gaze, air tap, navigation, and manipulation gestures. 了解详细信息Learn more

nteractable 对象

对象集合Object collection

对象集合 是一个对象,可帮助您在不同的形状中布局多个对象。Object collection is an object, which helps you lay out multiple objects in various shapes. 它支持平面、圆柱、球面和散点图。It supports plane, cylinder, sphere, and scatter. 可以配置其他属性,如 radius、行数和间距。You can configure additional properties such as radius, number of rows and the spacing. 了解详细信息Learn more

对象集合

技术详细信息Technical details

可在 混合现实设计实验室 GitHub上查找元素应用的定期表的脚本和 prototyping。You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

针对 HoloLens 2 的移植故事Porting story for HoloLens 2

阅读有关如何用 HoloLens 2 的 instinctual 交互更新元素应用的定期表的文章。Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

元素周期表 2.0Periodic Table of the Elements 2.0

关于作者About the author

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
用户体验设计师 @MicrosoftUX Designer @Microsoft

另请参阅See also