আপনি OpenXR, নেটিভ Android API বা WebXR ব্যবহার করে ইমারসিভ Android XR অ্যাপ্লিকেশন তৈরি করতে পারবেন। আপনি যে প্ল্যাটফর্মই বেছে নিন না কেন, এই পৃষ্ঠায় উল্লেখ করা ভিজ্যুয়াল ডিজাইন সংক্রান্ত সাজেশন সব ক্ষেত্রেই প্রযোজ্য।
Unity, OpenXR বা WebXR অ্যাপের জন্য: আপনি যেকোনও ডিজাইন ভাষা বেছে নিতে পারেন। মেটেরিয়াল ডিজাইন লাইব্রেরি শুধুমাত্র Android অ্যাপের জন্য উপলভ্য হলেও আপনি এখনও এর ডিজাইন সংক্রান্ত পরামর্শ অনুসরণ করতে পারেন যা রঙ, স্পেসিং, স্কেল, বোতাম ও টাইপোগ্রাফি প্রয়োগ করতে সাহায্য করে।
Android অ্যাপের জন্য: 2D মোবাইল বা বড় স্ক্রিনের Android অ্যাপ খুব কম অতিরিক্ত ডেভেলপমেন্ট ওয়ার্কের মাধ্যমে ফুল স্পেসের সুবিধা নিতে পারে। XR-এর উপর বেশি প্রভাব ফেলতে, স্পেশিয়াল UI ব্যবহার করার কথা বিবেচনা করুন। আরও ইমারসিভ অ্যাপ অভিজ্ঞতা তৈরি করতে, আপনি অ্যাপে 3D মডেল এবং এনভায়রনমেন্ট যোগ করতে পারেন।
আপনি Android XR-এ আগে থেকে থাকা Android অ্যাপের ডিজাইন ল্যাঙ্গুয়েজ বজায় রাখতে পারবেন। নতুন অ্যাপ বা রিডিজাইনের ক্ষেত্রে, UI সাইজ, অ্যাক্সেসিবিলিটি, টাইপোগ্রাফি, কালার স্কিম ও কম্পোনেন্ট সংক্রান্ত মেটেরিয়াল ডিজাইন নির্দেশিকা মেনে চলার কথা বিবেচনা করুন। এটি করলে আপনার অ্যাপ Android-এর পরিচিত, প্রমাণিত ডিজাইন ও ব্যবহারযোগ্যতার সুবিধা পাবে।
আপনি Material Design 3 লাইব্রেরি ব্যবহার করে Android অ্যাপ তৈরি করলে, আপনি এর কম্পোনেন্ট ও অ্যাডাপ্টিভ লেআউটে সহজেই স্পেশিয়াল UI আচরণ যোগ করতে পারবেন।
আপনার অ্যাপের ভিজ্যুয়াল ডিজাইন কীভাবে পরীক্ষা করবেন
ব্যবহারকারীর জন্য আরামদায়ক ও অ্যাক্সেসযোগ্য অভিজ্ঞতা নিশ্চিত করতে আপনার অ্যাপের ভিজ্যুয়াল ডিজাইন পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ। বিভিন্ন XR প্ল্যাটফর্ম ও এনভায়র্নমেন্টে কীভাবে পরীক্ষা করতে হয় তা এখানে দেওয়া হল।
ইমুলেটর, সিমুলেটর ও আসল ডিভাইস ব্যবহার করা
- আপনি Android অ্যাপ ডেভেলপ করলে, Android XR এমুলেটরে আপনার অ্যাপ পরীক্ষা করুন। এটি আপনাকে সম্ভাব্য সমস্যা শনাক্ত করতে এবং কোনও ফিজিক্যাল ডিভাইস ছাড়াই দ্রুত ইটারেট করতে সাহায্য করে।
ভিজ্যুয়াল ডিজাইন টেস্টিং চেকলিস্ট
- কোনও মুভমেন্ট বা অ্যানিমেশন মোশন সিকনেস ট্রিগার করছে কিনা তা নিশ্চিত করতে পরীক্ষা করুন। মসৃণ ট্রানজিশন, স্থিতিশীল ফ্রেম রেট ও অনুমানযোগ্য মুভমেন্ট আছে কিনা দেখুন।
- বাস্তব-জগতের সেটিংসে পাসথ্রু ব্যবহার করে দেখুন যাতে ভার্চুয়াল এলিমেন্টগুলি আশেপাশের পরিবেশের সাথে মিশে যায়।
- উজ্জ্বল ও অনুজ্জ্বল পরিবেশ সহ বিভিন্ন আলোর পরিস্থিতিতে আপনার অ্যাপ পরীক্ষা করুন।
- বিভিন্ন দূরত্ব ও কোণে টেক্সট কতটা সহজে পড়া যাচ্ছে তা চেক করুন।
- অ্যাক্সেসিবিলিটি ও আরামের জন্য কালার স্কিম মূল্যায়ন করুন।
ব্যবহারকারীর মতামত সংগ্রহ করা
উন্নতি করার মতো কোনও জায়গা আছে কিনা তা শনাক্ত করতে ব্যবহারকারী টেস্টিং কন্ডাক্ট করুন। XR অভিজ্ঞতা ও দেখার ক্ষমতার বিভিন্ন লেভেলের ব্যবহারকারীদের অন্তর্ভুক্ত করুন যাতে একটি সামগ্রিক দৃষ্টিভঙ্গি পাওয়া যায়।
Android XR-এ টার্গেট
XR অ্যাপে, টার্গেট হল এমন ট্যাপ করা যায় বা পয়েন্ট করা যায় এমন জায়গা যার সাথে ব্যবহারকারীরা ইন্টার্যাক্ট করেন। বড় টার্গেট নির্ভুলতা, আরাম ও ব্যবহারযোগ্যতা বাড়ায়। আপনার অ্যাপ অ্যাক্সেসিবল করতে, মেটেরিয়াল ডিজাইন টার্গেট নির্দেশিকা অনুসরণ করুন। এগুলি Android, Unity, OpenXR এবং WebXR অ্যাপের সাথে কাজ করবে। আপনার অ্যাপ যদি আগে থেকেই Material Design সংক্রান্ত সাজেশন মেনে চলে, তাহলে আপনার টার্গেট সাইজ ন্যূনতম মাপ পূরণ করে, যদিও ৫৬dp হল অপ্টিমাল।
সব ইন্টার্যাক্টিভ UI এলিমেন্টকে এগুলি বিবেচনা করতে হবে:
- সাজেস্ট করা টার্গেট: ৫৬dp x ৫৬dp বা এর চেয়ে বড়
- ভিজ্যুয়াল অ্যাফোর্ডেন্স (আইকন): ৪৮dp x ৪৮dp বা আরও বড়
- টার্গেট ও ভিজ্যুয়াল অ্যাফর্ডেন্সের মধ্যে অফসেট: ৪ ডিপি
- সঠিক ইন্টার্যাকশনের জন্য, বিভিন্ন UI এলিমেন্টের পয়েন্টার টার্গেট ওভারল্যাপ করা উচিত নয়
- প্রয়োজন অনুযায়ী, টার্গেট ও আইকন মূল কন্টেনার বা লেবেলের সাথে স্কেল করা হয়।
মাউস নিয়ে গেলে কী হবে তা যোগ করতে ভুলবেন না
আরও বেশি অ্যাক্সেসিবিলিটির জন্য, ইন্টার্যাক্টিভ কম্পোনেন্টের প্রাথমিক ইন্টার্যাক্টিভ স্টেট ছাড়াও হোভার ও ফোকাস স্টেট যোগ করুন। হোভার স্টেট সকলের জন্যই সহায়ক হতে পারে এবং যেসব ব্যবহারকারী UI এলিমেন্ট বেছে নেওয়ার জন্য পয়েন্টার ইনপুটের উপর নির্ভর করেন তাদের জন্য এটি বিশেষভাবে গুরুত্বপূর্ণ।
সিস্টেমের মধ্যে আই ট্র্যাকিং ফাংশনালিটি চালু করার ক্ষেত্রে হোভার স্টেট গুরুত্বপূর্ণ ভূমিকা পালন করে । তবে, আই ট্র্যাকিং চালু করা থাকলে, ব্যবহারকারীর গোপনীয়তা রক্ষা করতে এবং ডেটা শেয়ার করা আটকাতে, হোভার স্টেট অ্যাপ্লিকেশনের কাছে অ্যাক্সেসযোগ্য হয় না। কোন UI কম্পোনেন্ট ইন্ট্যার্যাক্ট করা যায় তা বোঝাতে সিস্টেমটি ব্যবহারকারী-দৃশ্যমান-শুধুমাত্র হাইলাইট স্টেট ড্র করবে।
দু'টি টার্গেটের মধ্যে দূরত্ব
Material Design-এ টার্গেটগুলির মধ্যে কমপক্ষে ৮dp স্পেস রাখার কথা বলা হয়েছে, এর মধ্যে বোতামও পড়ে। এই স্পেসিং নিশ্চিত করে যে ব্যবহারকারীরা সহজেই ইন্টারেক্টিভ এলিমেন্টগুলির মধ্যে পার্থক্য করতে পারবেন এবং ভুলবশত কোনও এলিমেন্ট বেছে নেওয়া এড়াতে পারবেন।
বোতামগুলির মধ্যে নির্দিষ্ট দূরত্ব তাদের প্রসঙ্গ এবং আকারের উপর নির্ভর করে পরিবর্তিত হতে পারে। বিবেচনা করার মতো কিছু বিষয়:
- বোতামের সাইজ: বড় বোতামের মধ্যে আরও বেশি স্পেসের প্রয়োজন হতে পারে যাতে সেগুলি স্পষ্টভাবে দেখা যায়।
- বোতামের গ্রুপিং: ফাংশনালিটির দিক থেকে খুব বেশি সম্পর্কিত বোতামগুলিকে একসাথে গ্রুপ করা যেতে পারে, তবে সম্পর্কহীন বোতামগুলির মধ্যে আরও বেশি দূরত্ব থাকা উচিত।
- লেআউট: স্ক্রিনের সামগ্রিক লেআউট বোতামগুলির মধ্যে স্পেসিংকে প্রভাবিত করতে পারে। যেমন, টুলবারে বোতামগুলির মধ্যে দূরত্ব ডায়ালগে বোতামগুলির মধ্যে দূরত্বের চেয়ে কম হতে পারে।
প্যানেলের সাইজ ও স্কেল
Android XR এমনভাবে ডিজাইন করা হয়েছে যাতে আপনার অ্যাপটি অনেক বেশি সংখ্যক দর্শকের কাছে আরামদায়ক, পাঠযোগ্য ও অ্যাক্সেসযোগ্য হয়। অপ্টিমাল অভিজ্ঞতার জন্য, Android XR 0.868 dp-to-dmm ব্যবহার করে।
আপনি প্যানেল ব্যবহার করলে, আপনার XR অ্যাপ সম্ভবত কোনও ব্যবহারকারীর থেকে ফিজিক্যাল স্ক্রিনের চেয়ে বেশি দূরে থাকবে। ধরে নিন যে ব্যবহারকারী হেডসেট পরে আছেন। সর্বোত্তম আরামের জন্য, ৪১° ফিল্ড অফ ভিউতে প্রাথমিক কন্টেন্ট রাখুন যাতে ব্যবহারকারীদের ইন্টার্যাক্ট করার জন্য মাথা নাড়াতে না হয়।
সাজেশন
- প্যানেলের কোণগুলি ৩২dp রেডিয়াস সহ গোলাকার। আপনি এই ডিফল্ট সেটিং ওভাররাইড করতে পারবেন।
প্যানেলের গভীরতা সংক্রান্ত আচরণ
- হোম স্পেস: অ্যাপ ব্যবহারকারীর থেকে ১.৭৫ মিটার দূরে লঞ্চ হয় এবং ডেভেলপাররা এটি ওভাররাইড করতে পারেন না।
- ফুল স্পেস: ডিফল্ট হিসেবে, অ্যাপগুলি হোম স্পেসে যে অবস্থানে ছিল সেই একই অবস্থানে লঞ্চ হয়। ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে প্যানেল প্লেস করতে আপনি স্পেশিয়াল লজিক ব্যবহার করতে পারেন, যদিও আমরা ১.৭৫ মিটার লঞ্চ দূরত্ব সাজেস্ট করি।
কোনও অ্যাপ ব্যবহারকারীর থেকে ১.৭৫ মিটার দূরে থাকলে:
- ১০২৪ ডিপিকে ১৫৫৬.২৪ মিলিমিটার হিসেবে ধরা হয়
- ৭২০dp-কে ১০৯৩.৬৬ মিলিমিটার হিসেবে ধরা হয়
- প্রকৃত জগতে ১ মিটার = XR-এ ১ মিটার
বোতাম ও আইকন
আপনার আগে থেকেই Android অ্যাপ থাকলে, Android XR-এর জন্য আপনাকে বিশেষ কম্পোনেন্ট ডিজাইন করতে হবে না। বোতাম ও আইকনের জন্য Material Design-এর নির্দেশিকা মেনে চলুন। আপনার কাছে Unity, OpenXR বা WebXR অ্যাপ থাকলে, আপনি নিজের বোতাম ও আইকন যেমন আছে তেমনই রাখতে পারেন অথবা Material Design থেকে অনুপ্রেরণা নিতে পারেন।
আপনি যদি নিজের বোতাম বা আইকন তৈরি করার সিদ্ধান্ত নেন, তাহলে সাধারণ ফর্ম, পরিষ্কার লাইন, প্রাথমিক আকার এবং সীমিত কালার প্যালেট বেছে নিন। অত্যন্ত বিস্তারিত ডিজাইন এড়িয়ে চলুন। বিভিন্ন রেজোলিউশন ও দূরত্ব থেকে দেখার ক্ষেত্রে সেগুলি যাতে স্কেলেবল ও সহজে পাঠযোগ্য হয় তা নিশ্চিত করা। অ্যাক্সেসিবিলিটির জন্য, কম্পোনেন্ট ও এর ব্যাকগ্রাউন্ডের মধ্যে যথেষ্ট কনট্রাস্ট আছে কিনা তা নিশ্চিত করুন এবং স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি ব্যবহারকারীদের জন্য টেক্সট বিবরণ বা টুলটিপ প্রদান করুন।
রঙ
Android XR, Material Design-এর কালার সিস্টেম মেনে চলে যাতে ধারাবাহিক ও দৃষ্টিনন্দন ইন্টারফেস নিশ্চিত করা যায়। XR-এর জন্য উপযুক্ত ইমারসিভ ভিজ্যুয়াল স্টাইল তৈরি করতে, পর্যাপ্ত কনট্রাস্ট সহ ডিজাইন করুন, ব্যালেন্সড প্যালেট বেছে নিন, বর্ণান্ধতা থাকা ব্যক্তিদের জন্য অ্যাক্সেসিবল রঙ ব্যবহার করুন এবং চোখের উপর চাপ বা বিভ্রান্তি সৃষ্টি করতে পারে এমন অস্বস্তিকর কালার কম্বিনেশন এড়িয়ে চলুন।
ডিসপ্লে সংক্রান্ত পার্থক্যের জন্য রঙ অপ্টিমাইজ করা
ওয়্যারড XR গ্লাসের ডিসপ্লে XR হেডসেটের স্ক্রিনের থেকে আলাদাভাবে কাজ করে। আপনার ভিউয়ের পরিবর্তে একটি সলিড স্ক্রিন দেখানোর বদলে, ওয়্যারড XR গ্লাসকে একটি প্রজেক্টর হিসেবে ভাবুন যা একটি পরিষ্কার লেন্সে আলো বিম করছে।
- হেডসেট পারিপার্শ্বিক জগৎকে রিপ্লেস করে: এটি ক্যামেরা ব্যবহার করে ঘর ক্যাপচার করে এবং অস্বচ্ছ স্ক্রিনে আপনাকে দেখায়। অ্যাপটি কালো দেখাতে চাইলে, এটি পিক্সেল বন্ধ করে দেয়, ফলে একটি সত্যিকারের অন্ধকার স্পট তৈরি হয় যা এর পিছনের বিশ্বকে ব্লক করে দেয়।
- ওয়্যারড XR গ্লাস ওভারলে: এটি আপনাকে সরাসরি গ্লাসের মাধ্যমে রুম দেখতে দেয়। ডিসপ্লে সেই ভিউয়ের উপরে আলো যোগ করে। যদিও আপনি পিক্সেলের মাধ্যমে "অন্ধকার" প্রজেক্ট করতে পারবেন না, তবে হার্ডওয়্যার ডিম করার মাধ্যমে ফিজিক্যাল ওয়ার্ল্ডকে ব্লক করতে লেন্সকে অন্ধকার করে দিতে পারবেন।
স্বচ্ছতার জন্য ডিজাইন করা
ওয়্যারড XR গ্লাসের ডিসপ্লে অ্যাডিটিভ হওয়ার কারণে, আপনার বেছে নেওয়া রঙ সরাসরি প্রভাবিত করে যে আপনার ইন্টারফেস কতটা সলিড বা ট্রান্সপারেন্ট দেখাবে।
- কালো রঙ ট্রান্সপারেন্ট হিসেবে রেন্ডার হয়: আপনি সম্পূর্ণ কালো রঙ দেখাতে পারবেন না। সম্পূর্ণ কালো পিক্সেল বন্ধ থাকে, অর্থাৎ ব্যবহারকারী কাঁচের ওই অংশ দিয়ে সরাসরি বাস্তব জগৎ দেখতে পান।
- উজ্জ্বলতা দৃশ্যমানতা বাড়ায়: উজ্জ্বল রঙ আরও বেশি সলিড দেখায়। গাঢ় রঙ কম আলো নির্গত করে এবং আরও স্বচ্ছ দেখায়। সাদা রঙ যোগ করলে দৃশ্যমানতা বাড়ে, তবে চোখের উপর চাপ এড়াতে অতিরিক্ত উজ্জ্বলতা এড়িয়ে চলুন।
- পরিবেশের সাথে মেশানো: আপনার UI-এর রঙ বাস্তব জগতের সাথে ভিজ্যুয়ালি মিশে যাবে। উজ্জ্বল, হাই-কনট্রাস্ট রঙ ব্যবহার করলে, আপনার UI অপ্রত্যাশিত ব্যাকগ্রাউন্ডের তুলনায় আরও আলাদা করে বোঝা যায়।
- লেন্স অনুজ্জ্বল করলে সলিডিটি বাড়ে: লেন্স যত গাঢ় হবে, ডিজিটাল কন্টেন্ট তত কম স্বচ্ছ ও বেশি সলিড দেখাবে। ইলেকট্রোক্রোমেটিক ডিমিং বাড়ালে আরও বেশি ব্যাকগ্রাউন্ড আলো ব্লক করা যায়, এর ফলে রঙগুলি আরও স্পষ্ট দেখায় এবং ডার্ক এলিমেন্টগুলি আরও বেশি করে চোখে পড়ে।
XR-এ ডার্ক ও লাইট থিম
Android মোবাইল অ্যাপে যেভাবে ডার্ক ও লাইট থিম ব্যবহার করেন, এখানেও সেইভাবে ব্যবহার করুন। ব্যবহারকারীরা Android XR-এ ডার্ক ও লাইট থিমের মধ্যে পরিবর্তন করতে পারবেন। এর জন্য তাদের ব্যক্তিগত পছন্দ অনুযায়ী সবচেয়ে উপযুক্ত ভিজ্যুয়াল স্টাইল বেছে নিতে হবে।
মেটেরিয়াল ডিজাইন কালার স্কিম সম্পর্কে আরও জানুন।
XR টাইপোগ্রাফি
XR-এ ব্যবহারকারীর আরামদায়ক অভিজ্ঞতার জন্য ফন্ট কতটা সহজে পড়া যাচ্ছে তা অত্যন্ত গুরুত্বপূর্ণ। আমরা সাজেস্ট করি যে ১৪dp বা তার চেয়ে বড় ফন্ট সাইজ এবং স্বাভাবিক বা তার চেয়ে বেশি ফন্ট ওয়েট সহ টাইপস্কেল বিকল্প ব্যবহার করুন, যাতে টেক্সট আরও সহজে পড়া যায়।
সহজেই ব্যবহার করা যায় এমন অ্যাপ তৈরি করতে, Material Design-এর টাইপোগ্রাফি সংক্রান্ত নির্দেশিকা অনুসরণ করার কথা বিবেচনা করুন।
XR-এ টাইপোগ্রাফি
- পরিবর্তনযোগ্য দূরত্বের জন্য সাইজ: মনে রাখবেন যে ব্যবহারকারীরা মুভ করবেন এবং বিভিন্ন লোকেশন থেকে টেক্সট দেখবেন। নিশ্চিত করুন যে ফন্ট সাইজ যথেষ্ট বড় যাতে দূর থেকে পড়া যায়।
- ব্যবহারকারীর স্বাভাবিক দৃষ্টিসীমার মধ্যে টেক্সট পজিশন করুন: এর ফলে অতিরিক্ত মাথা ঘোরানো ও ঘাড়ের পেশীতে চাপ পড়া এড়ানো যায়।
- গভীরতা ও স্কেল বিবেচনা করুন: 3D স্পেসে হায়ারার্কি তৈরি করতে গভীরতা ও স্কেল ব্যবহার করুন।
- ব্যবহারকারীর ব্যাকগ্রাউন্ডের সাথে টেক্সট যাতে সহজে পড়া যায় তা নিশ্চিত করুন: বেশি ওজন আরও বেশি কনট্রাস্ট প্রদান করে। পরিবেশের রঙ, আলো ও জটিলতার উপর নির্ভর করে অ্যাডজাস্ট করুন। মনে রাখবেন, উজ্জ্বল টেক্সট ভ্যালু ওয়্যারড XR গ্লাসে টেক্সট পড়ার উপযুক্ততা বজায় রাখতে সাহায্য করে।
- মানানসই টাইপোগ্রাফি ব্যবহার করুন: প্যানেলগুলি ব্যবহারকারীর থেকে খুব কাছাকাছি, খুব দূরে এবং অস্বস্তিকর দেখার কোণে থাকতে পারে।
- মুভিং অবজেক্টের সাথে অ্যাটাচ করা টেক্সট সীমিত করুন: এর ফলে মোশন সিকনেস হতে পারে।
XR-এ অ্যাক্সেসিবল টাইপোগ্রাফি
- পঠনযোগ্য ফন্ট বেছে নিন: ছোট সাইজ ও দূর থেকে স্পষ্ট দেখা যায় এমন ফন্টকে অগ্রাধিকার দিন।
- সাধারণ বাক্যে যেমনভাবে লেখেন ঠিক তেমনভাবেই লিখবেন: সাধারণ বাক্যে যেমনভাবে লেখেন ঠিক তেমনভাবেই লিখলে তা ক্যাপিটাল লেটারে লেখার চেয়ে সহজে পড়া যায়।
- লাইনের দৈর্ঘ্য সীমিত করুন: পাঠযোগ্যতা উন্নত করতে লাইনের দৈর্ঘ্য ছোট রাখার চেষ্টা করুন।
- অ্যাক্সেস করা যায় এমন রঙ বেছে নিন: এমন রঙের কম্বিনেশন ব্যবহার করুন যা বর্ণান্ধতা থাকা ব্যবহারকারীদের পক্ষে সহজে পড়া যায়।
- অত্যধিক টেক্সট ব্যবহার করা এড়িয়ে চলুন: টেক্সটকে যথেষ্ট জায়গা দিন।
- টেক্সট স্কেলিংয়ের অনুমতি দিন: ব্যবহারকারীদের ব্যক্তিগত প্রয়োজন অনুযায়ী টেক্সটের সাইজ অ্যাডজাস্ট করতে দিন।
OpenXR™ এবং OpenXR লোগো হল The Khronos Group Inc.-এর মালিকানাধীন ট্রেডমার্ক এবং এগুলি চীন, ইউরোপীয় ইউনিয়ন, জাপান ও যুক্তরাজ্যে ট্রেডমার্ক হিসেবে রেজিস্টার করা আছে।