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

أصبحت أدوات التطبيقات (أحيانًا "التطبيقات المصغّرة") إحدى الميزات التي تم تقديمها في الإصدار 1.5 من Android وتم إدخال تحسينات كبيرة عليها في الإصدارين 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. اخترنا 144 بكسل مستقل الكثافة كمثال حد أدنى جيد للعرض للتسميات النصية.

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

• 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. استخرِج التنسيقات والسمات المرنة.

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

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

استخدام حزمة نماذج أداة التطبيق

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

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

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

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