رابط کاربری فضایی

هنگام ساخت یک برنامه متمایز Android XR، ممکن است بخواهید از رابط کاربری فضایی برای قرار دادن محتوا در محیط فیزیکی یا مجازی کاربر استفاده کنید. می توانید برنامه خود را به پانل های فضایی ، مدارگردها تقسیم کنید و ارتفاع مکانی را اضافه کنید (در این صفحه با جزئیات بیشتر توضیح داده شده است).

از اجزا و طرح‌بندی‌های طراحی متریال استفاده کنید

هنگام طراحی برنامه Android XR خود از کتابخانه اجزای Material Design و طرح‌بندی‌های تطبیقی ​​بهره ببرید. این بلوک‌های سازنده تعاملی به سرعت بخشیدن به توسعه کمک می‌کنند تا بتوانید بر عملکرد اصلی و نوآوری تمرکز کنید.

طراحی متریال برای XR اجزای Material 3 و طرح‌بندی‌های تطبیقی ​​را با رفتارهای رابط کاربری فضایی بهبود می‌بخشد. اینها می توانند باعث شوند که برنامه شما در پلتفرم بیشتر احساس شود و فضا را بهینه کند.

همچنین می‌توانید اجزای رابط کاربری موجود را با قرار دادن آنها در مدارگردها و اعمال ارتفاع فضایی ، همانطور که در این صفحه توضیح داده شده است، فضایی کنید.

کلاژ عناصر از کیت طراحی Material 3 برای شروع، کیت طراحی Material 3 را دانلود کنید .

پانل های فضایی

پانل‌های فضایی بلوک‌های اساسی سازنده برنامه‌های Android XR هستند. می‌توانید از آن‌ها برای ایجاد تجربه‌ای متمایز با XR بر روی یک نمایشگر نامحدود استفاده کنید، با گسترش محتوا در فضای کاربر. پانل های فضایی به عنوان محفظه هایی برای عناصر رابط کاربری، اجزای تعاملی و محتوای غوطه ور عمل می کنند.

یک برنامه اندروید XR با شفق شمالی و یک کوه برفی. سه منوی کنترل کاربر در مدارگردها قرار دارند. آنها بالاتر از پانل اصلی، یکی به سمت چپ، راست و پایین آن قرار دارند.

درک کنید که UI چگونه مقیاس و حرکت می کند

پانل های فضایی به طور خودکار اندازه خود را بر اساس فاصله آنها از کاربر تنظیم می کنند. این مقیاس بندی پویا تضمین می کند که عناصر UI هنگام مشاهده از فواصل مختلف خوانا و تعاملی باقی می مانند. اندازه بین 0.75 متر و 1.75 متر ثابت می ماند. سپس سرعت پوسته پوسته شدن با 0.5 متر در متر رشد می کند و عناصر کوچکتر ظاهر می شوند.

برای جلوگیری از تداخل با رابط کاربری سیستم، در محدوده حرکات پانل پیش‌فرض نگه دارید:

  • حداقل عمق: 0.75 متر از کاربر
  • حداکثر عمق: 5 متر از کاربر

کاربران می توانند یک پانل فضایی را به سمت بالا یا پایین مقیاس بندی کنند تا به اندازه کافی بزرگ باشد که بدون توجه به فاصله کاربر، به وضوح ببیند. هنگامی که کاربر یک پانل فضایی را جابجا می کند، Android XR به طور خودکار اندازه آن را کاهش می دهد.

اندازه های پانل فضایی

Android XR طوری طراحی شده است که برنامه شما را راحت، خوانا و در دسترس مخاطبان وسیعی قرار دهد. برای تجربه بهینه، سیستم از 0.868 dp-to-dmm استفاده می کند. وقتی برنامه شما روی هدست مشاهده می‌شود، نسبت به زمانی که کاربر برنامه‌ای را روی تلفن یا رایانه لوحی می‌بیند، دورتر از کاربر ظاهر می‌شود، بنابراین برای سهولت استفاده باید بزرگ‌تر باشد.

در فضای کامل، حداقل اندازه برای یک پانل فضایی وجود ندارد و حداکثر به دلیل محدودیت های فیزیکی، 2560dp x 1800dp است.

تصویری از کاربری که 1.75 متر از یک برنامه XR فاصله دارد.

محل قرار دادن پانل های فضایی

در Full Space می توانید محل قرارگیری پنل را در محیط های عبوری و مجازی تعیین کنید. هنگامی که کاربران از Home Space به Full Space تغییر مکان می دهند، عناصر در همان موقعیت قابل پیش بینی باقی می مانند، مگر اینکه یک موقعیت سفارشی را اختصاص دهید.

کاربری که به برنامه XR نگاه می کند، سطح چشم طبیعی آن 5 درجه پایین تر از مرکز پنل است.

مرکز پانل را در فاصله 1.75 متری از خط دید کاربر ایجاد کنید . مرکز عمودی پانل را 5 درجه زیر سطح چشم کاربر قرار دهید تا راحتی را به حداکثر برسانید، زیرا کاربران تمایل دارند به سمت پایین نگاه کنند.

کاربری که به پنلی در مرکز 41 درجه میدان دید خود نگاه می کند.

برای راحتی مطلوب، محتوا را در مرکز 41 درجه میدان دید کاربر قرار دهید . این امر دید واضح را تضمین می کند و نیاز به حرکت بیش از حد سر یا بدن را به حداقل می رساند.

کاربر می تواند در فضای خود حرکت کند و پانل های فضایی در جای خود باقی می مانند.

Android XR شامل الگوهای تعامل آماده برای دستکاری عناصر و تسهیل فرآیند توسعه شما برای کاربران است. کاربر می تواند عناصر را برای انطباق با فضای شخصی خود جابجا کند. می توانید رفتارهای حرکت و تغییر اندازه را پیکربندی کنید.

برای کمک به کاربران احساس ثبات و جهت گیری خوب، می توانید به کاربران اجازه دهید یک پانل فضایی را به مکان خاصی در دنیای واقعی مانند زمین، صندلی، دیوار، سقف یا میز متصل کنند. لنگر انداختن فقط در گذر در دسترس است.

طرح فضایی خود را ایجاد کنید

می توانید برنامه خود را در هر طرحی که انتخاب می کنید به چندین پانل فضایی تجزیه کنید. APIهای UI فضایی پانل‌های عددی را محدود نمی‌کنند. آنها شامل توانایی ایجاد طرح‌بندی با ردیف‌ها و ستون‌ها و ردیف‌های مسطح و منحنی هستند. موقعیت پانل فضایی می تواند خاص یا دلخواه باشد. بیاموزید که چگونه طرح‌بندی‌های رابط کاربری فضایی ایجاد کنید .

شخصی که به سه پانل که کنار هم در یک ردیف صاف چیده شده اند نگاه می کندشخصی که به سه پانل مسطح که کنار هم در یک ردیف منحنی چیده شده‌اند، نگاه می‌کند که پانل‌های بیرونی سمت راست و چپ به آنها نزدیک‌تر هستند.شخصی که به سه پانل صاف با اندازه های مختلف در موقعیت های دلخواه نگاه می کند که پانل های بیرونی سمت راست و چپ دورتر از آنها هستند.

چیدمان ردیف مسطح

طرح ردیف منحنی

چیدمان موقعیت های دلخواه

مدارگردها

مدارگردها عناصر UI شناور هستند که محتوا را در پانل های فضایی کنترل می کنند. آنها به محتوا اجازه می دهند فضای بیشتری داشته باشد و کاربران می توانند به سرعت به ویژگی ها دسترسی داشته باشند در حالی که محتوای اصلی قابل مشاهده است. مدارگردها به شما تطبیق پذیری برای ادغام اجزای رابط کاربری موجود یا ایجاد موارد جدید می دهند.

مدارگردها باید به طور محدود و با در نظر گرفتن دقیق نیازها و اهداف کاربر استفاده شوند. تعداد زیادی از عناصر فضایی UI می تواند منجر به خستگی محتوا شود و کاربران را با اقدامات رقابتی بیش از حد تحت تأثیر قرار دهد. توصیه می شود چند جزء کلیدی ناوبری، مانند ریل ناوبری یا نوار ناوبری را تطبیق دهید.

ریل ناوبری غیر فضایی از طراحی متریال در فضای خانه
یک ریل ناوبری فضایی از طراحی متریال در فضای کامل
نوار ناوبری غیر فضایی از طراحی متریال در فضای خانه
نوار ناوبری فضایی از طراحی متریال در فضای کامل

رهنمودها

  • بالشتک را روی پانل تنظیم کنید تا موقعیت خمش یا درصد آن را مشخص کنید.
  • موقعیت محور Y مدارگردها را تعیین کنید. 20dp فاصله بصری توصیه شده است.
  • در صورت نیاز، سطح ارتفاع مدارگرد را از طریق سطوح ارتفاعی فضایی تنظیم کنید. به طور پیش فرض، آنها 15dp در عمق Z بالا هستند.
  • وقتی اندازه پانل تغییر می کند، اندازه می تواند ثابت یا انعطاف پذیر باشد.
  • تعیین کنید که آیا می خواهید یک مدارگرد به صورت پویا گسترش یابد تا با محتوا مطابقت داشته باشد.
طراحی الگوهایی برای اجتناب از
  • از همپوشانی مدارگرد بیش از 50 درصد اندازه آن اجتناب کنید.
  • از قرار دادن مدارگردها خیلی دور از صفحه فضایی خودداری کنید.
  • از مختصات X یا Y مطلق استفاده نکنید.
  • از استفاده بیش از حد از مدارگردها خودداری کنید.

ارتفاع فضایی

هنگامی که ارتفاع مکانی را به یک جزء اضافه می کنید، در بالای صفحه فضایی در محور Z نمایش داده می شود. این به جلب توجه کاربر، ایجاد سلسله مراتب بهتر و بهبود خوانایی کمک می کند.

گفتگوی طراحی متریال در یک برنامه با صفحه بزرگ
گفتگو با استفاده از ارتفاع مکانی در Android XR
منوی کشویی Material Design در یک صفحه بزرگ
یک منوی کشویی با استفاده از elevation در Android XR
طراحی الگوهایی برای اجتناب از
  • از فضاسازی یا بالا بردن سطوح و سطوح بزرگ مانند صفحات پایین و صفحات جانبی خودداری کنید.
  • از بالا بردن عناصر رابط کاربری با محتوای قابل پیمایش اجتناب کنید.

اندازه های هدف بزرگ طراحی کنید

در یک برنامه XR، هدف، ناحیه قابل توجهی است که کاربران با آن تعامل دارند. Android XR به دستورالعمل‌های طراحی متریال پایبند است و اهداف بزرگ‌تری را برای افزایش دقت، راحتی و قابلیت استفاده توصیه می‌کند.

درباره اهداف XR و وضعیت های شناور بیاموزید.

تایپوگرافی را در دسترس قرار دهید

خوانایی قلم برای تجربه کاربری راحت در XR بسیار مهم است. توصیه می کنیم از گزینه های typescale با اندازه فونت 14dp یا بزرگتر و وزن فونت معمولی یا بالاتر برای خوانایی بهتر استفاده کنید.

اگر برنامه موجود شما از دستورالعمل‌های طراحی متریال پیروی می‌کند، از قبل برای Android XR بهینه شده است. می‌توانید تایپوگرافی یک برنامه جدید را بر اساس طراحی متریال تعریف کنید.

با تایپوگرافی XR آشنا شوید .