اذهب إلى المحتوى

مقارنة بين أدوات تصميم واجهة المستخدم UI


نور حامد

شهدت الأعوام الماضية العديد من التطورات والتحديثات في عالم التقنية، ولعل أبرز ما يُهِم مصممي الويب، هو تطور العديد من أدوات تصميم واجهة المستخدم UI، التي توفر الكثير من الخاصيات والمميزات لتصميم واجهة المستخدم تصميمًا حديثًا، مما قد يُنهي عصر إنشاء نماذج PSD بالأحجام الطبيعية من خلال برنامج الفوتوشوب. حيث جذبت تطبيقات سكتش Sketch وفيجما Figma -والتي تُعرَف بأنها مُحرِّرات رسومات شعاعية-، عددًا من المستخدمين المُخلِصين لها خلال السنوات القليلة الماضية، ولكن ربما كان التطور الأكبر هو أن أدوبي Adobe -عملاق برامج التصميم- قد طوّر تطبيق إكس دي وهي أداة قائمة على المتجهات، بحيث تصبح طريقة عمل المصممين تخصصيةً.

لذلك سنلقي نظرةً على كل من هذه التطبيقات ومميزاتها الأساسية، ليصبح الطريق سهلًا أمامك لاختيار ما يناسبك منها.

ما الذي يميز أدوات تصميم واجهة المستخدم الحديثة؟

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

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

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

سكتش Sketch

ui-tools-2019-01.jpg

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

ومن أهم المميزات التي يوفرها sketch ما يلي:

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

يقدّم تطبيق سكتش Sketch إصدارًا تجريبيًا مجانيًا لمدة 30 يومًا، في حين يجب الدفع والاشتراك للحصول على ترخيص تجاري، كما تتوفر التحديثات السنوية بسعر منخفض؛ أما أهم التحذيرات الكبيرة هنا، هو أن سكيتش Sketch متاح فقط لنظام التشغيل macOS، فإذا كنت تستخدم ويندوز Windows أو لينكس Linux، فلن تتمكن من استخدام سكتش

ui-tools-2019-02.jpg

فيجما Figma

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

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

أما أبرز الخصائص والمميزات التي تجدها في فيجما Figma، فهي:

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

أما بالنسبة لحزم الاشتراك والأسعار، فيقدم فيجما Figma خطةً مجانيةً تسمح بمحررَيْن اثنين وثلاثة مشاريع، وسجل إصدار لمدة 30 يومًا، وبعد ذلك تبدأ الخطط التجارية كاملة الميزات، بحيث تُدفع عادةً عبر اشتراكٍ سنوي.

ui-tools-2019-03.jpg

أدوبي إكس دي AdobeXD 

ui-tools-2019-04.jpg

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

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

أما أبرز الميزات التي يقدمها أدوبي إكس دي، فهي:

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

كما يدعم الاشتراك، حيث يتطلب إما عضوية Creative Cloud كاملةً، أو يمكنك اختيار الاشتراك في أدوبي إكس دي نفسه بمبلغ شهري محدد؛ أما إذا كنت ترغب في تجربته أولًا، فهناك خطة أدوبي إكس دي Starter مجانية تتيح لك تجربة بعض المميزات. وعن الميزة المريحة في أدوبي XD، بتيح البرنامج إمكانية تشغيل التطبيق على ماكنتوش أو ويندوز.

كيف تختار التطبيق الأنسب لإنجاز تصاميمك؟

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

الختام

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

ترجمة -وبتصرّف- للمقال Adobe XD vs. Sketch vs. Figma – Comparing Top UI Design Tools of 2019 لصاحبه ERIC KARKOVACK.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...