daraz bangladesh মার্কেটপ্লেস অ্যাপ UI প্যাটার্ন
daraz bangladesh ধাঁচে বড় ক্যাটালগ, ফ্ল্যাশ সেল, BDT ভাউচার, জেলা-ভিত্তিক ডেলিভারি, COD ও বিক্রেতা তথ্যের মোবাইল UI উদাহরণ।
daraz bangladesh ধাঁচের মার্কেটপ্লেস অ্যাপ UI-তে হোম স্ক্রিনে ক্যাটাগরি ও ফ্ল্যাশ সেল, পণ্যের কার্ডে BDT ডিসকাউন্ট ও ভাউচার, এবং পণ্য পাতায় জেলা-ভিত্তিক ডেলিভারি অনুমান, COD, bKash ও Nagad পেমেন্ট ব্যাজকে আগে দেখান। এতে বড় ক্যাটালগে দাম, আস্থা ও ডেলিভারি সিদ্ধান্ত দ্রুত নেওয়া যায়।
মূল বিষয়গুলো
- •ফ্ল্যাশ সেল কার্ডে সময়, বিক্রয়মূল্য, আগের দাম ও স্টক-চাহিদার সংকেত একসঙ্গে রাখুন।
- •BDT ছাড় ও ভাউচারকে আলাদা অর্থস্তরে দেখান, যাতে মোট সাশ্রয় ভুল বোঝা না হয়।
- •জেলা নির্বাচনের পর ডেলিভারি অনুমান ও COD প্রাপ্যতা পণ্যের তথ্যের কাছেই দেখান।
- •বিক্রেতা রেটিং, পর্যালোচনার সংখ্যা, রিটার্ন তথ্য ও দোকানের পরিচয় এক ব্লকে রাখুন।

এই পাতায় যা আছে
- •গ্যালারি ১: ক্যাটাগরি-প্রথম হোম স্ক্রিন
- •গ্যালারি ২: ফ্ল্যাশ সেল কার্ডে জরুরি সিদ্ধান্তের তথ্য
- •গ্যালারি ৩: পণ্য পাতায় আস্থা, পেমেন্ট ও ডেলিভারি
- •গ্যালারি ৪: বিক্রেতা, রিটার্ন ও অর্ডার ট্র্যাকিং
গ্যালারি ১: ক্যাটাগরি-প্রথম হোম স্ক্রিন
বড় ecommerce in bangladesh ক্যাটালগের হোম স্ক্রিনে সব পণ্য একসঙ্গে ঠেলে দেবেন না। উপরে অনুসন্ধান, তারপর দ্রুত ক্যাটাগরি চিপ—ফ্যাশন, ইলেকট্রনিক্স, গ্রোসারি, বিউটি বা ঘর—দিয়ে শুরু করুন। পরের ভাঁজে ক্যাম্পেইন ব্যানার ও ফ্ল্যাশ সেল রাখুন। Daraz Bangladesh-এর 11.11-ধাঁচের ক্যাম্পেইনে ব্যানার থেকে একটি নির্দিষ্ট গন্তব্যে যাওয়ার কথা: যেমন নির্বাচিত ক্যাটাগরি, ব্র্যান্ড বা সীমিত সময়ের অফার।
ব্যানারের ভাষা ছোট রাখুন: BDT-তে মূল্যছাড়, ভাউচারের শর্ত এবং সময়সীমা। একই কার্ডে অতিরিক্ত চারটি প্রচার-বার্তা রাখলে ব্যবহারকারী দাম যাচাই করতে পারেন না। ক্যাম্পেইন রঙ design system-এর একটি টোকেন হিসেবে ব্যবহার করুন; কিন্তু পণ্যের দাম, রেটিং ও বাটনের মৌলিক রঙ অপরিবর্তিত রাখুন। এতে 11.11 বা অন্য বিক্রয়-পর্ব শেষ হলেও স্ক্রিনের আচরণ পরিচিত থাকে।
স্ক্রিন উদাহরণ: অনুসন্ধান → ক্যাটাগরি গ্রিড → 11.11/ক্যাম্পেইন ব্যানার → ফ্ল্যাশ সেল সারি → আপনার জন্য পণ্য।
গ্যালারি ২: ফ্ল্যাশ সেল কার্ডে জরুরি সিদ্ধান্তের তথ্য
ফ্ল্যাশ সেলের জন্য অনুভূমিক কার্ড-সারি কার্যকর, কারণ ব্যবহারকারী দ্রুত তুলনা করে স্ক্রল করতে পারেন। প্রতিটি কার্ডে পণ্যের ছবি, সংক্ষিপ্ত নাম, বর্তমান BDT মূল্য, কাটা আগের মূল্য, শতাংশ ছাড় এবং একটি ছোট স্টক বা বিক্রির অগ্রগতি বার রাখুন। উপরে বিভাগ-স্তরে কাউন্টডাউন দিন; প্রতিটি পণ্যে আলাদা কাউন্টডাউন দিলে দৃশ্য অস্থির হয়।
মূল্য দেখানোর ক্রম হবে বর্তমান মূল্য → আগের মূল্য → সাশ্রয়। যদি ভাউচার প্রযোজ্য হয়, মূল্যকে ভাউচার-পরবর্তী মূল্য হিসেবে দেখাবেন না, যতক্ষণ না সেটি স্বয়ংক্রিয়ভাবে প্রযোজ্য। বদলে ভাউচার নিন ব্যাজ দিন এবং ট্যাপ করলে ন্যূনতম অর্ডার, মেয়াদ ও প্রযোজ্য দোকান দেখান। এভাবে BDT ডিসকাউন্ট ও ভাউচারের পার্থক্য স্পষ্ট থাকে।
স্ক্রিন উদাহরণ: ফ্ল্যাশ সেল শেষ হতে কাউন্টডাউন, চারটি পণ্য কার্ড, সব দেখুন লিংক, এবং কার্টে যাওয়ার স্থির আইকন। সময় শেষ হলে একই স্থানে শেষ হওয়া অফার নয়, পরের প্রাসঙ্গিক সংগ্রহ দেখান।
গ্যালারি ৩: পণ্য পাতায় আস্থা, পেমেন্ট ও ডেলিভারি
পণ্য পাতায় ছবির পরই মূল্য ও প্রচার-তথ্য দিন, কিন্তু ক্রয়ের সিদ্ধান্ত আটকে থাকে আস্থা ও পৌঁছানোর তথ্যেও। মূল্য ব্লকের নিচে BDT ডিসকাউন্ট, পাওয়া যায় এমন ভাউচার, এবং শর্ত দেখানোর জন্য একটি খোলা যায় এমন সারি রাখুন। এরপর ডেলিভারি অংশে ব্যবহারকারীর নির্বাচিত জেলা দেখান—যেমন ঢাকা বা অন্য জেলা—এবং সেই জেলা অনুযায়ী আনুমানিক ডেলিভারি সময় দেখান। জেলা পরিবর্তনের নিয়ন্ত্রণটি একই সারিতে রাখলে অনুমানের উৎস বোঝা যায়।
ডেলিভারি অংশের সঙ্গে COD উপলভ্য লেবেল দিন, তবে তা কেবল যে ঠিকানা বা পণ্যে প্রযোজ্য সেখানেই দেখাবেন। পেমেন্ট পছন্দের সংকেত হিসেবে bKash, Nagad এবং ক্যাশ-অন-ডেলিভারি ব্যাজ ব্যবহার করা যায়। ব্যাজে ট্যাপ করলে চার্জ, প্রাপ্যতা বা পরিশোধের ধাপ থাকলে তা স্পষ্ট করুন; শুধু লোগো দিয়ে নিশ্চয়তা বোঝাবেন না।
স্ক্রিন উদাহরণ: মূল্য ও ভাউচার → জেলা-ভিত্তিক ডেলিভারি অনুমান → COD/bKash/Nagad ব্যাজ → কার্টে যোগ করুন ও এখনই কিনুন স্থির বাটন।
গ্যালারি ৪: বিক্রেতা, রিটার্ন ও অর্ডার ট্র্যাকিং
বিক্রেতা রেটিংকে পণ্যের শিরোনামের পাশে ভিড় করাবেন না। পণ্যের রেটিং আলাদা—তা পণ্যের গুণমানের সংকেত। বিক্রেতার রেটিং, পর্যালোচনার সংখ্যা, দোকানের নাম এবং দোকানে যান লিংক একটি পৃথক বিক্রেতা কার্ডে রাখুন। একই কার্ড বা তার ঠিক নিচে রিটার্ন তথ্যের সংক্ষিপ্ত সারাংশ দিন, তারপর পূর্ণ নীতিতে যাওয়ার লিংক দিন। ব্যবহারকারী কেনার আগে দোকান ও ফেরতের শর্ত এক জায়গায় মিলিয়ে দেখতে পারবেন।
অর্ডার দেওয়ার পরে ট্র্যাকিং স্ক্রিনে অর্ডার নম্বর, পণ্যের থাম্বনেইল, বর্তমান অবস্থা, জেলা-ভিত্তিক গন্তব্য এবং সর্বশেষ ডেলিভারি অনুমান রাখুন। অর্ডার নিশ্চিত, প্যাক করা হচ্ছে, পথে আছে, ডেলিভার হয়েছে—এ ধরনের অবস্থাকে শুধু রঙে নয়, লেখা ও সময়সহ দেখান। COD অর্ডারের ক্ষেত্রে পরিশোধ পদ্ধতিটিও সারাংশে পুনরায় লিখুন।
Floow দিয়ে ক্যাটাগরি, ফ্ল্যাশ সেল, কার্ট ও অর্ডার ট্র্যাকিংয়ের মার্কেটপ্লেস স্ক্রিন তৈরি করুন। একই উপাদানের ভ্যারিয়েন্ট বানিয়ে ক্যাম্পেইন, সাধারণ বিক্রয় এবং ভিন্ন জেলা-ডেলিভারি অবস্থায় পরীক্ষা করুন।
বাংলাদেশি মার্কেটপ্লেস পণ্য পাতার অগ্রাধিকার তথ্য
| উপাদান | স্ক্রিনে অবস্থান | কী দেখাবেন |
|---|---|---|
| BDT মূল্য ও ডিসকাউন্ট | পণ্যের নামের নিচে | বর্তমান মূল্য, আগের মূল্য ও সাশ্রয় |
| ভাউচার | মূল্য ব্লকের পর | ভাউচার মূল্য/শর্ত ও সংগ্রহের নিয়ন্ত্রণ |
| জেলা-ভিত্তিক ডেলিভারি | ভাউচারের পর | নির্বাচিত জেলা, অনুমান ও জেলা বদলের নিয়ন্ত্রণ |
| পেমেন্ট | ডেলিভারি অংশে | bKash, Nagad ও প্রযোজ্য হলে COD লেবেল |
| বিক্রেতা ও রিটার্ন | ক্রয় বাটনের আগে বা পরে | দোকান, রেটিং, পর্যালোচনা ও রিটার্ন সারাংশ |
সাধারণ ভুলগুলো
ডিসকাউন্টের মূল্যের সঙ্গে ভাউচার-সাশ্রয় মিশিয়ে একটি বড় সংখ্যা দেখানো।
বর্তমান BDT মূল্য, কাটা আগের মূল্য ও ভাউচারের সম্ভাব্য সাশ্রয় আলাদা লাইনে দেখান।
সব ঠিকানার জন্য একই ডেলিভারি সময় ও COD ব্যাজ দেখানো।
জেলা নির্বাচন বা সংরক্ষিত ঠিকানার ভিত্তিতে অনুমান ও COD প্রাপ্যতা আপডেট করুন।
পণ্যের রেটিংকে বিক্রেতার রেটিং হিসেবে উপস্থাপন করা।
পণ্যের রেটিং শিরোনামের কাছে এবং বিক্রেতা রেটিং আলাদা দোকান কার্ডে রাখুন।
ফ্ল্যাশ সেল কাউন্টডাউন শেষ হলেও মৃত পণ্যের তালিকা রেখে দেওয়া।
শেষ হওয়ার পর স্বয়ংক্রিয়ভাবে নতুন সংগ্রহ, অপেক্ষমান অফার বা সাধারণ তালিকায় পাঠান।
সচরাচর জিজ্ঞাসিত প্রশ্ন
daraz bangladesh-এর মতো ফ্ল্যাশ সেল UI কীভাবে বানাব?
daraz bangladesh-এর মতো ফ্ল্যাশ সেল UI-তে একটি বিভাগ-স্তরের কাউন্টডাউন, অনুভূমিক পণ্য কার্ড, বর্তমান BDT মূল্য, কাটা আগের মূল্য, শতাংশ ছাড় এবং সীমিত স্টকের সংকেত রাখুন। কার্ডের তথ্য দুই-তিন লাইনে সীমিত রাখুন। সময় শেষ হলে শেষ হওয়া অফারের বদলে পরের প্রাসঙ্গিক সংগ্রহ দেখান।
ভাউচার ও ডিসকাউন্ট একসঙ্গে কীভাবে দেখাব?
ভাউচার ও ডিসকাউন্ট একসঙ্গে দেখাতে প্রথমে পণ্যের বর্তমান BDT মূল্য ও আগের মূল্য দেখান, তারপর আলাদা ভাউচার সারি দিন। ভাউচার সারিতে প্রযোজ্য ন্যূনতম অর্ডার, মেয়াদ ও সংগ্রহের অবস্থা দেখান। ভাউচার স্বয়ংক্রিয়ভাবে না লাগলে তাকে চূড়ান্ত মূল্য হিসেবে উপস্থাপন করবেন না।
বিক্রেতা রেটিং কোথায় রাখা উচিত?
বিক্রেতা রেটিং পণ্যের শিরোনামের পাশে নয়, মূল্য ও ডেলিভারি তথ্যের পরে পৃথক বিক্রেতা কার্ডে রাখা উচিত। সেখানে দোকানের নাম, বিক্রেতা রেটিং, পর্যালোচনার সংখ্যা, দোকানে যাওয়ার লিংক এবং রিটার্ন তথ্যের সংক্ষিপ্ত সারাংশ দিন। এতে পণ্যের রেটিং ও বিক্রেতার আস্থার সংকেত গুলিয়ে যায় না।
COD, bKash ও Nagad তথ্য কোন স্ক্রিনে দেখাব?
COD, bKash ও Nagad তথ্য পণ্য পাতার ডেলিভারি ও ক্রয়-তথ্য অংশে দেখান, কারণ এই পর্যায়েই ব্যবহারকারী পেমেন্টের সিদ্ধান্ত নেন। নির্বাচিত জেলার জন্য COD প্রযোজ্য হলে তবেই COD লেবেল দিন। চেকআউটে নির্বাচিত পেমেন্ট পদ্ধতি আবার দেখিয়ে পরিবর্তনের সুযোগ রাখুন।
শেষ কথা
বাংলাদেশি মার্কেটপ্লেস UI-তে প্রচারের চেয়ে সিদ্ধান্তের তথ্য আগে রাখুন: BDT মূল্য ও ভাউচার, নির্বাচিত জেলার ডেলিভারি অনুমান, COD এবং bKash/Nagad পেমেন্ট সংকেত, তারপর বিক্রেতা ও রিটার্ন তথ্য। এই ক্রম বড় ক্যাটালগকেও মোবাইলে স্ক্যানযোগ্য রাখে।
আগে স্ক্রিনগুলো ডিজাইন করুন
সহজ ভাষায় আপনার অ্যাপের বর্ণনা দিন—floow.design আপনার জন্য iOS ও Android স্ক্রিন তৈরি করে দেবে, যা আপনি পরে আরও পরিমার্জন করে হ্যান্ডঅফ করতে পারবেন।
সূত্র
Related reading
Design your mobile app with AI.
Generate pixel-perfect iOS and Android screens in seconds, then export to Figma or code.