كيفية صنع وصيانة أنظمة التصميم الذري باستخدام معمل النمط 2

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

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

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

مزيد من القراءة على SmashingMag:

• نقل مكتبات الأنماط إلى المستوى التالي
• أنماط التصميم الذكية المستجيبة
• نظرة عامة متعمقة على أدوات دليل أسلوب المعيشة
• تعرف على أنماط تصميم الواجهة الأمامية الشاملة
  

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

تتضمن بعض الميزات البارزة في الإصدار الجديد ما يلي:

• نواة معاد هيكلتها بالكامل تدعم المزيد من اللغات ومحركات القوالب وتنسيقات البيانات
• دعم Markdown لتوثيق النمط
• إضافة دعم YAML وكذلك JSON لإدارة البيانات الديناميكية
• الإضافات لتوسيع وتحسين وظائف Pattern Lab
• واجهة مستخدم قابلة للتخصيص ، قابلة للتمديد ، معاد تصميمها

ولكن أكثر من أي شيء آخر ، فقد تم تصميم وبناء Pattern Lab 2 حتى يتمكن فريقك من استخدامه بشكل فعال خلال كل مرحلة من مراحل عملية نظام التصميم ، من البداية وحتى الصيانة طويلة المدى.

معمل الأنماط عند بدء المشروع

تم تكليف فريقك بعمل تطبيق جديد ونظام تصميم أساسي. ذات مرة ، ربما يكون مصممو تجربة المستخدم التابعين لفريقك قد تختبأوا في غرفة لتحديد المنتج عن طريق إطارات سلكية متجانسة ومزودة بتعليقات شديدة. بمجرد الموافقة عليها ، سيتم تمريرها إلى المصممين المرئيين الذين سيقومون بعد ذلك بتطبيق الألوان والطباعة والملمس لإضفاء الحيوية على الإطارات السلكية. بعد الموافقة على homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd أخيرًا ، يتم إرسال التصميمات إلى مطوري الواجهة الأمامية ، الذين سرعان ما انخرطوا في البكاء لأن التصميمات تحتوي على عدد كبير من التنسيقات غير الواقعية ، ومحتوى مستخدم غير محتمل (كل اسم مستخدم يتكون من 4 أحرف فقط - كم هو ملائم!) ، ومجموعة من أشكال الخطوط وأنماط التصميم غير المتوافقة.

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

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

يبدو رائعا ، أليس كذلك؟ دعنا نتعرف على كيفية تدوير Pattern Lab في اليوم الأول من مشروعك.

يأتي Pattern Lab 2 بنكهات PHP و Node. فرق ، اختر مغامرتك! تنتج بعض المشاريع خيارًا واضحًا للتكنولوجيا. ينزل آخرون إلى مجموعة مهارات الفريق أو الأسبقية البيئية. بغض النظر عن النظام الأساسي ، فإن Pattern Lab 2 مستعد لمساعدتك أنت وفريقك على التعاون في بناء نظام التطبيق والتصميم الجديد. مهما كان اختيارك للنظام الأساسي ، فاعلم أنه مع أي من الإصدارين ، ستؤدي Pattern Lab إلى نتائج متطابقة تقريبًا - تمامًا مثل السيارات من مختلف الماركات والموديلات التي تجلبك إلى نفس الوجهة.

تركيب معمل الأنماط

بمجرد تثبيت المتطلبات الأساسية المناسبة ، ستكون جاهزًا لتثبيت Pattern Lab. دعنا نلقي نظرة على كيفية تثبيت Pattern Lab Node ، لكن ضع في اعتبارك أن تعليمات PHP متوفرة أيضًا ومتشابهة.

من نافذة الجهاز ، انتقل إلى الدليل الذي ترغب في تثبيت Pattern Lab فيه. ثم اكتب الأوامر التالية:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. بمجرد اكتماله ، gulp patternlab:serve

سيؤدي تشغيل npm install إلى سحب أحدث التبعيات ، وسيقوم gulp patternlab gulp patternlab:serve بإنشاء مختبر نمط مضيف ذاتيًا ، مما يفتح الواجهة الأمامية في متصفحك الافتراضي. وإذا كنت لا ترغب في استنساخ مستودع git مباشرةً ، فيمكنك بدلاً من ذلك تنزيل أحدث إصدار ثم تنفيذ الخطوتين 2 و 3.

مع تشغيل Pattern Lab وتشغيله ، أصبح لدى فريقك الآن مركزًا لتصميم وتطوير ومراجعة نظام التصميم الذي سيتم إنشاؤه قريبًا.

نظام ملفات Pattern Lab

يقوم Pattern Lab بتجميع كل شيء موجود في مجلد المشروع /source الخاص بك إلى ملفات HTML ثابتة تعيش في المجلد /public . يمكن بعد ذلك عرض هذا الإخراج أو استهلاكه بشكل فردي أو داخل الواجهة الأمامية لدليل النمط. دعنا نلقي نظرة على نظام ملفات Pattern Lab وما يوجد داخل source/ :

• _ التعليقات _annotations/ - حيث يمكن لفريقك تحديد التعليقات التوضيحية الحية لتعزيز وثائق واجهة المستخدم الخاصة بك
• _data/ - حيث توجد البيانات العامة المستخدمة لعرض أنماطك.
• _meta/ - حيث توجد معلومات <head> والقدم (التي تنهي جميع أنماطك).
• _patterns/ - حيث توجد الأنماط ووثائق الأنماط والبيانات الخاصة بالنمط.
• css - حيث يمكن أن توجد أوراق الأنماط الخاصة بك
• الصور - حيث يمكن أن توجد صورك
• js - حيث يمكن أن توجد جافا سكريبت

يجدر التأكيد على أن Pattern Lab لا يفرض عليك أي اتفاقيات للواجهة الأمامية أو تبعيات إنتاجية. إن الطريقة التي تقرر بها تنظيم مجلداتك والتقنيات التي تختارها أمر متروك لك تمامًا. إذا كنت تريد الاتصال بالمجلد /stylesheets بدلاً من /css عنها! هل تريد استخدام Sass؟ لطيف - جيد! أحب مسج؟ رائعة! اكرهها؟ هذا جيد أيضًا! يوجد Pattern Lab ببساطة لربط الأنماط الخاصة بك معًا ويبتعد عن أي قرارات للواجهة الأمامية تتخذها. يمكنك أيضًا تكوين كيفية إدارة الأصول الخاصة بك أثناء انتقالها من source/ إلى public/ .

اختر مغامرتك الخاصة: اصطلاحات التسمية والتكوين

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

تعد اصطلاحات تسمية Pattern Lab ، مثل معظم جوانب البرنامج ، قابلة للتكوين تمامًا. بينما يتم تعيين patterns/ مجلدات Pattern Lab افتراضيًا على "الذرات" و "الجزيئات" و "الكائنات الحية" و "القوالب" و "الصفحات" ، فأنت حر في التعديل أو الإزالة أو الإضافة إلى رغبة قلبك. على سبيل المثال ، إذا أردنا إعادة إنشاء تصنيف نظام تصميم Predix الخاص بشركة GE - والذي يتكون من المبادئ والأساسيات والمكونات والقوالب والميزات والتطبيقات - فسنهيكل دليل Pattern Lab's /source/_patterns/ ليكون على النحو التالي:

 /00-Principles/ /01-Basics/ /02-Components/ /03-Templates/ /04-Features/ /05-Applications/

تم تصميم Pattern Lab ليتوافق مع سير عملك ، وليس العكس.

إنشاء اتجاه التصميم

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

تعريف Lo-fidelity IA في Pattern Lab

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

لذا فإن كود قالب الصفحة الرئيسية ، الموجود في /source/_patterns/templates/homepage.mustache يبدو كما يلي:

 {{> organisms-header }} <div class="fpo">Mission Statement</div> <div class="fpo">Campaign</div> <div class="fpo">Get Help</div> <div class="fpo">Give Help</div> <div class="fpo">Learn</div> {{> organisms-footer }}

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

التقاط قرارات التصميم المرئي

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

مع اتخاذ القرارات بشأن لوحات الألوان وإقران الخطوط ، يمكن لـ Pattern Lab التقاط نتائج قرارات التصميم هذه ، مما يضمن أن فريق التصميم والتطوير لا ينتج عن غير قصد 50 درجة من اللون الرمادي.

أن تصبح طاهياً للواجهة الأمامية في Pattern Lab

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

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

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

يتضمن هذا النمط أنماطًا أخرى ، وهي طريقة فعالة لاستهلاك عناصر واجهة أصغر في هياكل أكبر من أي وقت مضى. إليك ترميز block-hero.mustache :

 <a href="{{ url }}" class="c-block-hero"> {{> atoms-hero-img }} <h2 class="c-block-hero__headline">{{ headline.medium }}</h2> </a><!-- end c-block--hero-->

رمز القوس المزدوج المتعرج ( {{}} ) هو رمز قوالب موستاش ، والذي يسمح لنا بتعريف المحتوى الديناميكي وتضمين الأنماط داخل بعضها البعض. على سبيل المثال ، تخبر الشفرة {{> atoms-hero-img }} Pattern Lab أن يبحث عن ذرة تسمى “hero-img” وتضمينها في النمط. يمكن بعد ذلك تضمين الوحدة البطل نفسها في أنماط أكثر تعقيدًا باستخدام نفس اصطلاح التضمين باستخدام ما يلي: {{> molecules-hero }} .

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

نشمر عن سواعدنا

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

التصميم باستخدام البيانات الديناميكية

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

تتمثل إحدى أقوى ميزات Pattern Lab في القدرة على تبديل محتوى تمثيلي مختلف إلى أنماط واجهة المستخدم الخاصة بك لضمان قدرتها على التعامل مع الطبيعة الديناميكية للمحتوى الخاص بك. ماذا لو لم يقم المستخدم بتحميل صورة للملف الشخصي؟ ماذا لو كان لدى المستخدم 13 عنصرًا في سلة التسوق مقابل عنصرين؟ ماذا لو كان أحد هذه المنتجات يحتوي على 14 نوعًا مختلفًا محتملًا؟ ماذا لو كان عنوان منشور المدونة يحتوي على 400 حرف؟ مستخدم عائد؟ مستخدم جديد؟ ماذا لو المقال ليس لديه تعليقات؟ أو ماذا عن عندما تحتوي على سبع طبقات من التعليقات المتداخلة؟ ماذا لو احتجنا إلى عرض رسالة عاجلة على لوحة التحكم عند اختراق حسابهم؟ يتيح لك Pattern Lab معالجة البيانات للتعبير عن أي عدد من حالات واجهة المستخدم المتنوعة والمتغيرات الخاصة بأي قالب.

بيانات خاصة بالصفحة

يتم تخزين البيانات الأولية في Pattern Lab في ملف يسمى /source/_data/data.json ، والذي يحتوي على البيانات التي ستستهلكها الأنماط في البداية ليتم عرضها في طرق عرض دليل النمط والقالب. قد يبدو data.json الافتراضي الخاص بك بالشكل التالي:

 { "headline" : { "short" : "Lorem ipsum dolor sit (37 characters)", "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)" }, "url": "#", "imgHero" : { "src": "../../images/fpo_hero-opt.png", "alt": "Hero Image" }, "imgLandscape" : { "src": "../../images/fpo_16x9-opt.png", "alt": "Landscape Image" }, "mediaList": [] }

يمكنك الإشارة إلى هذه الأجزاء من البيانات في أنماطك (على سبيل المثال ، بما في ذلك {{ headline.short }} في نمط) لتحقيق نتائج مثل هذه:

على مستوى الصفحة ، نريد استبدال تلك الصور الرمادية ونص العنصر النائب lorem ipsum بمحتوى حقيقي. لتحقيق ذلك ، سننشئ ملفًا جديدًا بجوار /source/_patterns/pages/homepage.mustache يسمى homepage.json ، حيث يمكننا تجاوز البيانات الأولية المحددة في `` data.json. قد يبدو هذا شيئًا كالتالي:

 "imgHero" : { "src": "../../images/sample/hero-forest.jpg", "alt": "Forest" }, "headline" : { "medium" : "Track your hikes. Challenge your friends. Get out there and start exploring." }, "toutList" : [ { "url": "link.pages-blog-detail", "headline": { "short" : "Best winter hikes around the world" }, "imgLandscape" : { "src": "../../images/sample/tout-winter-hiker.jpg", "alt": "Hiker with back pack walking in snow" } }, { "url": "link.pages-login", "headline": { "short" : "Sign in to view your dashboard" }, "imgLandscape" : { "src": "../../images/sample/tout-leaves.jpg", "alt": "Green Leaves" } }, { "url" : "link.pages-about", "headline": { "short" : "Learn about our mission" }, "imgLandscape" : { "src": "../../images/sample/tout-mountains.jpg", "alt": "Mountain" } } ]

ينتج عن هذا واجهة مستخدم تبدو كالتالي:

الأنماط الزائفة

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

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

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

في /source/_patterns/pages/dashboard.json ، ستبدو بياناتنا كما يلي:

 { "blockFeature":{ "number":"4,500", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"100", "label":"Progress: 100%" } }, "tileList":[ { "number":"16", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"20", "label":"Progress: 20%" } }, { "number":"500", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"40", "label":"Progress: 40%" } }, { "number":"62,500", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"60", "label":"Progress: 60%" } }, { "number":"94,300,843", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"80", "label":"Progress: 80%" } } ], ... }

باستخدام هذه البيانات ، يكون Pattern Lab قادرًا على ملء واجهة المستخدم بثروة من المحتوى الذي تم إنشاؤه لهذا المستخدم.

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

في دليلنا /source/_patterns/pages/ ، يمكننا إنشاء نمط زائف جديد يسمى dashboard~new-user.json . سيؤدي هذا إلى إنشاء مثيل آخر للصفحة يرث جميع البيانات من dashboard.json ، ولكنه يسمح لنا أيضًا بتعديل البيانات أو توسيعها. في حالة dashboard~new-user.json ، يمكننا تجاوز أجزاء من البيانات لإظهار الشكل الذي قد تبدو عليه تجربة المستخدم الجديدة:

وإليك البيانات التي نضيفها إلى الملف لإنجاز واجهة المستخدم هذه:

 { "blockFeature":{ "styleModifier":"featured", "number":"0", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Let's go on a hike and climb in elevation", "overlayAction":"Find a Hike" } }, "tileList":[ { "number":"0", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"What National Parks have you visited?", "overlayAction":"Find a National Park" } }, { "number":"0", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Been on a hike recently?", "overlayAction":"Log Your First Hike" } }, { "number":"0", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Trying to stay healthy?", "overlayAction":"Track Calorie Count" } }, { "number":"0", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Counting steps?", "overlayAction":"Connect Your Fitbit" } } ] }

من خلال تجاوز بعض القيم في dashboard.json ، يمكننا تعديل المحتوى وتشغيل / إيقاف أنماط معينة.

في حالة أخرى ، قد نحتاج إلى توضيح شكل واجهة المستخدم عندما تكون هناك مشكلة أمنية أو مشكلة أخرى في حساب المستخدم. يمكننا إنشاء dashboard~hacked.json pseudo-pattern لإنشاء واجهة المستخدم التالية:

ستبقى معظم البيانات من dashboard.json كما هي ، لكننا سنضيف ما يلي لإنشاء رسالة الخطأ:

 { "alert" : { "alertClass" : "error", "alertText" : "On May 22nd, hackers from a hidden underground tunnel somewhere in Siberia hacked our servers and compromised all of our sensitive data. <a href='#'> Please reset your password immediately!</a>" } }

معلمات النمط

هناك أوقات عند استخدام Pattern Lab التي تتطلب أنماطًا زائفة كاملة ، كما هو موضح أعلاه. لكن في بعض الأحيان قد تحتاج إلى تعديل أو تجاوز قيمة بيانات واحدة فقط داخل نمط ، وترك الباقي ليتم التعامل معه بواسطة أنماط العرض الديناميكية الأخرى. بالنسبة لهذه الحالات ، تعد معلمات النمط هي الأداة التي تختارها. معلمات النمط هي آلية بسيطة لاستبدال المتغيرات في نمط مضمن. وهي تقتصر على استبدال المتغيرات في النموذج المضمن والنمط المضمن فقط . ضع في اعتبارك هذا المقتطف من نموذج التفاصيل:

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

والذي يتضمن نمط قائمة وسائط القسم.

 <section class="c-section"> {{# sectionTitle}} <h2 class="c-section__title">{{ sectionTitle }}</h2> {{/ sectionTitle }} {{> organisms-media-list }} {{# textButton }} {{> atoms-text-button }} {{/ textButton }} {{# overlay }} {{> molecules-overlay }} {{/ overlay}} </section><!--end section-->

كما تعلمنا ، {{sectionTitle}} لكلٍ من أحدث المشاركات وكتلات بيانات الأشخاص المميزين من أي مكان .json مرافق ، مع /source/_data/data.json باعتباره الإجراء الاحتياطي العام. ومع ذلك ، فإننا نقوم بتضمين نمط واحد عدة مرات ، وقد نرغب في توفير بيانات فريدة بسرعة لكل نمط دون الحاجة إلى إنشاء هذه المفاتيح في .json الخاص بنا. يمكننا تغيير قوائم القسم المضمن إلى ما يلي:

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list(sectionTitle: "The latest from the moleskine") }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list(sectionTitle: "Staff Hikers") }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

سيستخدم هذان الكائنان الآن متغير sectionTitle المحدد هنا عند العرض. تعتبر معلمات الأنماط قوية ، ولكنها مدعومة فقط من قبل PHP و Node Moustache PatternEngines. توفر لغات النماذج الأخرى حلولاً أفضل لهذه المشكلة. تحقق من المستندات لقراءة التفاصيل الكاملة حول المعلمات.

النمط

غالبًا ما تجد نفسك ترغب في عرض المتغيرات الأسلوبية من نفس النمط ، مثل أزرار الوسائط الاجتماعية الملونة أو الحالات المكونة. امتداد للاختصار يشمل بناء الجملة ، styleModifiers فئات إضافية للنمط. بشرط أن تقوم بإنشاء نمط block-media باستخدام {{ styleModifier}} داخل سمة الفئة:

 <a href="{{ url }}" class="c-block-media c-block-media--{{ styleModifier }}"> <div class="c-block-media__media"> {{> atoms-square:c-block-media__img }} </div> <div class="c-block-media__body"> <h2 class="c-block-media__headline">{{ headline.short }}</h2> <p class="c-block-media__excerpt">{{ excerpt.medium }}</p> </div><!-- end c-block-media__body --> </a><!-- end c-block-media -->

يؤدي تضمين هذا النمط مع نقطتين بعد الاسم إلى تعيين styleModifier:

 {{> molecules-block-media:fullBleed }}

ستؤدي إلى علامة ارتساء مثل هذا:

 <a href="path/to/url" class="c-block-media c-block-media--fullBleed">

يمكن دمج styleModifiers لتوفير فئات متعددة باستخدام أنبوب (|) كمحدد.

 {{> molecules-block-media:fullBleed|is-lazyLoaded }}

بين الأنماط الزائفة ، ومعلمات الأنماط ، styleModifiers ، يجعل Pattern Lab من السهل إظهار اختلافات واجهة المستخدم المختلفة في بعض الأحيان مع الاحتفاظ بقاعدة الشفرة الأساسية DRY في العملية.

التكرار في الاسلوب

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

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

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

اختبار منفذ العرض مع ish.

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

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

استعداد لإطلاق

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

توثيق الأنماط المقاربة

قد تقدم بعض الأنماط نفسها على أنها توثيق ذاتي ، لكن النموذج غالبًا ما يتطلب بعض السياق أو معلومات إضافية لجعل الأمور واضحة تمامًا. أشياء مثل التعريفات. يمكن لإرشادات الاستخدام والاعتبارات والموارد وأمثلة الصور أن تجد طريقها إلى توثيق الأنماط. تستخدم وثائق Pattern Lab 2 Markdown مع الواجهة الأمامية لـ YAML لإنشاء هذه الوثائق. يرافق ملف markdown النمط (على سبيل المثال ، يجب أن يكون media-object.md بجانب media-object.mustache ) ، ويمكن تنسيقه على النحو التالي:

 --- title: Utility Colors --- The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

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

النسب لتسهيل ضمان الجودة

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

بفضل طبيعة دمية التعشيش الروسية في Pattern Lab ، يمكنها عرض الأنماط التي تشكل أي مكون معين ، وكذلك إظهار مكان استهلاك هذا النمط في نظام التصميم.

بفضل هذه الميزة ، يتمتع المصممون والمطورون بمعلومات سياقية تكون في متناول اليد عند QAing و / أو إجراء تغييرات على نظام التصميم. إذا أردنا إجراء تغييرات على نمط معين ، مثل مضاعفة حجم الصورة أو إضافة عنصر نص إضافي ، فسنعرف على الفور الأنماط والقوالب التي ستحتاج إلى إعادة اختبارها و QA لضمان عدم حدوث أي انقطاع مع التغييرات . The lineage feature also helps point out unused or underutilized patterns so that teams can weed them out of the pattern library.

Showing Progress with Pattern States

Taking the concept of pattern lineage a step further, you and your team can keep track of each pattern's progress and how it affects the whole system. Pattern Lab's pattern state feature can track progress of a pattern from development, through review, to completion. With pattern states, you'll always be able to answer “Are all the patterns that comprise this template complete?”

To give your pattern a state, you add a state to the frontmatter in that pattern's documentation file. For instance:

 --- title: Block Media state: inreview --- The media block consists of...

Applying this status will present the pattern state in a couple places across Pattern Lab.

It's important to note that the state of a pattern can be influenced by the patterns it contains. Flagging a pattern like {{> molecule-media-block }} as inreview will cause a ripple effect anywhere that pattern is included. This helps identify bottlenecks that need addressed in order to bring your design system home.

You can create your own pattern states that match your team's workflow. These methods of understanding the state of your patterns can help larger teams keep track of the airplane as it's being built and flown at the same time.

Maintaining An Effective Design System

"The biggest existential threat to any system is neglect." – Alex Schleifer, Airbnb

There is a very real risk that despite your team's best intentions, your carefully-crafted design system and pattern library will slip into oblivion. “Never!” you exclaim, but unfortunately design system efforts fall into a state of disrepair for a number of reasons:

• The level of effort required to keep pattern code up to speed with applications' code bases is too high
• The pattern library is thought of as mere documentation rather than as housing a living, breathing system.
• The team fails to make the design system a key part of their workflow, and instead lets their process devolve into a series of hotfixes and ad hoc changes.
• One discipline serves as gatekeepers to the pattern library, preventing it from becoming a helpful resource for every discipline
• The pattern library isn't visible or attractive
• Many other factors (lack of funding, technology mismatches, lack of governance model, and more)

As Nathan Curtis rightly says, making a design system isn't just another project, but rather a product meant to serve your organization's sites and apps. To create a system that serves your organization for years to come, your UI design system needs to be properly maintained, serve as an essential resource for the organization to keep coming back to, and continue to be a core part of your team's design and development workflow.

Pattern Lab has always been an effective tool for creating UI design systems, but has historically lacked in the maintenance department. Thankfully, that's all changed with Pattern Lab 2. The new version has many features that helps you successfully document and maintain your pattern libraries while continuing to serve as a key tool in your pattern-driven design and development process.

Seeking the Holy Grail

It's critical to reduce the amount of effort and friction required to keep both your pattern library and production environments up to date. The Holy Grail of design systems is an environment where changes to patterns in a design system are automatically updated in both the pattern library and production environments.

The Holy Grail is often accomplished by using a frontend templating language to serve as the bridge between your pattern library and production environments. Pattern Lab 2's architecture now makes it possible to choose the templating engine that's right for your particular environment. As a result, you're able to get closer to achieving the Holy Grail. For instance, the team at Phase2 Technology have successfully integrated Pattern Lab 2 into their Drupal builds so that their clients' pattern libraries and production builds are always in step with one another.

“By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!”

– Evan Lovely, Phase2 Technology

Currently Pattern Lab 2 supports the popular Mustache and Twig templating engines, but the decoupled nature of Pattern Lab 2's editions (more on these in a bit) means that you can power Pattern Lab using the templating engine of your choice.

A Helpful Resource

Your pattern library and accompanying style guide should be something that your team comes back to reference again and again. While it may not make sense to immediately surface code snippets and pattern usage information during the initial design and development process, design system users will find themselves reaching for these things as they apply the design system to actual applications. Pattern Lab 2 now has more advanced config options that let you switch on pattern info by default to become a more helpful documentation and reference tool.

In order for your design system to thrive across your entire organization, it should be approachable and attractive. Pattern Lab 2 allows you to create your own custom front page for the component library, and also skin Pattern Lab's (intentionally bare bones) default UI to better serve your brand.

Doing It All Again

There are some teams that need only to set up and maintain a single design system, but many of us work on multiple projects for multiple clients. Wouldn't it be great to start new design system projects from a setup that's tuned to your workflow and tool choices?

Pattern Lab 2 has been re-architected to achieve just that. No longer is Pattern Lab a standalone tool, but rather it's an ecosystem built atop a core library. These changes will also make it easier for the Pattern Lab team to push out new features.

طبعات Pattern Lab

تتيح الإصدارات للفرق والوكالات تجميع كل الأشياء التي تدعم مهام سير العمل الفريدة الخاصة بهم باستخدام Pattern Lab. يمكن أن يصبح الإصدار هو نقطة البداية لجميع مشاريعك بينما تشارك الفرق الوظائف وتقوم بتحديثها. يستخدم إصدار Node من Pattern Lab npm لسحب مكونات منفصلة ، بينما يستخدم إصدار PHP Composer لمساعدتك في بدء مشروعاتك بطريقة بسيطة وموحدة.

مختبر النمط الأساسي

Core هو الشجاعة لـ Pattern Lab ويتيح جميع الميزات الأخرى. نظرًا لأن Core مستقل ، يمكن للفريق التحديث والبقاء محدثًا بأحدث ميزات Pattern Lab دون تعطيل بقية مشروعهم.

StarterKits

هل لديك مجموعة مضمونة من التعليمات البرمجية المعيارية التي تبدأ بها كل مشروع؟ ربما مجموعة شائعة من الأنماط الأساسية ، ومزج Sass ، ومكتبات JavaScript التي هي أدوات الانتقال الخاصة بك؟ يعد StarterKit مثاليًا لتجميع هذه الأصول معًا في نموذج معياري يضمن أن كل مشروع يبدأ في القدم اليمنى.

توجد عدة مجموعات مبدئية بالفعل لبدء مشروعك ، سواء كنت تبحث عن بداية فارغة ، أو ابدأ بعرض توضيحي يعرض ميزات Pattern Lab ، أو ابدأ بإطار عمل شائع مثل Bootstrap أو Foundation أو Material Design. ويمكنك تشغيل جهازك الخاص ، والذي يمكن التحكم فيه بالكامل في الإصدار حتى يتمكن StarterKit لفريقك من التطور جنبًا إلى جنب مع أدواتك.

لا يبعد استيراد Starterkit سوى بضع ضغطات على المفاتيح بعد التثبيت. في النهاية سيتم دمج هذه الميزة في مرحلة ما بعد التثبيت كما هو الحال في Pattern Lab PHP عبر الملحن.

StyleguideKits

StyleguideKits هي الواجهة الأمامية لـ Pattern Lab. نسمي هذا "العارض". تتيح StyleguideKits للوكالات والمؤسسات تطوير واجهات مستخدم Pattern Lab مخصصة ذات علامة تجارية لعرض أنماطها.

النمط

PatternEngines هي محركات القوالب المسؤولة عن تحليل الأنماط وتحويلها إلى HTML. تمنح PatternEngines Pattern Lab Core المرونة لتقديم العديد من أنواع لغات القوالب المختلفة. تشتمل المحركات النموذجية الحالية على Moustache و Twig ، بالإضافة إلى عناصر أخرى مثل المقود والشرطة السفلية قيد التطوير. وليس هناك ما يمنعك من إضافة محرك قوالب آخر إلى Pattern Lab.

الإضافات

تسمح المكونات الإضافية للمطورين بتوسيع Pattern Lab Core وأجزاء أخرى من النظام البيئي. على سبيل المثال ، يحتوي إصدار PHP من Pattern Lab على عدد من المكونات الإضافية مثل Browser Auto-Reload و Data Inheritance و Faker. تسمح بنية Pattern Lab للمطورين بتعديل البيانات في مراحل مختلفة ، وإضافة أوامرهم الخاصة أو قواعد النمط ، أو تغيير الواجهة الأمامية لتعديل وتوسيع إمكانيات Pattern Lab

شاهد حديثي

جرِّب معمل النموذج 2 ، واشترك فيه

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

إذا قرر فريقك تنزيل Pattern Lab 2 وتجربته ، فنحن نحب أن نسمع منك! انضم إلى المحادثة عن طريق طرح أسئلة على Gitter ، وافتح المشكلات إذا كنت تعاني من شيء ما ، وساعد في اقتراح ميزات جديدة ومناقشتها.

وإذا قمت بعمل أشياء رائعة باستخدام Pattern Lab 2 ، فيرجى مشاركة أفكارك! يحتوي Styleguides.io على أكثر من 150 نموذجًا لمكتبات الأنماط ، لذا أضف Pattern Lab إلى المزيج. يكمن جمال الويب والمشاريع مفتوحة المصدر في أن المجتمع بأكمله يمكنه التعلم من تجربتك والبناء على تلك المعرفة.

نحن متحمسون لمعرفة الأشياء العظيمة التي تنشئها!