গুগল গত সেপ্টেম্বরেই সর্বশেষ অ্যান্ড্রয়েড ১০ রিলিজ করেছে, এবং যদিও এটি শুধুমাত্র সামান্য সংখ্যক প্রিমিয়াম ফোনে উপলব্ধ, অনেক ফোন প্রস্তুতকারক নিকট ভবিষ্যতে তাদের সাম্প্রতিক কিছু ফোনে অ্যান্ড্রয়েড ১০ রোল আউট করার আশা করা হচ্ছে।
সামান্য পাঠ্য: গ্রাফিক্স ডিজাইনের জন্য সেরা কম্পিউটার
অ্যান্ড্রয়েড ১০ কিছু আপডেট এবং কুল ফিচার নিয়ে এল, যেমন সিস্টেম-ওয়াইড ডার্ক মোড, কিন্তু সত্যিকারের UI আপডেট খুব কম। গুগল ম্যাটেরিয়াল ডিজাইন ধরে রেখেছে কারণ এটি খুব ভালো কাজ করে, তাই এই গাইড পুরনো অ্যান্ড্রয়েড ভার্সনগুলোর (ওরিয়ো, পাই, ইত্যাদি) জন্যও প্রযোজ্য।
ম্যাটেরিয়াল ডিজাইন জন্য UI এলিমেন্ট ডিজাইন করার পদ্ধতি জানা অনেক কাজে সাহায্য করে, অ্যাপ ডেভেলপমেন্ট থেকে শুরু করে কাস্টম থিম থিম স্টোরে (যেমন স্যামসাং থিম স্টোর) এক্সেপ্ট হওয়া পর্যন্ত।
অ্যাপুয়ালসে এই অন্যান্য টপিকও পড়তে পারেন, যা এই টপিকের সাথে খুব প্রাসঙ্গিক অতিরিক্ত তথ্য দেবে:
- আপনার অ্যান্ড্রয়েড অ্যাপে ডার্ক থিম কিভাবে অন্তর্ভুক্ত করবেন
- ভিজ্যুয়াল স্টুডিও ২০১৭-এ অ্যান্ড্রয়েড অ্যাপ ডেভেলপমেন্ট কিভাবে শুরু করবেন
- অ্যান্ড্রয়েড ওপেন সোর্স প্রজেক্ট থেকে কাস্টম ROM বিল্ড করা | পর্ব ২
- অ্যান্ড্রয়েড সিস্টেম UI ম্যানুয়ালি থিম করা (অ্যান্ড্রয়েড ৯/১০ এর জন্য কিছু ধাপ পুরনো হতে পারে, কিন্তু সামগ্রিক তথ্যটি এখনও খুব উপকারী।)
ম্যাটেরিয়াল ডিজাইন সংক্ষিপ্ত পর্যালোচনা
ম্যাটেরিয়াল ডিজাইন কিছু গুরুত্বপূর্ণ জিনিসের চারদিকে ঘুরে। কালার প্যালেট, রেসপনসিভ গ্রিড লে আউট, এবং অ্যান্ড্রয়েড সিস্টেম UI ভালোভাবে জানা, যদি আপনি থিম ডিজাইন করেন। অ্যাপ ডেভেলপ করার জন্য আপনাকে উপরের সবকিছু জানার পাশাপাশি অ্যান্ড্রয়েড রানটাইম পারমিশন এবং রিকোয়েস্ট জানতে হয়, যদি আপনার অ্যাপ ব্যবহারকারীর স্টোরেজ ফোল্ডার, ক্যামেরা ইত্যাদি এক্সেস করে।
অফিসিয়াল অ্যান্ড্রয়েড ডেভেলপার পেজটি অ্যাপ ডেভেলপারদের জন্য অ্যান্ড্রয়েড ১০-এ গোপনীয়তা এবং পারমিশন পরিবর্তন সম্পর্কে গভীরে আলোচনা করেছে। কিন্তু অধিকাংশ ক্ষেত্রে, আমরা এই আর্টিকেলে থিমিং -এ ফোকাস করব, এক्चুয়াল অ্যাপ ডেভেলপমেন্টে নয়।
কালার প্যালেট
ম্যাটেরিয়াল ডিজাইন কালার প্যালেটের জন্য, গুগল একটি "দুই রঙের" সিস্টেম পছন্দ করে ভেরিয়েন্টসহ:
যেমন এই ছবিতে। আপনার প্রাইমারি রঙ হবে বেগুনি, সেকেন্ডারি রঙ সিয়ান। এবং আপনার UI-এর অন্যান্য এলিমেন্টের জন্য আপনি বেগুনি এবং সিয়ানের শেড ভেরিয়েন্ট ব্যবহার করবেন, যাতে সব কিছু একসাথে মিশে যায়।
এই ম্যাটেরিয়াল ডিজাইন এডিটর একটি খুব উপকারী টুল যা আপনাকে কালার ভেরিয়েশন তৈরি করতে সাহায্য করে। আপনি ক্লে (Clay) এর মতো পেশাদার UI/UX ডিজাইন এজেন্সি বা ২০১৯ সালের সেরা ওয়েব ডিজাইন কোম্পানির তালিকা থেকে অনুপ্রেরণা নেওয়া পারেন।
রেসপনসিভ গ্রিড লে আউট
রেসপনসিভ গ্রিড লে আউট বোঝার মানে হল পিক্সেল ডেন্সিটি এবং স্বয়ংক্রিয় স্ক্রিন অ্যাডাপ্টেশন কীভাবে কাজ করে সেটা বোঝা। অধিকাংশ ক্ষেত্রে, গড় অ্যান্ড্রয়েড ফোন DPI ৩০০ থেকে ৪৮০ DPI-এর মধ্যে থাকে।
এটি ধরে, ৩০০ DPI স্ক্রিন সাধারণত ৪ কলাম পর্যন্ত প্রদর্শন করতে পারে:
যেখানে ৬০০ DPI স্ক্রিন ৮ কলাম পর্যন্ত প্রদর্শন করতে পারে।
প্রতিটি কলামের মাঝপথে "গাটার" থাকে, মূলত প্রতিটি কলামকে আলাদা করার এলাকা। তাই ৩৬০dp মোবাইলে, প্রতিটি গাটার প্রায় ১৬dp হবে।
স্ক্রিন DPI বোঝা
UI ডিজাইন করার সময়, চাই সিস্টেম UI হোক বা আপনার অ্যাপের UI, আপনাকে বিভিন্ন ফোন সাইজের বিভিন্ন পিক্সেল ডেন্সিটি ধরে রাখতে হবে। নিচে সবচেয়ে সাধারণ স্ক্রিন রেজোলিউশন এবং পিক্সেল ডেন্সিটির চার্ট দেওয়া হলো:
নियम অনুযায়ী, যখন আপনি একটি "গ্লোবাল" থিম বা অ্যাপ ডিজাইন করছেন, এবং একক ডিভাইসের জন্য থিম তৈরি না করে, আপনাকে সবচেয়ে কম ডেন্সিটিতে শুরু করা উচিত। কারণ আপনি যদি ১x-এ ডিজাইন শুরু করেন, আপনি পিক্সেলে মেজারমেন্ট নিতে পারেন, এবং মানগুলো DP-এ একই থাকবে।
যদি আপনি ৩.৫x-এ ডিজাইন করেন, আপনাকে সব মান ৩.৫ দিয়ে ভাগ করতে হবে অন্য ডেন্সিটিতে অ্যাডাপ্ট করার জন্য, এবং তারপর এটা একাধিক DP মান ক্যালকুলেট করার ঝামেলা হয়ে যায়।
অ্যান্ড্রয়েড ১০ UI/UX ডিজাইনের জন্য অতিরিক্ত টিপস
যদি থিম কম্পোনেন্টের জন্য কাস্টম কালার দরকার হয় (রেডিও, বাটন, চেকবক্স ইত্যাদি), তবে আপনাকে ড্রয়েবল ব্যবহার করা উচিত নहीं বিভিন্ন স্টেট (চেকড, ক্লিকড, ইত্যাদি) দেখানোর জন্য। কারণ ড্রয়েবল ব্যবহার করলে আপনি নেটিভ ম্যাটেরিয়াল ডিজাইন ইফেক্ট (রিপল-এর মত) হারিয়ে যাবেন যা গুগল অ্যান্ড্রয়েড ৯ এবং ১০-এ ব্যাপকভাবে আপডেট করেছে।
ম্যাটেরিয়াল ডিজাইন নিয়ে কাজ করার সময়, গুগল অনেক ভালো ফিচার দিয়েছে যা আপনি সুবিধা নিতে পারেন, এবং সেগুলো আপনার UI/UX-এর সাথে আরও স্বাভাবিকভাবে যাবে।
উদাহরণস্বরূপ, বিল্ট-ইন ম্যাটেরিয়াল ডিজাইন এলিমেন্ট দিয়ে থিমিং কম্পোনেন্টের জন্য কিছু কীওয়ার্ড নিচে দেওয়া হলো, যাতে আপনার অ্যাপ বা UI/UX নেটিভ সিস্টেম বিহেভিয়র এবং UI স্টেট উপভোগ করতে পারে।
বাটন কাস্টম কালারের সাথে android:backgroundTint="@color/red" ----- রেডিও বাটন কাস্টম কালারের সাথে android:buttonTint="@color/red" ----- ইমেজ ও আইকন android:drawableTint="@color/red" ----- প্রগ্রেসবার কাস্টম কালারের সাথে android:progressTint="@color/red"
কার্ডভিউ মোডে কম্পোনেন্টের নিচে সহজ শ্যাডো দেখানোর জন্য, আপনাকে elevation প্রপার্টি ব্যবহার করতে হবে।
android:elevation="1dp"
ট্যাগ এবং প্যারেন্ট প্রপার্টি মার্জ করা খুব উপকারী, যাতে আপনাকে আরও ভালো কন্ট্রোল এবং ম্যানেজেবল XML ফাইল मिलে।
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
অ্যানিমেটেড লে আউট পরিবর্তন আপনার UX অনেক উন্নত করতে পারে, এবং প্রায় সকল ViewGroup এটি মেনে চলবে। তাই যখনই ভিউ হায়ারার্কিতে পরিবর্তন হবে, সেটি অ্যানিমেশনের সাথে আসবে। কিছু নলেজ থাকলে আপনি কাস্টম ট্রানজিশন ইফেক্টও ডিজাইন করতে পারেন।
android:animateLayoutChanges="true"
