Apple Vision Proでornamentを活用したUI構築
はじめに
こんにちは。
クラウドソリューショングループのyamasaki.sです。
Apple Vision Pro特有の「ornament」を利用したUI構築について、実際に使ってみて気がついた内容をまとめてみました！
目次
ornamentについて
「ornament」は、ウィンドウの任意の端に表示できるUIコンポーネントで、ボタンやセグメント化されたコントロールなどを含めることができます。
以下、中心画面の外側に配置されているアイコンの一覧やメディア操作できるような部分が「ornament」で作られた部分になります。
表示位置
top
ウィンドウの上部にornamentを表示します。
拡大表示時に視線を上げる必要があるため、利用頻度は高くないが必要なUIを配置するのに適しています。
.ornament(attachmentAnchor: .scene(.top)) {
Text("top")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
.ornament(attachmentAnchor: .scene(.topLeading)) {
Text("topLeading")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
.ornament(attachmentAnchor: .scene(.topTrailing)) {
Text("topTrailing")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
bottom
ウィンドウの下部にornamentを表示します。
視線をあまり動かさずに利用できるため、使用頻度の高いUIを配置するのに適しています。
.ornament(attachmentAnchor: .scene(.bottom)) {
Text("bottom")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
.ornament(attachmentAnchor: .scene(.bottomLeading)) {
Text("bottomLeading")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
.ornament(attachmentAnchor: .scene(.bottomTrailing)) {
Text("bottomTrailing")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
leading
ウィンドウの左側にornamentを表示します。
視線誘導の開始地点となるため、最初に視界に入れたいUIなどを配置するのに適しています。
.ornament(attachmentAnchor: .scene(.leading)) {
Text("leading")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
trailing
ウィンドウの右側のにornamentを表示します。
視線誘導の最終地点となるため、一段落した後に見てもらいたいUIを配置するのに適しています。
.ornament(attachmentAnchor: .scene(.trailing)) {
Text("trailing")
.padding()
.font(.system(size: 40))
.glassBackgroundEffect()
}
さいごに
「ornament」は、空間上に画面を配置するVisionPro特有のUI表示方法です。
上手く活用することで、メイン画面の情報量を増やさずにちょっとした情報を見せることができそうですね！
ただし、多くの「ornament」を配置しすぎると視線が散ってしまい上手く情報が伝わない原因になってしまう可能性もあるので
適切な空間デザインをする必要性がありそうです。
