অ্যান্ড্রয়েড আপনাকে এমন একটি অ্যাপ তৈরি করতে সাহায্য করে যা বিভিন্ন ধরণের ডিভাইসের স্ক্রিন সাইজ এবং ফর্ম ফ্যাক্টরের উপর ভালোভাবে চলে। এই বিস্তৃত সামঞ্জস্যতা আপনাকে এমন একটি অ্যাপ ডিজাইন করতে সাহায্য করে যা আপনি আপনার সমস্ত লক্ষ্যযুক্ত ডিভাইসে ব্যাপকভাবে বিতরণ করতে পারেন।
তবে, প্রতিটি স্ক্রিন কনফিগারেশনে আপনার ব্যবহারকারীদের সর্বোত্তম অভিজ্ঞতা প্রদানের জন্য, আপনাকে বিভিন্ন আকারের জন্য আপনার লেআউট এবং অন্যান্য UI উপাদানগুলি অপ্টিমাইজ করতে হবে। ChromeOS-এ, আপনার UI অপ্টিমাইজ করার মাধ্যমে আপনি অতিরিক্ত স্ক্রিন স্পেসের পূর্ণ সুবিধা নিতে পারবেন নতুন বৈশিষ্ট্য অফার করতে, নতুন কন্টেন্ট উপস্থাপন করতে, অথবা ব্যবহারকারীর ব্যস্ততা বৃদ্ধি করতে অভিজ্ঞতা উন্নত করতে।
বড় পর্দার জন্য লেআউট
যদি আপনি হ্যান্ডসেটের জন্য আপনার অ্যাপটি তৈরি করে থাকেন এবং ChromeOS এবং অন্যান্য বড়-স্ক্রিন ফর্ম ফ্যাক্টরগুলিতে আপনার নকশা উন্নত করতে চান, তাহলে আপনার লেআউট, ফন্ট এবং স্পেসিংয়ে ছোটখাটো সমন্বয় করে শুরু করুন। ৭-ইঞ্চি ট্যাবলেট বা বড় ক্যানভাস সহ একটি গেমের জন্য, এই সমন্বয়গুলিই আপনার প্রয়োজন হতে পারে।
বৃহত্তর ডিসপ্লের জন্য, আপনি আপনার UI এর কিছু অংশ পুনরায় ডিজাইন করতে পারেন যাতে একটি "প্রসারিত" UI কে একটি দক্ষ মাল্টি-পেন UI, সহজ নেভিগেশন এবং অতিরিক্ত কন্টেন্ট দিয়ে প্রতিস্থাপন করা যায়। মেটেরিয়াল ডিজাইন টিমের ম্যাটেরিয়াল স্টাডিজ এটি কেমন হতে পারে তার উদাহরণ প্রদান করে। উদাহরণস্বরূপ, দেখুন কিভাবে Reply বিভিন্ন স্ক্রিন আকারের সাথে খাপ খায়।

এখানে কিছু পরামর্শ দেওয়া হল:
- এই বৃহত্তর স্ক্রিনগুলির জন্য কাস্টম লেআউট প্রদান করুন। আপনি স্ক্রিনের সবচেয়ে ছোট মাত্রা বা সর্বনিম্ন উপলব্ধ প্রস্থ এবং উচ্চতা ব্যবহার করে এটি করতে পারেন।
- কল্পনা করুন ChromeOS-এর মতো ল্যান্ডস্কেপ-প্রথম পরিবেশে আপনার UX এবং লেআউটগুলি কীভাবে কাজ করে। উইন্ডোর আকারের উপর ভিত্তি করে এই ওরিয়েন্টেশনগুলিতে আপনার লেআউটগুলিকে দেখতে এবং ভালভাবে সম্পাদন করার জন্য মানিয়ে নিন, অথবা ল্যান্ড রিসোর্স কোয়ালিফায়ার ব্যবহার করে নির্দিষ্ট ল্যান্ডস্কেপ লেআউট সরবরাহ করুন। আপনি উইন্ডো ম্যানেজমেন্ট পৃষ্ঠায় বড় স্ক্রিনের জন্য ডায়নামিক উইন্ডো রিসাইজিং এবং অন্যান্য বিবেচনা সম্পর্কে আরও জানতে পারেন।
- যখন আপনার অ্যাপটি প্রশস্ত করার জন্য প্রসারিত করা হয় তখন নীচের নেভিগেশন বারগুলি ভালভাবে স্কেল করে না। আপনার নেভিগেশনটি বাম দিকের মেনুতে স্থানান্তর করার কথা বিবেচনা করুন যেখানে এটি আরও অ্যাক্সেসযোগ্য এবং আরও বিকল্প দেখাতে পারে। উত্তরের উদাহরণটি এটি ভালভাবে ব্যাখ্যা করে।
- ন্যূনতম, বড় স্ক্রিনের জন্য ফন্টের আকার, মার্জিন এবং ব্যবধানের মতো মাত্রা কাস্টমাইজ করুন যাতে স্থানের ব্যবহার এবং কন্টেন্টের সুস্পষ্টতা উন্নত হয়। ব্যবহারকারীরা যখন ডিভাইস থেকে একটু দূরে থাকে, যেমন ChromeOS ডিভাইস বা অন্যান্য ডেস্কটপ পরিবেশ, তখন জিনিসগুলি কেমন দেখাতে পারে তা বিবেচনা করুন।
- UI কন্ট্রোলগুলির অবস্থান এমনভাবে সামঞ্জস্য করুন যাতে ব্যবহারকারীরা মাউস ব্যবহার করার সময় বা ট্যাবলেট ধরার সময়, যেমন পাশে এবং কেন্দ্র থেকে দূরে, সেগুলি অ্যাক্সেসযোগ্য হয়।
- ChromeOS এবং অন্যান্য বড় স্ক্রিনের ডিভাইসে UI এলিমেন্টের প্যাডিং সাধারণত হ্যান্ডসেটের তুলনায় বড় হওয়া উচিত। বিভিন্ন স্ক্রিন সাইজ ব্যবহার করার সাথে সাথে আপনার মার্জিন এবং গটারগুলিও মানিয়ে নেওয়া উচিত।
- টেক্সট কন্টেন্ট পর্যাপ্ত পরিমাণে প্যাড করুন যাতে এটি স্ক্রিনের প্রান্ত বরাবর সরাসরি সারিবদ্ধ না হয়। স্ক্রিনের প্রান্তের কাছাকাছি কন্টেন্টের চারপাশে কমপক্ষে ১৬dp প্যাডিং ব্যবহার করুন।
বিশেষ করে, নিশ্চিত করুন যে আপনার লেআউটগুলি স্ক্রিন জুড়ে "প্রসারিত" দেখাচ্ছে না:
- লেখার লাইনগুলি অত্যধিক দীর্ঘ হওয়া উচিত নয়—প্রতি লাইনে সর্বাধিক ১০০টি অক্ষর অপ্টিমাইজ করুন, যার ফলে ৫০ থেকে ৭৫টির মধ্যে সেরা ফলাফল পাওয়া যাবে।
- তালিকা এবং মেনুতে পূর্ণ স্ক্রিন প্রস্থ ব্যবহার করা উচিত নয়।
- অনস্ক্রিন এলিমেন্টের প্রস্থ পরিচালনা করতে প্যাডিং ব্যবহার করুন অথবা বড় স্ক্রিন ডিভাইসের জন্য মাল্টি-পেন UI তে স্যুইচ করুন (পরবর্তী বিভাগটি দেখুন)।
অতিরিক্ত স্ক্রিন এরিয়ার সুবিধা নিন
ChromeOS ডিভাইসগুলি আপনার অ্যাপে উল্লেখযোগ্যভাবে বেশি স্ক্রিন রিয়েল এস্টেট প্রদান করে। বড় স্ক্রিনের জন্য আপনার অ্যাপের UI ডিজাইন করার সময়, অতিরিক্ত জায়গার পূর্ণ সুবিধা নিন।
রিপ্লাই এবং র্যালি উদাহরণগুলিতে, অ্যাপগুলি বর্ধিত স্ক্রিন সাইজ ব্যবহার করার জন্য বিভিন্ন পদ্ধতি গ্রহণ করে। রিপ্লাই আরও পরিষ্কার চেহারার জন্য জায়গা যোগ করে, অন্যদিকে র্যালি স্ক্রলিং এবং ট্যাপ কমাতে আরও ডেটা প্রদর্শন করে।

শুরু করার জন্য একটি ভালো জায়গা হল ব্যবহারকারীর কাছ থেকে লুকানো জিনিসগুলি দেখা এবং কীভাবে আপনি সেগুলি দৃশ্যমান করতে পারেন তা দেখা। এর মধ্যে থাকতে পারে কোনও আইটেম সম্পর্কে আরও তথ্য দেখানো, ডান-ক্লিক বা দীর্ঘক্ষণ প্রেসের পিছনে লুকানো মেনুগুলিকে দৃশ্যমান করা, অথবা এখন আপনার বাম-পাশের নেভিগেশন এলাকাটি বৃহত্তর হওয়ার সাথে সাথে বিভিন্ন বা গভীর নেভিগেশন বিকল্পগুলি দেখানো। এগুলি হল বড় ব্যবহারযোগ্যতা যা আপনার UX উন্নত করতে পারে এবং বর্তমান অভিজ্ঞতার সম্পূর্ণ পুনর্নবীকরণ ছাড়াই আপনার অ্যাপটিকে আরও ডেস্কটপের মতো অনুভূতি দিতে পারে।
আপনার অ্যাপের জন্য এখানে কিছু সুপারিশ দেওয়া হল:
- এই বিভিন্ন স্ক্রিন সাইজ সম্পর্কে চিন্তা করার সময় আপনার ব্র্যান্ড আপনার দিকনির্দেশনা নির্ধারণ করে। ব্যবহারকারীকে কী অগ্রাধিকার দেবেন এবং কী দেখাবেন তা নির্ধারণ করা নির্ভর করে বিদ্যমান ব্যবহারকারীর ভ্রমণের ধরণ এবং সর্বাধিক ব্যবহৃত বৈশিষ্ট্যগুলির উপর। অনুপ্রেরণার জন্য, ম্যাটেরিয়াল স্টাডিজ দেখুন এবং দেখুন কিভাবে প্রতিটি পণ্য একটি বৃহত্তর স্ক্রিনে ভিন্নভাবে প্রতিক্রিয়া দেখায়।
- একটি রেসপন্সিভ গ্রিড সিস্টেম ব্যবহার করে আপনার অ্যাপের ডিজাইন কেমন আচরণ করবে এবং বড় স্ক্রিনের রিয়েল-এস্টেট পাওয়ার সাথে সাথে কন্টেন্ট, নেভিগেশন এবং বিকল্পগুলি কীভাবে স্থানান্তরিত হবে তা ভেবে দেখুন।
- কোন স্ক্রিন সাইজের জন্য আপনি আলাদা লেআউট ব্যবহার করবেন তা ঠিক করুন, তারপর উপযুক্ত উইন্ডো সাইজ বাকেট (যেমন large/xlarge) অথবা ন্যূনতম উইন্ডো প্রস্থ (যেমন sw600dp/sw720) এ বিভিন্ন লেআউট প্রদান করুন। মনে রাখবেন যে এই লেআউটগুলিতে পৌঁছানোর সাথে সাথে, ব্যবহারকারী যে সামগ্রিক প্রেক্ষাপটে ছিলেন তা পরিবর্তন হওয়া উচিত নয় এবং লেআউটগুলির মধ্যে স্থানান্তর করার সময় (স্ক্রোলের অবস্থান, লেখা হচ্ছে, ইত্যাদি) সমস্ত ব্যবহারকারীর অবস্থা ধরে রাখার চেষ্টা করা উচিত।
উচ্চ ঘনত্ব এবং বৃহত্তর স্ক্রিনের জন্য ডিজাইন করা সম্পদ ব্যবহার করুন
আপনার অ্যাপটিকে সর্বোত্তমভাবে দেখানোর জন্য, ChromeOS দ্বারা সাধারণত সমর্থিত পরিসরের প্রতিটি ঘনত্বের জন্য আইকন এবং অন্যান্য বিটম্যাপ সম্পদ সরবরাহ করুন। বিশেষ করে, আপনার অ্যাপ বার, বিজ্ঞপ্তি এবং লঞ্চারের জন্য আইকনগুলি আইকনোগ্রাফি নির্দেশিকা অনুসারে ডিজাইন করা উচিত এবং সেগুলি ভেক্টর ফর্ম্যাটে সরবরাহ করা উচিত যাতে আপনার অ্যাপটি যে বিভিন্ন স্ক্রিনে পাবেন তার সাথে সুন্দরভাবে স্কেল করা যায়।
অ্যান্ড্রয়েডে ভেক্টরড্রয়েবল এবং ভেক্টর অ্যাসেট সম্পর্কে আরও তথ্যের জন্য, নিক বুচারের এই ব্লগ পোস্টটি দেখুন।
ফন্টের আকার এবং স্পর্শ লক্ষ্যগুলি সামঞ্জস্য করুন
ChromeOS এবং উচ্চ ঘনত্বের স্ক্রিনে আপনার অ্যাপটি ব্যবহারযোগ্য করে তুলতে, আপনার লক্ষ্য করা সমস্ত স্ক্রিন কনফিগারেশনের জন্য আপনার UI তে ফন্টের আকার এবং টাচ টার্গেটগুলি সামঞ্জস্য করুন। আপনি স্টাইলেবল অ্যাট্রিবিউট বা ডাইমেনশন রিসোর্সের মাধ্যমে ফন্টের আকার সামঞ্জস্য করতে পারেন, এবং আপনি লেআউট এবং বিটম্যাপ ড্রয়েবলের মাধ্যমে টাচ টার্গেটগুলি সামঞ্জস্য করতে পারেন, যেমনটি আগে আলোচনা করা হয়েছিল।
এখানে কিছু বিবেচনা দেওয়া হল:
- বড় স্ক্রিনের আকার এবং ঘনত্বের ক্ষেত্রে টেক্সট খুব বেশি বড় বা ছোট হওয়া উচিত নয়। নিশ্চিত করুন যে লেবেলগুলি তাদের UI উপাদানগুলির সাথে সামঞ্জস্যপূর্ণ আকারের হয় এবং লেবেল, শিরোনাম এবং অন্যান্য উপাদানগুলিতে কোনও অনুপযুক্ত লাইন ব্রেক না থাকে।
- অনস্ক্রিন এলিমেন্টের জন্য প্রস্তাবিত টাচ-টার্গেট সাইজ হল 48dp—আপনার বৃহত্তর স্ক্রিন UI-তে কিছু সমন্বয় প্রয়োজন হতে পারে। স্ক্রিনের আকার পরিবর্তনের সাথে সাথে টাচ টার্গেট এবং আইটেমগুলির মধ্যে ব্যবধান সম্পর্কে জানতে স্পেসিং পদ্ধতি সম্পর্কে আরও পড়ুন। এই সুপারিশগুলি ন্যূনতম অ্যাক্সেসিবিলিটি নির্দেশিকাও পূরণ করে।
- যখন সম্ভব হবে, ছোট আইকনের জন্য,
TouchDelegateব্যবহার করে অথবা স্বচ্ছ বোতামের মধ্যে আইকনটিকে কেন্দ্র করে স্পর্শযোগ্য এলাকাটি 48dp-এর বেশি প্রসারিত করুন।