تنسيقات التطبيق
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
عند تصميم تطبيقات لـ Wear OS، كن منتبهًا بشأن التنسيقات التي تختارها
لكل تجربة. لأنّ Wear OS يعمل على شاشات دائرية ويستغرق اقتصاصه ودمجه أكثر
شائعة أكثر من الأجهزة المحمولة باليد، يوجد فئتان من التخطيطات المتعارف عليها
التي يجب مراعاتها عند تصميم تطبيقك.
تركز التخطيطات التي لا تسمح بالتمرير على المعلومات السريعة وتقدم للمستخدمين قيمة باستخدام
تفاعل قليل أو معدوم. لهذا السبب، قد يكون من الصعب إنشاء
سلوك سريع الاستجابة في هذه التنسيقات:
- الاختبار على مجموعة من اللغات وحجم الخط والأجهزة والمتغيرات
المحتوى.
- استخدام تنسيقات غير قابلة للتمرير فقط عندما يكون المحتوى معروفًا أو متحكّمًا فيه
مسبقًا، أو إذا كان يجب عليك استخدام تصميم معين.
- طبِّق الهوامش العلوية والسفلية والجانبية الموصى بها على التنسيق.
- تحديد هوامش قيم النسبة المئوية في المواضع التي قد يتم عرض المحتوى فيها
اقتصاصًا.
- رتب العناصر لتحقيق أفضل استخدام ممكن للمساحة داخل
الشاشة والحفاظ على التوازن بين أحجام الأجهزة المختلفة.
بالنسبة إلى الصفحات التي تحتوي على معلومات أكثر مما يمكن عرضها في شاشة واحدة
لإنشاء رحلات أطول وأكثر شمولية، استخدِم شريط التمرير
مشاهدة.
عادةً ما تتكيف طرق عرض التمرير التي تستخدم ممارسات التصميم سريعة الاستجابة مع مجموعة من
أحجام الشاشة. ومع ذلك، في بعض الحالات الخاصة، يمكنك استخدام نقطة توقف
إلغاء الأبعاد وزيادة التنسيقات التي تعرض خيارات إضافية وتحسين
أو العرض السريع للمحتوى أو جعل المحتوى مناسبًا بشكل أفضل على الشاشة. المثال التالي
طريقة توسيع الزرَين السفليَين على الشاشات الأكبر حجمًا:
مجموعات أدوات تصميم Figma
انتقِل إلى صفحة تنزيل مجموعات التصميم لاستكشاف تخطيطات التصميم باستخدام
والمكونات والخيارات والتوصيات لإنشاء تطبيق ومربعات مختلفة
التصميمات التي تتبع أفضل الممارسات.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
