মোবাইল ডিজাইনের জন্য অ্যান্ড্রয়েড রঙ, মোবাইল ডিজাইনের জন্য অ্যান্ড্রয়েড রঙ, মোবাইল ডিজাইনের জন্য অ্যান্ড্রয়েড রঙ

শৈলী প্রকাশ করতে এবং অর্থ যোগাযোগ করতে রঙ ব্যবহার করুন। আপনার অ্যাপের রঙ সেট করা ব্যক্তিগতকরণের জন্য গুরুত্বপূর্ণ হতে পারে, শব্দার্থিক উদ্দেশ্য সংজ্ঞায়িত করতে এবং অবশ্যই ব্র্যান্ড পরিচয় সংজ্ঞায়িত করতে পারে।

Takeaways

• অ্যাক্সেসযোগ্যতা নিশ্চিত করতে:
  • রঙের বৈসাদৃশ্য পরীক্ষা করুন এবং অনুরূপ টোনগুলির সাথে রঙ জোড়া এড়ান।
  • বিবেচনা করুন যে লাল এবং সবুজ সাধারণ প্যাটার্ন, তবে নির্দিষ্ট ধরণের বর্ণান্ধতা সহ ব্যবহারকারীদের কাছে এগুলি অ্যাক্সেসযোগ্য নয়।
• অর্থপূর্ণভাবে রঙগুলি ব্যবহার করার অনুশীলন করুন: অ্যাপগুলি প্রাণবন্ত এবং অভিব্যক্তিপূর্ণ হতে পারে, তবে রঙের প্যালেটে লেগে থাকতে পারে। অনেকগুলি শব্দার্থিক রঙ দিয়ে আপনার স্কিম প্রসারিত করা বিভ্রান্তিকর হতে পারে, যখন অনেকগুলি আলংকারিক রঙ অপ্রতিরোধ্য হতে পারে।
• রঙের নিদর্শন থাকতে পারে, তাই প্রতিষ্ঠিত রঙের নিদর্শনগুলি পুনরাবৃত্তি করুন। আপনার অ্যাপে শব্দার্থিক রং ব্যবহার করলে, সামঞ্জস্যপূর্ণ রং ব্যবহার করুন।
• আপনার অ্যাপকে বিভিন্ন প্রেক্ষাপটে ভালোভাবে কাজ করার অনুমতি দিতে, একটি হালকা এবং গাঢ় রঙের স্কিম তৈরি করুন (এবং আদর্শভাবে কনট্রাস্ট থিম)।
• একটি হার্ডকোড মান ব্যবহার করার পরিবর্তে উপাদানটির রঙের ভূমিকা নির্দেশ করতে টোকেনগুলির সাথে রঙগুলি বরাদ্দ করুন৷
• রঙগুলি বিভিন্ন গতিশীল এবং স্থির উত্স থেকে আসতে পারে তবে একই দৃশ্যের মধ্যে অনেকগুলি মিশ্রিত করা এড়িয়ে চলুন৷
• ডায়নামিক কন্টেন্ট কালার ব্যবহার করার সময়, একাধিক কন্টেন্ট টুকরা থেকে রং টানা এড়াতে চেষ্টা করুন।

অ্যান্ড্রয়েডে রঙের স্থান

অ্যান্ড্রয়েড কীভাবে আপনার UI-তে রঙ প্রয়োগ করে তা সঠিকভাবে বোঝার জন্য, প্রথমে এটি একটি ডিভাইসে কীভাবে প্রদর্শিত হয় তা সনাক্ত করা গুরুত্বপূর্ণ।

একটি ডিভাইসে রঙ কিভাবে প্রদর্শিত হয়

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

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

রঙ স্পেস সম্পর্কে

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

উপাদান 3 (M3) এইচসিটি প্রবর্তন করেছে, একটি নতুন রঙের স্থান যা এইচএসএলের মতো অন্যান্য মডেলের তুলনায় উপলব্ধিগতভাবে নির্ভুল রঙগুলিকে সংজ্ঞায়িত করতে হিউ, ক্রোমা এবং টোন ব্যবহার করে

রঙ বিজ্ঞান এবং HCT এর বিকাশ সম্পর্কে আরও জানতে, রঙ ও ডিজাইনের বিজ্ঞান পড়ুন।

হিউ, ক্রোমা এবং টোন

HCT সিস্টেম প্যারামিটারের মধ্যে থাকা রঙের আরও ব্যক্তিগতকৃত এবং নমনীয় ব্যবহারের অনুমতি দেয়। হিউ, ক্রোমা এবং টোন ব্যবহার করে এইচসিটি মডেলের রং:

• হিউ : হিউ হল বিশেষণটির সাথে সাদৃশ্যপূর্ণ যেটি একজন স্বতন্ত্র ব্যবহারকারী রঙ বর্ণনা করতে ব্যবহার করতে পারেন, উদাহরণস্বরূপ, "লাল" বা "বৈদ্যুতিক বেগুনি।" রঙের HCT মান 0-360 পর্যন্ত।
• ক্রোমা : ক্রোমা নিরপেক্ষ ধূসর থেকে পূর্ণ প্রাণবন্ততা পর্যন্ত রঙের বর্ণময়তাকে প্রতিনিধিত্ব করে। HCT কালার স্পেসে, ক্রোমার সর্বোচ্চ মান প্রায় 120।
• স্বর : স্বর হল একটি রঙের উজ্জ্বলতা বা উজ্জ্বলতা। এইচসিটি বৈসাদৃশ্য তৈরি করতে টোন ব্যবহার করে। একই টোন মান সেট করা রং নির্দিষ্ট অ্যাক্সেসিবিলিটি প্রসঙ্গের জন্য অ্যাক্সেসযোগ্য নয়। নিম্ন মান টোন গাঢ়, এবং উচ্চ মান টোন উজ্জ্বল.

রঙ সিস্টেম প্রক্রিয়া

M3 রঙ HCT মডেলের চারপাশে তৈরি করা হয়েছে সুরেলা অ্যাক্সেসযোগ্য রঙের স্কিমগুলি পেতে এবং গতিশীল রঙের বৈশিষ্ট্যগুলিকে সহায়তা করে। M3 রঙের সিস্টেমটি উৎস রঙ থেকে শুরু হয়। এই উত্স রঙটি পাঁচটি মূল রঙে অনুবাদ করা হয়েছে: প্রাথমিক, মাধ্যমিক, তৃতীয়, নিরপেক্ষ এবং নিরপেক্ষ বৈকল্পিক। এই পাঁচটি কী রঙ প্রতিটি কী রঙের জন্য টোনাল বৃদ্ধির সমন্বয়ে টোনাল প্যালেট তৈরি করে।

আপনি যদি ম্যানুয়ালি একটি কী রঙ বরাদ্দ করেন, ইনপুটের ক্রোমা এবং টোনটি নোট করুন, কারণ রঙের টোনটি রঙের ভূমিকার টোনাল মান নাও হতে পারে।

M3 কালার সিস্টেমটি ম্যাটেরিয়াল কালার ইউটিলিটিস (MCU) দ্বারা চালিত হয়, অ্যালগরিদম এবং ইউটিলিটিগুলি সমন্বিত রঙিন লাইব্রেরির একটি সেট যা আপনার অ্যাপে রঙের থিম এবং স্কিমগুলি বিকাশ করা সহজ করে তোলে।

নিচের ভিডিওটি বর্ণনা করে যে কিভাবে রঙের স্কিমগুলো উদ্ভূত হয়।

রঙের সীমাবদ্ধতা

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

পূর্ববর্তী চিত্রটি H105, H25 এবং H285 রঙের মানের জন্য তিনটি ভিন্ন টোন ম্যাপিং চার্ট দেখায়।

• চার্ট 1–রঙ 105 (হলুদ) । রঙের প্রাপ্যতা নির্দেশ করে। ক্রোমা এবং টোন একটি গ্রাফের মতো কাজ করে। হলুদ রঙের গ্রাফ বরাবর নির্দিষ্ট টোন সহ সীমিত ক্রোমা রয়েছে, হলুদ রঙের নিম্ন টোনে বিস্তৃত প্রাণবন্ততা নেই।

• চার্ট 2–রঙ 25 (লাল) । hue 105 (হলুদ) এর চেয়ে বেশি রঙিন বিকল্প দেখায়। এই টোন ম্যাপে, সর্বোচ্চ রঙিনতার বিন্দুটি নিম্ন টোন স্তরে।

• চার্ট 3–রঙ 285 (নীল) । দেখায় যে সর্বোচ্চ রঙিনতা আরও গাঢ় টোনে পাওয়া যায়। ফ্লিপসাইডে, হালকা স্বরে ক্রোমা ক্ষমতা হারিয়ে যায়।

রঙের স্কিম

একটি রঙের স্কিম হল উচ্চারণ এবং পৃষ্ঠগুলির সেট যা নির্দিষ্ট টোন থেকে প্রাপ্ত এবং রঙের ভূমিকার জন্য নির্ধারিত হয়, যা পরে UI উপাদান এবং উপাদানগুলিতে ম্যাপ করা হয়। রঙের ভূমিকাগুলি রঙের রঙের পরিবর্তে রঙের ব্যবহারকে বোঝায়। উদাহরণস্বরূপ, অন-ব্লু না হয়ে অন-প্রাথমিক।

রঙের স্কিমগুলি সুরেলা হতে, অ্যাক্সেসযোগ্য পাঠ্য নিশ্চিত করতে এবং UI উপাদান এবং পৃষ্ঠগুলিকে একে অপরের থেকে আলাদা করার জন্য ডিজাইন করা হয়েছে। রঙের ভূমিকা জোড়া (কন্টেইনার এবং অন-কন্টেইনার ভূমিকার সমন্বয়ে গঠিত) টোনাল মান রয়েছে যা অ্যাক্সেসযোগ্য বৈসাদৃশ্য প্রদান করে।

হালকা এবং অন্ধকার স্কিম তৈরি করা হয় এবং তাদের নিজস্ব নির্দিষ্ট টোন অ্যাসাইনমেন্ট আছে।

উপাদান রঙ সিস্টেম এবং কাস্টম স্কিম কাস্টমাইজেশনের জন্য একটি সূচনা পয়েন্ট হিসাবে রঙের জন্য ডিফল্ট মান প্রদান করে।

M3 কালার সিস্টেম সম্পর্কে আরও জানুন।

একটি কাস্টমাইজযোগ্য রঙের স্কিমের জন্য, Android UI কিট অন্বেষণ করুন৷

আপনার UI এ রঙ প্রয়োগ করুন

UI রঙে অ্যাকসেন্ট, শব্দার্থিক এবং পৃষ্ঠের রঙ থাকে।

• অ্যাকসেন্ট রঙগুলি মূল রঙগুলিকে বোঝায় যেগুলি সাধারণত Android ব্র্যান্ডের রঙ প্যালেটের অংশ।
• শব্দার্থগত রং (বা উপাদান 3-এর মধ্যে কাস্টম রং), নির্দিষ্ট অর্থ সহ রঙ।
• পৃষ্ঠের রঙগুলি পটভূমির রঙগুলির জন্য ব্যবহৃত যে কোনও নিরপেক্ষ প্রাপ্ত রঙকে বোঝায়।

অ্যাকসেন্ট রঙ

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

প্রতিটি উচ্চারণ রঙ (প্রাথমিক, মাধ্যমিক, এবং তৃতীয়) জোড়া, সংজ্ঞায়িত জোর এবং চাক্ষুষ অভিব্যক্তির জন্য বিভিন্ন টোনের চার থেকে আটটি সামঞ্জস্যপূর্ণ রঙের একটি গ্রুপে সরবরাহ করা হয়।

গতিশীল রঙ

অ্যাকসেন্ট রঙগুলি গতিশীল উত্স থেকে সংজ্ঞায়িত করা যেতে পারে।

অ্যান্ড্রয়েড 12 (এপিআই লেভেল 31) থেকে শুরু করে, ডাইনামিক কালার সিস্টেমটিকে ব্যবহারকারীর ওয়ালপেপার বা অ্যাপ-মধ্যস্থ বিষয়বস্তু থেকে একটি উৎস রঙ বের করতে দেয়, যেমন একটি কীআর্ট সম্পদ। ডাইনামিক কালার MCU অ্যালগরিদম এবং প্রসেস ব্যবহার করে স্কিম তৈরি করে এবং সেগুলিকে সামান্য প্রচেষ্টায় বাস্তবায়ন করে। আপনার অ্যাপে গতিশীল রঙ প্রয়োগ করতে, ব্যবহারকারীদের আপনার অ্যাপে তাদের রঙের অভিজ্ঞতা ব্যক্তিগতকৃত করতে সক্ষম করুন পড়ুন।

ডায়নামিক কালার ভিজ্যুয়ালাইজ করার জন্য কোড ল্যাবটি ব্যবহার করে দেখুন ডায়নামিক কালারে হ্যান্ড-অন লুক।

স্থির

একটি স্ট্যাটিক স্কিম হল একটি স্কিম যার অপরিবর্তনীয় (বা তুলনামূলকভাবে) মান রয়েছে। একটি স্ট্যাটিক স্কিম তৈরি করার একটি সাধারণ উপায় হল ব্র্যান্ডের রঙ, ব্র্যান্ডের প্রধান রঙের প্যালেটের সাথে প্রাথমিক, মাধ্যমিক এবং তৃতীয় রঙগুলি সারিবদ্ধ করা।

এমনকি আপনি ডায়নামিক কালার ব্যবহার করলেও, ব্যবহারকারীর ডিভাইসে ডায়নামিক কালার উপলব্ধ না হলে ফলব্যাক হিসেবে একটি স্ট্যাটিক স্কিম তৈরি করার জন্য আমরা দৃঢ়ভাবে সুপারিশ করি। অন্যথায়, সিস্টেম বেসলাইন বেগুনি রঙের স্কিম ব্যবহার করে।

ম্যাটেরিয়াল থিম বিল্ডার ব্যবহার করে, আপনি একটি স্ট্যাটিক, কাস্টম থিম তৈরি করতে MCU রঙের অ্যালগরিদম প্রয়োগ করতে পারেন। এর ফলে আপনি যে রঙগুলি বেছে নিয়েছেন, কিন্তু যেগুলি M3 কালার সিস্টেম টোকেন এবং সুরেলা অ্যাক্সেসিবিলিটি নীতির সাথে সারিবদ্ধ।

একটি সম্পূর্ণ কাস্টমাইজড স্ট্যাটিক স্কিম তৈরি করা এখনও সম্ভব। এটি করার জন্য, রঙ শৈলীগুলির মধ্যে বিভিন্ন মান নির্ধারণ করুন ( color.kt বা color.xml ), অথবা Figma শৈলী বৈশিষ্ট্যগুলি আপডেট করার পরে Figma এর জন্য Material Theme Builder থেকে থিম ফাইলটি রপ্তানি করুন৷

ব্যবহার

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

টাইপের মতো, সিস্টেমটি প্রাথমিক রঙ এবং গুরুত্বপূর্ণ কল টু অ্যাকশন (CTAs) এর জন্য নির্ধারিত ভূমিকা সহ একটি শ্রেণিবিন্যাসে রঙ প্রয়োগ করে। আমরা প্রাথমিক ভূমিকা নিতে ফ্লোটিং অ্যাকশন বোতাম (এফএবি) এর মতো উপাদানগুলির সুপারিশ করি।

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

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

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

ডায়নামিক রঙের দিকে নজর দেওয়ার জন্য, উপাদানের রঙ কাস্টমাইজ করার জন্য কোড ল্যাব ব্যবহার করে দেখুন।

শব্দার্থিক রঙ

শব্দার্থিক রঙ এমন রঙ যা নির্দিষ্ট অর্থ নির্ধারণ করেছে। উদাহরণস্বরূপ, ত্রুটি একটি শব্দার্থিক রঙ।

রঙের অর্থের সাথে সামঞ্জস্যপূর্ণ হোন-যদি আপনি একটি প্যাটার্ন স্থাপন করেন, তাহলে পুরো অ্যাপ জুড়ে এটি পুনরাবৃত্তি করুন। উদাহরণস্বরূপ, যদি আপনি একটি সদস্যতা বৈশিষ্ট্য নির্দেশ করার জন্য বেগুনি স্থাপন করেন, তাহলে এই সদস্যতা বৈশিষ্ট্যের সমস্ত উদাহরণের জন্য বেগুনি ব্যবহার করুন।

নিম্নলিখিত উদাহরণে, একটি অ্যাপ একটি টেক্সট ফিল্ডে একটি ত্রুটি নির্দেশ করতে লাল ব্যবহার করে, কিন্তু অন্যটির জন্য বেগুনি- এটি একটি ফর্ম স্কিম করার সময় বিভ্রান্তির কারণ হবে৷

যদিও উপাদান রঙের স্কিম শব্দার্থিক ত্রুটি রঙ প্রদান করে, আপনার রঙের স্কিম প্রসারিত করার জন্য কাস্টম রঙের মাধ্যমে অতিরিক্ত শব্দার্থিক রং তৈরি করা হয়। কাস্টম রং সম্পর্কে আরও পড়ুন।

হারমোনাইজেশন আরও সুরেলা রঙের প্যালেট তৈরি করতে আপনার অ্যাপের মধ্যে কাস্টম রঙের সাথে গতিশীল ব্যবহারকারী-উত্পাদিত রঙ সারিবদ্ধ করার একটি উপায় প্রদান করে।

পৃষ্ঠের রং

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

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

অ্যাক্সেসযোগ্যতা এবং রঙ

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

রঙের বৈসাদৃশ্য হল ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড উপাদানগুলির উজ্জ্বলতার মধ্যে পার্থক্য, একটি অনুপাত বিন্যাসে উপস্থাপিত। এই অনুপাতের মানদণ্ডে গ্রেড দেওয়া হয়। উদাহরণস্বরূপ, একটি বোতাম এবং এর পাত্রে পাঠ্যের মধ্যে বৈসাদৃশ্য পরিমাপ করা পাঠ্যের স্পষ্টতা নির্ধারণে সহায়তা করে। রঙের বৈসাদৃশ্য নির্দেশিকা পাঠ্য এবং নন-টেক্সটে বিভক্ত, প্রতিটি তাদের নিজস্ব গ্রেডের সেট সহ। আরো বিস্তারিত জানার জন্য অ্যাক্সেসযোগ্য রং সহ ডিজাইন পড়ুন।

উপলব্ধ কর্মের জন্য রঙকে কখনই একমাত্র সামর্থ্য বা সূচক বানাবেন না। একটি উপাদান বোতাম ব্যবহার করুন, ফন্টের ওজন পরিবর্তন করুন বা এমনকি একটি আইকন আপনার ব্যবহারকারীকে জানাতে সাহায্য করুন যে তারা উপাদানটির সাথে ইন্টারঅ্যাক্ট করতে পারে।

রঙ প্রয়োগ করুন

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

কালার রোল ম্যাপিংয়ের উদাহরণের জন্য নাউ ইন অ্যান্ড্রয়েড ফিগমা নমুনা দেখুন।

কম্পোজ (বা ভিউ ব্যবহার করে color.xml ) ব্যবহার করে রঙের মান একটি রঙিন ফাইল color.kt মধ্যে সেট করা হয়। শৈলী হিসাবে সেট করা এই রঙগুলি একটি থিমের অংশ। অ্যান্ড্রয়েড মোবাইল থিমগুলির জন্য ডিজাইনে এই সম্পর্কে আরও দেখুন৷

অ্যান্ড্রয়েডে রঙের মান সেট করতে, হেক্স কোড ব্যবহার করুন, যা 6-সংখ্যার বিন্যাসে RGB প্রতিনিধিত্ব করে। অস্বচ্ছতা ক্যাপচার করতে, একটি 8-সংখ্যার কোড তৈরি করতে সামনের মানটি যুক্ত করুন।

উপাদান থিম নির্মাতা ব্যবহার করে:

আপনি ম্যাটেরিয়াল থিম বিল্ডার (MTB) ব্যবহার করে কাস্টমাইজড হালকা এবং গাঢ় রঙের স্কিম তৈরি করতে পারেন।

MTB আপনাকে গতিশীল রঙ কল্পনা করতে, মেটেরিয়াল ডিজাইন টোকেন তৈরি করতে এবং আপনার রঙের স্কিমগুলি কাস্টমাইজ করতে দেয়।

ফিগমা ইন্সপেক্টর প্যানেলের মধ্যে শৈলী বৈশিষ্ট্যগুলি আপডেট করে রঙের স্কিমটি সম্পূর্ণরূপে কাস্টমাইজ করা যেতে পারে। এই পরিবর্তিত মান রপ্তানি করা হয়.

শৈলী প্রকাশ করতে এবং অর্থ যোগাযোগ করতে রঙ ব্যবহার করুন। আপনার অ্যাপের রঙ সেট করা ব্যক্তিগতকরণের জন্য গুরুত্বপূর্ণ হতে পারে, শব্দার্থিক উদ্দেশ্য সংজ্ঞায়িত করতে এবং অবশ্যই ব্র্যান্ড পরিচয় সংজ্ঞায়িত করতে পারে।

Takeaways

• অ্যাক্সেসযোগ্যতা নিশ্চিত করতে:
  • রঙের বৈসাদৃশ্য পরীক্ষা করুন এবং অনুরূপ টোনগুলির সাথে রঙ জোড়া এড়ান।
  • বিবেচনা করুন যে লাল এবং সবুজ সাধারণ প্যাটার্ন, তবে নির্দিষ্ট ধরণের বর্ণান্ধতা সহ ব্যবহারকারীদের কাছে এগুলি অ্যাক্সেসযোগ্য নয়।
• অর্থপূর্ণভাবে রঙগুলি ব্যবহার করার অনুশীলন করুন: অ্যাপগুলি প্রাণবন্ত এবং অভিব্যক্তিপূর্ণ হতে পারে, তবে রঙের প্যালেটে লেগে থাকতে পারে। অনেকগুলি শব্দার্থিক রঙ দিয়ে আপনার স্কিম প্রসারিত করা বিভ্রান্তিকর হতে পারে, যখন অনেকগুলি আলংকারিক রঙ অপ্রতিরোধ্য হতে পারে।
• রঙের নিদর্শন থাকতে পারে, তাই প্রতিষ্ঠিত রঙের নিদর্শনগুলি পুনরাবৃত্তি করুন। আপনার অ্যাপে শব্দার্থিক রং ব্যবহার করলে, সামঞ্জস্যপূর্ণ রং ব্যবহার করুন।
• আপনার অ্যাপকে বিভিন্ন প্রেক্ষাপটে ভালোভাবে কাজ করার অনুমতি দিতে, একটি হালকা এবং গাঢ় রঙের স্কিম তৈরি করুন (এবং আদর্শভাবে কনট্রাস্ট থিম)।
• একটি হার্ডকোড মান ব্যবহার করার পরিবর্তে উপাদানটির রঙের ভূমিকা নির্দেশ করতে টোকেনগুলির সাথে রঙগুলি বরাদ্দ করুন৷
• রঙগুলি বিভিন্ন গতিশীল এবং স্থির উত্স থেকে আসতে পারে তবে একই দৃশ্যের মধ্যে অনেকগুলি মিশ্রিত করা এড়িয়ে চলুন৷
• ডায়নামিক কন্টেন্ট কালার ব্যবহার করার সময়, একাধিক কন্টেন্ট টুকরা থেকে রং টানা এড়াতে চেষ্টা করুন।

অ্যান্ড্রয়েডে রঙের স্থান

অ্যান্ড্রয়েড কীভাবে আপনার UI-তে রঙ প্রয়োগ করে তা সঠিকভাবে বোঝার জন্য, প্রথমে এটি একটি ডিভাইসে কীভাবে প্রদর্শিত হয় তা সনাক্ত করা গুরুত্বপূর্ণ।

একটি ডিভাইসে রঙ কিভাবে প্রদর্শিত হয়

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

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

রঙ স্পেস সম্পর্কে

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

উপাদান 3 (M3) এইচসিটি প্রবর্তন করেছে, একটি নতুন রঙের স্থান যা এইচএসএলের মতো অন্যান্য মডেলের তুলনায় উপলব্ধিগতভাবে নির্ভুল রঙগুলিকে সংজ্ঞায়িত করতে হিউ, ক্রোমা এবং টোন ব্যবহার করে

রঙ বিজ্ঞান এবং HCT এর বিকাশ সম্পর্কে আরও জানতে, রঙ ও ডিজাইনের বিজ্ঞান পড়ুন।

হিউ, ক্রোমা এবং টোন

HCT সিস্টেম প্যারামিটারের মধ্যে থাকা রঙের আরও ব্যক্তিগতকৃত এবং নমনীয় ব্যবহারের অনুমতি দেয়। হিউ, ক্রোমা এবং টোন ব্যবহার করে এইচসিটি মডেলের রং:

• হিউ : হিউ হল বিশেষণটির সাথে সাদৃশ্যপূর্ণ যেটি একজন স্বতন্ত্র ব্যবহারকারী রঙ বর্ণনা করতে ব্যবহার করতে পারেন, উদাহরণস্বরূপ, "লাল" বা "বৈদ্যুতিক বেগুনি।" রঙের HCT মান 0-360 পর্যন্ত।
• ক্রোমা : ক্রোমা নিরপেক্ষ ধূসর থেকে পূর্ণ প্রাণবন্ততা পর্যন্ত রঙের বর্ণময়তাকে প্রতিনিধিত্ব করে। HCT কালার স্পেসে, ক্রোমার সর্বোচ্চ মান প্রায় 120।
• স্বর : স্বর হল একটি রঙের উজ্জ্বলতা বা উজ্জ্বলতা। এইচসিটি বৈসাদৃশ্য তৈরি করতে টোন ব্যবহার করে। একই টোন মান সেট করা রং নির্দিষ্ট অ্যাক্সেসিবিলিটি প্রসঙ্গের জন্য অ্যাক্সেসযোগ্য নয়। নিম্ন মান টোন গাঢ়, এবং উচ্চ মান টোন উজ্জ্বল.

রঙ সিস্টেম প্রক্রিয়া

M3 রঙ HCT মডেলের চারপাশে তৈরি করা হয়েছে সুরেলা অ্যাক্সেসযোগ্য রঙের স্কিমগুলি পেতে এবং গতিশীল রঙের বৈশিষ্ট্যগুলিকে সহায়তা করে। M3 রঙের সিস্টেমটি উৎস রঙ থেকে শুরু হয়। এই উত্স রঙটি পাঁচটি মূল রঙে অনুবাদ করা হয়েছে: প্রাথমিক, মাধ্যমিক, তৃতীয়, নিরপেক্ষ এবং নিরপেক্ষ বৈকল্পিক। এই পাঁচটি কী রঙ প্রতিটি কী রঙের জন্য টোনাল বৃদ্ধির সমন্বয়ে টোনাল প্যালেট তৈরি করে।

আপনি যদি ম্যানুয়ালি একটি কী রঙ বরাদ্দ করেন, ইনপুটের ক্রোমা এবং টোনটি নোট করুন, কারণ রঙের টোনটি রঙের ভূমিকার টোনাল মান নাও হতে পারে।

M3 কালার সিস্টেমটি ম্যাটেরিয়াল কালার ইউটিলিটিস (MCU) দ্বারা চালিত হয়, অ্যালগরিদম এবং ইউটিলিটিগুলি সমন্বিত রঙিন লাইব্রেরির একটি সেট যা আপনার অ্যাপে রঙের থিম এবং স্কিমগুলি বিকাশ করা সহজ করে তোলে।

নিচের ভিডিওটি বর্ণনা করে যে কিভাবে রঙের স্কিমগুলো উদ্ভূত হয়।

রঙের সীমাবদ্ধতা

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

পূর্ববর্তী চিত্রটি H105, H25 এবং H285 রঙের মানের জন্য তিনটি ভিন্ন টোন ম্যাপিং চার্ট দেখায়।

• চার্ট 1–রঙ 105 (হলুদ) । রঙের প্রাপ্যতা নির্দেশ করে। ক্রোমা এবং টোন একটি গ্রাফের মতো কাজ করে। হলুদ রঙের গ্রাফ বরাবর নির্দিষ্ট টোন সহ সীমিত ক্রোমা রয়েছে, হলুদ রঙের নিম্ন টোনে বিস্তৃত প্রাণবন্ততা নেই।

• চার্ট 2–রঙ 25 (লাল) । hue 105 (হলুদ) এর চেয়ে বেশি রঙিন বিকল্প দেখায়। এই টোন ম্যাপে, সর্বোচ্চ রঙিনতার বিন্দুটি নিম্ন টোন স্তরে।

• চার্ট 3–রঙ 285 (নীল) । দেখায় যে সর্বোচ্চ রঙিনতা আরও গাঢ় টোনে পাওয়া যায়। ফ্লিপসাইডে, হালকা স্বরে ক্রোমা ক্ষমতা হারিয়ে যায়।

রঙের স্কিম

একটি রঙের স্কিম হল উচ্চারণ এবং পৃষ্ঠগুলির সেট যা নির্দিষ্ট টোন থেকে প্রাপ্ত এবং রঙের ভূমিকার জন্য নির্ধারিত হয়, যা পরে UI উপাদান এবং উপাদানগুলিতে ম্যাপ করা হয়। রঙের ভূমিকাগুলি রঙের রঙের পরিবর্তে রঙের ব্যবহারকে বোঝায়। উদাহরণস্বরূপ, অন-ব্লু না হয়ে অন-প্রাথমিক।

রঙের স্কিমগুলি সুরেলা হতে, অ্যাক্সেসযোগ্য পাঠ্য নিশ্চিত করতে এবং UI উপাদান এবং পৃষ্ঠগুলিকে একে অপরের থেকে আলাদা করার জন্য ডিজাইন করা হয়েছে। রঙের ভূমিকা জোড়া (কন্টেইনার এবং অন-কন্টেইনার ভূমিকার সমন্বয়ে গঠিত) টোনাল মান রয়েছে যা অ্যাক্সেসযোগ্য বৈসাদৃশ্য প্রদান করে।

হালকা এবং অন্ধকার স্কিম তৈরি করা হয় এবং তাদের নিজস্ব নির্দিষ্ট টোন অ্যাসাইনমেন্ট আছে।

উপাদান রঙ সিস্টেম এবং কাস্টম স্কিম কাস্টমাইজেশনের জন্য একটি সূচনা পয়েন্ট হিসাবে রঙের জন্য ডিফল্ট মান প্রদান করে।

M3 কালার সিস্টেম সম্পর্কে আরও জানুন।

একটি কাস্টমাইজযোগ্য রঙের স্কিমের জন্য, Android UI কিট অন্বেষণ করুন৷

আপনার UI এ রঙ প্রয়োগ করুন

UI রঙে অ্যাকসেন্ট, শব্দার্থিক এবং পৃষ্ঠের রঙ থাকে।

• অ্যাকসেন্ট রঙগুলি মূল রঙগুলিকে বোঝায় যেগুলি সাধারণত Android ব্র্যান্ডের রঙ প্যালেটের অংশ।
• শব্দার্থগত রং (বা উপাদান 3-এর মধ্যে কাস্টম রং), নির্দিষ্ট অর্থ সহ রঙ।
• পৃষ্ঠের রঙগুলি পটভূমির রঙগুলির জন্য ব্যবহৃত যে কোনও নিরপেক্ষ প্রাপ্ত রঙকে বোঝায়।

অ্যাকসেন্ট রঙ

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

প্রতিটি উচ্চারণ রঙ (প্রাথমিক, মাধ্যমিক, এবং তৃতীয়) জোড়া, সংজ্ঞায়িত জোর এবং চাক্ষুষ অভিব্যক্তির জন্য বিভিন্ন টোনের চার থেকে আটটি সামঞ্জস্যপূর্ণ রঙের একটি গ্রুপে সরবরাহ করা হয়।

গতিশীল রঙ

অ্যাকসেন্ট রং গতিশীল উত্স থেকে সংজ্ঞায়িত করা যেতে পারে.

অ্যান্ড্রয়েড 12 (এপিআই লেভেল 31) থেকে শুরু করে, ডাইনামিক কালার সিস্টেমটিকে ব্যবহারকারীর ওয়ালপেপার বা অ্যাপ-মধ্যস্থ বিষয়বস্তু থেকে একটি উৎস রঙ বের করতে দেয়, যেমন একটি কীআর্ট সম্পদ। ডাইনামিক কালার MCU অ্যালগরিদম এবং প্রসেস ব্যবহার করে স্কিম তৈরি করে এবং সেগুলিকে সামান্য প্রচেষ্টায় বাস্তবায়ন করে। আপনার অ্যাপে গতিশীল রঙ প্রয়োগ করতে, ব্যবহারকারীদের আপনার অ্যাপে তাদের রঙের অভিজ্ঞতা ব্যক্তিগতকৃত করতে সক্ষম করুন পড়ুন।

ডায়নামিক কালার ভিজ্যুয়ালাইজ করার জন্য কোড ল্যাবটি ব্যবহার করে দেখুন ডায়নামিক কালারে হ্যান্ড-অন লুক।

স্থির

একটি স্ট্যাটিক স্কিম হল একটি স্কিম যার অপরিবর্তনীয় (বা তুলনামূলকভাবে) মান রয়েছে। একটি স্ট্যাটিক স্কিম তৈরি করার একটি সাধারণ উপায় হল ব্র্যান্ডের রঙ, ব্র্যান্ডের প্রধান রঙের প্যালেটের সাথে প্রাথমিক, মাধ্যমিক এবং তৃতীয় রঙগুলি সারিবদ্ধ করা।

এমনকি আপনি ডায়নামিক কালার ব্যবহার করলেও, ব্যবহারকারীর ডিভাইসে ডায়নামিক কালার উপলব্ধ না হলে ফলব্যাক হিসেবে একটি স্ট্যাটিক স্কিম তৈরি করার জন্য আমরা দৃঢ়ভাবে সুপারিশ করি। অন্যথায়, সিস্টেম বেসলাইন বেগুনি রঙের স্কিম ব্যবহার করে।

ম্যাটেরিয়াল থিম বিল্ডার ব্যবহার করে, আপনি একটি স্ট্যাটিক, কাস্টম থিম তৈরি করতে MCU রঙের অ্যালগরিদম প্রয়োগ করতে পারেন। এর ফলে আপনি যে রঙগুলি বেছে নিয়েছেন, কিন্তু যেগুলি M3 কালার সিস্টেম টোকেন এবং সুরেলা অ্যাক্সেসিবিলিটি নীতির সাথে সারিবদ্ধ।

একটি সম্পূর্ণ কাস্টমাইজড স্ট্যাটিক স্কিম তৈরি করা এখনও সম্ভব। এটি করার জন্য, রঙ শৈলীগুলির মধ্যে বিভিন্ন মান নির্ধারণ করুন ( color.kt বা color.xml ), অথবা Figma শৈলী বৈশিষ্ট্যগুলি আপডেট করার পরে Figma এর জন্য Material Theme Builder থেকে থিম ফাইলটি রপ্তানি করুন৷

ব্যবহার

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

টাইপের মতো, সিস্টেমটি প্রাথমিক রঙ এবং গুরুত্বপূর্ণ কল টু অ্যাকশন (CTAs) এর জন্য নির্ধারিত ভূমিকা সহ একটি শ্রেণিবিন্যাসে রঙ প্রয়োগ করে। আমরা প্রাথমিক ভূমিকা নিতে ফ্লোটিং অ্যাকশন বোতাম (এফএবি) এর মতো উপাদানগুলির সুপারিশ করি।

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

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

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

ডায়নামিক রঙের দিকে নজর দেওয়ার জন্য, উপাদানের রঙ কাস্টমাইজ করার জন্য কোড ল্যাব ব্যবহার করে দেখুন।

শব্দার্থিক রঙ

শব্দার্থিক রঙ এমন রঙ যা নির্দিষ্ট অর্থ নির্ধারণ করেছে। উদাহরণস্বরূপ, ত্রুটি একটি শব্দার্থিক রঙ।

রঙের অর্থের সাথে সামঞ্জস্যপূর্ণ হোন-যদি আপনি একটি প্যাটার্ন স্থাপন করেন, তাহলে পুরো অ্যাপ জুড়ে এটি পুনরাবৃত্তি করুন। উদাহরণস্বরূপ, যদি আপনি একটি সদস্যতা বৈশিষ্ট্য নির্দেশ করার জন্য বেগুনি স্থাপন করেন, তাহলে এই সদস্যতা বৈশিষ্ট্যের সমস্ত উদাহরণের জন্য বেগুনি ব্যবহার করুন।

নিম্নলিখিত উদাহরণে, একটি অ্যাপ একটি টেক্সট ফিল্ডে একটি ত্রুটি নির্দেশ করতে লাল ব্যবহার করে, কিন্তু অন্যটির জন্য বেগুনি- এটি একটি ফর্ম স্কিম করার সময় বিভ্রান্তির কারণ হবে৷

যদিও উপাদান রঙের স্কিম শব্দার্থিক ত্রুটি রঙ প্রদান করে, আপনার রঙের স্কিম প্রসারিত করার জন্য কাস্টম রঙের মাধ্যমে অতিরিক্ত শব্দার্থিক রং তৈরি করা হয়। কাস্টম রং সম্পর্কে আরও পড়ুন।

হারমোনাইজেশন আরও সুরেলা রঙের প্যালেট তৈরি করতে আপনার অ্যাপের মধ্যে কাস্টম রঙের সাথে গতিশীল ব্যবহারকারী-উত্পাদিত রঙ সারিবদ্ধ করার একটি উপায় প্রদান করে।

পৃষ্ঠের রং

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

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

অ্যাক্সেসযোগ্যতা এবং রঙ

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

রঙের বৈসাদৃশ্য হল ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড উপাদানগুলির উজ্জ্বলতার মধ্যে পার্থক্য, একটি অনুপাত বিন্যাসে উপস্থাপিত। এই অনুপাতের মানদণ্ডে গ্রেড দেওয়া হয়। উদাহরণস্বরূপ, একটি বোতাম এবং এর পাত্রে পাঠ্যের মধ্যে বৈসাদৃশ্য পরিমাপ করা পাঠ্যের স্পষ্টতা নির্ধারণে সহায়তা করে। রঙের বৈসাদৃশ্য নির্দেশিকা পাঠ্য এবং নন-টেক্সটে বিভক্ত, প্রতিটি তাদের নিজস্ব গ্রেডের সেট সহ। আরো বিস্তারিত জানার জন্য অ্যাক্সেসযোগ্য রং সহ ডিজাইন পড়ুন।

উপলব্ধ কর্মের জন্য রঙকে কখনই একমাত্র সামর্থ্য বা সূচক বানাবেন না। একটি উপাদান বোতাম ব্যবহার করুন, ফন্টের ওজন পরিবর্তন করুন বা এমনকি একটি আইকন আপনার ব্যবহারকারীকে জানাতে সাহায্য করুন যে তারা উপাদানটির সাথে ইন্টারঅ্যাক্ট করতে পারে।

রঙ প্রয়োগ করুন

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

কালার রোল ম্যাপিংয়ের উদাহরণের জন্য নাউ ইন অ্যান্ড্রয়েড ফিগমা নমুনা দেখুন।

কম্পোজ (বা ভিউ ব্যবহার করে color.xml ) ব্যবহার করে রঙের মান একটি রঙিন ফাইল color.kt মধ্যে সেট করা হয়। শৈলী হিসাবে সেট করা এই রঙগুলি একটি থিমের অংশ। অ্যান্ড্রয়েড মোবাইল থিমগুলির জন্য ডিজাইনে এই সম্পর্কে আরও দেখুন৷

অ্যান্ড্রয়েডে রঙের মান সেট করতে, হেক্স কোড ব্যবহার করুন, যা 6-সংখ্যার বিন্যাসে RGB প্রতিনিধিত্ব করে। অস্বচ্ছতা ক্যাপচার করতে, একটি 8-সংখ্যার কোড তৈরি করতে সামনের মানটি যুক্ত করুন।

উপাদান থিম নির্মাতা ব্যবহার করে:

আপনি ম্যাটেরিয়াল থিম বিল্ডার (MTB) ব্যবহার করে কাস্টমাইজড হালকা এবং গাঢ় রঙের স্কিম তৈরি করতে পারেন।

MTB আপনাকে গতিশীল রঙ কল্পনা করতে, মেটেরিয়াল ডিজাইন টোকেন তৈরি করতে এবং আপনার রঙের স্কিমগুলি কাস্টমাইজ করতে দেয়।

ফিগমা ইন্সপেক্টর প্যানেলের মধ্যে শৈলী বৈশিষ্ট্যগুলি আপডেট করে রঙের স্কিমটি সম্পূর্ণরূপে কাস্টমাইজ করা যেতে পারে। এই পরিবর্তিত মান রপ্তানি করা হয়.

শৈলী প্রকাশ করতে এবং অর্থ যোগাযোগ করতে রঙ ব্যবহার করুন। আপনার অ্যাপের রঙ সেট করা ব্যক্তিগতকরণের জন্য গুরুত্বপূর্ণ হতে পারে, শব্দার্থিক উদ্দেশ্য সংজ্ঞায়িত করতে এবং অবশ্যই ব্র্যান্ড পরিচয় সংজ্ঞায়িত করতে পারে।

Takeaways

• অ্যাক্সেসযোগ্যতা নিশ্চিত করতে:
  • রঙের বৈসাদৃশ্য পরীক্ষা করুন এবং অনুরূপ টোনগুলির সাথে রঙ জোড়া এড়ান।
  • বিবেচনা করুন যে লাল এবং সবুজ সাধারণ প্যাটার্ন, তবে নির্দিষ্ট ধরণের বর্ণান্ধতা সহ ব্যবহারকারীদের কাছে এগুলি অ্যাক্সেসযোগ্য নয়।
• অর্থপূর্ণভাবে রঙগুলি ব্যবহার করার অনুশীলন করুন: অ্যাপগুলি প্রাণবন্ত এবং অভিব্যক্তিপূর্ণ হতে পারে, তবে রঙের প্যালেটে লেগে থাকতে পারে। অনেকগুলি শব্দার্থিক রঙ দিয়ে আপনার স্কিম প্রসারিত করা বিভ্রান্তিকর হতে পারে, যখন অনেকগুলি আলংকারিক রঙ অপ্রতিরোধ্য হতে পারে।
• রঙের নিদর্শন থাকতে পারে, তাই প্রতিষ্ঠিত রঙের নিদর্শনগুলি পুনরাবৃত্তি করুন। আপনার অ্যাপে শব্দার্থিক রং ব্যবহার করলে, সামঞ্জস্যপূর্ণ রং ব্যবহার করুন।
• আপনার অ্যাপকে বিভিন্ন প্রেক্ষাপটে ভালোভাবে কাজ করার অনুমতি দিতে, একটি হালকা এবং গাঢ় রঙের স্কিম তৈরি করুন (এবং আদর্শভাবে কনট্রাস্ট থিম)।
• একটি হার্ডকোড মান ব্যবহার করার পরিবর্তে উপাদানটির রঙের ভূমিকা নির্দেশ করতে টোকেনগুলির সাথে রঙগুলি বরাদ্দ করুন৷
• রঙগুলি বিভিন্ন গতিশীল এবং স্থির উত্স থেকে আসতে পারে তবে একই দৃশ্যের মধ্যে অনেকগুলি মিশ্রিত করা এড়িয়ে চলুন৷
• ডায়নামিক কন্টেন্ট কালার ব্যবহার করার সময়, একাধিক কন্টেন্ট টুকরা থেকে রং টানা এড়াতে চেষ্টা করুন।

অ্যান্ড্রয়েডে রঙের স্থান

অ্যান্ড্রয়েড কীভাবে আপনার ইউআইতে রঙ প্রয়োগ করে তা সঠিকভাবে বুঝতে, এটি কোনও ডিভাইসে কীভাবে প্রদর্শিত হয় তা প্রথমে স্বীকৃতি দেওয়া গুরুত্বপূর্ণ।

কোনও ডিভাইসে কীভাবে রঙ প্রদর্শিত হয়

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

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

রঙ স্পেস সম্পর্কে

রঙিন স্থান হ'ল রঙের একটি সংগঠন যা রঙিন মডেল ব্যবহার করে। আরজিবি একটি অ্যাডিটিভ রঙের মডেল যা লাল, সবুজ এবং নীল রঙের মাধ্যমে রঙের বর্ণালী তৈরি করে, অন্যদিকে সিএমওয়াইকে, যা মুদ্রণের জন্য ব্যবহৃত হয়, এটি বিয়োগফল । এই কারণে, ইন্টারেক্টিভ ডিজাইনাররা সাধারণত রঙ চয়ন করতে আরজিবি বা অনুরূপ মডেল ব্যবহার করে।

উপাদান 3 (এম 3) এইচসিটি, একটি নতুন রঙের স্থান চালু করেছে যা এইচএসএল এর মতো অন্যান্য মডেলের তুলনায় বোধগম্যভাবে সঠিক রঙগুলি সংজ্ঞায়িত করতে হিউ, ক্রোমা এবং টোন ব্যবহার করে

এইচসিটির রঙ বিজ্ঞান এবং বিকাশ সম্পর্কে আরও জানতে, রঙ এবং ডিজাইনের বিজ্ঞানটি পড়ুন।

হিউ, ক্রোমা এবং স্বর

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

• হিউ : হিউ এমন কোনও বিশেষণটির সাথে সাদৃশ্যযুক্ত যা কোনও পৃথক ব্যবহারকারী রঙ বর্ণনা করতে ব্যবহার করতে পারে, উদাহরণস্বরূপ, "লাল" বা "বৈদ্যুতিক ভায়োলেট"। হিউ এর এইচসিটি মান 0–360 থেকে শুরু করে।
• ক্রোমা : ক্রোমা রঙের রঙিনতার প্রতিনিধিত্ব করে, নিরপেক্ষ ধূসর থেকে সম্পূর্ণ প্রাণবন্ত পর্যন্ত। এইচসিটি রঙের জায়গাতে, ক্রোমার সর্বোচ্চ মান প্রায় 120।
• টোন : টোন হ'ল একটি রঙের আলোকসজ্জা বা উজ্জ্বলতা। এইচসিটি বিপরীতে তৈরি করতে টোন ব্যবহার করে। একই টোন মানতে সেট করা রঙগুলি নির্দিষ্ট অ্যাক্সেসযোগ্যতার প্রসঙ্গে অ্যাক্সেসযোগ্য নয়। নিম্ন মানের টোনগুলি গা er ় এবং উচ্চতর মানের টোনগুলি আরও উজ্জ্বল।

রঙ সিস্টেম প্রক্রিয়া

এম 3 রঙটি সুরেলা অ্যাক্সেসযোগ্য রঙ স্কিমগুলি অর্জন করতে এইচসিটি মডেলের চারপাশে নির্মিত এবং গতিশীল রঙের বৈশিষ্ট্যগুলিকে সহায়তা করে। এম 3 রঙ সিস্টেমটি উত্স রঙ থেকে শুরু হয়। এই উত্স রঙটি পাঁচটি মূল রঙে অনুবাদ করা হয়েছে: প্রাথমিক, মাধ্যমিক, তৃতীয়, নিরপেক্ষ এবং নিরপেক্ষ বৈকল্পিক। এই পাঁচটি মূল রঙ প্রতিটি কী রঙের জন্য টোনাল ইনক্রিমেন্টের সমন্বয়ে টোনাল প্যালেট তৈরি করে।

যদি আপনি ম্যানুয়ালি কোনও মূল রঙ নির্ধারণ করেন তবে ইনপুটটির ক্রোমা এবং টোনটি নোট করুন, কারণ রঙের সুরটি রঙের ভূমিকার টোনাল মান নাও হতে পারে।

এম 3 কালার সিস্টেমটি ম্যাটেরিয়াল কালার ইউটিলিটিস (এমসিইউ) দ্বারা চালিত, অ্যালগরিদম এবং ইউটিলিটিযুক্ত রঙ গ্রন্থাগারগুলির একটি সেট যা আপনার অ্যাপ্লিকেশনটিতে রঙিন থিম এবং স্কিমগুলি বিকাশ করা আপনার পক্ষে সহজ করে তোলে।

নিম্নলিখিত ভিডিওটি বর্ণনা করে যে রঙিন স্কিমগুলি কীভাবে উত্পন্ন হয়।

রঙ সীমাবদ্ধতা

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

পূর্ববর্তী চিত্রটি এইচ 105, এইচ 25, এবং এইচ 285 হিউ মানগুলির জন্য তিনটি পৃথক টোন ম্যাপিং চার্ট দেখায়।

• চার্ট 1 - হিউ 105 (হলুদ) । রঙের প্রাপ্যতা নির্দেশ করে। ক্রোমা এবং টোন গ্রাফের মতো কাজ করে। হলুদ বর্ণের গ্রাফ বরাবর নির্দিষ্ট টোন সহ ক্রোমা সীমাবদ্ধ রয়েছে, হলুদ কম টোনগুলিতে বিস্তৃত প্রাণবন্ততা নেই।

• চার্ট 2 - হু 25 (লাল) । হিউ 105 (হলুদ) এর চেয়ে আরও ক্রোমাটিক বিকল্পগুলি দেখায়। এই টোন মানচিত্রে, সর্বোচ্চ বর্ণের বিন্দুটি নিম্ন স্বরের স্তরে।

• চার্ট 3 - হু 285 (নীল) । দেখায় যে সর্বোচ্চ রঙিনতা আরও গা er ় সুরে পাওয়া যায়। ফ্লিপসাইডে, ক্রোমা ক্ষমতা হালকা সুরে হারিয়ে যায়।

রঙের স্কিম

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

রঙিন স্কিমগুলি সুরেলা হতে, অ্যাক্সেসযোগ্য পাঠ্য নিশ্চিত করতে এবং একে অপরের থেকে ইউআই উপাদান এবং পৃষ্ঠকে আলাদা করার জন্য ডিজাইন করা হয়েছে। রঙিন ভূমিকা জোড়া (ধারক এবং অন-কনটেনারের ভূমিকা নিয়ে গঠিত) টোনাল মান রয়েছে যা অ্যাক্সেসযোগ্য বৈসাদৃশ্য সরবরাহ করে।

হালকা এবং অন্ধকার স্কিমগুলি তৈরি করা হয় এবং তাদের নিজস্ব নির্দিষ্ট টোন অ্যাসাইনমেন্ট রয়েছে।

উপাদান রঙ সিস্টেম এবং কাস্টম স্কিমগুলি কাস্টমাইজেশনের জন্য সূচনা পয়েন্ট হিসাবে রঙের জন্য ডিফল্ট মান সরবরাহ করে।

এম 3 রঙ সিস্টেম সম্পর্কে আরও জানুন।

একটি কাস্টমাইজযোগ্য রঙ স্কিমের জন্য, অ্যান্ড্রয়েড ইউআই কিটটি অন্বেষণ করুন।

আপনার ইউআইতে রঙ প্রয়োগ করুন

ইউআই রঙে অ্যাকসেন্ট, শব্দার্থক এবং পৃষ্ঠের রঙ রয়েছে।

• অ্যাকসেন্ট রঙগুলি মূল রঙগুলিকে বোঝায় যা সাধারণত অ্যান্ড্রয়েড ব্র্যান্ডের রঙ প্যালেটের অংশ।
• শব্দার্থক রঙ (বা উপাদানের 3 এর মধ্যে কাস্টম রঙ), নির্দিষ্ট অর্থ সহ রঙ।
• পৃষ্ঠের রঙগুলি পটভূমির রঙের জন্য ব্যবহৃত যে কোনও নিরপেক্ষ উত্পন্ন রঙগুলিকে বোঝায়।

অ্যাকসেন্ট রঙ

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

প্রতিটি অ্যাকসেন্ট রঙ (প্রাথমিক, মাধ্যমিক এবং তৃতীয়) জুটি, জোর সংজ্ঞা এবং ভিজ্যুয়াল এক্সপ্রেশনটির জন্য বিভিন্ন টোনগুলির চার থেকে আটটি সামঞ্জস্যপূর্ণ রঙের একটি গ্রুপে সরবরাহ করা হয়।

গতিশীল রঙ

অ্যাকসেন্ট রঙগুলি গতিশীল উত্স থেকে সংজ্ঞায়িত করা যেতে পারে।

অ্যান্ড্রয়েড 12 (এপিআই স্তর 31) থেকে শুরু করে, ডায়নামিক রঙটি সিস্টেমটিকে কোনও ব্যবহারকারীর ওয়ালপেপার বা ইন-অ্যাপ্লিকেশন সামগ্রী থেকে কীআর্ট সম্পত্তির মতো একটি উত্স রঙ বের করতে দেয়। গতিশীল রঙ এমসিইউ অ্যালগরিদম এবং প্রক্রিয়াগুলি ব্যবহার করে স্কিমগুলি তৈরি করতে এবং এগুলি সামান্য প্রচেষ্টা দিয়ে প্রয়োগ করে। আপনার অ্যাপ্লিকেশনটিতে গতিশীল রঙ প্রয়োগ করতে, ব্যবহারকারীদের আপনার অ্যাপ্লিকেশনটিতে তাদের রঙের অভিজ্ঞতা ব্যক্তিগতকৃত করতে সক্ষম করুন ।

গতিশীল রঙের দিকে হ্যান্ড-অন চেহারার জন্য গতিশীল রঙ ভিজ্যুয়ালাইজ করার জন্য কোড ল্যাবটি ব্যবহার করে দেখুন।

স্থির

একটি স্ট্যাটিক স্কিম এমন একটি স্কিম যা অপরিবর্তনীয় (বা তুলনামূলকভাবে) মান রয়েছে। স্ট্যাটিক স্কিম তৈরির একটি সাধারণ উপায় হ'ল ব্র্যান্ডের রঙের সাথে, ব্র্যান্ডের মূল রঙের প্যালেটে প্রাথমিক, মাধ্যমিক এবং তৃতীয় রঙগুলি সারিবদ্ধ করে।

এমনকি যদি আপনি গতিশীল রঙ ব্যবহার করেন তবে আমরা দৃ strongly ়ভাবে ফ্যালব্যাক হিসাবে স্ট্যাটিক স্কিম তৈরি করার পরামর্শ দিই যদি গতিশীল রঙ ব্যবহারকারীর ডিভাইসে উপলব্ধ না হয়। অন্যথায়, সিস্টেমটি বেসলাইন বেগুনি রঙের স্কিম ব্যবহার করে।

উপাদান থিম বিল্ডার ব্যবহার করে, আপনি স্ট্যাটিক, কাস্টম থিম উত্পন্ন করতে এমসিইউ রঙের অ্যালগরিদম প্রয়োগ করতে পারেন। আপনি যে রঙগুলি বেছে নিয়েছেন তার ফলস্বরূপ, তবে যা এম 3 রঙিন সিস্টেমের টোকেন এবং সুরেলা অ্যাক্সেসযোগ্যতার নীতিগুলির সাথে সংযুক্ত রয়েছে।

সম্পূর্ণ কাস্টমাইজড স্ট্যাটিক স্কিম তৈরি করা এখনও সম্ভব। এটি করার জন্য, রঙ শৈলীর মধ্যে বিভিন্ন মান নির্ধারণ করুন ( color.kt বা color.xml ), বা ফিগমা স্টাইলের বৈশিষ্ট্যগুলি আপডেট করার পরে ফিগমার জন্য উপাদান থিম বিল্ডার থেকে থিম ফাইলটি রফতানি করুন।

ব্যবহার

উপাদান উপাদানগুলির মধ্যে রঙিন ভূমিকা রয়েছে তবে আপনি আপনার ইউআই এবং কাস্টম উপাদানগুলিতে রঙিন টোকেন ব্যবহার করতে পারেন। মানব চোখ বিশেষত প্রাণবন্ত রঙগুলিতে আঁকা যে বিবেচনায় নিয়ে সমস্ত অ্যাকসেন্ট রঙগুলি মনমুগ্ধভাবে ব্যবহার করুন।

প্রকারের মতো, সিস্টেমটি একটি শ্রেণিবিন্যাসে রঙ প্রয়োগ করে, প্রাথমিক রঙ এবং এর সম্পর্কিত ভূমিকাগুলি ক্রুশিয়াল কল টু অ্যাকশন (সিটিএ) এর সাথে সম্পর্কিত ভূমিকা পালন করে। আমরা প্রাথমিক ভূমিকা নিতে ভাসমান অ্যাকশন বোতাম (এফএবি) এর মতো উপাদানগুলির প্রস্তাব দিই।

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

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

আরও ভাল ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে, আপনার অ্যাপের ভিজ্যুয়াল হায়ারার্কিতে বৃহত্তর বিশিষ্টতার ক্রিয়াগুলি বোঝাতে আরও প্রাণবন্ত প্রাথমিক রঙগুলি ব্যবহার করুন। নিম্নলিখিত চিত্রটিতে, প্রথম চিত্রের ফ্যাবটিতে নেভিগেশন হিসাবে একই টোন এবং ক্রোমা সহ একটি নিঃশব্দ রঙ রয়েছে, এটি মিশ্রিত করে The দ্বিতীয় চিত্রটি এমন একটি ফ্যাব দেখায় যা একটি প্রাণবন্ত প্রাথমিক রঙের সাথে নিজের দিকে আরও মনোযোগ দেয়।

গতিশীল রঙের দিকে নজর দেওয়ার জন্য, উপাদান রঙ কাস্টমাইজ করার জন্য কোড ল্যাবটি ব্যবহার করে দেখুন।

শব্দার্থিক রঙ

শব্দার্থক রঙ এমন রঙ যা নির্দিষ্ট অর্থ বরাদ্দ করেছে। উদাহরণস্বরূপ, ত্রুটি একটি শব্দার্থক রঙ।

রঙের অর্থের সাথে সামঞ্জস্য থাকুন - আপনি যদি কোনও প্যাটার্ন স্থাপন করেন তবে অ্যাপ্লিকেশন জুড়ে এটি পুনরাবৃত্তি করুন। উদাহরণস্বরূপ, আপনি যদি সদস্যপদ বৈশিষ্ট্যটি নির্দেশ করতে বেগুনি প্রতিষ্ঠা করে থাকেন তবে এই সদস্যপদ বৈশিষ্ট্যের সমস্ত দৃষ্টান্তের জন্য বেগুনি ব্যবহার করুন।

নিম্নলিখিত উদাহরণে, একটি অ্যাপ্লিকেশন একটি পাঠ্য ক্ষেত্রে একটি ত্রুটি নির্দেশ করতে লাল ব্যবহার করে তবে অন্যটির জন্য বেগুনি - এটি কোনও ফর্ম স্কিম করার সময় বিভ্রান্তির কারণ হতে পারে।

যদিও উপাদান রঙের স্কিমটি শব্দার্থক ত্রুটির রঙ সরবরাহ করে তবে আপনার রঙের স্কিমটি প্রসারিত করতে কাস্টম রঙের মাধ্যমে অতিরিক্ত শব্দার্থক রঙ তৈরি করা হয়। কাস্টম রঙ সম্পর্কে আরও পড়ুন।

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

পৃষ্ঠের রং

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

এম 3 টোনাল পৃষ্ঠগুলির ধারণাটি প্রবর্তন করেছিল, যার অর্থ সমস্ত রঙ টোনাল প্যালেটগুলি থেকে প্রাপ্ত। টোনগুলি অ্যাক্সেসযোগ্যতার সহায়তার জন্য গভীরতা এবং আরও বিপরীত উভয়ই তৈরি করে। পৃষ্ঠের ভূমিকা সম্পর্কে আরও তথ্যের জন্য, পৃষ্ঠের ভূমিকাগুলি এম 3 গাইডেন্স দেখুন।

অ্যাক্সেসযোগ্যতা এবং রঙ

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

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

কোনও উপলভ্য ক্রিয়াকলাপের জন্য রঙটিকে কখনই একমাত্র সামর্থ্য বা সূচক তৈরি করবেন না। আপনার ব্যবহারকারীকে অবহিত করতে সহায়তা করার জন্য একটি উপাদান বোতাম, ফন্টের ওজন পরিবর্তন বা এমনকি একটি আইকন ব্যবহার করুন যে তারা উপাদানটির সাথে যোগাযোগ করতে পারে।

রঙ বাস্তবায়ন

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

রঙিন ভূমিকা ম্যাপিংয়ের উদাহরণগুলির জন্য এখন অ্যান্ড্রয়েড ফিগমা নমুনায় দেখুন।

রঙের color.xml একটি রঙের ফাইলের মধ্যে সেট করা হয় color.kt শৈলী হিসাবে সেট করা এই রঙগুলি একটি থিমের অংশ। অ্যান্ড্রয়েড মোবাইল থিমগুলির জন্য ডিজাইনে এ সম্পর্কে আরও দেখুন।

অ্যান্ড্রয়েডে রঙের মান নির্ধারণ করতে, হেক্স কোড ব্যবহার করুন, যা 6-অঙ্কের বিন্যাসে আরজিবিকে উপস্থাপন করে। অস্বচ্ছতা ক্যাপচার করতে, একটি 8-অঙ্কের কোড তৈরি করতে সম্মুখের সাথে মানটি যুক্ত করুন।

উপাদান থিম নির্মাতা ব্যবহার করে:

আপনি উপাদান থিম বিল্ডার (এমটিবি) ব্যবহার করে কাস্টমাইজড হালকা এবং গা dark ় রঙের স্কিমগুলি তৈরি করতে পারেন।

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

ফিগমা ইন্সপেক্টর প্যানেলের মধ্যে স্টাইলের বৈশিষ্ট্যগুলি আপডেট করে রঙিন স্কিমটি সম্পূর্ণরূপে কাস্টমাইজ করা যেতে পারে। এই পরিবর্তিত মানগুলি রফতানি করা হয়।