النموذج الأولي بسهولة - برنامج تعليمي لـ InVision Studio

ما لم تكن نائمًا في النصف الأول من عام 2018 ، فربما تكون على دراية تامة بالتوقع المحموم في مجتمع التصميم التفاعلي الذي أدى إلى إصدار تطبيق InVision Studio. تشتهر InVision بمجموعتها الإضافية Sketch و Photoshop مثل Craft ، ولأنها منصة go-to لتحويل تصميمات الواجهة الثابتة بسرعة إلى نماذج أولية قابلة للنقر وقابلة للمشاركة. في خطوة جريئة العام الماضي ، أعلنا عن تطوير برنامج تصميم رقمي خاص بهما للتنافس مع الشركات المفضلة في الصناعة مثل Sketch و Figma.

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

نظرًا لأن المزيد من المصممين بدأوا في التلاعب بالبرنامج ، فقد ظهرت المزيد والمزيد من البرامج التعليمية والأدلة لتوضيح أساسيات أداة تصميم واجهة التطبيق. أنشأت InVision أيضًا عددًا قليلاً من البرامج الخاصة بها لإلحاق المستخدمين بأساسيات InVision Studio.

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

أنشئ نموذجًا أوليًا تفاعليًا مع انتقالات متحركة رائعة في أي وقت من الأوقات على الإطلاق باتباع هذا البرنامج التعليمي InVision Studio!

جولة Nickel في مساحة عمل InVision Studio

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

ستجد أيضًا العديد من الأدوات نفسها ، على الرغم من تسمية بعض الوظائف بشكل مختلف. على سبيل المثال ، يُطلق على "رمز" رسم تخطيطي اسم مكون في الاستوديو.

لوحة التفاعلات

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

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

الرسوم المتحركة InVision Studio

هناك العديد من العناصر لتصميم تفاعل رائع ، ولكن الاستخدام الصحيح للانتقالات المتحركة والتفاعلات الدقيقة في واجهة المستخدم هو أكثر من مجرد تزيين النوافذ.

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

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

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

أشياء لتأخذها بالحسبان

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

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

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

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

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

البرنامج التعليمي!

هيا نبدأ! إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى InVision Studio لتنزيل إصدار وصول مبكر من تطبيق Studio. بمجرد أن يكون لديك InVision Studio على جهاز الكمبيوتر الخاص بك ، قم بتنزيل ملفات البرنامج التعليمي هنا. بمجرد تشغيل برنامج الاستوديو ، اختر فتح الملف من أي مكان قمت بحفظه فيه.

الخطوة 1: افتح الملف وألق نظرة

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

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

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

الخطوة 2: قم بتوصيل بلاط الفنان بسيرة الفنان الحيوية

انتقل إلى لوح الرسم الأول. توقف لحظة لتوسيع مجموعة الطبقات "Artist Tile 1." ستلاحظ ثلاث مجموعات متداخلة: مجموعة لاسم الفنان ، وواحدة للصورة المميزة ، وطبقة ثالثة تحتوي على "Bio Text".

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

حدد مجموعة الطبقات التي تحتوي على كل هذه العناصر: "Artist Tile 1." مع تحديد هذه المجموعة ، اضغط على "c" على لوحة المفاتيح (أو انقر على رمز صاعقة البرق في شريط الأدوات العلوي) لبدء أداة التفاعل. سيتبع مؤشرك زر اختيار سوط أزرق لاختيار شاشة الوجهة لتفاعلك.

حدد اللوحة الفنية على الفور إلى اليمين بعنوان "Artist Bio 1" وسيُطلب منك اختيار المشغل ونوع الانتقال. بالنسبة إلى المشغل ، اختر "النقر" ، ثم اختر "الحركة" على أنها انتقال. يمكنك بعد ذلك اختيار مدة الانتقال. دعنا نضبط هذا الانتقال على ثانيتين ونضغط على "حفظ".

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

الخطوة 3: قم بتوصيل زر الرجوع إلى الشاشة الرئيسية

الآن يجب أن نمنح المستخدمين طريقة للعودة إلى الشاشة الرئيسية. انتقل إلى لوحة الرسم "Artist Bio 1" وحدد المكون "btn_back" في الزاوية اليسرى العليا. أنشئ مشغلًا هنا بالضغط على "c" واختيار لوحة الرسم "الرئيسية".

مرة أخرى ، لنضبط المشغل على "النقر" والتفاعل على "الحركة" والمدة على ثانيتين. انقر فوق معاينة واستمتع بالانتقالات المفتوحة والإغلاق التي أنشأتها للتو. لاحظ كيف أن الرسوم المتحركة التي يتم تشغيلها عن طريق إغلاق اللوحة هي انعكاس للرسوم المتحركة التي يتم تشغيلها عند فتح اللوحة.

الخطوة 4: قم بتوصيل المعرض

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

نريد تطبيق انتقال حركة أكثر دقة لفتح معرض الصور الدائري. تحتوي اللوحة الفنية التي تحمل عنوان "Artist 1 - Image 1" على عناصر مكررة من لوحة الرسم "Artist Bio 1" ، والتي تم تغيير حجمها لإظهار المزيد من مثال الصورة.

ابدأ بالنقر فوق طبقة "الفنان الحيوي 1" لتحديد مجموعة "الصورة المميزة". سيكون هذا هو الدافع لفتح المعرض. أنشئ تفاعل "Tap" هنا للاتصال بلوحة الرسم الأولى في المعرض وحدد "Motion". هذه المرة ، اضبط المدة لتكون أسرع قليلاً: ثانية واحدة.

لإنشاء انتقال لطيف لإغلاق المعرض ، ما عليك سوى تحديد طبقة زر الإغلاق في لوحة الرسم "Artist 1 - Image 1" وربطها مرة أخرى بلوحة الرسم "Artist Bio 1" ، بنفس الإعدادات السابقة.

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

الخطوة 5: قم بتوصيل كل صور المعرض

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

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

حدد لوحة فنية "الفنان 1 - الصورة 1" وقم بإنشاء تفاعل يؤدي إلى اللوحة الفنية التالية ، "الفنان 1 - الصورة 2." هذه المرة ، اضبط المشغل على "التمرير السريع لليسار". بالنسبة للانتقال ، حدد "إعداد مسبق" واختر "دفع لليسار" من القائمة المنسدلة.

لإنشاء تفاعل عكسي ، حدد لوحة الرسم "Artist 1 - Image 2" وقم بتوصيلها بلوحة الرسم السابقة ، هذه المرة فقط باستخدام إيماءة "Swipe Right" وانتقال "Push Right".

كرر هذا النمط مع اللوحات الفنية القليلة التالية ، وربط ألواح الرسم للصورة 2 بالصورة 3 ، والصورة 3 بالصورة 4. سهل!

لجعل هذا أكثر واقعية ، دعنا نغلق الحلقة بين الصورة 1 والصورة 4. حدد اللوحة الفنية للصورة 4 وقم بتوصيلها بالصورة 1. اختر مشغّل "Swipe Left" وانتقال "Push Left" تمامًا كما تفعل مع الصورة التالية في سلسلة. قم بتوصيل لوحة الرسم للصورة 1 بالصورة 4 بالعكس والمعزوفة - لقد أنشأت معرضًا متكررًا!

أخيرًا ، حدد كل من مكونات "btn_close" في اللوحات الفنية لمعرض الصور واربطها مرة أخرى بلوحة الرسم الحيوي. يمكنك اختيار الانتقال الذي تفضله هنا ، لكنني اخترت "Push Right".

الآن لديك مسار تنقل جيد التسلسل للتباهي به. انقر فوق معاينة وجربها ؛ يجب أن يعمل النموذج الأولي الخاص بك مثل gif في بداية هذا البرنامج التعليمي. امنح نفسك ربتة مستحقة عن جدارة على ظهرك.

الخطوة 6: كرر

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

الخطوات التالية

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

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

يعد الاستوديو أداة ممتعة يمكنك تجربتها - وليس هناك سبب لعدم تجربة أداة مجانية لتصميم النماذج الأولية للتطبيق. على الرغم من أنه من غير المحتمل أن يحل محل برنامج go-to مثل Sketch في مجتمع التصميم اليوم ، إلا أنه يتمتع بإمكانيات كبيرة.

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

• اتقن عملية تصميم UX الخاصة بك - دليل لتصميم النموذج الأولي
• قوة Figma كأداة تصميم
• النماذج الأولية باستخدام البيانات الحقيقية - برنامج تعليمي للمبرمجين
• الدليل الأساسي لاستخدام الهاتف المحمول
• أفضل الممارسات والأخطاء في تصميم تطبيقات الأجهزة المحمولة