design system: বাংলা ফিনটেক অ্যাপ চেকলিস্ট

বাংলা ফিনটেক অ্যাপের design system-এ bangla typography, ৳-সহ BDT অঙ্ক, লেনদেন আইডি, তারিখ, +880 ফোন ইনপুট এবং সফল/পেন্ডিং/ব্যর্থ ট্রানজ্যাকশন স্টেটকে আলাদা কম্পোনেন্ট হিসেবে নির্ধারণ করুন। bKash, Nagad ও Rocket-ধাঁচের ব্যবহার-প্যাটার্ন মাথায় রেখে একই টোকেন ও কনটেন্ট নিয়মে সব স্ক্রিন তৈরি করুন।

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

• •অঙ্ক, মুদ্রাচিহ্ন, দশমিক, লেনদেন আইডি ও তারিখের জন্য পুনর্ব্যবহারযোগ্য ফরম্যাট টোকেন বানান।
• •সফল, পেন্ডিং ও ব্যর্থতা শুধু রঙে নয়—আইকন, শিরোনাম, ব্যাখ্যা এবং পরের পদক্ষেপে আলাদা করুন।
• •দীর্ঘ বাংলা লেবেল ভাঙা, সহায়ক লেখা ও +880 নম্বর ইনপুটের নিয়ম শুরুতেই স্থির করুন।
• •নিরাপত্তা বার্তা, পিন/ওটিপি যাচাই এবং রসিদ স্ক্রিনে একই কনটেন্ট কাঠামো বজায় রাখুন।

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

• •চেকলিস্ট ১: ভিত্তি টোকেন ও বাংলা টাইপ
• •চেকলিস্ট ২: BDT, ৳, তারিখ ও লেনদেন আইডি
• •চেকলিস্ট ৩: ট্রানজ্যাকশন স্টেটকে এক ভাষায় আনুন
• •চেকলিস্ট ৪: +880 ইনপুট ও নিরাপত্তা বার্তা

চেকলিস্ট ১: ভিত্তি টোকেন ও বাংলা টাইপ

টাইপোগ্রাফি

• •বাংলা অক্ষরের যুক্তবর্ণ, কারচিহ্ন ও সংখ্যা ছোট আকারেও পরিষ্কার দেখা যায়—এমন ফন্ট, আকার ও লাইন-উচ্চতা পরীক্ষা করুন। ১৪ এবং 14 একই বাক্যে এলে বেসলাইন ও ফাঁক কেমন দেখায়, তা বাস্তব ডিভাইসে যাচাই করুন।
• •bangla typography-তে শিরোনাম, ফিল্ড লেবেল, সহায়ক লেখা, সতর্কতা এবং রসিদের তথ্যের জন্য সীমিত টেক্সট স্টাইল রাখুন। প্রতি স্ক্রিনে নতুন ওজন বা আকার যোগ করবেন না।
• •দীর্ঘ বাংলা লেবেলের জন্য এক বা দুই লাইনের নীতি নির্ধারণ করুন। যেমন, “যে নম্বরে টাকা পাঠাতে চান” দুই লাইন হলে ইনপুট ফিল্ড নিচে ঠেলে যাবে কি না, সেটি কম্পোনেন্টের অংশ হিসেবে ঠিক করুন।
• •লেবেল কেটে … দেখানোর বদলে ছোট সহায়ক লেখা, পূর্ণ-প্রস্থ লেবেল বা ধাপে ভাগ করা ফর্ম ব্যবহার করুন। বাংলা নির্দেশনা অস্পষ্ট হলে টাকা পাঠানোর মতো কাজে ভুল বাড়ে।

রঙের টোকেনকে অর্থের সঙ্গে বেঁধে দিন: তথ্য, সতর্কতা, সাফল্য ও ত্রুটি—প্রতিটির টেক্সট, আইকন, পটভূমি এবং বর্ডার ভ্যারিয়েন্ট থাকবে।

চেকলিস্ট ২: BDT, ৳, তারিখ ও লেনদেন আইডি

অর্থের কম্পোনেন্টে অঙ্ককে শুধু সাধারণ টেক্সট হিসেবে রাখবেন না। একটি Amount কম্পোনেন্টে মুদ্রা, পূর্ণাংশ, দশমিকাংশ, ঋণাত্মক বা ফেরত-অবস্থা এবং আকার ভ্যারিয়েন্ট আলাদা করুন। ব্যবহারকারী যে অঙ্ক পাঠাবেন বা পাবেন, সেখানে ৳ ১,২৫০.০০-এর মতো একটি একক BDT প্রদর্শননীতি রাখুন; কম জায়গার তালিকায় দশমিক দেখানো হবে কি না, সেটিও টোকেন দিয়ে নিয়ন্ত্রণ করুন।

রসিদে লেনদেন আইডি আলাদা তথ্য-সারি হবে: লেবেল, আইডি মান এবং কপি অ্যাকশন। আইডি দীর্ঘ হলে মাঝখান কেটে না দিয়ে এক লাইনে স্ক্রল, মোড়ানো, বা কপি করার স্পষ্ট ব্যবস্থা দিন। তারিখের জন্য একটি নির্দিষ্ট পাঠ্যরীতি নিন—যেমন ১২ মার্চ ২০২৬, ১০:৩০ PM—এবং তালিকা, বিস্তারিত রসিদ ও নোটিফিকেশনে একই রীতি ব্যবহার করুন।

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

চেকলিস্ট ৩: ট্রানজ্যাকশন স্টেটকে এক ভাষায় আনুন

bKash, Nagad ও Rocket-ধাঁচের পরিচিত মোবাইল আর্থিক সেবা অভিজ্ঞতায় ব্যবহারকারী দ্রুত জানতে চান: টাকা গেছে, অপেক্ষায় আছে, নাকি যায়নি। তাই TransactionStatus কম্পোনেন্টে অন্তত তিনটি স্টেট রাখুন—সফল, পেন্ডিং, ব্যর্থ।

• •সফল: নিশ্চিতকরণ আইকন, “টাকা পাঠানো হয়েছে” ধরনের স্পষ্ট শিরোনাম, প্রাপক, ৳ অঙ্ক, সময়, লেনদেন আইডি এবং রসিদ শেয়ার/ডাউনলোড বা হোমে ফেরার পদক্ষেপ।
• •পেন্ডিং: “প্রক্রিয়াধীন” বলে থেমে যাবেন না। কী যাচাই হচ্ছে, ব্যবহারকারীকে অপেক্ষা করতে হবে কি না, এবং ফল কোথায় দেখা যাবে তা লিখুন। অঙ্ক ও প্রাপকের তথ্য দৃশ্যমান রাখুন।
• •ব্যর্থ: দোষারোপহীন শিরোনাম, সম্ভব হলে কারণের শ্রেণি, পুনরায় চেষ্টা বা সহায়তা নেওয়ার অ্যাকশন এবং টাকা কাটা গেলে কী হবে—তার প্রাসঙ্গিক নির্দেশনা দিন।

শুধু সবুজ, হলুদ ও লাল রঙে স্টেট বোঝাবেন না। আইকন, শব্দ, রসিদ কাঠামো এবং অ্যাকশন একসঙ্গে বদলালে কম আলো, রঙ-দৃষ্টিজনিত সীমাবদ্ধতা ও দ্রুত স্ক্যান—সব ক্ষেত্রেই অর্থ পরিষ্কার থাকে।

চেকলিস্ট ৪: +880 ইনপুট ও নিরাপত্তা বার্তা

ফোন নম্বর কম্পোনেন্টে দেশ-কোডকে আলাদা কিন্তু অপরিবর্তনীয় অংশ করুন: +880 আগে থেকে দেখা যাবে, আর ব্যবহারকারী স্থানীয় নম্বরের বাকি অংশ লিখবেন। কেউ 01… দিয়ে শুরু করলে আপনার নিয়ম অনুযায়ী গ্রহণ, রূপান্তর বা ত্রুটি দেখান—কিন্তু একই ফর্মে কখনও +880, কখনও 0 প্রত্যাশা করবেন না। কিবোর্ড হবে সংখ্যার; স্পেস বা ড্যাশ লিখলেও সংরক্ষণের আগে নম্বর স্বাভাবিকীকরণ করুন।

দীর্ঘ বাংলা লেবেল ও ত্রুটি বার্তার জন্য ইনপুটের নিচে পর্যাপ্ত জায়গা রাখুন। “সঠিক মোবাইল নম্বর দিন” বলার বদলে কোন অংশটি অসম্পূর্ণ তা বলুন। ওটিপি, পিন বা অনুমোদনের স্ক্রিনে সংবেদনশীল তথ্য চাইলে বার্তাটি কাজের ঠিক আগে দেখান: কাউকে পিন বা ওটিপি না দেওয়ার নির্দেশনা সংক্ষিপ্ত ও দৃশ্যমান হওয়া উচিত।

SecurityMessage কম্পোনেন্টে তথ্য, সতর্কতা ও জরুরি সতর্কতার ভ্যারিয়েন্ট রাখুন। এতে টাকা পাঠানো, লগইন, নতুন ডিভাইস যাচাই এবং পিন পরিবর্তনের স্ক্রিনে ভাষা ও ভিজ্যুয়াল আচরণ এক থাকে। Floow দিয়ে আপনার ব্র্যান্ডের বাংলা ফিনটেক কম্পোনেন্ট ব্যবহার করে ধারাবাহিক স্ক্রিন জেনারেট করুন।

বাংলা ফিনটেক রসিদ ও ইনপুটের প্রস্তাবিত কম্পোনেন্ট নিয়ম

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

সব ট্রানজ্যাকশন ফলাফলে একই রসিদ লেআউট ও শুধু রঙ বদলানো।

সফল, পেন্ডিং ও ব্যর্থ স্টেটের শিরোনাম, ব্যাখ্যা, আইকন এবং পরের পদক্ষেপ আলাদা ভ্যারিয়েন্টে নির্ধারণ করুন।

অঙ্কে কোথাও ৳1250, কোথাও ১,২৫০ টাকা, আবার কোথাও দশমিক বাদ দেওয়া।

একটি Amount টোকেন ও প্রদর্শননীতি নিন; প্রসঙ্গভেদে সংক্ষিপ্ত ভ্যারিয়েন্ট লাগলে সেটিও নামকরণ করুন।

দীর্ঘ বাংলা লেবেল কেটে দেওয়া বা ইনপুটের ওপর চাপিয়ে দেওয়া।

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

ফোন নম্বরে +880 ও স্থানীয় 0-শুরু ফরম্যাটের প্রত্যাশা অসামঞ্জস্যপূর্ণ রাখা।

একটি দৃশ্যমান +880 প্রিফিক্স ও নম্বর স্বাভাবিকীকরণের নিয়ম সব নম্বর-সম্পর্কিত ফ্লোতে ব্যবহার করুন।

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

বাংলা ফিনটেকের design system-এ কী কম্পোনেন্ট লাগবে?

বাংলা ফিনটেকের design system-এ টাইপ স্টাইল, দীর্ঘ বাংলা লেবেলসহ ইনপুট, +880 ফোন নম্বর ফিল্ড, BDT অঙ্ক, ৳ চিহ্ন, তারিখ-সময়, লেনদেন আইডি, রসিদ, সফল/পেন্ডিং/ব্যর্থ স্টেট, ওটিপি, পিন, নিরাপত্তা বার্তা এবং ত্রুটি বার্তা লাগবে। প্রতিটির আকার, অবস্থা, লেখা ও অ্যাকশন ভ্যারিয়েন্ট নির্ধারণ করলে স্ক্রিনজুড়ে আচরণ এক থাকে।

ট্রানজ্যাকশন স্টেট কীভাবে স্ট্যান্ডার্ড করব?

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

BDT ফরম্যাটের টোকেন কীভাবে বানাব?

BDT ফরম্যাটের টোকেনে মুদ্রাচিহ্ন ৳, অঙ্কের গ্রুপিং, দশমিকের নিয়ম, বাংলা বা ইংরেজি অঙ্কের নির্বাচন এবং বড়-ছোট আকারের ভ্যারিয়েন্ট রাখুন। যেমন, রসিদে ৳ ১,২৫০.০০ ব্যবহার করলে নিশ্চিতকরণ ও ইতিহাসেও একই রীতি রাখুন। শূন্য দশমিক কোথায় দেখাবেন, তা টোকেনের নিয়মে স্পষ্ট করুন।

বাংলা ফোন নম্বর ইনপুটে +880 কীভাবে দেখাব?

বাংলা ফিনটেক অ্যাপে ফোন নম্বর ইনপুটে +880 স্থির প্রিফিক্স হিসেবে দেখান এবং ব্যবহারকারীকে স্থানীয় নম্বরের বাকি অংশ লেখার সুযোগ দিন। সংখ্যার কিবোর্ড ব্যবহার করুন, স্পেস বা ড্যাশ লেখা হলে সংরক্ষণের আগে তা স্বাভাবিকীকরণ করুন, এবং 01-শুরু নম্বর দিলে আপনার নির্ধারিত নিয়ম অনুযায়ী পরিষ্কার নির্দেশনা দিন।

শেষ কথা

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

---

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

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

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

---

সূত্র

• •বাংলাদেশ ব্যাংক
• •bKash
• •নগদ
• •ডাচ্-বাংলা ব্যাংক

Related reading

• •মোবাইল UI-তে bangla font বাছাই
• •অ্যাপের জন্য bangla typography গাইড
• •bangla website design থেকে অ্যাপ UI