تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
لا يرتبط تصميم واجهة مستخدم تطبيقك بعامل تصميم جهاز معين.
تحتاج تطبيقات Android إلى التكيّف مع عدد من أنواع الأجهزة المختلفة،
بدءًا من الهواتف المحمولة مقاس 4 بوصة إلى أجهزة التلفزيون مقاس 50 بوصة إلى أجهزة ChromeOS ذات النوافذ التي يمكن تغيير حجمها.
يتم رسم واجهة المستخدم الخاصة بالتطبيق داخل نافذة، ويمكن
أن يتغير حجمها حسب الحاجة. يمكنك استخدام مؤهلات الموارد لتوفير تخطيطات مختلفة
لأحجام نوافذ مختلفة. قد ترجع هذه الاختلافات إلى قيود في حجم شاشة الجهاز، أو قد يدفعها المستخدم الذي يستخدم وضع النوافذ المتعددة
لتغيير حجم النافذة.
تصميم محتوى سريع الاستجابة
يجب أن توفر تجربة غنية لجميع المستخدمين، بحيث يتعين عليك
أن تستفيد كل شاشة في تطبيقك إلى أقصى حد من خصائص النوافذ المتاحة
لك.
على سبيل المثال، قد يُخفي تطبيق يتم تشغيله في نافذة بالعرض الكامل لشاشة الهاتف بعض تفاصيل المحتوى عند الدخول في وضع النوافذ المتعددة، ويمكن أن يوسّع واجهة المستخدم الخاصة به لتوفير مزيد من المحتوى عند تشغيله في نافذة تشغل مساحة العرض الكامل لشاشة جهاز ChromeOS.
بالإضافة إلى تلبية توقعات المستخدمين هذه، من الضروري غالبًا توفير المزيد من المحتوى على الأجهزة الأكبر حجمًا لتجنب ترك الكثير من المسافات البيضاء أو إجراء تفاعلات محرجة بدون قصد. في الشكل التالي، يمكنك رؤية بعض المشكلات التي يمكن أن تنشأ عند تكييف تصميم واجهة المستخدم مع نافذة أكبر:
الشكل 1. يؤدي عدم وجود محتوى كافٍ في النوافذ ذات العرض الكبير إلى جعل مسافات بيضاء غير ملائمة وطول الأسطر الطويلة جدًا.
من المهم تقديم تجارب فريدة لا تقتصر على توسيع
عدد مشاهدات المحتوى لملء المساحة المتاحة. يمكنك تصميم واجهات المستخدم لتوفير تجربة المستخدم المثالية
لأحجام نوافذ معينة، حتى باستخدام تخطيطات وتطبيقات مصغّرة مختلفة تمامًا.
في الشكل 2، يتم استخدام
BottomNavigationView
كتنقل في المستوى الأعلى عندما تكون هناك مساحة رأسية كافية للقيام بذلك.
عند تصغير حجم النافذة، كما هو موضح على الجانب الأيسر من الشكل، يتم تنفيذ التنقل على المستوى الأعلى بدلاً من ذلك باستخدام
DrawerLayout.
الشكل 2. يتم استبدال شريط التنقل السفلي بدرج تنقل عندما تكون المساحة العمودية محدودة.
وفي ما يلي بعض الأمثلة الأخرى:
يمكن لأداة Toolbar إظهار أو إخفاء عناصر قائمة الإجراءات
حسب مقدار المساحة المتاحة.
يمكنك زيادة مقدار التفاصيل التي تعرضها لطرق العرض المخصّصة
لأن لديك مساحة أكبر لإجراء ذلك.
هذه كلها طرق رائعة للتأكد من أن المستخدمين يتمتعون بتجارب رائعة
أينما كانوا يشغّلون تطبيقك.
يمكنك العثور على المزيد من الأمثلة لأنماط التصميم سريعة الاستجابة والأفكار للتنسيقات
التكيُّفية على
material.io.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["# Design for different form factors\n\nThe design of your app's UI isn't tied to a particular device form factor.\nAndroid applications need to adapt to a number of different types of devices,\nfrom 4-inch handsets to 50-inch TVs to ChromeOS devices with resizable windows.\n| **Note:** Designing applications for television sets also requires attention to other factors, including interaction methods (i.e., dealing with the lack of a touch screen), legibility of text at large reading distances, and more. You can find more information on designing for TVs in the [Android TV documentation](/tv).\n\nYour app's user interface is drawn inside of a window, the size of which can\nchange at will. You use resource qualifiers to provide different layouts for\nvarying window sizes. These differences can be due to constraints in the size of\nthe device's screen, or they can be driven by the user using multi-window mode\nto change the window size.\n\nDesigning responsive content\n----------------------------\n\nYou should provide a rich experience for all of your users, so you should have\neach screen in your app take full advantage of the window real estate available\nto you.\n\nFor example, an app running in a window taking up the full width of a phone\nscreen could perhaps hide details for a piece of content when entering\nmulti-window mode, and it could expand its user interface to provide more\ncontent when running in a window taking up the full width of a ChromeOS\ndevice's screen.\n\nIn addition to addressing these user expectations, it's often necessary to\nprovide more content on larger devices to avoid leaving too much whitespace or\nunwittingly introducing awkward interactions. In the following figure, you can\nsee some of the problems that can arise when adapting a user interface design\nfor a larger window:\n\n**Figure 1.** Not enough content on large-width windows leads to awkward whitespace and exceedingly long line lengths.\n| **Note:** After deciding at which window sizes you will provide difference resources, see [Providing Alternate Resources](/guide/topics/resources/providing-resources#AlternativeResources) for more detail on how to implement your designs.\n\nTo learn more about designing responsive navigation experiences, see [Navigation\nfor responsive UIs](/guide/topics/large-screens/navigation-for-responsive-uis).\n\nProviding tailored user experiences\n-----------------------------------\n\nIt's important to provide unique experiences that go beyond expanding your\ncontent views to fill available space. You can tailor user interfaces to provide\nthe ideal user experience for given window sizes, even using entirely different\nlayouts and widgets.\n\nIn figure 2, a\n[`BottomNavigationView`](/reference/com/google/android/material/bottomnavigation/BottomNavigationView)\nis used as top-level navigation when there is adequate vertical space to do so.\nWhen the size of the window is reduced, as shown on the right side of the\nfigure, top-level navigation is instead implemented using a\n[`DrawerLayout`](/reference/androidx/drawerlayout/widget/DrawerLayout).\n\n**Figure 2.** The bottom nav bar is replaced with a nav drawer when vertical\nspace is limited.\n\nHere are some other examples:\n\n- A [`Toolbar`](/reference/android/widget/Toolbar) can show or hide action menu items given the amount of available space.\n- A [`RecyclerView.LayoutManager`](/reference/androidx/recyclerview/widget/RecyclerView.LayoutManager) could change its span count to take full advantage of the size of a window\n- You can increase the amount of detail you show for custom views as you have more space to do so.\n\nThese are all great ways to make sure that your users have great experiences\nwherever they're running your app.\n\nYou can find more examples of responsive design patterns and ideas for adaptive\nlayouts on\n[material.io](https://material.io/design/layout/component-behavior.html#responsive-patterns)."]]
