3D 應用程式啟動程式設計指引3D app launcher design guidance

當您將 Windows Mixed Reality 沉浸式 (VR) 耳機時,請輸入 Windows Mixed Reality 首頁。When you put on a Windows Mixed Reality immersive (VR) headset, you enter the Windows Mixed Reality home. 首頁會以山脈和水的 cliff 來視覺化,但您可以 選擇其他環境,甚至建立自己的) 。The home is visualized as a house on a cliff surrounded by mountains and water, but you can choose other environments and even create your own). 在首頁的空間內,使用者可以自由排列和組織他們在意任何方式的3D 物件和應用程式。Within the home's space, a user is free to arrange and organize the 3D objects and apps that they care about any way they want. 3d 應用程式啟動器 是使用者的混合現實房子中的「實體」物件,可選擇啟動應用程式。A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

範例: Floaty 鳥3D 應用程式啟動器Example: Floaty Bird 3D app launcher
(虛構應用程式) 的 Floaty 鳥3D 應用程式啟動器範例Floaty Bird 3D app launcher example (fictional app)

3D 應用程式啟動器建立流程3D app launcher creation process

建立3D 應用程式啟動器有3個步驟:There are 3 steps to creating a 3D app launcher:

  1. 設計和 concepting (本文) Designing and concepting (this article)
  2. 模型化和匯出Modeling and exporting
  3. 將它整合到您的應用程式中:Integrating it into your application:

設計概念Design concepts

太棒了Fantastic yet familiar

您的應用程式啟動器所居住的 Windows Mixed Reality 環境,是 fantastical/科幻的一部分。The Windows Mixed Reality environment your app launcher lives in is part familiar, part fantastical/sci-fi. 最佳的啟動器會遵循此世界的規則。The best launchers follow the rules of this world. 您可以想要如何從您的應用程式中取得熟悉的代表性物件,但是將一些實際現實的規則折到最多。Think of how you can take a familiar, representative object from your app, but bend some of the rules of actual reality. 魔術將會產生。Magic will result.

直觀Intuitive

當您查看您的應用程式啟動程式時,其目的是要啟動您的應用程式,應該很明顯且不會造成任何混淆。When you look at your app launcher, its purpose - to launch your app - should be obvious and shouldn’t cause any confusion. 例如,請確定您的啟動器是您應用程式的明確代表,不會與懸崖之屋中的某一段 décor 混淆。For example, be sure your launcher is an obvious-enough representative of your app that it won’t be confused for a piece of decor in the Cliff House. 您的應用程式啟動程式應邀請人員觸控/選取它。Your app launcher should invite people to touch/select it.

範例:全新附注3D 應用程式啟動器Example: Fresh Note 3D app launcher
全新附注3D 應用程式啟動器範例 (虛構應用程式)Fresh Note 3D app launcher example (fictional app)

首頁規模Home scale

3D 應用程式啟動器會存留在懸崖之屋中,而且其預設大小應該與空間中的其他「實體」物件有意義。3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. 如果您將啟動器放置在房屋工廠或某些傢俱旁邊,則應該在家裡、大小調整。If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. 一個不錯的起點是查看它看起來如何查看30個三分,但是請記住,使用者可以視需要擴大或縮小。A good starting point is to see how it looks at 30 cubic centimeters, but remember that users can scale it up or down if they like.

擁有能力Own-able

應用程式啟動程式應該會像是某個人很高興在其空間中擁有的物件。The app launcher should feel like an object a person would be excited to have in their space. 它們幾乎都是以這些專案為其本身,因此啟動器應該會像是使用者認為需要足夠的東西,以找出並保持在附近。They’ll be virtually surrounding themselves with these things, so the launcher should feel like something the user thought was desirable enough to seek out and keep nearby.

範例: Astro 變形3D 應用程式啟動器Example: Astro Warp 3D app launcher
Astro (虛構應用程式) 的變形3D 應用程式啟動器範例Astro Warp 3D app launcher example (fictional app)

識別Recognizable

您的3D 應用程式啟動器應該會立即將「您的應用程式品牌」表達給看到該應用程式的人員。Your 3D app launcher should instantly express “your app’s brand” to people who see it. 如果您的應用程式中有星號字元或特別可識別的物件,我們建議您在設計中使用該字元。If you have a star character or an especially identifiable object in your app, we recommend using that as a significant part of your design. 在混合現實世界中,物件會比單獨的標誌更吸引使用者。In a mixed reality world, an object will draw more interest from users than just a logo alone. 可辨識的物件會快速且清楚地傳達品牌。Recognizable objects communicate brand quickly and clearly.

體積Volumetric

您的應用程式不只是將您的標誌放在平面平面上,還需要一天的時間來呼叫它。Your app deserves more than just putting your logo on a flat plane and calling it a day. 您的啟動器應該會像是使用者空間中令人興奮的立體實體物件。Your launcher should feel like an exciting, 3D, physical object in the user’s space. 最好的方法是想像您的應用程式在 Macy 的感恩節日行列中將會有一個球形球。A good approach is to imagine your app was going to have a balloon in the Macy’s Thanksgiving Day Parade. 問您自己,為什麼會讓人們看到街道?Ask yourself, what would really wow people as it came down the street? 所有的觀賞角度看起來很棒嗎?What would look great from all viewing angles?

僅限標誌 標誌Logo only Logo only

使用 字元更容易辨識 的字元更容易辨識More recognizable with a character More recognizable with a character

一般方法(非驚訝)感覺一般一般 方法,而非驚訝地感覺 一般Flat approach, not surprisingly, feels flat Flat approach, not surprisingly, feels flat

體積型方法更能展現您的應用程式 體積型方法,讓您的應用程式更清楚展示Volumetric approach better showcases your app Volumetric approach better showcases your app

良好3D 模型的秘訣Tips for good 3D models

  • 規劃應用程式啟動器的維度時,大約會有 30 cm 的 cube。When planning dimensions for your app launcher, shoot for roughly a 30-cm cube. 因此,1:1:1 大小的比率。So, a 1:1:1 size ratio.
  • 模型必須在10000多邊形下。Models must be under 10,000 polygons. 深入瞭解 (LODs 的三角形計數和詳細資料層級) Learn more about triangle counts and levels of details (LODs)
  • 在沉浸式耳機上測試。Test on an immersive headset.
  • 盡可能在您的模型幾何中建立詳細資料–不依賴材質取得詳細資料。Build details into your model’s geometry where possible – don’t rely on textures for detail.
  • 建立「水緊密」封閉幾何。Build “water tight” closed geometry. 沒有任何未模型化的漏洞。No holes that aren't modeled in.
  • 在您的物件中使用自然材質。Use natural materials in your object. 想像一下在現實世界中製作它。Imagine crafting it in the real world.
  • 確定您的模型在不同的距離和大小都能妥善閱讀。Make sure your model reads well at different distances and sizes.
  • 當您的模型已準備好開始時,請閱讀 匯出資產的指導方針When your model is ready to go, read the exporting assets guidelines.

材質中具有微妙詳細資料的模型Model with subtle details in the texture
材質中具有微妙詳細資料的模型Model with subtle details in the texture

避免事項What to avoid

  • 請勿使用高對比的詳細資料或小型、忙碌模式和紋理。Don't use high-contrast details or small, busy patterns and textures.
  • 請勿使用精簡型幾何–它不會在某個距離正常運作,而且別名會不正確。Don't use thin geometry – it doesn’t work well at a distance and will alias badly.
  • 不要讓模型的某些部分延伸超過1:1:1 大小比例。Don't let parts of your model extend too much beyond the 1:1:1 size ratio. 它會建立調整問題。It will create scaling problems.

避免高對比、小型忙碌模式Avoid high-contrast, small busy patterns
避免高對比、小型、忙碌模式Avoid high-contrast, small, busy patterns

如何處理類型How to handle type

  • 我們建議您的類型會佔用大約1/3 的應用程式啟動器 (或更多) 。We recommend your type takes up about 1/3 of your app launcher (or more). 型別是讓人們知道您的啟動器實際上是啟動程式的主要事物,所以如果它很大,就很好用。Type is the main thing that gives people an idea that your launcher is, in fact, a launcher so it’s nice if it’s substantial.
  • 避免將類型設為寬度-請嘗試將其保留在應用程式啟動器核心維度的範圍內 (更多或更少) 。Avoid making type super wide – try to keep it within the confines of the app launchers core dimensions (more or less).
  • 一般類型可以運作,但在某些環境中,可能很難查看。Flat type can work, but it can be hard to view from certain angles and in certain environments. 您可以考慮將它放在其背後的穩固物件或背後,以協助進行此工作。You might consider putting it a solid object or backdrop behind it to help with this.
  • 將維度加入至您的型別在3D 中感覺很不錯。Adding dimension to your type feels nice in 3D. 將類型的側邊著色為不同、較深色的色彩有助於可讀性。Shading the sides of the type a different, darker color can help with readability.

沒有背景的平面類型可能難以從特定角度進行查看,而在某些環境中, 沒有任何背景的平面類型可能難以從特定角度和某些環境中查看Flat type without a backdrop can be hard to view from certain angles and in certain environments Flat type without a backdrop can be hard to view from certain angles and in certain environments

具有內建圖的型別可以正常運作 ,而且內建的背景可以正常運作Type with a built-in backdrop can work well Type with a built-in backdrop can work well

如果您將側邊的拉伸類型加上陰影,則 如果您將側邊加上陰影,則拉伸類型可以正常運作Extruded type can work well if you shade the sides Extruded type can work well if you shade the sides

輸入可運作的色彩Type colors that work

  • 白色White
  • 黑色Black
  • 亮色半形色彩Bright semi-saturated color

輸入可運作的色彩。Type colors that work.
輸入可運作的色彩Type colors that work

要避免的色彩Colors to avoid

造成問題的類型色彩包括:Type colors that cause trouble include:

  • 中音調Mid-tones
  • 灰色Gray
  • 過度飽和色彩或 desaturated 色彩Over-saturated colors or desaturated colors

造成問題的類型色彩。Type colors that cause trouble.
造成問題的類型色彩Type colors that cause trouble

光源Lighting

應用程式啟動程式的光源來自懸崖之屋環境。The lighting for your app launcher comes from the Cliff House environment. 請務必在整個單元中的數個位置測試您的啟動程式,讓它在燈光和遮蔽中都能美觀。Be sure to test your launcher in several places throughout the house so it looks good in both light and shadows. 好消息是,如果您已遵循本檔中的其他設計指導方針,則您的啟動器應該在懸崖之屋的大部分光源中都是不錯的形式。The good news is, if you’ve followed the other design guidance in this document, your launcher should be in good shape for most lighting in the Cliff House.

測試啟動程式如何在環境中的各種燈光中尋找的好地方,就是 Studio、媒體室、外部和後 Patio 的任何地方, (具有草坪) 的具體區域。Good places to test how your launcher looks in the various lights in the environment are the Studio, the Media Room, anywhere outside and on the Back Patio (the concrete area with the lawn). 另一個不錯的測試是把它放在半淺色和半影子,看看它的樣子。Another good test is to put it in half light and half shadow and see what it looks like.

確定您的啟動器在燈光和遮蔽中都看起來不錯。Make sure your launcher looks good in both light and shadows.
確定您的啟動器在燈光和遮蔽中都很美觀Make sure your launcher looks good in both light and shadows

紋理Texturing

撰寫您的材質Authoring your textures

您3D 應用程式啟動器的結束格式將會是 glb 檔案,這是使用 .PBR (實際轉譯) 管線所建立。The end format of your 3D app launcher will be a .glb file, which is made using the PBR (Physically Based Rendering) pipeline. 這可能是一項複雜的程式,如果您還沒有這麼做,現在是使用技術演出者的好時機。This can be a tricky process - now is a good time to employ a technical artist if you haven't already. 如果您是美麗 DIY-er,請花時間 研究並學習 .pbr 的術語 ,以及開始之前的幕後工作,將可協助您避免常見的錯誤。If you’re a brave DIY-er, taking the time to research and learn PBR terminology and what’s happening under the hood before you begin will help you avoid common mistakes.

範例:全新的備註應用程式Example: Fresh Note app
全新附注3D 應用程式啟動器範例 (虛構應用程式)Fresh Note 3D app launcher example (fictional app)

我們建議 Allegorithmic 使用「 物質刷 」來撰寫您的最終檔案。We recommend using Substance Painter by Allegorithmic to author your final file. 如果您不熟悉如何在物質刷中撰寫 .PBR 著色器,請參閱以下 教學課程。If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

如果您更熟悉上述其中一項,則 (CoatQuixel Suite 2Marmoset Toolbag 也可以使用。 ) (Alternately 3D-Coat, Quixel Suite 2, or Marmoset Toolbag would also work if you’re more familiar with one of these.)

最佳作法Best practices

  • 如果您的應用程式啟動程式物件是針對 .PBR 而撰寫的,則將它轉換為懸崖之屋環境應該很簡單。If your app launcher object was authored for PBR, it should be straightforward to convert it for the Cliff House environment.
  • 我們的著色器預期會有金屬/粗糙度的工作流程– Unreal 的 .PBR 著色器是關閉的傳真。Our shader is expecting a Metal/Roughness work flow – The Unreal PBR shader is a close facsimile.
  • 匯出紋理時,請記住 建議的材質大小When exporting your textures, keep the recommended texture sizes in mind.
  • 請務必為您的物件建立即時光源,這表示:Make sure to build your objects for real-time lighting—this means:
    • 避免內建陰影-或繪製陰影Avoid baked shadows – or painted shadows
    • 避免紋理中的內建光源Avoid baked lighting in the textures
    • 使用其中一個 .PBR 材質撰寫套件來取得為著色器產生的正確對應Use one of the PBR material authoring packages to get the right maps generated for our shader

請參閱See also