1. ভূমিকা
শেষ আপডেট: ০৫/১১/২২
ম্যাটেরিয়াল ৩ কালার সিস্টেমটি ডাইনামিক কালার অ্যালগরিদম ব্যবহার করে অ্যাক্সেসযোগ্য রঙের স্কিম তৈরি করে, কিন্তু রঙের জন্য অ্যাক্সেসযোগ্যতার অর্থ কী? ম্যাটেরিয়াল ডিজাইনের নতুন কালার সিস্টেম কীভাবে একটি অ্যাক্সেসযোগ্য রঙের স্কিম তৈরি করে এবং কোন সরঞ্জামগুলি সাহায্য করে?
তুমি কি শিখবে
- রঙ কীভাবে অ্যাক্সেসযোগ্যতা এবং বৈসাদৃশ্য নির্দেশিকাগুলির সাথে সম্পর্কিত।
- টুলিং কীভাবে একটি সহজলভ্য রঙের স্কিম তৈরি করতে, সম্পাদনা করতে এবং বৈপরীত্য পরীক্ষা করতে সাহায্য করতে পারে।
পূর্বশর্ত
এই ল্যাবের জন্য আমরা কিছু মৌলিক নকশা ধারণার উপর ভিত্তি করে তৈরি করব।
- বর্তমান অ্যান্ড্রয়েড রঙের স্কিম এবং ভূমিকা সম্পর্কে জ্ঞান।
- ফিগমার জ্ঞান।
তোমার যা লাগবে
- ফিগমা অ্যাকাউন্ট
- ফিগমা ডিজাইনল্যাব ফাইল
- ফিগমা প্লাগইন ম্যাটেরিয়াল থিম বিল্ডার
2. শুরু করুন
সেটআপ
শুরু করার জন্য আপনাকে Designlab Figma ফাইলটি অ্যাক্সেস করতে হবে। ল্যাবের জন্য আপনার যা কিছু প্রয়োজন তা Figma ফাইলে আছে। আপনি ফাইলটি ডাউনলোড করে আমদানি করতে পারেন, অথবা Figma কমিউনিটি থেকে এটি ডুপ্লিকেট করতে পারেন।
প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।
ফিগমা কমিউনিটি থেকে ডুপ্লিকেট
Designing with accessible colors ফাইলে যান, অথবা Figma Community- এর মধ্যে Designing with accessible colors অনুসন্ধান করুন। আপনার ফাইলগুলিতে ফাইলটি অনুলিপি করতে উপরের ডানদিকের কোণায় Duplicate- এ ক্লিক করুন।
ফাইল লেআউট
ফাইলটি যখন দেখবেন, লক্ষ্য করবেন যে ফাইলটি স্বয়ংসম্পূর্ণ, একটি ভূমিকা দিয়ে শুরু হচ্ছে। প্রতিটি বিভাগকে আর্টবোর্ডের একটি সারিতে ভাগ করা হয়েছে যা একে অপরের সাথে সংযুক্ত, বিভাগের জন্য কিছু মূল ধারণা সহ, তারপরে অনুশীলন করা হবে। বিভাগ এবং অনুশীলনগুলি একে অপরের উপর ভিত্তি করে তৈরি এবং ক্রমানুসারে সম্পন্ন করা উচিত।
এই কোডল্যাব আপনাকে সেই ধারণাগুলি এবং অনুশীলনগুলি আরও বিশদভাবে পরিচালনা করবে। নতুন ম্যাটেরিয়াল ইউ বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে কোডল্যাবের সাথে পড়ুন!
ইন্ট্রো আর্টবোর্ড থেকে শুরু করে, এমন কিছু বোতাম আছে যা আর্টবোর্ডগুলিকে ক্রমানুসারে লিঙ্ক করে। লিঙ্কটি অ্যাক্সেস করতে, বোতামটিতে ক্লিক করুন।
ফিগমা প্লাগইন ইনস্টল করুন
এই কোডল্যাবটি ডায়নামিক কালার স্কিম এবং টোকেন তৈরি করতে একটি নতুন ফিগমা প্লাগইনের উপর ব্যাপকভাবে নির্ভর করে। ফিগমা কমিউনিটি পৃষ্ঠা থেকে সরাসরি ফিগমা প্লাগইনটি ইনস্টল করুন অথবা ফিগমা কমিউনিটিতে "ম্যাটেরিয়াল থিম বিল্ডার" অনুসন্ধান করুন।
৩. রঙ এবং অ্যাক্সেসযোগ্যতা
সকলের জন্য ডিজাইন করার একমাত্র উপায় হল অ্যাক্সেসিবিলিটি, যাতে আপনার তৈরি পণ্যগুলি সর্বাধিক সম্ভাব্য দর্শকদের জন্য অন্তর্ভুক্ত থাকে।
"আমি কি পর্দায় রঙ দেখতে পাচ্ছি?" রঙের নকশা করার সময় প্রথমেই বিবেচনা করা উচিত। মানুষ তাদের দৃষ্টিশক্তির উপর নির্ভর করে বিভিন্ন উপায়ে রঙ দেখে।
বর্ণান্ধতা বলতে বোঝায় রঙের সংমিশ্রণ পরীক্ষা করা যাতে UI উপাদানগুলি একসাথে মিশে না যায়।
যদিও অস্বচ্ছতা এবং ওজন কোনও রঙের আক্ষরিক রঙ নাও হতে পারে, তবুও রঙটি কীভাবে উপলব্ধি করা হয় তার উপর তাদের একটি শক্তিশালী দৃশ্যমান প্রভাব রয়েছে।
কম অস্বচ্ছতা ব্যবহার করলে রঙ হালকা হয়, যা লেখাকে অস্পষ্ট করে তুলতে পারে। উদাহরণস্বরূপ, যারা অদূরদর্শী, তাদের জন্য ৩০% অস্বচ্ছতায় সেট করা লেখা যুক্তিসঙ্গত দূরত্বে পড়তে সমস্যা হবে।
অস্বচ্ছতা সাবধানতার সাথে ব্যবহার করুন এবং কখনও প্রস্তাবিত নির্দেশিকাগুলির অধীনে ব্যবহার করবেন না।
ফন্টের ওজনও একই রকম প্রভাব ফেলতে পারে, কারণ গাঢ় ব্যাকগ্রাউন্ডে পাতলা ফন্টের ওজন বেশি থাকে। মুদ্রণে, খুব পাতলা ফন্ট ব্যবহার করলে কালি "ছিটকে" যেতে পারে, যা ক্লাস্ট্রোফোবিক টেক্সট তৈরি করে। আমাদের চোখ স্ক্রিনেও এই প্রভাব তৈরি করে, স্থান পূরণ করার চেষ্টা করে।
গাঢ় পটভূমিতে থিন টাইপ একটি ক্লাস্ট্রোফোবিক প্রভাব তৈরি করে।
স্পষ্টতা বনাম পঠনযোগ্যতা। এই ল্যাব জুড়ে, আমরা লেখার স্পষ্টতা উল্লেখ করব। স্পষ্টতা পরিমাপ করে যে এটি দেখতে কতটা সহজ, আর পাঠযোগ্যতা পরিমাপ করে যে এটি বোঝা কতটা সহজ।
৪. রঙের বৈসাদৃশ্য
ডিজাইনার এবং ডেভেলপারদের একটি সুসংগত বিশেষজ্ঞ-চালিত চেকলিস্ট দেওয়ার জন্য অ্যাক্সেসিবিলিটি নির্দেশিকা বিদ্যমান যাতে আমরা অন্তর্ভুক্তিমূলক পণ্য তৈরির ক্ষেত্রে সর্বোত্তম অনুশীলনগুলি অনুসরণ করছি তা নিশ্চিত করতে পারি। WCAG হল স্বাভাবিক মান এবং এই ল্যাবটি যা উল্লেখ করে।
রঙের বৈসাদৃশ্য হল অগ্রভাগ এবং পটভূমির উপাদানগুলির উজ্জ্বলতার মধ্যে পার্থক্য, যা একটি অনুপাত বিন্যাসে উপস্থাপিত হয়। এই অনুপাতের মানদণ্ডে গ্রেড দেওয়া হয়। ধরুন, একটি বোতামে থাকা টেক্সট এবং এর কন্টেইনারের মধ্যে বৈসাদৃশ্য পরিমাপ করলে, টেক্সটটি স্পষ্ট হবে কিনা তা নির্ধারণ করতে সাহায্য করতে পারে।
ব্যর্থ রঙের বৈপরীত্য সহ উদাহরণ।
রঙের বৈপরীত্য নির্দেশিকাগুলি টেক্সট এবং নন-টেক্সট-এ বিভক্ত, প্রতিটির নিজস্ব গ্রেড রয়েছে।
টেক্সট
এএ | AAA (এএএ) | |
বড় লেখা | ৩:১ | ৪.৫:১ |
সাধারণ টেক্সট (বডি) | ৪.৫:১ | ৭:১ |
টেক্সটবিহীন
এএ | |
নন-টেক্সট (গ্রাফিক উপাদান) | ৩:১ |
আসুন কিছু কন্ট্রাস্ট পরীক্ষা করে দেখি কিভাবে ম্যানুয়ালি এটি ঠিক করা যায়।
- ফিগমাতে, UI উপাদানগুলিতে রঙগুলি খুঁজুন। বড় লেখা (#C0BEC5) দিয়ে শুরু করে, এটি (#F5F5FF) এর ব্যাকগ্রাউন্ড রঙের উপর অবস্থিত। একটি অনলাইন কনট্রাস্ট চেকার ব্যবহার করে, এই রঙগুলি ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ডে প্রবেশ করালে দেখা যাবে যে এটি সমস্ত রেটিং ব্যর্থ করে।
- ব্যাকগ্রাউন্ড রঙের জন্য লেখাটি খুব উজ্জ্বল। অনলাইন কন্ট্রাস্ট চেকারে, কালার পিকারের সাহায্যে ফোরগ্রাউন্ডের রঙটি আরও গাঢ় রঙে সামঞ্জস্য করুন যতক্ষণ না এটি AAA পাস করে।
- ফিগমায় ফিরে এসে, বড় লেখায় নতুন পাসিং রঙটি প্রয়োগ করুন।
- বডি কপি এবং বোতামের জন্য একই প্রক্রিয়া অনুসরণ করুন, প্রতিটির জন্য টেক্সটের রঙ এবং ব্যাকগ্রাউন্ডের রঙ উভয়ই পরীক্ষা করে দেখুন।
- , আইকনগুলিতে একই প্রক্রিয়া প্রয়োগ করতে গ্রাফিক্যাল অবজেক্টস এবং ইউজার ইন্টারফেস কম্পোনেন্টের অধীনে ফলাফলটি ব্যবহার করুন**.**
- প্রতিটি এলিমেন্টের জন্য ফিগমায় নতুন রঙ আনুন। এখন সব এলিমেন্টের কন্ট্রাস্ট রেটিং পাস করা উচিত!
পাসিং কালার কন্ট্রাস্ট সহ উদাহরণ।
এটা সম্ভবত একটি দীর্ঘ প্রক্রিয়া বলে মনে হয়েছিল, এবং ফলাফলগুলি হয়তো কম সুরেলা রঙের প্যালেট তৈরি করেছে। এখানেই টুলিং সাহায্য করতে পারে!
৫. উজ্জ্বলতা দিয়ে তৈরি
ম্যাটেরিয়াল ডিজাইনের জন্য নতুন গতিশীল রঙ ব্যবস্থাটি রঙের পরিবর্তে লুমিন্যান্স ব্যবহার করে তৈরি করা হয়েছে। অর্থাৎ যদি রঙ এবং ক্রোমা অপসারণ করা হয়, তাহলে আমরা শেডের মাধ্যমে বৈসাদৃশ্য দেখতে সক্ষম হব।
যখন একটি রঙ বের করা হয়, তখন এর ফলে ৫টি স্থানান্তরিত কী রঙ তৈরি হয় যা থেকে টোনাল প্যালেট তৈরি হয়। একটি টোনাল প্যালেটে তেরোটি টোন থাকে, যার মধ্যে সাদা এবং কালো অন্তর্ভুক্ত থাকে। ১০০ এর টোন মান আলোর সর্বোচ্চ ধারণার সমতুল্য, এবং এর ফলে সাদা রঙ পাওয়া যায়। ০ থেকে ১০০ এর মধ্যে প্রতিটি টোন মান রঙে উপস্থিত আলোর পরিমাণ প্রকাশ করে।
যেকোনো রঙের স্কিমকে ডিফল্টভাবে অ্যাক্সেসযোগ্য করে তোলার জন্য টোনাল প্যালেটের সিস্টেমটি কেন্দ্রীয় ভূমিকা পালন করে।
হেক্স ভ্যালু বা হিউয়ের পরিবর্তে টোনালিটির উপর ভিত্তি করে রঙের সমন্বয়, যেকোনো রঙের আউটপুট অ্যাক্সেসযোগ্য করে তোলার অন্যতম মূল ব্যবস্থা। গতিশীল রঙ ব্যবহারকারী পণ্যগুলি প্রয়োজনীয়তা পূরণ করবে কারণ ব্যবহারকারী যে অ্যালগরিদমিক সমন্বয়গুলি অনুভব করতে পারে তা অ্যাক্সেসিবিলিটি মান পূরণ করার জন্য ডিজাইন করা হয়েছে।
একই রকম উজ্জ্বলতা সম্পন্ন উপাদানগুলির স্পষ্টতার জন্য উপযুক্ত বৈসাদৃশ্য থাকে না, অন্যদিকে ভিন্ন উজ্জ্বলতা সম্পন্ন উপাদানগুলি আরও স্পষ্টভাবে চিহ্নিত করা যায়।
ম্যাটেরিয়াল ইউ-এর গতিশীল রঙ অপ্রত্যাশিত প্রেক্ষাপটে কাজ করার জন্য তৈরি। বিভিন্ন দেখার প্রেক্ষাপটে বৈসাদৃশ্য অনুপাত পরিচালনা করার জন্য, আলোকসজ্জার স্তর হল মূল বৈশিষ্ট্য যা পণ্য দল প্রতিটি নির্দিষ্ট রঙের সংমিশ্রণ পরীক্ষা না করেও রঙগুলিকে সফলভাবে একত্রিত করতে দেয়।
৬. একটি অ্যাক্সেসযোগ্য থিম তৈরি করুন
থিম বিল্ডার ফিগমা স্টাইল হিসেবে ম্যাটেরিয়াল ডিজাইন টোকেন তৈরি করে, যা আপনাকে গতিশীল রঙ কল্পনা করতে এবং একটি কাস্টম থিম তৈরি করতে দেয়। রঙ স্কিমে অ্যাক্সেসযোগ্য রঙ তৈরি করা নিশ্চিত করার জন্য ম্যাটেরিয়াল 3 কালার সিস্টেম অনুসরণ করে এটি করা হয়।
- প্লাগইন মোডালে , কাস্টম ক্লিক করুন। এটি থিমটিকে একটি কাস্টম থিমে স্যুইচ করে। ম্যাটেরিয়াল-থিমটি ইতিমধ্যেই তৈরি করা হয়েছে, তবে আপনি চাইলে একটি নতুন থিমও তৈরি করতে পারেন। আরও জানতে ভিজ্যুয়ালাইজিং ডাইনামিক কালার দেখুন।
- এরপর, একটি প্রাইমারি কী রঙ সেট করুন। প্রাইমারিটি আপনার প্রধান ব্র্যান্ডের রঙ হতে পারে, অথবা সর্বাধিক ব্যবহৃত প্রাইমারি অ্যাকসেন্ট রঙও হতে পারে। কালার পিকার খুলতে প্রাইমারি লেবেলযুক্ত রঙে ক্লিক করুন এবং একটি রঙ বেছে নিন। ডাইনামিক সেটিংয়ে সোর্স রঙের মতোই সোর্স রঙের জন্য প্রাথমিক রঙ ব্যবহার করা হয়।
MTB তে রঙ যোগ করুন।
- বাকি মূল রঙগুলি প্রাথমিক রঙের উপর ভিত্তি করে তৈরি করা হয়। এর অর্থ হল, যদি আপনার প্রয়োজন না হয় তবে অতিরিক্ত রঙ যোগ করার দরকার নেই। ঐচ্ছিকভাবে, একটি গৌণ এবং তৃতীয় রঙ যোগ করুন।
- রঙের স্কিম্যাটিক ইনপুট রঙগুলি থেকে ব্যাখ্যা করা মূল রঙগুলি, তৈরি টোনাল প্যালেটগুলি এবং রঙের ভূমিকা সহ ফলাফলযুক্ত রঙের স্কিমগুলি দেখায়। হালকা এবং গাঢ় উভয় স্কিমই উপলব্ধ!
- ল্যাবটি রঙের স্কিম প্রয়োগ করার জন্য একটি উদাহরণ UI প্রদান করেছে। অ্যাপ UI উপাদানটি নির্বাচিত হওয়ার সাথে সাথে, প্লাগইনের মধ্যে swap এ ক্লিক করুন।
সংযুক্ত মকআপ সহ রঙের স্কিম।
এই অনুশীলনগুলির জন্য ম্যাটেরিয়াল থিম বিল্ডার ইতিমধ্যেই ফিগমা ফাইলে প্রয়োজনীয় টোকেন তৈরি করেছে।
৭. ম্যাটেরিয়াল থিম বিল্ডারের সাথে কন্ট্রাস্ট পরীক্ষা করুন
অসাধারণ, কিন্তু আমরা বুঝতে পারি যে আপনাকে এই স্টাইলগুলির কিছু ম্যানুয়ালি বিভিন্ন রঙের সাথে আপডেট করতে হবে। এই সিদ্ধান্তগুলি নিতে সাহায্য করার জন্য ম্যাটেরিয়াল থিম বিল্ডারে কোর স্কিমের রঙের জন্য বিল্ট-ইন কনট্রাস্ট চেকিং অন্তর্ভুক্ত রয়েছে।
- যেহেতু টোকেনগুলি স্টাইল হিসেবে তৈরি করা হয়, তাই আমরা জেনারেট করা রঙের মানও সেট করতে পারি। ফিগমা স্টাইলের মধ্যে, বর্তমান থিমের প্রাথমিক রঙে টগল করুন এবং ডানদিকে সম্পাদনা স্টাইল আইকনটি নির্বাচন করুন।
- বৈশিষ্ট্যগুলিতে প্রাথমিক রঙ আপডেট করুন। এটি রঙের আউটপুট এবং অ্যাপ UI-তে প্রতিফলিত হয়। রঙের অ্যালগরিদম এই রঙটি তৈরি করেনি, তাই আমরা অ্যাক্সেসযোগ্যতার গ্যারান্টি দিতে পারি না।
- প্লাগইন মেনুতে, চেক কনট্রাস্ট ক্লিক করুন, এবং তারপর প্রাইমারীর জন্য এডিট স্টাইল মডেলটি পুনরায় খুলুন। এটি কনট্রাস্ট পরীক্ষা করে এবং কনট্রাস্ট রেটিং দেখায়।
ফিগমা স্টাইলের সংলাপে বৈপরীত্য।
৮. অভিনন্দন
অসাধারণ! অ্যাক্সেসিবিলিটি আপনার প্রক্রিয়ার একটি গুরুত্বপূর্ণ অংশ হওয়া উচিত এবং ম্যাটেরিয়াল ডিজাইন এবং ম্যাটেরিয়াল থিম বিল্ডারের সাহায্যে এটি আরও সহজ।
যদি আপনার কোন প্রশ্ন থাকে, তাহলে টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় আমাদের জিজ্ঞাসা করতে দ্বিধা করবেন না।
আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ আমাদের সাথেই থাকুন।