طرح بندی برنامه ها
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
هنگام طراحی برنامه‌ها برای Wear OS، در مورد طرح‌بندی‌هایی که برای هر تجربه انتخاب می‌کنید، آگاه باشید. از آنجایی که Wear OS بر روی نمایشگرهای دایره‌ای اجرا می‌شود و بریده شدن بیشتر از دستگاه‌های دستی رایج است، دو دسته از طرح‌بندی‌های متعارف وجود دارد که باید هنگام طراحی اپلیکیشن خود در نظر بگیرید.
طرح‌بندی‌های بدون پیمایش بر اطلاعات قابل مشاهده تمرکز می‌کنند و با تعامل کم یا بدون تعامل، ارزشی را به کاربران ارائه می‌دهند. به همین دلیل، ایجاد رفتار پاسخگو در این طرح‌بندی‌ها می‌تواند چالش برانگیز باشد:
- روی ترکیبی از زبان ها، مقیاس فونت، دستگاه ها و محتوای متغیر تست کنید.
- از طرح‌بندی‌های غیرقابل پیمایش فقط زمانی استفاده کنید که محتوا از قبل شناخته شده یا کنترل شده باشد، یا اگر باید از طرح خاصی استفاده کنید.
- حاشیه های بالا، پایین و کناری توصیه شده را روی طرح بندی اعمال کنید.
- حاشیه ها را در مقادیر درصد در مکان هایی که ممکن است محتوا بریده شود، تعریف کنید.
- عناصری را ترتیب دهید تا بهترین استفاده ممکن از فضای داخل صفحه نمایش را داشته باشید و تعادل را در اندازه های مختلف دستگاه حفظ کنید.
برای صفحاتی که حاوی اطلاعات بیشتری نسبت به یک صفحه نمایش هستند یا برای پشتیبانی از سفرهای طولانی تر و همه جانبه تر مورد نیاز هستند، از نمای پیمایش استفاده کنید.
- حاشیه های بالا، پایین و کناری توصیه شده را اعمال کنید.
- حاشیه های بیرونی را در مقادیر درصد تعریف کنید تا از برش در ابتدا و انتهای ظرف قابل پیمایش جلوگیری کنید.
- حاشیه ها را در مقادیر ثابت DP بین عناصر UI اعمال کنید.
نماهای اسکرول که از شیوه‌های طراحی واکنش‌گرا استفاده می‌کنند، معمولاً با طیف وسیعی از اندازه‌های صفحه سازگار می‌شوند. با این حال، در برخی موارد خاص، می‌توانید از یک نقطه شکست برای نادیده گرفتن ابعاد و تقویت طرح‌بندی‌ها استفاده کنید که گزینه‌های اضافی را نشان می‌دهند، قابلیت نگاه را بهبود می‌بخشند یا محتوا را بهتر بر روی صفحه نمایش می‌دهند. مثال زیر نشان می دهد که چگونه در صفحه های بزرگتر، دو دکمه پایینی باز می شوند:
کیت های طراحی فیگما
برای بررسی طرح‌بندی‌های طراحی با اجزا، گزینه‌ها و توصیه‌های داخلی برای ایجاد طرح‌های مختلف برنامه و کاشی که از بهترین شیوه‌ها پیروی می‌کنند ، از صفحه دانلود کیت طراحی دیدن کنید .
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
