Sushi Design System - UI Kit

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

كنظام تصميم ومرجع لإرشادات العلامة التجارية ، يتم استخدامه وتمثيله من قبل فرق مختلفة داخل Zomato ، مثل - المنتج والهندسة والتسويق والعلامات التجارية.

ما هو نظام التصميم؟

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

نظام تصميم السوشي

أسس

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

التصميم الذري

التصميم الذري (كما وصفه براد فروست) مخطط لنظامنا.

#Atoms

أصغر الوحدات غير القابلة للتجزئة هي الذرات. في Android (أو أي واجهة مستخدم للهاتف المحمول) ، تعتبر التسميات النصية والأزرار وحوامل الصور ذرات.

# جزيئات

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

# الكائنات الحية

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

أسلوب الطباعة

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

نحن ندعم الاختلافات المحرف التالية -

المزيد من الإضاءة

خفيفة

عادي

متوسط

شبه بولد

عريض

ExtraBold

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

الألوان

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

مستودع الشفرات