يسعى المصممون دائما إلى إنشاء واجهات مستخدم جذابة وسهلة الاستخدام. واحدة من الأدوات الهامة لتحقيق هذا الهدف هو فيغما ، شعبية تطبيق تصميم واجهة على الانترنت. في جوهرها ، فيغما هي أداة تخطيط قوية تسمح لك بإنشاء وتحرير الإطارات-العناصر الرئيسية لواجهة المستخدم.
ومع ذلك ، قد لا تكون الميزات القياسية لفيجما كافية لتنفيذ مفاهيم التصميم المعقدة. في مثل هذه الحالات ، يمكنك استخدام ملحق الإطار — أدوات ووظائف إضافية توسع بشكل كبير إمكانيات العمل مع فيجما.
يتيح لك توسيع الإطارات في فيجما تحسين تنظيم وهيكلة مشاريع التصميم وتحسين سير العمل وزيادة كفاءة المصمم. في هذه المقالة ، سنتحدث عن الإرشادات والنصائح الأكثر فائدة لاستخدام ملحقات الإطار في فيجما. بدءا من تقنيات بسيطة وتنتهي مع تقنيات أكثر تعقيدا ، وسوف تتعلم كيفية جعل مشاريع التصميم الخاص بك حتى أفضل وأكثر ملاءمة للعمل مع.
- معرفة ما هي الإطارات
- استخدم الإطارات لإنشاء انتقالات
- تحسين استخدام الإطارات
- إضافة محتوى ملزم داخل الإطار
معرفة ما هي الإطارات
تكون الإطارات مفيدة عندما تريد إنشاء تخطيط بشاشات متعددة أو إصدارات تصميم مختلفة. يمكنك إنشاء إطارات منفصلة لكل شاشة أو إصدار ، ثم التنقل بحرية بينهما لتقديم أفكارك بشكل أفضل وتصور تجربة المستخدم.
بالإضافة إلى ذلك ، تسمح لك الإطارات بإنشاء نماذج أولية تفاعلية وإضافة انتقالات بين الشاشات ومحاكاة سلوك المستخدم. هذا مفيد بشكل خاص عندما تريد تقديم التصميم الخاص بك إلى عميل أو مطورين وشرح كيفية التفاعل مع الواجهة.
في فيجما ، يمكنك إنشاء إطارات بأحجام مختلفة-من النماذج الأولية الصغيرة إلى تخطيطات ملء الشاشة. يمكنك أيضا تغيير حجم الإطارات أثناء العمل على تكييفها مع الأجهزة والشاشات المختلفة.
بالإضافة إلى إنشاء إطارات على قماش عادي ، تحتوي فيجما أيضا على "إطارات داخل إطارات". هذا يعني أنه يمكنك إنشاء إطارات متداخلة لتنظيم التسلسل الهرمي لعناصر التصميم الخاصة بك وهيكلتها في شكل أكثر قابلية للفهم وملاءمة.
بشكل عام ، تعد الإطارات أداة قوية في فيجما تساعدك على هيكلة مشاريع التصميم الخاصة بك وتخصيصها وتصورها. استخدم الإطارات لإنشاء نماذج أولية تفاعلية وتنظيم التصميم الخاص بك وعرض أفكارك باستخدام فيجما.
استخدم الإطارات لإنشاء انتقالات
في فيجما ، يمكن استخدام الإطارات ليس فقط لإنشاء شاشات فردية ، ولكن أيضا لإنشاء انتقالات بينها. يتيح لك ذلك إنشاء نماذج أولية بعناصر تفاعلية توضح للمستخدم كيفية عمل التصميم الخاص بك.
لإنشاء انتقالات ، ستحتاج إلى استخدام أداة التنقل النموذجية القوية ، والتي تتيح لك ربط إطارات مختلفة وإضافة انتقالات بينها.
ستساعدك الخطوات التالية في إنشاء انتقالات باستخدام الإطارات:
- حدد الإطار الذي تريد جعل الشاشة المصدر للانتقال.
- افتح لوحة النموذج الأولي على يمين شاشة فيجما.
- اسحب إطار المصدر إلى العنصر المطلوب الذي سيتم استخدامه لبدء الانتقال ، على سبيل المثال ، زر أو رمز.
- اضبط نوع الانتقال ، مثل الضغط على زر أو التمرير على الشاشة ، باستخدام قائمة التحديد في لوحة النموذج الأولي.
- حدد الإطار الهدف الذي سيتم تنفيذ الانتقال إليه.
- حدد معلمات انتقال إضافية ، مثل مدة الرسوم المتحركة أو نوع الانتقال.
- كرر هذه الخطوات لجميع التحولات اللازمة على النموذج الأولي الخاص بك.
- راجع النموذج الأولي للتأكد من أن جميع التحولات تعمل بشكل صحيح.
استخدام الإطارات لإنشاء انتقالات يزيد بشكل كبير من كفاءة العمل في فيجما. يمكنك بسرعة إنشاء نماذج أولية تساعدك على إظهار التصميم الخاص بك واختباره بمثال مباشر ، بالإضافة إلى الحصول على تعليقات من المشاركين الآخرين في المشروع.
تحسين استخدام الإطارات
توفر الإطارات في فيجما طريقة رائعة لتنظيم وإدارة عناصر التصميم في المشروع. ومع ذلك ، فإن الاستخدام غير المنضبط للإطارات يمكن أن يؤدي إلى الارتباك ويجعل من الصعب العمل مع المشروع. للحصول على أقصى استفادة من الإطارات وجعل عملك أكثر كفاءة ، تحتاج إلى تحسين استخدامك للإطارات.
الخطوة الأولى للتحسين هي الاسم الصحيح والمرئي للإطارات. إعطاء إطارات أسماء ذات مغزى والمنطقية التي هي سهلة الفهم والتعرف عليها. استخدم كلمات وعبارات وصفية لوصف محتويات الإطار.
الحد من عدد الإطارات المستخدمة في المشروع. استخدم الإطارات لتجميع العناصر ذات الصلة وتعديلها لاحقا. سيساعد وراثة النمط في توحيد التصميم وتقليل عدد الإطارات. لا تقم بإنشاء إطار منفصل لكل عنصر إذا كان لديهم نفس الأنماط. من الأفضل إنشاء إطار واحد وإعادة استخدامه لتجنب الازدواجية.
استخدم الإطارات المرتبطة لتبسيط العمل مع الفريق. إنشاء مكونات الإطار التي يمكن إعادة استخدامها في مشاريع أخرى أو في أماكن أخرى داخل المشروع الحالي. سيساعد ذلك في توفير الوقت وجعل عملية التطوير أكثر كفاءة وقابلية للتطوير.
لا تنس إعداد روابط الإطار. يمكن أن تجعل الارتباطات تصميمك متكيفا ويتكيف مع دقة الشاشة المختلفة. استخدم الروابط بحيث تتمدد الإطارات أو تتقلص تلقائيا عند تغيير الحجم.
وأخيرا ، تحقق من الإطارات وتنظيمها بانتظام. احذف الإطارات غير المستخدمة ، وادمج الإطارات ذات المحتوى المماثل ، وأنشئ مجلدات لتنظيم الإطارات في فئات أو أقسام. وهذا سوف يساعد على الحفاظ على النظام في المشروع الخاص بك والحفاظ عليه حتى الآن.
إضافة محتوى ملزم داخل الإطار
في فيجما ، يمكنك إضافة محتوى ملزم داخل الإطار لجعل التصميم الخاص بك أكثر تنظيما واتساقا. يسمح الربط للزملاء أو المطورين بفهم المحتوى الذي يجب وضعه داخل الإطار بسرعة وما هي أبعاده. فيما يلي بعض النصائح المفيدة لإضافة رابط:
1. استخدم الخطوط المساعدة
عند إنشاء إطار ، استخدم الخطوط المساعدة لتحديد الحدود الرأسية والأفقية التي يجب أن يرتبط بها المحتوى. سيساعدك هذا أنت وزملاؤك على التنقل في الصفحة بسهولة أكبر والحفاظ على نمط ثابت.
2. اضبط حجم الإطار
اضبط أحجام الإطارات الدقيقة بحيث يتكيف المحتوى معها. يمكنك تحديد الأبعاد بالبكسل أو النسب المئوية ، حسب احتياجاتك ومتطلبات المشروع.
3. استخدام كتل النص
لتمثيل النص داخل إطار ، استخدم كتل النص. أنها تسمح لك لتعيين حجم ونمط النص ، وكذلك بسهولة إضافة وتحرير النص دون تغيير حجم الإطار.
4. تطبيق الأنماط والرموز
إذا كان لديك عناصر مكررة داخل الإطار ، فقم بإنشاء أنماط ورموز. سيسهل ذلك تحديث هذه العناصر وتعديلها في جميع مثيلات الإطار في نفس الوقت.
5. الحفاظ على النسب
انتبه إلى نسب العناصر داخل الإطار. حاول الاحتفاظ بها حتى يبدو التصميم الخاص بك متناغما ومهنيا.
سيساعدك تطبيق هذه النصائح على إنشاء تصميمات أكثر تنظيما وقابلة للتحرير بسهولة في فيجما. استخدم ربط المحتوى لإعطاء جميع المشاركين في المشروع فكرة واضحة عن الشكل الذي يجب أن يبدو عليه المنتج النهائي.