طرح‌بندی‌های رایج برای برنامه‌های بدون پیمایش
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
طرح‌بندی‌های نمایش برنامه بدون پیمایش شامل پخش‌کننده‌های رسانه، دیالوگ‌های تأیید، انتخاب‌کننده‌ها، تعویض‌کننده‌ها و صفحه‌های مخصوص تناسب اندام یا ردیابی با استفاده از نشانگرهای پیشرفت هستند. می‌توانید ارتفاع هر صفحه‌ای را محدود کنید، که تضمین می‌کند کاربر روی یک کار یا مجموعه‌ای از کنترل‌ها متمرکز است، نه اینکه نیاز به مرور فهرستی از گزینه‌ها داشته باشد. برای قرار دادن دستگاه‌هایی با اندازه‌های صفحه‌نمایش کوچک‌تر، با در نظر گرفتن اندازه محدود طراحی کنید، از قابلیت نگاه کردن و در آغوش گرفتن صفحه‌نمایش مدور در صورت لزوم اطمینان حاصل کنید.
طراحی های پاسخگو و بهینه بسازید
نماهای بدون پیمایش بر اطلاعات قابل مشاهده تمرکز می کنند و با کمترین تعامل به کاربران ارزش می دهند. با این حال، ایجاد رفتار پاسخگو در این طرح‌بندی‌ها می‌تواند چالش برانگیز باشد. برای رسیدگی به این موضوع، طرح‌بندی‌ها و مؤلفه‌های کتابخانه رابط کاربری Android خود را با رفتار پاسخ‌گوی داخلی، از جمله حاشیه‌ها و بالشتک‌های مبتنی بر درصد به‌روزرسانی کرده‌ایم. اگر از مؤلفه های Compose ما استفاده می کنید، می توانید به طور خودکار این پاسخگویی را به ارث ببرید.
برای طراحی‌های منحصربه‌فرد صفحه‌نمایش، اندازه‌های مختلف صفحه‌نمایش را به‌طور کامل تست کنید، اطمینان حاصل کنید که اجزا و عناصر به‌خوبی منطبق می‌شوند و از بریده شدن محتوا جلوگیری می‌کنند. حاشیه‌های درصدی ما به مقیاس‌بندی مؤثر فاصله‌دهنده‌ها کمک می‌کند، و توصیه می‌کنیم از نقطه شکست 225dp برای معرفی اطلاعات بیشتر و عملکرد بهبودیافته در صفحه‌های ساعت بزرگتر استفاده کنید.
بررسی کنید که اجزا با عرض و ارتفاع موجود مطابقت داشته باشند
همه اجزا به صورت پاسخگو ساخته می شوند، به این معنی که آنها با عرض موجود (و ارتفاع در حالت تمام صفحه) تطبیق می یابند. اطمینان حاصل کنید که حاشیه های لازم را دارید تا مطمئن شوید که محتوا توسط منحنی گرد صفحه نمایش قطع نمی شود. علاوه بر این، از رفتار چیدمان لازم اطمینان حاصل کنید تا مطمئن شوید که محتوای صفحه‌نمایش بدون پیمایش، طرح‌بندی را مجبور به پیمایش یا قطع شدن نمی‌کند.
طراحی های تطبیقی و متمایز بسازید
به منظور استفاده بهینه از فضای اضافی در اندازه های بزرگتر صفحه نمایش، یک نقطه شکست اندازه در 225dp اضافه کنید. این نقطه شکست امکان نمایش محتوای اضافی، گنجاندن اطلاعات بیشتر، گزینه‌ها، داده‌ها یا تغییر طرح‌بندی را برای مطابقت بهتر با اندازه صفحه نمایش بزرگتر ممکن می‌سازد.
این نیاز به طراحی متفاوتی برای هر نقطه شکست دارد. طراحی صفحه نمایش بزرگتر (225+) می تواند شامل عناصر اضافی زیر باشد:
اندازه را افزایش دهید یا وضعیت اجزای موجود را تغییر دهید
از نقطه شکست برای نمایش جزئیات بیشتر یا قابل مشاهده تر کردن محتوا استفاده کنید. فقط مطمئن شوید که تجربه یا عملکرد در صفحه کوچک خراب نیست و تغییرات صفحه نمایش بزرگ فقط اضافی هستند.
محتوا را در طرح بندی فعلی اضافه کنید
با افزودن مؤلفه ها یا محتوا، طرح بندی گزینه های اضافی، جزئیات و در نهایت ارزش را فراهم می کند.
این هرگز نباید به قیمت نگاه کردن باشد.
در سناریوهایی که یک تجربه به محتوای بیشتری نیاز دارد اما می‌خواهد یک طرح‌بندی بدون پیمایش را حفظ کند، طرح‌بندی چند صفحه‌ای را با صفحه‌بندی عمودی یا افقی در نظر بگیرید.
رفتار پاسخگو و سازگار
همه مؤلفه‌های موجود در کتابخانه Compose به‌طور خودکار با اندازه گسترده‌تر صفحه سازگار می‌شوند و عرض و ارتفاع را افزایش می‌دهند. به طور خاص برای این دیدگاه ها، استفاده از نقاط شکست می تواند تجربه غنی و ارزشمندی را برای همه کاربران ارائه دهد. همه حاشیه‌ها را بر حسب درصد تعریف کنید و محدودیت‌های عمودی را به‌گونه‌ای تعریف کنید که محتوای اصلی در وسط بتواند برای پر کردن ناحیه نمایش موجود کشیده شود.
بهترین کار این است که هنگام طراحی یک صفحه غیر پیمایشی را به بخش های بالا، وسط و پایین تقسیم کنید. به این ترتیب، می‌توانید حاشیه‌های داخلی را به قسمت بالا و پایین اضافه کنید تا از بریده شدن جلوگیری شود، اما اجازه دهید بخش میانی شما از تمام عرض صفحه استفاده کند. استفاده از دکمه اسکرول چرخشی را برای کنترل عناصر صفحه در زمانی که اندازه آن محدود است در نظر بگیرید، زیرا ضربه زدن به تعاملات ممکن است به تنهایی بهترین تجربه را ارائه نکند.
چک لیست
- طرح بندی های انعطاف پذیری ایجاد کنید که در همه اندازه های صفحه نمایش معقول به نظر می رسند.
- حاشیه های بالا، پایین و کناری توصیه شده را اعمال کنید.
- حاشیه ها را در مقادیر درصد در مکان هایی که ممکن است محتوا بریده شود، تعریف کنید.
- از محدودیت های چیدمان استفاده کنید تا عناصر به بهترین شکل ممکن از فضای داخل صفحه استفاده کنند و تعادل را در اندازه های مختلف دستگاه حفظ کنند.
- در صورت استفاده، متن زمان را در نظر بگیرید، اما با قسمت بالای صفحه همپوشانی نداشته باشد (برای اطلاعات بیشتر به نشانگرهای پیشرفت با شکاف بالا مراجعه کنید)
- برای استفاده بیشتر از فضای محدود، از دکمه های در آغوش گرفتن لبه استفاده کنید.
- استفاده از نقطه شکست در 225dp را در نظر بگیرید تا محتوای اضافی را معرفی کنید یا محتوای موجود را در اندازه‌های صفحه بزرگتر قابل مشاهده‌تر کنید.
نشانگرهای پیشرفت تمام صفحه
هیچ تغییر رفتاری در نشانگر پیشرفت وجود ندارد زیرا به طور خودکار با اندازه صفحه نمایش تطبیق می یابد، با این حال، برای استفاده بهینه از فضا، حاشیه های متناسب (درصد) و بالشتک را در ناحیه مرکزی اعمال کنید. همچنین یک نقطه شکست برای افزایش اندازه یا تعداد اجزا در صفحه نمایش بزرگتر در نظر بگیرید.
تجربیات متمایز ایجاد کنید
طرح‌بندی‌های بدون پیمایش قابل سفارشی‌سازی هستند، اما در میزان محتوایی که می‌توان به صفحه اضافه کرد و چه نوع مؤلفه‌هایی بهتر کار می‌کنند، محدودتر هستند. استفاده از دکمه‌های آیکون به جای دکمه‌های قرص‌دار پهن‌تر، استفاده بهتری از فضای محدود می‌کند و گرافیک‌های بصری مانند نشانگرهای پیشرفت و نقاط داده بزرگ به انتقال اطلاعات کلیدی به روش گرافیکی کمک می‌کنند. همه عناصری که قاب صفحه نمایش را در آغوش می گیرند، به طور خودکار با اندازه صفحه نمایش رشد می کنند، بنابراین تاثیرگذاری بیشتری خواهند داشت.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین به‌روزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین به‌روزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی."],[],[],null,["# Common layouts for non-scrolling apps\n\nNon-scrolling app view layouts include media players, confirmation dialogs,\npickers, switchers, and special fitness or tracking screens using progress\nindicators. You can restrict the height of any screen, which ensures the user is\nfocused on one task or set of controls, rather than needing to browse through a\nlist of options. To accommodate devices with smaller screen sizes, design with\nthe limited size in mind, ensuring glanceability and embracing the circular\nscreen where relevant.\n\nBuild responsive and optimized designs\n--------------------------------------\n\nNon-scrolling views focus on glanceable information and offer users value with\nminimal interaction. However, building responsive behavior into these layouts\ncan be challenging. To address this, we have updated our Android UI library\nlayouts and components with built-in responsive behavior, including\npercentage-based margins and padding. If you're utilizing our Compose\ncomponents, you can automatically inherit this responsiveness.\n\nFor unique screen designs, thoroughly test across a variety of screen sizes,\nensuring components and elements adapt smoothly and avoid content clipping. Our\npercentage margins help spacers scale effectively, and we recommend using a\nbreakpoint at 225dp to introduce additional information and enhanced\nfunctionality on larger watch screens.\n\nCheck that components adapt to the available width and height\n-------------------------------------------------------------\n\n\nAll components are built responsively, meaning they adapting to the available\nwidth (and height when full screen). Make sure you have the necessary margins to\nensure content doesn't get clipped by the rounding curve of the screen.\nAdditionally, ensure the necessary layout behavior to ensure your non-scrolling\nscreen content doesn't push the layout to scroll or get cut off. \n\n\n\u003cbr /\u003e\n\nBuild adaptive and differentiated designs\n-----------------------------------------\n\nIn order to best use the additional space on larger screen sizes, add a size\nbreakpoint at 225dp. This breakpoint makes it possible to reveal additional\ncontent, include more information, options, data, or change the layout to better\nsuit the larger screen size.\n\nThis requires a different design for each breakpoint. The larger screen design\n(225+) could include the following additional elements:\n\n### Increase the size or change the state of the existing components\n\n\nUse the breakpoint to show more detail or make the content more glanceable. Just\nmake sure the experience or functionality isn't broken on small screen and the\nlarge screen changes are only additional. \n\n\n\u003cbr /\u003e\n\n### Add content within the current layout\n\n\nBy adding components or content, the layout provides additional options, detail\nand ultimately, value.\n\nThis should never come at the cost of the glanceability. \n\n\u003cbr /\u003e\n\nUse pagination\n--------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination.\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library will automatically adapt to the wider\nscreen size, and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers. Define all margins in percentages, and define vertical constraints such\nthat the main content in the middle can stretch to fill the available display\narea.\n\nIt's best to break a non-scrolling screen into a top, middle, and bottom section\nwhen designing. This way, you can add inner margins to the top and bottom\nsection to avoid clipping, but allow your middle section to take advantage of\nthe full width of the screen. Consider the use of the rotary scroll button to\ncontrol elements of the screen when its size is limited, as tapping interactions\nalone may not provide the best experience.\n\n### Checklist\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate Time Text if used, but not overlapping the top section of the page (see progress indicators with a top gap for more)\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n**Full screen progress indicators**\n\nThere is no behavior change on the progress indicator as it automatically adapts\nto the screen size, however, consider applying proportional (percentage) margins\nand padding on the central area to best utilize space. Also consider a\nbreakpoint to increase the size or number of components on larger screen.\n\nCreate differentiated experiences\n---------------------------------\n\nNon-scrolling layouts are customizable, but are more limited in how much content\ncan be added to the screen and what kind of components work best. Using Icon\nButtons instead of wider pill shaped Buttons makes better use of the limited\nspace, and visual graphics like Progress Indicators and large data points help\ncommunicate key information in a graphical way. All elements that hug the screen\nbezel automatically grow with the screen size, so they become even more\nimpactful."]]
