অ্যান্ড্রয়েড ব্যবহারের ১০টি ধাপ

এই নির্দেশিকাটি আপনাকে মৌলিক অ্যান্ড্রয়েড ইউএক্স প্যাটার্ন এবং ম্যাটেরিয়াল ডিজাইন ব্যবহার করে বিদ্যমান আইওএস মোবাইল ডিজাইনগুলোকে অ্যান্ড্রয়েডে রূপান্তর করার মাধ্যমে অ্যান্ড্রয়েড ডিজাইন শুরু করতে সাহায্য করে।

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

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

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

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

একটি অ্যান্ড্রয়েড অ্যাপের বিভিন্ন অংশ দেখুন।

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

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

২. আপনার ফ্রেমগুলির আকার পরিবর্তন করুন

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

৩. অ্যান্ড্রয়েড সিস্টেম বার দিয়ে প্রতিস্থাপন করুন

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

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

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

ট্যাববার (নীচের নেভিগেশন) এর পরিবর্তে নেভিগেশন বার ব্যবহার করুন।

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

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

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

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

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

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

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

অ্যান্ড্রয়েডের অ্যাপ বারে শিরোনামটি ডিফল্টরূপে বাম দিকে সারিবদ্ধ থাকে।

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

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

৬. আরেকটু পদ্ধতি

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

অ্যাপ বার অদলবদল করার কাজ শেষ করুন। iOS শীট মোডালের ক্ষেত্রে, উপরের শীট অংশ এবং ব্যাকগ্রাউন্ড পিকের পরিবর্তে একটি ফুলস্ক্রিন ডায়ালগ অ্যাপ বার ব্যবহার করুন।

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

অ্যাকশন এবং অ্যাক্টিভিটি শিট থেকে বটম শিটে। (শেয়ার শিটগুলোও এখন অনুবাদ করা যাবে)।

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

৭. ভাইবোনের বিষয়বস্তু

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

৮. বিষয়বস্তু ও নিয়ন্ত্রণসমূহ

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

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

কন্ট্রোল । টগলগুলোকে অ্যান্ড্রয়েড সুইচে পরিবর্তন করুন। অ্যান্ড্রয়েড চেকবক্স এবং রেডিও বাটন ব্যবহার করুন। অ্যান্ড্রয়েডে এই সবই রয়েছে।

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

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

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

৯. শৈলী

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

টাইপ করুন: সিস্টেম ফন্ট ব্যবহার করলে, সান ফ্রান্সিসকো প্রতিস্থাপন করুন। অ্যান্ড্রয়েডের ডিফল্ট সিস্টেম ফন্ট হলো রোবোটো। তা সত্ত্বেও, আমরা আপনাকে থিমিং এবং ডাউনলোডযোগ্য গুগল ফন্ট ব্যবহার করে আপনার ব্র্যান্ডের স্বতন্ত্র শৈলী প্রকাশ করতে উৎসাহিত করি।

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

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

১০. গুছিয়ে রাখুন

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

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

শৈলী এবং উপাদান নির্দেশিকা

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

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

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

এটি অ্যান্ড্রয়েডের জন্য কপি করে স্টাইল (বা সিম্বল, কম্পোনেন্ট বা লাইব্রেরি) আপডেট করার উৎস হিসেবে ব্যবহার করা যেতে পারে।