Sushi Design System - UI Kit

Zomato

ഈ ആപ്പിനെക്കുറിച്ച്

സുഷി സൊമാറ്റോയുടെ സ്വന്തം ഡിസൈൻ സിസ്റ്റമാണ്, ഇത് വൃത്തിയുള്ളതും ലളിതവുമായ ഡിസൈൻ ഭാഷയെ പിന്തുടർന്ന് ശക്തമായ ഉപയോക്തൃ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഞങ്ങൾ zomato-യിൽ, ഇത് അടിത്തട്ടിൽ നിന്ന് നിർമ്മിച്ചതാണ്. ഇത് ഞങ്ങൾക്കുള്ള ഒരു ഡിസൈൻ സിസ്റ്റം മാത്രമല്ല, അതിലുപരിയായി ഇത് ഞങ്ങളുടെ ഉപയോക്താക്കൾക്ക് പുതിയതും മെച്ചപ്പെടുത്തിയതുമായ അനുഭവം നൽകാൻ ഞങ്ങളെ സഹായിക്കുന്നു. ആറ്റോമികവും വൃത്തിയുള്ളതും ലളിതവുമായ ഡിസൈൻ ഭാഷയെ പിന്തുടർന്ന് ബെസ്‌പോക്ക് യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ സുഷിക്ക് നിങ്ങളെ സഹായിക്കാനാകും. സുഷി സ്വന്തം ഡിസൈൻ ഭാഷയിൽ നിർമ്മിക്കുമ്പോൾ, അത് പൂർണ്ണമായി സ്വീകരിക്കുകയും ഗൂഗിളിന്റെ മെറ്റീരിയൽ ഡിസൈൻ ഘടകങ്ങൾ പല മേഖലകളിലും ആന്തരികമായി ഉപയോഗിക്കുകയും ചെയ്യുന്നു.

ഒരു ഡിസൈൻ സംവിധാനവും ബ്രാൻഡ് മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കുള്ള റഫറൻസും എന്ന നിലയിൽ, Zomato-യിലെ വിവിധ ടീമുകൾ ഇത് ഉപയോഗിക്കുകയും പ്രതിനിധീകരിക്കുകയും ചെയ്യുന്നു, അതായത് - ഉൽപ്പന്നം, എഞ്ചിനീയറിംഗ്, മാർക്കറ്റിംഗ്, ബ്രാൻഡിംഗ്.

എന്താണ് ഡിസൈൻ സിസ്റ്റം?
ഒരു ഡിസൈൻ സിസ്റ്റം എന്നത് പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങളുടെ ഒരു ശേഖരമാണ്, വ്യക്തമായ മാനദണ്ഡങ്ങളാൽ നയിക്കപ്പെടുന്നു, അത് എത്ര ആപ്ലിക്കേഷനുകളും നിർമ്മിക്കാൻ ഒരുമിച്ച് കൂട്ടിച്ചേർക്കാം. ഒരു ഡിജിറ്റൽ ഉൽപ്പന്നം നിർമ്മിക്കാൻ നിങ്ങൾ ഉപയോഗിക്കുന്ന അസറ്റുകളുടെയും ഘടകങ്ങളുടെയും ഒരു ശേഖരം മാത്രമല്ല ഡിസൈൻ സിസ്റ്റം. ഇന്റർകോമിലെ പ്രൊഡക്റ്റ് ഡിസൈൻ ഡയറക്ടർ എമ്മെറ്റ് കൊണോലിയുടെ അഭിപ്രായത്തിൽ, “... മിക്ക ഡിസൈൻ സിസ്റ്റങ്ങളും യഥാർത്ഥത്തിൽ പാറ്റേൺ ലൈബ്രറികൾ മാത്രമാണ്: യുഐ ലെഗോ കഷണങ്ങളുടെ ഒരു വലിയ പെട്ടി, അത് അനന്തമായ രീതികളിൽ കൂട്ടിച്ചേർക്കാനാകും. എല്ലാ കഷണങ്ങളും സ്ഥിരതയുള്ളതാകാം, എന്നാൽ ഒത്തുചേർന്ന ഫലങ്ങൾ ആയിരിക്കുമെന്ന് ഇതിനർത്ഥമില്ല. നിങ്ങളുടെ ഉൽപ്പന്നം പുനരുപയോഗിക്കാവുന്ന UI ഘടകങ്ങളുടെ ഒരു കൂമ്പാരം മാത്രമല്ല. അതിന് ഘടനയും അർത്ഥവുമുണ്ട്. ഇതൊരു പൊതു വെബ് പേജല്ല, ഇത് ഒരു സങ്കൽപ്പ വ്യവസ്ഥയുടെ ആൾരൂപമാണ്.

സുഷി ഡിസൈൻ സിസ്റ്റം

അടിസ്ഥാനങ്ങൾ
ഞങ്ങളുടെ ഡിസൈൻ സിസ്റ്റത്തിന്റെ ടൈപ്പോഗ്രാഫി, വർണ്ണ പാലറ്റുകൾ, ഐക്കണുകൾ, സ്പേസിംഗ്, ഷാഡോ, ഇൻഫർമേഷൻ ആർക്കിടെക്ചർ എന്നിവ നിർവചിക്കുന്ന ഡിജിറ്റൽ ബ്രാൻഡ് മാർഗ്ഗനിർദ്ദേശങ്ങളാണ് അടിസ്ഥാനങ്ങൾ. സുഷി, ആറ്റോമിക് ഡിസൈൻ തത്വങ്ങൾ പിന്തുടർന്ന്, ആറ്റങ്ങൾ ➡️ തന്മാത്രകൾ ➡️ ജീവികൾ ആയി ക്രമീകരിച്ച, കമ്പോസിബിൾ ഘടകങ്ങൾ ഉപയോഗിച്ച് അടിത്തട്ടിൽ നിർമ്മിച്ചതാണ്.

ആറ്റോമിക് ഡിസൈൻ
ആറ്റോമിക് ഡിസൈൻ (ബ്രാഡ് ഫ്രോസ്റ്റ് വിവരിച്ചതുപോലെ) ഞങ്ങളുടെ സിസ്റ്റത്തിലേക്ക് മാപ്പ് ചെയ്‌തു.

#ആറ്റങ്ങൾ
ഏറ്റവും ചെറിയ അവിഭാജ്യ യൂണിറ്റുകൾ ആറ്റങ്ങളാണ്. Android-ൽ (അല്ലെങ്കിൽ ഏതെങ്കിലും മൊബൈൽ UI) ടെക്സ്റ്റ് ലേബലുകൾ, ബട്ടണുകൾ, ഇമേജ് ഹോൾഡറുകൾ എന്നിവ ആറ്റങ്ങളാണ്.

#തന്മാത്രകൾ
ഒന്നിലധികം ആറ്റങ്ങൾ രൂപപ്പെടാൻ ഉൾപ്പെടുന്ന കാഴ്ചകൾ, പക്ഷേ ഇപ്പോഴും ഉപയോക്താവിന് ഒരൊറ്റ അസ്തിത്വം പോലെ കാണുകയും പെരുമാറുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ഇൻപുട്ട് ഫീൽഡുകൾക്ക് ഇൻപുട്ട് ബോക്‌സ്, പിശക് ഫീൽഡ്, ഒരു ക്ലിയർ ബട്ടൺ എന്നിവയുണ്ട്, എന്നാൽ ഒരുമിച്ച് ഇത് ഒരൊറ്റ എന്റിറ്റിയാണ്.

#ജീവികൾ
സങ്കീർണ്ണവും എന്നാൽ പുനരുപയോഗിക്കാവുന്നതുമായ ഘടകങ്ങൾ, ഒരുമിച്ച് യോജിച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. ഒന്നിലധികം ആറ്റങ്ങളും തന്മാത്രകളും ചേർന്നതാണ്. ഓരോന്നിനും ഒരു നമ്പറും ഐക്കണും ഉള്ള ടാഗുകൾ അടങ്ങുന്ന, റേറ്റിംഗ് ബാറുകളാണ് ഒരു കാര്യം. വ്യത്യസ്ത റേറ്റിംഗുകൾ തിരഞ്ഞെടുക്കുമ്പോൾ ടാഗുകൾ നിറവും മാറുന്നു. ഓരോ ടാഗും വ്യക്തിഗതമായി മറ്റ് സ്ഥലങ്ങളിലും ഉപയോഗിക്കുന്നു, എന്നാൽ ഒരു റേറ്റിംഗ് ബാർ എന്ന നിലയിൽ, പുതിയ അർത്ഥം സൃഷ്ടിക്കുന്നതിന് എല്ലാം ഒരുമിച്ച് പ്രവർത്തിക്കുന്നു.

ടൈപ്പോഗ്രാഫി
ടൈപ്പോഗ്രാഫി, നിങ്ങൾക്ക് അറിയാവുന്നതുപോലെ, എഴുതപ്പെട്ട ഭാഷ വ്യക്തവും വായിക്കാവുന്നതും പ്രദർശിപ്പിക്കുമ്പോൾ ആകർഷകവുമാക്കുന്നതിന് തരം ക്രമീകരിക്കാനുള്ള കലയാണ്. ടൈപ്പ് ഫേസുകൾ, പോയിന്റ് വലുപ്പങ്ങൾ, ലൈൻ നീളം, ലൈൻ-സ്‌പെയ്‌സിംഗ്, ലെറ്റർ-സ്‌പെയ്‌സിംഗ് എന്നിവ തിരഞ്ഞെടുക്കുന്നതും ജോഡി അക്ഷരങ്ങൾക്കിടയിലുള്ള ഇടം ക്രമീകരിക്കുന്നതും ടൈപ്പിന്റെ ക്രമീകരണത്തിൽ ഉൾപ്പെടുന്നു.

ഇനിപ്പറയുന്ന ടൈപ്പ്ഫേസ് വ്യതിയാനങ്ങളെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നു -

എക്സ്ട്രാ ലൈറ്റ്
വെളിച്ചം
പതിവ്
ഇടത്തരം
സെമിബോൾഡ്
ധീരമായ
എക്സ്ട്രാ ബോൾഡ്

നിങ്ങൾക്ക് 8 ഫോണ്ട് വെയ്റ്റുകളുള്ള ഏത് ഫോണ്ടും ഉപയോഗിക്കുകയും ഈ അപരനാമങ്ങളിൽ നിന്ന് അവയെ അസൈൻ ചെയ്യുകയും ചെയ്യാം. ഡെമോയ്‌ക്കായി ഞങ്ങൾക്ക് മെട്രോപോളിസും ഒക്രയും റോബോട്ടോയും ഉള്ളപ്പോൾ, നിങ്ങളുടെ ബ്രാൻഡിനൊപ്പം പോകുന്ന ഏത് ഫോണ്ടും നിങ്ങൾക്ക് ഉപയോഗിക്കാം.

നിറങ്ങൾ
സുഷി അതിന്റെ പാലറ്റിൽ ഒരു കൂട്ടം മുൻകൂട്ടി നിശ്ചയിച്ച നിറങ്ങളും നൽകുന്നു. വളരെ സവിശേഷമായ സന്ദർഭങ്ങളിൽ, നിങ്ങളുടെ സ്വന്തം നിറങ്ങൾ ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല, അല്ലാത്തപക്ഷം, നിങ്ങളുടെ ഉൽപ്പന്നത്തിന്റെ എല്ലാ ഘടകങ്ങൾക്കും ഈ പാലറ്റിൽ നിന്നുള്ള നിറങ്ങൾ ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.

കോഡ് ശേഖരം