টিয়ার ২ — অ্যাডাপ্টিভ অপ্টিমাইজ করা

অপ্টিমাইজ করা অ্যাপ সব ধরনের স্ক্রিন ও ডিভাইসের স্ট্যাটাস সম্পূর্ণভাবে সাপোর্ট করে, যার মধ্যে স্ট্যাটাস ট্রানজিশনও অন্তর্ভুক্ত।

তিনটি কোয়ালিটি টিয়ারকে উল্লম্বভাবে স্ট্যাক করা লেয়ার হিসেবে দেখানো হয়েছে, যার মধ্যে মাঝের টিয়ারটি হাইলাইট করা আছে।

নির্দেশিকা

সব ডিসপ্লে সাইজ ও ডিভাইসের স্ট্যাটাসের সাথে মানানসই করে আপনার অ্যাপ তৈরি করুন।

ইউজার ইন্টারফেস

নির্দেশিকা আইডি টেস্ট আইডি বর্ণনা
Responsive_adaptive_layouts T-Layout_Flow

অ্যাপে রেসপন্সিভ ও অ্যাডাপ্টিভ লেআউট আছে যা সব স্ক্রিন সাইজের জন্য ডিজাইন করা হয়েছে। সব লেআউট রেসপন্সিভ (আপনার UI রেসপন্সিভ লেআউটে মাইগ্রেট করুন দেখুন)। উইন্ডো সাইজ ক্লাস-এর মাধ্যমে অ্যাডাপ্টিভ লেআউট প্রয়োগ করা হয়।

অ্যাপ UI-তে নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত থাকতে পারে:

  • লিডিং-এজ নেভিগেশন রেল যা বড় উইন্ডো সাইজে সম্পূর্ণ নেভিগেশন প্যানেলে প্রসারিত হয়
  • উইন্ডোর সাইজ পরিবর্তন করার জন্য কলামের সংখ্যা স্কেল করে এমন গ্রিড লেআউট
  • বড় স্ক্রিনে টেক্সটের কলাম
  • ট্রেলিং-এজ প্যানেল যা ডেস্কটপ স্ক্রিনের সাইজে ডিফল্ট হিসেবে খোলা থাকে; ছোট স্ক্রিনে বন্ধ থাকে

বড় স্ক্রিনের স্পেসের সুবিধা নিতে মাল্টি-পেন লেআউট (যেখানে উপযুক্ত) তৈরি করুন। ক্যানোনিকাল লেআউট দেখুন।

Jetpack Compose অ্যাপের জন্য, মাল্টি-পেন UI তৈরি করতে অ্যাডাপ্টিভ লেআউট (যেমন ListDetailPaneScaffold) ব্যবহার করুন। পুরনো অ্যাক্টিভিটি-ভিত্তিক অ্যাপের জন্য, অ্যাক্টিভিটি এম্বেড করা ফিচার পাশাপাশি অ্যাক্টিভিটি দেখানোর মাধ্যমে মাল্টি-পেন লেআউট চালু করে।
UI_Secondary_Elements T-Layout_Flow

মডেল, প্রাসঙ্গিক মেনু এবং অন্যান্য সেকেন্ডারি এলিমেন্ট সব ধরনের স্ক্রিন ও ডিভাইসের অবস্থায় সঠিকভাবে ফর্ম্যাট করা হয়েছে, যেমন:

  • বড় স্ক্রিনে স্ক্রিনের নিচে অ্যাটাচ করা শিট সম্পূর্ণ প্রস্থ জুড়ে থাকে না। (স্ট্রেচিং এড়াতে সর্বাধিক প্রস্থ প্রয়োগ করুন।) স্ক্রিনের নিচে অ্যাটাচ করা শিট-এ রেসপন্সিভ লেআউট দেখুন।
  • বড় স্ক্রিনে বোতামগুলি সম্পূর্ণ প্রস্থের নয়। বোতাম-এ অ্যাডাপ্টিভ ডিজাইন দেখুন।
  • বড় স্ক্রিনে টেক্সট ফিল্ড এবং বক্স সম্পূর্ণ প্রস্থে প্রসারিত হয় না। টেক্সট ফিল্ডে অ্যাডাপ্টিভ ডিজাইন দেখুন।
  • ছোট এডিট মেনু বা মডেল পুরো স্ক্রিন কভার করে না এবং ব্যবহারকারীর জন্য যতটা সম্ভব প্রসঙ্গ বজায় রাখে। মেনু দেখুন।
  • ব্যবহারকারীর বেছে নেওয়া আইটেমের পাশে প্রাসঙ্গিক মেনু দেখানো হয়। মেনু-তে "কন্টেক্সট মেনু" সংক্রান্ত বিষয় দেখুন।
  • বড় স্ক্রিনে আরও ভালো এরগোনমিক্সের জন্য নেভিগেশন বারকে নেভিগেশন রেল দিয়ে পরিবর্তন করা হয়। নেভিগেশন রেল দেখুন।
  • নেভিগেশন ড্রয়ার আপডেট করে বড় করা নেভিগেশন রেল করা হয়েছে। নেভিগেশন ড্রয়ার দেখুন।
  • ডায়ালগ বক্স লেটেস্ট মেটেরিয়াল কম্পোনেন্টে আপডেট করা হয়েছে। ডায়ালগ দেখুন।
  • ছবিগুলি সঠিক রেজোলিউশনে দেখানো হয় এবং সেগুলি স্ট্রেচ বা ক্রপ করা হয় না।
Touch_Targets T-Touch_Targets টাচ টার্গেট কমপক্ষে 48dp হতে হবে। মেটেরিয়াল ডিজাইনের টার্গেট সাইজ সংক্রান্ত নির্দেশিকা দেখুন।
Drawable_Focus T-Drawable_Focus ইন্টার‍্যাক্টিভ কাস্টম ড্রয়েবলের জন্য ফোকাসড স্টেট তৈরি করা হয়। কাস্টম ড্রয়েবল হল এমন যেকোনও ভিজ্যুয়াল UI এলিমেন্ট যা Android ফ্রেমওয়ার্কের মাধ্যমে প্রদান করা হয় না। ব্যবহারকারীরা যদি কাস্টম ড্রয়েবলের সাথে ইন্টার‍্যাক্ট করতে পারেন, তাহলে ডিভাইসটি টাচ মোডে না থাকলে ড্রয়েবলটি অবশ্যই ফোকাসযোগ্য হতে হবে এবং ফোকাসড স্টেটের একটি ভিজ্যুয়াল ইঙ্গিত স্পষ্ট হতে হবে।

কীবোর্ড, মাউস ও ট্র্যাকপ্যাড

নির্দেশিকা আইডি টেস্ট আইডি বর্ণনা
Keyboard_Navigation T-Keyboard_Navigation অ্যাপের প্রধান টাস্ক ফ্লো কীবোর্ড নেভিগেশন সাপোর্ট করে, যার মধ্যে ট্যাব ও তীরচিহ্ন কী নেভিগেশন অন্তর্ভুক্ত। আরও অ্যাক্সেসযোগ্য অ্যাপ তৈরি করুন দেখুন।
কীবোর্ড_শর্টকাট T-Keyboard_Shortcuts অ্যাপে সাধারণত ব্যবহৃত অ্যাকশনের জন্য কীবোর্ড শর্টকাট কাজ করে, যেমন বেছে নেওয়া, কাট, কপি, পেস্ট, আগের অবস্থায় ফেরানো এবং আবার করা। কীবোর্ড, মাউস ও ট্র্যাকপ্যাড দেখুন।
Keyboard_Media_Playback T-Keyboard_Media_Playback মিডিয়া প্লেব্যাক কন্ট্রোল করতে কীবোর্ড ব্যবহার করা যেতে পারে; যেমন, Spacebar মিডিয়া চালায় ও পজ করে।
Keyboard_Send T-Keyboard_Send কীবোর্ডের Enter কী, যোগাযোগের অ্যাপে পাঠান ফাংশন হিসেবে কাজ করে।
Keyboard_Exit T-Keyboard_Exit কীবোর্ডের Esc কী বেরিয়ে আসা সংক্রান্ত ফাংশন পারফর্ম করে যা কোনও অ্যাকশন বন্ধ করে বা আগের অবস্থায় ফিরিয়ে আনে, যেমন:
  • মডেল, ডায়ালগ, পপ-আপ ও মেনু বন্ধ করে
  • সার্চ টেক্সট মুছে দেয় বা সার্চ ফোকাস সরিয়ে দেয়
  • কীবোর্ড ফোকাস বাতিল করে
  • ফুল-স্ক্রিন ভিডিও, PiP, ফুল-স্ক্রিন মোড বা স্লাইডশো থেকে বেরিয়ে আসে
  • প্রগ্রেস বার বা মেনুর মতো অন-স্ক্রিন কন্ট্রোল বাতিল করে দেয়
  • 'এর পরে' / অটোপ্লে টাইমার বাতিল করে
  • বেছে নেওয়া সব আইটেম থেকে টিকচিহ্ন সরিয়ে দেয়
  • সেভ না করেই নাম পরিবর্তন/এডিটিং বাতিল করে দেয়
  • ক্রপিং/ট্রান্সফর্ম টুল থেকে বেরিয়ে আসে এবং পরিবর্তন বাতিল করে
Context_Menus T-Context_Menus সাধারণ মাউস ও ট্র্যাকপ্যাডের ডানদিকের বোতামে ক্লিক (সেকেন্ডারি মাউস বোতাম বা সেকেন্ডারি ট্যাপ) করার মাধ্যমে সংশ্লিষ্ট মেনু অ্যাক্সেস করা যায়।
Content_Zoom T-Content_Zoom মাউসের স্ক্রল করার হুইল (Control বা Ctrl কী প্রেস করার সাথে) এবং ট্র্যাকপ্যাড পিঞ্চ জেসচার ব্যবহার করে অ্যাপের কন্টেন্ট জুম করা যেতে পারে।
Hover_States T-Hover_States অ্যাকশনেবল UI এলিমেন্টে হোভার স্টেট (যেখানে উপযুক্ত) থাকে যা মাউস এবং ট্র্যাকপ্যাড ব্যবহারকারীদের দেখায় যে এলিমেন্টগুলি ইন্টার‍্যাক্টিভ।

পরীক্ষা

আপনার অ্যাপ অপ্টিমাইজ করা হয়েছে এবং সব ডিসপ্লে কনফিগারেশনে কাজ করছে কিনা তা নিশ্চিত করতে, নিম্নলিখিত পরীক্ষাগুলি করুন।

ইউজার ইন্টারফেস

টেস্ট আইডি নির্দেশিকা আইডি বর্ণনা
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

ফোন, ফোল্ডেবেল ফোন, ছোট ও বড় ট্যাবলেট এবং ডেস্কটপ ডিভাইস সহ বিভিন্ন স্ক্রিন সাইজের ডিভাইসে অ্যাপটি চালান। ডিভাইসে মাল্টি-উইন্ডো মোডে অ্যাপটি চালান।

অ্যাপ লেআউট বিভিন্ন স্ক্রিন ও উইন্ডো সাইজে রেসপন্ড ও অ্যাডাপ্ট করে কিনা তা যাচাই করুন। অ্যাপটি নেভিগেশন রেল প্রসারিত ও সংকুচিত করে কিনা, গ্রিড লেআউটে কলামের সংখ্যা স্কেল করে কিনা, কলামে টেক্সট ফ্লো করে কিনা এবং আরও অনেক কিছু চেক করুন। UI এলিমেন্টগুলি নান্দনিকতা এবং কার্যকারিতা উভয়ের জন্য ফর্ম্যাট করা হয়েছে কিনা তা লক্ষ্য করুন।

অ্যাক্টিভিটি এম্বেডিং ব্যবহার করা লিগ্যাসি অ্যাপের ক্ষেত্রে, অ্যাক্টিভিটি বড় স্ক্রিনে পাশাপাশি এবং ছোট স্ক্রিনে স্ট্যাক করা অবস্থায় দেখানো হচ্ছে কিনা তা পরীক্ষা করুন।
T-Touch_Targets Touch_Targets সব ডিসপ্লে সাইজ ও কনফিগারেশনের জন্য টাচ টার্গেট যাতে সামঞ্জস্যপূর্ণ, অ্যাক্সেসযোগ্য সাইজ ও পজিশন বজায় রাখে এবং অন্যান্য UI এলিমেন্টের মাধ্যমে লুকানো বা অস্পষ্ট না থাকে তা যাচাই করুন। অ্যাক্সেসিবিলিটি সম্পর্কে তথ্যের জন্য, অ্যাক্সেসিবিলিটি স্ক্যানার দেখুন।
T-Drawable_Focus Drawable_Focus ইন্টার‍্যাক্টিভ কাস্টম ড্রয়েবল আছে এমন প্রতিটি অ্যাপ স্ক্রিনে, এক্সটার্নাল কীবোর্ড, ডি-প্যাড বা UI এলিমেন্ট ফোকাস করতে দেয় এমন অন্য ডিভাইস ব্যবহার করে ড্রয়েবল ফোকাস করা যাচ্ছে কিনা তা যাচাই করুন। ফোকাসড মোডের ভিজ্যুয়াল ইন্ডিকেশন স্পষ্ট কিনা তা যাচাই করুন। এই সম্পর্কিত তথ্যের জন্য, Compose ফোকাস ডকুমেন্টেশন দেখুন।

কীবোর্ড, মাউস ও ট্র্যাকপ্যাড

টেস্ট আইডি নির্দেশিকা আইডি বর্ণনা
T-Keyboard_Navigation Keyboard_Navigation এক্সটার্নাল কীবোর্ডের ট্যাব ও তীরচিহ্ন ব্যবহার করে অ্যাপের ফোকাস করা যায় এমন কম্পোনেন্ট নেভিগেট করুন।
T-Keyboard_Shortcuts Keyboard_Shortcuts বেছে নেওয়া, কাট, কপি, পেস্ট, আগের অবস্থায় ফেরানো এবং আবার করার মতো অ্যাকশন পারফর্ম করতে এক্সটার্নাল কীবোর্ডে কীবোর্ড শর্টকাট ব্যবহার করুন।
T-Keyboard_Media_Playback Keyboard_Media_Playback মিডিয়া প্লেব্যাক শুরু, বন্ধ, পজ, রিওয়াইন্ড ও ফাস্ট ফরওয়ার্ড করতে এক্সটার্নাল কীবোর্ড ব্যবহার করুন।
T-Keyboard_Send Keyboard_Send ডেটা পাঠাতে বা জমা দিতে এক্সটার্নাল কীবোর্ডের Enter কী ব্যবহার করুন।
T-Keyboard_Exit Keyboard_Exit

বেরিয়ে আসার ফাংশন পারফর্ম করতে এক্সটার্নাল কীবোর্ডের Esc কী ব্যবহার করুন। 'কী' নিম্নলিখিত কাজগুলি করে কিনা তা যাচাই করুন (যেখানে প্রযোজ্য):

  • মডেল, ডায়ালগ, পপ-আপ ও মেনু বন্ধ করে
  • সার্চ টেক্সট মুছে দেয় বা সার্চ ফোকাস সরিয়ে দেয়
  • কীবোর্ড ফোকাস বাতিল করে
  • ফুল-স্ক্রিন ভিডিও, PiP, ফুল-স্ক্রিন মোড বা স্লাইডশো থেকে বেরিয়ে আসে
  • অন-স্ক্রিন কন্ট্রোল বাতিল করে
  • 'এর পরে' / অটোপ্লে টাইমার বাতিল করে
  • বেছে নেওয়া সব আইটেম থেকে টিকচিহ্ন সরিয়ে দেয়
  • সেভ না করেই নাম পরিবর্তন/এডিটিং বাতিল করে দেয়
  • ক্রপিং/ট্রান্সফর্ম টুল থেকে বেরিয়ে আসে এবং পরিবর্তন বাতিল করে
T-Context_Menus Context_Menus ইন্টার‍্যাক্টিভ এলিমেন্টের প্রাসঙ্গিক মেনু অ্যাক্সেস করতে, মাউসের সেকেন্ডারি বোতাম বা ট্র্যাকপ্যাডের সেকেন্ডারি ট্যাপ করার ক্ষমতা ব্যবহার করুন।
T-Content_Zoom Content_Zoom কন্টেন্ট জুম-ইন ও জুম-আউট করতে মাউসের স্ক্রল হুইল (Control বা Ctrl কী-এর সাথে) এবং ট্র্যাকপ্যাডে পিঞ্চ জেসচার ব্যবহার করুন।
T-Hover_States Hover_States এলিমেন্টের হোভার স্টেট অ্যাক্টিভেট করতে, অ্যাকশনেবল UI এলিমেন্টের উপর মাউস বা ট্র্যাকপ্যাড কার্সর হোভার করুন।