تصميم واجهة للتحكم الصناعي

مرحبا! اسمي جورج ، أنا مصمم.

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

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

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







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







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











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

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









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







كان عميل المشروع التالي هو شبكة غسيل السيارات ذاتية الخدمة Moscow Cooga.

لدي صديق مبرمج يقود دورات برمجة ممتازة للمهندسين هنا (plc-edu.pro) ، سألني سؤالًا. "ياجوج ، أقوم ببرنامج غسيل سيارات بخدمة ذاتية هنا. يريد العميل أن يبدو كل شيء محترفًا وباردًا. هل يمكنك مساعدتنا في ذلك؟ "

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

للبدء ، قمت بعمل قائمة بالأدوار والخطوات التي تهمهم. ما الذي يجب القيام به لتنفيذ هذا السيناريو أو ذاك.



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



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







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

مشروع صغير آخر هو واجهة المعرض لمحاكاة تشغيل وحدة تحكم مضخة الحرارة لـ Thermex.

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











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

منفتح على التعاون وسأكون ممتنا للنقد البناء!