تصميم واجهة المستخدم (UI) بإستخدام Adobe XD

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

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

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

1- أداة Repeat grid، السرعة بالمعنى الحقيقي

واحدة من أهم أدوات برنامج Adobe XD هي أداة Repeat Grid. ستعمل أداة الشبكة المتكررة في Adobe XD على تحقيق المعجزات في تسريع تصميمك.

ما الذي تفعله أداة تكرار الشبكة بالضبط؟

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

ولكن بفضل أداة Repeat Grid في برنامج Adobe XD، يمكنك تصميم بوكس لأكلة واحده فقط، وتحديد المربع واستخدام وظيفة الشبكة المتكررة، يمكنك تكرار بوكس الطعام في اتجاهات مختلفة في بضع ثوانٍ عدة مرات كما تريد. انسخ عن طريق سحب علامتي تبويب واضبط الحجم بينهما ببساطة. لن تحتاج إلى التحكم في كل مربع بشكل فردي وفي وقت قصير جدًا ستتمكن من تكرار عناصر واجهة المستخدم التي تريد تكرارها.

تصميم واجهة المستخدم (UI) بإستخدام Adobe XD

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

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

2- إمكانيات Assets Panel المذهله في الإلتزام بالتصميم وزيادة السرعة

الميزة التالية لـ Adobe XD، والتي تلعب دورًا كبيرًا في جعل عملية التصميم أكثر احترافية، هي لوحة الأصول(Assets Panel) المتوفرة في هذا البرنامج. في هذه المقالة سنناقش دورها في تحسين عملية تصميم واجهة المستخدم.

ما هي Assets Panel وما هو استخدامها؟

Assets Panel عبارة عن لوحة تتضمن ميزات متنوعة على الجانب الأيسر من برنامج Adobe XD، والتي تتضمن ثلاثة أقسام تسمى الألوان(Colors) وأنماط الأحرف(Character Styles) والمكونات(Components)، والتي في الواقع، يمكن للمصمم تحديد الأنماط المختلفة التي يحتاجها في التصميم، بواسطة هذه 3 العناصر والوصول إليها بسهولة في المستقبل.

لنفترض أنك تصمم واجهة مستخدم لتطبيق ما، فقد فكرت بالفعل في لوحة ألوان معينة في تصميم التطبيق وتنوي استخدامها. يمكنك تحديد الألوان مرة واحدة باسم Color Style في لوحة Assets وإضافتها إلى أي عنصر تريد بنقرة واحدة فقط عند التصميم، ولا تقلق بشأن رمز اللون الذي استخدمته لكل لون وتدرج. لن يكون لديك مشكلة في هذا حتى.

باستخدام قسم Character Styles في Assets Panel، ستتمكن من تحديد مواصفات الطباعة مثل الفونت واللون والوزن والحجم التي تستخدمها في أجزاء مختلفة من واجهة المستخدم وأستخدامها في أجزاء مختلفة من الواجهة بنقرة واحدة فقط.

سنتحدث عن المكونات(Components) لاحقًا في هذه المقالة.

ميزات Assets Panel ببرنامج Adobe XD

توفر لك العناصر الموجودة في Assets Panel ببرنامج Adobe XD ميزتين هامتين:

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

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

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

3- قوة Component في التصميم

الكامبوننتات هي جزء من لوحة الأصول(Assets Panel) كما قلنا من قبل. عُرفت الكامبوننتات باسم Symbol في الإصدارات القديمة من XD، لكنها عُرفت في الإصدارات الحديثة باسم Component.

ما هي الكامبوننتات في Adobe XD؟

إذا كنت ترغب في تصميم اللغة الألمانية واستخدامها في أجزاء مختلفة من واجهة المستخدم الخاصة بك، فليس من الضروري إعادة تصميمها في جميع أجزاء واجهة المستخدم. يكفي تصميمه مرة واحدة وتحويله إلى كامبوننت واستخدامه في أجزاء مختلفة من واجهة المستخدم من Assets Panel باستخدام إجراء السحب(Drag).

تصميم واجهة المستخدم (UI) بإستخدام Adobe XD

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

الشيء المثير للاهتمام والمهم حول الكامبوننتات هو أنها، مثل الأصول الأخرى، تحافظ على الاتساق(Consistency) في التصميم ويمكن أن يكون مظهرها متماثلًا أو مختلفًا في جميع أنحاء التصميم. على سبيل المثال، يمكنك إنشاء 10 أزرار CTA بنفس المظهر تمامًا ولكن بألوان مختلفة! يمكن أيضًا تغيير محتوى المكونات في أجزاء مختلفة من واجهة المستخدم، على سبيل المثال، يمكن أن يكون لديك 10 أزرار CTA بنفس الهيكل ولكن بنص مختلف.

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

تعلم الأدوات لن يجعل منك مصمما

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

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

منشور ذات صلة
Adobe Premiere pro 7 Minutes

ما هو Adobe Premiere pro؟

أمير مقدم

Adobe Premiere Pro هو برنامج تطبيقي يُستخدم لتحرير ملفات الفيديو على أجهزة الكمبيوتر التي تعمل بنظام Windows أو Mac OS. إنه برنامج تحرير شامل ومتوفر أيضًا كجزء من مجموعة Adobe Creative Cloud.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة