iOS ডিজাইনকে Android-এ অনুবাদ করা

এই গাইড আপনাকে Android ডিজাইন শুরু করতে সাহায্য করে। এটি মেটেরিয়াল ডিজাইন সহ মৌলিক Android UX প্যাটার্ন ব্যবহার করে বিদ্যমান iOS মোবাইল ডিজাইনকে Android-এ ট্রান্সলেট করে।

ডিজাইন প্যারিটির জন্য আউটলাইন করা এবং দক্ষতার জন্য অর্ডার করা। আপনি যদি শেয়ার করা বেস ডিজাইন সিস্টেম ফলো করেন, তাহলে Material 3-এর পরিবর্তে আপনার নিজস্ব সিস্টেমের মাধ্যমে ডিজাইন অনুবাদ করতে পারবেন। Android ও iOS, দুটি প্ল্যাটফর্মই এই ধারণাকে মেনে চলে যে কন্টেন্টই সবচেয়ে গুরুত্বপূর্ণ।

এর পরে, রঙ, টাইপ, ও আকারের মাধ্যমে ব্র্যান্ডিং করা যেতে পারে। এর ফলে কন্টেন্ট শুধু যে সহজে পড়া যায় তাই নয়, এর সাথে সাথে কন্টেন্টের মধ্যে সামঞ্জস্য তৈরি করাও সহজ হয়ে যায়।

আপনার iOS ডিজাইন দিয়ে শুরু করুন

শুরু করার আগে, আপনার iOS অ্যাপের একটি কপি তৈরি করুন। iOS অ্যাপকে তিনটি ভাগে ভাগ করা হয়েছে: বার, ভিউ ও কন্ট্রোল। আপনি এই স্ট্রাকচার ব্যবহার করে অনুবাদ করতে পারেন, স্টাইলিং সবার শেষে করবেন।

Android অ্যাপের অংশ সম্পর্কে জানুন।

১. iOS সিস্টেম UI মুছে দিন

স্ট্যাটাস বার ও হোম ইন্ডিকেটর মুছে দিন। এখন এটি করা আরও সহজ।

২. আপনার ফ্রেমের সাইজ পরিবর্তন করা

আপনি Android কম্প্যাক্ট সাইজিং, ৪১২ ডিপি ব্যবহার করতে পারেন। যদিও, উইন্ডো ক্লাস সাইজের মধ্যেও ডিভাইসের একটি রেঞ্জ বিবেচনা করুন। যেমন, ছোট স্ক্রিন অ্যাডজাস্ট করতে ৩৬০ ডিপি-তে পরীক্ষা করুন এবং সব উইন্ডো ক্লাসের সাইজ জুড়ে অ্যাডজাস্ট করুন।

৩. Android সিস্টেম বার দিয়ে রিপ্লেস করা

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

আরও তথ্যের জন্য, Android সিস্টেম বার দেখুন।

৪. আপনার নেভিগেশনের উপর নির্ভর করে

নেভিগেশন বারের জন্য Tabbar (নিচের নেভিগেশন) অদল-বদল করুন।

আপনার ফ্লো ম্যাপের দিকে আবার তাকান। আপনার iOS অ্যাপে কি 'আরও' মেনু ব্যবহার করা হচ্ছে? (HIG পেশাদার পদ্ধতি অনুযায়ী এই প্যাটার্ন ব্যবহার না করাই ভাল)। পাঁচটি বা তার কম আইটেম রাখুন, নিচের নেভিগেশন বারকে প্রাথমিক নেভিগেশন হিসেবে রাখুন, প্রোফাইল বা সেটিংসের মতো কোনও সেকেন্ডারি আইটেমকে উপরের অ্যাপ বারে সরানো যায় কিনা তা মূল্যায়ন করুন অথবা আপনার কি কোনও প্রাথমিক অ্যাকশন আছে যা FAB-তে ট্রান্সলেট করা যায়?

আপনার প্রাথমিক নেভিগেশন সবসময় প্যারেন্ট ভিউতে (ফ্লো ম্যাপের কোনও বিভাগের জন্য সবচেয়ে উপরের লেভেল ) থাকতে হবে। চাইল্ড ভিউ (প্যারেন্ট ভিউয়ের মধ্যে থাকা যেকোনও কিছু) নেভিগেশন হায়ারার্কিতে উপরে থাকলে প্রাইমারি নেভিগেশন অন্তর্ভুক্ত করতে পারে এবং তা মোডাল হবে না।

উপযুক্ত আইকন ও লেবেল সহ নিচের নেভিগেশন বার আপডেট করুন। দুটি প্ল্যাটফর্মই নেভিগেশন গন্তব্যের মধ্যে ল্যাটেরাল মোশন এড়িয়ে যায়।

৫. নেভিগেশন বার থেকে টপ অ্যাপ বার

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

আপনার অ্যাপে যদি নিচের নেভিগেশন বারের পরিবর্তে নেভিগেশন ড্রয়ার মেনু ব্যবহার করা হয়, তাহলে সব প্যারেন্ট ভিউতে একটি ড্রয়ার আইকন দেখানো হবে।

আপনার অ্যাপে রেল বা ড্রয়ার না থাকলে, প্যারেন্ট ভিউতে প্রাইমারি নেভিগেশন আইকন দেখা যায় না।

Android-এর জন্য অ্যাপ বারে ডিফল্ট হিসেবে শীর্ষকটি বাঁদিকে অ্যালাইন করা থাকে।

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

মডেল ভিউ সম্পর্কে কী জানেন? ফুল-স্ক্রিন মোডালের (যেমন ভিডিও প্লেয়ার ও ছবি) ক্ষেত্রে, এটি চাইল্ড ভিউ অ্যাপ বারের মতো হবে, তবে নেভিগেশন আইকনটি পরিবর্তিত হয়ে 'বন্ধ করুন' হয়ে যাবে, যা মোডালটি বাতিল করে দেয়।

৬. কিছুটা বেশি মোডালিটি

বড় মোডাল ভিউ দিয়ে শুরু করুন, এটি কোনও টাস্কে ব্যবহারকারীর মনোযোগ ফোকাস করার জন্য সবচেয়ে ভাল। iOS-এ এগুলি প্রায়ই শিট হিসেবে দেখা যায়, যেখানে ব্যবহারকারী সেগুলি নিচের দিকে সোয়াইপ করে সরিয়ে দিতে পারেন।

অ্যাপ বার অদল-বদল করার প্রসেস সম্পূর্ণ করুন। iOS শিট মোডালের জন্য, ফুলস্ক্রিন ডায়ালগ অ্যাপ বারের মাধ্যমে উপরের শিট অংশ এবং ব্যাকগ্রাউন্ড পিকের অদল-বদল করুন।

বোনাস: আপনার কোনও iOS মোডাল শিট বটম শিটে ট্রান্সলেট করা যায় কিনা তা দেখুন।

অ্যাকশন ও অ্যাক্টিভিটি শিট থেকে স্ক্রিনের নিচে অ্যাটাচ করা শিট। (শেয়ার শিট এখন অনুবাদ করা যাবে)।

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

৭. সিবলিং কন্টেন্ট

ট্যাব বা ভিউ পেজার বা সোয়াইপিং ট্যাব। আপনি iOS-এ সেগমেন্টেড কন্ট্রোল ব্যবহার করলে সেগুলি Android-এ ট্যাবে ট্রান্সলেট হয়ে যায়। দুটিই একই ধরনের, কিন্তু হুবহু এক নয় এমন তথ্যের ভিউয়ের মধ্যে ফিল্টার করার উপায় হিসেবে কাজ করে। Android ট্যাব সাধারণত অ্যাপ বারের সাথে অ্যাটাচ করা থাকে এবং কন্টেন্টের মধ্যে সোয়াইপ করার সুবিধা সহ আসে।

৮. কন্টেন্ট ও কন্ট্রোল

আপনি কীভাবে সীমাবদ্ধতা বা সাইজ পরিবর্তন করার আচরণ সেট-আপ করেছেন তার উপর নির্ভর করে, আপনার বেশিরভাগ কন্টেন্ট সম্ভবত আগেই রিসাইজ করা হয়েছে। তবে, এই সময়টি আপনার মার্জিন দেখে সেট করার কাজে ব্যবহার করুন। ছোট স্ক্রিনে ১৬dp হল একটি ভালো স্ট্যান্ডার্ড।

বেসলাইন গ্রিড কম্পোনেন্টের জন্য ৮dp গ্রিড এবং টাইপ ও আইকনের জন্য ৪dp-এর উপর ভিত্তি করে তৈরি করা হয়। iOS-এ ৮pt গ্রিড ভাল কাজ করে, তাই সম্ভবত এটিকে দুটি প্ল্যাটফর্মের জন্য শুরু করার পয়েন্ট হিসেবে বিবেচনা করুন।

কন্ট্রোল। সেইসব টগলকে Android সুইচে পরিবর্তন করুন। Android চেকবক্স ও রেডিও বোতাম ব্যবহার করুন। Android-এ এইসব সুবিধা আগে থেকেই আছে।

আপনার কাছে ফর্ম থাকলে, iOS টেক্সট ফিল্ডের পরিবর্তে Android টেক্সট ফিল্ড ব্যবহার করুন। মেটেরিয়াল আউটলাইন বা ফিল করা বিকল্পের সাথে আসে, তাই আপনার ব্র্যান্ডিংয়ের সাথে যেটি সবচেয়ে ভাল মানানসই হবে সেটি বেছে নিন।

iOS টেবিল সেলের সাথে তুলনা করলে মেটেরিয়াল লিস্টে কিছু পার্থক্য দেখা যায়:

• ডিভাইডার লাইন কম ব্যবহার করা হয়।
• ভিজ্যুয়াল নয়েজ কম রাখতে সাহায্য করার জন্য তালিকায় কোনও সূচক ব্যবহার করা হয় না।
• ডায়মেনশন ৮dp গ্রিড মেনে চলে।

৯. স্টাইল

রঙ: UI কালারে অ্যাকসেন্ট, সিম্যান্টিক ও সারফেস কালার থাকে, যা একটি কালার স্কিমে একত্রিত করা হয়। এইসব রঙ তাদের ভূমিকা অনুযায়ী UI-তে প্রয়োগ করা হয়।

টাইপ: সিস্টেম ফন্ট ব্যবহার করলে, San Francisco-এর পরিবর্তে অন্য ফন্ট ব্যবহার করুন। Android-এর ডিফল্ট সিস্টেম ফন্ট হল Roboto. তবে, আমরা আপনাকে থিমিং এবং ডাউনলোড করা যায় এমন Google ফন্ট ব্যবহার করে আপনার ব্র্যান্ডের অনন্য স্টাইল প্রকাশ করতে উৎসাহিত করি।

আইকন: এখানেও একই। SF চিহ্ন ব্যবহার করলে, সবগুলি Material আইকন বা চিহ্নতে পরিবর্তিত হয়েছে কিনা তা ডবল চেক করুন। আপনার ব্র্যান্ডের জন্য উপযুক্ত ভেরিয়েশন বেছে নিন। আপনি কি জানেন যে যেকোনও প্ল্যাটফর্মে মেটেরিয়াল আইকন ব্যবহার করতে পারবেন?

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

১০. পরিষ্কারভাবে দেখাও

আপনি কোনও প্রোটোটাইপ অনুবাদ করলে, এটি হল জিনিসপত্র রিওয়্যার করার একটি ভাল পয়েন্ট। আপনার প্রাথমিক নেভিগেশন ব্যবহার করে আগের পৃষ্ঠায় ফিরে যান। তারপরে, আপনার অ্যাপ বার, উপরে ও পিছনে যাওয়ার মধ্যে পার্থক্য মনে রেখে এবং Android-এর উপযুক্ত (৯ নম্বর ধাপে উল্লেখ করা আছে) পৃষ্ঠা ট্রানজিশন বেছে নিতে ভুলবেন না।

আপনার কাছে একটি সম্পূর্ণ কার্যকরী প্রোটোটাইপ রেডি থাকতে হবে এবং যেহেতু আপনি এটির সাইজ পরিবর্তন করেছেন, এটি হ্যান্ড-অফ করার জন্য রেডি।

স্টাইল ও কম্পোনেন্ট গাইড

আপনার আগে থেকে থাকা কোনও ডিজাইন সিস্টেম বা স্টাইল গাইড থাকলে, আপনার নিজস্ব প্রাথমিক স্টাইল (রঙ, টাইপ, আইকন, আকার) থাকতে পারে যা আপনি মেটেরিয়াল ডিজাইনের সাথে ব্যবহার করতে পারেন, ঠিক যেভাবে আপনি iOS নির্দেশিকা ব্যবহার করেন। Material থিমিং ব্যবহার করে, আপনি রঙ, টাইপ ও শেপের মাধ্যমে আপনার ব্র্যান্ডের অনন্য স্টাইল দিয়ে Material কম্পোনেন্ট কাস্টমাইজ করতে পারবেন।

মাল্টি-প্ল্যাটফর্ম প্রোডাক্টের মধ্যে প্ল্যাটফর্ম-নির্দিষ্ট নির্দেশিকা থাকা অস্বাভাবিক নয় এবং এটি আপনার নিজস্ব ডিজাইন সিস্টেমকে আরও ব্যবহারকারী-কেন্দ্রিক করে তুলতে পারে।

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

এটি Android-এর জন্য কপি করা যেতে পারে এবং স্টাইল আপডেট করার সোর্স হিসেবে ব্যবহার করা যেতে পারে (অথবা চিহ্ন, কম্পোনেন্ট বা লাইব্রেরি)।