() translation by (you can also view the original English article)
في برنامجي التعليمي الأخير ، نظرنا في كيفية استخدام أدوبي إكسض في تثبيت تطبيق جوّال. في هذه المرة ، سأشاركك في كيفية تصميم نموذج مرئي ونموذج أولي.
يمكن استخدام أدوبي إكسض للتصميم لكل من الويب والجوال ، ويوفر مساحة عمل مبسطة لتصميم تجربتك مع تضمين تفاعل بسيط يمكن إرساله إلى مطور البرامج أو تقديمه إلى العميل.
سننشئ موقعًا على الويب لمتجر ملابس بسيط عبر الإنترنت ؛ علامة تجارية وهمية تسمى "لو كي" ، التي تبيع مجموعة من الأساسيات تحت عنوان الحضرية. اتبع معًا للتعلم ، ولا تتردد في تعديل النتائج وتجربتها إذا كنت تستخدم هذا البرنامج التعليمي لتصميم متجرك الخاص.
١. بحث مستخدميك
يفترض هذا البرنامج التعليمي أنك قد أنجزت واجبك المنزلي بالفعل. إذا كنت تمثل نشاطًا تجاريًا ، فهذا يعني أنك تعرف بالفعل من هو عميلك وأي نوع من تجربة الويب سيكون الأنسب له. كمصمم ، سوف تقوم بعمل بحث المستخدم الخاص بك ، تصميم أو تحديد هوية العلامة التجارية ، وقضاء فترة جيدة من الوقت تأطير الأسلاك والمراجعة.
بالطبع ، إذا كنت ترغب فقط في تجربة أدوبي إكسض واستخدم هذا البرنامج التعليمي لتعلم أساسيات تصميم نموذج أولي ، يمكنك القيام بذلك أيضًا. لا تفترض فقط أن العملية المذكورة هنا هي عملية تصميم أكس فعلية بالكامل!
عندما تكون مستعدًا لبدء تطوير نموذج مرئي وتفاعلي ، يمكنك الانتقال إلى الخطوة التالية.
٢. اختيار حجم الشاشة
أول شيء يسألك ٢ إكسض هو اختيار حجم الشاشة. الإعداد الافتراضي للويب هو الويب ١٩٢٠ (١٩٢٠ X ١٠٨٠ بكس) ولكن يمكنك أيضًا اختيار أحد الخيارات الأخرى (الويب ١٢٨٠ أو الويب ١٣٦٦) أو اختيار حجم مخصص.
بمجرد اختيارك ، سيتم الترحيب بك من خلال مساحة عمل إكسض ، في طريقة العرض التصميم افتراضيًا ، وقماش أبيض نظيف ("أرتبورد") في الحجم الذي تختاره.
٣. جعل مكررة من لوح الرسم الخاص بك
سنستغل أربع صفحات قياسية لمتجر عبر الإنترنت:
- الصفحة الرئيسية
- صفحة التصنيف ("قمصان")
- العربة (تظهر العناصر التي أضافها الزبون للمغادرة)
- الصفحة حول (التي تحتوي على القليل من المعلومات حول العلامة التجارية)
سنحتاج أيضًا إلى لوحات فنية لقائمة منسدلة ، بالإضافة إلى نافذة منبثقة تعرض مزيدًا من التفاصيل عن منتج محدد (تأثير "الضوء المبسط") ولكن يمكننا إنشاء تلك لاحقًا.
في الوقت الحالي ، أنشئ ثلاث لوحات فنية أخرى عن طريق اختيار وظيفة لوح الرسم من الجزء الأيمن والنقر في أي مكان بجوار لوح الرسم الخاص بك الأول.
يمكنك ، بدلاً من ذلك ، أيضًا النقر فوق لوح الرسم الأول لتحديده واختيار اديت> ضبلكته. إعادة تسمية كل واحد عن طريق النقر المزدوج على العناوين الافتراضية (مرئية في أعلى يمين كل لوح).
٤. وضع الصور وإضافة النص
بالنسبة إلى صفحتنا الرئيسية ، سنفعل شيئًا شائعًا للغاية مع مواقع الويب في صناعة الأزياء والتجزئة. سنختار صورة واحدة كبيرة لتكون خلفيتنا بالكامل.
تلميح: يمكنك أن تجعل أدوبي إكسض تعرف أن اللوحة الفنية هي صفحتك الرئيسية عن طريق تحديد لوح الرسم بالكامل والنقر فوق العلامة الرمادية التي تظهر على الجانب العلوي الأيسر. سيتحول إلى اللون الأزرق لإظهار أن هذه الصفحة هي الصفحة المقصودة أو المبدئية لتجربتك.
بمجرد تحديد الصورة التي تريد استخدامها ، حدد ملف> استيراد (بدلاً من ذلك ، اضغط على كمد + شفت + أي) لتحديد موقع هذه الصورة على القرص واستيرادها على اللوحة القماشية. إذا كانت صورتك أكبر من لوحة الرسم ، فاضغط مع الاستمرار عليها واسحبها لتجد موضعًا تريده.
من خلال مواصلة جماليتنا البسيطة ، سنحافظ على نصنا قصيرًا ونظيفًا - فقط اسم العلامة التجارية (أو الشعار) ، وشعارًا ، وشريطًا للتنقل.
حدد أداة النص من الجزء الموجود على اليمين وانقر في أي مكان تريده على اللوحة الفنية الأولى لبدء الكتابة. بالنسبة إلى نص شعارنا ، أبدأ من منتصف الصفحة ولكن يمكنك تحريكه كما هو مطلوب عن طريق النقر والسحب. بالطبع ، يمكنك أيضًا استيراد صورة شعار بنفس الطريقة التي استوردنا بها صورة الخلفية.
ضمن نص الشعار ، يمكنك استخدام أداة النص مرة أخرى لكتابة سطر العلامة التجارية.
يوفر أدوبي إكسض العديد من خيارات التنسيق القياسية لنصك. يمكنك تحديد أي كتلة نص وتغيير الخط والنمط واللون والحجم والسمات الأخرى. تعرض لقطة الشاشة أدناه تنسيق نص التنقل في الصفحة الرئيسية.
تتبع الخطوط في هذا المثال مقياسًا متناغمًا بنسبة ١: ٢ يمكنك التعرف عليه في هذا الدليل حول الطباعة الفعالة للويب:
استخدم ما تعلمته في هذا القسم لإضافة عناوين الصفحات للصفحات الأربعة المتبقية ووضع صور ونص أساسي لصفحات "العربة" و "حول".
٥. جعل الرمز
دعنا ننتقل إلى صفحة حول.
ابحث عن أيقونة التنقل التي تعجبك (مثل الموجودة في هذه المجموعة) وقم بوضعها بجانب الشارة ، في الزاوية العلوية اليسرى ، على الصفحة حول (أو أي من الصفحتين الأخريين ، إلى جانب الصفحة الرئيسية).
نظرًا لأنك ستحتاج إلى رمزك وشعارك للصفحات الأخرى أيضًا ، يمكنك تحويلها إلى رمز. انقر بزر الماوس الأيمن وحدد يصنع رمز(أو اضغط على كمد + ك). يمكنك الوصول إلى أي رموز قمت بها عن طريق النقر على أيقونة الأصول في الصفحة اليسرى. من هناك ، يمكنك سحب وإسقاط رمز إلى أي من لوحات الرسم. بهذه الطريقة ، لن تضطر إلى النسخ واللصق في كل مرة.
يمكنك ربط رمز مفتاح لو الخاص بك إلى الصفحة الرئيسية باستخدام الطريقة في الخطوة التالية.
٦. إنشاء أول رابط لك
انتقل إلى وضع النموذج من الشريط الموجود في الجزء العلوي. قم بالتكبير إلى أول لوحة فنية (الصفحة الرئيسية) وحدد نص حول. سيظهر سهم أزرق بجواره. اضغط عليه واسحبه للخارج. سوف يتبع سلك أزرق طاعة أينما ذهب المؤشر الخاص بك ..
اسحبه إلى لوحة الفن الثانية (حول) واتركه هناك. لقد قمت الآن بإنشاء ارتباط بين الصفحتين ، والتأكد من تحديد علامة التبويب انتقال ، يمكنك اختيار نوع الانتقال والتخفيف باستخدام النافذة المنبثقة التي تظهر عند إسقاط السلك. أو الآن ، يمكنك الاحتفاظ بالانتقال إلى لا شيء لأننا نريد أن تستبدل الصفحة حول الصفحة الرئيسية فورًا بمجرد الضغط على الزر "حول".
يمكنك تكرار هذه الطريقة لإضافة روابط إلى أي صفحات أخرى.
٧. استخدم تراكب لإضافة قائمة منسدلة و صندوق مضئ
دعنا الآن نضيف قائمة التنقل المنسدلة الخاصة بنا.
قم بإنشاء لوحة فنية جديدة ، بعنوان نف ، وقم بتعديل أبعادها وفقًا لمتطلباتك باستخدام عناصر التحكم في العرض والارتفاع الموضحة في الجزء الأيسر. لوح رسم Nav الموضح أدناه هو ٢١٠ بكسل × ٢٧٥ بكسل.
باستخدام النص ، واختياريا ، أدوات الخط في الجزء الأيسر ، تصميم القائمة المنسدلة الخاصة بك. ستظهر هذه القائمة عندما ينقر العميل على رمز الهامبرغر.
في وضع النموذج الأولي ، اسحب سلكًا من قائمة الهامبرغر إلى لوحة نف . في المربع الذي يظهر ، قم بالتبديل إلى علامة التبويب غطاء. سيظهر مربع أخضر يعرض مكان ظهور التراكب. اسحب لتحريكها حتى تحت قائمة الهامبورجر الخاصة بك. اختر لا شيء كإعداد انتقالي (أو تجربة مع الخيارات الأخرى).
انقر الآن على رمز لعب في أعلى النافذة اليمنى. ستظهر صفحتك الرئيسية في نافذة المعاينة. انقر فوق الزر "حول" للانتقال إلى صفحة "حول". الآن ، انقر فوق رمز همبرغر. وسوف تبرز القائمة المنسدلة الخاصة بك. اضغط عليها مرة أخرى وسوف تختفي.
يمكنك ربط عناوين العناصر / الصفحات في القائمة المنسدلة بالصفحات الخاصة بها باستخدام الطريقة نفسها كما في الخطوة ٦. وسيحولها إلى ملاحة عملية لجميع الصفحات في النموذج الأولي الخاص بك.
٨. استخدم ميزة "كرر الشبكة" لإنشاء صفوف وأعمدة كائنات
بالنسبة إلى صفحة القمصان ، نحتاج إلى صفوف متعددة من المنتجات.
لذلك ، سنستخدم ميزة إكسض تسمى كرر الشبكة. إذا كان التصميم الخاص بك يتضمن عناصر مكررة أو قوائم محتوى ، تتيح لك ميزة كرر الشبكة القيام بذلك مع الاستمرار في جعله نسيمًا لإجراء تغييرات يتم تحديثها تلقائيًا عبر الشبكة بالكامل.
استخدم أداة المستطيل من الجزء الأيسر لرسم مستطيل ٤٥٠بكس اكس ٣٠٠ بكس ، ثم استخدم أداة فيل من الجزء الأيمن لتلوينها باللون الرمادي الفاتح للإشارة إلى هذا العنصر النائب للصورة.
الآن حدد المستطيل وانقر فوق "تكرار الشبكة" في الجزء الأيسر (أو كائن> تكرار الشبكة). يظهر مخطط أخضر ومؤخرات المنزلق الخضراء حول اختيارك ، مما يسمح لك بتمديد قائمة المحتويات الخاصة بك في أي اتجاه (رأسيًا وأفقيًا في حالتنا). في الوقت الحالي ، انقر واسحب لمدة كافية لإنشاء صفين مع ثلاثة أعمدة لكل منهما.).
حدد شبكتك المتكررة ثم قم بالمرور على المسافات البيضاء بين المستطيلات الخاصة بك. عند تشغيل اللون الوردي ، يمكنك السحب لأعلى ولأسفل لتغيير الحشو بين الخلايا.
لتعبئة الشبكة باستخدام صور المنتج ، اسحب صور المنتج من مجلد واحد إلى الشبكة في إكسض. سوف تملأ الشبكة تلقائيا.
يمكنك استخدام نفس طريقة التراكب من الخطوة ٧ لإنشاء صندوق الضوء الخاص بمنتجك الذي يظهر عند النقر على قميص / منتج.
٩. خطوة اختيارية: شارك!
يتيح لك أدوبي إكسض مشاركة أي شيء تعمل معه مع المتعاونين وأصحاب المصلحة الآخرين بسرعة وسهولة.
مشاركة رابط لمشروع التصميم الخاص بك معهم عن طريق تحديد >ملف> مشاركة> نشر النموذج الأولي..
يمكنك أيضًا نشر مواصفات التصميم التي تسمح للمطورين (أو أي شخص آخر لهذه المسألة) بعرض التنسيق وإعدادات أخرى لنموذجك الأولي في المستعرض يمكنهم أيضًا تنزيل أي أصول ، مثل الصور أو الرسومات ، التي تضع علامة عليها للتصدير (انتقل إلى عرض> الطبقات. يمكنك إما تحديد أي عنصر والنقر فوق الرمز المجاور له ، أو النقر بزر الماوس الأيمن فوق أي عنصر في القائمة وحدد علامة للتصدير دفعة واحدة).
استنتاج
وانتهينا! لقد صممت الآن نموذجًا أوليًا لمتجر بسيط عبر الإنترنت. يمكن مشاركتها مع أصحاب المصلحة ، أو التقطت وبنى من قبل المطورين. تحقق من الروابط أدناه لمعرفة المزيد عن أدوبي إكسض!
