ui design: বাংলাদেশি মোবাইল প্যাটার্ন

বাংলাদেশি ui design-এ দ্রুত কাজ শুরু করাতে অ্যাকশন-গ্রিড, পরিষ্কার সার্ভিস সিলেক্টর, BDT-ভিত্তিক মূল্য এবং দৃশ্যমান বিকাশ পেমেন্ট বা COD লেবেল কার্যকর। bKash-এর কাজভিত্তিক গ্রিড, Pathao-এর সেবা বাছাই এবং Daraz-এর ডিল কার্ড থেকে পরিচিত কাঠামো নেওয়া যায়; তবে নিজের ব্র্যান্ড, ভাষা ও কাজের প্রবাহ অনুযায়ী তা সাজাতে হবে।

মূল বিষয়গুলো

• •হোম স্ক্রিনে ব্যবহারকারীর সবচেয়ে ঘন ঘন করা কাজগুলোকে অগ্রাধিকার দিন, সব ফিচারকে নয়।
• •মূল্য দেখানোর সময় ৳ চিহ্ন, বিকাশ পেমেন্ট ব্যাজ এবং COD লেবেলকে একই তথ্য-স্তরে রাখুন।
• •বাংলা লম্বা লেবেলের জন্য দুই লাইনের কার্ড শিরোনাম, যথেষ্ট উচ্চতা এবং বটম-শিটে পূর্ণ বিকল্প দিন।
• •একই কাজের জন্য একই আইকন, লেবেল, বোতাম ও স্টেট ব্যবহার করে একটি ব্যবহারযোগ্য design system তৈরি করুন।

এই পাতায় যা আছে

• •গ্যালারি ১: ফিনটেকের কাজভিত্তিক অ্যাকশন-গ্রিড
• •গ্যালারি ২: রাইড ও সেবার সার্ভিস সিলেক্টর
• •গ্যালারি ৩: কমার্সের ডিল কার্ড, মূল্য ও পেমেন্ট সংকেত
• •একটি স্থানীয় design system-এ প্যাটার্নগুলো বসান

গ্যালারি ১: ফিনটেকের কাজভিত্তিক অ্যাকশন-গ্রিড

bKash-এর পরিচিত হোম-স্ক্রিন ধরনটি হলো কাজকে ছোট অ্যাকশনে ভাঙা: টাকা পাঠানো, পেমেন্ট, ক্যাশ আউট, মোবাইল রিচার্জের মতো উদ্দেশ্য আগে দেখা যায়। এই প্যাটার্ন ফিনটেক বা নাগরিক সেবার অ্যাপে ভালো কাজ করে, কারণ ব্যবহারকারী সাধারণত নির্দিষ্ট কাজ শেষ করতে আসে।

নিজের স্ক্রিনে ৪ বা ৮টি প্রধান অ্যাকশন দিয়ে শুরু করুন। প্রতিটি টাইলের জন্য একরকম আইকন-বক্স, ছোট বাংলা লেবেল এবং স্পর্শের জন্য যথেষ্ট জায়গা রাখুন। কম ব্যবহৃত কাজকে আরও অ্যাকশনের নিচে বা বটম-শিটে রাখুন। অ্যাকশনের পরে সাম্প্রতিক লেনদেন, বিলের রিমাইন্ডার বা প্রাসঙ্গিক অফার দেখানো যায়—কিন্তু সেগুলো যেন মূল কাজের গ্রিডকে নিচে ঠেলে না দেয়।

পেমেন্ট-সংক্রান্ত স্ক্রিনে বিকাশ পেমেন্ট ব্যাজকে শুধু সাজসজ্জা হিসেবে নয়, নির্বাচিত পেমেন্ট পদ্ধতির স্পষ্ট সংকেত হিসেবে ব্যবহার করুন। পেমেন্ট নিশ্চিত করার আগে প্রাপক, পরিমাণ ও চার্জ থাকলে তার আলাদা সারি দেখান। bKash-এর অফিসিয়াল সেবার তালিকা দেখুন: bKash।

গ্যালারি ২: রাইড ও সেবার সার্ভিস সিলেক্টর

Pathao-এর সেবা বাছাইয়ের ধরন থেকে একটি দরকারি শিক্ষা পাওয়া যায়: ব্যবহারকারী আগে কী ধরনের সেবা চান তা ঠিক করেন, তারপর লোকেশন, সময় বা গন্তব্য দেন। রাইড, পার্সেল, খাবার বা অন্য সেবা একই অ্যাপে থাকলে এ ধরনের সার্ভিস সিলেক্টর জটিলতা কমায়।

সিলেক্টরে প্রতিটি সেবার আলাদা আইকন, সংক্ষিপ্ত বাংলা নাম এবং নির্বাচিত অবস্থার স্পষ্ট পরিবর্তন দিন। নির্বাচিত ট্যাব বা কার্ডে শুধু রং বদলালেই হবে না; বর্ডার, চিহ্ন বা হালকা ভরাট রং যোগ করুন। রাইড বুকিংয়ে পিক-আপ ও গন্তব্যের ক্ষেত্রকে সবচেয়ে দৃশ্যমান রাখুন, আর গাড়ির ধরন, ভাড়া অনুমান ও পেমেন্ট পদ্ধতি পরের ধাপে দিন।

বাংলা নাম দীর্ঘ হলে অনুভূমিক ট্যাবে কেটে যাওয়ার ঝুঁকি থাকে। তাই দুই সারির কার্ড-সিলেক্টর, অথবা সব সেবা চাপলে খোলা বটম-শিট ব্যবহার করুন। বটম-শিটে আইকন, পূর্ণ লেবেল ও এক লাইনের ব্যাখ্যা রাখা যায়। Pathao-এর নিজস্ব সেবা তথ্য: Pathao।

গ্যালারি ৩: কমার্সের ডিল কার্ড, মূল্য ও পেমেন্ট সংকেত

Daraz-এর ডিল কার্ড প্যাটার্নে পণ্য, মূল্য, ছাড় এবং সময়সীমার মতো কেনার সংকেত কাছাকাছি থাকে। বাংলাদেশি কমার্স স্ক্রিনে এই ঘন তথ্য উপযোগী, তবে কার্ডে সবকিছু সমান জোরে দেখালে স্ক্যান করা কঠিন হয়। প্রথমে ছবি, তারপর দুই লাইনের মধ্যে পণ্যের নাম, এরপর বর্তমান মূল্য ৳ ১,২৯০-এর মতো BDT বিন্যাসে দিন। পুরোনো মূল্য বা ছাড় থাকলে সেটিকে গৌণ স্তরে রাখুন।

বিকাশ পেমেন্ট ব্যাজ এবং ক্যাশ অন ডেলিভারি বা COD লেবেল পণ্যের কার্ডে, কার্টে বা চেকআউটে দেখানো যায়—যেখানে সিদ্ধান্ত নেওয়ার সময় সেটি প্রাসঙ্গিক। ব্যাজ বেশি হলে কার্ড ভারী লাগে; তাই সর্বোচ্চ একটি পেমেন্ট সংকেত ও একটি ডেলিভারি সংকেত রাখুন।

বাংলা পণ্যের নাম লম্বা হলে কার্ডের উচ্চতা স্থির রেখে দুই লাইন পর্যন্ত দেখান এবং অতিরিক্ত অংশে এলিপসিস দিন। সম্পূর্ণ নাম, ভ্যারিয়েন্ট ও ডেলিভারি তথ্য পণ্যের বিস্তারিত পেজ বা বটম-শিটে খুলুন। Daraz-এর নিজস্ব প্ল্যাটফর্ম: Daraz Bangladesh।

একটি স্থানীয় design system-এ প্যাটার্নগুলো বসান

ভালো mobile app development-এ স্থানীয় উদাহরণ নকল করাই শেষ কথা নয়; একই আচরণ বারবার ব্যবহার করার নিয়ম ঠিক করাই আসল কাজ। আপনার design system-এ অ্যাকশন টাইল, সার্ভিস কার্ড, পণ্যের ডিল কার্ড, পেমেন্ট ব্যাজ, COD লেবেল এবং বটম-শিটকে পুনর্ব্যবহারযোগ্য কম্পোনেন্ট করুন।

প্রতিটি কম্পোনেন্টে অন্তত স্বাভাবিক, চাপা, নির্বাচিত, নিষ্ক্রিয় ও লোডিং অবস্থা নির্ধারণ করুন। বাংলা লেবেলের জন্য একটি লাইনের পাশাপাশি দুই লাইনের নমুনাও রাখুন। যেমন, ছোট টাইলের লেবেল দুই লাইনের বেশি না হওয়া উচিত; আর দীর্ঘ সেবার নাম পূর্ণভাবে দেখানোর জন্য বটম-শিট ব্যবহার করুন। একই নিয়ম অ্যাকাউন্ট খোলা, বিল পরিশোধ, রাইড বুকিং এবং অর্ডার ট্র্যাকিংয়ের মতো ভিন্ন প্রবাহেও কাজে লাগবে।

Floow-তে পছন্দের স্থানীয় প্যাটার্ন—যেমন অ্যাকশন-গ্রিড, সার্ভিস সিলেক্টর বা BDT ডিল কার্ড—উল্লেখ করে আপনার নিজস্ব ব্র্যান্ডের স্ক্রিন সেট তৈরি করুন। তারপর বাস্তব বাংলা কনটেন্ট দিয়ে লেবেল, কার্ডের উচ্চতা ও পেমেন্ট সংকেত পরীক্ষা করুন।

বাংলাদেশি মোবাইল স্ক্রিনে তথ্য সাজানোর দ্রুত রেফারেন্স

সাধারণ ভুলগুলো

হোম স্ক্রিনে সব সেবা একই আকারে দেখানো।

সর্বাধিক ব্যবহৃত ৪ বা ৮টি কাজ অ্যাকশন-গ্রিডে রাখুন; বাকি সেবা আরও বা বটম-শিটে দিন।

মূল্য শুধু সংখ্যা হিসেবে লেখা, যেমন 1290।

মূল্যের আগে ৳ দিন এবং হাজারের ঘর আলাদা করে লিখুন, যেমন ৳ ১,২৯০।

বিকাশ পেমেন্ট ব্যাজ, COD, ছাড় ও ডেলিভারি ব্যাজ এক কার্ডে গাদাগাদি করা।

সিদ্ধান্তে সবচেয়ে জরুরি একটি পেমেন্ট ও একটি ডেলিভারি সংকেত রাখুন; অন্য তথ্য বিস্তারিত স্ক্রিনে নিন।

দীর্ঘ বাংলা লেবেল কেটে যাওয়া বা খুব ছোট অক্ষরে নামানো।

দুই লাইনের অনুমতি দিন, কার্ডের উচ্চতা সমন্বয় করুন এবং পূর্ণ বিকল্প দেখাতে বটম-শিট ব্যবহার করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

বাংলাদেশি অ্যাপের জন্য কোন ui design প্যাটার্ন কাজ করে?

বাংলাদেশি অ্যাপের জন্য ui design-এ কাজভিত্তিক অ্যাকশন-গ্রিড, পরিষ্কার সার্ভিস সিলেক্টর, BDT মূল্যসহ ডিল কার্ড এবং দৃশ্যমান বিকাশ পেমেন্ট বা COD লেবেল কার্যকর। ফিনটেকে bKash-ধাঁচের দ্রুত অ্যাকশন, রাইডে Pathao-ধাঁচের সেবা নির্বাচন, আর কমার্সে Daraz-ধাঁচের তথ্য-স্তর ব্যবহার করা যায়।

বটম নেভিগেশনে কয়টি ট্যাব রাখব?

বাংলাদেশি মোবাইল অ্যাপে সাধারণত ৩ থেকে ৫টি বটম নেভিগেশন ট্যাব রাখুন, যদি প্রতিটি ট্যাব ঘন ঘন ব্যবহৃত আলাদা গন্তব্য হয়। হোম, অর্ডার বা কার্যক্রম, পেমেন্ট বা ওয়ালেট, নোটিফিকেশন এবং প্রোফাইল প্রচলিত বিভাগ। কম ব্যবহৃত সেবা বটম-শিট বা আরও অংশে রাখুন।

বাংলা লেবেল কার্ডে ভেঙে গেলে কী করব?

বাংলা লেবেল কার্ডে ভেঙে গেলে অক্ষর ছোট না করে শিরোনামের জন্য দুই লাইন বরাদ্দ দিন এবং কার্ডের উচ্চতা সেই অনুযায়ী ঠিক করুন। ছোট অ্যাকশন টাইলের ক্ষেত্রে সংক্ষিপ্ত কাজের নাম ব্যবহার করুন। পূর্ণ নাম বা বহু বিকল্প দেখাতে বটম-শিট খুলুন, যাতে লেবেল কাটা না যায়।

কমার্স কার্ডে বিকাশ পেমেন্ট ব্যাজ ও COD লেবেল কোথায় রাখব?

কমার্স কার্ডে বিকাশ পেমেন্ট ব্যাজ ও COD লেবেল সেই স্থানে রাখুন যেখানে ব্যবহারকারী কেনার সিদ্ধান্ত নেয়: পণ্যের মূল্য অংশের নিচে, কার্ট সারাংশে বা চেকআউটের পেমেন্ট অংশে। ছোট কার্ডে উভয়টি দিলে ভিড় হলে একটি অগ্রাধিকার সংকেত রাখুন এবং অন্যটি বিস্তারিত পেজে দেখান।

শেষ কথা

বাংলাদেশি মোবাইল প্যাটার্নের শক্তি পরিচিতিতে: দ্রুত কাজের গ্রিড, পরিষ্কার সেবা নির্বাচন, ৳-সহ মূল্য এবং পেমেন্ট বা ডেলিভারির দৃশ্যমান সংকেত। এই কাঠামো নিজের ব্র্যান্ডে প্রয়োগ করুন, বাংলা কনটেন্ট দিয়ে পরীক্ষা করুন, এবং Floow-তে স্থানীয় প্যাটার্ন উল্লেখ করে স্ক্রিন সেট তৈরি করুন।

---

আগে স্ক্রিনগুলো ডিজাইন করুন

সহজ ভাষায় আপনার অ্যাপের বর্ণনা দিন—floow.design আপনার জন্য iOS ও Android স্ক্রিন তৈরি করে দেবে, যা আপনি পরে আরও পরিমার্জন করে হ্যান্ডঅফ করতে পারবেন।

বিনামূল্যে ডিজাইন শুরু করুন →

---

সূত্র

• •bKash
• •Pathao
• •Daraz Bangladesh

Related reading

• •mobile app development-এর বাংলাদেশি MVP
• •prototype দিয়ে বাংলাদেশি অ্যাপ টেস্ট
• •ui ux designer-এর বাংলাদেশি অ্যাপ পোর্টফোলিও