كيف نحل مشكلة نقص تصميم UI \ UX في 1C باستخدام Java Script و React.js

صورة



كتبت في وقت سابق أنه لا يوجد تصميم في 1C UI \ UX . تتناول هذه المقالة كيف قررنا ، باستخدام تقنيات مثل Java Script و React.js و Google Firebase ، إنشاء خدمة ويب تسمح بأقل تكلفة للعمالة ، مقارنةً بـ 1C: Configurator ، بل وأكثر من ذلك 1C: EDT ، للعمل على واجهة المستخدم وتصميم UX لتطبيق 1C المستقبلي ، وتصحيحه على الفور ونقل النموذج الأولي المتفق عليه بالفعل لتطبيق الأعمال في المستقبل إلى المبرمج.



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



الجزء 1 - المشاكل. المهام التي يتعين حلها



1.أدوات محللي الأعمال ، مديري المشاريع ، مديري المبيعات.



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



لإظهار العميل ما هو متوقع نتيجة للمشروع (البرمجة) ، يقوم المستشارون برسم النماذج في برنامج الرسام ، MS Excel والأدوات الأخرى التي ليست بعيدة عن الراحة. لا يوجد حتى الآن توافق في الآراء ، وهو معيار في الأدوات لإضفاء الطابع الرسمي على العمليات التجارية ، ويستخدم شخص ما استوديو الأعمال ، أو شخص Visio ، أو المورد نفسه - 1C: DSS ، وما إلى ذلك ، ناهيك عن الترميز القياسي (IDF0 ، ARIS إلخ.).



2. تكرارات متعددة للانجاز



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



3. التواصل وتعقيد الإدراك. تنفيذ 1C عبر الإنترنت



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



4.تصميم واجهة المستخدم و UX ، تطوير واجهات الحلول على 1C لعدة



سنوات حتى الآن ، كان مجتمع 1C ينطق ويناقش مصطلحات مثل UI ، UX ، والآن سنتحدث عنها ، وسنتحدث أيضًا عن CX.



  • تجربة المستخدم (UX) - تجربة المستخدم. الهدف من مصمم UX هو التأكد من أن المستخدم يحصل بسرعة وسهولة من البرنامج على ما يستخدمه من أجله.
  • واجهة المستخدم (UI) - واجهة المستخدم. الهدف من مصمم واجهة المستخدم هو إنشاء تصميم جمالي لواجهة المنتج.


أبرز مثال على UI و UX في الحياة اليومية (هذه ليست مصطلحات تكنولوجيا المعلومات فقط :-) ، عندما تكون UI جيدة ، ولكن UX ليست: نحن



صورة



نصلح الموقف ونرفعه إلى مستوى عالٍ من UX:



صورة



الخط الفاصل بين UI و UX ضعيف جدًا وأحيانًا يكون من الصعب تمييزه ، لكنه كذلك.



هل تعلم أن واجهة المستخدم و UX تؤثر بشكل مباشر على CX؟



  • CX (تجربة العملاء) - تجربة العملاء. منتجك هو وجه شركتك أو علامتك التجارية الشخصية (السمعة). يعمل الحل البرمجي المصمم جيدًا والمدروس جيدًا مع التصميم الجميل على زيادة ولاء العملاء (NPS) لعلامتك التجارية وشركتك.


ونتيجة لذلك ، كان ارتباط هذه المكونات الثلاثة كما يلي:



صورة



5. جوع الموظفين



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



  1. ستحرر وقت المبرمجين ، وتحول بعض الأعمال التمهيدية إلى المصممين.
  2. , .
  3. , (, , ..).


, :



  1. -, , . , , , , , , , .
  2. , , , , .
  3. التواصل وتعقيد الإدراك ، وتكثيفه من خلال العمل عن بعد والانتقال المتزايد إلى نمط العمل عبر الإنترنت وتنفيذ المشاريع على 1C المظهر والتصميم - هناك تقارير
  4. راحة وجودة الواجهات ، وزيادة متطلبات العملاء يوميًا لإجراء دراسة أعمق لحلول تصميم UI / UX. المنافسة من "منتجات الويب". صعوبات في التواصل والتفاهم
  5. جوع الموظفين.


الجزء 2 - استخدام تقنيات الويب لترويج تقنيات 1C 1C. حل المشاكل المشار إليها



في عملية الفهم والبحث عن حلول للمشكلات المحددة ، تمت صياغة متطلبات المنتج في المستقبل:



  1. يجب أن تكون الأداة بسيطة وبديهية ، مما يسمح لمحللي الأعمال والاستشاريين المبتدئين بإتقان آلية حلول النماذج الأولية على 1C في أقصر وقت ممكن.
  2. عبر الإنترنت ، والتي لا تتطلب التثبيت وتراخيص المؤسسة 1C ، متاحة لجمهور واسع.
  3. البساطة والراحة في العمل على تصميم UI و UX ، مما سيسمح لك بتصميم الواجهة المثلى دون إشراك مبرمج ، في مرحلة جمع المتطلبات.
  4. إمكانية التعاون عبر الإنترنت بين المقاول (محلل الأعمال) والعميل من أجل تحسين جودة الاتصال وتقليل العوامل السلبية للتحول إلى وضع العمل والتفاعل عبر الإنترنت.
  5. على طول الطريق ، تمت إضافة متطلب - واجهة متعددة اللغات وإمكانية ترجمة تلقائية بسيطة للواجهة إلى اللغات الأكثر شيوعًا.


نظرة عامة على تقنية



الواجهة الأمامية



  • ويستند إلى نهج تطبيق الصفحة الواحدة وإطار رد الفعل.



    ru.reactjs.org
  • لتنفيذ واجهة المستخدم لمنشئ النموذج ، لنأخذ واجهة المستخدم المادية.



    material-ui.com/ru
  • سيتم أيضًا أخذ شبكة تصميم النماذج وتنفيذ الأعمدة من المادة ، ولكنها تتطلب التعديل.



    material-ui.com/en/components/grid
  • أمثلة على تنفيذ فكرة مشابهة لإنشاء Drag & Drop لإنشاء تخطيط من العناصر:



    github.com/chriskitson/react-drag-drop-layout-builder

    github.com/kiho/react-form-builder

    github.com/saravananangu/react-drag-drop-form- يبني


الخلفية



  • في المرحلة الأولى ، يكفي استخدام النهج بدون خادم واتخاذ Google Firebase كأساس.
  • في المستقبل ، سنبدأ في تطوير تطبيق الواجهة الخلفية الخاص بنا في Node.js.


العمارة:



صورة



ما حدث في النهاية ، دعنا نحلل الوظيفة بالترتيب:



1. خدمة عبر الإنترنت لا تتطلب نشر منصة ، تراخيص 1C ، متوفرة في أي وقت وفي أي مكان.



صورة



2. منشئ بسيط وبديهي للنماذج الأولية 1C.



صورة



3. القدرة على مشاركة الرابط حتى مع أولئك الذين ليس لديهم حساب.



مثال



4. عرض التغييرات عبر الإنترنت عند تحرير النماذج: يقوم المقاول بإجراء التعديلات ، يرى العميل التغييرات عبر الإنترنت عبر الرابط (لا تحتاج صفحة المتصفح إلى التحديث).



صورة



5. يصبح إنشاء وثائق المشروع (TK، TP) أسهل بكثير ، والأهم من ذلك أنها تبدو أكثر واقعية ولديها أسلوب عمل ومعيار.



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



صورة



الجزء 3 - الخلاصة



نأمل أن يسمح 1CMaker بحل المشكلات المشار إليها ، وخفض عتبة الدخول إلى الصناعة ، والسماح بجذب موظفين جدد وحتى إنشاء كفاءة جديدة في مجتمع 1C - مصمم UI \ UX (1C: Designer). لقد تم البدء ، ولكن هذه ليست سوى البداية ونخطط لتنفيذ العديد من الأشياء اللذيذة:



  1. تحميل النموذج بتنسيق XML.
  2. قم بتكييف الواجهة مع النظام الأساسي للجوال.
  3. تحميل النماذج المصممة مع وصف بتنسيق MS Word - نموذج لمهمة فنية.
  4. مهام تطوير وتقييم تكاليف العمالة.
  5. الروابط بين الأشياء ، إلخ. إلخ


شكرا لقراءتك حتى النهاية ، مشاريع ناجحة لك وتذكر: الجمال سينقذ العالم (اف ام دوستويفسكي) !



All Articles