السؤال عن الفرق بين ال UI UX سواء كتعريف لغوي او إصطلاحي
معنى الاختصار ده ايه وشغلتهم ايه
هو اول سؤال بيجي في ذهن اي حد مبتدئ فى المجال
الفرق بينهم بسيط محتاج تركيز خليك معايا
...........
اولاً من الناحية اللغوية UI هو إختصار لكلمة User interface
واجهة المستخدم
الي هيا عبارة عن الشاشة الي قدامك
صفحة الفيس او شات الواتس صفحة الويب اي شاشة
سواء في الساعة او التلفيزيون في الموبايل او التابلت
فى اللابتوب او جهاز كهربي الي ظاهرلك منها
ده اسمه Ui User interface
أما عن UX هو اختصار لكلمة User Experience
تجربة المستخدم احساسك انت كمستخدم لما تشوف الواجهة دي
وتتفاعل معاها ايه الي المفروض يتحط اصلاً
ويظهر في الواجهة ال UX هو الي بيحدده
ال UI UX عمليتين منفصلين مكملين لبعض
دي واجهة مستخدم صفحة تسجيل دخول لموقع إنستجرام
دي اول حاجه عينك هتقع عليها وواجهة المستخدم
اول حاجه بيشوفها المستخدم لكن هيا اخر حاجه بيعملها المصمم
تعالا نشوف الواجهة دي اتعملت ازاي عشان نقدر نحدد ادوار ال UI UX
عملية صنع ال UX بتيجي دايماً فالاول
وبإختصار لطرق كتير المصمم الي صمم الواجهة دي
عمل ابحاثه وتحاليله وتوصل لمجموعة نتايج على ورق
النتائج دي مهتمه اكتر بطريقة تفاعل الصفحه مع المستخدم
مع المحتوى بتاعها مع تنظيم المعلومات فيها
النتايج دي مالهاش علاقه بالشكل
وعشان الشكل مش مهم اولاً عملنا حاجه اسمها
WireFrame ايه الواير فريم ده ؟
ده النسخه السكتش الرسمه من التصميم بتاع الواجهة
ده الطوب الاحمر بتاع البيت قبل مايتشطب ويبقا الوان
ده شكل الوايرفريم والي قدر يحدد منها 5 اهداف الي موجوده فالصوره
هيكل الواجهة - المحتوى - تسلسل المعلومات - وظيفتها - تفاعلها مع المستخدم
تفاعلها مع المستخدم مقصود بيها
ان التصميم يكون تفاعلي يعني لو المستخدم نسي الباسورد
التصميم مديه لينك يقدر يرجع منه الباسورد
لو عايز اكونت جديد التصميم مديله لينك
يعني اي تصرف يجي في دماغ المستخدم ويحصل التصميم بيكون له رد فعل
بعد الانتهاء من الوايررفريم بتبدأ مهمة ال UI ويكون له اهداف معينة زي
-الوان الواجهة
- الخط المستخدم
- المسافات بين العناصر والمحاذاه
- مساحات الايقونات
زي الصوره الي قدامكم دي
يبقا الفرق بين ال UI UX تشبه عملية بناء البيت
في البداية بتحدد انت محتاج كام غرفة وتقسم هيكل المنزل (UX)
ثم تبنيه بالطوب الاحمر (Wireframe)
ثم تقوم باعمال الدهان وتلوين المنزل والديكور (UI)
مثال أخر
المستخدم طلب ان يكون فالموقع زر تحميل
دور ال UX :
- عمل ابحاثه وتحليلات وتوصل لنتيجة ان
افضل مكان ليه اخر الصفحه عشان الي بيدور عليه
يكون شاف محتويات الصفحه كلها ممكن يعجبه
موضوع اخر يكسب زيارة ثانية للموقع من نفس المستخدم
- توقع ان الشخص من الممكن انه يكون مصاب بعمى الالوان
فلا يرى اللون الاخضر فكتب جملة " Click Here To downoald"
دور ال UI :
- حدد شكل الزر وانه يكون مستطيل واعطاله أبعاده
- حدد ان اللون الاخضر يكون هو لون المستطيل
لان اللون الاخضر فيه ايحاء بالسماح لذلك موجو في اشارات المرور
- توقع ان الشخص مايفهم لغة انجليزية ف حط ايقونة تدل على التنزيل
ال UX ساعد الموقع في انه يحقق اكبر استفاده من زر التحميل
وضمن انه يكون سهل الوصل لكل مستخدمي الموقع
ال UI ساعد انه يوصل الهوية البصرية الصحيحة لزر التحميل
هوية بدون لغة فقط العين تقدر تحدد
بإختصار ال UX UI عمليتين متكاملتين بتبدأ اول من ال UX
عشان نحدد محتوى التصميم وتنتهي بال UI
الي بتحدد التفاعل البصري مع الواجهة
هسيبلك هنا مجموعة صور من احدى محاضرات معهد كاليفورنيا
للفنون بموقع كورسيرا بتوضح الفرق مابين المصطلحين
ولو انت مش فاهم اصبر على نفسك شوية وعديها
وابدأ اتعلم ال UX هتفهم لوحدك وتابع معايا هنا هتستفاد اكتر ..
