অ্যান্ড্রয়েড সিস্টেম বার

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

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

চিত্র 1: সিস্টেম বারের পিছনে ছবি

Takeaways

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

  • করুন: সিস্টেম বারগুলিকে স্বচ্ছ করে তুলুন এবং আপনার অ্যাপকে পূর্ণ স্ক্রিনে রাখুন, বারের নীচে UI-কে পূর্ণ এজ-টু-এজ অভিজ্ঞতা দিতে চালিয়ে যান।

  • আপনি যদি উভয় বারকে স্বচ্ছ হতে সেট করতে না পারেন, তাহলে নিশ্চিত করুন যে বারের রং আপনার অ্যাপের বডির রঙের সাথে মেলে। উদাহরণস্বরূপ, নীচের নেভিগেশন বারের রঙকে অঙ্গভঙ্গি বারের রঙের সাথে এবং উপরের স্ট্যাটাস বারের রঙকে বডির রঙের সাথে মিলিয়ে নিন।

    চিত্র 2: সিস্টেম বারের রঙগুলি আপনার অ্যাপের শরীরের রঙের সাথে মেলে তা নিশ্চিত করুন
  • টোকা অঙ্গভঙ্গি যোগ করা এড়িয়ে চলুন বা অঙ্গভঙ্গি ইনসেট অধীনে লক্ষ্য টানুন; প্রান্ত থেকে প্রান্ত এবং অঙ্গভঙ্গি নেভিগেশন সঙ্গে এই বিরোধ.

    চিত্র 3: সিস্টেম জেসচার ইনসেট। এই এলাকার অধীনে ট্যাপ লক্ষ্য স্থাপন এড়িয়ে চলুন

সিস্টেম বার পিছনে আপনার বিষয়বস্তু আঁকা

এজ-টু-এজ বৈশিষ্ট্যটি অ্যান্ড্রয়েডকে আরও নিমগ্ন অভিজ্ঞতার জন্য সিস্টেম বারের নীচে UI আঁকতে দেয়। আমরা এজ-টু-এজ ব্যবহার করার পরামর্শ দিই কারণ নেভিগেশন বারকে স্বচ্ছ করা ব্যবহারকারীদের কাছ থেকে একটি সাধারণ অনুরোধ। (কীভাবে এজ-টু-এজ সমর্থন করবেন সে সম্পর্কে পড়ুন)।

একটি অ্যাপ ইনসেটগুলিতে প্রতিক্রিয়া করে বিষয়বস্তুর ওভারল্যাপগুলিকে সমাধান করতে পারে৷ ইনসেটগুলি বর্ণনা করে যে Android OS UI-এর কিছু অংশ যেমন নেভিগেশন বার বা স্ট্যাটাস বার, অথবা ডিসপ্লে কাটআউটগুলির মতো শারীরিক ডিভাইস বৈশিষ্ট্যগুলির সাথে ওভারল্যাপিং এড়াতে আপনার অ্যাপের সামগ্রীকে কতটা প্যাড করতে হবে৷

এজ-টু-এজ ব্যবহারের ক্ষেত্রে ডিজাইন করার সময় নিম্নলিখিত ধরণের ইনসেটগুলি সম্পর্কে সচেতন হন:

  • সিস্টেম বার ইনসেটগুলি UI-তে প্রযোজ্য যা উভয়ই ট্যাপযোগ্য এবং এটি সিস্টেম বার দ্বারা দৃশ্যত অস্পষ্ট করা উচিত নয়৷
  • সিস্টেম জেসচার ইনসেটগুলি সিস্টেম দ্বারা ব্যবহৃত অঙ্গভঙ্গি-নেভিগেশনাল এলাকায় প্রযোজ্য হয় যা আপনার অ্যাপের উপর অগ্রাধিকার নেয়।

স্ট্যাটাস বার

অ্যান্ড্রয়েডে, স্ট্যাটাস বারে বিজ্ঞপ্তি আইকন এবং সিস্টেম আইকন থাকে। ব্যবহারকারী নোটিফিকেশন শেড অ্যাক্সেস করতে স্ট্যাটাস বারের সাথে এটিকে টেনে নামিয়ে ইন্টারঅ্যাক্ট করে।

চিত্র 4: শীর্ষ অ্যাপ বারের উপরে স্ট্যাটাস বার অঞ্চল হাইলাইট করা হয়েছে

প্রসঙ্গ, দিনের সময়, ব্যবহারকারীর-সেট পছন্দ বা থিম এবং অন্যান্য পরামিতির উপর নির্ভর করে স্ট্যাটাস বার ভিন্নভাবে প্রদর্শিত হতে পারে। আপনি নিম্নলিখিত উদাহরণগুলির মতো স্ট্যাটাস বার শৈলীও সেট করতে পারেন।

চিত্র 5: হালকা এবং অন্ধকার থিমে স্ট্যাটাস বার।

নিশ্চিত করুন যে আপনার অ্যাপের বিষয়বস্তু পুরো স্ক্রীন জুড়ে ছড়িয়ে আছে এখন যে প্রান্ত থেকে প্রান্ত প্রয়োজন। এজ-টু-এজ কন্টেন্ট সহ স্বচ্ছ সিস্টেম বার ব্যবহার করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

চিত্র 6: এজ-টু-এজ বৈশিষ্ট্য ব্যবহার করে স্বচ্ছ বার, সর্বাধিক স্ক্রীন স্পেস ব্যবহার করে আপনার বিষয়বস্তুকে উজ্জ্বল করার জন্য আদর্শ।


চিত্র 7: আপনার বিষয়বস্তু উন্নত করতে বা আপনার অ্যাপের ব্র্যান্ডিংয়ের সাথে মেলে আপনার সিস্টেম বারকে স্টাইল করুন। সিস্টেম বারগুলিকে ডিফল্ট বৈশিষ্ট্যগুলিতে সেট করে রেখে দেবেন না।

যখন একটি বিজ্ঞপ্তি আসে, একটি আইকন সাধারণত স্ট্যাটাস বারে প্রদর্শিত হয়। এটি ব্যবহারকারীকে সংকেত দেয় যে বিজ্ঞপ্তি ড্রয়ারে দেখার মতো কিছু আছে। চ্যানেলের প্রতিনিধিত্ব করার জন্য এটি আপনার অ্যাপ আইকন বা প্রতীক হতে পারে। বিজ্ঞপ্তি নকশা দেখুন.

চিত্র 8: স্ট্যাটাস বারে বিজ্ঞপ্তি আইকন

স্ট্যাটাস বার স্টাইল সেট করুন

স্বচ্ছতা এবং অস্বচ্ছতা সেটিং সহ একটি কাস্টম রঙ বা শৈলী সহ আপনার অ্যাপ থিমের একটি অংশ হিসাবে স্ট্যাটাস বার ব্যাকগ্রাউন্ড স্টাইল করুন।

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

আপনি যদি ম্যানুয়ালি ব্যাকগ্রাউন্ডের রঙ সেট করে থাকেন, তাহলে আপনি বিকল্পভাবে স্ট্যাটাস বারের বিষয়বস্তুগুলিকে সর্বোত্তম কনট্রাস্টের জন্য হালকা বা অন্ধকার হিসাবে স্টাইল করতে পারেন।

কাটআউট এবং স্ট্যাটাস বার প্রদর্শন করুন

একটি ডিসপ্লে কাটআউট হল কিছু ডিভাইসের একটি এলাকা যা সামনের দিকের সেন্সরগুলির জন্য স্থান প্রদান করতে ডিসপ্লে পৃষ্ঠের মধ্যে প্রসারিত হয়। এটি স্ট্যাটাস বারগুলির চেহারাকে প্রভাবিত করতে পারে। ডিসপ্লে কাটআউট প্রস্তুতকারকের উপর নির্ভর করে পরিবর্তিত হতে পারে।

ডিসপ্লে কাটআউটগুলিকে কীভাবে সমর্থন করবেন সে সম্পর্কে পড়ুন।

চিত্র 9: প্রদর্শন কাটআউটের উদাহরণ

Android ব্যবহারকারীদের ব্যাক, হোম এবং ওভারভিউ কন্ট্রোল ব্যবহার করে নেভিগেশন নিয়ন্ত্রণ করতে দেয়:

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

ব্যবহারকারীরা বিভিন্ন নেভিগেশন বার কনফিগারেশন থেকে বেছে নিতে পারেন যেমন জেসচার নেভিগেশন (প্রস্তাবিত) এবং তিন-বোতাম নেভিগেশন।

অঙ্গভঙ্গি নেভিগেশন

Android 10 (API স্তর 29) এ প্রবর্তিত, অঙ্গভঙ্গি নেভিগেশন হল প্রস্তাবিত ধরনের নেভিগেশন, যদিও আপনি ব্যবহারকারীর পছন্দ ওভাররাইড করতে পারবেন না। অঙ্গভঙ্গি নেভিগেশন ব্যাক, হোম, এবং ওভারভিউ এর জন্য বোতাম ব্যবহার করে না, পরিবর্তে সামর্থ্যের জন্য একটি একক অঙ্গভঙ্গি হ্যান্ডেল দেখায়। ব্যবহারকারীরা স্ক্রীনের বাম বা ডান প্রান্ত থেকে সোয়াইপ করে পিছনে এবং এগিয়ে যেতে এবং বাড়িতে যাওয়ার জন্য নীচে থেকে উপরে যেতে ইন্টারঅ্যাক্ট করে। সোয়াইপ আপ এবং ধরে রাখা ওভারভিউ খোলে।

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

  • প্রান্ত থেকে প্রান্ত বিষয়বস্তু সমর্থন.
  • অঙ্গভঙ্গি নেভিগেশন ইনসেটের অধীনে মিথস্ক্রিয়া বা স্পর্শ লক্ষ্যগুলি যোগ করা এড়িয়ে চলুন।

অঙ্গভঙ্গি নেভিগেশন বাস্তবায়ন সম্পর্কে পড়ুন।

চিত্র 10: অঙ্গভঙ্গি হ্যান্ডেল নেভিগেশন বার

তিন বোতাম নেভিগেশন

থ্রি-বোতাম নেভিগেশন ব্যাক, হোম এবং ওভারভিউ এর জন্য তিনটি বোতাম প্রদান করে।

চিত্র 11: তিন বোতামের নেভিগেশন বার

অন্যান্য নেভিগেশন বারের বৈচিত্র

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

চিত্র 12: দুই বোতামের নেভিগেশন বার

একটি নেভিগেশন শৈলী সেট করুন

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি নেভিগেশন শৈলী বাস্তবায়ন করতে হয়।

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

অ্যান্ড্রয়েড ইঙ্গিত নেভিগেশন মোডে বা বোতাম মোডে ব্যবহারকারী ইন্টারফেসের সমস্ত ভিজ্যুয়াল সুরক্ষা পরিচালনা করে।

  • অঙ্গভঙ্গি নেভিগেশন মোড : সিস্টেমটি গতিশীল রঙ অভিযোজন প্রয়োগ করে, যেখানে সিস্টেম বারের বিষয়বস্তু তাদের পিছনের বিষয়বস্তুর উপর ভিত্তি করে রঙ পরিবর্তন করে। নিম্নলিখিত উদাহরণে, নেভিগেশন বারের হ্যান্ডেলটি একটি গাঢ় রঙে পরিবর্তিত হয় যদি এটি হালকা বিষয়বস্তুর উপরে স্থাপন করা হয় এবং এর বিপরীতে।

    চিত্র 13: গতিশীল রঙ অভিযোজন
  • বোতাম মোড : সিস্টেমটি সিস্টেম বারগুলির পিছনে একটি স্বচ্ছ স্ক্রিম প্রয়োগ করে (এপিআই স্তর 29 বা উচ্চতর জন্য) বা একটি স্বচ্ছ সিস্টেম বার (এপিআই স্তর 28 বা তার নীচের জন্য)।

    চিত্র 14: গতিশীল রঙ অভিযোজন, যেখানে সিস্টেম বারগুলি তাদের পিছনের বিষয়বস্তুর উপর ভিত্তি করে রঙ পরিবর্তন করে

কীবোর্ড এবং নেভিগেশন

চিত্র 15: নেভিগেশন বার সহ অন-স্ক্রীন কীবোর্ড

প্রতিটি নেভিগেশন টাইপ অন-স্ক্রীন কীবোর্ডে যথাযথভাবে প্রতিক্রিয়া জানায় যাতে ব্যবহারকারীকে কীবোর্ডের ধরন খারিজ বা পরিবর্তন করার মতো ক্রিয়া সম্পাদন করতে দেয়। একটি মসৃণ কীবোর্ড রূপান্তর নিশ্চিত করতে, একটি মসৃণ রূপান্তর নিশ্চিত করতে যা অ্যাপটির রূপান্তরকে কীবোর্ড স্লাইড করার সাথে স্ক্রিনের নিচ থেকে উপরে এবং নিচের দিকে সিঙ্ক্রোনাইজ করে, WindowInsetsAnimationCompat ব্যবহার করুন।

ইমারসিভ মোড

চিত্র 16: ইমারসিভ মোড একটি ল্যান্ডস্কেপ-ভিত্তিক মোবাইল ডিভাইসে একটি পূর্ণ-স্ক্রীন অভিজ্ঞতা দেখাচ্ছে

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