প্ল্যাটফর্ম ডিজাইন গাইডলাইন — Material Design বনাম Human Interface Guidelines
এই পাঠে যা শিখবেন
- Material Design ও Human Interface Guidelines-এর মূল ডিজাইন দর্শনের পার্থক্য
- দুই প্ল্যাটফর্মের কমন কম্পোনেন্ট, এলিভেশন বনাম ফ্ল্যাট ডিজাইন, ও নেভিগেশন কনভেনশন
- কেন উভয় গাইডলাইনই ন্যূনতম টাচ-টার্গেট সাইজের উপর জোর দেয়
- বাটনের আকার একটি নির্দিষ্ট থ্রেশহোল্ডের বিপরীতে genuinely যাচাই করার একটি Python ফাংশন
১ · দুটি প্রধান প্ল্যাটফর্ম ডিজাইন সিস্টেম
L01-এ যেমন দেখা গেছে, প্রতিটি মোবাইল প্ল্যাটফর্মের নিজস্ব প্রত্যাশিত "দেখতে ও অনুভব করার" নিয়ম আছে। Material Design ও Human Interface Guidelines — দুটোই সুপরিচিত, অফিসিয়াল, ব্যাপকভাবে-নথিভুক্ত ডিজাইন সিস্টেম, নিচে শুধু তাদের সুপরিচিত বৈশিষ্ট্যগুলো তুলনা করা হয়েছে — কোনো নির্দিষ্ট API সিনট্যাক্স নয়।
| দিক | Material Design (Android) | Human Interface Guidelines (iOS) |
|---|---|---|
| ডিজাইন দর্শন | "ডিজিটাল কাগজ ও কালি"-র রূপক — বাস্তব জগতের বস্তুর মতো আচরণ করা উপাদান, motion দিয়ে সম্পর্ক বোঝানো | স্বচ্ছতা (clarity), deference (UI কনটেন্টের পথ থেকে সরে থাকে), এবং গভীরতা (depth) — তিনটি মূল নীতি |
| কমন কম্পোনেন্ট | Floating Action Button (FAB), Bottom Navigation Bar, Snackbar, Chip, Card | Tab Bar, Navigation Bar (বড় টাইটেলসহ), Action Sheet, Segmented Control |
| এলিভেশন বনাম ফ্ল্যাট | এলিভেশন/শ্যাডো লেয়ার দিয়ে z-অক্ষের হায়ারার্কি স্পষ্টভাবে দেখানো (কার্ড, FAB উঁচু দেখায়) | ঐতিহ্যগতভাবে অপেক্ষাকৃত ফ্ল্যাট, ব্লার/ট্রান্সলুসেন্সি দিয়ে গভীরতা বোঝানো, শ্যাডোর ব্যবহার তুলনামূলক সংযত |
| নেভিগেশন কনভেনশন | নিচে Bottom Navigation Bar (সাধারণত ৫টি পর্যন্ত ডেস্টিনেশন), অথবা সাইড Drawer; সিস্টেম "Back" বাটন/জেসচার আলাদা | নিচে Tab Bar, উপরে বাম কোণে "Back" নেভিগেশন-স্ট্যাক অ্যারো, প্রান্ত থেকে সোয়াইপ-ব্যাক জেসচার প্রচলিত |
২ · ন্যূনতম টাচ-টার্গেট সাইজ — উভয় গাইডলাইনের অভিন্ন নিয়ম
L05-এ শেখা জেসচার রিকগনিশনের একটি প্রায়োগিক পরিণতি — একটি বাটন যদি খুব ছোট হয়, ব্যবহারকারীর আঙুল নির্ভরযোগ্যভাবে সেটিকে "ট্যাপ" করতে পারবে না। এই কারণে Material Design ও HIG দুটোই প্রায় একই ন্যূনতম টাচ-টার্গেট সাইজের সুপারিশ করে — সাধারণত প্রায় ৪৪-৪৮dp/pt। নিচের কোড সেলে এই নিয়মটি একটি সত্যিকারের যাচাই ফাংশনে পরিণত করা হয়েছে।
# ন্যূনতম টাচ-টার্গেট সাইজ কমপ্লায়েন্স যাচাই -- উভয় গাইডলাইনেরই সুপারিশ ~৪৪dp/pt ন্যূনতম
def check_touch_targets(buttons, min_size=44):
results = []
for b in buttons:
min_dimension = min(b["width"], b["height"])
passed = min_dimension >= min_size
results.append({
"name": b["name"],
"width": b["width"],
"height": b["height"],
"min_dimension": min_dimension,
"passed": passed,
})
return results
buttons = [
{"name": "আইকন বাটন", "width": 32, "height": 32},
{"name": "প্রাইমারি বাটন", "width": 48, "height": 48},
{"name": "ছোট টেক্সট লিংক", "width": 60, "height": 24},
{"name": "Floating Action Button", "width": 56, "height": 56},
]
results = check_touch_targets(buttons, min_size=44)
for r in results:
status = "পাস" if r["passed"] else "ফেইল (খুব ছোট)"
print(f"{r['name']:24s} | {r['width']}x{r['height']}dp | ন্যূনতম মাত্রা={r['min_dimension']}dp | {status}")
pass_count = sum(1 for r in results if r["passed"])
print(f"\n{pass_count}/{len(results)} বাটন ৪৪dp ন্যূনতম টাচ-টার্গেট থ্রেশহোল্ড পূরণ করেছে।")"ছোট টেক্সট লিংক"-এর প্রস্থ (৬০dp) যথেষ্ট বড় হলেও উচ্চতা (২৪dp) থ্রেশহোল্ডের অর্ধেক
— আর যেহেতু ফাংশনটি min(width, height) দেখে (দুটি মাত্রার মধ্যে যেটি ছোট), এটি সঠিকভাবে ফেইল
হিসেবে ধরা পড়ে। একটি টাচ টার্গেট শুধু একদিকে বড় হলেই যথেষ্ট নয় — উভয় দিকেই ন্যূনতম সাইজ পূরণ করতে হয়।
Material Design ও HIG আলাদা ভিজ্যুয়াল ভাষা ব্যবহার করে (এলিভেশন বনাম ফ্ল্যাট, ভিন্ন কম্পোনেন্ট নাম), কিন্তু মানবদেহের আঙুলের বাস্তবতার কারণে টাচ-টার্গেট সাইজের মতো কিছু নিয়মে দুটোই একমত। M5-এ (UI কম্পোনেন্ট) ও M8-এ (অ্যাক্সেসিবিলিটি, L08) এই থ্রেশহোল্ড আবার ফিরে আসবে।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ একটি অ্যাপ যদি Android-এ চলে কিন্তু তার নেভিগেশনে iOS-স্টাইল Tab Bar ব্যবহার করে, এতে কী সমস্যা হতে পারে?
ব্যবহারকারী যারা Android-এ অভ্যস্ত, তারা প্রত্যাশা করে পরিচিত কনভেনশন (যেমন Bottom Navigation-এর Material স্টাইল, বা সিস্টেম Back জেসচারের সাথে সামঞ্জস্যপূর্ণ আচরণ)। একটি প্ল্যাটফর্মের কনভেনশন অন্য প্ল্যাটফর্মে জোর করে বসালে অ্যাপটি "ভুল জায়গায় থাকা" মনে হতে পারে, এবং সিস্টেম-লেভেল জেসচার (যেমন Android-এর Back জেসচার)-এর সাথে দ্বন্দ্ব তৈরি হতে পারে।
প্র ০২ এলিভেশন/শ্যাডো ব্যবহার করে হায়ারার্কি দেখানো এবং ব্লার/ট্রান্সলুসেন্সি ব্যবহার করে গভীরতা দেখানোর মধ্যে ব্যবহারকারীর দৃষ্টিভঙ্গিতে মূল পার্থক্য কী?
শ্যাডো-ভিত্তিক এলিভেশন সরাসরি ইঙ্গিত দেয় কোন উপাদানটি "উপরে ভাসছে" — একটি কার্ড বা FAB-এর নিচে গাঢ় শ্যাডো তাৎক্ষণিকভাবে বোঝায় সেটি পৃষ্ঠতলের উপরে। ব্লার/ট্রান্সলুসেন্সি-ভিত্তিক পদ্ধতি ভিন্নভাবে গভীরতা বোঝায় — পেছনের কনটেন্ট আবছাভাবে দেখা যাওয়ার মাধ্যমে স্তরের ধারণা তৈরি হয়, সরাসরি শ্যাডো ছাড়াই। উভয় পদ্ধতিই "কোনটি সামনে, কোনটি পেছনে" প্রশ্নের উত্তর দেয়, শুধু ভিন্ন ভিজ্যুয়াল ভাষায়।
প্র ০৩
উপরের কোড সেলে check_touch_targets() ফাংশনে min(b["width"], b["height"]) ব্যবহার না করে শুধু b["width"] চেক করলে কী ভুল হতো?
তাহলে "ছোট টেক্সট লিংক" (প্রস্থ ৬০dp, উচ্চতা ২৪dp) ভুলভাবে "পাস" হিসেবে রিপোর্ট হতো, কারণ
শুধু প্রস্থ (৬০dp) থ্রেশহোল্ড (৪৪dp) ছাড়িয়ে যায়। কিন্তু বাস্তবে ব্যবহারকারীর আঙুলকে বাটনের উচ্চতার
মধ্যেও নির্ভুলভাবে ট্যাপ করতে হয় — একটি সরু কিন্তু চওড়া বাটন উল্লম্বভাবে চাপা কঠিন হতে পারে। তাই দুটি
মাত্রার মধ্যে ছোটটি চেক করাই সঠিক, কারণ এটিই সবচেয়ে সীমাবদ্ধ দিক নির্ধারণ করে।
অনুশীলন
-
চিন্তা করুন: আপনার ফোনের কোনো Android ও কোনো iOS অ্যাপ (বা একই অ্যাপের দুই ভার্সন) মনে
করার চেষ্টা করুন — নেভিগেশন বার নিচে না উপরে, ব্যাক বাটন আছে কি নেই, এই পার্থক্যগুলো লক্ষ্য করুন।
সাধারণত লক্ষ্য করবেন Android অ্যাপে একটি স্পষ্ট সিস্টেম Back জেসচার/বাটন থাকে যা যেকোনো স্ক্রিন থেকে কাজ করে, যেখানে iOS অ্যাপে প্রতিটি স্ক্রিনের নিজস্ব উপরে-বাম "Back" অ্যারো থাকে (নেভিগেশন স্ট্যাকের সাথে যুক্ত) এবং প্রান্ত থেকে সোয়াইপ করেও ফেরা যায়। এই পার্থক্যটি M6 (নেভিগেশন)-এ আরও গভীরভাবে দেখা হবে।
-
পরীক্ষা করুন: উপরের কোড সেলে
buttonsলিস্টে একটি নতুন এন্ট্রি যোগ করুন —{"name": "ন্যূনতম-ঠিক বাটন", "width": 44, "height": 44}— এবংcheck_touch_targets()চালিয়ে দেখুন এটি পাস হয় কি না।এটি পাস হবে, কারণ
min(44, 44) = 44, এবং ফাংশনের শর্ত হলোmin_dimension >= min_size(৪৪ >= ৪৪ সত্য) — থ্রেশহোল্ডের ঠিক সমান হলেও এটি ">=" ব্যবহার করার কারণে বৈধভাবে পাস হয়, ">" হলে হতো না।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ অ্যাপ লাইফসাইকেল, মোবাইল UI/UX, MVVM/MVI আর্কিটেকচার, নেটিভ বনাম ক্রস-প্ল্যাটফর্ম, নেভিগেশন, স্টেট ম্যানেজমেন্ট, লোকাল স্টোরেজ, ডিভাইস ফিচার ও ডিপ্লয়মেন্ট — বাকি পাঠগুলো শীঘ্রই যুক্ত হবে।
- Full-Stack Web Frameworks কোর্স সহোদর কোর্স ওয়েব UI-তে "ডিজাইন সিস্টেম" ধারণাটি ব্র্যান্ড-নির্দিষ্ট; মোবাইলে প্ল্যাটফর্ম নিজেই একটি বাধ্যতামূলক ডিজাইন সিস্টেম চাপিয়ে দেয় — এই পাঠ সেই পার্থক্য তুলে ধরে।
- সব Courses দেখুন ABCL TECH C, C++, Python, Java, JavaScript, DSA, DBMS, Discrete Mathematics, System Design, Cybersecurity, Cloud Computing & DevOps, Computer Networks, Operating Systems, Computer Architecture, Programming Languages & Compiler Design, Software Engineering & Git, Theory of Computation, Engineering Economics, Full-Stack Web Frameworks ও Mobile App Development — সব এক জায়গায়।