দিন এবং রাতের থিম জুড়ে একই রঙের সাথে আরও সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে অ্যান্ড্রয়েড অটো সমস্ত সামগ্রীকে কালো পটভূমিতে রাখে।
একটি কালো ব্যাকগ্রাউন্ড সাধারণত গাড়ির ভিতরে সবচেয়ে ভালো কাজ করে, কারণ গাড়ি নির্মাতারা প্রায়ই গাড়ির অভ্যন্তরীণ, ড্যাশবোর্ড এবং UI-এর জন্য গাঢ় উপাদান এবং রং ব্যবহার করে।
এক পলকে
দিন এবং রাত উভয় ড্রাইভিং সমর্থন করার জন্য একটি কালো ব্যাকগ্রাউন্ড ব্যবহার করুন
পটভূমি এবং আইকন বা পাঠ্যের মধ্যে কমপক্ষে 4.5:1 এর একটি বৈসাদৃশ্য অনুপাত বজায় রাখুন
ন্যূনতম এবং উদ্দেশ্যমূলকভাবে রঙ ব্যবহার করুন
ধূসর বিভিন্ন শেড ব্যবহার করে উচ্চতা দেখান
চাক্ষুষ ফোকাস গাইড করতে স্বচ্ছতা এবং অস্বচ্ছতা ব্যবহার করুন
প্যালেট এবং গ্রেডিয়েন্ট
অ্যান্ড্রয়েড অটোর জন্য অন্ধকার থিম একটি গ্রেস্কেল রঙ প্যালেট ব্যবহার করে। আপনার UI-তে যোগ করা যেকোন অতিরিক্ত রঙগুলিকে তীব্রতায় নিঃশব্দ করা উচিত, উপাদান ডিজাইনের রঙ প্যালেটগুলির গাঢ় রঙের বৈকল্পিকগুলির মতো৷
মেটেরিয়াল ডিজাইন
রঙের ব্যবহার এবং প্যালেট
Android Auto এর গ্রেস্কেল প্যালেট
অ্যান্ড্রয়েড অটো গ্রেস্কেল রঙ প্যালেট ব্যবহার করে, আপনি পাঠ্য এবং আইকন সহ সমস্ত উপাদানগুলিতে রঙ প্রয়োগ করতে পারেন৷
এই প্যালেটটি ডিজাইন করা হয়েছে:
প্রদত্ত শেডের পরিসর দিয়ে প্রতিটি UI উপাদানের স্তরবিন্যাস প্রতিফলিত করুন
সমস্ত অন্ধকার থিম UI ব্যবহার ক্ষেত্রে ঠিকানা
এই গ্রেস্কেল প্যালেট হল ডিফল্ট অ্যান্ড্রয়েড অটো কালার প্যালেট, ইন্টারফেসের গাঢ় থিম সমর্থন করে৷
অ্যান্ড্রয়েড অটোতে, ধূসর রঙের বিভিন্ন শেড ব্যবহার করে গভীরতার অনুভূতি প্রকাশ করা হয়। প্রতিটি শেড উচ্চতার একটি ভিন্ন স্তরের প্রতিনিধিত্ব করে, যেখানে গাঢ় শেডগুলির উপাদানগুলির (যেমন তালিকার উপাদান) হালকা শেডগুলির (যেমন ফ্লোটিং অ্যাকশন বোতাম)গুলির তুলনায় কম উচ্চতা থাকে৷
সমস্ত উপাদান একটি সত্যিকারের কালো পটভূমিতে প্রদর্শিত হয় যেখানে ছায়া দেখা যায় না। এই উপাদানগুলির মধ্যে যথেষ্ট বৈসাদৃশ্য প্রদান করতে, Android Auto গ্রেস্কেল প্যালেটে ধূসর রঙের বিস্তৃত পরিসর রয়েছে। এটি মেটেরিয়াল ডিজাইনের বেসলাইন কালার প্যালেটের তুলনায় ধূসর রঙের আরও ধীরে ধীরে অগ্রগতি, কারণ ধূসর 900 এর নীচের উপাদানের শেডগুলি স্বয়ংক্রিয় প্রসঙ্গের জন্য খুব উজ্জ্বল।
বিভিন্ন উপাদানের জন্য প্রতিটি বিশ্রামের উচ্চতা স্তর একটি অনন্য ধূসর মানের সাথে যুক্ত। এই চার্টটি দিন এবং রাতের মোডের জন্য বিভিন্ন উচ্চতা স্তরের সাথে যুক্ত ধূসর মানগুলি দেখায়।
সুরের ধাপের রঙ
অ্যান্ড্রয়েড অটোর গ্রেস্কেল প্যালেট ছাড়াও, ব্যবহারকারীর ফোকাস আঁকার মতো উদ্দেশ্যে একটি অ্যাকসেন্ট রঙ অল্প ব্যবহার করা যেতে পারে।
বর্তমানে, অ্যান্ড্রয়েড অটোতে একটি অফিসিয়াল অ্যাকসেন্ট রঙ রয়েছে, নীল রঙের একটি ছায়া যা সমর্থন লাইব্রেরিতে "কার অ্যাকসেন্ট" হিসাবে উল্লেখ করা হয়েছে। UI এর অন্ধকার পৃষ্ঠে আরও ভাল দৃশ্যমানতার জন্য এই নীলটি স্ট্যান্ডার্ড Google নীল থেকে স্যাচুরেশন এবং প্রাণবন্ততা বাড়িয়েছে।
অ্যান্ড্রয়েড অটোতে নীল "গাড়ির অ্যাকসেন্ট" রঙটি স্ট্যান্ডার্ড Google নীল রঙের চেয়ে বেশি স্যাচুরেটেড, যা দিনে এবং রাতের গাড়ি চালানোর সময় অন্ধকার-থিমযুক্ত ইন্টারফেসে ভালভাবে কাজ করার জন্য ডিজাইন করা হয়েছে।
অস্বচ্ছতা চার্ট
মেটেরিয়াল ডিজাইনের স্থানিক মডেলটি একটি UI-তে গভীরতার অনুভূতি জানাতে অস্বচ্ছতার বিভিন্ন মাত্রার উপর নির্ভর করে। এটি কার্যকরভাবে ব্যবহার করতে, আপনার ব্যবহারের ক্ষেত্রের উপর ভিত্তি করে একটি অস্বচ্ছতা স্তর নির্বাচন করুন।
গাঢ় অস্বচ্ছতা মান
আধা-স্বচ্ছ অন্ধকার পৃষ্ঠের জন্য সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে একটি স্ক্রিম (এটি "ওভারলে" নামেও পরিচিত)।
সাদা অস্বচ্ছতার মান
আধা-স্বচ্ছ সাদা মানগুলি বেশিরভাগ পাঠ্যের জন্য ব্যবহৃত হয়, বিশেষ করে যখন পটভূমিটি রঙিন হয়, পরিবর্তে কঠিন ধূসর ব্যবহার করে।
স্ক্রিম এবং টেক্সট হায়ারার্কিতে কীভাবে অস্বচ্ছতা ব্যবহার করবেন তার উদাহরণের জন্য, নির্দেশিকা এবং উদাহরণ দেখুন।
বৈপরীত্য
উপযুক্ত রঙের বৈসাদৃশ্য ড্রাইভারদের দ্রুত তথ্য ব্যাখ্যা করতে এবং সিদ্ধান্ত নিতে সাহায্য করে।
ড্রাইভিং করার সময় স্পষ্টতার জন্য ফোরগ্রাউন্ড (টেক্সট বা আইকন) এবং ব্যাকগ্রাউন্ডের (রং, অ্যালবাম আর্ট, ইত্যাদি) মধ্যে ন্যূনতম ভিজ্যুয়াল কন্ট্রাস্ট প্রয়োজন। অ্যাপের রং অবশ্যই WCAG 2.0 লেভেল AA সাধারন টেক্সট কন্ট্রাস্ট প্রয়োজনীয়তা পূরণ করবে, যা 4.5:1 এর বৈসাদৃশ্য অনুপাত নির্দিষ্ট করে)। একটি কনট্রাস্ট চেকার ব্যবহার করুন, যেমন WebAIM কালার কনট্রাস্ট চেকার , আপনার স্ক্রিনগুলি কনট্রাস্টের প্রয়োজনীয়তাগুলি পূরণ করে তা নিশ্চিত করতে৷
স্পষ্টতা, দৃষ্টিযোগ্যতা এবং বৈসাদৃশ্য অনুপাত সম্পর্কে বিশদ।
করবেন
এই আইকনগুলি রঙের বৈসাদৃশ্য অনুপাতের সুপারিশগুলি অনুসরণ করে এবং তাদের ব্যাকগ্রাউন্ডের বিপরীতে আরও সুস্পষ্ট
করবেন না
এই আইকনগুলি রঙের বৈসাদৃশ্য অনুপাতের সুপারিশগুলি অনুসরণ করে না এবং তাদের ব্যাকগ্রাউন্ডগুলির সাথে পার্থক্য করা কঠিন
নির্দেশিকা এবং উদাহরণ
অ্যান্ড্রয়েড অটোর জন্য অন্ধকার UI পরিষ্কার এবং সহজ, রঙের ন্যূনতম ব্যবহার সহ। UI উপাদানগুলির জন্য উপযুক্ত রং, টোন এবং অস্বচ্ছতার মান ব্যবহার করার পাশাপাশি ( প্যালেট এবং গ্রেডিয়েন্ট দেখুন), রঙের প্রতিটি ব্যবহার এবং বৈচিত্র্যময় অস্বচ্ছতার একটি উদ্দেশ্য থাকা উচিত।
এই বিভাগটি বিভিন্ন লক্ষ্য অর্জনের জন্য অস্বচ্ছতার বৈচিত্র এবং রঙ প্রয়োগ করার জন্য নির্দেশিকা এবং উদাহরণ প্রদান করে, যার মধ্যে রয়েছে:
অস্পষ্ট পটভূমি
ধারাবাহিকতা বজায় রাখা
একটি চাক্ষুষ শ্রেণিবিন্যাস স্থাপন করা যা ব্যবহারকারীর ফোকাসকে প্রাথমিক ক্রিয়াকলাপে আকর্ষণ করে
একটি তালিকায় আইটেম আলাদা করা
scrims সঙ্গে পটভূমি অস্পষ্ট
পূর্ণ-স্ক্রীন স্ক্রিম (ওভারলে) ব্যাকগ্রাউন্ড কভার করার জন্য ব্যবহৃত হয় যখন উচ্চ-অগ্রাধিকার বিষয়বস্তু অগ্রভাগে উপস্থিত হয়, যেমন একটি ডায়ালগ যা ব্যবহারকারীকে একটি পদক্ষেপ নিতে হয়। আংশিক স্ক্রিমগুলি উপাদানগুলির পরিবর্তনের দিকে মনোযোগ আকর্ষণ করতে ব্যবহৃত হয়, যেমন বিজ্ঞপ্তিগুলির প্রবেশদ্বার৷
দিনের মোডে সম্পূর্ণ স্ক্রিম (ডায়ালগ কার্ডের পিছনে) নাইট মোডে সম্পূর্ণ স্ক্রিম (ডায়ালগ কার্ডের পিছনে)
ব্যবহারকারীর প্রবাহ জুড়ে মূল উপাদানগুলির মধ্যে সংযোগকে শক্তিশালী করার জন্য রঙ একটি শক্তিশালী সংকেত, যেমন সমস্ত নেভিগেশন-সম্পর্কিত উপাদানগুলি সবুজ রঙের। এই ধরনের রঙের ধারাবাহিকতা মেমরি এবং স্বীকৃতিতে সহায়তা করে যে কোন UI উপাদানগুলি সংযুক্ত রয়েছে এবং তারা কীভাবে একে অপরের সাথে সম্পর্কিত। আপনি পর্দা থেকে পর্দায় একটি সুসংগত অভিজ্ঞতা তৈরি করতে এটি ব্যবহার করতে পারেন।
করবেন
একাধিক ভিউ জুড়ে একটি আইটেমের জন্য একই রঙ ব্যবহার করে চাক্ষুষ ধারাবাহিকতা বজায় রাখুন, যেমন সবুজ রঙ এই পালাক্রমে নেভিগেশন দৃশ্যের জন্য ব্যবহৃত হয়।
করবেন
সম্পর্কিত উপাদান এবং ফাংশনগুলিকে দৃশ্যত সংযোগ করতে রঙ ব্যবহার করুন, যেমন এই লাল হ্যাং-আপ CTA গুলি৷
করবেন
অ্যালবাম শিল্পের প্রভাবশালী রঙ বা একটি অবিচ্ছিন্ন ভিজ্যুয়াল সামর্থ্য হিসাবে সম্পর্কিত উপাদানগুলিতে একটি অ্যাপের নির্ধারিত রঙ ব্যবহার করুন। বিরতি বোতামের চারপাশে এই বৃত্তটি Spotify সবুজ দিয়ে উচ্চারিত।
করবেন না
একটি একক স্ক্রিনের মধ্যে বারবার উপাদানগুলিকে নির্বিচারে আলাদা করতে বিভিন্ন রঙ ব্যবহার করবেন না। রঙ ব্যবহার করার বিষয়ে সতর্ক থাকুন যখন তারা মান যোগ করে না - যেমনটি সারাংশ কার্ডের চারপাশে এই রঙিন রূপরেখার ক্ষেত্রে, যা অ্যাপ আইকনের রঙের নকল করে।
একটি চাক্ষুষ শ্রেণিবিন্যাস প্রতিষ্ঠা করা
সাদা অস্বচ্ছতার একটি পরিসীমা ব্যবহার করে পাঠ্য রঙ করার মাধ্যমে একটি সামঞ্জস্যপূর্ণ এবং শক্তিশালী চাক্ষুষ শ্রেণিবিন্যাস তৈরি করা যেতে পারে। সাদা টেক্সটের জন্য 88%, 72% এবং 56% এর অস্বচ্ছতার মানগুলি অন্ধকার পটভূমিতে একটি আরামদায়ক পড়ার পরিবেশ তৈরি করার সময় অ্যাক্সেসযোগ্যতার প্রয়োজনীয়তাগুলি পূরণ করার জন্য যথেষ্ট বৈপরীত্য রয়েছে। নাইট মোডের জন্য সমস্ত সাদা টেক্সটে 96% অপাসিটি ব্যবহার করুন।
করবেন
একটি ভিজ্যুয়াল শ্রেণিবিন্যাস বজায় রাখতে বিভিন্ন অস্বচ্ছতা এবং বৈসাদৃশ্য মান ব্যবহার করুন।
করবেন না
সম্পূর্ণ অস্বচ্ছতা বা বৈপরীত্য মানগুলিকে অনেকগুলি উপাদানে প্রয়োগ করে অতিরিক্ত ব্যবহার করবেন না। প্রাথমিক এবং মাধ্যমিক তথ্যের পার্থক্য করার জন্য অস্বচ্ছতার মানগুলির একটি বৈসাদৃশ্য প্রয়োজন।
