Sushi Design System - UI Kit

Zomato‏

درباره این برنامه

Sushi سیستم طراحی اختصاصی Zomato است که به ایجاد رابط های کاربری قوی با استفاده از یک زبان طراحی ساده و تمیز کمک می کند. ما در zomato، این را از ابتدا ساخته ایم. این فقط یک سیستم طراحی برای ما نیست، بلکه بیشتر از آن به ما کمک می کند تا تجربه ای جدید و پیشرفته را برای کاربران خود ارائه دهیم. سوشی می تواند به شما کمک کند تا رابط های کاربری سفارشی را با یک زبان طراحی اتمی، تمیز و ساده بسازید. در حالی که سوشی بر اساس زبان طراحی خود ساخته می شود، به طور کامل از اجزای طراحی متریال گوگل در بسیاری از زمینه ها استفاده می کند.

به‌عنوان یک سیستم طراحی و مرجعی برای دستورالعمل‌های برند، توسط تیم‌های مختلفی در Zomato، مانند محصول، مهندسی، بازاریابی و برندسازی، استفاده و ارائه می‌شود.

سیستم طراحی چیست؟
یک سیستم طراحی مجموعه‌ای از اجزای قابل استفاده مجدد است که با استانداردهای واضح هدایت می‌شوند و می‌توانند با هم مونتاژ شوند تا هر تعداد کاربرد را بسازند. یک سیستم طراحی تنها مجموعه ای از دارایی ها و مؤلفه هایی نیست که برای ساختن یک محصول دیجیتال استفاده می کنید. به گفته Emmet Connolly، مدیر طراحی محصول در Intercom، «... اکثر سیستم‌های طراحی واقعاً فقط کتابخانه‌های الگو هستند: جعبه بزرگی از قطعات لگو UI که می‌توان آنها را به روش‌های تقریباً نامتناهی مونتاژ کرد. همه قطعات ممکن است سازگار باشند، اما این بدان معنا نیست که نتایج مونتاژ شده ثابت خواهند بود. محصول شما چیزی بیش از انبوهی از عناصر رابط کاربری قابل استفاده مجدد است. ساختار و معنا دارد. این یک صفحه وب عمومی نیست، تجسم سیستمی از مفاهیم است."

سیستم طراحی سوشی

بنیادها
پایه ها دستورالعمل های برند دیجیتالی هستند که تایپوگرافی، پالت های رنگی، نمادها، فاصله ها، سایه ها و معماری اطلاعات سیستم طراحی ما را تعریف می کنند. سوشی، با پیروی از اصول طراحی اتمی، از پایین به بالا با استفاده از اجزای ترکیب پذیر ساخته می شود که به صورت اتم ➡️ مولکول ➡️ ارگانیسم مرتب شده اند.

طراحی اتمی
طراحی اتمی (همانطور که توسط برد فراست توضیح داده شده است) به سیستم ما نگاشت شده است.

#Atoms
کوچکترین واحدهای تقسیم ناپذیر اتم ها هستند. در اندروید (یا هر رابط کاربری تلفن همراه) برچسب‌های نوشتاری، دکمه‌ها و نگه‌دارنده‌های تصویر اتم هستند.

#مولکول ها
نماهایی که شامل چندین اتم برای تشکیل می شوند، اما همچنان برای کاربر مانند یک موجودیت واحد به نظر می رسند و رفتار می کنند، مولکول هستند. به عنوان مثال، فیلدهای ورودی دارای کادر ورودی، فیلد خطا و دکمه پاک هستند، اما با هم یک موجودیت واحد هستند.

#ارگانیسم ها
اجزای پیچیده، اما قابل استفاده مجدد، که به روشی منسجم با هم کار می کنند. از چندین اتم و مولکول تشکیل شده است. یک مورد در مورد میله های رتبه بندی است که از برچسب هایی تشکیل شده است که هر کدام دارای یک عدد و یک نماد هستند. هنگامی که رتبه بندی های مختلف انتخاب می شود، برچسب ها نیز رنگ تغییر می کنند. هر تگ به صورت جداگانه در مکان های دیگر نیز استفاده می شود، اما به عنوان یک نوار رتبه بندی، همه با هم کار می کنند تا معنای جدیدی ایجاد کنند.

تایپوگرافی
همانطور که ممکن است بدانید تایپوگرافی هنر چینش تایپ برای خوانا، خواندن و جذاب کردن زبان نوشتاری در هنگام نمایش است. ترتیب نوع شامل انتخاب حروف، اندازه نقطه، طول خطوط، فاصله خطوط و فاصله بین حروف و تنظیم فاصله بین جفت حروف است.

ما از تغییرات تایپ فیس زیر پشتیبانی می کنیم -

فوق سبک
سبک
منظم
متوسط
نیمه پررنگ
پررنگ
فوق پررنگ

می توانید از هر قلمی که دارای حداکثر 8 وزن قلم است استفاده کنید و آنها را از این نام مستعار اختصاص دهید. در حالی که ما Metropolis، Okra و Roboto را برای نسخه ی نمایشی داریم، می توانید از هر فونتی که با نام تجاری شما مطابقت دارد استفاده کنید.

رنگ ها
سوشی همچنین مجموعه ای از رنگ های از پیش تعریف شده را در پالت خود ارائه می دهد. برای موارد فوق العاده منحصر به فرد، از رنگ های خود استفاده کنید، اما در غیر این صورت، توصیه می کنیم از رنگ های این پالت برای تمام اجزای محصول خود استفاده کنید.

مخزن کد