كيفية تصميم واجهة مستخدم لتطبيق Android لا ترقى

. لكن لماذا لا يستطيع المطورون فعل الشيء نفسه؟

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

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

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

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

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

ما لم تكن تريد حقًا شيئًا آخر ، التزم بتصميم متعدد الأبعاد

لا يحتاج تطبيقك إلى ' فريد' و ' تبرز من البقية ' من أجل أن تكون مشهورة وذات مظهر جيد. هذا ما تقدمه Google تصميم المواد تم إعدادها لتحقيق - معيار لواجهة مستخدم التطبيقات عبر المجال ، وقد قاموا بعمل جيد. هناك عدد كبير من التطبيقات الشائعة التي تلتزم بتصميم متعدد الأبعاد - بعض من أكبر الأسماء في تطبيقات Android ، مثل SwiftKey و Nova Launcher و Textra SMS و YouTube ، على سبيل المثال لا الحصر.

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

يعد بدء استخدام التصميم متعدد الأبعاد أمرًا سهلاً للغاية ، وهناك عدد قليل من الأدوات التي تجعله أبسط ، وسنقوم بإدراجها أدناه:

محرر موضوع المواد (macOS + Sketch)
لوحة ألوان تصميم المواد المكون الإضافي (فوتوشوب / المصور)
تصميم المواد UI Kit PSD (محل تصوير)
مجموعة واجهة مستخدم تصميم مواد Android ( رسم)
مولد موضوع واجهة المستخدم المادية

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

MaterialDesignBlog - 15 نموذجًا رائعًا للتصميم متعدد الأبعاد تم إجراؤه بشكل صحيح
MockPlus - 12 من أفضل مواقع تصميم المواد لاستلهام الإلهام
AndroidAuthority - أفضل 10 تطبيقات لتصميم المواد لنظام Android

التدرجات اللونية أسهل بكثير مما تعتقد

كبديل للتصميم متعدد الأبعاد ، تكون التدرجات اللونية بسيطة وعصرية وملفتة للنظر. وقد تعتقد أن المصممين يقضون الكثير من الوقت في الرسم بكل الألوان ، أو تصميم التدرج النهائي. قد تكون مخطئًا - يمكن أن يتم ذلك في 10 ثوانٍ في PhotoShop.

10 ثوانٍ في واجهة مستخدم متدرجة فوتوشوب.

سأوجهك خلال هذا ، لأظهر لك مدى سهولة ذلك.

إنشاء مشروع PS جديد للجوال ( 1080 × 1920 بكسل @ 72 نقطة في البوصة تعمل بشكل جيد)

UIGradients.com - مجموعة كبيرة من التدرجات المعدة مسبقًا.

اذهب إلى UIGradients.com وتجد شيئًا يعجبك.

انسخ القيم السداسية العشرية للون من UIGradients

انسخ ألوان التدرج من أعلى المعاينة.

محدد التدرج فوتوشوب.

انقر بزر الماوس الأيمن فوق طبقة فارغة في PS ، وانتقل إلى Blending Options> Gradient Overlay.

انقر مباشرة على معاينة نمط التدرج في القائمة المنسدلة - لا تنقر على زر القائمة المنسدلة. يؤدي النقر مباشرة على التدرج إلى فتح محرر الألوان.

أدخل القيم السداسية من UIGradient إلى أداة PS gradient.

الآن ما عليك سوى لصق قيم سداسية اللون من UIGradient في محرر التدرج PS.

اضبط حسب الضرورة. لديك الآن خلفية متدرجة احترافية لتطبيق Android.

أدوات التدرج الأخرى التي تستحق المراجعة:

WebGradients.com
مولد الأشكال الروبوت ( لتوليد الأشكال عبر XML ، مع خيار التدرج)

استخدم SVGs بدلاً من JPG / PNG

بدلاً من استخدام ملفات PNG أو JPG للعناصر الرسومية (الأزرار والشعارات وما إلى ذلك) ، يجب أن تستخدم صور SVG ( الرسومات المتجهات قابلة لل) في حين أن. هذا لأنه يمكن تغيير حجم SVGs دون فقدان الجودة - على سبيل المثال ، إذا قمت بترقية JPG إلى قيمة أكبر ، فإنها تفقد الجودة وتصبح ضبابية / منقطة. SVG لا يفعل ذلك. يحاول الناس استخدام ملفات PNG ضخمة تصغير لملاءمة شاشات Android - عندما يمكنك بدلاً من ذلك استخدام صور SVG أصغر حجمًا تمت ترقيته دون أي خسارة في الجودة.

عالم علب غير قادر على بدء تسريع ثلاثي الأبعاد

علاوة على ذلك ، يمكن أن تصل SVGs إلى 60٪ إلى 80٪ أصغر في حجم الملف من PNG . هذا يعني أنه سيتم تحميل التطبيق أو موقع الويب للجوال بشكل أسرع للمستخدم ، وسيبدو جيدًا بغض النظر عن دقة الشاشة.

قم بتضمين الوضع الداكن باستخدام Theme.AppCompat.DayNight

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

راجع دليل Appual ' كيفية تنفيذ الوضع المظلم في تطبيق Android الخاص بك '.

استخدم نموذجًا أو مجموعة أدوات واجهة مستخدم الجوال

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

بعض الموارد الرائعة لنماذج ومجموعات واجهة مستخدم Android: