إرشادات تصميم أداة التطبيقات

تعد التطبيقات المصغّرة (التي تُعرف أحيانًا باسم "التطبيقات المصغّرة") إحدى الميزات التي تم تقديمها في الإصدار Android 1.5 وقد تم تحسينها إلى حد كبير في الإصدارين 3.0 و3.1 من نظام Android. ويمكن أن تعرض الأداة معلومات التطبيق في الوقت المناسب أو ذات الصلة بموضوع البحث في لمح البصر، على الشاشة الرئيسية للمستخدم. تتضمن الصورة العادية لنظام Android العديد من التطبيقات المصغّرة، من بينها أداة "الساعة" و"الموسيقى" والتطبيقات الأخرى.

الشكل 1. أمثلة على تطبيقات مصغّرة في نظام Android 4.0

يوضّح هذا المستند طريقة تصميم تطبيق مصغّر بحيث يتلاءم بشكلٍ رسومي مع التطبيقات المصغّرة الأخرى ومع العناصر الأخرى على الشاشة الرئيسية في Android، مثل رموز مشغّل التطبيقات والاختصارات. كما يصف بعض معايير الأعمال الفنية المصغّرة وبعض النصائح والحيل الخاصة برسومات الأداة.

لمزيد من المعلومات عن تطوير التطبيقات المصغّرة، يُرجى الاطّلاع على قسم التطبيقات المصغّرة في دليل مطوّري البرامج.

بنية الأداة القياسية

تشتمل تطبيقات Android المصغّرة النموذجية على ثلاثة مكونات رئيسية: مربع إحاطة وإطار وعناصر التحكم الرسومية للأداة وعناصر أخرى. يمكن أن تحتوي أدوات التطبيقات على مجموعة فرعية من أدوات العرض في Android؛ تتضمن عناصر التحكم المدعومة التصنيفات النصية والأزرار والصور. للحصول على قائمة كاملة بطرق العرض المتاحة، راجِع القسم إنشاء تنسيق أداة التطبيق في دليل مطوّر البرامج. تترك التطبيقات المصغّرة جيدة التصميم بعض الهوامش بين حواف مربع الإحاطة والإطار، والمساحة المتروكة بين الحواف الداخلية للإطار وعناصر التحكم في الأداة.

الشكل 2. تحتوي التطبيقات المصغّرة بشكل عام على هوامش بين مربع الإحاطة والإطار، والمساحة المتروكة بين عناصر التحكم في الإطار والأداة.

ملاحظة: بدءًا من الإصدار 4.0 من نظام التشغيل Android، يتم منح التطبيقات المصغّرة تلقائيًا هوامش بين إطار الأداة ومربّع حدود الأداة لتوفير محاذاة أفضل مع التطبيقات المصغّرة والرموز الأخرى على الشاشة الرئيسية للمستخدم. للاستفادة من هذا السلوك الموصى به بشدّة، اضبط targetSdkVersion لتطبيقك على 14 أو أعلى.

تستند التطبيقات المصغّرة التي تم تصميمها لتلائم بصريًا مع التطبيقات المصغّرة الأخرى على الشاشة الرئيسية إلى إشارات من العناصر الأخرى على الشاشة الرئيسية لضمان المحاذاة، كما تستخدم تأثيرات التظليل العادية. تم وصف كل هذه التفاصيل في هذه الصفحة.

تحديد حجم تطبيقك المصغّر

يجب أن تحدّد كل تطبيق مصغّر minWidth وminHeight، ما يشير إلى الحدّ الأدنى من المساحة التي يجب أن تستهلكها تلقائيًا. عندما يضيف المستخدمون أداة إلى شاشتهم الرئيسية، ستستهلك بشكل عام أكثر من الحد الأدنى للعرض والارتفاع اللذين تحدّدهما. توفر شاشات Android الرئيسية للمستخدمين شبكة من المساحات المتاحة التي يمكنهم وضع الأدوات والأيقونات فيها. يمكن أن تختلف هذه الشبكة حسب الجهاز؛ على سبيل المثال، توفر العديد من الهواتف شبكة 4×4، ويمكن أن توفر الأجهزة اللوحية شبكة أكبر مقاس 8×7. عند إضافة تطبيقك المصغّر، ستتم توسعته بحيث يشغل الحد الأدنى من عدد الخلايا أفقيًا وعموديًا، وهو المطلوب لاستيفاء قيود minWidth وminHeight. كما نناقش في قسم تصميم تنسيقات الأدوات والرسومات الخلفية أدناه، يسمح استخدام خلفيات ذات تسع رقعات وتصاميم مرنة لأدوات التطبيقات بالتكيّف بشكل أنيق مع شبكة الشاشة الرئيسية للجهاز ويبقى قابلاً للاستخدام ورائعًا من الناحية الجمالية.

في حين أن عرض الخلية وارتفاعها - بالإضافة إلى مقدار الهوامش التلقائية المطبقة على الأدوات - قد يختلف عبر الأجهزة، يمكنك استخدام الجدول أدناه لتقدير الحد الأدنى تقريبًا لأبعاد الأداة، وفقًا للعدد المطلوب من خلايا الشبكة المشغولة:

عدد الخلايا (الأعمدة أو الصفوف)	الحجم المتوفّر (dp) (minWidth أو minHeight)
1	40 بكسل مستقل الكثافة
2	110 بكسل مستقل الكثافة
3	180 بكسل مستقل الكثافة
4	250 بكسل مستقل الكثافة
…	…
n	70 × n − 30

من الممارسات الجيدة أن تكون مُحافظًا على الترميزَين minWidth وminHeight، مع تحديد الحدّ الأدنى للحجم الذي يعرض التطبيق المصغّر في حالة تلقائية جيدة. وللحصول على مثال حول كيفية تقديم minWidth وminHeight، لنفترض أنّ لديك أداة لمشغّل موسيقى تعرض اسم فنان الأغنية الذي يتم تشغيله حاليًا وعنوانها (بتنسيق عمودي)، وزر تشغيل وزر التالي:

الشكل 3. مثال على أداة لمشغّل الموسيقى

يجب أن يكون الحد الأدنى للارتفاع هو ارتفاع عرضَي TextView للفنان والعنوان، بالإضافة إلى بعض الهوامش النصية. يجب أن يكون الحد الأدنى للعرض هو الحدّ الأدنى للعرض القابل للاستخدام للزرَين تشغيل والتالي، بالإضافة إلى الحدّ الأدنى لعرض النص (على سبيل المثال، عرض 10 أحرف)، بالإضافة إلى أي هوامش نصية أفقية.

الشكل 4. أمثلة على المقاسات والهوامش لعمليات حساب minWidth/minHeight اخترنا 144dp كمثال جيد لعرض حد أدنى للتسميات النصية.

في ما يلي أمثلة على العمليات الحسابية:

• minWidth = 144 بكسل مستقل الكثافة + (2 × 8 بكسل مستقل الكثافة) + (2 × 56 بكسل مستقل الكثافة) = 272 بكسل مستقل الكثافة
• minHeight = 48 بكسل مستقل الكثافة + (2 × 4 بكسل مستقل الكثافة) = 56 بكسل مستقل الكثافة

إذا كانت هناك أي مساحة متروكة للمحتوى مضمّن في خلفية تسعة لاصقة في التطبيق المصغّر، عليك إضافتها إلى minWidth وminHeight وفقًا لذلك.

تطبيقات مصغّرة يمكن تغيير حجمها

يمكن تغيير حجم التطبيقات المصغّرة أفقيًا و/أو عموديًا بدءًا من الإصدار 3.1 من نظام التشغيل Android، ما يعني أنّ minWidth وminHeight سيصبحان الحجم التلقائي للتطبيق المصغّر. يمكنك تحديد الحدّ الأدنى لحجم التطبيق المصغّر باستخدام الترميزَين minResizeWidth وminResizeHeight، ويجب أن تحدّد هاتان القيمتان الحجم الذي ستكون الأداة غير مقروءة أو غير قابلة للاستخدام من خلالهما.

وهذه الميزة مفضّلة بشكل عام للتطبيقات المصغّرة التي تستند إلى ListView أو GridView.

إضافة الهوامش إلى أداة التطبيق

كما ذكرنا سابقًا، سيضيف Android 4.0 تلقائيًا هوامش صغيرة عادية إلى كل حافة من التطبيقات المصغّرة على الشاشة الرئيسية، وذلك في ما يتعلق بالتطبيقات التي تحدّد targetSdkVersion من 14 أو أعلى. يساعد ذلك في تحقيق توازن بصري بين الشاشة الرئيسية، وبالتالي ننصحك بعدم إضافة أي هوامش إضافية خارج شكل خلفية أداة التطبيق في الإصدار Android 4.0.

من السهل كتابة تنسيق واحد يتضمَّن هوامش مخصّصة مُطبَّقة على الإصدارات السابقة من النظام الأساسي، وليس له هوامش إضافية للإصدار Android 4.0 والإصدارات الأحدث. راجِع إضافة الهوامش إلى التطبيقات المصغّرة في دليل المطوّر للحصول على معلومات عن كيفية تحقيق ذلك باستخدام تنسيق XML.

تصميم تنسيقات الأدوات والرسومات الخلفية

تحتوي معظم التطبيقات المصغّرة على مستطيل خلفية خالص أو شكل مستطيل مستدير. ومن أفضل الممارسات تحديد هذا الشكل باستخدام تسع تصحيحات، بمعدل تصحيح واحد لكل كثافة شاشة (راجِع إتاحة الشاشات المتعددة لمعرفة التفاصيل). يمكن إنشاء تسع رموز تصحيح باستخدام أداة draw9patch أو ببساطة باستخدام برنامج لتعديل الرسومات مثل Adobe® Photoshop. سيتيح ذلك لشكل خلفية الأداة أن يشغل المساحة المتاحة بالكامل. يجب أن تكون القطع التسعة من الحافة إلى الحافة بدون وحدات بكسل شفافة توفر هوامش إضافية، ويمكنك استخدام بضع وحدات بكسل للحدود للحصول على ظلال قطرات خفيفة أو تأثيرات خفية أخرى.

ملاحظة: كما هو الحال مع عناصر التحكّم في الأنشطة، عليك التأكّد من أنّ عناصر التحكّم التفاعلية تحتوي على حالات مضغوطة ومرئية فريدة باستخدام عناصر التحكّم في قائمة الحالات.

الشكل 5. تسع وحدات بكسل للحدود تشير إلى المناطق القابلة للمرونة والمساحة المتروكة للمحتوى.

تتمتع بعض التطبيقات المصغّرة، مثل تلك التي تستخدم StackView، بخلفية شفافة. في هذه الحالة، يجب أن يستخدم كل عنصر فردي في StackView خلفية من تسع رقعات تمتد من الحافة إلى الحافة مع القليل من وحدات البكسل الشفافة للهوامش أو معدومة بدونها.

بالنسبة إلى محتوى التطبيق المصغّر، يجب استخدام تنسيقات مرنة مثل RelativeLayout أو LinearLayout أو FrameLayout. مثلما يجب أن تتكيف تخطيطات نشاطك مع أحجام الشاشة المادية المختلفة، يجب أن تتكيّف تخطيطات الأدوات مع أحجام مختلفة لخلايا شبكة الشاشة الرئيسية.

في ما يلي مثال على التنسيق الذي يمكن أن يستخدمه تطبيق مصغّر للموسيقى يعرض معلومات نصية مع زرَّين. فهو يعتمد على المناقشة السابقة لإضافة الهوامش اعتمادًا على إصدار نظام التشغيل. ويُرجى العلم بأنّ الطريقة الأكثر فعالية ومرونة لإضافة الهوامش إلى الأداة هي لف إطار الأداة ومحتواها في FrameLayout مبطّنة.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

إذا ألقيت الآن نظرة على نموذج أداة الموسيقى من القسم السابق، يمكنك البدء في استخدام سمات التنسيقات المرنة مثل:

الشكل 6. استخرِج التنسيقات والسمات المرنة.

وعندما يُضيف المستخدم التطبيق المصغّر إلى شاشته الرئيسية، على جهاز Android 4.0 مثلاً، حيث يكون حجم كل خلية شبكة 80dp × 100dp ويتم تطبيق الهوامش 8dp تلقائيًا على جميع الأحجام، سيتم تمديد الأداة، كما يلي:

الشكل 7. ويتم عرض أداة الموسيقى على مثال شبكة 80dp × 100dp مع هوامش تلقائية 80dp يضيفها النظام.

استخدام حزمة نماذج التطبيقات المصغّرة

عند البدء في تصميم أداة جديدة أو تحديث أداة حالية، من المفيد أن تنظر أولاً إلى نماذج تصميم الأداة أدناه. تتضمن الحزمة القابلة للتنزيل أدناه رسومات خلفية من تسع رقعات وملفات XML وملفات Adobe® Photoshop المصدر لكثافات شاشة متعددة وأنماط تطبيقات مصغّرة لإصدار نظام التشغيل وألوان الأدوات. تحتوي حزمة النموذج أيضًا على رسومات مفيدة لجعل الأداة بالكامل أو أجزاء من الأداة (مثل الأزرار) تفاعلية.

الشكل 8. مقتطفات من حزمة نماذج التطبيقات المصغّرة (الكثافة المتوسطة، والداكنة، وأنماط Android 4.0/السابقة، والحالات التلقائية/المركّزة/الضغط)

يمكنك الحصول على أحدث أرشيف لحزمة نماذج أدوات التطبيق باستخدام الرابط أدناه:

تنزيل حزمة نماذج أداة التطبيق لنظام التشغيل Android 4.0 »