Comment

লেয়াউট এবং স্পেসিং

লাইনার স্কেল যথেষ্ট নয়।

Estimated reading: 1 minute 17 views Contributors

সারাংশ: Make sure everything is a multiple of 4px

‘’Make sure everything is a multiple of 4px/ নিশ্চিত করুন সমস্ত কিছু ৪ পিক্সেল এর গুণিতক।’’ স্পেসিং এবং সাইজিং নির্ধারণ এই উক্তিটির মত সহজ নয়। কেননা সমস্ত কিছু যদি আপনি ৪ এর গুনিতক করেন তাহলে ডিজাইনটির হায়ারার্কি মেইন্টেইন করা অনেক কঠিন হয়ে যাবে। কারণ সেক্ষেত্রে এলিমেন্টের একটি ভেরিয়েন্ট এর তুলনায় আরেকটি ভেরিয়েন্টের পার্থক্য অনেক বেশি হয়ে যাবে। যা ব্যবহারের অনুপোযগী হয়ে পড়বে।

একটি ডিজাইন সিস্টেমকে সত্যিকার অর্থে কার্যকরী করার জন্য এর সন্নিহিত মানগুলির মধ্যে আপেক্ষিক পার্থক্য বিবেচনা করতে হবে।

ডিজাইন সিস্টেমে স্কেলের ছোটপ্রান্ত (যেমন একটি আইকন বা বাটনের প্যাডিং) কয়েক পিক্সেলের ব্যবধানে অনেক বড় পার্থক্য তৈরী করতে পারে। যেমন, নিচের বাটনের আইকনটি ১৬ পিক্সেল থেকে 20 পিক্সেল করা হয়েছে যা পূর্বের তুলনায় ৩৩% বৃদ্ধি।

কিন্তু স্কেলের বড়প্রান্তের (যেমন কার্ড/ হিরো সেকশনের ভার্টিক্যাল স্পেসিং) ক্ষেত্রে কয়েক পিক্সেলের ব্যবধান খুব একটা চোখে পড়ার মত না। এমনকি আপনি যদি একটি কার্ডের Width (প্রস্থ) ৫০০ থেকে একবারে ৫২০ করে দেন তাহলে এটি আগের থেকে মাত্র ৪% বৃদ্ধি পায়। যা আইকনের ১৬ থেকে ২০ তে পরিবর্তিত হও্যার তুলনায় অনেক কম ( প্রায় ৮ গুন) তাতপর্যপূর্ণ।

ডিজাইন সিস্টেমের সাইজ নির্ধারণ সহজ করার জন্য আপনি একটি সহজ পন্থা অবলম্বন করতে পারেন। উপায়টি হলো ২ টি এলিমেন্টের মধ্যে পার্থক্য যেন মিনিমাম ২৫% থাকে।

Define A system/ সিস্টেম সংগায়িত করুন

যেহেতু আপনি সূক্ষ্ম পার্থক্য গুলো নিয়ে কালক্ষেপণ করবেন না এবং স্কেলিং এর পার্থক্য অনেক বেশি করবেন না সেক্ষেত্রে একটি Base value  ধরে স্কেলিং করা উচিত। Base value  হিসেবে ১৬ পিক্সেল একটি চমৎকার নাম্বার। কেননা ওয়েব ব্রাউজারে ডিফল্ট ফন্ট সাইজ থাকে ১৬ পিক্সেল। বেস ভ্যালুর গুণিতক এবং গুণনীয়ক ব্যবহার করে কীভাবে আমরা ডিজাইন সিস্টেম স্কেলিং করবো তার একটি উদাহরণ নিচে আমরা দেখবো।

Leave a Comment

Share this Doc

লাইনার স্কেল যথেষ্ট নয়।

Or copy link

CONTENTS

Subscribe

×
Cancel