توضح المقالة طريقة تعمل على تبسيط إنشاء الرسومات. إنها مناسبة لجميع الأشخاص الذين تتمثل مهمتهم في تصميم واجهات للمستخدمين.
ما هي الرسومات ل؟
تهدف الرسومات إلى العرض التقديمي المرئي للعميل بعدد الشاشات وهيكل العناصر والنصوص وترتيبها ، دون الخوض في القرارات المرئية للمصمم.
بعد ذلك ، تعمل الرسومات على تبسيط عمل المصمم ، لأنها تتيح لك عدم تشتيت انتباهك عن المنطق والتركيز على تصميم واجهة المستقبل.
مشاكل تصميم الرسومات
يتم رسم الرسومات عادة بقلم أو قلم رصاص على الورق باستخدام المساطر. أقل في كثير من الأحيان رسم في أدوات خاصة ، على سبيل المثال -
Figma . لكن كلتا الطريقتين لها عيوبها.
مرسومة باليد
يتم رسم هذه الرسومات بسرعة. يدرك العميل أنه قد تم رسمها على الورق ، وهي نماذج أولية للواجهة المستقبلية ، وليس تصميمًا جاهزًا. من الأسهل التفاوض في المراحل المبكرة.
ولكن عندما يتعلق الأمر بمشروع كبير ، لا يقتصر هيكله على 4-5 صفحات ، ناهيك عن المحتوى ، يصبح الرسم أكثر صعوبة. هناك كتل متكررة وعناصر على الصفحات يجب رسمها بشكل فردي. هذا عمل شاق يستغرق الكثير من الوقت.
تعادل في figma
الرسومات المرسومة في الأداة قريبة بصريًا من التصميم النهائي. هذا يمكن أن يربك العميل ويجب أن يوضح له أن التصميم هو مرحلة منفصلة وستكون النتيجة مختلفة.
بالإضافة إلى ذلك ، يتم إغراء المصمم لطحن النتيجة. يبدأ في اتباع المسافة البادئة بين العناصر وحجم النص. في مرحلة الرسم ، هذا مضيعة للوقت ، لأن الهدف هو إظهار الهيكل.
قرار
أقترح حلاً قمت بتنفيذه في واحد من أحدث المشاريع. يعتمد على النوعين السابقين ويساعدك بشكل سريع ومرن في تصميم الرسومات المرسومة باليد.
وحدات الرسم
نحن نرسم على الورق بشكل منفصل كتل وعناصر واحدة في وقت واحد. على سبيل المثال: الزر ، كتلة المنتج ، شريط التمرير ، خط التقسيم ، التنقل. يجب أن تحصل على أوراق تحتوي على جميع الوحدات التي قد نحتاجها في الواجهة.
تحويل إلى صورة
جربت تطبيقات مختلفة لمسح المستندات ضوئيًا واستقرت في النهاية على "Adobe Scan" (
Google Play ،
متجر التطبيقات ). لا توجد وسيلة لتحميل النتيجة إلى JPG ، إلى PDF فقط ، ولكن هذه ليست مشكلة. إنه مجاني ، بواجهة جميلة وجيد في إخفاء شبكة الخلايا على الورق.
بعد مسح الأوراق وحفظها بتنسيق PDF ، يبقى علينا تنزيل الملفات على الكمبيوتر وتحويلها إلى JPG. يمكنني استخدام الخدمة عبر الإنترنت "
PDF.io " لهذا الغرض.
وحدة التقطيع والتجمع واجهة
نقوم بتحميل الصور النهائية في Figma ونقطع العناصر والكتل الضرورية في وحدات منفصلة باستخدام إطارات أو أقنعة.
يمكنك جعلها "مكونات" لتحريرها ديناميكيًا عندما يصبح عدد النسخ على الصفحات كبيرًا.
يبقى فقط لإنشاء اللوحات الفنية اللازمة ووضع الوحدات اللازمة فيها ، كما في المُنشئ.
إعداد النموذج الأولي
ميزة أخرى لهذا النهج هي القدرة على السماح للعميل بالتفاعل مع واجهة المستقبل. يمكنك تخصيص نقرات الأزرار وانتقالات الصفحات والنوافذ المنبثقة.
يؤدي
يمكن طباعة النتيجة ولن تختلف عن الرسومات الكلاسيكية المرسومة بالكامل على الورق. في هذه الحالة ، تقوم برسم جميع العناصر في نسخة واحدة مما يؤدي إلى تسريع عملية العمل بشكل كبير ، وهو أمر مهم في المراحل الأولى من العمل في المشروع.
أقود قناة في Telegram حول تصميم الواجهة -interfacer