كيفية إنشاء إطار النهاية الأمامية مع رسم

إطار النهاية الأمامية

بعض الجوانب التي يجب مراعاتها:

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

لا تتردد في تنزيل ملف الرسم
https://dribbble.com/shots/2882661-Styleguide

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

يجب اعتماد دليل أسلوب جيد من قبل جميع أعضاء الفريق ، مثل المطورين ومالكي المنتجات ومديري المشاريع وحتى العميل ، مما سيؤدي إلى توليد اتصال أفضل وتعاون أكبر بينهما. إلى دليل الأنماط "المتطور" هذا ، نسميه Front End Framework (FEF).

قبل البدء في عملية إنشاء FEF ، من المهم أن تضع بعض الجوانب في الاعتبار:

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

لنبدأ في تطبيق FEF

الخطوة 1 ، تحديد IA:

الخطوة الأولى هي تحديد المحتوى (استنادًا إلى مشروعنا الذي نقسمه على النحو التالي):

  1. التصميم: لوحة الألوان ، عائلة الخطوط ، الطباعة ، الأيقونات.
  2. تخطيطات وأنماط الصفحة: التراكيب المختلفة ، والشبكات والتنقل الرئيسي.
  3. عناصر التنقل: الروابط وعلامات التبويب والصفحات.
  4. windows مشروط: popovers ، تلميحات الأدوات ، المنسدلة ، مربعات حوار الرسالة.
  5. إدخال النص: النماذج.
  6. المكونات

الخطوة 2 ، إنشاء محتوى FEF:

التصميم - أول شيء هو إنشاء لوحة ألوان أساسية وثانوية وألوان تكميلية ، مع تحديد # HEX وأين يجب تطبيقها.

لوحة الألوان

ثم قم بإنشاء الأنماط في الرسم لتتمكن من تحسين سير العمل في التصاميم المستقبلية.

إنشاء نمط مشترك جديد

كلما كان تصنيف المكونات في FEF أفضل ، كلما كان جدول التصميم أكثر تنظيماً.

أنماط تم إنشاؤها

وبهذه الطريقة ، إذا أردنا تغيير لون مكون بسرعة ، يمكننا القيام بذلك من نافذة الأنماط ونتأكد من عدم إضافة أي لون آخر.

اختيار لون الخلفية المحددة مسبقا.

نكرر نفس العملية لأنماط الطباعة:

طباعة
  1. نحن بالتفصيل الخطوط التي سيتم استخدامها في التصاميم الأولية والثانوية.
  2. نخلق أنماط في رسم وكذلك الألوان
أنماط تم إنشاؤها

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

أيقونات الأسرة

نصيحة: قم بإنشاء نفس الرمز في حالات مختلفة وقم بتسميته بالطريقة التالية ComponentName / state / sub-state ، سنكون قادرين على الوصول إلى جميع الولايات من القائمة الرئيسية بسهولة دون الحاجة إلى تعديل الرمز الأصلي.

يمكن تطبيق نفس العملية على المكونات التي تحتوي على مزيد من الحالات ، مثل مربعات الاختيار. في هذه الحالة ، تكون التسمية:

  1. مربع / عادي
  2. مربع / تحوم
  3. مربع / التركيز / ناقص
  4. مربع / التركيز / الاختيار
  5. مربع / الضغط
  6. مربع / تعطيل / الاختيار
  7. مربع / تعطيل

سيتم عرض ما يلي داخل القائمة المنسدلة "إدراج" في الشريط العلوي:

إدراج المنسدلة

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

تغيير الأنماط

الخطوة 3 ، إنشاء مكونات:

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

فيما يلي بعض المكونات التي أحب أن أعرضها كمثال:

تلميحات

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

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

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

مثال CORE-POPOVER

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

معاينة Zeplin.

الخطوة 4 ، السلوكيات:

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

مثال شبكة بيانات مستجيبةمثال متعدد الأعمدة المستجيبة

كيفية تحقيق هذا السلوك استجابة في الإصدار 39 من المخطط ، تمت إضافة نافذة جديدة مع 4 خيارات تتيح تحقيق ذلك.

الخيارات هي:

Stretch (افتراضي) - سيتم تعويم الطبقة وتغيير حجمها عند تغيير حجم المجموعة (يجب تطبيق هذا الخيار على خطوط التقسيم والمستطيلات في كل صف).

Pin to corner - يربط الطبقة الجديدة تلقائيًا إلى أقرب زاوية. لا يتم تغيير حجمه عندما يتم تغيير حجم المجموعة. (يجب أن يكون للأيقونات الموجودة في أعلى اليمين وخانات الاختيار هذا الخيار.)

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

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

لمزيد من المعلومات حول كيفية إنشاء هذه الجداول ، أوصي بالمقال التالي: https://medium.com/sketch-app-sources/https-medium-com-megaroeny-resizing-tables-withsketch-3-9-2e02e6382d3d#. fsx0udd9v

الخطوة 5 ، المراجع

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

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

المكونات

مستقبل مشترك

إن العمل جنبًا إلى جنب بين جميع أعضاء الفريق في مشروع معقد يعتمد على دليل للأسلوب يمكن أن يحسن جودة العمل ، ويمكن للتعاون أن يتجنب أسئلة مثل "ماذا سيكون سلوك المكون" x "في دقة أصغر؟

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

لا تتردد في تنزيل ملف الرسم
https://dribbble.com/shots/2882661-Styleguide

يمكنك العثور على المزيد مني على https://dribbble.com/sebamantel