استخدم المصممون في السابق برنامجي فوتوشوب، وإليستريتور كأساس لإنجاز تصاميمهم، وذلك قبل انطلاق منصة أدوبي إكس دي، التي تجمع خبرات مصممي الويب في مجال تحسين تجربة المستخدِم. حيث تمتاز هذه المنصة بتخصّصها وتركيزها على تصاميم الويب التي تهدف إلى تحسين واجهة المستخدِم، وهي من أكثر منصّات التصميم تفاعلًا وتجاوبًا مع المصمم، إذ تسهّل تصميم المخططات الهيكلية والنماذج المبدئية لصفحات الويب، والتطبيقات المختلفة.
وسيضم هذا الدليل مجموعة نصائح لاستخدام برنامج أدوبي إكس دي باحترافية.
بدء استخدام أدوبي إكس دي
ابدأ رحلتك في برنامج إكس دي بالنقر على زرّ (المقدمة التّعريفية)، التي ستشرح لك بالتّفصيل أساسيات استخدام البرنامج، والعناصر التي ستحتاجها في التصميم، إذ ستساعدك على إنشاء الّلوحات الفنية، واستيراد الصور، وغيرها الكثير. أنشئ بعدها مشروعًا جديدًا من قائمة (ملف)، وستظهر أمامك واجهة مشابهة للواجهة الترحيبية.
في المرحلة التالية عليك اختيار أبعاد الشاشة التي تناسب مشروعك سواءً كان تصميم موقع للويب، أو تطبيق للهاتف المحمول؛ وإلا عليك بإدخال قيم الأبعاد يدويًّا.
ستظهر أمامك بعد اختيارك القياسات، واجهة أدوبي إكس دي التي تتكوّن من التصميم والنموذج. حيث ستستطيع في نافذة التصميم، تركيب المكونات المختلفة للتصميم على اللوحة المخصّصة، بحيث تُمثَّل كل لوحة على شاشة مختلفةن وسيساعدك إكس دي على إنشاء عناصر، وأشكال أخرى إضافيّة، كما بإمكانك اختيار استيراد عمل فني ما من أيّ مصدر خارجي أيضًا.
استكشف قوة خصائص إكس دي
يضم برنامج أدوبي إكس دي جميع الخصائص التي يحتاجها المصمم في مجال واجهة المستخدم، حيث تتشابه معظم هذه الخصائص مع خصائص التصميم الموجودة في برامج شركة أدوبي الأخرى مثل الفوتوشوب. ومن جهة أخرى تختلف خصائص أدوات الرسم والطبقات في إكس دي عن تلك الموجودة في بقية برامج أدوبي، بحيث تتلاءم مع تنوُّع أساليب المصممين في العمل، كما يبقى كل عنصر من عناصر إكس دي في طبقة مستقلة، إلى جانب تنوّع الأيقونات التي تمثّل كل نوع من أنواع الطبقات، بحيث تعبّر عن نوع المحتوى الموجود في كل طبقة، وهو ما يسهّل على المصممين التفريق بين الأشكال المختلفة والمجلدات والصور بمجرد النظر إلى الأيقونة التي تمثّل الطبقة.
إليك مجموعة من أفضل ميزات برنامج أدوبي إكس دي التي سترفع من إنتاجيتك عبر استخدامك للمنصة.
تكرار الشبكة
وهي ميزة مفيدة جدًّا، حيث تُمكّنك من تطبيق التكرار على عنصر، أو أكثر من العناصر التي أنشأتها، مما يساعدك على تمثيل هذه الأشكال على محورَي الفواصل X، والتراتيب Y. كما تساعدك خاصية التكرار على تغيير المسافة بين العناصر، بحيث تبدو وكأنها مجموعة من المكوّنات أو مكوّن وحيد. وتتجلّى أهمية هذه الميزة في إنجاز التصاميم التي تحوي عناصر مكرّرة، مثل: قائمة من الصور، أو النصوص، فعندما تُنشئ معرضًا للصور على الواجهة مثلًا، فسيتطلّب الأمر مجهودًا كبيرًا للحصول على المظهر المطلوب، بينما تساعدك خاصية التكرار على التركيز على تفاصيل العمل، دون القلق بشأن المظهر عند التطبيق.
النماذج
عندما تُنهي العمل على تصميمك، فستستطيع الاستمتاع بمشاهدة النتيجة عمليًّا من خلال خيار Prototype (النموذج)، والموجود في أعلى الزاوية اليسرى من الواجهة، حيث يمنحك هذا الخَيار القدرة على ربط عناصر تصميمك المختلفة، والتي ستشكّل في النهاية شاشات التطبيق الذي تعمل عليه. حدّد العنصر المطلوب وسيظهر سهم في الجانب الأيمن من مساحة العمل، اسحب هذا السهم وأفلته في لوحة العمل الأخرى التي ترغب بالربط معها.
مجموعات جاهزة من واجهات المستخدم
يضم برنامج أدوبي إكس دي مجموعات جاهزة من تصاميم واجهات المستخدِم التي تُسهّل تصميم النماذج المبدئية المناسبة لتطبيقات iOS، وجوجل، ومنصات ويندوز. فقد صُمّمت هذه المجموعات باستخدام عناصر جاهزة تساعد المصمم إلى حدّ كبير على معرفة شكل التطبيق عندما يُعرَض أمام المستخدِم، كما توفّر هذه المجموعات الوقت والجهد على المصمّم عند استخدامه بعض عناصرها الجاهزة.
مكتبات التخزين السحابي Creative cloud
يساعد التخزين السحابي على مشاركة جميع عناصر التصميم، مثل: الصور، والألوان، وأنماط الخط، وغيرها عبر جميع منصات أدوبي. حيث أُضيفَت هذه الميزة إلى منصة إكس دي في شهر آب عام ٢٠١٧، ليصبح بإمكان المصمّم الوصول إلى جميع العناصر المخزنة على السحابة الإبداعيّة لأدوبي، مما يوفّر الكثير من الوقت عند استخدام برنامجَي فوتوشوب، أو إليستريتور لإنشاء عناصر المشاريع على XD.
الرموز
تتشابه الرموز الموجودة في برنامج أدوبي إكس دي، مع تلك الموجودة في البرامج الأخرى مثل الإليستريتور، وهذا في بعض الخصائص؛ في حين تختلف عنها في خصائص أخرى، فعندما تُحوّل عنصرًا ما إلى رمز، فيتستطيع استخدامه في عدة لوحات عمل في الوقت نفسه؛ أما في حال عدّلْت على الرمز الموجود في لوحة العمل التي تعمل عليها حاليًّا، فسيُطَبّق التعديل نفسه على نفس الرمز الموجود في لوحات العمل الأخرى، مما سيساعدك على إنجاز الأعمال التي تتطلّب هذا التكرار بسرعة أكبر، وباحترافية تُجنّبك الأخطاء التي قد تنتج عن التكرار اليدوي، أو إغفال تطبيق هذا التكرار على لوحة عمل أخرى.
العرض الأولي
عندما تنتهي من ربط العناصر المختلفة لعملك؛ ستستطيع اختيار تفعيل تأثيرات الانتقال ease-in، وease-out، والضغط على زرّ التشغيل الموجود في أعلى القسم الأيمن من الشاشة لعرض التطبيق، كما تستطيع تحميل تطبيق الأندرويد، أو iOS، وإجراء التعديلات وفق الزمن الحقيقي real-time.
تصدير المكونات
عندما تعمل على تصميم تطبيق أصلي؛ فستحتاج إلى تصدير المكونات عند تسليمه للمُطوِّر، كما تستطيع جعل تصميمك بنسبة بوصة واحدة للطول، مقابل بوصة واحدة للعرض ١:١، كما تُزوّدك أدوات البرنامج بنسخ مُكبَّرة مرّتين أو ثلاث مرّات، وهي النسخ المطلوبة في تصاميم الأندرويد، وiOS.
خدع ونصائح لاحتراف أدوبي إكس دي
إليك بضعة نصائح ستساعدك على استخدام أدوبي إكس دي باحترافية ومتعة.
الإرشادات الذكية
تُعَدّ ميزة التعليمات الإرشادية الموجودة في فوتوشوب غير موجودة في أدوبي إكس دي، ولكن الإرشادات الذكية تظهر عندما تسحب عنصرًا ما لتنسيق موقعه بالنسبة إلى العناصر الأخرى، وهو السلوك الافتراضي للبرنامج. وللتخلّص من ذلك مؤقّتًا؛ اضغط على زرّ Ctrl، ثم اسحب العناصر لتنسيق مواقعها.
خدعة تكبير الخط
عندما تُحدّد نصًّا ما على واجهة البرنامج، فستظهر أمامك أداة تحديد لها شكل كرة صغيرة في أسفل مستطيل التّحديد، وعندما تسحب هذه الكرة للأعلى، فسيزداد حجم الخط؛ بينما سينقص عندما تسحبها للأسفل.
نسخ الصور واستخدام خاصية القناع
من السهل سحب أي صورة تريدها وتُفلِتها داخل واجهة أدوبي إكس دي، ولكن إذا أردْت لصورة ما أن تأخذ شكلًا محدّدًا، فتستطيع ببساطة سحب هذه الصورة إلى الشكل المطلوب، وستملأ الصورة هذا الشكل بتنسيق مناسب. يُفضّل أحيانًا تطبيق خاصية القناع Masking على أجزاء معيّنة من الصورة، حيث يُطبَّق هذا التأثير بدءًا بالطبقة الأعلى، ولن يتأثر بباقي التعديلات.
أعِد ضبط ارتفاع الخط باستخدام الصفر
إذا جرّبْت إعطاء قيم مختلفة لارتفاع خط الكتابة، ووجَدْت أنّ الارتفاع الافتراضي هو الأفضل، فبإمكانك إعادة قيمة الارتفاع إلى القيمة الافتراضية التي يُقدّمها البرنامج بسهولة، من خلال كتابة قيمة الصفر في حقل ارتفاع الخط.
استيراد العناصر الشعاعية Vectors من برنامج الفوتوشوب
تستطيع نقل الصور بسهولة بين برنامج الفوتوشوب وبرنامج XD، حيث يُمكنك إنشاء تحديد ما على صورة في الفوتوشوب، ثم الضغط على Ctrl + Shift + C لتُنسخ جميع العناصر الموجودة ضمن هذا التّحديد. افتح بعدها XD، واضغط على Ctrl + V للّصق، وستستطيع هنا تصدير الطبقات الموجهة من الفوتوشوب، بالضغط بالزر الأيمن للفأرة على الطبقة المطلوبة، ثم اختيار copy SVG، ولصق ما نسخته في برنامج XD.
استخدم دليل الأنماط
تستطيع إنشاء تصميم لدليل أنماط معين، بحيث يضم جميع المكوّنات، وعناصر التحكم، مثل: الأيقونات الشائعة، والأزرار، وعناصر الإدخال.
بدل بين المساحة النصية والمساحة النقطية
يمكننا التبديل بين المساحة النصية والمساحة النقطية، من خلال استخدام زرّ التحكم بالخصائص property inspector.
غير معدل شفافية اللون بسهولة
تستطيع تغيير مقدار شفافية أو تعتيم لون عنصر ما، من خلال تحديده، واختيار رقم ما من لوحة المفاتيح. حيث يُعبِّر الرقم ١ عن تعتيم بمقدار ١٠ بالمئة، بينما يعبر الرقم ٢ عن تعتيم بمقدار ٢٠ بالمئة وهكذا، وإذا أردْت الحصول على تعتيم تام بمقدار ١٠٠ بالمئة، فيكفيك الضغط على زرّ الصفر.
وسع لوحة العمل بواسطة خطوط الطي
خط الطّيّ هو مصطلح شائع في مجال تصميم الويب، وهو الخط الذي يستطيع المستخدِمون من خلاله رؤية محتوى الصفحة، دون الحاجة إلى زرّ التّمرير. عندما تفتح منصة XD، انقر على أيّ مكان في مساحة العمل، ثم انقر على القبضة السفلية التي تظهر أمامك واسحبها للأسفل، حيث ستتوسع بذلك مساحة العمل تاركةً وراءها خطًا منقّطًا يسمى خط الطّيّ. بإمكانك قراءة عدد البكسلات الموجودة من أعلى تصميمك حتى خط الطّيّ في قسم التمرير على الجانب الأيمن من الشاشة، مما سيساعدك على تخيُّل طول شاشة عرض التصميم عند تطبيقه.
أعِد تسمية الطبقات بسهولة
انقر نقرةً مزدوجة على اسم الطبقة وغيّره بسهولة، ثم اضغط على زرّ Tab من لوحة المفاتيح، وانتقل إلى الطبقة التالية بدون مغادرة وضع التعديل، أو اضغط على Shift + Tab للانتقال للأعلى، بحيث ستستطيع بذلك إعادة تسمية الطبقات بسرعة وسهولة.
شارِك أعمالك وثبت التعليقات
احصل على تقييم فوري لأعمالك من خلال مشاركتها، أو إرسالها لأعضاء فريقك؛ أو أرفقها إلى موقعَي Behance، أو Dribble، وذلك باستخدام شيفرة التّضمين، مما سيساعد المستخدِمين الآخرين على إضافة التعليقات على أجزاء معينة من التصميم.
استخدم التصاميم الجاهزة لواجهة المستخدم
تستطيع الوصول إلى النماذج الجاهزة التابعة لويندوز، أو جوجل، أو iOS؛ من خلال قائمة ملف، ثم خَيار فتح UI kits، واختيار النموذج المرغوب.
صمم باستخدام تطبيق أدوبي comp
من السهل إنشاء الرسوم التخطيطية، والنماذج المبدئية باستخدام تطبيق أدوبي comp على الهواتف الذكية، إذ يُسهّل استخدام الأصابع أو الأقلام الذكية، عملية التصميم، وإنتاج تصاميم، وأعمال مميزة. لا يدعم تطبيق comp التصدير إلى إكس دي حتى الآن، ولكنّك تستطيع التصدير إلى الإليستريتور، ثم النسخ واللصق في واجهة إكس دي للحصول على أشكال شعاعية Vectors قابلة للتعديل.
استمتع بهذه الميزات، واحرص على ربط أعمالك مع برمجيات أدوبي المختلفة للحصول على تجربة غنية في التصميم الإبداعي.
ترجمة وبتصرّف للمقال Adobe XD 101 – Guide For Newbie Designers للكاتب Harsh Raval
استخدم المصممون في السابق برنامجي فوتوشوب، وإليستريتور كأساس لإنجاز تصاميمهم، وذلك قبل انطلاق منصة أدوبي إكس دي، التي تجمع خبرات مصممي الويب في مجال تحسين تجربة المستخدِم. حيث تمتاز هذه المنصة بتخصّصها وتركيزها على تصاميم الويب التي تهدف إلى تحسين واجهة المستخدِم، وهي من أكثر منصّات التصميم تفاعلًا وتجاوبًا مع المصمم، إذ تسهّل تصميم المخططات الهيكلية والنماذج المبدئية لصفحات الويب، والتطبيقات المختلفة. وسيضم هذا الدليل مجموعة نصائح لاستخدام برنامج أدوبي إكس دي باحترافية. بدء استخدام أدوبي إكس دي ابدأ رحلتك في برنامج إكس دي بالنقر على زرّ (المقدمة التّعريفية)، التي ستشرح لك بالتّفصيل أساسيات استخدام البرنامج، والعناصر التي ستحتاجها في التصميم، إذ ستساعدك على إنشاء الّلوحات الفنية، واستيراد الصور، وغيرها الكثير. أنشئ بعدها مشروعًا جديدًا من قائمة (ملف)، وستظهر أمامك واجهة مشابهة للواجهة الترحيبية. في المرحلة التالية عليك اختيار أبعاد الشاشة التي تناسب مشروعك سواءً كان تصميم موقع للويب، أو تطبيق للهاتف المحمول؛ وإلا عليك بإدخال قيم الأبعاد يدويًّا. ستظهر أمامك بعد اختيارك القياسات، واجهة أدوبي إكس دي التي تتكوّن من التصميم والنموذج. حيث ستستطيع في نافذة التصميم، تركيب المكونات المختلفة للتصميم على اللوحة المخصّصة، بحيث تُمثَّل كل لوحة على شاشة مختلفةن وسيساعدك إكس دي على إنشاء عناصر، وأشكال أخرى إضافيّة، كما بإمكانك اختيار استيراد عمل فني ما من أيّ مصدر خارجي أيضًا. استكشف قوة خصائص إكس دي يضم برنامج أدوبي إكس دي جميع الخصائص التي يحتاجها المصمم في مجال واجهة المستخدم، حيث تتشابه معظم هذه الخصائص مع خصائص التصميم الموجودة في برامج شركة أدوبي الأخرى مثل الفوتوشوب. ومن جهة أخرى تختلف خصائص أدوات الرسم والطبقات في إكس دي عن تلك الموجودة في بقية برامج أدوبي، بحيث تتلاءم مع تنوُّع أساليب المصممين في العمل، كما يبقى كل عنصر من عناصر إكس دي في طبقة مستقلة، إلى جانب تنوّع الأيقونات التي تمثّل كل نوع من أنواع الطبقات، بحيث تعبّر عن نوع المحتوى الموجود في كل طبقة، وهو ما يسهّل على المصممين التفريق بين الأشكال المختلفة والمجلدات والصور بمجرد النظر إلى الأيقونة التي تمثّل الطبقة. إليك مجموعة من أفضل ميزات برنامج أدوبي إكس دي التي سترفع من إنتاجيتك عبر استخدامك للمنصة. تكرار الشبكة وهي ميزة مفيدة جدًّا، حيث تُمكّنك من تطبيق التكرار على عنصر، أو أكثر من العناصر التي أنشأتها، مما يساعدك على تمثيل هذه الأشكال على محورَي الفواصل X، والتراتيب Y. كما تساعدك خاصية التكرار على تغيير المسافة بين العناصر، بحيث تبدو وكأنها مجموعة من المكوّنات أو مكوّن وحيد. وتتجلّى أهمية هذه الميزة في إنجاز التصاميم التي تحوي عناصر مكرّرة، مثل: قائمة من الصور، أو النصوص، فعندما تُنشئ معرضًا للصور على الواجهة مثلًا، فسيتطلّب الأمر مجهودًا كبيرًا للحصول على المظهر المطلوب، بينما تساعدك خاصية التكرار على التركيز على تفاصيل العمل، دون القلق بشأن المظهر عند التطبيق. النماذج عندما تُنهي العمل على تصميمك، فستستطيع الاستمتاع بمشاهدة النتيجة عمليًّا من خلال خيار Prototype (النموذج)، والموجود في أعلى الزاوية اليسرى من الواجهة، حيث يمنحك هذا الخَيار القدرة على ربط عناصر تصميمك المختلفة، والتي ستشكّل في النهاية شاشات التطبيق الذي تعمل عليه. حدّد العنصر المطلوب وسيظهر سهم في الجانب الأيمن من مساحة العمل، اسحب هذا السهم وأفلته في لوحة العمل الأخرى التي ترغب بالربط معها. مجموعات جاهزة من واجهات المستخدم يضم برنامج أدوبي إكس دي مجموعات جاهزة من تصاميم واجهات المستخدِم التي تُسهّل تصميم النماذج المبدئية المناسبة لتطبيقات iOS، وجوجل، ومنصات ويندوز. فقد صُمّمت هذه المجموعات باستخدام عناصر جاهزة تساعد المصمم إلى حدّ كبير على معرفة شكل التطبيق عندما يُعرَض أمام المستخدِم، كما توفّر هذه المجموعات الوقت والجهد على المصمّم عند استخدامه بعض عناصرها الجاهزة. مكتبات التخزين السحابي Creative cloud يساعد التخزين السحابي على مشاركة جميع عناصر التصميم، مثل: الصور، والألوان، وأنماط الخط، وغيرها عبر جميع منصات أدوبي. حيث أُضيفَت هذه الميزة إلى منصة إكس دي في شهر آب عام ٢٠١٧، ليصبح بإمكان المصمّم الوصول إلى جميع العناصر المخزنة على السحابة الإبداعيّة لأدوبي، مما يوفّر الكثير من الوقت عند استخدام برنامجَي فوتوشوب، أو إليستريتور لإنشاء عناصر المشاريع على XD. الرموز تتشابه الرموز الموجودة في برنامج أدوبي إكس دي، مع تلك الموجودة في البرامج الأخرى مثل الإليستريتور، وهذا في بعض الخصائص؛ في حين تختلف عنها في خصائص أخرى، فعندما تُحوّل عنصرًا ما إلى رمز، فيتستطيع استخدامه في عدة لوحات عمل في الوقت نفسه؛ أما في حال عدّلْت على الرمز الموجود في لوحة العمل التي تعمل عليها حاليًّا، فسيُطَبّق التعديل نفسه على نفس الرمز الموجود في لوحات العمل الأخرى، مما سيساعدك على إنجاز الأعمال التي تتطلّب هذا التكرار بسرعة أكبر، وباحترافية تُجنّبك الأخطاء التي قد تنتج عن التكرار اليدوي، أو إغفال تطبيق هذا التكرار على لوحة عمل أخرى. العرض الأولي عندما تنتهي من ربط العناصر المختلفة لعملك؛ ستستطيع اختيار تفعيل تأثيرات الانتقال ease-in، وease-out، والضغط على زرّ التشغيل الموجود في أعلى القسم الأيمن من الشاشة لعرض التطبيق، كما تستطيع تحميل تطبيق الأندرويد، أو iOS، وإجراء التعديلات وفق الزمن الحقيقي real-time. تصدير المكونات عندما تعمل على تصميم تطبيق أصلي؛ فستحتاج إلى تصدير المكونات عند تسليمه للمُطوِّر، كما تستطيع جعل تصميمك بنسبة بوصة واحدة للطول، مقابل بوصة واحدة للعرض ١:١، كما تُزوّدك أدوات البرنامج بنسخ مُكبَّرة مرّتين أو ثلاث مرّات، وهي النسخ المطلوبة في تصاميم الأندرويد، وiOS. خدع ونصائح لاحتراف أدوبي إكس دي إليك بضعة نصائح ستساعدك على استخدام أدوبي إكس دي باحترافية ومتعة. الإرشادات الذكية تُعَدّ ميزة التعليمات الإرشادية الموجودة في فوتوشوب غير موجودة في أدوبي إكس دي، ولكن الإرشادات الذكية تظهر عندما تسحب عنصرًا ما لتنسيق موقعه بالنسبة إلى العناصر الأخرى، وهو السلوك الافتراضي للبرنامج. وللتخلّص من ذلك مؤقّتًا؛ اضغط على زرّ Ctrl، ثم اسحب العناصر لتنسيق مواقعها. خدعة تكبير الخط عندما تُحدّد نصًّا ما على واجهة البرنامج، فستظهر أمامك أداة تحديد لها شكل كرة صغيرة في أسفل مستطيل التّحديد، وعندما تسحب هذه الكرة للأعلى، فسيزداد حجم الخط؛ بينما سينقص عندما تسحبها للأسفل. نسخ الصور واستخدام خاصية القناع من السهل سحب أي صورة تريدها وتُفلِتها داخل واجهة أدوبي إكس دي، ولكن إذا أردْت لصورة ما أن تأخذ شكلًا محدّدًا، فتستطيع ببساطة سحب هذه الصورة إلى الشكل المطلوب، وستملأ الصورة هذا الشكل بتنسيق مناسب. يُفضّل أحيانًا تطبيق خاصية القناع Masking على أجزاء معيّنة من الصورة، حيث يُطبَّق هذا التأثير بدءًا بالطبقة الأعلى، ولن يتأثر بباقي التعديلات. أعِد ضبط ارتفاع الخط باستخدام الصفر إذا جرّبْت إعطاء قيم مختلفة لارتفاع خط الكتابة، ووجَدْت أنّ الارتفاع الافتراضي هو الأفضل، فبإمكانك إعادة قيمة الارتفاع إلى القيمة الافتراضية التي يُقدّمها البرنامج بسهولة، من خلال كتابة قيمة الصفر في حقل ارتفاع الخط. استيراد العناصر الشعاعية Vectors من برنامج الفوتوشوب تستطيع نقل الصور بسهولة بين برنامج الفوتوشوب وبرنامج XD، حيث يُمكنك إنشاء تحديد ما على صورة في الفوتوشوب، ثم الضغط على Ctrl + Shift + C لتُنسخ جميع العناصر الموجودة ضمن هذا التّحديد. افتح بعدها XD، واضغط على Ctrl + V للّصق، وستستطيع هنا تصدير الطبقات الموجهة من الفوتوشوب، بالضغط بالزر الأيمن للفأرة على الطبقة المطلوبة، ثم اختيار copy SVG، ولصق ما نسخته في برنامج XD. استخدم دليل الأنماط تستطيع إنشاء تصميم لدليل أنماط معين، بحيث يضم جميع المكوّنات، وعناصر التحكم، مثل: الأيقونات الشائعة، والأزرار، وعناصر الإدخال. بدل بين المساحة النصية والمساحة النقطية يمكننا التبديل بين المساحة النصية والمساحة النقطية، من خلال استخدام زرّ التحكم بالخصائص property inspector. غير معدل شفافية اللون بسهولة تستطيع تغيير مقدار شفافية أو تعتيم لون عنصر ما، من خلال تحديده، واختيار رقم ما من لوحة المفاتيح. حيث يُعبِّر الرقم ١ عن تعتيم بمقدار ١٠ بالمئة، بينما يعبر الرقم ٢ عن تعتيم بمقدار ٢٠ بالمئة وهكذا، وإذا أردْت الحصول على تعتيم تام بمقدار ١٠٠ بالمئة، فيكفيك الضغط على زرّ الصفر. وسع لوحة العمل بواسطة خطوط الطي خط الطّيّ هو مصطلح شائع في مجال تصميم الويب، وهو الخط الذي يستطيع المستخدِمون من خلاله رؤية محتوى الصفحة، دون الحاجة إلى زرّ التّمرير. عندما تفتح منصة XD، انقر على أيّ مكان في مساحة العمل، ثم انقر على القبضة السفلية التي تظهر أمامك واسحبها للأسفل، حيث ستتوسع بذلك مساحة العمل تاركةً وراءها خطًا منقّطًا يسمى خط الطّيّ. بإمكانك قراءة عدد البكسلات الموجودة من أعلى تصميمك حتى خط الطّيّ في قسم التمرير على الجانب الأيمن من الشاشة، مما سيساعدك على تخيُّل طول شاشة عرض التصميم عند تطبيقه. أعِد تسمية الطبقات بسهولة انقر نقرةً مزدوجة على اسم الطبقة وغيّره بسهولة، ثم اضغط على زرّ Tab من لوحة المفاتيح، وانتقل إلى الطبقة التالية بدون مغادرة وضع التعديل، أو اضغط على Shift + Tab للانتقال للأعلى، بحيث ستستطيع بذلك إعادة تسمية الطبقات بسرعة وسهولة. شارِك أعمالك وثبت التعليقات احصل على تقييم فوري لأعمالك من خلال مشاركتها، أو إرسالها لأعضاء فريقك؛ أو أرفقها إلى موقعَي Behance، أو Dribble، وذلك باستخدام شيفرة التّضمين، مما سيساعد المستخدِمين الآخرين على إضافة التعليقات على أجزاء معينة من التصميم. استخدم التصاميم الجاهزة لواجهة المستخدم تستطيع الوصول إلى النماذج الجاهزة التابعة لويندوز، أو جوجل، أو iOS؛ من خلال قائمة ملف، ثم خَيار فتح UI kits، واختيار النموذج المرغوب. صمم باستخدام تطبيق أدوبي comp من السهل إنشاء الرسوم التخطيطية، والنماذج المبدئية باستخدام تطبيق أدوبي comp على الهواتف الذكية، إذ يُسهّل استخدام الأصابع أو الأقلام الذكية، عملية التصميم، وإنتاج تصاميم، وأعمال مميزة. لا يدعم تطبيق comp التصدير إلى إكس دي حتى الآن، ولكنّك تستطيع التصدير إلى الإليستريتور، ثم النسخ واللصق في واجهة إكس دي للحصول على أشكال شعاعية Vectors قابلة للتعديل. استمتع بهذه الميزات، واحرص على ربط أعمالك مع برمجيات أدوبي المختلفة للحصول على تجربة غنية في التصميم الإبداعي. ترجمة وبتصرّف للمقال Adobe XD 101 – Guide For Newbie Designers للكاتب Harsh Raval
لقد أصبحت مواقع الويب اليوم ضرورةً مُلحّةً في تحديد مكانة العلامة التجارية وهويتها، كما باتت المنافسة بين مواقع الويب هائلة، إذ تُطلَق آلاف مواقع الويب على الشبكة حول العالم كل يوم. لذا فإن أردْت تصدر موقعك لنتائج البحث، فعليك تحسين ظهور الموقع على محركات البحث بهدف تحسين تجربة المستخدِم الذي يزور موقعك أيضًا. تُعرَّف تجربة المستخدِم بأنها رحلة زائر الموقع لتصفح موقعك، حيث تكون هذه التجربة مسؤولةً عن اختيار المستخدِم التفاعل مع خدمات موقعك، أو الاكتفاء بتصفّحه. تعمل عملية تحسين تجربة المستخدِم وتحسين ظهور موقعك في نتائج محركات البحث على توفير التجربة الأفضل لزوار الموقع، وتحويل هذه الزيارة إلى تفاعل بين الموقع والمستخدِم، وفيما يلي بعض النصائح التي من شأنها تحسين ظهور موقعك في نتائج محركات البحث الشهيرة. تحسين توافق موقعك مع شاشات الهواتف الذكية يتصفح معظم مستخدمو الإنترنت اليوم مواقع الويب بواسطة هواتفهم الذكية بمعدل أعلى بكثير من تصفحهم باستخدام الحاسوب، ولذلك يحتاج موقعك إلى التكيف مع شاشات هذه الأجهزة لتوفير تجربة مريحة للمستخدِمين، بغض النظر عن الجهاز الذي يستخدمونه للتصفح، فقد لا يتشابه تصفح المستخدِمين لمواقع الويب من خلال هواتفهم الذكية، مع تصفحهم لها باستخدام الحاسوب، إذ ينظر المستخدِم إلى محتوى الموقع بنظرة سريعة أثناء التصفح، لذلك احرص على أن يكون موقعك متوافقًا مع شاشات الهواتف الذكية، وفوري التحميل. استخدام أزرار الدعوة إلى القيام بإجراء معين لكي تُبقي الزوّار في موقعك لفترة أطول، فمن الضروري أن تستخدم أزرار الدعوة إلى تنفيذ إجراء معين، حيث تزود هذه الأزرار المستخدِم بفرصة التفاعل ضمن الموقع، مما سيبقي المستخدِم في حالة انتباه وتفاعل لفترة أطول، إذ تعمل هذه الأزرار مثل إشارات تساعد المستخدِم على الانتقال من خطوة إلى أخرى، فعندما تُضمّن صفحات موقعك أزرارًا من نوع "تعلم المزيد"، أو"تسجيل الدخول" مثلًا، فإنك بهذا ستساعد المستخدِم على التفاعل مع موقعك وإبداء اهتمامه بالمحتوى، مما سيحسن ظهور موقعك في نتائج محركات البحث وسيقلل معدلات الارتداد. تضمين تصاميم تناسب محركات البحث لكي تحصل على تجربة مستخدِم مثالية لموقعك، وظهور فعّال ومتقدم في محركات البحث، فعليك التركيز على التصميم، ولتحقيق ذلك فلابد من أن يكون موقعك سهل الفهرسة من قِبل محركات البحث، إذ لو فشلت محركات البحث في فهرسة محتوى موقعك، فلن يظهر في نتائج محركات البحث المتعلقة به عندما يبحث المستخدِمون عن الخدمات والمنتجات التي يقدِّمها موقعك. تتمثل إحدى الطرق التي تساعد محركات البحث على فهرسة موقعك في إضافة علامات العنوان لموقعك، مما سيساعد برمجيات زواحف الويب على الوصول إلى صفحات موقعك وفهرسته، كما تُعَدّ إضافة إمكانية التنقل بين صفحات موقعك أمرًا مهمًا جدًا، حيث تمنح الزوار القدرة على استكشاف موقعك، مما سيُسهّل على محركات البحث عملية الفهرسة. ركز على جودة المحتوى الهدف الأساسي لموقعك هو المحتوى؛ إذ يساعد محتوى الموقع على إيصال خدمات علامتك التجارية إلى المستخدِمين، وبإمكانك استخدام أيّ نوع من المحتوى لإيصال أفكارك للزوار، سواءً كان إنشاء مدونة، أو مقاطع فيديو، أو كتبًا إلكترونية، أو حتى رسوم توضيحية؛ فعندما يبحث المستخدِمون مثلًا عن معلومات حول موضوع معين يثير اهتمامهم، وتظهر مدونتك في الصفحة الأولى من نتائج بحث المحرك، فسيتفاعل الزوّار مع هذا المحتوى، وسيصبح موقعك محطّ اهتمام وذو مصداقية بالنسبة للزوار، وسيصبّ ذلك كله في تحسين تجربة المستخدِم ونتائج محركات البحث أيضًا. استخدام العبارات البديلة في حال عدم ظهور الصور عندما يكون اتصال المستخدِم بالإنترنت ضعيفًا نوعًا ما أثناء تصفح موقع ويب معين، فسيكون تحميل محتوى الموقع بطيئًا، وستحتاج الصور وقتًا أطول لتظهر على الشاشة، لذا ستُعطى أولوية العرض للمحتوى المكتوب، بحيث يحصل الزائر على بعض المعلومات ريثما يكتمل تحميل محتوى صفحة الويب. في هذه الحالة، ستظهر مساحة بيضاء خالية مكان الصور، مما قد يربك المستخدِم أو يتسبّب بنفاذ صبره على الانتظار حتى اكتمال العرض، وهنا ستساعد العبارات البديلة على تزويد المستخدِم بوصف للصورة ريثما تظهر أمامه من جهة، وستساعد محركات البحث على معرفة علاقة هذه الصور بموقعك من جهة أخرى. تحسين سرعة عرض صفحة الموقع حتى وإن تفوّق ترتيب موقعك في نتائج محركات البحث، فقد بقي أمامك تحدٍّ أخير قبل عرض محتوى موقعك كاملًا أمام المستخدِم. تُعَدّ سرعة تحميل صفحة الويب عاملًا أساسيًّا يجب أخذه بالحسبان، فقد يواجه موقعك مستخدمًا لا يطيق انتظار استجابة المخدّم لتحميل الصفحة، فيعود مباشرةً إلى صفحة نتائج محرك البحث ليزور موقعًا آخر ويحصل على ما يريد. لذلك يجب أن تركّز على سرعة تحميل وعرض موقعك، خصوصًا لشاشات الهواتف المحمولة، إذ أنّ لها تأثيرًا بالغًا في رفع ترتيب موقعك في نتائج محركات البحث. عرض رموز الأمان يلعب عامل الأمان في الموقع الإلكتروني دورًا أساسيًّا في تحسين تجربة المستخدِ، حيث تتجلّى أهمية عامل الأمان بطريقة أوضح في مواقع التجارة الإلكترونية، أين يحتاج المستخدِمون لإدخال تفاصيل بطاقاتهم المصرفية ومعلوماتهم الشخصية، فإذا زودْت موقعك بالحماية المطلوبة، فستضمن ثقة المستخدِمين، كما ستساعد محركات البحث على تعريف موقعك بوصفه موقعًا إلكترونيًا محميًا وآمنًا. إذ لما يرى المستخدِمون رموز الأمان معروضةً على موقعك، فسيشعرهم ذلك بالأمان لتصفح موقعك والتفاعل معه بثقة. بسّط بنيان موقعك قدر الإمكان يُقصد ببنيان الموقع، طريقة ترتيب صفحاته، إذ سيُسهّل البنيان البسيط والمريح إيجاد وفهرسة موقعك من قِبل محرّكات البحث، ومن الضروري ألا تبعد صفحات الموقع عن الصفحة الرئيسية أكثر من أربع نقرات مما سيساعد المستخدِمين على تصفح موقعك بأريحية ودون ارتباك. الأولوية لمحتوى الموقع يجب أن يدرك مصمم الويب مدى أهمية وضوح محتوى الموقع بذاته، وألّا تؤثر المبالغة في استخدام الجماليات على جودة عرض المحتوى، إذ يحتاج الزائر إلى فهم محتوى صفحات موقعك للتفاعل معه والتنقل بين صفحاته، ومن المهم الانتباه إلى أنّ الصفحات المختلفة تحتاج إلى كميات مختلفة من المحتوى ضمنها. فعلى سبيل المثال، يجب أن يكون محتوى صفحة مبيعات ما مُختصرًا، ومُكثّفًا، ومعروضًا بطريقة مثيرة للاهتمام. كتابة الكلمات المفتاحية المناسبة وأوصاف تعريفية أفضل Meta تساعد الكلمات المفتاحية والأوصاف التعريفية على فهم موقعك والهدف من محتواه من قِبل محركات البحث، كما تساعد الكلمات المفتاحية الناس على فهم محتوى الموقع وخدماته، إذ عندما يقتنع المستخدِم بأن موقعك يضم الإجابة المثالية التي يبحث عنها، فسينقر على رابط موقعك لزيارته بغض النظر عن ظهوره في المرتبة الثالثة أو الرابعة في صفحة نتائج محرك البحث، لذلك فمن المفيد التركيز على تضمين كلمة ذات صلة بمحتوى موقعك في الوصف التعريفي. تحسين العناصر المرئية بأنواعها تلعب الأنواع المختلفة من العناصر المرئية دورًا مهمًّا في تحسين ترتيب مواقع الويب، ويتضمن ذلك وجود صور ومقاطع فيديو عالية الجودة على صفحات موقعك، كما أنّ من الضروري تحقيق التوازن بين جودة ملفات العناصر المرئية وأحجامها، لأنّ الملفات ذات الأحجام الكبيرة تؤثر سلبًا على المساحة التخزينية للموقع وسرعة تحميل محتواه. إذ يُفضَّل وجود صفحة تحمل اسم "سيكون الموقع متاحًا قريبًا" مثلًا، بدلاً من انتظار إضافة كافة صفحات الموقع، كما يجب أن تعكس ملفات الوسائط المختلفة الهدف من موقعك، وأن تنسجم مع بعضها لتحقيق ذلك. أضِف أيقونات منصات التواصل الاجتماعي إلى موقعك تُعَدّ أزرار المشاركة مع منصات التواصل الاجتماعي أساسيةً في صفحات الويب. فإذا سهّلْت على مستخدمي موقعك مشاركة المحتوى عبر منصات التواصل الاجتماعي، فسيشجعهم ذلك على تصفح موقعك والتفاعل مع محتواه. ومن المهم أن تنسجم طريقة عرض هذه الأزرار مع تصميم صفحات الموقع. التخفيف من العبء البرمجي لاستخدام لغة الجافاسكريبت تؤثر المبالغة في استخدام شيفرات الجافاسكريبت في برمجة كافة صفحات موقعك على تصنيفه في نتائج محركات البحث، فعندما تُطلق موقعك على الشبكة، فستذهب برمجيات زواحف الويب إلى محتوى موقعك وتمسحه بعمق لفهرسته في قائمة نتائج محركات البحث التي تظهر في صفحة الويب، لذا فإن استخدمت شيفرات الجافاسكريبت بإفراط، فقد تفشل عمليات الفهرسة تلك، لذلك احرص على إنشاء صفحات بسيطة ومنظمة برمجيًّا قدر الإمكان. ستساهم هذه النصائح في تحسين تجربة زوار موقعك مما سيحّسن ظهوره في نتائج محركات البحث. ترجمة وبتصرّف للمقال 13 UX Tips That Will Improve Your Website’s SEO لصاحبه Harsh Raval.