يعمل Appodeal مع السوق المعقدة والمتنامية بسرعة لتحقيق الدخل من تطبيقات الهاتف المحمول. لذلك ، لا يمتلك فريق التصميم لدينا الكثير من الحرية في حلول الواجهة ، والمتطلبات الوظيفية صارمة للغاية ، وهي تتغير باستمرار.
لوحة التحكم Appodeal هي شريط أدوات واحد للعمل مع الإعلانات في التطبيقات التي توفر آليات تحليلية مريحة والتي من خلالها يمكنك إجراء مدفوعات مباشرة بسرعة. في مارس 2018 ، تم استكمال لوحة التحكم بأداتين مهمتين في التصميم الجديد: الشرائح (لفصل أجزاء من الجمهور) والمواضع (لتحديد الأماكن التي يتم فيها عرض الإعلانات في تطبيقات الجوال). وفي أكتوبر ، أطلقنا مركز التحكم في الطلب (DCC) ، والذي يسمح لك بإدارة الشبكات والتحكم في الشلال. قررنا مشاركة خبرتنا في تصميم لوحة القيادة والتحدث عن مراحل تطورها.
لماذا نحتاج إلى لوحة تحكم جديدة؟
في نوفمبر 2015 ، مع تطور الوظائف ، نمت لوحة التحكم وتوقفت عن احتواءها في تخطيط الصفحة الأصلي. أربكت الروابط والأقسام الفرعية المستخدمين ، وأصبح التنقل غير مريح ، واضطررت للبحث عن مساحة لأقسام جديدة. علاوة على ذلك ، تتطلب الوظائف الإضافية لفريق الخادم الانتباه أيضًا. وبالتالي ، لم يكن التصميم القديم عالميًا ولم يكن مناسبًا لمهام القياس.
ما حدث في عام 2015في نفس الوقت تقريبًا ، ظهرت مشاكل مماثلة على موقع الشركة الإلكتروني ، لكننا لن نتعمق في تفاصيل هذه القصة.
ماذا يجب أن تكون لوحة القيادة الجديدة؟
لم نحاول الحصول على واجهة جميلة أخرى - كان من المهم بالنسبة لنا أن نرسي الأساس للتنمية طويلة المدى. قام المصممون والمصممون بتحليل مفصل لأقسام لوحة القيادة وصاغوا العديد من المهام التي أصبحت نقاط البداية في العمل:
- تصميم ساطع على طراز الشركة
- قابلية التوسع لعدة سنوات قادمة
- نهج التخطيط التكيفي
- عناصر بسيطة يمكن تحويلها إلى معقدة
- الرفض الكامل للرسومات النقطية
- استخدام واجهة المستخدم النموذجية لأدوات مماثلة
- تفاعل سهل مع المطورين
مثال على قائمة قديمة مكتظة بالأقسام الفرعية وسهولة التنقل مع الأقسام الفرعية في تصميم جديد:
انتبه إلى التذييل العملاق الموجود على اليسار ، والذي كان له صدى في تصميم الصفحة المقصودة للشركة ، وزد مساحة لوحة القيادة بشكل مرئي.ما هي الصعوبات؟
لم تكن عملية تطوير وتقديم تصميم جديد خالية من الغيوم. ما بدا لنا ممكناً في البداية في غضون شهرين امتد إلى أرباع.
1. كان من المستحيل إعادة ترتيب جميع الوظائف على الفور. اشتمل العمل مع مديري المنتجات والمصممين والمطورين على إنشاء العديد من الصفحات من البداية.
2. لقد احتجنا إلى أسلوب تصميم يسهل التعرف عليه ، ولكن في نفس الوقت ، بحيث لا يواجه المستخدمون ، الذين يعملون مع كلا الإصدارين من الواجهة خلال الفترة الانتقالية ، صعوبات كبيرة.
3. كان من الضروري إعداد مجموعة من "الطوب" الأساسي العالمي بحيث أصبح من الممكن بناء واجهات منها حتى بعد بضع سنوات. هذا ينطبق على كل من عناصر التصميم والرمز.
4. استمر تشكيل الهوية المؤسسية للشركة ، ولم نكن متأكدين من اكتمالها. ولهذا كان من المهم بالنسبة لنا إنشاء تصميم مرن يمكن تعديله بسرعة وبدون تكاليف عمالة هائلة في المستقبل.
5. أثر التخطيط التكيفي ، ونتيجة لذلك ، توفر جميع الوظائف حتى على شاشة الهاتف الذكي بشكل كبير على كل من الشبكة المعيارية للصفحات والتصميم ككل.
نفس الصفحة على شاشات مختلفةالفريق
بعد العرض المرئي للمواد مع نتائج التحليلات الأولية ومخططات التصميم ، تم إعطاؤنا تفويضا كاملا لتنفيذ الأفكار في إطار المتطلبات. في الوقت نفسه ، لم نكن نعرف بعد مقدار العمل الذي ينتظرنا ، وقمنا بتقييم التصميم بناءً على الأقسام الموجودة. غالبًا ما يحدث أن أخطط اليوم قائمة موقع في ثلاثة أقسام ، وغدًا في كل قسم تظهر ثلاثة أقسام. نظرًا لأن المطورين بدوام كامل كانوا مشغولين للغاية ، وكنا بحاجة إلى تخطيط لتصميم جديد باستخدام تقنيات متقدمة ، وجدنا على الفور مصمم تخطيط أصبح الرابط بين المصمم والمطور. علاوة على ذلك ، أصبح من الأسهل التحدث عن القدرة على التكيف ، والتغييرات الطفيفة ، وكتل الكتابة ، لأن هذه العناصر أسهل وأسرع وأكثر مرئية لإعادة إنشاء التعليمات البرمجية من مساعدة أدوات التصميم.
ما هي النتيجة؟
شاشات لوحة أجهزة القياس الجديدة التصميمفي أكثر من عامين ، أنشأنا وأعدنا تصميم 90+ وتنسيقات لصفحات لوحة المعلومات. في مرحلة ما ، أصبح اتخاذ القرارات أسهل ، منذ تصميم واجهة المستخدم ، بدأنا نفكر في مجموعات من النماذج القياسية ، والكتل مع الأزرار ، والمفاتيح ، وعلامات التبويب ، وأحيانًا حتى الصفحات الكاملة التي تم دمجها وأصبحت شاشات نظام جديدة.
نحن نتحرك نحو إنشاء نظام تصميم كامل ، لذلك في البداية يوجد التصميم بأكمله في شكل قائمة كبيرة من صفحات html ذات الصلة مع حد أدنى من النصوص. هذا القسم كمراجع متاح لجميع المطورين ، فمن السهل العثور عليه وإظهار العناصر الضرورية فيه.
لذلك ، على سبيل المثال ، عند تطوير صفحة جدولة قياسية ، لم يعد المصمم مطلوبًا على الإطلاق. يستخدم المطورون الشفرة في git ، مما يحقق الامتثال بنسبة مائة بالمائة للتصميم ، مع مراعاة التخطيط التكيفي.
الآن قيد التحضير ، هناك مجموعة كاملة من لوحة تحكم واجهة المستخدم بأكملها في شكل ملف في Figma ، والذي سيساعد مديري المنتج ومطوريه في النموذج الأولي - يمكنك رؤية جميع خصائص كائن أو رمز أو مجموعة بدون مصدر.
بالنسبة لقوائم السياق والرموز الظرفية ، نستخدم Fontawesomeملاحظات
أهم شيء لمصمم الواجهة هو ملاحظات المستخدم. من خلال نشر واجهة الحملات الجديدة ، التي كانت الوحش قبل الأخير في تصميم قديم ، قمنا بتنفيذ نظام لجمع مراجعات وتقييمات سريعة للوظائف الجديدة. بعد أن حصلنا ، في الغالب ، على درجات عالية جدًا ، توصلنا إلى عدة استنتاجات رئيسية لأنفسنا: أولاً ، كنا مقتنعين بصحة الاتجاه المختار ومخطط العمل ؛ ثانيًا ، بعد شهرين ، أنهينا الواجهة الناتجة وفقًا لنتائج التعليقات وجعلناها أكثر ملاءمة ؛ ثالثًا ، أدركوا أن الاختبار والتعليقات ، حتى بالنسبة لهذه الواجهة عالية التخصص ، يمكن أن تؤدي إلى العديد من الأفكار الجديدة.
ما هي الخطوة التالية
نعمل الآن على نمط مرئي جديد للشركة ، باتباع استراتيجيات التطوير في السوق والاتجاهات والمنافسين. في هذه الحالة ، أنا هادئ تمامًا بشأن لوحة القيادة ، لأننا لا نحتاج إلى إعادة رسم بكسل واحد في التصميم يدويًا. كل شيء يتم تحديثه باستمرار وبسهولة في الكود ليتناسب مع كتاب العلامة التجارية للشركة ، والذي يتضمن ظلال ألوان جديدة وسماعة رأس.
قريبًا ، سيكون هناك تطبيق جوّال مُحدَّث يسمح لك بأداء معظم مهام لوحة التحكم في شكل أصلي أكثر للأجهزة المحمولة. يتغير موقعنا ومدونتنا تدريجيًا ، وينتقلان إلى المنصات التقدمية الجديدة Divi Builder و Ghost.io. نحن نجرب طرقًا جديدة للتطوير ، لذلك سنتخلى هذا العام عن النهج الكلاسيكي لتصميم العمليات من خلال التحول إلى Figma واستخدام لوحات kanban في Jira.
ونتيجة لذلك ، تمكنا من إنشاء قاعدة بسيطة ومريحة لتصميم جميع الواجهات ، مع الاحتفاظ بالميزات الفريدة للطاقة والثقة الكامنة في العلامة التجارية Appodeal. آمل أن تساعد هذه التجربة المصممين ومطوري الشركة على التطور في الاتجاه الصحيح ، والمستخدمين - لكسب المزيد على إعلانات الجوال.
نشرها بافيل سافينسكي ، رئيس فريق التصميم @ Appodeal.