একটি রঙকে সম্পূর্ণ UI প্যালেটে রূপান্তরিত করুন
একটি পছন্দের রঙ দিয়ে শুরু করুন এবং ১२টি ধাপে একটি ব্যবহারিক ইন্টারফেস প্যালেট তৈরি করুন, যার মধ্যে রয়েছে ভূমিকা, নিরপেক্ষ রঙ, বৈপরীত্য, অবস্থা, ডার্ক মোড এবং পরীক্ষা।
একটি পছন্দের রঙ একটি ডিজাইনের সূচনা করতে পারে, তবে এটি নিজে থেকে একটি সম্পূর্ণ করতে পারে না। একটি ব্যবহারযোগ্য ইন্টারফেসেরও পটভূমি, পৃষ্ঠ, পঠনযোগ্য পাঠ্য, সীমানা, মিথস্ক্রিয়া অবস্থা, প্রতিক্রিয়া রঙ এবং অ্যাক্সেসযোগ্য বৈপরীত্য প্রয়োজন। এই ব্যবহারিক কর্মপ্রবাহ আপনাকে দেখায় কীভাবে একটি একক রঙকে একটি সম্পূর্ণ UI সিস্টেমে রূপান্তর করতে হয় যা একটি রঙ প্যালেট জেনারেটরের সাহায্যে।
একটি ভাল দেখতে প্যালেট কেন স্বয়ংক্রিয়ভাবে একটি ভাল UI প্যালেট নয়
প্যালেট জেনারেটর অন্বেষণের জন্য চমৎকার। তারা দ্রুত এমন সংমিশ্রণ দেখাতে পারে যা ম্যানুয়ালি আবিষ্কার করতে অনেক বেশি সময় লাগবে। তবে পাঁচটি আকর্ষণীয় স্ট্র্যাচ স্বয়ংক্রিয়ভাবে পাঁচটি ব্যবহারযোগ্য ইন্টারফেস রঙে পরিণত হয় না। একটি ডিজাইন সিস্টেমের শ্রেণিবিন্যাস এবং উদ্দেশ্য প্রয়োজন। আপনাকে জানতে হবে কোন রঙ পৃষ্ঠার পটভূমিতে থাকে, কোনটি একটি ক্রিয়া প্রতিনিধিত্ব করে, কোনটি পাঠ্য বহন করে এবং কোনটি একটি সতর্কতা যোগাযোগ করে।
বিনামূল্যে মি.জেনা রঙ প্যালেট জেনারেটর পাঁচ-রঙের সংমিশ্রণ তৈরি করে, আপনি যে রঙ রাখতে চান তা লক করে এবং আপনাকে উজ্জ্বলতা, স্যাচুরেশন এবং উষ্ণতা সামঞ্জস্য করতে দেয়। সেই বৈশিষ্ট্যগুলি আবিষ্কারের জন্য উপযোগী করে তোলে, তবে ডিজাইনারকে এখনও জেনারেট করা রঙগুলিকে একটি কাঠামোবদ্ধ সিস্টেমে পরিণত করতে হবে।
যদি আপনার তাৎক্ষণিক লক্ষ্য ইন্টারফেস ডিজাইনের পরিবর্তে ব্র্যান্ড পরিচয় হয়, তবে আমাদের আগের গাইড পড়ুন কীভাবে একটি ব্র্যান্ড রঙ প্যালেট তৈরি করতে হয়। আপনি পর্যালোচনাও করতে চাইতে পারেন একটি শক্তিশালী অনলাইন ব্যক্তিগত ব্র্যান্ড কীভাবে তৈরি করতে হয় আপনার রঙ কী যোগাযোগ করা উচিত তা সিদ্ধান্ত নেওয়ার আগে।
এই গাইডে, আমরা একটি পছন্দের রঙ দিয়ে শুরু করব এবং এটিকে ওয়েবসাইট, ড্যাশবোর্ড, মোবাইল অ্যাপ্লিকেশন এবং ডিজিটাল পণ্যের জন্য একটি ব্যবহারিক প্যালেটে বিকাশ করব। লক্ষ্য যতটা সম্ভব সুন্দর রঙ সংগ্রহ করা নয়। লক্ষ্য একটি ছোট, পূর্বাভাসযোগ্য সিস্টেম তৈরি করা যা মানুষকে একটি ইন্টারফেস বুঝতে এবং ব্যবহার করতে সাহায্য করে।
१. রঙ নির্বাচন করার আগে ইন্টারফেস সংজ্ঞায়িত করুন
রঙ চাকা নয়, পণ্য দিয়ে শুরু করুন। একটি পোর্টফোলিও, ব্যাংকিং ড্যাশবোর্ড, রেসিপি অ্যাপ্লিকেশন এবং শিশুদের শেখার প্ল্যাটফর্মের সম্পূর্ণ ভিন্ন স্তরের শক্তি, বিশ্বাস, সংযম এবং ভিজ্যুয়াল বৈপরীত্য প্রয়োজন হতে পারে। লেখ আপনি কী ডিজাইন করছেন, কে এটি ব্যবহার করবে এবং ব্যবহারকারীদের কী অর্জন করতে হবে।
এরপরে, ইন্টারফেসে প্রধান উপাদানগুলি তালিকাভুক্ত করুন। এর মধ্যে একটি নেভিগেশন বার, কার্ড, ফর্ম, বোতাম, বিজ্ঞপ্তি, মূল্য নির্ধারণের টেবিল এবং একটি ফুটার থাকতে পারে। এই তালিকা প্রকাশ করে আপনার কত কার্যকরী রঙের ভূমিকা প্রয়োজন। বেশিরভাগ ইন্টারফেসের চেয়ে কম ভূমিকা প্রয়োজন যা অভিজ্ঞ ডিজাইনাররা প্রত্যাশা করে।
পণ্যের ভিজ্যুয়াল চরিত্রের জন্য তিনটি বর্ণনামূলক লক্ষ্য তৈরি করুন। উদাহরণে রয়েছে "শান্ত, নির্ভরযোগ্য এবং সরাসরি" বা "সৃজনশীল, প্রাণবন্ত এবং বন্ধুত্বপূর্ণ।" এই শব্দগুলি জেনারেট করা প্যালেটগুলি মূল্যায়নের জন্য একটি ফিল্টার হয়ে ওঠে। একটি রঙ নিজের দিক থেকে আকর্ষণীয় হতে পারে তবে আপনি যে অভিজ্ঞতা তৈরি করছেন তার জন্য ভুল হতে পারে।
এই পর্যায়ে, নীল সর্বদা বিশ্বাস মানে বা লাল সর্বদা জরুরীতা মানে এমন সিদ্ধান্ত নেবেন না। রঙের সমিতি প্রেক্ষাপট, সংস্কৃতি, চারপাশের রঙ এবং পূর্ববর্তী ব্যবহারকারীর অভিজ্ঞতার উপর নির্ভর করে। প্রথমে পণ্যের ব্যবহারিক চাহিদা সংজ্ঞায়িত করুন, এবং তারপর মূল্যায়ন করুন কীভাবে রঙ সেগুলিকে সমর্থন করে।
२. আপনার পছন্দের রঙকে একটি স্থিতিশীল ভিত্তিতে রূপান্তরিত করুন
আপনার সূচনা বিন্দু একটি লোগো, ফটোগ্রাফ, শারীরিক পণ্য বা ব্যক্তিগত পছন্দ থেকে একটি রঙ হতে পারে। সেই রঙটিকে HEX, RGB বা HSL এর মতো একটি নির্ভুল ডিজিটাল মানে রূপান্তরিত করুন। "গভীর বেগুনি" ব্যাখ্যার জন্য খোলা, কিন্তু #4F46E5 এর মতো একটি মান সামঞ্জস্যপূর্ণভাবে পুনরুৎপাদিত হতে পারে।
যদি আপনার কাছে একটি সূচনা রঙ না থাকে, ব্যবহার করুন র্যান্ডম রঙ জেনারেটর সম্ভাবনা অন্বেষণ করতে। র্যান্ডমলি জেনারেট করা রঙগুলিকে চূড়ান্ত সিদ্ধান্তের পরিবর্তে প্রম্পট হিসাবে বিবেচনা করুন। বেশ কয়েকটি বিকল্প তৈরি করুন, প্রতিশ্রুতিশীল বিকল্পগুলি সংরক্ষণ করুন এবং সেগুলিকে ধাপ এক থেকে সংজ্ঞায়িত তিনটি পণ্য গুণের বিপরীতে তুলনা করুন।
যদি আপনার অনুপ্রেরণা একটি লোগো, ফটোগ্রাফ বা মুড বোর্ড থেকে আসে, তবে ভিজ্যুয়ালটি আপলোড করুন চিত্র থেকে প্যালেট সরঞ্জাম। এটি আপনাকে প্রভাবশালী রঙগুলি সনাক্ত করতে এবং তাদের কোডগুলি অনুলিপি করতে সাহায্য করতে পারে। একটি রঙ বেছে নিন যা প্রকল্পটিকে প্রতিনিধিত্ব করে, তবে যাচাই করুন যে এটি এখনও মূল চিত্রের বাইরে কাজ করে।
উষ্ণ ফটোগ্রাফির সাথে ঘিরে থাকা একটি রঙ একটি সাদা ইন্টারফেসে রাখা হলে ভিন্ন অনুভব করতে পারে। আপনার প্রার্থী পৃষ্ঠকে হালকা এবং অন্ধকার উভয় পটভূমিতে পরীক্ষা করুন। যদি এটি কর্দম হয়ে যায়, অত্যধিক উজ্জ্বল হয় বা আলাদা করা কঠিন হয়, এটিকে আপনার ভিত্তি রঙ হিসাবে ঘোষণা করার আগে এর উজ্জ্বলতা বা স্যাচুরেশন সামঞ্জস্য করুন।
३. ভিত্তি রঙকে একটি স্পষ্ট অর্থপূর্ণ ভূমিকা দিন
একটি ভিত্তি রঙের একটি কাজ প্রয়োজন। অনেক পণ্যে, প্রাথমিক রঙ গুরুত্বপূর্ণ ক্রিয়াগুলি উপস্থাপন করে যেমন একটি ফর্ম জমা দেওয়া, একটি ট্রায়াল শুরু করা বা একটি পরিবর্তন সংরক্ষণ করা। অন্যান্য ইন্টারফেসগুলিতে, একই রঙ মূলত লিঙ্কের জন্য ব্যবহার করা যেতে পারে, নির্বাচিত নেভিগেশন আইটেম বা সাজসজ্জামূলক ব্র্যান্ডিং।
সিদ্ধান্ত নিন ব্যবহারকারীরা রঙ কোথায় দেখার প্রত্যাশা করে। যদি এটির মানে "ইন্টারেক্টিভ," সাধারণ শিরোনাম এবং সজ্জামূলক আকারে এটি প্রয়োগ করা এড়িয়ে চলুন। ব্যবহারকারীরা দ্রুত ভিজ্যুয়াল প্যাটার্ন শিখে। যখন একই রঙ কখনও কখনও "এখানে ক্লিক করুন" মানে এবং কখনও কখনও কিছু মানে না, ইন্টারফেসটি কম পূর্বাভাসযোগ্য হয়ে ওঠে।
ব্র্যান্ড স্বীকৃতি ইন্টারফেস আচরণ থেকে আলাদা করুন। একটি শক্তিশালী ব্র্যান্ড রঙের সম্পূর্ণ পর্দা জুড়ে প্রয়োজন হয় না। এটি একটি প্রাথমিক বোতাম, লোগো বিবরণ, সক্রিয় ট্যাব এবং ফোকাস সূচকে নির্বাচনীভাবে ব্যবহার করা হলে স্মরণীয় থাকতে পারে। সংযম প্রায়শই রঙকে আরও স্বীকৃত করে তোলে কারণ প্রতিটি চেহারা অর্থ বহন করে।
४. উপযোগী টিন্ট এবং শেড তৈরি করুন
একটি রঙের মূল্য খুব কমই যথেষ্ট। বোতামগুলির হোভার এবং চাপ অবস্থার প্রয়োজন, নির্বাচিত এলাকা একটি ফ্যাকাশে পটভূমি প্রয়োজন হতে পারে, এবং অন্ধকার মোড একই হিউ একটি হালকা সংস্করণ প্রয়োজন হতে পারে। অত্যন্ত হালকা টিন্ট থেকে গভীর ছায় পর্যন্ত একটি স্কেল তৈরি করুন।
রঙ প্যালেট জেনারেটর ব্যবহার করুন একক রঙের সমন্বয় অন্বেষণ করতে এবং উজ্জ্বলতা এবং স্যাচুরেশন সামঞ্জস্য করতে। ভিত্তি রঙ লক করুন যাতে এটি স্থিতিশীল থাকে যখন আপনি চারপাশের রঙগুলি পুনরায় তৈরি করেন। শুধুমাত্র জেনারেট মূল্য রাখবেন না কারণ এটি প্যালেটে উপস্থিত হয়। এটি রাখুন শুধুমাত্র যদি এটি একটি নির্দিষ্ট ভূমিকা পালন করে।
আপনি ব্যবহার করতে পারেন রঙ মিশ্রণকারী দুটি HEX রঙের মধ্যে মধ্যবর্তী মূল্য তৈরি করতে। ভিত্তি রঙকে একটি হালকা পৃষ্ঠ রঙের সাথে মিশ্রিত করা সূক্ষ্ম নির্বাচিত পটভূমি পরামর্শ দিতে পারে। এটিকে একটি অন্ধকার এন্ডপয়েন্টের সাথে মিশ্রিত করা আপনাকে হোভার এবং চাপ অবস্থা অন্বেষণ করতে সাহায্য করতে পারে।
এমন স্কেল এড়ান যেখানে প্রতিবেশী রঙগুলি প্রায় আলাদা করা যায় না। প্রতিটি ধরে রাখা পদক্ষেপ প্রসঙ্গে একটি দৃশ্যমান পার্থক্য তৈরি করা উচিত। একটি সংক্ষিপ্ত, উপযোগী স্কেল একটি দশ-রঙ স্কেল থেকে ভাল যার মূল্য কোন স্বতন্ত্র কাজ পালন করে না।
५. একটি নিরপেক্ষ ভিত্তি তৈরি করুন
বেশিরভাগ একটি কার্যকরী ইন্টারফেস সাধারণত নিরপেক্ষ। পৃষ্ঠার পটভূমি, পৃষ্ঠ, সীমানা, শরীরের পাঠ্য, নিঃশব্দ লেবেল এবং নিষ্ক্রিয় নিয়ন্ত্রণগুলি এমন রঙের প্রয়োজন যা প্রাথমিক ক্রিয়ার সাথে প্রতিযোগিতা করে না। এই কারণেই একটি UI প্যালেট শুধুমাত্র উজ্জ্বল ব্র্যান্ড রঙ নিয়ে গঠিত হতে পারে না।
একটি পৃষ্ঠার পটভূমি এবং একটি পৃষ্ঠ রঙ দিয়ে শুরু করুন। পৃষ্ঠটি পটভূমি থেকে আলাদা করতে হবে কিন্তু একটি প্যাচওয়ার্ক প্রভাব তৈরি করবে না। পরবর্তী, একটি শক্তিশালী পাঠ্য রঙ, একটি নরম মাধ্যমিক পাঠ্য রঙ এবং একটি সূক্ষ্ম সীমানা রঙ যোগ করুন।
নিরপেক্ষগুলি নিখুঁত ধূসর হতে হবে না। ব্র্যান্ড হিউর একটি ছোট পরিমাণ একটি সিস্টেমকে আরও ঐক্যবদ্ধ অনুভব করতে পারে। উদাহরণস্বরূপ, একটি শক্তিশালী প্রাথমিক রঙ সামান্য শক্তিশালী ধূসরের সাথে ভাল কাজ করতে পারে। পরামর্শটি সূক্ষ্ম রাখুন যাতে বিষয়বস্তু পড়তে স্বাচ্ছন্দ্য থাকে।
নিঃশব্দ পাঠ্য বা সীমানা তৈরির একমাত্র পদ্ধতি হিসাবে হ্রাসকৃত অপ্যাসিটি ব্যবহার করবেন না। স্বচ্ছ রঙগুলি বিভিন্ন পটভূমিতে রাখা হলে পরিবর্তন করে। যখন সামঞ্জস্য গুরুত্বপূর্ণ, স্পষ্ট মূল্য সংজ্ঞায়িত করুন এবং সেগুলি প্রতিটি পৃষ্ঠায় পরীক্ষা করুন যেখানে তারা উপস্থিত হবে।
६. একটি নিয়ন্ত্রিত মাধ্যমিক রঙ বেছে নিন
একটি মাধ্যমিক রঙ চার্ট, চিত্র, প্রচারমূলক এলাকা বা নির্বাচিত বিভাগ সমর্থন করতে পারে। এটি প্রাথমিক ক্রিয়ার সাথে প্রতিযোগিতা না করে ভিজ্যুয়াল ভাষা প্রসারিত করা উচিত। যদি প্রাথমিক এবং মাধ্যমিক রঙগুলি সমানভাবে শক্তিশালী এবং সমানভাবে প্রায়শই প্রদর্শিত হয়, ব্যবহারকারীরা কোন উপাদানটি মনোযোগ যোগ্য তা বুঝতে সংগ্রাম করতে পারে।
আপনি একটি শান্ত সম্পর্ক চান যখন আনুষাঙ্গিক সংমিশ্রণ অন্বেষণ করুন। পরিপূরক বা বিভাজন-পরিপূরক সংমিশ্রণ শক্তিশালী পৃথকীকরণ তৈরি করতে পারে, তবে তাদের আরও সংযম প্রয়োজন। এডোব এর রঙ তত্ত্ব গাইড রঙ চক্র এবং সাধারণ সামঞ্জস্য মডেলগুলির একটি উপযোগী সংক্ষিপ্ত বিবরণ প্রদান করে।
বিচ্ছিন্ন স্ট্র্যাচ তুলনা করে একটি উপাদানে পরীক্ষা করে মাধ্যমিক রঙ বেছে নিন। এটিকে একটি ছোট চার্ট, ট্যাগ, চিত্র বা তথ্যপূর্ণ কার্ডে রাখুন। তারপর এটি প্রাথমিক বোতামের পাশে দেখুন। যদি মাধ্যমিক উপাদান প্রথমে মনোযোগ আকর্ষণ করে, এর স্যাচুরেশন হ্রাস করুন, এটি হালকা করুন বা এটি কতবার উপস্থিত হয় সীমিত করুন।
७. ইন্টারফেস ভূমিকা রঙ নির্ধারণ করুন
এটি সেই বিন্দু যেখানে রঙের একটি সংগ্রহ একটি ডিজাইন সিস্টেম হয়ে ওঠে। "নীল," "বেগুনি" এবং "ধূসর দুই" এর মতো রঙ-ভিত্তিক নাম ভূমিকা-ভিত্তিক নামগুলি দিয়ে প্রতিস্থাপন করুন। অর্থপূর্ণ নামগুলি আপনাকে পরে সমস্ত উপাদানের নামকরণ করতে বাধ্য না করে মূল্যগুলি পরিবর্তন করতে দেয়।
| রঙের ভূমিকা | উদ্দেশ্য | সাধারণ ব্যবহার |
|---|---|---|
background |
সর্বনিম্ন পৃষ্ঠার স্তর | শরীর এবং অ্যাপ্লিকেশন ক্যানভাস |
surface |
উন্নত বিষয়বস্তু এলাকা | কার্ড, মেনু এবং ডায়ালগ |
text-primary |
প্রধান পঠনযোগ্য বিষয়বস্তু | শিরোনাম এবং শরীরের অনুলিপি |
text-muted |
কম জোর তথ্য | ইঙ্গিত, মেটাডেটা এবং সময়কাল |
primary |
প্রধান ইন্টারেক্টিভ জোর | বোতাম, লিঙ্ক এবং সক্রিয় নিয়ন্ত্রণ |
on-primary |
প্রাথমিক উপর রাখা বিষয়বস্তু | বোতাম লেবেল এবং আইকন |
border |
সম্পর্কিত অঞ্চল আলাদা করে | ইনপুট, কার্ড এবং বিভাজক |
success |
ইতিবাচক ফলাফল | নিশ্চিতকরণ এবং সমাপ্তি |
warning |
সম্ভাব্য ঝুঁকি | সতর্কতা এবং অপেক্ষমান রাজ্য |
error |
ব্যর্থতা বা প্রয়োজনীয় সংশোধন | অবৈধ ক্ষেত্র এবং ব্যর্থ কর্ম |
প্রথমে ভূমিকা তালিকা সংক্ষিপ্ত রাখুন। শুধুমাত্র যখন পুনরাবৃত্ত ডিজাইন সমস্যা একটি বিদ্যমান ভূমিকা দ্বারা সমাধান করা যায় না তখনই অন্য টোকেন যোগ করুন। এটি ইন্টারফেসে কয়েক ডজন প্রায় অভিন্ন মূল্য প্রবেশ করা প্রতিরোধ করে।
८. হোভার, ফোকাস এবং নিষ্ক্রিয় অবস্থা তৈরি করুন
ইন্টারফেস মানুষের প্রতি প্রতিক্রিয়াশীল। একটি বোতাম নিষ্ক্রিয়, হভার করা, ফোকাস করা, চাপ দেওয়া, লোডিং বা নিষ্ক্রিয় হতে পারে। যদি সমস্ত এই অবস্থা অভিন্ন দেখায়, ব্যবহারকারীরা সামান্য নিশ্চিতকরণ পায় যে ইন্টারফেস তাদের ক্রিয়া লক্ষ্য করেছে।
উপাদানের ডিফল্ট রঙের নিয়ন্ত্রিত পরিবর্তন হিসাবে রাজ্য রঙ তৈরি করুন। একটি হোভার অবস্থা সামান্য অন্ধকার বা হালকা হতে পারে, যখন একটি চাপ অবস্থা শক্তিশালী ভিজ্যুয়াল পরিবর্তন তৈরি করতে পারে। ফোকাস সূচক উপাদান এবং এর চারপাশের পটভূমি উভয়ের বিপরীতে দৃশ্যমান থাকা আবশ্যক।
রঙ একা রাজ্য যোগাযোগ করবেন না। রঙকে অন্য সংকেতের সাথে একত্রিত করুন, যেমন একটি আইকন, আন্ডারলাইন, রূপরেখা, বার্তা বা আকারের পরিবর্তন। উদাহরণস্বরূপ, একটি অবৈধ ফর্ম ক্ষেত্র একটি ত্রুটি-রঙযুক্ত সীমানা একসাথে একটি ত্রুটি আইকন এবং ব্যাখ্যামূলক পাঠ্য ব্যবহার করতে পারে।
নিষ্ক্রিয় নিয়ন্ত্রণগুলি বিশেষ যত্ন প্রাপ্য। তারা উপলব্ধ দেখতে হবে অপাঠ্য না হয়ে। অত্যন্ত ফ্যাকাশে পাঠ্য একটি অ্যাক্সেসযোগ্যতা সমস্যা তৈরি করতে পারে, যখন একটি নিষ্ক্রিয় বোতাম যা সক্রিয় দেখায় বিভ্রান্তি তৈরি করতে পারে। শুধুমাত্র এর পূর্ণ রঙ বিচার করার পরিবর্তে সম্পূর্ণ উপাদান পরীক্ষা করুন।
९. রঙের বৈপরীত্য এবং অ্যাক্সেসযোগ্যতা পরীক্ষা করুন
ভিজ্যুয়াল সামঞ্জস্য পঠনযোগ্য সামগ্রী গ্যারান্টি দেয় না। প্রতিটি গুরুত্বপূর্ণ অগ্রভাগ এবং পটভূমি জোড়া বৈপরীত্যের জন্য পরীক্ষা করা আবশ্যক। W3C ওয়েব সামগ্রী অ্যাক্সেসযোগ্যতা নির্দেশিকা २.२ সাফল্য মানদণ্ড १.४.३ এর অধীনে সাধারণ পাঠ্যের জন্য ४.५:१ এবং বড় পাঠ্যের জন্য३:१ সর্বনিম্ন বৈপরীত্য অনুপাত নির্দিষ্ট করুন।
| পরীক্ষা করতে সংমিশ্রণ | কেন এটি গুরুত্বপূর্ণ |
|---|---|
| পৃষ্ঠার পটভূমিতে শরীরের পাঠ্য | প্রায় প্রতিটি পড়া কাজকে প্রভাবিত করে |
| পৃষ্ঠে নিঃশব্দ পাঠ্য | প্রায়ই খুব ফ্যাকাশে হলে ব্যর্থ হয় |
| প্রাথমিক রঙে বোতাম লেবেল | প্রতিটি অবস্থায় পঠনযোগ্য থাকা আবশ্যক |
| শরীরের সামগ্রীর মধ্যে লিঙ্ক | চিহ্নিতযোগ্য এবং পঠনযোগ্য হতে হবে |
| ফর্ম সীমানা এবং ফোকাস সূচক | ব্যবহারকারীদের ইন্টারেক্টিভ নিয়ন্ত্রণ খুঁজে পেতে সাহায্য করুন |
| ত্রুটি পাঠ্য এবং যাচাইকরণ আইকন | একটি কাজ সম্পূর্ণ করার জন্য প্রয়োজনীয় তথ্য বহন করুন |
একটি সম্পূর্ণ ইন্টারফেস তৈরির পরে অ্যাক্সেসযোগ্যতা পরীক্ষা প্যালেট তৈরির সময় ঘটা উচিত। যখন একটি জোড়া ব্যর্থ হয়, হিউতে র্যান্ডম পরিবর্তন করার আগে উজ্জ্বলতা সামঞ্জস্য করুন। প্রতিটি রাজ্য স্বতন্ত্রভাবে হোভার, চাপ, নির্বাচিত এবং নিষ্ক্রিয় সংস্করণ পুনরায় পরীক্ষা করুন কারণ প্রতিটি অবস্থা একটি ভিন্ন অগ্রভাগ-পটভূমি সম্পর্ক তৈরি করে।
१०. হালকা এবং অন্ধকার মোড প্যালেট প্রস্তুত করুন
অন্ধকার মোড কালো এবং সাদা উল্টিয়ে তৈরি করা হয় না। রঙগুলি অন্ধকার পৃষ্ঠে বিভিন্নভাবে আচরণ করে, উজ্জ্বল স্যাচুরেটেড রঙ কম্পন করতে পারে, ছায়া কম উপযোগী হয়ে ওঠে এবং খাঁটি সাদা পাঠ্য কঠোর অনুভব করতে পারে। প্রতিটি অর্থপূর্ণ ভূমিকার অর্থ সংরক্ষণ করার সময় শ্রেণিবিন্যাস পুনর্নির্মাণ করুন।
থিমে টোকেন নাম সামঞ্জস্যপূর্ণ রাখুন। background এ নির্ধারিত মূল্য পরিবর্তন করতে পারে, কিন্তু এর উদ্দেশ্য একই থাকে। একই নীতি পৃষ্ঠ, পাঠ্য, সীমানা এবং প্রাথমিক ক্রিয়ায় প্রযোজ্য। এটি থিম-নির্দিষ্ট যুক্তি ধারণ না করেই থিম স্যুইচ করতে উপাদানগুলি দেয়।
আপল এর রঙের জন্য মানব ইন্টারফেস নির্দেশিকা বিভিন্ন চেহারা বিবেচনা করার এবং যোগাযোগের জন্য রঙ সামঞ্জস্যপূর্ণভাবে ব্যবহার করার সুপারিশ করুন। উভয় থিম প্রসঙ্গে পরীক্ষা করুন এবং নিশ্চিত করুন গুরুত্বপূর্ণ তথ্য রঙ একা দ্বারা প্রকাশ করা হয় না।
সম্ভব হলে উজ্জ্বল এবং মৃদু পরিবেশে পর্দা পরীক্ষা করুন। একটি অন্ধকার প্যালেট যা একটি অন্ধকার কক্ষে কমনীয় দেখায় দিনের আলোতে বিচ্ছেদ অভাব হতে পারে। চিত্র, চার্ট, চিত্র এবং লোগো পরিদর্শন করুন, এই সম্পদগুলি একটি সহজ পটভূমি পরিবর্তনের পরিবর্তে থিম-সচেতন সংস্করণ প্রয়োজন হতে পারে।
११. বাস্তব উপাদানগুলির ভিতরে প্যালেট পরীক্ষা করুন
একটি প্যালেট স্ট্র্যাচের একটি সারি হিসাবে অনুমোদিত হওয়া উচিত নয়। একটি ছোট পরীক্ষা পৃষ্ঠা তৈরি করুন একটি শিরোনাম, অনুচ্ছেদ, লিঙ্ক, প্রাথমিক বোতাম, মাধ্যমিক বোতাম, ফর্ম ক্ষেত্র, কার্ড, নেভিগেশন আইটেম এবং সতর্কতা ধারণ করে। এটি প্যালেট পূর্বরূপে অদৃশ্য সমস্যা প্রকাশ করে।
বিভিন্ন দৈর্ঘ্যের সামগ্রী পরীক্ষা করুন। একটি সংক্ষিপ্ত ইংরেজি লেবেল আরামদায়কভাবে মানানসই হতে পারে যখন অনুবাদকৃত সংস্করণ দুটি লাইনে মোড়ানো যায়। প্যালেট মোবাইল এবং ডেস্কটপ আকারে, কীবোর্ড ফোকাস দৃশ্যমান এবং বাস্তববাদী ত্রুটি বার্তা প্রদর্শন করা হয় সাথে পরীক্ষা করুন।
বিষয়বস্তু-ভারী লেআউট সংযম পরীক্ষার জন্য বিশেষভাবে উপযোগী। উদাহরণস্বরূপ, বিনামূল্যে সারাংশ বিল্ডার একটি ইন্টারফেসের ধরণ প্রতিনিধিত্ব করে যেখানে শ্রেণিবিন্যাস এবং পঠনযোগ্যতা সাজসজ্জার চেয়ে আরও বেশি গুরুত্বপূর্ণ। জিজ্ঞাসা করুন আপনার প্যালেট ব্যবহারকারীদের অংশ স্ক্যান করতে সাহায্য করে বা তথ্য থেকে বিচলিত করে।
এমন রঙ সরান যা কোনো বাস্তব সমস্যা সমাধান করে না। যদি দুটি মূল্য ভিজ্যুয়ালি আলাদা করা যায় না, একটি রাখুন। যদি একটি মাধ্যমিক রঙ বারবার প্রধান ক্রিয়ার সাথে প্রতিযোগিতা করে, এটি সংরক্ষণ করুন চিত্র বা ইন্টারফেস প্যালেট থেকে এটি সম্পূর্ণভাবে সরান।
१२. সিস্টেম নথিভুক্ত, রপ্তানি এবং বজায় রাখুন
একবার প্যালেট বাস্তব উপাদানগুলিতে কাজ করে, এটি নথি। প্রতিটি রঙের মূল্য, অর্থপূর্ণ নাম, অনুমতিপ্রাপ্ত ব্যবহার এবং গুরুত্বপূর্ণ সীমাবদ্ধতা রেকর্ড করুন। পরীক্ষিত পাঠ্য সংমিশ্রণ এবং রঙ কীভাবে ব্যবহার করতে হবে তা তার উদাহরণ অন্তর্ভুক্ত করুন।
রঙ প্যালেট জেনারেটর CSS অনুলিপি করতে দেয়, যা একটি উপযোগী সূচনা বিন্দু প্রদান করে। তাদের ভূমিকা অনুযায়ী রপ্তানি করা ভেরিয়েবলের নাম পরিবর্তন করুন যাতে ডেভেলপারদের প্রতিটি HEX মূল্য কী মানে তা মনে রাখতে না হয়।
:root {\n --color-background: #ffffff;\n --color-surface: #f7f7fa;\n --color-text-primary: #17171c;\n --color-text-muted: #5f606b;\n --color-primary: #4f46e5;\n --color-on-primary: #ffffff;\n --color-border: #d9dae2;\n --color-success: #16794b;\n --color-warning: #9a6700;\n --color-error: #b42318;\n}আপনি একটি PNG হিসাবে একটি ভিজ্যুয়াল প্যালেট বোর্ড তৈরি করলে, PNG থেকে PDF রূপান্তরকারী এটিকে ভাগ বা সংরক্ষণের জন্য সুবিধাজনক PDF তে পরিণত করতে পারে। যাইহোক, শুধুমাত্র একটি ভিজ্যুয়াল নথির উপর নির্ভর করবেন না। চূড়ান্ত টোকেনগুলি প্রকল্পের ডিজাইন সিস্টেম বা কোডবেসে সংরক্ষণ করুন যাতে মূল্যগুলি সামঞ্জস্যপূর্ণ থাকে।
প্যালেটকে একটি বজায় রাখা সিস্টেম হিসাবে বিবেচনা করুন। যখন একটি মূল্য পরিবর্তন করে, প্রতিটি ভূমিকা এবং অবস্থা পরীক্ষা করুন যা এটি ব্যবহার করে। পরিবর্তন কেন করা হয়েছিল তা রেকর্ড করুন এবং প্রায় অভিন্ন প্রতিস্থাপনগুলি জমা করতে দেওয়ার পরিবর্তে পুরনো মূল্যগুলি সরান।
চূড়ান্ত UI প্যালেট চেকলিস্ট
- পণ্য এবং দর্শক রঙ নির্বাচন করার আগে সংজ্ঞায়িত করা হয়েছিল।
- ভিত্তি রঙের একটি স্পষ্ট অর্থপূর্ণ উদ্দেশ্য রয়েছে।
- প্রতিটি ধরে রাখা টিন্ট বা শেড একটি নির্দিষ্ট ভূমিকা পালন করে।
- পটভূমি, পৃষ্ঠ, পাঠ্য এবং সীমানা নিরপেক্ষ অন্তর্ভুক্ত করা হয়।
- মাধ্যমিক রঙ প্রাথমিক ক্রিয়ার সাথে প্রতিযোগিতা করে না।
- রঙ চেহারা-ভিত্তিক নামের পরিবর্তে অর্থপূর্ণ নাম ব্যবহার করুন।
- হোভার, ফোকাস, চাপ, নির্বাচিত এবং নিষ্ক্রিয় রাজ্য পরীক্ষা করা হয়েছিল।
- গুরুত্বপূর্ণ তথ্য কখনও রঙ একা দ্বারা যোগাযোগ করা হয় না।
- পাঠ্য এবং পটভূমি সংমিশ্রণ উপযুক্ত বৈপরীত্য লক্ষ্য পূরণ করুন।
- হালকা এবং অন্ধকার মোড একই অর্থপূর্ণ শ্রেণিবিন্যাস সংরক্ষণ করুন।
- প্যালেট বাস্তব উপাদান এবং অনুবাদকৃত লেআউট মধ্যে পরীক্ষা করা হয়েছিল।
- টোকেন, ব্যবহার নিয়ম এবং সীমাবদ্ধতা নথিভুক্ত করা হয়েছিল।
চূড়ান্ত চিন্তা, একটি প্যালেট মূল্যবান হয়ে ওঠে যখন প্রতিটি রঙের একটি কাজ থাকে
একটি পছন্দের রঙ দিয়ে শুরু করা সম্পূর্ণরূপে যুক্তিসঙ্গত। ভুল সেই রঙ বা স্বয়ংক্রিয়ভাবে জেনারেট করা স্ট্র্যাচের গ্রুপ প্রত্যাশা করছে প্রতিটি ইন্টারফেস সমস্যা সমাধান করবে। একটি সফল UI প্যালেট সৃজনশীল অন্বেষণ সমন্বয় করে ইচ্ছাকৃত নিয়োগ, বৈপরীত্য পরীক্ষা এবং উপাদান-স্তরের যাচাইকরণের সাথে।
সম্ভাবনা আবিষ্কার করতে একটি জেনারেটর ব্যবহার করুন, প্রতিশ্রুতিশীল রঙ লক করুন এবং উপযোগী পরিবর্তন তৈরি করুন। তারপর ফলাফল একটি ছোট অর্থপূর্ণ সিস্টেমে হ্রাস করুন। প্রতিটি রঙের একটি সংজ্ঞায়িত কাজ থাকলে, আপনার ইন্টারফেস বোঝা সহজ হয়ে ওঠে, বজায় রাখা সহজ হয় এবং পৃষ্ঠা, থিম এবং ডিভাইস জুড়ে আরও সামঞ্জস্যপূর্ণ।
রঙ প্যালেট জেনারেটর খোলেন, আপনার সূচনা রঙ প্রবেश করুন এবং আপনার প্রথম পাঁচ-রঙ সংমিশ্রণ তৈরি করুন। শুধুমাত্র রঙগুলি একসাথে দেখতে ভাল কিনা তা জিজ্ঞাসা করার পরিবর্তে, আরও মূল্যবান প্রশ্ন জিজ্ঞাসা করুন, প্রতিটি রঙ কী নির্দিষ্ট কাজ পালন করবে?