أصدقاء ذوو فرو وواجهات برمجة تطبيقات تكيّفية

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

‫Pawparazzi هو نموذج تطبيق يعرض هذه المفاهيم. تم تصميم هذا التطبيق وإنشاؤه لتسليط الضوء على التصميم التكيّفي باستخدام واجهات برمجة التطبيقات التكيّفية، مثل Grid وFlexbox.

لا يقتصر التفكير التكيّفي على تصميم نقاط توقّف، بل يشمل أيضًا التفكير في المحتوى ضمن حاويات مرنة.

كل شيء عبارة عن شبكة

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

تستخدم Pawparazzi شبكة تخطيط هرمية بدلاً من شبكة معيارية منتظمة أو شبكة أعمدة أحادية الاتجاه، ما يعني أنّه يتم تحديد الأعمدة والصفوف التي تتألف منها استنادًا إلى التسلسل الهرمي للمحتوى.

يجب أن يعتمد قرار اختيار نوع الشبكة على المحتوى. ابدأ بمحتوى تطبيقك وفكِّر في كيفية تجميع المحتوى معًا. ويساعد ذلك في تحديد بنية التنسيق العامة. يمكنك الاطّلاع على الشبكات والوحدات وبنية المحتوى والبدء على الكمبيوتر لمعرفة المزيد حول التفكير في اللوحات.

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

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

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

الشبكات هي مفهوم تصميم ثنائي الاتجاه، لذا يمكن أن يتدفق المحتوى في اتجاه أفقي وعمودي.

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

يتم إنجاز كل ذلك باستخدام Grid API.

استخدام هذه المكوّنات

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

طلبات البحث الدقيقة

من خلال تصميم شبكة تخطيط واستخدام شبكة وFlexbox، يمكننا توفير تخطيط متكيّف على شاشات متعددة، كما يمكننا استيعاب أشكال فريدة مثل الأجهزة القابلة للطي. ولكن ماذا عن سياقات المستخدمين المختلفة؟ يمكن لمستخدمي Android توصيل شاشة أو توصيل ماوس. تتيح لنا MediaQuery اتّخاذ قرارات دقيقة بشأن التصميم لاستيعاب المستخدمين في جميع السياقات.

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

---