النماذج الأولية للويب مع Framer
المبروز هي أداة قوية حقًا يمكن أن تصور أي شيء يمكن أن تفكر فيه ، ولكن إذا ألقيت نظرة على معرض Framer ، فستلاحظ شيئًا سريعًا:
من بين الأمثلة الـ 54 ، 48 منها هي تطبيقات ، 4 لـ Apple Watch ، 1 لـ iPad و 1 لـ Apple TV. هل يعني Framer حتى تصميم الويب / المكتبي "التقليدي"؟
إطلاقا.
في IBM Design تصنع معظم تصاميمي لتطبيقات الويب المكتبية للمؤسسات. معظم المصممين أعمل مع الاستخدام رسم (بما فيهم أنا). ثم يتم كتابة نماذج ملفات Sketch هذه باستخدام أداة مثل إنفجن أو إعادة صوغه ونمذجته في الكود. كمطور الأمامية في فريق التصميم لدي موقف فريد حيث يمكنني تصميم ونماذج الكودي.
بعد أن علمت أساسيات Framer ، قررت إضافته إلى سير العمل الخاص بي ، وحسّنت عملي في التصميم. الجزء الأكثر قوة هو القدرة على استيراد ملف Sketch ثابت إلى Framer وتحويله إلى نموذج أولي واقعي وتفاعلي في فترة زمنية قصيرة نسبيًا.
مع هذا ، لا يجب أن أقضي وقتاً قيماً في بداية عملية إعادة تصميم التصاميم في الكود. يمكنني الحصول على أفكار أمام أصحاب المصلحة والمستخدمين بشكل أسرع. يمكنني حفظ الترميز لوقت لاحق عندما يكون المشروع أكثر صلابة.
بعد استخدام تطبيق Framer لبضعة أشهر ، إليك بعض الأشياء التي تعلمتها:
تخطيط ونطاق النماذج الخاصة بك
قبل أن أبدأ مشروعًا ، أقرر بعض الأمور:
ما الذي أحاول تحقيقه؟
ما إذا كان النموذج الأولي لاختبار المستخدمين أو فهم فكرة ما ، ما هو الحد الأدنى من العمل اللازم للحصول على فكرتي عبر أو للحصول على فكرة من الاختبار؟ أنا لست مجرد كسول ؛) ، وهذا يساعد على تحديد التفاعلات اللازمة ، والرسوم المتحركة والشاشات التي نحتاجها.
كلما زاد الوقت الذي تقضيه في تصميمك كلما أصبحت أكثر تعلقاً. كلما زاد تعلقك ، كلما قلت احتمالية إجراء التغييرات اللازمة.
دعونا نستخدم النموذج الأولي أعلاه كمثال.
كنت أعمل على مشروع جديد وأردت استكشاف الشكل الذي سيبدو عليه التخطيط المستند إلى البطاقة مع الرسوم المتحركة "المختلطة" بين الولايات. رسمت الفكرة الأساسية التي أردت صنعها واستخدامها كنقطة بداية.
اذا أنت إلق نظرة في النموذج الأولي ، تكون البطاقة الأولى قابلة للنقر في كل خطوة. لا توجد طريقة للرجوع ، ولا توجد حالات تمرير ، ولا يكتمل المحتوى الموجود في الشاشة الأخيرة ، ولا يكاد يكون مثاليًا للبيكسل. لم يكن أي من هذه العناصر ضروريًا للحصول على فكرتي عبر ذلك ، لذا لم أقضي بعض الوقت بما في ذلك. يمكن لـ Framer فعل أي شيء تقريبًا ، ولكن هذا لا يعني أنه يجب عليك محاولة تنفيذ كل شيء في النموذج الأولي.
إنشاء تدفقات واجهة المستخدم باستخدام وحدة ViewController الرائعة في Andreas
يمكنك استخدام ال ViewController مكوّن إضافي للرسم لإنشاء تدفقات واجهة المستخدم في Sketch مباشرةً. بسرعة تحويل التصميمات الخاصة بك إلى نماذج قابلة للنقر دون الحاجة إلى كتابة التعليمات البرمجية.
هذا شيء عظيم لتقديم عملك لأصحاب المصلحة وهو في الحقيقة بسيط للغاية للقيام به. بدلاً من المشي خلال ملف Sketch مع عشرات اللوحات الفنية أو .pdf ، يمكنك تقديم نموذج أولي تفاعلي أو مشاركة عنوان URL لمشروع Framer المستضاف.
اعتمادًا على ما أحاول تحقيقه ، قد ينتهي بي الأمر بكتابة بعض الرموز لأشياء مثل تأثيرات التحويم والرسوم المتحركة وإدخالات النص للحصول على لمسة إضافية من الواقعية والتفاعلية. مرة أخرى ، كمصمم ، عليك أن تقرر ما هو ضروري للحصول على فكرتك عبر وتنفيذها بشكل مناسب.
الدفع أندرياس "إنشاء تدفقات واجهة المستخدم باستخدام مقالة Sketch و Framer لمعرفة المزيد عن المكون الإضافي.
Microinteractions
أعتقد أن هناك بعض الأسباب التي جعلت النماذج الأولية للجوّال تحظى بشعبية كبيرة مع برنامج Framer ، حيث يبدو أن أحدهما صغير جدًا على الهواتف الجوالة. لكن لا يجب أن تكون بهذه الطريقة! أعتقد أن المصممين للويب يمكن أن يكونوا أفضل في جعل عملنا لديهم المزيد من الحركة و Framer جيد بالفعل في هذا.
هذا مجرد مثال بسيط للتفاعل السريع الذي قمت به باستخدام ملف Sketch الذي قام بتصميمه بالفعل فريق العمل الخاص بي. استكشاف مثل هذه التفاعلات يستغرق بضع دقائق.
بالتأكيد ، لكن لم لا تكتفي بالشفرة؟
كمطور أمامي ، فإن الكثير من مشاريعي ستنتهي في النهاية بنموذج أولي مشفر. ثم استخدم هذا النموذج الأولي كأساس لكتابة رمز الواجهة الأمامية في المنتج ، والعمل على طول الجانب الهندسي. فلماذا لا مجرد رمز من البداية؟
كما ذكرت سابقا ، السرعة. يمكنني بسرعة وضع الأفكار التي قمت أنا أو مصمم آخر من قبل باستيرادها من Sketch إلى Framer. إنه أمر رائع بالنسبة للجزء المبكر من عملية التصميم حيث تقوم باستكشاف الأفكار وتنفيذ الملاحظات بسرعة. يمكنني التحرك بسرعة كبيرة في الشفرة ، لكن Framer ينتقل إلى المستوى التالي.
سبب آخر هو الحرية. والحقيقة البسيطة التي تقول بأن كل كوداتي المكتوبة في Framer سيتم التخلص منها هي في الواقع نوع رائع. يسمح لي بتجربة أشياء لن أكون لولاها وإلا سأكون أكثر شفافية مع رمزي. يمكنني قضاء 15 دقيقة في استكشاف فكرة ثم التخلص منها دون أي ندم.
بعض النصائح والحيل
من المحتمل أن تضطر أنت (أو المصمم الذي تعمل معه) إلى إعداد ملفات Sketch بطريقة مختلفة قليلاً.
- تجميع طبقاتك. يتم تجاهل الطبقات غير الموجودة في مجموعة
- تجنب استخدام المسافات في أسماء مجموعتك
- لا يزال يتم استيراد الطبقات المخفية في Sketch ، ولكن سيتم تعيين ظهورها على "false".
- أنشئ أسماء بسيطة وفريدة للألواح الفنية الخاصة بك
- ستستبعد علامة الطرح (-) في نهاية اللوحة الفنية من استيرادها إلى Framer
تسوية أي طبقات في Sketch ستبقى ثابتة. سيؤدي ذلك إلى تحسين وقت تحميل مشروعك ، وهو أمر رائع بشكل خاص عند إنشاء نموذج أولي أكبر. يمكنك القيام بذلك عن طريق إضافة علامة النجمة (*) إلى نهاية الطبقة في Sketch.
من المفيد قضاء بعض الوقت مع المصممين في فريقك لتتعرفوا على كيفية إعداد ملفات Sketch لتتناسب مع سير العمل وما هو الأفضل بالنسبة للفريق.
عند استيراد ملف Sketch إلى Framer ، سترى شيئًا مثل هذا:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")استبدل الرسم بـ $ ، ويمكنك الآن استخدام $ للإشارة إلى طبقات Sketch الخاصة بك ، مما يوفر على نفسك من كتابة كلمة رسم مئات المرات:
$ = Framer.Importer.load("imported/design@1x")استخدم مقتطف "المؤشر العادي" لمؤشر الماوس العادي:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. أقوم باستيراد تصاميمي على @ 2x ثم قم بتقليص حجمها ، لذلك فهي ناعمة للغاية. لاحظ أن هذا لا يبدو أنه يتوافق مع وحدة ViewController المذكورة أعلاه.
Framer.Device.contentScale = .5يستخدم Sketch و Framer لوحات / أجهزة افتراضية مختلفة للويب. يستخدم Sketch 1440 × 1024 بينما يستخدم Framer 1440 × 900. أنا اختار 1440 × 900. لا تعتقد أنك مقيد إلى 900 بكسل للارتفاع ، على الرغم من ذلك ، يمكنك بسهولة إنشاء صفحات قابلة للتمرير في Framer.
[- هذه المقالة كانت في الأصل نشر في المتوسط ، إعادة نشرها مع إذن المؤلف -]