اللبلاب تجربة الفيلم على الانترنتعندما في بداية عام 2017 ، فكرنا أولاً في إنشاء نظامنا الخاص لتقديم التصميم إلى الكود ، وتحدث كثيرون حول هذا الأمر وحتى شخص فعله. ومع ذلك ، لا يُعرف الكثير عن تجربة بناء أنظمة التصميم عبر الأنظمة الأساسية حتى يومنا هذا ، ولا توجد وصفات واضحة ومثبتة تصف التقنيات والأساليب لمثل هذا التحول من عملية تنفيذ التصميم إلى منتج فعال بالفعل. و "المكونات في التعليمات البرمجية" غالباً ما تعني أشياء مختلفة للغاية.
وفي الوقت نفسه ، ضاعفت الشركة موظفيها من عام إلى آخر - كان من الضروري توسيع نطاق قسم التصميم وتحسين عمليات إنشاء ونقل المخططات إلى التطوير. نقوم بضرب كل هذا من خلال "حديقة حيوانات" من المنصات التي تحتاج إلى الدعم ، ونحصل على شكل من مظاهر بابل المزدحمة ، والتي ببساطة ليست قادرة على "القيام عادة" وتوليد الدخل. تم تطوير النظام الأساسي في كثير من الأحيان بالتوازي ، ويمكن أن تنطلق نفس الوظيفة على منصات مختلفة مع تأخر عدة أشهر.
مجموعات تخطيط منفصلة لكل منصةتقليديًا ، بدأنا بمشاكل من شأنها أن يساعد نظام التصميم في حل المتطلبات وصياغتها. بالإضافة إلى إنشاء لغة بصرية واحدة ، وزيادة سرعة النماذج الأولية وتطويرها ، وتحسين جودة المنتج ككل ، كان من الضروري للغاية توحيد التصميم قدر الإمكان. يعد ذلك ضروريًا حتى يصبح تطوير الوظائف ممكنًا فورًا على جميع الأنظمة الأساسية لدينا في وقت واحد: الويب و iOS و Android والتلفزيون الذكي و tvOS و Android TV و Windows 10 و xBox One و PS4 و Roku - دون العمل على كل منها على حدة . وفعلنا ذلك!
تصميم → البيانات
عندما تم التوصل إلى الاتفاقيات الرئيسية لإدارات المنتج والتطوير ، جلسنا لتحديد المكدس التكنولوجي ودراسة تفاصيل العملية برمتها - من التخطيط إلى الإصدار. من أجل أتمتة عملية نقل التصميم إلى التطوير تمامًا ، قمنا بفحص الخيار باستخدام محلل لمعلمات المكون مباشرةً من ملفات Sketch ذات التخطيطات. اتضح أن العثور على أجزاء الكود التي نحتاجها واستخراج المعلمات التي نحتاجها كانت مهمة معقدة وخطيرة. أولاً ، يتعين على المصممين توخي الحذر الشديد في تسمية جميع طبقات الكود المصدري ، وثانياً ، لا يعمل إلا مع أبسط المكونات ، وثالثا ، الاعتماد على تكنولوجيا الآخرين وهيكل الكود الخاص بتخطيط Sketch الأصلي يعرض مستقبل المشروع بأكمله للخطر. قررنا التخلي عن الأتمتة في هذا المجال. لذلك ، ظهر الشخص الأول في فريق نظام التصميم ، عند مدخل تخطيطات التصميم ، وفي المخرجات - بيانات تصف جميع المعلمات للمكونات وترتيبها الهرمي بواسطة منهجية التصميم الذري.
بقيت المسألة صغيرة: أين وكيف يتم تخزين البيانات ، وكيفية نقلها إلى التطوير ، وكيفية تفسيرها في التنمية على جميع المنصات التي ندعمها. توقفت الأمسية عن أن تكون ضعيفة ... وكانت نتيجة الاجتماعات المنتظمة لمجموعة العمل ، التي تتكون من مصممين وقادة فريق من كل منصة ، الاتفاق على ما يلي.
نقوم يدويًا بتحليل العناصر المرئية إلى عناصر ذرية: الخطوط والألوان والشفافية والمسافات البادئة والشرائح والأيقونات والصور والمدد الزمنية للرسوم المتحركة. ونجمعها من هذا الزر ، والمدخلات ، وخانات الاختيار ، وأدوات بطاقة البنك ، وما إلى ذلك. نقوم بتعيين أسماء غير دلالية لأنماط من أي مستوى ، باستثناء الرموز ، على سبيل المثال ، أسماء المدن ، وأسماء الحوريات ، و Pokemon ، وماركات السيارات ... هناك شرط واحد فقط - لا ينبغي استنفاد القائمة مسبقًا ما هي الأساليب التي ستنتهي بـ - إظهار الصاري يذهب! يجب ألا تتنقل مع الكلمات الدلالية حتى لا تضطر إلى إضافة زر وسط بين "صغير" و "متوسط" ، على سبيل المثال.
لغة بصرية
غادر المطورون للتفكير في كيفية تخزين البيانات ونقلها بحيث تناسب جميع المنصات ، وكان على التصميم تصميم عناصر واجهة يمكن أن تبدو جيدة على قدم المساواة وتعمل بفعالية عبر مجموعة كاملة من الأجهزة المدعومة.
في وقت سابق ، نجحنا في "استعراض" معظم عناصر التصميم في تطبيق لنظام التشغيل Windows 10 ، والذي كان في ذلك الوقت منصة جديدة بالنسبة لنا ، أي أن التطوير والتطوير كان ضروريًا. من خلال رسمها ، كنا قادرين على إعداد واختبار معظم المكونات وفهم أي منها سيتم تضمينه في نظام تصميم Ivy في المستقبل. بدون مثل هذا الصندوق الرمل ، لا يمكن اكتساب مثل هذه التجربة إلا من خلال عدد كبير من التكرارات على منصات العمل بالفعل ، وهذا سيستغرق أكثر من عام.
يؤدي إعادة استخدام نفس المكونات على منصات مختلفة إلى تقليل عدد التصميمات ومصفوفة بيانات نظام التصميم في بعض الأحيان ، لذلك كان على التصميم حل مشكلة أخرى لم يتم وصفها مسبقًا في ممارسة تصميم المنتج وتطويره - كيف ، على سبيل المثال ، إعادة استخدام الزر للهواتف والأجهزة اللوحية على أجهزة التلفزيون؟ وما ينبغي أن يكون من حيث المبدأ مع أحجام الخطوط والعناصر على مثل هذه المنصات المختلفة؟
من الواضح ، كان من الضروري تصميم شبكة وحدات عبر منصة من شأنها أن تحدد أحجام النص والعناصر التي نحتاجها لكل منصة معينة. بالنسبة للنقطة المرجعية للشبكة ، اخترنا حجم وعدد ملصقات الملصقات التي نريد رؤيتها على شاشة معينة ، وبناءً على ذلك ، قمنا بصياغة القاعدة الخاصة بإنشاء أعمدة الشبكة ، شريطة أن يكون عرض عمود واحد مساوياً لعرض الملصق.
أنت الآن بحاجة إلى إحضار جميع الشاشات الكبيرة بنفس حجم التصميم وتثبيتها في الشبكة العامة. يجري تطوير Apple TV و Roku بحجم 1920 × 1080 ، و Android TV - 960 × 540 ، والتلفزيون الذكي ، اعتمادًا على البائع وهما متماثلان ، وهناك 1280 × 720. عندما يتم تقديم التطبيق وعرضه على شاشات Full HD ، يتم ضرب 960 في 2 ، 1280 في 1.33 ، ويتم عرض 1920 كما هو.
عند حذف التفاصيل المملة ، توصلنا إلى استنتاج مفاده أن جميع الشاشات ، بما في ذلك شاشات التلفزيون من حيث العناصر وأحجامها ، مغطاة بتخطيط تصميم واحد ، وأن جميع شاشات التلفزيون هي حالة خاصة بشبكة مشتركة مشتركة بين الأنظمة الأساسية ، وتتكون من خمسة أو ستة أعمدة ، مثل الكمبيوتر اللوحي العادي أو سطح المكتب. من يهتم بالتفاصيل ، انتقل إلى التعليقات.
واجهة المستخدم الموحدة لجميع المنصاتالآن ، لرسم ميزة جديدة ، لا نحتاج إلى رسم تخطيطات لكل منصة ، بالإضافة إلى خيارات القدرة على التكيف لكل منها. يكفي إظهار تخطيط واحد وقدرته على التكيف لجميع المنصات والأجهزة من أي عرض: الهواتف - 320-599 ، كل شيء آخر - 600-1280.
البيانات → التنمية
بالطبع ، بغض النظر عن الطريقة التي نود أن نصل بها إلى تصميم موحد تمامًا ، فإن لكل منصة ميزات فريدة خاصة بها. على الرغم من حقيقة أن كل من الويب والتلفزيون الذكي يستخدمان ReactJS + TypeScript ، فإن تطبيق Smart TV يعمل على عملاء WebKit و Presto القديمين ، وبالتالي لا يمكن استخدام الأنماط الشائعة مع الويب. والنشرات الإخبارية عبر البريد الإلكتروني مجبرة تمامًا على العمل مع تخطيط الجدول. في الوقت نفسه ، لا تستخدم أي من الأنظمة الأساسية غير الخاصة بـ html أو تخطط لاستخدام React Native أو أي من نظائرها ، خوفًا من تدهور الأداء ، نظرًا لأن لدينا العديد من المخططات المخصصة ، والمجموعات ذات منطق التحديث المعقّد ، والصور ومقاطع الفيديو. لذلك ، فإن المخطط المشترك غير مناسب لنا - لتزويد أنماط CSS الجاهزة أو مكونات React الجاهزة. لذلك ، قررنا نقل البيانات بتنسيق JSON ، مع وصف القيم في نموذج إعلان تجريدي.
وبالتالي فإن خاصية rounding: 8 ، يتم تحويل تطبيق Windows 10 إلى CornerRadius="8" ، الويب - border-radius: 8px ، Android - android:radius="8dp" ، iOS - self.layer.cornerRadius = 8.0 .
offsetTop: 12 OffsetTop offsetTop: 12 نفس عميل الويب يمكن تفسيره في حالات مختلفة مثل top ، margin-top ، margin-top padding-top أو transform
تشير الطبيعة التصريحية للوصف أيضًا إلى أنه إذا كان النظام الأساسي غير قادر تقنيًا على استخدام أي خاصية أو قيمتها ، فيمكنه تجاهلها. فيما يتعلق بالمصطلحات ، صنعنا نوعًا من لغة الإسبرانتو: أخذنا شيئًا ما من Android ، والبعض الآخر من SVG ، والبعض الآخر من CSS.
إذا كان من الضروري عرض العناصر بطريقة مختلفة على نظام أساسي معين ، فقد طبقنا القدرة على نقل توليد البيانات المطابق كملف JSON منفصل. على سبيل المثال ، الحالة "قيد التركيز" بالنسبة للتلفزيون الذكي ، فهي تملي تغييرًا في موضع النص الموجود تحت الملصق ، لذلك سيحتوي هذا المكون في قيمة الخاصية "المسافة البادئة" في هذه المنصة على 8 نقاط بادئة يحتاج إليها. على الرغم من أن هذا يعقد البنية التحتية لنظام التصميم ، إلا أنه يوفر درجة إضافية من الحرية ، مما يتيح لنا الفرصة لإدارة "الاختلاف" المرئي للمنصات بأنفسنا ، وليس رهائن الهندسة المعمارية التي أنشأناها.
الصور التوضيحية
تعتبر الأيقونوغرافيا في منتج رقمي دائمًا ضخمة وليست أسهل مشروع فرعي ، وغالبًا ما يكون لها مصمم منفصل. هناك دائمًا العديد من الحروف الرسومية ، لكل منها أحجام وألوان متعددة ، علاوة على ذلك ، تحتاج الأنظمة الأساسية إليها ، كقاعدة عامة بتنسيقات مختلفة. بشكل عام ، لم يكن هناك سبب لعدم إدخال كل هذا في نظام التصميم.
يتم تحميل الحروف الرسومية بتنسيق SVG المتجه ، ويتم استبدال قيم الألوان تلقائيًا بالمتغيرات. يمكن لتطبيقات العملاء إعدادها للاستخدام - بأي تنسيق ولون.
المعاينة
علاوة على JSON مع البيانات ، كتبنا أداة لمعاينة المكونات - تطبيق JS يمرر بيانات JSON من خلال مولدات الترميز والأناقة الخاصة به ويعرض أشكال مختلفة لكل مكون في المتصفح. في الواقع ، فإن المعاينة هي بالضبط نفس عميل تطبيقات النظام الأساسي ، وتعمل مع نفس البيانات.
فهم كيفية عمل مكون معين هو أسهل من خلال التفاعل معها. لذلك ، لم نستخدم أدوات مثل Storybook ، لكننا استخدمنا معاينة تفاعلية - يمكنك أن تلمس ، تحوم ، انقر فوق ... عندما تضيف مكونًا جديدًا إلى نظام التصميم ، تظهر في المعاينة بحيث يكون للمنصات ما تريد التركيز عليه عند تقديمه.
الوثائق
بناءً على البيانات التي يتم تسليمها في شكل JSON إلى الأنظمة الأساسية ، يتم إنشاء وثائق المكونات تلقائيًا. يتم وصف قائمة الخصائص وأنواع القيم الممكنة في كل منها. بعد الإنشاء التلقائي ، يمكن توضيح المعلومات يدويًا ، وإضافة وصف نصي. يتم توفير المعاينة والوثائق مع المراجع التبادلية لبعضها البعض على مستوى كل مكون ، وجميع المعلومات التي تقع في الوثائق متاحة للمطورين في شكل ملفات JSON إضافية.
Deprekator
وهناك حاجة أخرى تتمثل في القدرة على استبدال المكونات الحالية وترقيتها بمرور الوقت. لقد تعلم نظام التصميم إخبار المطورين بالخصائص أو حتى المكونات الكاملة التي لا يمكن استخدامها وإزالتها بمجرد عدم استخدامها في جميع الأنظمة الأساسية. لا يزال هناك الكثير من العمل "اليدوي" في هذه العملية ، لكننا لا نقف مكتوفي الأيدي.
تنمية العملاء
مما لا شك فيه ، أصبح تفسير بيانات نظام التصميم في كود جميع المنصات التي تدعمها لنا المرحلة الأكثر شمولاً في التعقيد. على سبيل المثال ، إذا لم تكن الشبكات المعيارية على شبكة الإنترنت جديدة ، فسيكون مطورو تطبيقات الأجهزة المحمولة الأصلية لنظامي التشغيل iOS و Android يتعرقلون بشدة قبل اكتشاف كيفية التعايش معها.
لتخطيط شاشات تطبيق iOS ، نستخدم آليتين أساسيتين توفرهما iviUIKit: تخطيط مجاني للعناصر وتخطيط مجموعات من العناصر. نحن نستخدم VIPER ، ويتركز كل التفاعل مع iviUIKit في View ، وتتركز غالبية التفاعل مع Apple UIKit في iviUIKit. يتم تحديد أحجام العناصر وترتيبها من حيث الأعمدة وتصميمات بناء الجملة التي تعمل على ثوابت iK SDK الأصلية ، مما يجعلها أكثر تطبيقًا. هذا تبسيط حياتنا بشكل خاص عند العمل مع UICollectionView. لقد كتبنا بعض التصميمات القابلة للتخصيص للتخطيطات ، بما في ذلك التخطيطات المعقدة للغاية. تحول رمز العميل إلى الحد الأدنى وأصبح إعلاني.
لإنشاء أنماط في مشروع Android ، نستخدم Gradle ، ونحول بيانات نظام التصميم إلى أنماط بتنسيق XML. في الوقت نفسه ، لدينا عدة مولدات من مختلف المستويات:
- الأساسية . تحليل بيانات الأوليات للمولدات عالية المستوى.
- الموارد . قم بتنزيل الصور والرموز والرسومات الأخرى.
- المكون. تتم كتابتها لكل مكون ، والذي يصف الخصائص وكيفية ترجمتها إلى أنماط.
إصدارات التطبيق
بعد قيام المصممين برسم مكون جديد أو إعادة صياغة مكون موجود ، تقع هذه التغييرات في نظام التصميم. يقوم مطورو كل منصة بوضع اللمسات الأخيرة على إنشاء الشفرة ، وتوفير الدعم للتغييرات. بعد ذلك ، يمكن استخدامه في تنفيذ وظائف جديدة ، حيث يكون هذا المكون ضروريًا. وبالتالي ، لا يحدث التفاعل مع نظام التصميم في الوقت الفعلي ، ولكن فقط في وقت تجميع الإصدارات الجديدة. يتيح لك هذا النهج أيضًا التحكم بشكل أفضل في عملية نقل البيانات ويضمن أداء التعليمات البرمجية في مشاريع تطوير العميل.
النتائج
قريباً ، كنظام تصميم ، أصبحت السنة جزءًا من البنية التحتية التي تخدم تطوير سينما Ivy عبر الإنترنت ، ويمكن بالفعل استخلاص بعض الاستنتاجات:
- هذا هو مشروع كبير وصعب التنفيذ ، ويتطلب موارد مخصصة ثابتة.
- سمح لنا ذلك بإنشاء لغة مرئية فريدة عبر منصات تلبي أهداف خدمة الفيديو عبر الإنترنت.
- لم يعد لدينا منصات متخلفة بصريا ووظيفيا.
معاينة مكونات نظام تصميم اللبلاب -
design.ivi.ru