هناك الكثير من المجالات المتعلقة بالتصميم في صناعة تكنولوجيا المعلومات. وأكثرهم شيوعًا هم المصممون المختبئون وراء الاختصارات UX وUI. حسنًا، يتمكن بعض الأشخاص من تضمين مطوري الواجهة الأمامية كمصممين. دعونا نحاول معرفة المصممين في عالم تكنولوجيا المعلومات، وما هو الفرق بين واجهة المستخدم وتجربة المستخدم، وما هي العلاقة التي يجب على مهندسي الواجهة الأمامية تصميمها.
المصممين
يعد تطوير واجهة التطبيقات أو مواقع الويب أو الألعاب عملية معقدة إلى حد ما وتتطلب تطبيق المعرفة من مجالات مختلفة: الهندسة وعلم النفس والتصميم. يركز مصممو واجهة المستخدم (باللغة الإنجليزية - User Interface أو UI) على طريقة عرض وظائف الموقع (البحث وعلامات التبويب والقوائم) وتفاصيل التفاعل بين العميل والواجهة. هدف مصمم واجهة المستخدم هو تصميم منتج حديث مقبول من الناحية الجمالية . UX تعني تجربة المستخدم، والتي تعني "تجربة المستخدم". يركز مصمم تجربة المستخدم بشكل أكبر على سهولة الاستخدام وفهم الواجهة من قبل المستخدم المحتمل. غالبًا ما يقوم مثل هذا المتخصص بإجراء الأبحاث والمسوحات التي ستشكل الأساس لإنشاء مفهوم التصميم، وكذلك اختبار المفاهيم أثناء التطوير وبعده. ويركز عادةً على البنية والمحتوى والتنقل وكيفية تفاعل المستخدم مع هذه العناصر.
وينتج خرائط الموقع والنماذج الأولية، وهي البنية الأساسية عند إنشاء البرامج. الهدف من عمل مصمم تجربة المستخدم هو أن يحصل المستخدم بسرعة ودون ألم على ما أتى إلى هنا من أجله من الموقع . ومع ذلك، من الشائع جدًا اليوم رؤية هذين التخصصين مكتوبين بشرطة مائلة. أي أن مهام كلا الاتجاهين يتم تنفيذها بواسطة متخصص واحد. يقوم مصمم UX/UI بتصميم تفاعل المستخدم مع الواجهة، ويقرر ما يجب عليه فعله بالضبط ويكون مسؤولاً عن الشكل الذي ستبدو عليه هذه الواجهة نتيجة لذلك.
ما يحتاج مصمم UX/UI إلى معرفته
محرر الرسوم البيانية . الأدوات الأكثر شيوعًا في السوق هي Adobe Photoshop وAdobe Illustrator وSketch وFigma. اختر محررًا مناسبًا لك وحاول أولاً رسم لقطات شاشة لموقع ويب أو تطبيق وتحديثها قليلاً.
أدوات النماذج الأولية (Mockplus، Axure) . أداة النماذج الأولية هي الرابط بين الفكرة وتنفيذها. لا يهم الأداة التي تستخدمها. يمكنك تجربة العديد منها وتحديد الخيار الذي يناسب ذوقك وتفضيلاتك.
سيكولوجية المستخدم. بالفعل في مرحلة التصميم، يجب أن تفكر فيما إذا كان من المناسب لك أو لشخص آخر استخدام هذه الواجهة. ضع نفسك مكان العميل، وابني علاقة قوية معه وانتبه لاحتياجاته. بعد كل شيء، سيكون المنتج ناجحًا إذا كان هناك طلب عليه.
ستحتاج أيضًا إلى معرفة نظرية الألوان . نحن نعرف بعض الأشياء منذ الطفولة، وخاصة أولئك الذين ذهبوا إلى مدرسة الفنون. ومع ذلك، هناك بعض التفاصيل المتعلقة بعمل المصممين. يمكن الحصول على المعرفة الأساسية من الكتب أو المقالات الموجودة على الإنترنت.
اعتمادًا على تفاصيل العمل، قد تحتاج إلى فهم HTML وCSS أو (بعض) لغات البرمجة (يمكن العثور على روابط للموارد أدناه، في قسم "ما يجب أن يعرفه مطور الواجهة الأمامية").
مطور الواجهة الأمامية
تتمثل المهمة الرئيسية لمطور الواجهة الأمامية في تطوير جزء العميل من الواجهة. أي أن مثل هذا المتخصص "ينشط" ما صممه المصممون. وهو مسؤول عن تشغيل الواجهة وتشغيلها وبدرجة أقل عن المحتوى المرئي. غالبًا ما يحتاج مطور الواجهة الأمامية إلى إيجاد حل جيد لواجهة المستخدم أثناء مرحلة التطوير، لذلك غالبًا ما يتعاون مع مصمم UX/UI. يتم تشغيل الكود الذي كتبه مطور الواجهة الأمامية في متصفح المستخدم (كما يقولون، "من جانب العميل"). ومن أهم المهام أيضًا التأكد من أن الموقع أو تطبيق الويب يبدو بنفس الشكل على جميع الأنظمة الأساسية والمتصفحات.
ما يجب أن يعرفه مطور الواجهة الأمامية
كقاعدة عامة، تعتمد الواجهة الأمامية على ثلاث ركائز: لغة ترميز صفحة HTML، وأوراق أنماط CSS، ولغة برمجة JavaScript. بالإضافة إلى ذلك، يجب أن يفهم مطور الواجهة الأمامية مبادئ تشغيل بروتوكول HTTP والخوادم والمتصفحات وميزات عرض الواجهة على الأجهزة المختلفة الموجودة حاليًا في السوق. أدوات وأساليب إنشاء واجهات الويب تتطور وتتغير باستمرار، لذا يجب على المطور مراقبة ذلك باستمرار.
HTML وCSS (التخطيط)
هذا هو التصميم، وهو نفس الطوب الذي تم بناء الموقع منه. تحدد لغة ترميز HTML تنظيم الموقع ومحتواه وجميع التفاعلات بينهما. يسمح لك بتعيين الجزء العلوي والسفلي والكتل الجانبية بالمحتوى والعناوين وعرض النص وعناصر الوسائط المتعددة. تُستخدم أوراق أنماط CSS لتزيين عناصر HTML. فهي تحدد بالضبط كيفية عرض كل عنصر رسومي موجود على الصفحة. باستخدام أحدث إصدارات HTML5 وCSS3، يمكنك وضع مكونات الفيديو والصوت على الصفحة، وإنشاء صور ورسوم متحركة ثنائية الأبعاد، وحتى كتابة ألعاب بسيطة. ليست هناك حاجة لمحاولة تذكر جميع العلامات والأنماط مرة واحدة. سيكون من المفيد تعلم الأساسيات ووضعها موضع التنفيذ على الفور. موقع جيد جدًا حيث يمكنك تعلم أساسيات HTML وCSS هو W3School. ولكن فقط إذا كان لديك على الأقل المعرفة الأساسية باللغة الإنجليزية.
أيضًا، يجب أن يفهم مطور الواجهة الأمامية التطوير عبر المتصفحات والأنظمة الأساسية، والتخطيط التكيفي وسريع الاستجابة.
بوتستراب
إنه إطار عمل لـ HTML وCSS وJavaScript. وهذا يعني أن هناك قوالب معينة يمكنك من خلالها، مثل المُنشئ، تجميع المواقع بشكل أسرع بكثير من بدونها. ولكن، بالطبع، تحتاج إلى تخصيصه ليناسب احتياجاتك بنفسك. إذا كنت تعرف اللغة الإنجليزية، فإننا نوصي بموقع getbootstrap ونفس موقع w3schools .
جافا سكريبت
جافا سكريبت هي جوهر تطوير الواجهة الأمامية. هذه هي لغة برمجة الواجهة الأولى والأكثر انتشارًا. يمكنه إضافة الكثير من الميزات إلى الموقع. على المستوى الأساسي، تسمح لك هذه اللغة بإضافة عناصر تفاعلية إلى الصفحة. يتم استخدامه لإنشاء خرائط يتم تحديثها في الوقت الفعلي والألعاب والأفلام التفاعلية عبر الإنترنت. في دورات JavaRush العليا لدينا، نتعلم القليل من JavaScript. يمكنك أيضًا دراستها في نفس W3School أو القراءة عنها باللغة الروسية على موقع الويب javascript.ru .
مسج
jQuery هي مكتبة Javascript تحتوي على مكونات إضافية وإضافات يمكن أن تجعل التطوير أسهل وأسرع. بدلاً من كتابة التعليمات البرمجية من الصفر، تسمح لك المكتبات بإضافة مكونات جاهزة، والتي يمكن بعد ذلك تخصيصها لمشروع معين. يمكنك استخدام وظائف الملء التلقائي لنماذج البحث، وإعادة ترتيب الشبكة وتغيير حجمها، وضبط مؤقتات العد التنازلي. دورة تدريبية عملية حول jQuery في w3school
أطر جافا سكريبت
هناك أنواع مختلفة من أطر العمل، ولكن يمكنك اختيار الإطار المناسب لك للاستخدام. وأشهرها Angular، وBackbone، وEmber، وReact. إنها تمثل بنية جاهزة للتعليمات البرمجية. أنها تساعد على تسريع التنمية. وبالاشتراك مع المكتبات، يمكنهم تقليل تطوير موقع ويب أو تطبيق من الصفر. مراجعة لأطر ومكتبات JavaScript الخمسة الأكثر شيوعًا لعام 2017
نظام التحكم في إصدار Git
يمكن لأنظمة التحكم في الإصدار تتبع التغييرات التي يتم إجراؤها على التعليمات البرمجية بمرور الوقت. كما أنها تسمح لك بالعودة إلى الإصدار السابق من المشروع. Git هو نظام التحكم في الإصدار الأكثر استخدامًا. تعد معرفة كيفية العمل مع Git مهارة مهمة لكل مطور. Git البرنامج التعليمي باللغة الروسية
استنتاجات موجزة
UI تعني واجهة المستخدم، والتي تعني "واجهة المستخدم". أي أن مصمم واجهة المستخدم هو المسؤول الأول عن كيفية تقديم المنتج للمستخدم. يقوم بتطوير الأزرار والأيقونات واختيار الخطوط وإعداد التخطيط. UX تعني تجربة المستخدم. لذلك يقوم مصمم UX بتصميم موقع ويب أو تطبيق - أو أي شيء - بحيث يكون المستخدم مرتاحًا ويفهم ما هو، ويتمكن من الحصول على ما يحتاجه من الموقع بأقل جهد. في كثير من الأحيان، يتم تنفيذ كلا النوعين من العمل بواسطة أوركسترا رجل واحد: مصمم UI/UX. يعمل مطور الواجهة الأمامية على تنشيط عمل المصممين من خلال إدخال ديناميكيات فيه: يبدأ الضغط على الأزرار وتبدأ الصورة في التغيير. يجب أن يعرف لغات البرمجة، محنكًا بالأطر والمعالجات المسبقة والمكتبات.
GO TO FULL VERSION