مواجهة أداة التصميم - Adobe XD مقابل Sketch (2019)

تمتعت Sketch ، وهي أداة تصميم راسخة ، بنمو هائل منذ طرحها في عام 2010. في عام 2016 ، قدمت Adobe XD كمنافس هائل. بعد ما يقرب من ثلاث سنوات من التطوير ، هل يقدم Adobe XD تحديًا كافيًا للمصممين للنظر في التغيير؟

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

أداتا التصميم المعترف بها على نطاق واسع والتي يعتمد عليها مصممو UX هما Adobe XD و Sketch.

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

بينما أصبح Sketch الأداة المفضلة لمصممي UX ، لم يكن لدى Adobe ، المعروفة منذ فترة طويلة ببرامج التصميم الحائزة على جوائز وعلاقاتها العميقة بمجتمع التصميم ، خيار مماثل. كان لديهم Photoshop و Illustrator و Fireworks ، لكن لم يكن لدى المصممين الرغبة في استخدام ثلاث أدوات لإنجاز المهام التي يمكن أن يوفرها Sketch في تطبيق واحد.

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

نشرت مدونة Toptal Design مقالًا حول Sketch vs Adobe XD في عام 2017 عندما كانت لا تزال في مرحلة تجريبية. الآن ، بعد عامين ، شهد Adobe XD مراجعات متعددة بهدف واضح: تقديم كل ما يحتاجه مصمم UX محليًا ، وبأداء رائع.

هل حان الوقت لمصممي UX للانتقال من Sketch إلى Adobe XD؟

Adobe XD مقابل Sketch

دعنا نستكشف كيف يقارن Adobe XD بـ Sketch. سنقارن الميزات التالية:

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

واجهة المستخدم

لا ينبغي أن يواجه المصممون الذين هم على دراية بأدوات مثل Photoshop مشكلة في تعلم Adobe XD أو Sketch لأنهم جميعًا يشتركون في واجهة مستخدم مماثلة.

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

Sketch vs XD : يتمتع Sketch بميزة شريط الأدوات المفيد.

كرر الشبكة

ميزة بارزة في Adobe XD هي شبكة التكرار. هذه أداة يدوية تسمح بإنشاء قوائم قابلة للتعديل وشاشات قائمة على الشبكة بسهولة. بينما يفتقر Sketch إلى هذه الميزة ، يمكن تكرارها بشكل أو بآخر مع المكونات الإضافية.

Sketch vs XD : يتمتع Adobe XD بميزة شبكة التكرار الأصلية للبرنامج.

لوحات الرموز والأصول

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

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

Sketch vs XD : يتمتع Adobe XD بميزة طفيفة بسبب عناصر واجهة المستخدم المدمجة داخل لوحة الأصول.

أدوات التصميم سريعة الاستجابة

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

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

لا يحتوي Sketch على هذه الميزة مضمنة ، ولكنه يحتوي على العديد من المكونات الإضافية مثل Anima Toolkit التي تقوم بالمهمة بشكل جيد.

Sketch vs XD: يتمتع Adobe XD بالميزة هنا. إنها توفر طريقة مضمنة لرؤية التأثيرات سريعة الاستجابة على عناصر واجهة المستخدم.

الإضافات والمكونات الإضافية

يمكن القول إن النظام البيئي للمكونات الإضافية في Sketch هو أحد أعظم ميزاته. هناك المئات من المكونات الإضافية التي تعمل على توسيع وظائف Sketch ، وتسمح للمصممين باستخدام ميزات محسنة أثناء البقاء ضمن نظام Sketch البيئي.

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

Sketch vs XD: يتمتع Sketch بميزة مع مكتبته الواسعة من المكونات الإضافية.

النماذج الأولية مع الرسوم المتحركة التلقائية

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

ميزة النماذج الأولية الرائعة الأخرى التي قدمتها Adobe هي دعم التفاعلات الدقيقة ، على سبيل المثال ، سحب لوحة من حافة الشاشة أو إظهار لوحة المفاتيح. يدعم Adobe XD أيضًا النماذج الأولية لواجهات المستخدم القائمة على الصوت (مثل Alexa أو Google Home).

Sketch vs XD: يتمتع Adobe XD بميزة هنا من خلال ميزات الحركة التلقائية الموفرة للوقت ودعم التفاعلات الصغيرة التي يفتقر إليها Sketch.

المشاركة والتعليق

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

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

يمكن لـ Sketch الاستفادة من المشاركة والتعليق باستخدام أدوات التعاون مثل Zeplin أو التكامل مع أدوات الطرف الثالث مثل Invision.

Sketch vs XD: تتمتع Adobe بميزة بسيطة هنا من خلال المشاركة والتعليق عبر الإنترنت المدمجين.

مواصفات التصميم

على مدار مشروع التصميم ، غالبًا ما يحتاج مصممو تجربة المستخدم إلى مشاركة مواصفات التصميم مع المطورين. أدرجت Adobe هذه الوظيفة في XD ، بينما سيحتاج مستخدمو Sketch إلى استخدام عمليات تكامل مثل Zeplin أو InVision.

Sketch vs XD: تتمتع Adobe بميزة على Sketch لأن مواصفات التصميم مدمجة ولا تتطلب تكاملًا مع طرف ثالث.

التحكم في الإصدار والتعاون في الوقت الفعلي

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

تناولت Adobe التعاون من خلال تقديم المستندات السحابية . يمنح هذا كل فرد في الفريق ، بما في ذلك المطورين ، مكانًا مركزيًا للعمل. وفقًا لـ Adobe ، ستكون الخطوة التالية لميزة المستندات السحابية هي التحكم في الإصدار.

يوفر Sketch التحكم في الإصدار والتعاون في الوقت الفعلي مع المكونات الإضافية ، ولكن هذه الميزات ليست مضمنة في المنتج.

Sketch vs XD: Sketch يفوز بهذا. لديهم التحكم في الإصدار ، وإن كان ذلك مع المكونات الإضافية ؛ هذا ليس معروض حاليا في XD.

ملخص الميزة: Adobe XD مقابل Sketch

هناك أوجه تشابه وكذلك اختلافات بين الإصدار الحالي من Adobe XD و Sketch. فيما يلي مقارنة بين كل منتج:

هل حان الوقت لتغيير أدوات تصميم UX؟

مقارنة الميزات ، Sketch و XD قريبان. يفتقر Sketch إلى بعض الميزات مثل التصميم التلقائي المتجاوب والتحريك التلقائي وشبكة التكرار التي تنتمي جميعها إلى XD.

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

من الأسهل الانتقال من Sketch (و Photoshop أو Illustrator) إلى XD أكثر من العكس ، حيث يمكن لـ XD فتح ملفات Sketch بدقة ممتازة. قد تواجه بعض المشكلات إذا كنت تعتمد على مكونات Sketch-only الإضافية مثل Abstract أو InVision Craft.

في بعض السيناريوهات ، يكون الخيار واضحًا: بالنسبة لمستخدمي Windows ، لا يتوفر Sketch ، وبالنسبة لمشتركي Adobe Creative Cloud ، يتم تضمين XD مجانًا مع نماذج أولية مشتركة غير محدودة. لم يحدث ذلك بالصدفة.

لكن سكتش يقاوم. أغلقت الشركة مؤخرًا تمويلًا بقيمة 20 مليون دولار ، ووعدت بميزات مهمة مثل تعاون الفريق والتسليم الأصلي وإصدار الويب من التطبيق في عام 2019.

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

مزيد من القراءة على مدونة Toptal Design:

• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• التصميم والرسم الذري - دليل لتحسين سير العمل
• التصميم بدقة - مراجعة Adobe XD
• أشياء قد لا تعرفها عن الطباعة في Sketch
• التعرف على تطوير البرنامج المساعد Sketch