অ্যাডাপ্টিভ ডিজাইন হলো এমন লেআউট ডিজাইন করার পদ্ধতি যা নির্দিষ্ট ব্রেকপয়েন্ট এবং ডিভাইসের সাথে খাপ খাইয়ে নেয়।
অভিযোজিত লেআউট কার্যকরভাবে বাস্তবায়ন করতে:
প্রথমে, লেআউট পরিবর্তন নির্ধারণ করতে ডিভাইসের উইন্ডো ক্লাস উইডথ বিবেচনা করুন, তারপর উচ্চতা সমন্বয় করুন। বিভিন্ন স্ক্রিন সাইজ সমর্থন করে ।
ওয়েব ডেভেলপমেন্টের মতোই, অ্যান্ড্রয়েড রেসপন্সিভ ডিজাইনের ধারণা কাজে লাগায় এবং নমনীয় গ্রিড ও ছবি ব্যবহার করে এমন লেআউট তৈরি করে যা তার পারিপার্শ্বিকতার সাথে কার্যকরভাবে সাড়া দেয়।
অ্যাডাপ্টিভ পদ্ধতি যেমন: রিফ্লো, রিভিল, প্রেজেন্টেশন চেঞ্জ-এর মাধ্যমে লেআউটগুলোকে বিভিন্ন আকারের সাথে মানিয়ে নেওয়ার সুযোগ দিন।
আপনার অ্যাপটিকে শুধুমাত্র পোর্ট্রেট মোডে লক করা থেকে বিরত থাকুন। এর ফলে অ্যাপের আকার পরিবর্তন করলে লেটারবক্সিং দেখা দেয়।
না
বর্ধিত স্ক্রিন আকারের সাথে লেআউট মানিয়ে নেওয়ার ডিজাইন নির্দেশিকার জন্য, Compose-এ থাকা ‘Support different screen sizes’ ডেভেলপার গাইড এবং M3 ‘Applying Layout’ পৃষ্ঠাটি পড়ুন। এছাড়াও, বড় স্ক্রিনের লেআউটের অনুপ্রেরণা ও বাস্তবায়নের জন্য আপনি অ্যান্ড্রয়েড লার্জ স্ক্রিন ক্যানোনিকাল গ্যালারিটি দেখতে পারেন।
অভিযোজনযোগ্য চিন্তা করুন
আপনার অ্যাপ ডিজাইন করার সময় অ্যাডাপ্টিভ ডিফল্ট হওয়া উচিত। অ্যান্ড্রয়েড মোবাইল বাজার ক্রমাগত পরিবর্তিত হচ্ছে, তাই মোবাইল বলতে শুধু হ্যান্ডসেট ফোনকে বোঝানো যায় না। বরং এর মধ্যে হ্যান্ডসেট ফোন, ফোল্ডেবল, ট্যাবলেট এবং এর মধ্যবর্তী সবকিছুই অন্তর্ভুক্ত থাকা উচিত।
যদিও কিছু নির্দিষ্ট ফিচার এবং ব্যবহারের ক্ষেত্র সব স্ক্রিনের আকার বা ফর্ম ফ্যাক্টরে উপযুক্ত নাও হতে পারে, অ্যাডাপ্টিভ ডিজাইন আপনার ব্যবহারকারীদের আর্গোনমিক্স, ব্যবহারযোগ্যতা এবং অ্যাপের গুণমানের ক্ষেত্রে আরও বেশি স্বাধীনতা দেয়।
পদ্ধতি এবং গুণমান
আপনি আপনার অ্যাপের মূল ধারণাগুলো তুলে ধরার জন্য প্রধান স্ক্রিনগুলো ডিজাইন করার মাধ্যমে শুরু করতে পারেন, যেখানে ক্লাস সাইজকে ব্রেকপয়েন্ট হিসেবে ব্যবহার করে আপনার অ্যাপের বাকি অংশের জন্য নির্দেশিকা তৈরি করা হবে। এই হিরো এক্সপেরিয়েন্সগুলো অ্যাপের স্বতন্ত্র অ্যাডাপ্টিভ এবং ফর্ম ফ্যাক্টর বৈশিষ্ট্যগুলোকে তুলে ধরতে পারে। অথবা, কন্টেন্ট কীভাবে সংকুচিত, প্রসারিত বা পুনর্বিন্যস্ত হবে তা উল্লেখ করে মৌলিক স্তর থেকেই সেটিকে রেসপন্সিভ করে ডিজাইন করুন।
এই উদাহরণে, আরও ভালো ও ব্যবহার-বান্ধব নেভিগেশনের জন্য ন্যাভিগেশন এবং কন্টেন্ট রিফ্লো, ফ্লেক্স ও স্কেল হয়। লেআউট গ্রিডটি উল্লম্ব অবস্থা থেকে বহু-কলামে প্রসারিত হয়। অ্যাপ বারের অ্যাড্রেস এবং ফিল্টারগুলো লেআউট গ্রিডের সাথে মানিয়ে নেওয়ার জন্য রিফ্লো ও ফ্লেক্স হয়।
করুন
না
করুন
করুন
না
ইনপুট এবং বাটনগুলো যেন প্রসারিত না হয়, তা নিশ্চিত করুন।
আবদ্ধকরণ এবং কাঁচের ফলকের পরিপ্রেক্ষিতে চিন্তা করুন।
অ্যাডাপ্টিভ লেআউটের জন্য কন্টেন্টকে গ্রুপ করতে পেইন (pane) নামক কন্টেইনমেন্ট কনসেপ্টটি ব্যবহার করুন। উদাহরণস্বরূপ, এখানে ব্যবহৃত উদাহরণটি হলো একটি ডিটেইল স্ক্রিন, যা একটি পেইন এবং এটিকে একটি লিস্ট-ডিটেইল লেআউটে দেখানো যেতে পারে।
ছোট আকারের ক্ষেত্রে এক-প্যানেলের বিন্যাস মেনে চলা উচিত।
মিডিয়ামে ১-২ প্যান লেআউট ব্যবহার করা যেতে পারে।
বড় এবং অতিরিক্ত-বড় আকারের ক্ষেত্রে একাধিক প্যান লেআউট ব্যবহার করা যেতে পারে।
এলিমেন্টগুলোকে একসাথে গ্রুপ করতে ইনট্রিনসিক এবং ভিজ্যুয়াল কন্টেইনার ব্যবহার করুন। পেইনগুলো ভেতরে আসতে, লুকাতে, প্রসারিত হতে, সংকুচিত হতে বা পপ আপ হতে পারে। পেইনের সাহায্যে চিন্তা করলে সব ধরনের মোবাইল ডিভাইসে ডিজাইন করা সহজ হয়।
বড় স্ক্রিনে প্যান অপরিহার্য না হলেও, নমনীয়তার জন্য কন্টেন্টকে কয়েকটি গ্রুপে ভাগ করে রাখার কথা ভাবা উচিত।
উপাদানগুলো কীভাবে গ্রিডের সাথে খাপ খায়, তার উপর মনোযোগ দিয়ে সেগুলোকে স্থান পরিবর্তন ও পুনর্বিন্যাস করার সুযোগ দিন। উপাদানগুলোর উল্লম্ব পরিবর্তন বিবেচনা করুন এবং এটিকে সীমাবদ্ধতা ও উপস্থাপনার পরিবর্তনের সাথে সমন্বয় করুন।
প্রদর্শিত বিষয়বস্তুর ব্যাপ্তি ও পরিমাণ বিবেচনা করুন।
ফোনের ছোট ভিডিও গ্রিড ট্যাবলেটে ঠাসাঠাসি ও বিশৃঙ্খল হয়ে যায়। স্ক্রিনের আকার, ঘনত্ব এবং ইনপুটের উপর ভিত্তি করে UI উপাদানের স্কেল আপডেট করুন।
একটি উচ্চ মানের অ্যাপকে অবশ্যই মূল অ্যাপ এবং বড় স্ক্রিনের মানের নির্দেশিকা অনুযায়ী নির্ধারিত স্তর পূরণ করতে হবে।
লেআউট সম্পর্কে আরও জানতে, ম্যাটেরিয়াল ডিজাইন ৩ (M3) আন্ডারস্ট্যান্ডিং লেআউট পেজটি দেখুন।
অনন্য ফর্ম ফ্যাক্টর আকারগুলোর সুবিধা নিন।
ছোট স্ক্রিনের আকার এবং বিভিন্ন অ্যাস্পেক্ট রেশিওর কথাও ভুলে যাবেন না, কারণ অ্যান্ড্রয়েড ফোন বিভিন্ন আকারের হয়ে থাকে এবং ফোল্ডেবল ফোনে একটি ছোট কভার স্ক্রিন থাকতে পারে যেখানে আপনার অ্যাপটি দেখানো যায়।
মিডিয়া প্লেয়ারের মতো কন্ট্রোল-ভিত্তিক লেআউটের ক্ষেত্রে, কন্ট্রোলগুলোকে পুনর্বিন্যাস করতে এবং কন্টেন্টকে প্রকাশিত হতে দিন।
ব্যবহারকারীদের মানিয়ে নিতে সাহায্য করার জন্য, একটি বড় প্লে বাটনের মতো অ্যাঙ্কর এলিমেন্ট ব্যবহার করুন, যা চারপাশের কন্টেন্টকে মানিয়ে নেবে এবং হিরো আর্টটি কভার স্ক্রিনের ব্যাকগ্রাউন্ড হয়ে যাবে।
আকারের শ্রেণী ছাড়িয়ে
যদিও অ্যাডাপ্টিভ ডিজাইনের জন্য উইন্ডোর আকার একটি সাধারণ বিষয়, আপনার অ্যাপকে ব্যবহারকারীদের মনিটর ও ইনপুট ডিভাইস সংযোগ করা, বিভিন্ন দূরত্ব থেকে দেখা এবং ডিভাইসের অবস্থান পরিবর্তনের জন্যও প্রস্তুত থাকতে হবে। mediaQuery API ব্যবহার করে এই পরিবর্তনগুলো পরীক্ষা করা সম্ভব, যা আপনার অ্যাপ নির্দিষ্ট ব্যবহারের ক্ষেত্রে বিশেষ UI এলিমেন্টগুলোকে কীভাবে মানিয়ে নেবে, তা ডিজাইন করার সময় আপনাকে সূক্ষ্মতা যোগ করার সুযোগ দেয়। আকার, ইনপুট, ফর্ম ফ্যাক্টর এবং অবস্থান অনুযায়ী পুরো স্ক্রিন ডিজাইন না করে, আপনার অ্যাপের ডিজাইনকে কম্পোনেন্ট বা পেইন পর্যায়ে মানিয়ে নিন।
ইনপুট ইন্টারঅ্যাকশন সম্পর্কে আরও জানতে, ডেস্কটপ এক্সপেরিয়েন্স ইন্টারঅ্যাকশন গাইডগুলো পড়ুন।
সর্বাধুনিক অ্যাডাপ্টিভ এপিআই এবং ডিজাইন নির্দেশিকা ব্যবহার করে নির্মিত ও ডিজাইন করা একটি নমুনা কেস স্টাডি, Pawparrazzi , দেখে নিন।
