كيفية تصميم واجهة مستخدم تطبيق Android لا تمتص
المبرمجون والمطورون ليسوا مصممين عمومًا - وهذا مقبول على نطاق واسع على أنه حقيقي. يميل المطورون إلى التركيز على عمل التطبيق - يركز المصممون على جعل التطبيق جذابًا من الناحية الجمالية . ولكن لماذا لا يستطيع المطورون أن يفعلوا الشيء نفسه؟
مرة أخرى في اليوم ، عندما كانت الصفحات المقصودة المتحركة المتحركة والتخطيطات الهائلة أمرًا ، فمن المؤكد أنه من المنطقي استئجار مصمم محترف. ولكن الاتجاه اليوم هو الحد الأدنى - أو على الأقل مبسطة إلى حد كبير.
اسمحوا لي أن أقدم لكم مثالا قصصيا - بعض الوقت ، طلب مني شخص لإنشاء شاشة البداية لبرامج الكمبيوتر الخاصة بهم. لذا فقد خرجت جميعًا - ولفتتها على ورقة رسم ، واستوردتها إلى PhotoShop ، وأوجدت الكثير من خطوط النيون الرائعة وتأثيراتها. يمكن أن يكون خلفية سطح مكتب ، بدلاً من شاشة البداية. النقطة الأساسية هي أنني خلقت هذا التصميم الفخم والمفصل حقًا لهم.
كما يمكنك ربما تخمين ، لم يعجبهم. كان التصميم الذي ذهبوا إليه حرفيًا شعارًا صغيرًا لبعض الدوائر الملونة المتداخلة ، واسم البرنامج الموجود تحته. مثل ، 2 دقيقة في وظيفة PhotoShop. وتعلم ماذا؟ كان عليّ أن أوافق على أنه أفضل مني.
وبالتالي فإن النقطة التي أثيرها هي - أعتقد أن المبرمجين يقعون في هذا الفخ من ارتكاب نفس الخطأ الذي ارتكبته. نميل إلى التفكير في واجهات المستخدم وشاشات البداية التي تحتاج إلى أن تكون هذه الأشياء الرائعة والجذابة التي تجعل التطبيق يبرز . لكن ليس عليهم أن يكونوا - بصراحة ، يجب ألا يكونوا كذلك. يجب أن نأخذ عقلية المبرمج ونطبقها على التصميم الجمالي - أعمال بسيطة ، وظيفية.
في هذه المقالة ، سننظر في بعض الطرق البسيطة لإنشاء تطبيق Android APP UI / UX الأنيق ، حتى لو لم يكن لديك أي خبرة في التصميم تقريبًا.
إلا إذا كنت تريد حقا شيء آخر ، والتمسك تصميم المواد
لا يحتاج تطبيقك إلى أن يكون " فريدًا" و " متميزًا عن الباقي" حتى يكون رائجًا ومظهره جيدًا. هذا ما تم تصميم Google Material Material لتحقيقه - وهو معيار لواجهة المستخدم الخاصة بالتطبيق في جميع أنحاء الصناعة ، وقد قاموا بعمل جيد. هناك الكثير من التطبيقات الشائعة التي تلتزم بالتصميم المادي - بعض من أكبر الأسماء في تطبيقات Android ، مثل SwiftKey و Nova Launcher و Textra SMS و YouTube ، على سبيل المثال لا الحصر.
ينصب التركيز الأساسي لـ Material Design على التصميم القائم على البطاقات ، مع لوحة ألوان صلبة. عملت Google مع كبار المصممين في الصناعة ، مستقاة الكثير من العناصر من ممارسات التصميم البسيطة ، ثم أصدرت الأمر برمته مجانًا - إنها صفقة جيدة جدًا ، نظرًا لأن دورات تصميم مواقع الويب والتطبيقات يمكنها تشغيل مئات الدولارات للكتب الإلكترونية ومقاطع الفيديو ، إلخ
إن البدء في تصميم المواد سهل للغاية ، وهناك عدد قليل من الأدوات التي تجعل الأمر أكثر بساطة ، والذي سنقوم بإدراجه أدناه:
- محرر سمة المادة (macOS + Sketch)
- المكون الإضافي للوحة ألوان المواد (PhotoShop / Illustrator)
- مواد التصميم UI Kit PSD (فوتوشوب)
- عدة UI لتصميم مواد Android ( رسم)
- المواد موضوع واجهة المستخدم مولد
وإذا كنت بحاجة إلى بعض الإلهام لإنشاء سمات تصميم مواد بسيطة وأنيقة ، فراجع مدونات القائمة هذه:
- MaterialDesignBlog - 15 أمثلة رهيبة لتصميم المواد القيام به الحق
- MockPlus - أمثلة على أفضل 12 موقع لتصميم المواد لرسم الإلهام
- AndroidAuthority - أفضل 10 تطبيقات لتصميم المواد للأندرويد
التدرجات اللونية أسهل من طريقة تفكيرك
كبديل لتصميم المواد ، تكون التدرجات اللونية بسيطة وعصرية وجذابة. وقد تعتقد أن المصممين يقضون الكثير من الوقت في الطلاء بجميع الألوان ، أو تصميم التدرج النهائي. ستكون مخطئًا - يمكن إجراؤه في 10 ثوانٍ في PhotoShop.
سوف أسير معك حتى أريكم كم هو سهل.
إنشاء مشروع PS جديد للجوال ( 1080 × 1920 بكسل @ 72 نقطة في البوصة تعمل بشكل جيد)
انتقل إلى UIGradients.com وابحث عن شيء تريده.
انسخ ألوان التدرج من أعلى المعاينة.
انقر بزر الماوس الأيمن فوق طبقة فارغة في PS ، وانتقل إلى Blending Options> Gradient Overlay.
انقر مباشرة على معاينة نمط التدرج اللوني في القائمة المنسدلة - لا تنقر على زر القائمة المنسدلة. النقر مباشرة على التدرج اللوني يفتح محرر الألوان.
الآن فقط قم بلصق قيم عرافة اللون من UIGradient في محرر التدرج PS.
ضبط حسب الضرورة. لديك الآن خلفية تدرج احترافية لتطبيق Android.
أدوات التدرج الأخرى التي تستحق التدقيق:
- WebGradients.com
- Generator Shapes Generator ( لإنشاء الأشكال عبر XML ، مع خيار التدرج اللوني)
استخدم SVGs بدلاً من JPG / PNG
بدلاً من استخدام PNGs أو JPGs للعناصر الرسومية الخاصة بك (الأزرار والشعارات وما إلى ذلك) ، يجب أن تستخدم SVGs ( رسومات المتجهات القابلة للتحجيم) بدلاً من ذلك. هذا لأنه يمكن تغيير حجم SVGs دون فقدان الجودة - على سبيل المثال ، إذا قمت بترقية JPG إلى قيمة أكبر ، فإنها تفقد الجودة وتصبح ضبابية / بكسل. SVG لا. يحاول الأشخاص استخدام ملفات PNG الضخمة التي سيتم تخفيض حجمها لتناسب شاشات أندرويد - عندما يمكنك بدلاً من ذلك استخدام ملفات SVG الأصغر التي تمت ترقيتها دون أي خسارة في الجودة.
علاوة على ذلك ، يمكن أن يصل حجم ملفات SVG إلى 60٪ إلى 80٪ في حجم ملف PNG . هذا يعني أنه سيتم تحميل التطبيق أو موقع الويب للجوال بشكل أسرع للمستخدم ، وسيظهر بشكل جيد بغض النظر عن دقة الشاشة.
تشمل وضع الظلام باستخدام Theme.AppCompat.DayNight
لا تحتاج إلى تصميم موضوعين منفصلين لتضمين سمة الوضع المظلم / الليلي في تطبيقك. إنه مدمج إلى حد كبير في مكتبة AppCompat ، ما عليك سوى تمكينه وتحرير القيم.
راجع دليل Appual "كيفية تنفيذ وضع مظلم في تطبيق Android الخاص بك".
استخدام قالب أو مجموعة أدوات واجهة المستخدم المحمولة
إذا لم يكن تطبيقك يدعو إلى واجهة المستخدم الرسومية الفاخرة والمخصصة ، فلن يكون هناك أي خطأ في استخدام قالب أو مجموعة. يمكن استخدام القوالب والمجموعات كمبادئ توجيهية ملهمة ، أو يمكنك فقط استخدام القالب / المجموعة كما هي ، بإضافة الأزرار والأشياء الخاصة بك.
بعض الموارد الرائعة لقوالب ومجموعات Android UI:
- SpeckyBoy - 50 مجموعات مجانية لواجهة المستخدم المحمولة لنظام التشغيل iOS و Android
- SketchAppSources - موارد تطبيق UI لنظام Android ( Sketch)
- Freebiesbug - PSD UI Kits ( PhotoShop)
