با ساختار و روشهای مهاربندی برای محتوای خود، یک جریان و ریتم انعطافپذیر ایجاد کنید. با طراحی محفظههای طرحبندی شروع کنید و سپس محتوا را اضافه کنید.
۱. ساختار پایه: شبکه طرحبندی برای هدایت محتوا
برای شروع ایجاد یک ساختار محکم با نردههای محافظ ثابت، حاشیهها و ستونها را به طرحبندیهای خود اضافه کنید.
حاشیهها، فاصله بین لبههای چپ و راست صفحه نمایش و محتوا را فراهم میکنند. مقدار استاندارد حاشیه برای اندازههای فشرده ۱۶ dp است، اما حاشیهها باید برای سازگاری با صفحه نمایشهای بزرگتر تنظیم شوند. محتوای بدنه برنامه و اقدامات آن باید در داخل و همتراز با این حاشیهها قرار گیرند.
همچنین میتوانید در این مرحله از درج مناطق امن یا درجهای داخلی اطمینان حاصل کنید. درجهای نوار سیستم از قرار گرفتن اقدامات حیاتی در زیر نوارهای سیستم جلوگیری میکنند. شما باید محتوای خود را پشت نوارهای سیستم رسم کنید .
از ستونها برای ایجاد یک ساختار شبکهای انعطافپذیر برای ترازبندی منسجم و ارائه تعریف عمودی به طرحبندی با تقسیم محتوا در ناحیه بدنه استفاده کنید. محتوا در قسمتهایی از صفحه که حاوی ستونها هستند قرار میگیرد. این ستونها به طرحبندی شما ساختار میدهند و ساختار مناسبی را برای چیدمان عناصر فراهم میکنند.
اهمیت محتوا یا سلسله مراتب، میتواند به تعیین نوع شبکه طرحبندی برای ایجاد ساختار بیشتر کمک کند. اگر محتوای شما سلسله مراتب واضحی دارد، یک شبکه طرحبندی سلسله مراتبی مناسب است؛ به عنوان مثال، یک طرحبندی سرمقاله یا صفحه جزئیات با یک سربرگ بزرگ و تصویر کلیدی.
یک شبکه مدولار برای محتوا و طرحبندی به همان اندازه مهم اما بسیار ساختاریافته، مانند یک گالری عکس، به خوبی کار میکند.
برای طرحبندیهای یکجهته و واکنشگرای مداوم یا زمانی که به انعطافپذیری بیشتری نیاز دارید، یک شبکه ستونی انتخاب کنید.
صرف نظر از نوع، شبکه طرحبندی باید با اندازهها و فرمهای مختلف نیز سازگار باشد.
این مثال از یک شبکه ستونی برای تراز کردن محتوا با یک شبکه زیرین استفاده میکند و در عین حال اندازه انعطافپذیر را حفظ میکند. برای تطبیق با فاکتورهای فرم مختلف، شبکه ستونی اندازه ستون و تعداد ستونها را بر اساس اندازه صفحه نمایش تغییر میدهد، که به محتوا نیز اجازه میدهد مقیاسبندی شود. از ریزهکاری بیش از حد در شبکه طرحبندی خودداری کنید. در عوض، از شبکه پایه برای ارائه واحدهای فاصلهگذاری ثابت استفاده کنید.
شروع به اضافه کردن متن به ساختار طرحبندی میکنیم. حاشیهها از محتوا در برابر لبههای صفحه محافظت میکنند. ستونها یک ساختار فاصلهگذاری و ترازبندی ثابت ارائه میدهند.
روش دیگر، استفاده از یک شبکه طرحبندی سلسله مراتبی برای مرتب نگه داشتن صفحه جزئیات است.
با یک شبکه طرحبندی ثابت شروع کنید. اگر محتوای شما به آن نیاز دارد، شبکه را بشکنید. حتی در آن صورت، ممکن است متوجه شوید که یک شبکه دیگر هنوز با نیازهای محتوای شما همسو است.
درباره کانتینرهای طرحبندی، مانند پیجرها و طرحبندی جریانی، بیشتر بدانید.
نسخه خطی و بنایی از دیگر انواع شبکه بندی طرح بندی هستند.
هر کدام از گریدهای طرحبندی که انتخاب کنید، میتواند از مفهوم محدودیت پنجرهها برای گروهبندی محتوا برای طرحبندیهای تطبیقی نیز استفاده کند. برای مثال، مثال مورد استفاده یک صفحه نمایش جزئیات است، یک پنجره که میتواند در یک طرحبندی لیست-جزئیات نشان داده شود.
۲. اعمال محدودیت
از مهاربندی برای گروهبندی بصری عناصر استفاده کنید.
منظور از «دربرگیری» (Containment) استفاده از فضای خالی و عناصر قابل مشاهده در کنار هم برای ایجاد یک گروهبندی بصری است. «دربرگیرنده» شکلی است که نشاندهنده یک ناحیه محصور است. در یک طرحبندی واحد، میتوانید عناصری را که محتوا یا عملکرد مشابهی دارند، گروهبندی کنید و آنها را با استفاده از فضای باز، تایپوگرافی و جداکنندهها از سایر عناصر جدا کنید.
اندروید از ردیفها، ستونها و کادرها به عنوان بلوکهای سازنده استفاده میکند، بنابراین میتوانید به روشی مشابه، فضای ذخیرهسازی را طراحی کنید. موارد مشابه را با استفاده از فضای خالی یا تقسیمبندی قابل مشاهده، گروهبندی کنید تا به شما در مرور محتوا کمک کند.
مهار ضمنی از فضای خالی برای گروهبندی بصری محتوا و ایجاد مرزهای نگهدارنده استفاده میکند، در حالی که مهار صریح از اشیاء مانند خطوط جداکننده و کارتها برای گروهبندی محتوا با هم استفاده میکند.
شکل زیر مثالی از استفاده از مهار ضمنی برای در بر گرفتن سربرگ و نسخه اصلی را نشان میدهد. از شبکه ستون برای ترازبندی و ایجاد گروهبندی استفاده میشود. هایلایتها به طور صریح درون کارتها قرار میگیرند. استفاده از آیکونوگرافی و سلسله مراتب نوع برای جداسازی بصری بیشتر.
۳. موقعیت محتوا
با انتخاب یک شبکه طرحبندی و محتوا در کانتینرها، اندروید روشهای مختلفی برای مدیریت عناصر محتوا و موقعیتیابی آنها دارد، که شامل بلوکهای سازنده اولیه و اصلاحکنندهها یا کانتینرهای طرحبندی مانند grid و flexbox میشود.
در نظر بگیرید که آیا محتوای شما یک بعدی است یا دو بعدی. برای مثال، محتوا میتواند به صورت افقی، عمودی یا در هر دو جهت جریان داشته باشد.
همانطور که در شکل زیر نشان داده شده است، یک طرح احراز هویت میتواند از یک طرح شبکهای دوبعدی استفاده کند.
عناصر رابط کاربری همچنین میتوانند در یک بعد انعطافپذیر و جریان داشته باشند، مانند فیلترها یا تگهای محتوا. درباره flexbox بیشتر بدانید.
طرحبندیها همچنین میتوانند از ترکیبی از انواع طرحبندی استفاده کنند. برای مثال، میتوانید یک چرخ فلک یا اسکرول افقی را با کارتهای عمودی جفت کنید. یا میتوانید یک نمودار سفارشی با دادههای لیست عمودی ارائه دهید.
شما میتوانید محتوا را در ردیفها یا ستونهای پیمایشی با ردیفهای تنبل و ستونهای تنبل ارائه دهید.
ترازبندی
مشابه جریان و ترازبندی خودکار طرحبندی، میتوانید چیدمان و ترازبندی عناصر رابط کاربری را مشخص کنید.
AlignmentLine برای ایجاد خطوط ترازبندی سفارشی استفاده کنید، که طرحبندیهای والد میتوانند از آنها برای ترازبندی و تعیین موقعیت فرزندان خود استفاده کنند.
انجام دهید
نکن
۴. مقیاسبندی و برش محتوا
مقیاسبندی برای تطبیق با محتوای پویا، جهتگیری دستگاه و اندازه صفحه نمایش بسیار مهم است. عناصر میتوانند ثابت بمانند یا مقیاسبندی شوند.
نحوه مقیاسبندی و قرارگیری تصاویر را در محفظههایشان مشخص کنید تا از نمایش صحیح آنها در هر دستگاهی اطمینان حاصل شود. در غیر این صورت، ممکن است تمرکز اصلی یک تصویر قطع شود، یا تصویر برای طرحبندی خیلی کوچک یا خیلی بزرگ باشد.
نسبتهای ابعاد و جهتهای مختلف دستگاه را با مقیاسبندی و برش مناسب تطبیق دهید. از آنجا که نسبتهای ابعاد میتوانند به طور قابل توجهی متفاوت باشند، مشخص کنید که محتوای شما چگونه این سناریوها را مدیریت میکند.
برای مثال، یک تصویر قهرمان با عرض کامل، کل صفحه نمایش را در گوشی با جهت افقی اشغال میکند.
انجام دهید
نکن
اگر محتوا باید نسبت ابعاد را حفظ کند، مانند ویدیوی عمودی، ابعاد را محدود کرده و فضای خالی را متعادل کنید.
نکن
محتوای پین شده
بسیاری از کامپوننتها دارای تعاملات داخلی، پیمایش و موقعیتیابی با اسلاتها یا داربستها، مانند نوارهای برنامه هستند. برخی از عناصر را میتوان طوری تغییر داد که به جای واکنش به پیمایش، ثابت بمانند، به عنوان مثال دکمههای عملیاتی شناور (FAB) که عملکردهای حیاتی را در خود جای میدهند. عناصر را برای تمرکز بهتر در موارد استفاده خاص، پین کنید، به عنوان مثال، یک ورودی متنی را به صفحه کلید پین کنید تا از ورودیهای پنهان جلوگیری شود.
برای ورودی متن، مانند پیامرسانی و احراز هویت، ورودی به صفحهکلید متصل میشود و تمرکز انحصاری روی آن قرار میگیرد.
اجزا در طرحبندی
اجزای متریال ۳ پیکربندیها و حالتهای خاص خود را برای تعامل و محتوا ارائه میدهند.
Compose طرحبندیهای مناسبی را برای ترکیب کامپوننتهای متریال در الگوهای رایج صفحه نمایش ارائه میدهد. Composableهایی مانند Scaffold، اسلاتهایی را برای کامپوننتهای مختلف و سایر عناصر صفحه نمایش فراهم میکنند. درباره کامپوننتهای متریال و طرحبندی بیشتر بخوانید.