يساعدك هذا الدليل على بدء تصميم تطبيقات Android من خلال تحويل تصاميم iOS الحالية للأجهزة الجوّالة إلى Android باستخدام أنماط تجربة المستخدم الأساسية في Android، بالإضافة إلى التصميم المتعدد الأبعاد.
تمت مراعاة التكافؤ في التصميم وترتيبها حسب الكفاءة. إذا كنت تستخدم نظام تصميم أساسي مشتركًا، يمكنك ترجمة التصاميم باستخدام نظامك بدلاً من Material 3. يتّبع كل من Android وiOS فكرة أنّ المحتوى هو الأولوية.
بعد ذلك، يمكن أن تظهر العلامة التجارية من خلال اللون والنوع والشكل. ولا يتيح ذلك إمكانية قراءة المحتوى فحسب، بل يسهّل أيضًا إنشاء محتوى متماسك.
البدء بتصاميم iOS
قبل البدء، أنشئ نسخة من تطبيق iOS. يتم تقسيم تطبيقات iOS إلى ثلاثة أقسام: الأشرطة وطرق العرض وعناصر التحكّم. يمكنك استخدام هذه البنية للعمل على الترجمة، مع ترك التنسيق في النهاية.
اطّلِع على أجزاء تطبيق Android.
1. حذف واجهة مستخدم نظام التشغيل iOS
احذف شريط الحالة ومؤشر الصفحة الرئيسية. أصبحت هذه العملية أسهل الآن.
2- تغيير حجم الإطارات
يمكنك استخدام حجم Android المضغوط، أي 412 وحدة بكسل مستقلة عن الكثافة. ومع ذلك، ننصحك بمراعاة مجموعة من الأجهزة حتى ضمن حجم فئة النافذة. على سبيل المثال، يمكنك إجراء الاختبار على 360 وحدة بكسل مستقلة الكثافة لاستيعاب الشاشات الأصغر حجمًا، وتكييفها مع جميع أحجام فئات النوافذ.
3- الاستبدال بأشرطة نظام Android
يمكن أن تختلف واجهة مستخدم نظام التشغيل Android حسب جهاز المستخدم وإعداداته، ولكن يمكن أن يساعد عرض واجهة مستخدم نظام التشغيل التلقائية في توفير المزيد من السياق لتصاميمك. ضَع شريط الإشعارات في أعلى الشاشة، وشريط التنقّل بالإيماءات أو شريط التنقّل بثلاثة أزرار في أسفلها.
لمزيد من المعلومات، يُرجى الاطّلاع على أشرطة نظام Android.
4- استنادًا إلى طريقة التنقّل
استبدِل شريط علامات التبويب (شريط التنقّل السفلي) بشريط التنقّل.
ألقِ نظرة على خريطة مسار المستخدم. هل يستخدم تطبيق iOS قائمة "المزيد"؟ (تشير أفضل الممارسات في إرشادات واجهة المستخدم البشرية إلى عدم استخدام هذا النمط). التزم بخمسة عناصر أو أقل، واجعل شريط التنقّل السفلي مخصّصًا للتنقّل الأساسي، وحدِّد ما إذا كان يمكن نقل أي عناصر ثانوية، مثل الملف الشخصي أو الإعدادات، إلى شريط التطبيق العلوي، أو ربما لديك إجراء أساسي يمكن تحويله إلى زر إجراء عائم.
يجب أن يكون التنقّل الأساسي متاحًا دائمًا في طرق العرض الرئيسية (المستوى الأعلى لقسم في خريطة مسار المستخدم). يمكن أن تتضمّن طرق العرض الخاصة بالأطفال (أي شيء يندرج ضمن طريقة العرض الخاصة بالأهل) التنقّل الأساسي إذا كانت في مستوى أعلى في التسلسل الهرمي للتنقل وليست نافذة مشروطة.
عدِّل شريط التنقّل السفلي باستخدام الرموز والتصنيفات المناسبة. تتجنّب كلتا المنصّتين الحركة الجانبية بين وجهات التنقّل.
5. أشرطة التنقّل إلى أشرطة التطبيقات العلوية
قسِّم هذه المشاهدات إلى أقسام، بدءًا بالمشاهدات الرئيسية ثم المشاهدات الفرعية. يتألف شريط التطبيق من الجانب الأيسر الذي يضمّ التنقّل والعنوان، والجانب الأيمن الذي يضمّ بنود العمل.
إذا كان تطبيقك يستخدم قائمة لوحة التنقّل بدلاً من شريط التنقّل السفلي، سيظهر رمز اللوحة في جميع طرق العرض الرئيسية.
إذا لم يكن تطبيقك يتضمّن شريطًا جانبيًا أو قائمة، لن تعرض طرق العرض الرئيسية رمز التنقّل الأساسي.
يتم محاذاة العنوان إلى اليمين تلقائيًا في شريط التطبيق على Android.
تحتوي طرق عرض الأطفال على سهم للأعلى في موضع رمز التنقّل. يجب عدم الخلط بينها وبين الرجوع. ينقل السهم المتّجه للأعلى المستخدم إلى مستوى أعلى في التسلسل الهرمي للتنقّل في التطبيق ضمن مسار المستخدم، بينما يتيح زر الرجوع أو التمرير السريع من الحافة التنقّل في نظام التشغيل، ما يؤدي إلى نقل المستخدم إلى الخلف أو حتى إخراجه من التطبيق.
ماذا عن طرق العرض المشروطة؟ بالنسبة إلى النوافذ المنبثقة بملء الشاشة (مثل مشغّلات الفيديو والصور)، سيكون هذا الإجراء مشابهًا لشريط التطبيق الخاص بعرض العنصر التابع، باستثناء أنّه يجب تغيير رمز التنقّل إلى رمز الإغلاق الذي يؤدي إلى إغلاق النافذة المنبثقة.
6. مزيد من التنوع
ابدأ بعروض مشروطة كبيرة، وهي الأفضل لاستخدامها في تركيز انتباه المستخدم على مهمة. على أجهزة iOS، تظهر هذه الإشعارات غالبًا على شكل أوراق يمكن للمستخدم تمريرها للأسفل.
أكمِل عملية استبدال أشرطة التطبيقات. بالنسبة إلى النماذج المشروطة في iOS، استبدِل الجزء العلوي من النموذج والخلفية بشريط تطبيق في مربّع حوار بملء الشاشة.
ملاحظة إضافية: اطّلِع على ما إذا كان بإمكان أي من أوراقك النموذجية على iOS أن تتحوّل إلى أوراق سفلية.
نقل "ورقة الإجراءات" و"ورقة الأنشطة" إلى البطاقات السفلية (يمكن الآن ترجمة أوراق المشاركة أيضًا).
بالنسبة إلى التنبيهات، استخدِم مربّعات الحوار في النظام. إذا كنت تستخدمها لعرض معلومات مهمة تتطلّب من المستخدم الإقرار بها بطريقة ما، استبدِلها بمربّعات حوار النظام. تذكَّر أيضًا استبدال أي حقول إدخال وأدوات اختيار في هذه المرحلة.
7. المحتوى الفرعي
علامات التبويب أو أدوات عرض الصفحات أو علامات التبويب التي يمكن التمرير سريعًا بينها إذا كنت تستخدم عناصر تحكّم مقسّمة على iOS، سيتم تحويلها إلى علامات تبويب على Android. وتعمل كلتاهما كطريقة للفلترة بين طرق عرض المعلومات المتشابهة، ولكن غير المتطابقة. عادةً ما تكون علامات التبويب في Android مرتبطة بشريط التطبيق، وتتضمّن ميزة إضافية وهي إمكانية التمرير سريعًا بين المحتوى.
8. المحتوى وعناصر التحكّم
استنادًا إلى طريقة إعداد القيود أو سلوك تغيير الحجم، من المحتمل أن يكون قد تم تغيير حجم معظم المحتوى الخاص بك. ننصحك بتخصيص بعض الوقت لمراجعة الهوامش وضبطها. 16 وحدة بكسل مستقلة عن الكثافة هي قيمة عادية مناسبة للشاشات الصغيرة.
تستند الشبكة الأساسية إلى شبكة 8dp للمكوّنات و4dp للنصوص والأيقونات. تعمل شبكة 8 نقاط بشكل جيد على iOS، لذا يمكنك اعتبارها نقطة بداية لكلا النظامين الأساسيين.
عناصر التحكّم بدِّل مفاتيح التبديل هذه إلى مفاتيح تحكّم Android. استخدام مربّعات الاختيار وأزرار الاختيار في Android يتضمّن Android كل هذه الميزات.
إذا كانت لديك نماذج، استبدِل حقول النص في iOS بحقول نص في Android. تتضمّن المواد خيارات مثل المخطط التفصيلي أو التعبئة، لذا اختَر الخيار الذي يناسب علامتك التجارية بشكل أفضل.
تتضمّن قوائم Material بعض الاختلافات مقارنةً بخلايا الجداول في iOS:
- يتم استخدام خطوط الفواصل بشكل ضئيل.
- لا يتم استخدام المؤشرات في القوائم للمساعدة في الحدّ من التشويش المرئي.
- تلتزم الأبعاد بشبكة 8dp.
9. النمط
اللون: يتألف لون واجهة المستخدم من ألوان التمييز والألوان الدلالية وألوان الخلفية المجمّعة في نظام ألوان. يتم تطبيق هذه الألوان على واجهة المستخدم حسب أدوارها.
النوع: إذا كنت تستخدم خط نظام، استبدِل San Francisco. Roboto هو خط النظام التلقائي على Android. مع ذلك، ننصحك بالتعبير عن الأسلوب الفريد لعلامتك التجارية من خلال استخدام السمات وخطوط Google القابلة للتنزيل.
الرموز: ينطبق الأمر نفسه هنا. في حال استخدام رموز SF، تأكَّد من تحويلها كلها إلى رموز Material Icons أو رموز أخرى. اختَر الصيغة التي تناسب علامتك التجارية. هل تعلم أنّه يمكنك استخدام رموز Material على أي منصة؟
الحركة: يتضمّن كل من Android وiOS تصميمًا مميزًا للحركة، ويجب مراعاة ذلك في كل نظام أساسي. الحركة المادية هي حركة غنية بالمعلومات ومركزة ومعبَّر عنها. التموّج هو تمييز واضح يُستخدم في المكوّنات لتقديم ملاحظات عند اللمس. نظام الحركة هو مجموعة من أنماط الانتقال للاستفادة من الرسوم المتحركة الخاصة بتحويل الحاوية والمحور المشترك والتلاشي التدريجي والتلاشي. حدِّد ما إذا كانت العناصر في تصميمك تحتوي على حاويات ثابتة، والعلاقة بين العناصر، وكيفية ظهورها أو اختفائها.
10. ترتيب الخلفية
إذا كنت بصدد ترجمة نموذج أولي، هذا هو الوقت المناسب لإعادة ربط العناصر. ارجع إلى شريط التنقّل الأساسي. بعد ذلك، ستظهر أشرطة التطبيق، مع تذكُّر الفرق بين التنقّل للأعلى والرجوع للخلف، والحرص على اختيار انتقالات الصفحات المناسبة لنظام Android (المذكورة في الخطوة 9).
يجب أن يكون لديك نموذج أوّلي يعمل بكامل طاقته وجاهز، وبما أنّك غيّرت حجمه، فهو جاهز للتسليم.
دليل الأسلوب والمكوّنات
إذا كان لديك نظام تصميم أو دليل أنماط حالي، قد تتوفّر لديك أنماط أساسية خاصة بك (مثل اللون والنوع والرموز والأشكال) يمكن استخدامها مع التصميم المتعدد الأبعاد، تمامًا كما تستخدمها مع إرشادات iOS. باستخدام تخصيص التصميم المتعدد الأبعاد، يمكنك تخصيص مكوِّنات التصميم المتعدد الأبعاد باستخدام النمط الفريد لعلامتك التجارية من خلال اللون والنوع والشكل.
إنّ توفُّر إرشادات خاصة بكل منصة ليس أمرًا غير شائع بين المنتجات المتوافقة مع عدة منصات، ويمكن أن يجعل نظام التصميم الخاص بك أكثر تركيزًا على المستخدم.
أخيرًا، إذا كنت تعمل بدون نظام تصميم، عليك أن تعرف أنّه ليس كل تطبيق أو منتج بحاجة إلى نظام تصميم مخصّص بالكامل. ننصحك بإنشاء دليل أسلوب من صفحة واحدة. دليل الأسلوب هو مستند يوضّح المواصفات الأساسية للتصاميم. غالبًا ما تحتوي إرشادات بناء هوية العلامة التجارية على دليل أسلوب.
يمكن نسخ هذا الملف لنظام التشغيل Android واستخدامه كمصدر لتعديل الأنماط (أو الرموز أو المكوّنات أو المكتبة).