استكشاف كرر الشبكة في Adobe XD

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

في Adobe Experience Design CC (Beta) ، قدمنا ​​ميزة Repeat Grid لمعالجة هذا الجانب الممل من سير عمل المصمم. في هذه المقالة ، سنحفر بعمق لاكتشاف القوة الحقيقية لهذه الميزة الموفرة للوقت. سننشئ ونضبط شبكة التكرار ، ونضيف محتوى إليها ، ونعمل على توصيلها في وضع النموذج الأولي البسيط والقوي في Adobe XD. إذا كنت ترغب في المتابعة ، يمكنك تنزيل Adobe XD واختباره مجانًا.

مزيد من القراءة على SmashingMag:

• نماذج أولية سريعة لتجربة المستخدم باستخدام اختصارات Adobe XD
• كيفية إنشاء أيقونات باستخدام Adobe XD
• كيف نستخدم النماذج الأولية وكيف أنها تجعلنا أكثر كفاءة

إنشاء وتعديل شبكة متكررة

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

الخطوة 1: إنشاء كائناتنا الأولية

• من شاشة الترحيب ، حدد نوع لوحة الرسم لبدء ملف جديد.
• ارسم مستطيلاً باستخدام أداة المستطيل ( R ).
• على يمين المستطيل ، استخدم أداة النص ( T ) لكتابة بعض نص العنصر النائب.
• باستخدام أداة التحديد ( V ) ، حدد كلا الكائنين ، إما عن طريق تحديد مستطيل التحديد (رسم مربع حول كلا الكائنين) ، أو عن طريق تحديد كائن واحد وتحديد الآخر مع الضغط على مفتاح Shift.

لاحظ أننا لا نحتاج إلى الدقة في هذه المرحلة ، حيث يمكننا تعديل العناصر لاحقًا.

الخطوة 2: قم بإنشاء وتغيير حجم شبكة التكرار الخاصة بك

قم بتحويل التحديد إلى Repeat Grid بالنقر فوق الزر الموجود في Property Inspector أو باستخدام مفتاح الاختصار Cmd + R

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

انقر واسحب المقبض الأيمن إلى اليمين ، لتوسيع شبكة التكرار. لتوسيع شبكة التكرار لأسفل ، اسحب المقبض السفلي لأسفل.

لدينا الآن عناصر متكررة في شبكة التكرار. جميع الأنماط التي نطبقها على أي كائن ستكون لجميع الإصدارات المتكررة منه.

الخطوة 3: اضبط أي عناصر داخل شبكة التكرار

مثل أي مجموعة ، يمكننا الوصول إلى العناصر المكونة لـ Repeat Grid بالنقر المزدوج فوق المجموعة. بمجرد إجراء التغييرات ، يمكننا الخروج من سياق التعديل بالضغط على مفتاح Escape. ومع ذلك ، هناك طرق أخرى للوصول إلى العناصر المكونة. على سبيل المثال ، يمكننا التعمق في العنصر في لوحة Layers ( Cmd + Y ) أو عن طريق تحديده مباشرة ( Cmd + Click ).

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

الخطوة 4: اضبط حشوة الصف والعمود في شبكة التكرار

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

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

يمكنك تحويل أي مجموعة من الكائنات إلى شبكة تكرار. تصبح هذه الكائنات خلية في شبكة التكرار. يمكنك بعد ذلك تحرير الخلية وضبط الفجوة بين الصفوف والأعمدة.

استخدام البيانات في شبكة التكرار

الآن بعد أن أصبح لدينا الشكل العام لقائمة جهات الاتصال الخاصة بنا ، يمكننا ملؤها بالمحتوى. إن أبسط طريقة للتعبئة هي تغيير كل عنصر على حدة.

الخطوة 1: تحديث عناصر النص الفردية

• Cmd + Click كائن نص في Repeat Grid لتحديده. أنت الآن في وضع سياق تحرير Repeat Grid.
• انقر نقرًا مزدوجًا فوق عنصر النص لتحريره وتغيير النص إلى اسم. لاحظ أن المحتوى لا يتم تطبيقه على كل كائنات النص الأخرى في شبكة التكرار. ومع ذلك ، فإن أي نمط يتم تطبيقه على كائن النص يتم تطبيقه على كل كائنات النص.

الخطوة 2: إنشاء نموذج تعبئة الصورة

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

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

ومع ذلك ، يمكن أن يصبح ذلك مملاً حقًا. بدلاً من ذلك ، ما سنفعله هو استخدام المحتوى الذي أعددناه مسبقًا.

الخطوة 3: اسحب ملفًا نصيًا تم فصله عن طريق الإرجاع إلى الكائن النصي الخاص بك

• قم بإنشاء ملف نصي بامتداد .txt. يمكنك إنشاء هذا باستخدام TextEdit الخاص بـ Mac (حدد Format> Make Plain Text) أو أي محرر نصوص تفضله. افصل كل قطعة من البيانات مع عودة.
• بمجرد حفظ الملف ، اسحبه من Finder إلى كائن نص Repeat Grid في Adobe XD لاستيراد البيانات.

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

الخطوة 4: اسحب مجموعة مختارة من ملفات الصور إلى المستطيل.

• في Finder ، حدد عددًا من الصور.
• اسحب هذا التحديد من Finder إلى مستطيل Repeat Grid لاستيراد الصور كمعبئات للمستطيل المتكرر.
• حدد المستطيل وقم بتغيير نصف قطر الزاوية عن طريق سحب أحد عناصر التحكم في نصف القطر. تنعكس جميع تغييرات أسلوبك في كل تكرار.

على غرار سحب الصور دفعة واحدة ، فأنت تنشئ نمطًا متكررًا لتعبئة الكائن. ومثل النص تمامًا ، يتم نشر أي تغيير في الحاوية على جميع عمليات تكرار الكائن في شبكة التكرار.

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

إضافة محتوى إلى تكرار الشبكة

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

في مثالنا ، سنضيف خطًا أفقيًا لفصل الخلايا عموديًا.

الخطوة 1: ارسم أثناء تحرير السياق

• أدخل سياق تحرير Repeat Grid.
• ارسم خطًا أفقيًا فوق الخلية أدناه عن طريق تحديد أداة الخط ( L ) والضغط باستمرار على مفتاح Shift أثناء السحب.
• باستخدام أداة التحديد ، اضبط موقع الخط حتى يتم محاذاته إلى يسار المستطيل.
• اضغط على Escape للخروج من تحرير السياق.

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

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

الخطوة 2: إعادة ضبط الحشو السلبي

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

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

الخطوة 3: قص ولصق في سياق تحرير الشبكة المتكرر

• قم بتنزيل ملف star.svg واسحبه إلى لوحة اللصق ، خارج لوح الرسم الحالي. يؤدي هذا إلى استيراد ملف star.svg إلى مشروعك.
• قم بتحويل المسار الذي تم استيراده إلى شبكة تكرار واسحب المقبض الأيمن إلى اليمين حتى تحصل على إجمالي أربع نجوم. اضبط الحشوة لتقريب النجوم من بعضها البعض.
• قم بقص شبكة التكرار بالنجوم ( Cmd + X ) ، ثم انقر نقرًا مزدوجًا فوق أي خلية في قائمة جهات الاتصال الخاصة بك لإدخال سياق التحرير الخاص بها.
• لصق ( Cmd + V ). سيتم لصق شبكة تكرار النجوم الخاصة بك في وسط الخلية. حرك النجوم بحيث تكون أسفل النص.

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

الخطوة 4: فك تجميع شبكة التكرار الداخلية وتحريرها حسب الضرورة

• نظرًا لأنك موجود بالفعل في سياق تحرير قائمة جهات الاتصال ، انقر فوق شبكة تكرار النجوم لتحديدها.
• قم بفك تجميع Repeat Grid عن طريق تحديد زر Ungroup في Property Inspector ، أو تحديد Ungroup Grid من قائمة السياق (النقر مع الضغط على Ctrl أو زر الماوس الأيمن) ، أو استخدام اختصار لوحة المفاتيح Cmd + Shift + G
• حدد اثنين من النجوم وقم بإلغاء تحديد التعبئة.

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

النماذج الأولية من شبكة كرر

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

في هذه الحالة ، سنقوم فقط بإنشاء لوح رسم وسلك ثانٍ من شبكة التكرار الخاصة بنا في ثلاثة سيناريوهات مختلفة.

الخيار 1: قم بتوصيل شبكة التكرار بالكامل لتفاعل واحد

• قم بإنشاء لوحة فنية ثانية في ملفك باستخدام أداة Artboard ( A ). انقر على يمين لوح الرسم الموجود لديك لإنشاء لوح رسم آخر بجوار لوح الرسم الأول.
• قم بالتبديل إلى وضع النموذج الأولي عن طريق النقر فوق علامة التبويب الموجودة أعلى إطار التطبيق أو باستخدام اختصار لوحة المفاتيح Cmd + Tab .
• حدد شبكة التكرار في لوح الرسم الأول. سيظهر موصل بسهم على الجانب الأيمن من الكائن عند منتصفه.
• اسحب هذا الموصل إلى لوح الرسم التالي. حدد خيارات الانتقال في النافذة المنبثقة ، ثم اضغط على Escape أو انقر بالخارج لتجاهلها.
• قم بالمعاينة إما بالضغط على الزر "تشغيل" في الزاوية العلوية اليمنى من إطار التطبيق أو باستخدام اختصار لوحة المفاتيح Cmd + Enter . انقر في أي مكان فوق شبكة التكرار لتشغيل التفاعل.

ما فعلناه في هذه المرحلة هو توصيل الكائن بأكمله ، بما في ذلك الحشو ، كنقطة إصابة للتفاعل.

الخيار 2: سلك عنصرًا واحدًا لشبكة متكررة للتفاعل

• التراجع عن السلك الأخير باستخدام اختصار لوحة المفاتيح Cmd + Z
• Cmd- انقر فوق مستطيل في Repeat Grid لتوجيه تحديده.
• اسحب الموصل الموجود على يمين المستطيل واسحبه إلى لوح الرسم الثاني. حدد خيارات الانتقال في النافذة المنبثقة كما كان من قبل ، ثم تجاهلها.
• إذا كانت نافذة المعاينة الخاصة بك لا تزال مفتوحة ، قم بتشغيلها مرة أخرى وانقر فوق الهدف.

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

الخيار 3: إنشاء مجموعة من العناصر داخل شبكة التكرار وإنشاء تفاعل من المجموعة.

• التراجع عن السلك الأخير باستخدام اختصار لوحة المفاتيح Cmd + Z
• ارجع إلى وضع التصميم بالنقر فوق علامة التبويب أو استخدام اختصار لوحة المفاتيح Cmd + Tab .
• Cmd + Click مستطيل في Repeat Grid لتوجيه تحديده. انقر مع الضغط على مفتاح Shift على كائن النص المجاور له لإضافته إلى تحديدك.
• قم بتجميع الكائنين باستخدام تحديد قائمة السياق أو اختصار لوحة المفاتيح Cmd + G
• عد إلى وضع النماذج الأولية. لاحظ أن اختيارك يظل كما هو في وضع التصميم.
• اسحب الموصل من المجموعة إلى لوح الرسم الثاني. لقد قمت الآن بتوصيل منطقة المجموعة بالكامل كنقطة وصول للتفاعل.

يمكنك أيضًا إنشاء تفاعل عن طريق تعيين نقطة الوصول إلى شبكة التكرار بأكملها ، أو عنصر فردي من داخلها ، أو مجموعة تم إنشاؤها داخلها.

هذا هو!

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

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

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