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