InVision Studio: نظرة عامة ومراجعة

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

InVision Studio هو جزء من مجموعة أدوات InVision ، والتي تتضمن أيضًا InVision Cloud ، حيث يمكنك الاتصال وتخزين ومشاركة سير عمل تصميم المنتج الكامل الخاص بك ، و InVision DSM ، وهو مدير ومكتبة لنظام التصميم حيث يمكنك تخزين والتحكم في كل ما لديك العلامة التجارية ومكونات تجربة المستخدم. يمكن استخدام InVision Studio على نظامي Mac و Windows. يمكنك استيراد ملفات Sketch أيضًا.

ميزات InVision Studio

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

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

لنستعرض بعض ميزات InVision الجديرة بالملاحظة.

قم بتغيير حجم الصور واقتصاصها بدون أقنعة.

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

المصدر: LearnInVisionStudio.com

إصلاح العناصر أثناء التمرير.

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

اربط عدة لوحات فنية في رسم متحرك واحد.

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

إنشاء مشغلات انتقاد للرسوم المتحركة المنظر.

يمكن لمشغلات التمرير إنشاء تأثيرات اختلاف المنظر وأنواع الرسوم المتحركة الأخرى التي تحدث أثناء التمرير.

قم بإنشاء نماذج أولية سريعة الاستجابة دون كتابة تعليمات برمجية.

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

المصدر: LearnInVisionStudio.com

عكس النماذج على هاتفك.

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

استخدم اختصارات تشبه Sketch.

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

التبديل بين المظاهر الفاتحة والداكنة.

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

تعاون مع الفريق في الوقت الفعلي.

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

التصميم باستخدام InVision Studio على متصفح

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

تصميم مجلس

يوجد مركز القيادة الخاص بك في أعلى يمين الشاشة. الرموز الخمسة تعني:

• تحرير الرأس
• تعيين نوع التخطيط
• إعدادات
• تعليقات
• يشارك

تحرير الرأس

لقد لعبت حول الرأس قليلاً. بعد النقر على "تعديل الرأس" ، ظهرت هذه الخيارات:

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

تعيين نوع التخطيط

ثم غيّرت نوع التنسيق إلى "دقيق". هذا لكتل ​​المحتوى أسفل الرأس ، والتي ستظهر أثناء التمرير لأسفل.

تحرير أقسام إضافية

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

بالنقر فوق علامة الجمع على يمين السهم و "X" ، ستحصل على قائمة جديدة. من اليسار إلى اليمين ، تشير الرموز إلى:

• أضف Color Swatch
• أضف ملاحظة
• رفع ملف

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

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

إنشاء نموذج أولي

لقد لعبت مع النموذج التجريبي ، أيضًا ، فقط لأظهر لك ما هي الخيارات.

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

• وضعية المعاينة
• بناء الوضع
• وضع التعليق
• وضع الفحص
• وضع التاريخ
• حصة الاجتماعي
• شاشات التحميل
• إعدادات
• حالة الشاشة

الوضع الحر

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

تسعير InVision Studio

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

افكار اخيرة

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

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

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

عند التصميم القاعدة الذهبية هي استخدام النسبة الذهبية. تحقق من دليلي النهائي لاستخدام وفهم النسبة الذهبية.

صورة مميزة عبر Visual Generation / shutterstock.com