বিভিন্ন ফর্ম ফ্যাক্টরের জন্য ডিজাইন করুন

আপনার অ্যাপের UI-এর ডিজাইন কোনও নির্দিষ্ট ডিভাইস ফর্ম ফ্যাক্টরের সাথে যুক্ত নয়। Android অ্যাপ্লিকেশনগুলিকে বিভিন্ন ধরনের ডিভাইসের সাথে মানানসই হতে হবে, ৪-ইঞ্চি হ্যান্ডসেট থেকে শুরু করে ৫০-ইঞ্চি টিভি থেকে শুরু করে ছোট বড় করা যায় এমন উইন্ডো সহ ChromeOS ডিভাইস পর্যন্ত।

আপনার অ্যাপের ইউজার ইন্টারফেস উইন্ডোর মধ্যে তৈরি করা হয়, যার সাইজ ইচ্ছামতো পরিবর্তন করা যায়। বিভিন্ন উইন্ডো সাইজের জন্য আলাদা লেআউট প্রদান করতে আপনি রিসোর্স কোয়ালিফায়ার ব্যবহার করেন। ডিভাইসের স্ক্রিনের সাইজের সীমাবদ্ধতার কারণে অথবা ব্যবহারকারী মাল্টি-উইন্ডো মোড ব্যবহার করে উইন্ডোর সাইজ পরিবর্তন করার কারণে এই পার্থক্য হতে পারে।

রেসপন্সিভ কন্টেন্ট ডিজাইন করা

আপনার সব ব্যবহারকারীকে সমৃদ্ধ অভিজ্ঞতা প্রদান করা উচিত, তাই আপনার অ্যাপের প্রতিটি স্ক্রিনকে আপনার জন্য উপলভ্য উইন্ডো রিয়েল এস্টেটের সম্পূর্ণ সুবিধা নিতে হবে।

যেমন, ফোনের স্ক্রিনের সম্পূর্ণ প্রস্থ জুড়ে কোনও উইন্ডোতে চলা অ্যাপ মাল্টি-উইন্ডো মোডে প্রবেশ করার সময় কোনও কন্টেন্টের বিবরণ লুকাতে পারে এবং ChromeOS ডিভাইসের স্ক্রিনের সম্পূর্ণ প্রস্থ জুড়ে কোনও উইন্ডোতে চলা অ্যাপ আরও কন্টেন্ট দেখানোর জন্য ইউজার ইন্টারফেস বড় করতে পারে।

ব্যবহারকারীর এইসব প্রত্যাশা পূরণ করার পাশাপাশি, বড় স্ক্রিনের ডিভাইসে আরও কন্টেন্ট দেখানো প্রয়োজন যাতে অনেক বেশি সাদা জায়গা না থেকে যায় অথবা অনিচ্ছাকৃতভাবে কোনও বিশ্রী ইন্টার‍্যাকশন না হয়। নিচের ছবিতে, আপনি কিছু সমস্যা দেখতে পাবেন যা বড় উইন্ডোর জন্য ইউজার ইন্টারফেস ডিজাইন অ্যাডাপ্ট করার সময় দেখা দিতে পারে:

ছবি ১. বড়-প্রস্থের উইন্ডোতে পর্যাপ্ত কন্টেন্ট না থাকলে, বিশ্রী হোয়াইটস্পেস এবং অত্যন্ত দীর্ঘ লাইন তৈরি হয়।

রেসপন্সিভ নেভিগেশন অভিজ্ঞতা ডিজাইন করার ব্যাপারে আরও জানতে, রেসপন্সিভ UI-এর জন্য নেভিগেশন দেখুন।

ব্যবহারকারীকে কাস্টমাইজ করা অভিজ্ঞতা প্রদান করা

উপলভ্য জায়গা পূরণ করার জন্য আপনার কন্টেন্ট ভিউ বাড়ানোর বাইরেও অনন্য অভিজ্ঞতা প্রদান করা গুরুত্বপূর্ণ। আপনি ইউজার ইন্টারফেস কাস্টমাইজ করতে পারেন যাতে প্রদত্ত উইন্ডো সাইজের জন্য আদর্শ ব্যবহারকারীর অভিজ্ঞতা প্রদান করা যায়, এমনকি সম্পূর্ণ ভিন্ন লেআউট এবং উইজেট ব্যবহার করেও।

ছবি ২-এ, পর্যাপ্ত উল্লম্ব স্পেস থাকলে, টপ-লেভেল নেভিগেশন হিসেবে BottomNavigationView ব্যবহার করা হয়। ছবির ডানদিকে যেমন দেখানো হয়েছে, উইন্ডোর সাইজ ছোট করা হলে, টপ-লেভেল নেভিগেশন DrawerLayout ব্যবহার করে প্রয়োগ করা হয়।

ছবি ২. ভার্টিক্যাল স্পেস সীমিত হলে, নিচের নেভিগেশন বারটি নেভিগেশন ড্রয়ার দিয়ে প্রতিস্থাপন করা হয়।

এখানে আরও কিছু উদাহরণ দেওয়া হল:

• Toolbar উপলভ্য জায়গার পরিমাণ অনুযায়ী অ্যাকশন মেনু আইটেম দেখাতে বা লুকাতে পারে।
• একটি RecyclerView.LayoutManager উইন্ডোর সাইজের সম্পূর্ণ সুবিধা নিতে এর স্প্যান কাউন্ট পরিবর্তন করতে পারে
• কাস্টম ভিউয়ের জন্য আপনি আরও বেশি বিবরণ দেখাতে পারবেন, কারণ আপনার কাছে আরও বেশি জায়গা আছে।

আপনার ব্যবহারকারীরা যেখানেই আপনার অ্যাপ চালান না কেন, তাদের দুর্দান্ত অভিজ্ঞতা নিশ্চিত করার জন্য এগুলি সবই দুর্দান্ত উপায়।

আপনি রেসপন্সিভ ডিজাইন প্যাটার্নের আরও উদাহরণ এবং অ্যাডাপ্টিভ লেআউটের আইডিয়া material.io-তে খুঁজে পাবেন।