مقیاس، اندازه‌ها، و طراحی دیداری

می‌توانید برنامه‌های Android XR فراگیر را بااستفاده از OpenXR،‏ APIs بومی Android، یا WebXR بسازید. توصیه‌های طراحی دیداری که در این صفحه ذکر شده است، صرف‌نظر از پلاتفرمی که انتخاب می‌کنید، اعمال می‌شود.

  • برای برنامه‌های Unity،‏ OpenXR، یا WebXR: می‌توانید از هر زبان طراحی که انتخاب می‌کنید استفاده کنید. اگرچه کتابخانه طراحی مواد فقط برای برنامه‌های Android دردسترس است، اما همچنان می‌توانید از توصیه‌های طراحی آن برای کمک به اعمال رنگ‌ها، فاصله، مقیاس، دکمه‌ها، و حروف‌چینی پیروی کنید.

  • برای برنامه‌های Android: برنامه‌های Android تلفن همراه یا صفحه‌نمایش بزرگ دوبعدی می‌توانند با کار توسعه‌ای بسیار کم از قابلیت‌های «فضای کامل» بهره‌مند شوند. برای تأثیرگذاری بالای XR، از واسط کاربر فضایی استفاده کنید. برای ایجاد تجربه برنامه‌ای فراگیرتر، می‌توانید مدل‌های سه‌بعدی و محیط‌ها را نیز به برنامه‌تان اضافه کنید.

    می‌توانید زبان طراحی برنامه‌های Android موجود را در Android XR حفظ کنید. برای برنامه‌های جدید یا طراحی‌های مجدد، رهنمودهای «طراحی مادی» را برای اندازه رابط کاربری، دسترس‌پذیری، حروف‌چینی، طرح‌های رنگ، و عناصر درنظر بگیرید، که به برنامه شما مزایای طراحی آشنا و اثبات‌شده Android و کارایی را می‌دهد.

    اگر برنامه Android خود را بااستفاده از کتابخانه Material Design 3 بسازید، می‌توانید به‌راحتی رفتارهای میانای کاربر فضایی را به عناصر و چیدمان‌های تطبیقی آن اضافه کنید.

نحوه آزمایش طراحی بصری برنامه

آزمایش طراحی بصری برنامه برای اطمینان از تجربه کاربری راحت و دسترس‌پذیر بسیار مهم است. در اینجا نحوه آزمایش در پلاتفرم‌ها و محیط‌های مختلف XR آورده شده است.

استفاده از شبیه‌سازها، شبیه‌سازها، و دستگاه‌های واقعی

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

فهرست وارسی آزمایش طراحی دیداری

  • هرگونه حرکت یا پویانمایی را آزمایش کنید تا مطمئن شوید که باعث بیماری حرکتی نمی‌شوند. گذار روان، نرخ فریم پایدار، و حرکت قابل‌پیش‌بینی را بررسی کنید.
  • حالت «دیدن محیط واقعی» را در تنظیمات دنیای واقعی امتحان کنید تا مطمئن شوید عناصر مجازی با محیط فیزیکی ترکیب می‌شوند.
  • برنامه‌تان را در شرایط نوری مختلف، ازجمله محیط‌های روشن و کم‌نور، آزمایش کنید.
  • خوانایی نوشتار را در فاصله‌ها و زاویه‌های مختلف بررسی کنید.
  • آرایش رنگی را ازنظر دسترس‌پذیری و راحتی ارزیابی کنید.

جمع‌آوری بازخورد کاربر

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

هدف‌یابی در Android XR

در برنامه XR، هدف ناحیه قابل‌تک‌ضرب یا قابل‌اشاره‌ای است که کاربران با آن تعامل برقرار می‌کنند. هدف‌های بزرگ‌تر دقت، راحتی، و قابلیت استفاده را افزایش می‌دهند. برای اینکه برنامه‌تان دسترسی‌پذیر باشد، دستورالعمل‌های هدف‌یابی «طراحی مواد» را دنبال کنید. این کلید با برنامه‌های Android،‏ Unity،‏ OpenXR، و WebXR کار می‌کند. اگر برنامه شما ازقبل از توصیه‌های «طراحی مواد» پیروی می‌کند، اندازه‌های هدف شما با حداقل مطابقت دارد، اگرچه ۵۶dp بهینه است.

نماد نمونه‌ای که هدف توصیه‌شده ۵۶dp و
امکان ۴۸dp را نشان می‌دهد.

همه عناصر تعاملی واسط کاربر باید موارد زیر را درنظر بگیرند:

  • هدف توصیه‌شده: ۵۶dp x ۵۶dp یا بزرگ‌تر
  • امکان‌پذیری دیداری (نماد): ۴۸dp x 48dp یا بزرگ‌تر
  • آفست بین هدف و دستگیره دیداری: ۴ پیکسل
  • برای تعامل‌های دقیق، هدف‌های اشاره‌گر عناصر مختلف میانای کاربر نباید هم‌پوشانی داشته باشند
  • هدف و نماد درصورت نیاز با برچسب یا محتوی والد مقیاس‌بندی می‌شوند.

مطمئن شوید که وضعیت‌های نگه داشتن را اضافه کنید

برای افزایش دسترس‌پذیری، حالت‌های نگه‌داشتن و تمرکز را علاوه‌بر حالت‌های تعاملی پایه برای عناصر تعاملی اضافه کنید. وضعیت‌های نگه داشتن نشانگر می‌تواند برای همه مفید باشد، و به‌ویژه برای کاربرانی که برای انتخاب عناصر میانای کاربر به ورودی‌های اشاره‌گر متکی هستند بسیار مهم است.

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

فاصله بین هدف‌ها

«طراحی مواد» حداقل ۸dp فضا بین هدف‌ها، ازجمله دکمه‌ها، را توصیه می‌کند. این فاصله تضمین می‌کند که کاربران بتوانند به‌راحتی بین عناصر تعاملی تمایز قائل شوند و از انتخاب‌های تصادفی جلوگیری کنند.

فاصله دقیق بین دکمه‌ها ممکن است بسته به زمینه و اندازه آن‌ها متفاوت باشد. برخی‌از عواملی که باید درنظر بگیرید:

  • اندازه دکمه: دکمه‌های بزرگ‌تر ممکن است برای حفظ وضوح دیداری به فضای بیشتری بین آن‌ها نیاز داشته باشند.
  • گروه‌بندی دکمه‌ها: دکمه‌هایی که ازنظر عملکردی ارتباط نزدیکی دارند می‌توانند نزدیک‌تر به هم گروه‌بندی شوند، درحالی‌که دکمه‌های غیرمرتبط باید فاصله بیشتری داشته باشند.
  • چیدمان: چیدمان کلی صفحه‌نمایش می‌تواند بر فاصله بین دکمه‌ها تأثیر بگذارد. برای مثال، دکمه‌های موجود در نوارابزار ممکن است فاصله نزدیک‌تری نسبت‌به دکمه‌های موجود در کادر گفتگو داشته باشند.

اندازه و مقیاس پانل

‫Android XR به‌گونه‌ای طراحی شده است که برنامه شما را برای مخاطبان گسترده‌ای راحت، خوانا، و دردسترس کند. برای تجربه بهینه، Android XR از ۰٫۸۶۸ dp-to-dmm استفاده می‌کند.

نمایش دیداری کاربری که در فاصله ۱٫۷۵ متری از برنامه XR قرار دارد، با پانلی به اندازه
۱۰۲۴ پیکسل × ۷۲۰ پیکسل، و گوشه‌های گرد ۳۲ پیکسل.

اگر از پانل استفاده می‌کنید، برنامه واقعیت گسترده شما احتمالاً دورتر از صفحه‌نمایش فیزیکی از کاربر قرار خواهد گرفت. درنظر بگیرید که کاربر از هدست استفاده می‌کند. برای راحتی بیشتر، محتوای اصلی را در میدان دید ۴۱ درجه قرار دهید تا کاربران برای تعامل نیازی به حرکت دادن سرشان نداشته باشند.

توصیه‌ها

  • گوشه‌های پانل‌ها گرد و ۳۲ پیکسل است. می‌توانید این پیش‌فرض را ملغی کنید.

عملکردهای عمق پانل

  • فضای خانه: برنامه‌ها در فاصله ۱٫۷۵ متری کاربر راه‌اندازی می‌شوند و توسعه‌دهندگان نمی‌توانند این فاصله را ملغی کنند.
  • فضای کامل: به‌طور پیش‌فرض، برنامه‌ها در همان موقعیتی که در فضای صفحه اصلی بودند راه‌اندازی می‌شوند. می‌توانید از منطق فضایی برای قرار دادن پانل‌ها براساس موقعیت کاربر استفاده کنید، هرچند فاصله راه‌اندازی ۱٫۷۵ متر را توصیه می‌کنیم.

وقتی برنامه در فاصله ۱٫۷۵ متری کاربر باشد:

  • ‫۱۰۲۴dp به‌عنوان ۱۵۵۶٫۲۴ میلی‌متر درک می‌شود
  • ‫۷۲۰ پیکسل به‌عنوان ۱۰۹۳٫۶۶ میلی‌متر درک می‌شود
  • ‫۱ متر در واقعیت فیزیکی = ۱ متر در XR

دکمه‌ها و نمادها

اگر برنامه Android موجودی دارید، لازم نیست عناصر ویژه‌ای برای Android XR طراحی کنید. رهنمودهای «طراحی مواد» را برای دکمه‌ها و نمادها دنبال کنید. اگر برنامه Unity،‏ OpenXR، یا WebXR دارید، می‌توانید دکمه‌ها و نمادهایتان را همان‌طور که هستند نگه دارید یا از «طراحی مواد» الهام بگیرید.

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

رنگ‌ها

‫Android XR از سیستم رنگ «طراحی Material» پیروی می‌کند تا رابط کاربری سازگار و ازنظر بصری جذاب ارائه دهد. برای ایجاد سبک بصری فراگیر متناسب با XR، با کنتراست کافی طراحی کنید، پالت متعادلی انتخاب کنید، از رنگ‌های دسترس‌پذیر برای افراد دارای نقص دید رنگ استفاده کنید، و از ترکیب‌های تکان‌دهنده که می‌توانند باعث خستگی چشم یا سردرگمی شوند اجتناب کنید.

سیستم «طراحی سه‌بعدی» از فضای رنگی به نام HCT استفاده می‌کند که همه رنگ‌ها را بااستفاده از سه بُعد تعریف می‌کند: رنگ، فام، و تُن.

بهینه‌سازی رنگ برای تفاوت‌های نمایشگر

نمایشگر عینک‌های XR سیمی با صفحه‌نمایش هدست XR متفاوت است. به‌جای صفحه‌نمایش یکپارچه‌ای که جایگزین دید شما می‌شود، عینک‌های XR سیمی را به‌عنوان پروژکتوری درنظر بگیرید که نور را روی لنز شفاف می‌تاباند.

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

طراحی برای شفاف‌سازی

ازآنجایی‌که نمایشگر عینک واقعیت گسترده سیمی افزایشی است، انتخاب‌های رنگ شما مستقیماً بر نحوه نمایش جامد یا شفاف بودن میانای شما تأثیر می‌گذارد.

  • رنگ سیاه به‌صورت شفاف رندر می‌شود: نمی‌توانید رنگ سیاه خالص را نمایش دهید. پیکسل‌های کاملاً سیاه خاموش هستند، یعنی کاربر دنیای واقعی را مستقیماً ازطریق آن قسمت از شیشه می‌بیند.
  • روشنایی باعث بهبود رؤیت‌پذیری می‌شود: رنگ‌های روشن‌تر یکپارچه‌تر به‌نظر می‌رسند. رنگ‌های تیره‌تر نور کمتری ساطع می‌کنند و شفاف‌تر به‌نظر می‌رسند. افزودن سفید نمایان بودن را بهبود می‌بخشد، اما برای جلوگیری از خستگی چشم از روشنایی بیش‌ازحد خودداری کنید.
  • ترکیب محیط: رنگ‌های میانای کاربر شما به‌صورت بصری با دنیای واقعی ترکیب می‌شود. استفاده از رنگ‌های روشن و با کنتراست بالا به متمایز شدن میانای کاربری شما در پس‌زمینه‌های غیرقابل پیش‌بینی کمک می‌کند.
  • کم‌نور کردن لنزها باعث افزایش استحکام می‌شود: هرچه لنزها تیره‌تر باشند، محتوای دیجیتال کمتر شفاف و بیشتر جامد به‌نظر می‌رسد. افزایش کاهش نور الکتروکرومیک نور پس‌زمینه بیشتری را مسدود می‌کند، که به جامد به‌نظر رسیدن رنگ‌ها کمک می‌کند و عناصر تیره را برجسته می‌کند.

زمینه‌های تیره و روشن در XR

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

درباره طرح‌های رنگ «طراحی مواد» بیشتر بدانید.

نویسه‌نگاری واقعیت گسترده

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

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

نمای نزدیک از R بزرگ و o، با اعداد تایپوگرافی در پایین. حروف بنفش تیره به‌وضوح با پس‌زمینه بنفش روشن در تضاد است.

نویسه‌نگاری در واقعیت گسترده

  • اندازه برای فاصله‌های متغیر: به‌یاد داشته باشید که کاربران درحال حرکت خواهند بود و نوشتار را از مکان‌های مختلف مشاهده خواهند کرد. مطمئن شوید اندازه قلم به‌اندازه کافی بزرگ باشد تا از دور خوانده شود.
  • نوشتار را در میدان دید طبیعی کاربر قرار دهید: این کار از حرکت بیش‌ازحد سر و فشار به گردن جلوگیری می‌کند.
  • عمق و مقیاس را درنظر بگیرید: از نشانه‌های عمق و مقیاس برای ایجاد سلسله مراتب در فضای سه‌بعدی استفاده کنید.
  • مطمئن شوید نوشتار در پس‌زمینه کاربر خوانا باشد: وزن‌های سنگین‌تر کنتراست بیشتری ارائه می‌دهند. بسته به رنگ‌ها، نورپردازی، و پیچیدگی محیط تنظیم می‌شود. توجه داشته باشید که مقادیر نوشتار روشن‌تر به حفظ خوانایی در عینک‌های واقعیت گسترده سیمی کمک می‌کند.
  • از حروف‌چینی تطبیق‌پذیر استفاده کنید: پانل‌ها ممکن است خیلی نزدیک، خیلی دور، و در زوایای دید نامناسب برای کاربر باشند.
  • محدود کردن نوشتار پیوست‌شده به اشیای متحرک: این کار می‌تواند باعث بیماری حرکت شود.

طرح حروف دسترس‌پذیر در «واقعیت گسترده»

  • انتخاب قلم برای خوانایی: قلم‌هایی را در اولویت قرار دهید که در اندازه‌های کوچک و از فاصله‌های دور حروف واضحی داشته باشند.
  • استفاده از نوشتار با حروف کوچک و بزرگ: خواندن نوشتار با حروف کوچک و بزرگ آسان‌تر از نوشتار با حروف بزرگ است.
  • محدود کردن طول خط: برای بهبود خوانایی، طول خط را کوتاه‌تر کنید.
  • انتخاب رنگ‌های دسترس‌پذیر: از ترکیب‌های رنگی استفاده کنید که برای کاربران دارای تفاوت در دید رنگی خوانا باشد.
  • از شلوغ کردن اجتناب کنید: فضای کافی برای نوشتار درنظر بگیرید.
  • اجازه دادن به مقیاس‌گذاری نوشتار: به کاربران اجازه می‌دهد اندازه نوشتار را مطابق با نیازهای فردی‌شان تنظیم کنند.

‫OpenXR™‎ و نشان‌واره OpenXR علامت‌های تجاری متعلق به شرکت The Khronos Group Inc. ‎ هستند و به‌عنوان علامت تجاری در چین، اتحادیه اروپا، ژاپن، و پادشاهی متحد ثبت شده‌اند.