كيفية تصميم UI / UX لأحدث تحديثات Android 9 و 10

لوحة الألوان

بالنسبة إلى لوحة ألوان التصميم متعدد الأبعاد ، تفضل Google نظام 'لونين' مع المتغيرات:

على سبيل المثال ، كما في هذه الصورة. سيكون لونك الأساسي أرجوانيًا ، ويكون لونك الثانوي هو السماوي. ثم بالنسبة للعناصر الأخرى لواجهة المستخدم الخاصة بك ، يمكنك استخدام متغيرات الظل من اللون الأرجواني والسماوي ، بحيث يمتزج كل شيء معًا.

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

تخطيط الشبكة سريع الاستجابة

إن فهم تخطيط الشبكة سريع الاستجابة يعني فهم كيفية القيام بذلك كثافة البكسل وأعمال تكييف الشاشة التلقائي. بالنسبة للجزء الأكبر ، يتراوح متوسط ​​DPI للهاتف Android في مكان ما بين 300 إلى 480 نقطة في البوصة.

مع وضع ذلك في الاعتبار ، ستتمكن شاشة 300 نقطة في البوصة عادةً من عرض ما يصل إلى 4 أعمدة:

بينما ستعرض الشاشة بدقة 600 نقطة في البوصة ما يصل إلى 8 أعمدة.

يوجد بين كل عمود 'مزاريب' ، وهي في الأساس المناطق التي تفصل كل عمود. لذا على الهاتف المحمول بزاوية 360dp ، سيكون كل ميزاب حوالي 16dp.

فهم شاشة DPI

عند تصميم واجهة المستخدم ، سواء كانت واجهة مستخدم للنظام أو واجهة مستخدم لتطبيقك ، يجب أن تأخذ في الاعتبار كثافات البكسل المختلفة لأحجام الهواتف المختلفة. فيما يلي مخطط لدقة الشاشة الأكثر شيوعًا وكثافة البكسل:

لذلك ، كقاعدة عامة ، عند تصميم سمة أو تطبيق 'عالمي' ، وعدم التركيز على إنشاء سمات لجهاز واحد ، يجب أن تبدأ بأقل كثافة. هذا لأنه إذا بدأت التصميم الخاص بك عند 1x ، فعليك ببساطة أن تأخذ القياسات بالبكسل ، وستظل القيم كما هي عبر DPs.

ومع ذلك ، إذا كنت تصمم لـ 3.5x ، فأنت بحاجة إلى تقسيم جميع القيم على 3.5 للتكيف مع الكثافات الأخرى ، وبعد ذلك يصبح الأمر مجرد مشكلة في حساب قيم DP المتعددة.

نصائح إضافية لتصميم Android 10 UI / UX

إذا كنت بحاجة إلى لون مخصص لمكونات السمة مثل أجهزة الراديو والأزرار ومربعات الاختيار وما إلى ذلك ، فيجب عليك ذلك ليس استخدم العناصر القابلة للرسم لإظهار الحالات المختلفة ( فحص ، نقر ، إلخ) . لأنه عند استخدام العناصر القابلة للرسم ، تفقد تأثيرات تصميم المواد الأصلية (مثل تموج) التي قامت Google بتحديثها على نطاق واسع في Android 9 و Android 10.

عند العمل مع التصميم متعدد الأبعاد ، تتضمن Google الكثير من الأشياء الجيدة التي يمكنك الاستفادة منها ، وسوف تتدفق بشكل طبيعي أكثر مع واجهة المستخدم / UX الخاصة بك.

على سبيل المثال ، إليك بعض الكلمات الرئيسية لتخصيص المكونات باستخدام عناصر تصميم المواد المضمنة ، وسيظل تطبيقك أو UI / UX يتمتعان بسلوك النظام الأصلي وحالات واجهة المستخدم.

زر مع لون مخصص android: backgroundTint = '@ color / red' ----- زر راديو مع لون مخصص android: buttonTint = '@ color / red' ----- الصور والأيقونات android: drawableTint = '@ color / أحمر '----- ProgressBar مع لون مخصص android: progressTint =' @ color / red '

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

android: الارتفاع = '1dp'

يعد دمج العلامات والخصائص الأصلية مفيدًا للغاية ، لمنحك تحكمًا أفضل في ملفات XML يمكن إدارتها.

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

android: animateLayoutChanges = 'صحيح'