اصول چیدمان

طرح‌بندی ساختار بصری را برای کاربر تعریف می‌کند تا با برنامه شما ارتباط برقرار کند، مثلاً در یک فعالیت. اندروید مجموعه ای از کتابخانه ها، نقاط شروع متعارف و تکنیک ها را برای نمایش و موقعیت یابی محتوا ارائه می دهد.

غذای آماده

• قسمت‌های امن دستگاه Honor، که شامل بخش‌هایی از رابط کاربری مانند بریدگی‌های نمایشگر، قسمت‌های لبه به لبه، نمایشگرهای لبه، صفحه‌کلیدهای نرم‌افزاری و نوارهای سیستم است.

• انجام دهید: یک طرح بندی انعطاف پذیر برای تعامل کاربران با صفحه کلید فراهم کنید.

• فعل و انفعالات ضروری، مانند ناوبری اولیه، را در یک منطقه صفحه قابل دسترسی نگه دارید.

  

• از محدودیت برای گروه بندی محتوای مرتبط استفاده کنید تا کاربر را از طریق محتوا و اقدامات راهنمایی کند.

  

• همراستایی ثابتی بین محتوای مشابه و عناصر رابط کاربری فراهم کنید.

  مبادا: خوانایی را با فاصله گذاری ناسازگار مانند عناصر مختل کنید، که می تواند طرح ها را تصادفی جلوه دهد.

  انجام: ایجاد فاصله ثابت بین عناصر مشابه.

  

• به پرتره یا طرح‌بندی ایده‌آل پایبند نباشید: نسبت‌های ابعاد، کلاس‌های اندازه و وضوح‌های متفاوتی را که ممکن است کاربران با آن‌ها مواجه شوند را در نظر بگیرید.

• کاربر خود را با اعمال بیش از حد در هر نمایش غرق نکنید.

• هنگام ساختن طرح‌بندی‌های سفارشی، توجه داشته باشید که چگونه محتوا باید با استفاده از تراز، محدودیت‌ها یا اصطلاحات جاذبه در طرح‌بندی قرار گیرد. نحوه پاسخگویی تصاویر به محفظه خود را برای نمایش صحیح درج کنید.

بخش هایی از صفحه نمایش معمولی برنامه اندروید

اکثر برنامه‌های اندروید از مناطقی تشکیل شده‌اند که به آنها نوارهای سیستم ، ناحیه ناوبری و بدنه گفته می‌شود.

نوارهای سیستم

نوار وضعیت و نوار ناوبری - که مجموعاً به عنوان نوارهای سیستم شناخته می شوند - اطلاعات مهمی مانند سطح باتری، زمان و هشدارهای اعلان را نمایش می دهند و تعامل مستقیم دستگاه را از هر کجا ارائه می دهند. درباره نوارهای سیستم بیشتر بخوانید.

منطقه ناوبری

ناوبری نشان دهنده امکانات مختلفی است که به کاربر امکان می دهد در برنامه شما حرکت کند، به اقدامات مهم یا در سراسر پلت فرم Android دسترسی داشته باشد.

ناحیه بدن

ناحیه بدنه محتوای صفحه را نگه می دارد. محتوای بدنه از گروه بندی ها و پارامترهای طرح بندی اضافی تشکیل شده است. باید در مناطق ناوبری و نوار سیستم ادامه یابد.

WindowCompat.setDecorFitsSystemWindows(window, false) را برای ورودی های لبه به لبه اعلام کنید.

برای تعیین ترکیب بندی و الگوهای ناوبری مناسب برای طرح بندی خود، به دنبال درک نحوه تعامل کاربران با محتوای شما و نحوه هدایت آنها در معماری اطلاعات برنامه شما باشید. این درک می تواند طراحی شما را با ایجاد رابط کاربری که کاربران می توانند بر اساس آن عمل کنند، به سمت تمرکز بیشتر بر روی کاربر هدایت کند.

ترکیب و ساختار محتوا

یک جریان و ریتم انعطاف پذیر با ساختار و روش های مهار محتوای خود ایجاد کنید.

ساختار پایه: از حاشیه ها و ستون ها برای نرده های محافظ بصری استفاده کنید

برای شروع ایجاد یک ساختار محکم با نرده‌های محافظ ثابت، حاشیه‌ها و ستون‌ها را به چیدمان‌های خود اضافه کنید.

حاشیه ها فاصله هایی را در لبه های چپ و راست صفحه و محتوا ایجاد می کنند. یک مقدار حاشیه استاندارد برای اندازه فشرده 16 dp است، اما حاشیه ها باید با صفحه نمایش های بزرگتر سازگار شوند. محتوای بدنه برنامه و اقدامات شما باید با این حاشیه ها مطابقت داشته باشد.

همچنین می‌توانید در این مرحله از مناطق امن یا ورودی‌ها اطمینان حاصل کنید. ورودی های نوار سیستم از قرار گرفتن اقدامات مهم در زیر نوارهای سیستم جلوگیری می کند. برای جزئیات بیشتر به ترسیم محتوای خود در پشت نوارهای سیستم مراجعه کنید.

از ستون‌ها برای ایجاد یک ساختار شبکه‌ای انعطاف‌پذیر برای هم‌ترازی ثابت، و ارائه تعریف عمودی برای یک طرح با تقسیم محتوا در ناحیه بدنه استفاده کنید. محتوا در نواحی صفحه حاوی ستون ها قرار می گیرد. این ستون‌ها ساختاری را به چیدمان شما می‌بخشند و ساختاری مناسب برای چیدمان عناصر فراهم می‌کنند.

از یک شبکه ستونی برای تراز کردن محتوا با یک شبکه زیرین استفاده کنید اما اندازه انعطاف پذیر را حفظ کنید. شبکه ستون می‌تواند با تغییر اندازه ستون‌ها و تعداد ستون‌ها بر حسب نیاز اندازه صفحه در نقاطی خاص، فاکتورهای شکل متفاوتی را در خود جای دهد و در عین حال به محتوا اجازه می‌دهد تا مقیاس نیز داشته باشد. از گرانول بودن بیش از حد با شبکه ستون خودداری کنید، این همان چیزی است که شبکه پایه برای آن است: ارائه واحدهای فاصله گذاری ثابت.

مراقب ایجاد یک شبکه همراه از ردیف‌ها باشید، زیرا می‌تواند مقیاس افقی محتوای را در جهت‌ها و عوامل شکل محدود کند، معمولاً ایجاد قوانین padding سازگاری بصری مورد نیاز را فراهم می‌کند.

برای گروه بندی بصری عناصر از محدودیت استفاده کنید

مهار به استفاده از فضای سفید و عناصر قابل مشاهده در کنار هم برای ایجاد یک گروه بندی بصری اشاره دارد. ظرف شکلی است که نمایانگر یک ناحیه بسته است. در یک چیدمان واحد، می‌توانید عناصری را که دارای محتوا یا عملکرد مشابه هستند، با هم گروه‌بندی کنید و با استفاده از فضای باز، تایپوگرافی و تقسیم‌کننده‌ها، آنها را از سایر عناصر جدا کنید.

می توانید موارد مشابه را با فاصله سفید یا تقسیم بندی قابل مشاهده گروه بندی کنید تا به راهنمایی کاربر در محتوا کمک کند.

محتوی ضمنی از فضای سفید برای گروه‌بندی بصری محتوا برای ایجاد مرزهای ظرف استفاده می‌کند، در حالی که محدودیت صریح از اشیایی مانند خطوط جداکننده و کارت‌ها برای گروه‌بندی محتوا استفاده می‌کند.

شکل زیر نمونه ای از استفاده از محفظه ضمنی برای حاوی هدر و کپی اولیه را نشان می دهد. شبکه ستون برای تراز و ایجاد گروه بندی استفاده می شود. نکات برجسته به صراحت در کارت ها موجود است. استفاده از نماد نگاری و سلسله مراتب تایپ برای جداسازی بصری بیشتر.

موقعیت یابی محتوا

Android راه‌های متعددی برای مدیریت عناصر محتوا در محفظه‌های مربوطه دارد که می‌تواند به موقعیت مناسب آنها کمک کند، از جمله جاذبه، فاصله و مقیاس‌گذاری.

جاذبه استانداردی برای قرار دادن یک شی در یک ظرف بالقوه بزرگتر برای موارد استفاده خاص است. شکل زیر نمونه‌هایی از موقعیت‌یابی اجسام شروع و مرکز ( 1 )، افقی بالا و مرکز ( 2 )، پایین سمت چپ ( 3 )، و انتهای و راست ( 1 ) را نشان می‌دهد.

مقیاس بندی

مقیاس بندی برای تطبیق محتوای پویا، جهت گیری دستگاه و اندازه صفحه بسیار مهم است. عناصر می توانند ثابت بمانند یا مقیاس شوند.

توجه به نحوه نمایش تصاویر در داخل محفظه‌هایشان با مقیاس و موقعیت بسیار مهم است تا اطمینان حاصل شود که علی‌رغم زمینه دستگاه چگونه می‌خواهید تصویر به نظر برسد، در غیر این صورت ممکن است تمرکز اصلی تصویر قطع شده باشد، تصاویر ممکن است برای طرح‌بندی خیلی کوچک یا بزرگ باشند. ، یا سایر عوارض نامطلوب.

محتوایی که یادداشت نشده است می تواند متفاوت از آنچه شما انتظار دارید یا می خواهید ظاهر شود.

محتوای پین شده

بسیاری از عناصر در تعامل، پیمایش و موقعیت‌یابی با شکاف‌ها یا داربست‌ها ساخته شده‌اند. برخی از عناصر را می توان به گونه ای تغییر داد که به جای واکنش به پیمایش، ثابت بمانند، به عنوان مثال دکمه های عمل شناور (FAB) که اقدامات مهم را در خود جای می دهند.

تراز

از AlignmentLine برای ایجاد خطوط تراز سفارشی استفاده کنید، که طرح‌بندی‌های والدین می‌توانند از آن برای تراز و قرار دادن فرزندان خود استفاده کنند.

مبادا: خوانایی را با فاصله گذاری ناسازگار مانند عناصر مختل کنید، که می تواند طرح ها را تصادفی جلوه دهد.

انجام: ایجاد فاصله ثابت بین عناصر مشابه.

طرح کامپوننت

مؤلفه های ماده 3 پیکربندی ها و حالت های خود را برای تعامل و محتوا ارائه می دهند.

Compose طرح‌بندی‌های مناسبی را برای ترکیب اجزای مواد در الگوهای رایج صفحه نمایش فراهم می‌کند. اجزای سازنده مانند داربست شکاف هایی را برای اجزای مختلف و سایر عناصر صفحه فراهم می کند. درباره اجزای متریال و چیدمان بیشتر بخوانید .

طرح بندی و الگوهای ناوبری

اگر برنامه شما دارای چندین مقصد برای عبور کاربران است، توصیه می‌کنیم از جفت‌های طرح‌بندی و ناوبری استفاده کنید که معمولاً توسط سایر برنامه‌ها استفاده می‌شود. از آنجایی که بسیاری از کاربران از قبل دارای مدل های ذهنی برای این جفت ها هستند، برنامه شما برای آنها شهودی تر خواهد بود.

جفت‌های چیدمان و ناوبری

نوار پیمایش و کشوی ناوبری مودال به عنوان الگوهای ناوبری اولیه برای نماهای طرح بندی والدین و مقاصد ناوبری اولیه استفاده می شود.

نوار پیمایش می تواند سه تا پنج مقصد ناوبری را در یک سطح سلسله مراتبی نگه دارد. این جزء به ریل ناوبری برای صفحه نمایش های بزرگ ترجمه می شود.

اگرچه کشوی ناوبری می تواند بیش از پنج مقصد ناوبری را در خود جای دهد، اما به دلیل نیاز به دسترسی به نوار بالایی در اندازه های فشرده، این الگو به اندازه نوار ناوبری ایده آل نیست.

برگه‌های Material 3 و نوار برنامه پایین الگوهای پیمایش ثانویه هستند که می‌توانید از آنها برای تکمیل پیمایش اولیه یا نمایش در نماهای کودکان استفاده کنید.

اقدامات چیدمان

کنترل هایی را برای فعال کردن کاربران برای انجام اقدامات ارائه دهید. الگوهای رایج عبارتند از اقدامات نوار بالا، دکمه عمل شناور (FAB) و منوها.

برای کارهایی که بیشترین اهمیت را دارند، یک FAB دکمه بزرگ و برجسته ای را برای کاربر فراهم می کند. هر بار فقط یک اقدام در این سطح ارائه دهید. یک FAB می‌تواند در اندازه‌های متعدد و به شکل گسترده‌ای که شامل یک برچسب است ظاهر شود. Scaffold برای سنجاق کردن یک FAB استفاده کنید، مطمئن شوید که همیشه حتی در هنگام اسکرول توسط آن قابل مشاهده است.

می‌توانید کنش‌های ثانویه را در نوار بالا یا، اگر نزدیک به محتوای مرتبط گروه‌بندی شده است، در داخل صفحه قرار دهید.

برای هرگونه اقدام اضافی که به‌سرعت یا مکرراً مورد نیاز نیست، آن اقدامات را در منوی سرریز اضافه کنید.

چیدمان های متعارف

از طرح‌بندی‌های متعارف به‌عنوان نقطه شروع استفاده کنید، ترکیب‌های آماده برای استفاده که به طرح‌بندی‌ها کمک می‌کند تا با موارد استفاده رایج و اندازه‌های صفحه سازگار شوند. این طرح‌بندی‌ها زیبایی‌شناسانه و کاربردی هستند و از راهنمای Material 3 مشتق شده‌اند.

چارچوب Android شامل اجزای تخصصی است که اجرای طرح‌بندی‌ها را با استفاده از Jetpack Compose یا Views API ساده و قابل اعتماد می‌کند.

چیدمان فهرست-جزئیات

طرح‌بندی جزئیات فهرست، کاربران را قادر می‌سازد تا فهرست‌هایی از مواردی را که دارای اطلاعات توصیفی، توضیحی، یا سایر اطلاعات تکمیلی-جزئیات آیتم هستند- کاوش کنند. برای اندازه های صفحه نمایش فشرده، فقط فهرست یا نمای جزئیات قابل مشاهده است. فهرست‌ها با نمایش مجموعه‌ای از محتوا در یک طرح‌بندی مبتنی بر ردیف، رایج‌ترین شکل طرح‌بندی برنامه‌ها را تشکیل می‌دهند. جزئیات فهرست برای برنامه‌های پیام‌رسان، مدیران مخاطب، مرورگرهای فایل یا هر برنامه‌ای که محتوا را می‌توان به‌عنوان فهرستی از مواردی که اطلاعات اضافی را نشان می‌دهند سازمان‌دهی کرد، ایده‌آل است.

محتوا می تواند ثابت یا پویا باشد.

• محتوای پویا محتوایی است که برنامه شما در لحظه ارائه می‌کند و برای نمایش محتوای تولید شده توسط کاربر یا نشان دادن اولویت‌ها یا اقدامات کاربر ایده‌آل است. به عنوان مثال، یک برنامه عکس را با لیستی از عکس های تولید شده توسط کاربر با قابلیت پیمایش تصور کنید که برای هر کاربر منحصر به فرد است و با آپلود تصاویر بیشتر توسط کاربر تغییر می کند. این تصاویر محتوای پویا هستند.
• محتوای ثابت نشان دهنده محتوای سخت کد شده است که فقط با ایجاد تغییرات مستقیم در کد برنامه شما قابل تغییر است. نمونه‌هایی از محتوای ثابت، تصاویر و متن‌هایی هستند که هر کاربر ممکن است ببیند.

فایل Now in Android Figma نمونه های طرح بندی متعددی را ارائه می دهد. مثال زیر مجموعه ای تک بعدی از محتوا را نشان می دهد.

برای راهنمایی طراحی بیشتر در مورد اجزای لیست و مشخصات، لیست های Material 3 را کاوش کنید.

طرح خوراک

طرح‌بندی فید عناصر محتوای معادل را در یک شبکه قابل تنظیم برای مشاهده سریع و راحت حجم زیادی از محتوا مرتب می‌کند. ( دستورالعمل‌های مواد 3 را برای استفاده از کارت‌ها در یک مجموعه ببینید). محتوا می تواند پویا باشد، به این معنی که از یک منبع خارجی پویا مانند یک API "تغذیه" می شود.

طرح‌بندی شبکه‌ای از هر دو سطر و ستون تشکیل شده است که توسط اصول مهار ضمنی یا صریح ساخته شده‌اند. (برای اطلاعات بیشتر به محتویات این صفحه مراجعه کنید.) یک طرح بندی شبکه ای را می توان به صورت سفت و سخت تری اعمال کرد یا برای تغییر سطرها و ستون ها تکان داد. هر دو باید کاربرد ثابت فاصله و منطق را داشته باشند تا از سردرگمی کاربران جلوگیری شود. رهنمودهای Material 3 در مورد طراحی فیدها را کاوش کنید.

می توانید یک طرح فید را در Compose with Lazy lists یا lazy grids یا در Views با RecyclerView یا CardView پیاده سازی کنید.

پشتیبانی از طرح بندی صفحه

نمای تلفن همراه ممکن است به محتوا یا کنترل‌های پشتیبانی نیاز داشته باشد. معمولاً به‌صورت برگه‌ها یا دیالوگ‌ها، می‌توانند به نمای اصلی کمک کنند تا متمرکز و بی‌نظم بماند. راهنمای M3 را برای استفاده از طرح بندی متعارف پانل پشتیبان بررسی کنید.

درباره راهنمای M3 برای صفحات پایین بیاموزید.

چیدمان های نسبی

ورودی‌ها، محتوا یا سایر کنش‌ها ممکن است نسبت به یکدیگر یا محدود به یک محفظه والد ظاهر شوند. طرح‌بندی‌ها می‌توانند سفارشی‌تر باشند، اما مطمئن شوید که از گروه‌بندی، ستون‌ها و فاصله‌گذاری منسجم پیروی می‌کنید.

Layout ها همچنین می توانند از ترکیبی از انواع چیدمان استفاده کنند. برای مثال، ممکن است یک چرخ فلک یا اسکرول افقی را با کارت های عمودی جفت کنید. یا، می توانید نمودار سفارشی با داده های لیست عمودی ارائه دهید.

می توانید محتوا را در ردیف های پیمایش یا ستون هایی با ردیف های تنبل و ستون های تنبل ارائه دهید.

درباره اصول چیدمان Compose و آنچه که یک Composable را می سازد بیشتر بیاموزید.

همانطور که در شکل زیر نشان داده شده است، احراز هویت یک طرح نسبی رایج است.

چیدمان تمام صفحه یکی دیگر از چیدمان های رایج است که در حالت غوطه ور استفاده می شود.

اگر به جای Compose با Views کار می‌کنید، می‌توانید از ConstraintLayout برای چیدمان نماها بر اساس روابط بین نماهای خواهر و برادر و چیدمان والد استفاده کنید و امکان طرح‌بندی‌های بزرگ و پیچیده را فراهم کنید. ConstraintLayout به شما امکان می دهد به جای ویرایش XML با استفاده از ویرایشگر طرح، به طور کامل با کشیدن و رها کردن بسازید. درباره ایجاد رابط کاربری با ویرایشگر طرح‌بندی بیشتر بیاموزید.

چیدمان ها را تطبیق دهید

طراحی تطبیقی ​​تمرین طراحی طرح‌بندی‌هایی است که با نقاط شکست و دستگاه‌های خاص سازگار می‌شوند. معمولاً عرض دستگاه را در نظر می گیریم تا تعیین کنیم که چیدمان باید در کجا تغییر کند یا تطبیق یابد. هم وب و هم اندروید از مفاهیم طراحی پاسخگو، مانند شبکه‌های منعطف و تصاویر، برای ایجاد طرح‌بندی‌هایی استفاده می‌کنند که بهتر به زمینه خود پاسخ می‌دهند.

برای دستورالعمل‌های طراحی در مورد تطبیق طرح‌بندی‌ها با اندازه‌های بزرگ صفحه، راهنمای توسعه‌دهنده اندازه‌های مختلف صفحه نمایش پشتیبانی در Compose و صفحه اعمال طرح‌بندی M3 را بخوانید. همچنین می‌توانید برای الهام گرفتن و اجرای طرح‌بندی‌های صفحه‌نمایش بزرگ، گالری متعارف صفحه‌نمایش بزرگ اندروید را بررسی کنید.

اگرچه لازم نیست هر برنامه در هر اندازه صفحه در دسترس باشد، اما به کاربران شما آزادی بیشتری در زمینه ارگونومی، قابلیت استفاده و کیفیت برنامه می دهد.

• می‌توانید صفحه‌های کلیدی را طراحی کنید (مفاهیم ضروری یا برنامه‌تان را به اشتراک بگذارید) با اندازه‌های کلاس به‌عنوان نقاط شکست تا به‌عنوان دستورالعمل عمل کنند.
• یا محتوا را طوری طراحی کنید که با توجه به اینکه چگونه محتوا باید محدود شود، گسترش یابد یا جریان مجدد پیدا کند، پاسخگو باشد.

برای اطلاعات بیشتر در مورد طرح‌بندی، صفحه درک طرح‌بندی Material Design 3 (M3) را بررسی کنید.

بازدیدهای وب

Webview نمایی است که صفحات وب درون برنامه را نمایش می دهد. در بیشتر موارد، توصیه می کنیم از یک مرورگر وب استاندارد مانند کروم برای ارائه محتوا به کاربر استفاده کنید. برای کسب اطلاعات بیشتر در مورد مرورگرهای وب، راهنمای فراخوانی مرورگر با هدف را بخوانید.