في هذه المقالة ، سنخبرنا كيف طورنا مكتبة حقيقية من المكونات ، وليس كروية في الفراغ ، وكيف تمكنا من تجاهل الكمالية المفرطة (وليس على حساب المشروع)
لتوفير 25 ٪ من الميزانية .
هذا هو الجزء الأول من المقالة ، حيث سيكون هناك الكثير من المعلومات العملية المملّة والملموسة حول إنشاء مكونات في Figma ، بالإضافة إلى الفروق الدقيقة والمزالق والوقائع في إنشاء مشاريع بميزانية محدودة في بيئة إقليمية =)
سبقت بداية العمل فترة طويلة من المفاوضات والعمل التحليلي ، تم على أساسها كتابة الاختصاصات التفصيلية مع تقسيمها إلى كتل وظيفية (ديناميكية) وثابتة. يمكن العثور على تفاصيل حوله
في هذه المقالة . إذا كنت لا تعمل بالفعل على مثل هذه المعارف التقليدية ، فإننا نوصي بذلك بشدة. تجربة إيجابية للغاية لفريق التطوير بأكمله والمشروع ككل.
لكن عد إلى التصميم
من الجدير بالذكر أن Figma قدمت تحديثًا ممتعًا للغاية في ذروة العمل ، لذلك لن تكون هناك كلمة حول أنماط الألوان والنص. نأمل أن يتعلم القارئ اليقظ شيئًا مفيدًا لنفسه حتى بدون هذه الفروق الدقيقة. أيضًا ، إذا لم يكن لديك فهم أساسي لمبادئ تنظيم المكونات في الشكل ، فنحن نوصي بالبحث على habr.com (هناك الكثير من المواد الرائعة حول الموضوع).
قبل البدء في تصميم مثالي للبكسل ، في معظم الحالات ، نصنع مفهومًا للتصميم. عادة ما يكون نوعًا من التخطيط الخام (من الجانب البصري) ، والذي يجب التفكير فيه بدقة من حيث السلوك على الشاشات المختلفة مع مراعاة الوظائف الرئيسية. هذا ضروري لتجنب المفاجآت غير السارة في المستقبل عندما لا يتم تضمين كتلة منسية في التخطيطات المعتمدة. لذلك ، فإن المفهوم هو أكثر من تصميم مسودة للصفحات الحقيقية من لوحة الأنماط ، التي توفر ، مع ذلك ، مجموعة أساسية من الأنماط والتنسيقات الأساسية للصفحات المستقبلية.
في هذه الحالة كان المفهوم كما يلي:
بشكل عام ، لا شيء معقد. الشيء الوحيد الذي سيتطلب اهتمامًا خاصًا (في هذه الصفحة) هو معاينة الكثير (هذه البطاقات) ، والتي تتكون من مجموعة غير محدودة من المواضع (هذه السطور في البطاقات) ، ومجموعة مختلفة من الأزرار لأدوار مختلفة.
لا تزال هناك بعض الفروق الدقيقة غير المحسوبة ، لكننا اتفقنا على أن نكون صادقين ونستغني عن المواقف غير الضرورية ، لذلك سنخبرنا عن كيفية ظهورها في هذه العملية.
لذلك - كل شيء جاهز. لدينا المعارف التقليدية مع الوظائف المنصوص عليها لفهم تشغيل المكونات ؛ styleboard كمفهوم لفهم نمط العناصر ؛ المعيار لتسمية المكونات لنقل التصميم بدون ألم إلى التخطيط ، وعدد لا نهائي من المهدئات من جميع الأنواع والألوان ...
يمكنك البدء في التجول في الشكل
ستكون خوارزمية تطوير نظام التصميم حركة من مكونات (ذرات) بسيطة غير قابلة للتجزئة إلى مكونات أكثر تعقيدًا ، ومن أجل عرض مرئي للتسلسل الهرمي ، سنرسم كل مستوى تالي من التعقيد في عمود جديد.
نص
بادئ ذي بدء ، سنحدد عناصر غير قابلة للتجزئة: مجموعة قياسية من العناوين ، فقرة ، وأنماط فردية لنص الزر ، نمط للعناصر النائبة وأسماء عوامل التصفية وشيء آخر. لا تنس تحويل كل شيء إلى مكونات!
مونتسيرات متوسطة كالخط الرئيسي ومونتسيرات جريئة للعناوين والتمييزات.
انتقل إلى الرموز. سحبناهم من مكتبة "الريشة" المجانية
أيقونات
يتم وضع كل رمز في حاوية 24 × 24 بكسل ومحاذاة في المنتصف على طول محورين (فقط في حالة). يتم استدعاء جميع الرموز للتذوق ، ولكن مع إضافة البادئة "i" حتى لا تكون هناك نسخ مكررة في الأسماء ، وقم بتجميعها حتى لا تزدحم اللوحة بالطبقات.
سيكون لدينا أيضًا رموز شبكة اجتماعية ورسائل بريد إلكتروني إضافية لإشعارات الإدخالات غير المكتملة ، وإعادة تعيين الفلتر ، وعلامة النجمة للمواقع المطلوبة في الدفعة ، وشيفرون لعمليات المنسدلة وعلامة اختيار لمربعات الاختيار وعبارات الراديو. ستكون جميع هذه الرموز أصغر وأخف وزنًا من الرموز الرئيسية ، ولكن من أجل التقييس وضعناها أيضًا في حاوية 24 × 24.
بعد ذلك ، ننتقل إلى مكونات أكثر تعقيدًا. سنضعها على اليمين ، ونجمعها من عناصر من العمود الأول والعصي.
مربعات الاختيار
لنبدأ بشيء أبسط.
مربعات الاختيار وأزرار الراديو في حاويات 16 × 16 بكسل. لكل حالة ، قم بإنشاء مكون منفصل. يعد ذلك ضروريًا حتى يمكننا في تصميم الصفحات (المجمعة من هذه المكونات) استبدال حالة بأخرى من خلال لوحة INSTANCE.
نفعل الشيء نفسه مع جميع العناصر الديناميكية التي لها حالات توجيه ، نشطة ، سلبية ، إلخ.
عداد وشريط تمرير
نحتاج أيضًا إلى عداد لعرض كمية شيء ما. ستكون هذه بيانات مختلفة اعتمادًا على موقعها. نصنع إطار 20x20 وشكل في المنتصف.
إن أزرار الكائنات المنزلق مفيدة لنا أيضًا. نصنعها 30 × 30 ونضع أيقونات شيفرون بشكل مشروط في المركز. نقوم بإنشاء مكونات لدول مختلفة.
شجرة الكتالوج
في الآونة الأخيرة ، بدأنا بالالتزام بمبدأ إعادة استخدام نفس المكونات على أجهزة مختلفة حتى لا ننتج كيانات غير ضرورية والحفاظ على نقاء الشفرة (قدر الإمكان). لذلك ، نقوم بعمل شجرة الكتالوج ، بدءًا من شاشة الجوال. تخبرنا المعارف التقليدية أن الحد الأقصى لمستوى تداخل الشجرة هو 3.
نبدأ من المستوى الأول: إطار بارتفاع 60 بكسل وعرض بلا أبعاد (سوف يتكيف مع الحاوية) ، ويتم محاذاة الرمز عموديًا و 20 بكسل من الحافة اليسرى ، وسيكون اسم الفرع من مكون h4. يتم لصق كل هذا على الجانب الأيسر في لوحة CONSTRAINS. الصق عدد الحصص (h4 أيضًا) وشيفرون على الجانب الأيمن.
إعادة رسم المكون للفرع المفتوح. ننظم المستوى الثاني من الكتالوج بنفس الطريقة ، ولكن لأنه لن نعيد استخدام هذه الأنماط في أي مكان - ما عليك سوى استنساخ أسطر الفقرات بزيادات 20 بكسل. كما هو الحال في Photoshop - لا توجد مشاكل. وبالمثل بالنسبة للمستوى الثالث + عصا + تغيير لون الخط.
التالي هو سلسلة من التنازلات المستمرة
القائمة
لوحة علامات التبويب لجميع أنواع القوائم وعلامات التبويب التي وضعناها في حاوية بارتفاع 60 بكسل ، وتم وضع العناصر نفسها في المنتصف. بالنظر إلى المستقبل ، نقول أن هذا النهج غير صحيح ، لأنه إذا كنت ترغب في الحصول على تخطيط مطاطي بالكامل ، فيجب وضع كل علامة تبويب في إطار منفصل. خلاف ذلك ، لن يعمل على تعيين سلوك علامات التبويب بالنسبة لبعضها البعض. لكننا ، نتحدث مع المطورين ، بقلب هادئ سجلنا ذلك.
القوائم
تذكرت بمرور الوقت مثل هذه التفاهات مثل القوائم المرقمة وغير المرقمة. لإضافة رقم ، نعود إلى العمود الأول وننشئ مكونًا مكونًا من رقمين.
المدخلات والمرشحات
جاءت اللحظة عندما انتهكنا قواعد التسلسل الهرمي الخاصة بنا ووضعنا المكونات والمكونات التي تتكون من هذه المكونات (* _______ *) في عمود واحد (تذكر: كانت القاعدة هي وضعها على اليمين ، وإخراجها في عمود منفصل). كان من الممكن الاستغناء عن هذا ، لكننا قررنا أن الكتلة (الفلتر أو الإدخال) والقائمة المنسدلة الخاصة بها ستضم مكونًا واحدًا في حالات مختلفة. كما قال سالفور هاردين: "لا تدع الأخلاق تمنعك من فعل الشيء الصحيح".
لقد قدمنا هذا الحل الوسط للسبب التالي: تكوين المدخلات ، على سبيل المثال ، يجب أن تنتمي مربعات الاختيار إلى نفس مستوى الصعوبة (عمود واحد) ، ولكن القائمة المنسدلة في الإدخال يمكن أن تحتوي أيضًا على مربعات اختيار. أردنا حقًا أن تشكل القوائم المنسدلة وحدة واحدة مع إدخال - من أجل ظل جميل.
يمكنك القول أنه بعد ذلك كان عليك وضع الإدخال مع القوائم المنسدلة في عمود منفصل (العمود التالي) وستكون على حق. ولكن بالنسبة لنا في هذه العملية أصبح من الواضح ليس على الفور. ومنذ إطلاق الناقل ، اضطررنا ، مدفوعين بالميزانية والمواعيد النهائية ، إلى انتهاك هذا القانون غير المكتوب لبناء أنظمة التصميم الذري. دعني أخبرك من التجربة - لم يعاني أي مصمم أو مطور واحد من هذا.
سنعود إلى المستوى العملي.
المدخلات
داخل الإطار 60 بكسل ، نضع مكون الفقرة كعنصر نائب. عندما يكون الإدخال في التركيز ، سينتقل العنصر النائب لأعلى. نعطيها مسافة بادئة 20 بكسل ولصقها على الحافة اليسرى. على الحد السفلي للكتلة ، أضف خطًا يبلغ 2 بكسل (استخدم المستطيلات!) ، والصق عموديًا في الأسفل. أفقيًا ، يمكنك تحديد مقياس. علاوة على ذلك ، على الجانب الأيمن ، في المواقف المختلفة ، يمكننا إما أن يكون لدينا وحدة قياس أو شيفرون منسدل. أضف كل ذلك وآخر والصمغ إلى الحافة اليمنى. الآن كل شيء ممتد بدقة ، وجميع نسخ هذا المكون ترث سلوك الوالد.
نضيف مكونات لحالات مختلفة: المؤشر فوق إدخال المؤشر ، التركيز ، قائمة منسدلة مفتوحة ، صالحة وغير صالحة. إحدى طرق إنشاء الحالات بسرعة هي: استنساخ أحد المكونات ، أو الضغط على option + command + b ، أو "مثيل فرعي" - من خلال قائمة السياق. نقوم بتحرير ما نحتاج إليه ونحوله إلى مكون جديد. لا تنسى إعادة التسمية.
مع المرشحات ، يكون الوضع مشابهًا وباستثناء الحالة الافتراضية وإضافة علامة تقاطع لإعادة تعيين القيم ، فإنها لا تختلف عن المدخلات. نسيت - ستدخل المدخلات واحدًا تلو الآخر أفقيًا ، لذلك على الحافة اليمنى نضيف خطًا رماديًا 2 بكسل. لا تنس التمسك بها على الحافة اليمنى.
الأزرار
ستكون الأزرار في مشروعنا من نوعين.
أولاً: الأزرار المعتادة التي سيتم استخدامها في كل مكان باستثناء بطاقات المعاينة للعقد. تشريحهم هو هذا: إطار بارتفاع 30 بكسل مع خلفية شفافة ، مستطيل من حجم مشابه مع تقريب 15 بكسل (في لوحة CONSTRAINTS نقوم بتعيين قيمة المقياس في كلا المحورين) ومكون btn-txt الذي نقوم بمحاذاة جميع المحاور في المركز (لكل إطفائي ، نقرر فجأة هل تريد زيادة ارتفاع الزر؟) في مكون منفصل ، حدد نمط الزر عند التمرير وآخر منفصل للضغط.
يجب أن يتناسب النوع الثاني من الأزرار مع نمط بطاقات المعاينة وأن يكون به رموز. بالإضافة إلى وظيفة الدفع ، ستبلغ الأزرار أيضًا من خلال عداد مأخوذ من نفس العمود (العفو) ، على سبيل المثال ، عدد مرات الضغط على الزر.
نصنعها من مستطيلات عالية 60 بكسل ، وسيعتمد العرض على المحتوى. نقوم بتضمين وتثبيت مكونات الرمز و btn-txt على جميع المحاور. نفرض مكون العداد على الأيقونة بحيث يتزامن الزاوية السفلية اليسرى مع مركز الأيقونة. سيتم ترتيب الأزرار واحدة تلو الأخرى ، لذلك نضيف على كل جانب شريطًا رماديًا من 2 بكسل للفصل البصري. غير ضروري ثم قم بإيقاف تشغيله في مكانه. في هذه الحالة ، في مكون المعاينة للعقد.
سنعود إلى هذا المستوى من المكونات ، ولكن الآن ننتقل.
قبعة
انتقل إلى العمود الجديد وابدأ في جمع الرأس.
نأخذ الإطار الذي يبلغ ارتفاعه نفس الستين بكسل كأساس. في الجزء السفلي ، أضف خطًا رماديًا بمقدار 2 بكسل. خذ عرض 1440 بكسل لأنه سنجمع جميع قوالب سطح المكتب عند هذا الإذن. نحن نتبع بالفعل المخطط القياسي: المحاذاة مع مركز المسافة البادئة الرأسية والأفقية لـ 20 بكسل ، والشعار ، وعلامات تبويب القائمة ، والبحث (تم تجميعها عن طريق القياس مع الإدخال في العمود الثاني).
يجب أن يحتوي الجانب الأيمن من الرأس على لوحة معلومات تحتوي على معلومات الحساب الحالية ، وحتى مع قائمة منسدلة. نعود إلى العمود السابق ونجمع هذا الخير من الأيقونات والنص (أنت تعرف بالفعل كيف).
لإلقاء نظرة على قائمة منسدلة على أي قالب ، نرفق مكونين في وقت واحد (قائمة منسدلة مفتوحة ومغلقة). يتم إيقاف تشغيله عن طريق النقر في العين على لوحة الطبقة. لا تنس إلغاء تحديد Clip Content في لوحة BACKGROUND.
بعد ذلك ، نقوم بتبسيط رأس الشاشات الأصغر من خلال اقتصاص ما لا داعي له. نحن نعمل بطريقة مجربة. نقوم باستنساخ ، وفصل ، وحذف ما هو غير ضروري ، وإضافة رمز البرجر ، وإعادة تسميته ، وتحويله إلى مكون.
بالنسبة لـ 320 بكسل ، يمكننا تحريك المسافة البادئة بين الأيقونات قليلاً.
حان الوقت لضبط المطاط. للقيام بذلك ، حدد مكون "Header-desktop" الخاص بنا وانتقل إلى LAYOUT GRID. قم بالتبديل إلى مكبرات الصوت. لا يهم عدد الأعمدة في هذه الحالة ، الشيء الرئيسي هو أن الشبكة يجب أن تكون (للمهام المختلفة ، حاول شبكات مختلفة) هوامش 20 بكسل. بعد ذلك ، نقوم بتكوين سلوك المكونات المتداخلة في الرأس.
بمزيد من التفاصيل حول إعدادات مرونة القوالب ، سنخبرنا في الجزء الثاني من هذه المقالة.
برجر
في كل مرة عند تصميم الملاحة للبرغر ، بدأنا في اختراع العكازات ، ولكن ليس في هذه الحالة. اتضح أن لدينا كل ما نحتاجه للبرغر ، باستثناء زر الإغلاق. قمنا بتجميع المكونات الضرورية في مجموعة وتحويلها إلى مكون جديد.
معاينة الكثير
انتقل إلى بطاقات المعاينة للكتالوج. بادئ ذي بدء ، أصبح من الواضح أنك بحاجة إلى إنشاء مكونات منفصلة للأزرار في شاشة الهاتف المحمول (لا تسمح لك وسائل الشكل بتوسيط الرموز إذا قمت ببساطة بإخفاء نص الزر). نذهب إلى العمود بأزرار مربعة وننهي الحالات للشاشات الضيقة. إضافة شبكة من ثلاثة أعمدة.
بالنسبة إلى البطاقات نفسها ، نقوم أولاً بإنشاء مكون البند وكتل باستخدام المعلومات الأساسية. نقوم بتجميعها بحيث يمكن لعملية إعادة بناء بسيطة تحقيق عرض محمول.
عند هذه النقطة ، من أجل عدم تضخيم مقال ضخم بالفعل ، نتوقف قليلاً. في الجزء الثاني ، سنتحدث عن كيفية تجميع المكونات أعلاه معًا وتشكيل قوالب الصفحات المتجاوبة.
نحن واثقون من أن هذا النهج لا يزال غير مثالي ، لذلك سنكون سعداء بأي تعليقات حول الموضوع (خاصة إذا كنت تعرف كيفية استخدام الرقم بشكل أكثر إنتاجية) - أي من تجربتك ستساعدنا في تحسين عملياتنا التجارية. مستدير.