اندروید طیف وسیعی از دستگاهها، فرمها و اندازههای صفحه نمایش را پوشش میدهد، بنابراین طراحی برای قفلهای پیکسلی خاص نه تنها بیاثر است، بلکه میتواند بر تجربه کاربری نیز تأثیر منفی بگذارد. در عوض، طراحی، ساخت و تفکر تطبیقی داشته باشید. ما اخیراً APIهای جدیدی را معرفی کردهایم که برخی از مفاهیم طراحی آشنا را برای کمک به ساخت طرحبندیهای تطبیقی ارائه میدهند.
Pawparazzi یک اپلیکیشن نمونه است که این مفاهیم را به نمایش میگذارد. این اپلیکیشن برای برجسته کردن طراحی تطبیقی با استفاده از APIهای تطبیقی مانند Grid و Flexbox طراحی و ساخته شده است.
تفکر تطبیقی نه تنها به معنای طراحی با نقاط شکست است، بلکه به معنای تفکر در مورد محتوا در کانتینرهای انعطافپذیر نیز میباشد.
همه چیز شبکهای است!
داشتن پایه و اساس برای ساختاردهی محتوا به طراحی خوب کمک میکند و میتواند به شما در تصمیمگیری در مورد نحوه تطبیق محتوا کمک کند. اندروید یک شبکه پایه ۸dp اساسی دارد که میتوانیم تمام محتوا را در سطح خرد با آن تراز کنیم.
پاپارازی به جای یک شبکه مدولار یکنواخت یا یک شبکه ستونی یک جهته، از یک شبکه طرحبندی سلسله مراتبی استفاده میکند، به این معنی که ستونها و ردیفهایی که آن را تشکیل میدهند بر اساس سلسله مراتب محتوا تعیین میشوند.
تصمیمگیری در مورد نوع شبکه باید به محتوا بستگی داشته باشد. با محتوای برنامه خود شروع کنید و به نحوه گروهبندی محتوا فکر کنید. این به تعیین ساختار کلی طرحبندی کمک میکند. برای اطلاعات بیشتر در مورد تفکر در مورد پنلها، به بخشهای شبکهها و واحدها ، ساختار محتوا و شروع به کار در دسکتاپ مراجعه کنید.
برای پاپاراتزی، هدف اصلی، مشاهده حیوانات خانگی تیم به روشهای مختلف بود، که با نمای کلی حیوانات خانگی، جزئیات حیوانات خانگی و سپس رتبهبندی حیوانات خانگی شروع میشد. این به این معنی بود که گالری حیوانات خانگی، بخش اصلی محتوا و بخش بیشتری از شبکه را اشغال میکرد و پس از آن عناصر ناوبری و فیلتر قرار میگرفت. وقتی فضای بیشتری در دسترس باشد، این به گالری اجازه میدهد تا در ردیفهای بیشتر، حیوانات خانگی بیشتر و جزئیات حیوانات خانگی را همزمان نمایش دهد. این اصل تطبیقی، آشکار کردن یا نمایش محتوای بیشتر در طرحبندیهای بزرگتر است.
نگاه به هدف اصلی برنامه و محتوا به تعیین چگونگی و زمان نیاز به تطبیق شبکه طرحبندی کمک کرد: اینکه کدام اندازههای کلاس پنجره، محل قرارگیری لولا و جهتگیریهای دستگاه باید تغییر کنند.
از شبکه طرحبندی، زیرشبکهها به ساخت ساختارهای محتوایی انعطافپذیرتر کمک میکنند. گالریها خودشان یک شبکه هستند. برای اندازههای جمعوجور، از یک شبکه ۲-عرضی استفاده میشود.
شبکهها یک مفهوم طرحبندی دو جهته هستند، بنابراین محتوا میتواند هم در جهت افقی و هم در جهت عمودی جریان یابد.
این میتواند برای ایجاد طرحبندیهای جالبتر یا ایجاد سلسله مراتب بصری واضحتر، مانند حیوان خانگی هفته، که در آن از شبکه برای نمایش حیوانات خانگی برتر استفاده میشود، مورد استفاده قرار گیرد. شبکه ممکن است ۲x۴ باشد، اما نقطه برتر ۲ ستون و ردیف را در بر میگیرد.
همه این کارها با Grid API انجام میشود.
آن اجزا را منعطف کنید
در حالی که گرید ساختار محتوای ماکرو و میکرو را پوشش میدهد، فلکسباکس به کامپوننتهایی که نیاز به پاسخگویی به محتوای خود دارند کمک میکند. این برای محتوای یکجهته استفاده میشود، جایی که فقط افقی یا عمودی بودن تعیین میشود. به عنوان مثال، تراشههای فیلتر میتوانند به برچسبهای خود پاسخ دهند و ناحیه فیلتر میتواند بسته به تعداد فیلترها گسترش یابد. از Reveal در صفحههای بزرگتر برای نمایش فیلترهای بیشتر به طور همزمان استفاده کنید.
پرسوجوهای ظریف
با طراحی یک شبکه طرحبندی و استفاده از شبکه و فلکسباکس، ما امکان ایجاد یک طرحبندی تطبیقی در چندین صفحه نمایش را فراهم میکنیم و حتی فرمهای منحصر به فردی مانند صفحات تاشو را در خود جای میدهیم. اما در مورد زمینههای مختلف کاربری چطور؟ کاربران اندروید میتوانند به یک صفحه نمایش متصل شوند یا ماوس را وصل کنند! مدیاکوئری به ما این امکان را میدهد که تصمیمات طراحی ظریفی را برای تطبیق با کاربران در همه زمینهها بگیریم.
در پاوپاراتزی، این به معنای بهرهگیری از ورودیهای دقیق اشارهگر، با نواحی هدف کوچکتر و محتوای متراکمتر بود.
نمونههای رابط کاربری تطبیقی اندروید
طرحهای الهامبخش و بهینهشده برای دستگاههای صفحه بزرگ را کاوش کنید. قالبهای UI/UX را برای دستهبندیهای محبوب برنامهها، از جمله رسانه، خلاقیت، بازی و موارد دیگر، مرور کنید.
