-ビルド HoloSketch、レイアウト空間および HoloLens 用アプリのスケッチ UX のケース スタディCase study - Building HoloSketch, a spatial layout and UX sketching app for HoloLens

HoloSketch はデバイス上の空間レイアウトおよび holographic エクスペリエンスの構築に役立つ HoloLens 用ツールのスケッチ UX です。HoloSketch is an on-device spatial layout and UX sketching tool for HoloLens to help build holographic experiences. HoloSketch はペアになっている Bluetooth キーボードとマウスだけでなくジェスチャと音声コマンドでは動作します。HoloSketch works with a paired Bluetooth keyboard and mouse as well as gesture and voice commands. HoloSketch では、クイック ビジュアル化およびイテレーションの単純な UX レイアウト ツールを提供します。The purpose of HoloSketch is to provide a simple UX layout tool for quick visualization and iteration.

HoloSketch:空間のレイアウトと UX HoloLens 用アプリのスケッチをします。HoloSketch: A spatial layout and UX sketching app for HoloLens.
HoloSketch: 空間的なレイアウトと UX HoloLens 用アプリのスケッチHoloSketch: spatial layout and UX sketching app for HoloLens

簡単な視覚エフェクトとイテレーションの単純な UX レイアウト ツールです。A simple UX layout tool for quick visualization and iteration.
簡単な視覚エフェクトとイテレーションの単純な UX レイアウト ツールA simple UX layout tool for quick visualization and iteration

機能Features

クイック スタディとスケール プロトタイプ作成用のプリミティブPrimitives for quick studies and scale-prototyping

プリミティブ図形を使用します。

クイック massing スタディとスケール-プロトタイプの作成には、プリミティブ図形を使用します。Use primitive shapes for quick massing studies and scale-prototyping.

OneDrive からオブジェクトのインポートImport objects through OneDrive

オブジェクトのインポート

PNG または JPG 画像や FBX の 3D オブジェクトのインポート (Unity でパッケージ化が必要) が OneDrive から複合現実領域。Import PNG/JPG images or 3D FBX objects(requires packaging in Unity) into the mixed reality space through OneDrive.

オブジェクトを操作します。Manipulate objects

オブジェクトの操作

3D オブジェクトを使い慣れたインターフェイスを持つオブジェクト (移動/回転/スケール) を操作します。Manipulate objects (move/rotate/scale) with a familiar 3D object interface.

Bluetooth、マウス/キーボード、ジェスチャと音声コマンドBluetooth, mouse/keyboard, gestures and voice commands

Bluetooth をサポートしています

HoloSketch は、Bluetooth マウス/キーボード、ジェスチャ、音声コマンドをサポートしています。HoloSketch supports Bluetooth mouse/keyboard, gestures and voice commands.

背景Background

デバイスで、設計が発生していることの重要性Importance of experiencing your design in the device

HoloLens のものを設計するときは、デバイスで、設計が発生する必要があります。When you design something for HoloLens, it is important to experience your design in the device. 複合現実アプリの設計では、最大の課題の 1 つは、従来の 2D スケッチを特にスケール、位置、および、深さの把握が困難であります。One of the biggest challenges in mixed reality app design is that it is hard to get the sense of scale, position and depth, especially through traditional 2D sketches.

2D のコスト ベースの通信Cost of 2D based communication

UX のフローおよび他のユーザー シナリオを効果的に通信するには、デザイナーは、多くの Illustrator、Photoshop、および PowerPoint などの従来の 2D ツールを使用して資産を作成する時間を費やすことになる可能性があります。To effectively communicate UX flows and scenarios to others, a designer may end up spending a lot of time creating assets using traditional 2D tools such as Illustrator, Photoshop and PowerPoint. これらの 2D デザインは多くの場合に変換する追加の作業を必要と 3D にします。These 2D designs often require additional effort to convert them it into 3D. いくつかのアイデアは、3d 2D から変換時に失われます。Some ideas are lost in this translation from 2D to 3D.

複雑な展開プロセスComplex deployment process

複合現実は、私たちにとって新しいキャンバスであるために、その性質上のデザインの繰り返しおよび試行錯誤の多くが含まれます。Since mixed reality is a new canvas for us, it involves a lot of design iteration and trial and error by its nature. Unity と Visual Studio などのツールに慣れていないデザイナーの HoloLens のものをまとめる簡単ではありません。For designer who are not familiar with tools such as Unity and Visual Studio, it is not easy to put something together in HoloLens. 通常は、デバイスでの 2d/3d アートワークを表示するために以下のプロセスを通過する必要があります。Typically you have to go through the process below to see your 2D/3D artwork in the device. これは、アイデアやシナリオをすばやく反復処理するデザイナーにとって大きな防策です。This was a big barrier for designers iterating on ideas and scenarios quickly.

複雑な展開プロセスComplex deployment process
展開プロセスDeployment process

HoloSketch を簡略化されたプロセスSimplified process with HoloSketch

HoloSketch での開発ツールとデバイスのポータルのペアを使用することがなく、このプロセスを簡略化する考えました。With HoloSketch, we wanted to simplify this process without involving development tools and device portal pairing. OneDrive を使用して、ユーザーに簡単に配置できます 2d/3d 資産 HoloLens にします。Using OneDrive, users can easily put 2D/3D assets into HoloLens.

HoloSketch を簡略化されたプロセスSimplified process with HoloSketch
HoloSketch を簡略化されたプロセスSimplified process with HoloSketch

3 次元のデザインの考え方とソリューションを促進Encouraging three-dimensional design thinking and solutions

このツールでも、デザイナーを本当に 3 次元空間でソリューションを確認して、2 D になっていないことできるようになりますと考えました。We thought this tool would give designers an opportunity to explore solutions in a truly three-dimensional space and not be stuck in 2D. バック グラウンドは Hololens の場合は、現実の世界であるため、UI の 3D のバック グラウンドの作成について考慮する必要はありません。They don’t have to think about creating a 3D background for their UI since the background is the real world in the case of Hololens. HoloSketch は、Hololens で 3D のデザインを簡単に探索するデザイナーが開きます。HoloSketch opens up a way for designers to easily explore 3D design on Hololens.

はじめにGet Started

HoloSketch に 2 D 画像 (JPG または PNG) をインポートする方法How to import 2D images (JPG/PNG) into HoloSketch

  • OneDrive フォルダー 'ドキュメント/HoloSketch' を JPG または PNG イメージをアップロードします。Upload JPG/PNG images to your OneDrive folder ‘Documents/HoloSketch’.
  • HoloSketch で、[OneDrive] メニューから選択し、環境にイメージを配置することができます。From the OneDrive menu in HoloSketch, you will be able to select and place the image in the environment.

2D イメージをインポートします。Importing 2D images
イメージと OneDrive を 3D オブジェクトをインポートします。Importing images and 3D objects through OneDrive

HoloSketch に 3D オブジェクトをインポートする方法How to import 3D objects into HoloSketch

OneDrive フォルダーにアップロードする前に、Unity asset のバンドルにパッケージ化、3 D オブジェクトには、次の手順に従ってください。Before uploading to your OneDrive folder, please follow the steps below to package your 3D objects into a Unity asset bundle. このプロセスを使用すると、Maya、シネマ 4 D Microsoft ペイントの 3 D などの 3D のソフトウェアから FBX/OBJ ファイルをインポートできます。Using this process you can import your FBX/OBJ files from 3D software such as Maya, Cinema 4D and Microsoft Paint 3D.

重要

現時点では、Unity バージョン 5.4.5f1 資産バンドルの作成がサポートされます。Currently, asset bundle creation is supported with Unity version 5.4.5f1.

  1. ダウンロードして、Unity プロジェクトを開く'AssetBunlder_Unity'します。Download and open the Unity project 'AssetBunlder_Unity'. この Unity プロジェクトには、バンドルの資産の生成のためのスクリプトが含まれています。This Unity project includes the script for the bundle asset generation.

  2. 新しい GameObject を作成します。Create a new GameObject.

  3. 内容に基づく GameObject の名前を付けます。Name the GameObject based on the contents.

  4. Inspector パネルで、コンポーネントの追加 をクリックし、' 足場に Box Collider' を追加します。In the Inspector panel, click ‘Add Component’ and add ‘Box Collider’.

    Inspector パネルで、コンポーネントの追加 をクリックし、' 足場に Box Collider' を追加

    Inspector パネルで、コンポーネントの追加 をクリックし、' Box Collider'2 を追加

  5. [プロジェクト] パネルにドラッグして 3D FBX ファイルをインポートします。Import the 3D FBX file by dragging it into the project panel.

  6. 階層のパネルに、オブジェクトをドラッグ下に新しい GameObjectします。Drag the object into the Hierarchy panel under your new GameObject.

    オブジェクトを階層のパネルに新しい GameObject の下にドラッグします。

  7. オブジェクトが一致しない場合は、collider ディメンションを調整します。Adjust the collider dimension if it does not match the object. 直面するオブジェクトを回転させるz 軸します。Rotate the object to face Z-axis.

    オブジェクトが一致しない場合は、コライダーのディメンションを調整します。

  8. プロジェクト パネル、[階層] パネルからオブジェクトをドラッグprefab ようにします。Drag the object from the Hierarchy panel to the Project panel to make it prefab.

  9. Inspector パネルの下部にある、ドロップダウンをクリックします。 作成して新しい一意の名前を割り当てます。On the bottom of the inspector panel, click the dropdown, create and assign a new unique name. 次の例の追加や AssetBundle 名 'brownchair' の割り当てを示しています。Below example shows adding and assigning 'brownchair' for the AssetBundle Name.

    Inspector パネルの下部にある、ドロップダウン リストをクリックし、新しい一意の名前を割り当てます。

  10. モデル オブジェクトのサムネイル イメージを準備します。Prepare a thumbnail image for the model object. [プロジェクト] パネルにイメージをドラッグし、オブジェクトに使用される名前を割り当てます。Drag an image into the project panel and assign the name used for the object.

  11. Unity プロジェクトの '資産' フォルダーの下には、'Assetbundles' という名前のフォルダーを作成します。Create a folder named ‘Assetbundles’ under the Unity project’s ‘Asset’ folder.

  12. 資産 メニューからファイルを生成する ' AssetBundles のビルド を選択します。From the Assets menu, select ‘Build AssetBundles’ to generate file. [資産] メニューからファイルを生成する ' AssetBundles のビルド を選択します。From the Assets menu, select ‘Build AssetBundles’ to generate file.

  13. OneDrive 上の/Files/Documents/HoloSketch フォルダーに生成されたファイルをアップロードします。Upload the generated file to the /Files/Documents/HoloSketch folder on OneDrive. Asset_unique_name ファイルのみアップロードします。Upload the asset_unique_name file only. マニフェスト ファイルまたは AssetBundles ファイルをアップロードする必要はありません。You don’t need to upload manifest files or AssetBundles file.
    ファイル/ドキュメント/HoloSketch にファイルを追加/フォルダー HoloSketch の OneDrive のメニューに追加された 3D オブジェクトが表示されますAdd files to Files/Documents/HoloSketch/ folder You will see added 3D object in HoloSketch's OneDrive menu

オブジェクトを操作する方法How to manipulate the objects

HoloSketch は、3 D のソフトウェアで広く使用されている従来のインターフェイスをサポートします。HoloSketch supports the traditional interface that is widely used in 3D software. Move を使用して、回転、ジェスチャと、マウスを使ってオブジェクトを拡張できます。You can use move, rotate, scale the objects with gestures and a mouse. 音声、キーボードでの異なるモードをすばやく切り替えることができます。You can quickly switch between different modes with voice or keyboard.

オブジェクトの操作モードObject manipulation modes

オブジェクトを操作する方法How to manipulate the objects
オブジェクトを操作する方法How to manipulate the objects

コンテキストとツール ベルト メニューContextual and Tool Belt menus

コンテキスト メニューを使用してください。Using the Contextual Menu

コンテキスト メニューを開き二重のエア タップします。Double air tap to open the Contextual Menu.

メニュー項目。Menu items:

  • 画面のレイアウト: これは 3D のグリッド システム レイアウトを複数のオブジェクトとそれらのグループとして管理します。Layout Surface: This is a 3D grid system where you can layout multiple objects and manage them as a group. オブジェクトを追加するのにレイアウト画面で二重のエア タップします。Double air-tap on the Layout Surface to add objects to it.
  • プリミティブ。 スタディ massing のキューブ、球体、円柱、および円錐を使用します。Primitives: Use cubes, spheres, cylinders and cones for massing studies.
  • OneDrive: オブジェクトをインポートする [OneDrive] メニューを開きます。OneDrive: Open the OneDrive menu to import objects.
  • ヘルプ: ヘルプ画面を表示します。Help: Displays help screen.

コンテキスト メニューContextual menu
コンテキスト メニューContextual menu

ツール ベルトのメニューを使用してください。Using the Tool Belt Menu

移動、回転、スケール、保存、および負荷のシーンはツール ベルトのメニューから利用できます。Move, Rotate, Scale, Save, and Load Scene are available from the Tool Belt Menu.

キーボード、ジェスチャ、音声コマンドを使用します。Using keyboard, gestures and voice commands

キーボード、ジェスチャ、音声コマンドKeyboard, Gestures and Voice Commands
キーボード、ジェスチャ、音声コマンドKeyboard, gestures, and voice commands

アプリをダウンロードします。Download the app

HoloSketch app icon ダウンロードして Microsoft Store から無料 HoloSketch アプリをインストール Download and install the HoloSketch app for free from the Microsoft Store

既知の問題Known issues

  • 資産のバンドルの作成がサポートされている現在Unity バージョン 5.4.5f1 します。Currently asset bundle creation is supported with Unity version 5.4.5f1.
  • OneDrive の内容を読み込み中に停止した場合と、OneDrive 内のデータの量、によって、アプリが表示可能性があります。Depending on the amount of data in your OneDrive, the app might appear as if it has stopped while loading OneDrive contents
  • 現時点では、保存し、読み込み機能は、プリミティブ オブジェクトのみがサポートされます。Currently, Save and Load feature only supports primitive objects
  • コンテキスト メニューのテキスト、サウンド、ビデオ、および写真のメニューが無効になっていますText, Sound, Video and Photo menus are disabled on the contextual menu
  • [ツール] メニューの [再生] ボタンは、操作ギズモをクリアします。The Play button on the Tool Belt menu clears the manipulation gizmos

スケッチの共有Sharing your sketches

HoloLens のビデオ記録の機能を使用することを示す ' Hey Cortana、開始/停止の記録 '。You can use the video recording feature in HoloLens by saying 'Hey Cortana, Start/Stop recording'. ボリューム上/下、スケッチの画像を撮影してキーを押します。Press the volume up/down key together to take a picture of your sketch.

著者についてAbout the authors

Picture of Dong Yoon Park ドン Yoon ParkDong Yoon Park
UX デザイナー @MicrosoftUX Designer @Microsoft
Picture of Patrick Sebring Patrick SebringPatrick Sebring
開発者向け @MicrosoftDeveloper @Microsoft