আপনার কন্টেন্টের জন্য একটি কাঠামো ও ধারণ পদ্ধতির মাধ্যমে একটি নমনীয় প্রবাহ ও ছন্দ তৈরি করুন। প্রথমে লেআউট কন্টেইনার ডিজাইন করে শুরু করুন, এবং তারপর কন্টেন্ট যোগ করুন।
১. মূল কাঠামো: বিষয়বস্তু নির্দেশনার জন্য লেআউট গ্রিড
সামঞ্জস্যপূর্ণ বেষ্টনীসহ একটি মজবুত কাঠামো তৈরি শুরু করতে, আপনার লেআউটে মার্জিন এবং কলাম যোগ করুন।
মার্জিন স্ক্রিন এবং কন্টেন্টের বাম ও ডান প্রান্তে ফাঁকা স্থান তৈরি করে। ছোট আকারের জন্য একটি আদর্শ মার্জিন মান হলো ১৬ ডিপি, কিন্তু বড় স্ক্রিনের সাথে মানিয়ে নেওয়ার জন্য মার্জিন পরিবর্তিত হওয়া উচিত। আপনার অ্যাপের মূল কন্টেন্ট এবং অ্যাকশন অবশ্যই এই মার্জিনের মধ্যে থাকতে হবে এবং এর সাথে সামঞ্জস্যপূর্ণ হতে হবে।
এই ধাপে আপনি ইনসেট সেফ জোন বা ইনসেটও নিশ্চিত করতে পারেন। সিস্টেম বার ইনসেট গুরুত্বপূর্ণ অ্যাকশনগুলোকে সিস্টেম বারের নিচে চলে যাওয়া থেকে বিরত রাখে। আপনার কন্টেন্ট সিস্টেম বারের পেছনে আঁকা উচিত।
সামঞ্জস্যপূর্ণ অ্যালাইনমেন্টের জন্য একটি নমনীয় গ্রিড কাঠামো তৈরি করতে এবং বডি এরিয়ার ভেতরের কন্টেন্টকে ভাগ করে লেআউটে উল্লম্ব সংজ্ঞা দিতে কলাম ব্যবহার করুন। স্ক্রিনের যে অংশগুলোতে কলাম থাকে, সেখানে কন্টেন্ট রাখা হয়। এই কলামগুলো আপনার লেআউটে একটি কাঠামো প্রদান করে, যা বিভিন্ন এলিমেন্ট সাজানোর জন্য সুবিধাজনক বিন্যাস তৈরি করে।
বিষয়বস্তুর গুরুত্ব বা ক্রমবিন্যাস, লেআউট গ্রিডের ধরন নির্ধারণ করে তাতে আরও কাঠামো আনতে সাহায্য করতে পারে। যদি আপনার বিষয়বস্তুর একটি সুস্পষ্ট ক্রমবিন্যাস থাকে, তবে একটি ক্রমবিন্যাসভিত্তিক লেআউট গ্রিড উপযুক্ত; উদাহরণস্বরূপ, একটি বড় হেডার এবং মূল আর্টসহ সম্পাদকীয় লেআউট বা ডিটেইল স্ক্রিন।
একটি মডিউলার গ্রিড সমান গুরুত্বপূর্ণ কিন্তু অত্যন্ত সুসংগঠিত বিষয়বস্তু এবং বিন্যাসের জন্য ভালোভাবে কাজ করে, যেমন একটি ফটো গ্যালারি।
ধারাবাহিকভাবে রেসপন্সিভ ও একমুখী লেআউটের জন্য, অথবা যখন আপনার আরও বেশি নমনীয়তার প্রয়োজন হয়, তখন কলাম গ্রিড বেছে নিন।
প্রকার নির্বিশেষে, লেআউট গ্রিডটিকেও বিভিন্ন আকার এবং ফর্ম ফ্যাক্টরের সাথে খাপ খাইয়ে নিতে সক্ষম হওয়া উচিত।
এই উদাহরণটি নমনীয় আকার বজায় রেখে একটি অন্তর্নিহিত গ্রিডের সাথে বিষয়বস্তু সারিবদ্ধ করতে একটি কলাম গ্রিড ব্যবহার করে। বিভিন্ন ফর্ম ফ্যাক্টরের সাথে মানিয়ে নিতে, কলাম গ্রিডটি স্ক্রিনের আকারের উপর ভিত্তি করে কলামের আকার এবং কলামের সংখ্যা পরিবর্তন করে, যা বিষয়বস্তুকে স্কেল করতেও সাহায্য করে। লেআউট গ্রিডের ক্ষেত্রে অতিরিক্ত সূক্ষ্মতা পরিহার করুন। এর পরিবর্তে, সামঞ্জস্যপূর্ণ স্পেসিং ইউনিট প্রদানের জন্য বেসলাইন গ্রিড ব্যবহার করুন।
লেআউট কাঠামোতে লেখা যোগ করা শুরু হচ্ছে। মার্জিন স্ক্রিনের প্রান্ত থেকে বিষয়বস্তুকে রক্ষা করে। কলামগুলো একটি সামঞ্জস্যপূর্ণ ব্যবধান এবং বিন্যাস কাঠামো প্রদান করে।
বিকল্পভাবে, ডিটেইল স্ক্রিনটিকে সুশৃঙ্খল রাখতে একটি হায়ারারকিক্যাল লেআউট গ্রিড ব্যবহার করুন।
একটি সামঞ্জস্যপূর্ণ লেআউট গ্রিড দিয়ে শুরু করুন। যদি আপনার কন্টেন্টের প্রয়োজন হয়, তবে গ্রিডটি ভেঙে দিন। তারপরেও, আপনি হয়তো দেখবেন যে অন্য কোনো গ্রিডই আপনার কন্টেন্টের প্রয়োজনের সাথে বেশি মানানসই।
পেজার এবং ফ্লো লেআউটের মতো লেআউট কন্টেইনারগুলো সম্পর্কে আরও জানুন।
হস্তলিখিত ও গাঁথনি হলো বিন্যাস গ্রিডের অন্যান্য প্রকারভেদ।
আপনি যে লেআউট গ্রিডই বেছে নিন না কেন, সেটিও অ্যাডাপ্টিভ লেআউটের জন্য কন্টেন্টকে গ্রুপ করতে পেইন-এর ধারণ ধারণাটি ব্যবহার করতে পারে। উদাহরণস্বরূপ, এখানে ব্যবহৃত উদাহরণটি হলো একটি ডিটেইল স্ক্রিন, যা একটি পেইন এবং এটিকে একটি লিস্ট-ডিটেইল লেআউটে দেখানো যেতে পারে।
২. নিয়ন্ত্রণ ব্যবস্থা প্রয়োগ করুন
উপাদানগুলোকে দৃশ্যত একত্রিত করতে কন্টেইনমেন্ট ব্যবহার করুন।
কন্টেইনমেন্ট বলতে বোঝায় ফাঁকা স্থান এবং দৃশ্যমান উপাদানগুলোকে একসাথে ব্যবহার করে একটি দৃশ্যগত বিন্যাস তৈরি করা। কন্টেইনার হলো এমন একটি আকৃতি যা একটি আবদ্ধ এলাকাকে বোঝায়। একটি একক লেআউটে, আপনি একই ধরনের বিষয়বস্তু বা কার্যকারিতা সম্পন্ন উপাদানগুলোকে একসাথে গোষ্ঠীভুক্ত করতে পারেন এবং খোলা জায়গা, টাইপোগ্রাফি ও ডিভাইডার ব্যবহার করে সেগুলোকে অন্যান্য উপাদান থেকে আলাদা করতে পারেন।
অ্যান্ড্রয়েড সারি, কলাম এবং বক্সকে মূল উপাদান হিসেবে ব্যবহার করে, তাই আপনিও একইভাবে কোনো বিষয়বস্তুকে বিভিন্ন ভাগে ভাগ করার ডিজাইন করতে পারেন। বিষয়বস্তুর মধ্যে দিয়ে পথ খুঁজে পেতে সাহায্য করার জন্য, একই ধরনের আইটেমগুলোকে ফাঁকা জায়গা বা দৃশ্যমান বিভাজন দিয়ে একসাথে গ্রুপ করুন।
ইমপ্লিসিট কন্টেইনমেন্ট কন্টেইনারের সীমানা তৈরি করতে কন্টেন্টকে দৃশ্যত একত্রিত করার জন্য হোয়াইটস্পেস ব্যবহার করে, অন্যদিকে এক্সপ্লিসিট কন্টেইনমেন্ট কন্টেন্টকে একসাথে গ্রুপ করার জন্য ডিভাইডার লাইন এবং কার্ডের মতো অবজেক্ট ব্যবহার করে।
নিম্নলিখিত চিত্রে হেডার এবং মূল লেখাকে আবদ্ধ করতে ইমপ্লিসিট কন্টেইনমেন্ট ব্যবহারের একটি উদাহরণ দেখানো হয়েছে। কলাম গ্রিডটি অ্যালাইন করতে এবং গ্রুপ তৈরি করতে ব্যবহৃত হয়। হাইলাইটগুলো কার্ডের মধ্যে সুস্পষ্টভাবে আবদ্ধ থাকে। আরও ভালো ভিজ্যুয়াল পৃথকীকরণের জন্য আইকনোগ্রাফি এবং টাইপ হায়ারার্কি ব্যবহার করা হয়েছে।
৩. অবস্থানের বিষয়বস্তু
একটি লেআউট গ্রিড বেছে নেওয়া হলে এবং কন্টেন্ট কন্টেইনারে রাখা হলে, অ্যান্ড্রয়েডে বেসিক বিল্ডিং ব্লক ও মডিফায়ার অথবা গ্রিড ও ফ্লেক্সবক্সের মতো লেআউট কন্টেইনার ব্যবহার করে কন্টেন্ট এলিমেন্টগুলো পরিচালনা ও অবস্থান নির্ধারণ করার বিভিন্ন উপায় রয়েছে।
আপনার কন্টেন্ট এক-মাত্রিক নাকি দ্বি-মাত্রিক, তা বিবেচনা করুন। উদাহরণস্বরূপ, কন্টেন্ট অনুভূমিকভাবে, উল্লম্বভাবে বা উভয় দিকেই প্রবাহিত হতে পারে।
নিম্নলিখিত চিত্রে যেমন দেখানো হয়েছে, একটি প্রমাণীকরণ লেআউটে দ্বি-মাত্রিক গ্রিড লেআউট ব্যবহার করা যেতে পারে।
UI এলিমেন্টগুলোও এক দিকে নমনীয় ও সাবলীল হতে পারে, যেমন ফিল্টার বা কন্টেন্ট ট্যাগ। ফ্লেক্সবক্স সম্পর্কে আরও জানুন।
লেআউটে বিভিন্ন ধরনের লেআউটের সংমিশ্রণও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি ক্যারোসেল বা হরাইজন্টাল স্ক্রলের সাথে ভার্টিকাল কার্ড যুক্ত করতে পারেন। অথবা, আপনি ভার্টিকাল লিস্ট ডেটার সাথে একটি কাস্টম চার্ট উপস্থাপন করতে পারেন।
লেজি রো এবং লেজি কলাম ব্যবহার করে আপনি স্ক্রলিং সারি বা কলামে কন্টেন্ট উপস্থাপন করতে পারেন।
সারিবদ্ধকরণ
অটো লেআউট ফ্লো এবং অ্যালাইনমেন্টের মতোই, আপনি UI এলিমেন্টগুলোর বিন্যাস এবং অ্যালাইনমেন্ট নির্দিষ্ট করে দিতে পারেন।
কাস্টম অ্যালাইনমেন্ট লাইন তৈরি করতে AlignmentLine ব্যবহার করুন, যা প্যারেন্ট লেআউটগুলো তাদের চাইল্ড লেআউটগুলোকে অ্যালাইন ও পজিশন করতে কাজে লাগাতে পারে।
করুন
না
৪. পরিমাণ ও ফসলের উপাদান
পরিবর্তনশীল কন্টেন্ট, ডিভাইসের ওরিয়েন্টেশন এবং স্ক্রিনের আকারের সাথে সামঞ্জস্য রাখার জন্য স্কেলিং অত্যন্ত গুরুত্বপূর্ণ। এলিমেন্টগুলো স্থির থাকতে পারে অথবা সেগুলোকে স্কেল করা যেতে পারে।
যেকোনো ডিভাইসে ছবিগুলো যাতে সঠিকভাবে প্রদর্শিত হয়, তা নিশ্চিত করতে কন্টেইনারের মধ্যে সেগুলোর আকার ও অবস্থান নির্দিষ্ট করুন। অন্যথায়, ছবির মূল আকর্ষণ কেটে যেতে পারে, অথবা ছবিটি লেআউটের জন্য খুব ছোট বা খুব বড় হয়ে যেতে পারে।
যথাযথ স্কেলিং এবং ক্রপিংয়ের মাধ্যমে বিভিন্ন ডিভাইসের অ্যাস্পেক্ট রেশিও এবং ওরিয়েন্টেশনের সাথে সামঞ্জস্য রাখুন। যেহেতু অ্যাস্পেক্ট রেশিও উল্লেখযোগ্যভাবে ভিন্ন হতে পারে, তাই আপনার কন্টেন্ট এই পরিস্থিতিগুলো কীভাবে সামলাবে তা নির্দিষ্ট করে দিন।
উদাহরণস্বরূপ, ল্যান্ডস্কেপ মোডে থাকা একটি ফোনে একটি ফুল-উইডথ হিরো ইমেজ পুরো স্ক্রিন জুড়ে থাকে।
করুন
না
যদি কন্টেন্টকে অ্যাস্পেক্ট রেশিও বজায় রাখতেই হয়, যেমন শুধু উল্লম্ব ভিডিওর ক্ষেত্রে, অ্যাস্পেক্ট সীমাবদ্ধ করুন এবং খালি জায়গার ভারসাম্য বজায় রাখুন।
না
পিন করা বিষয়বস্তু
অ্যাপ বারের মতো অনেক কম্পোনেন্টে স্লট বা স্ক্যাফোল্ডের মাধ্যমে বিল্ট-ইন ইন্টারঅ্যাকশন, স্ক্রলিং এবং পজিশনিংয়ের ব্যবস্থা থাকে। কিছু এলিমেন্টকে স্ক্রলিংয়ের সাথে প্রতিক্রিয়া না করে স্থির থাকার জন্য পরিবর্তন করা যেতে পারে, যেমন ফ্লোটিং অ্যাকশন বাটন (FAB), যেগুলোতে গুরুত্বপূর্ণ অ্যাকশন থাকে। নির্দিষ্ট কিছু ক্ষেত্রে আরও ভালো ফোকাসের জন্য এলিমেন্ট পিন করুন, যেমন, হিডেন ইনপুট প্রতিরোধ করতে একটি টেক্সট ইনপুটকে কিবোর্ডে পিন করুন।
মেসেজিং এবং অথেনটিকেশনের মতো টেক্সট ইনপুটের ক্ষেত্রে, ইনপুটটি কিবোর্ডের সাথে সংযুক্ত থাকে এবং সেটির ওপরই একক মনোযোগ দেওয়া হয়।
লেআউটের উপাদানসমূহ
মেটেরিয়াল ৩-এর উপাদানগুলো মিথস্ক্রিয়া এবং বিষয়বস্তুর জন্য নিজস্ব কনফিগারেশন ও অবস্থা প্রদান করে।
কম্পোজ, ম্যাটেরিয়াল কম্পোনেন্টগুলোকে একত্রিত করে সাধারণ স্ক্রিন প্যাটার্ন তৈরির জন্য সুবিধাজনক লেআউট প্রদান করে। স্ক্যাফোল্ডের মতো কম্পোজেবলগুলো বিভিন্ন কম্পোনেন্ট এবং অন্যান্য স্ক্রিন এলিমেন্টের জন্য স্লট সরবরাহ করে। ম্যাটেরিয়াল কম্পোনেন্ট এবং লেআউট সম্পর্কে আরও পড়ুন।