Sushi Design System - UI Kit

Zomato

Հավելվածի մասին

Sushi-ն Zomato-ի սեփական դիզայնի համակարգն է, որն օգնում է ստեղծել օգտատիրոջ ամուր միջերեսներ՝ հետևելով մաքուր և պարզ դիզայնի լեզվին: Մենք Zomato-ում սա հիմքից ենք կառուցել: Դա մեզ համար պարզապես դիզայնի համակարգ չէ, այլ ավելին, այն օգնում է մեզ նոր և կատարելագործված փորձ տրամադրել մեր օգտատերերին: Սուշին կարող է օգնել ձեզ ստեղծել անհատական ​​ինտերֆեյսներ՝ հետևելով ատոմային, մաքուր և պարզ դիզայնի լեզվին: Թեև Sushi-ն հիմնվում է իր սեփական դիզայնի լեզվի վրա, այն լիովին ընդունում և օգտագործում է Google-ի Նյութական դիզայնի բաղադրիչները ներքին շատ ոլորտներում:

Որպես դիզայնի համակարգ և բրենդի ուղեցույցների հղում, այն օգտագործվում և ներկայացված է Zomato-ի տարբեր թիմերի կողմից, ինչպիսիք են՝ Ապրանքի, Ճարտարագիտության, Մարքեթինգի և Բրենդինգի:

Ի՞նչ է դիզայնի համակարգը:
Դիզայնի համակարգը բազմակի օգտագործման բաղադրիչների հավաքածու է՝ առաջնորդվելով հստակ ստանդարտներով, որոնք կարող են հավաքվել միասին՝ ցանկացած քանակությամբ հավելվածներ ստեղծելու համար: Դիզայնի համակարգը ոչ միայն ակտիվների և բաղադրիչների հավաքածու է, որոնք դուք օգտագործում եք թվային արտադրանք ստեղծելու համար: Ըստ Intercom-ի արտադրանքի նախագծման տնօրեն Էմմեթ Քոնոլիի, «... Դիզայնի համակարգերի մեծ մասը իրականում պարզապես օրինակելի գրադարաններ են. UI Lego-ի կտորների մեծ տուփ, որը կարելի է հավաքել գրեթե անսահման ձևերով: Բոլոր կտորները կարող են հետևողական լինել, բայց դա չի նշանակում, որ հավաքված արդյունքները կլինեն: Ձեր արտադրանքը ավելին է, քան պարզապես բազմակի օգտագործման UI տարրերի կույտ: Այն ունի կառուցվածք և նշանակություն։ Դա ընդհանուր վեբ էջ չէ, այն հասկացությունների համակարգի մարմնացում է»:

Սուշիի դիզայնի համակարգ

Հիմնադրամներ
Հիմնադրամները թվային ապրանքանիշի ուղեցույցներ են, որոնք սահմանում են տպագրությունը, գունային գունապնակները, պատկերակները, տարածությունը, ստվերը և մեր դիզայնի համակարգի տեղեկատվական ճարտարապետությունը: Սուշին, հետևելով ատոմային նախագծման սկզբունքներին, կառուցված է ներքևից վեր՝ օգտագործելով բաղադրելի բաղադրիչներ՝ դասավորված որպես ատոմներ ➡️ մոլեկուլներ ➡️ օրգանիզմներ:

Ատոմային դիզայն
Ատոմային դիզայնը (ինչպես նկարագրել է Բրեդ Ֆրոստը) քարտեզագրվել է մեր համակարգին:

#Atoms
Ամենափոքր անբաժանելի միավորներն ատոմներն են։ Android-ում (կամ ցանկացած բջջային UI-ում) տեքստային պիտակները, կոճակները և պատկերի կրիչները ատոմներ են:

#Molecules
Տեսակետները, որոնք ներառում են մի քանի ատոմներ ձևավորելու համար, սակայն օգտագործողի համար դեռևս մեկ էության տեսք ու վարք ունեն, մոլեկուլներ են: Օրինակ, մուտքագրման դաշտերն ունեն մուտքագրման տուփ, սխալի դաշտ և մաքրման կոճակ, բայց միասին դա մեկ ամբողջություն է:

#օրգանիզմներ
Բարդ, բայց բազմակի օգտագործման բաղադրիչներ, որոնք համատեղ աշխատում են միասին: Կազմված է բազմաթիվ ատոմներից և մոլեկուլներից: Օրինակ՝ գնահատման գծերը, որոնք բաղկացած են պիտակներից, որոնցից յուրաքանչյուրն ունի համար և պատկերակ: Թեգերը փոխում են նաև գույնը, երբ ընտրվում են տարբեր վարկանիշներ: Յուրաքանչյուր պիտակ առանձին-առանձին օգտագործվում է նաև այլ վայրերում, բայց որպես գնահատման տող, այն բոլորը միասին աշխատում են նոր իմաստ ստեղծելու համար:

Տպագրություն
Տպագրությունը, ինչպես գիտեք, տառատեսակները դասավորելու արվեստն է՝ գրավոր լեզուն ընթեռնելի, ընթեռնելի և գրավիչ դարձնելու համար, երբ ցուցադրվում է: Տիպի դասավորությունը ներառում է տառատեսակների, կետերի չափերի, տողերի երկարության, տողերի տարածության և տառերի միջև եղած տարածության ընտրությունը և տառերի զույգերի միջև տարածության ճշգրտումը:

Մենք աջակցում ենք տառատեսակների հետևյալ տատանումները.

ExtraLight
Լույս
Կանոնավոր
Միջին
SemiBold
Համարձակ
ExtraBold

Դուք կարող եք օգտագործել ցանկացած տառատեսակ, որն ունի մինչև 8 տառատեսակի կշիռ և դրանք վերագրել այս անուններից: Մինչ մենք ունենք Metropolis, Okra և Roboto ցուցադրման համար, դուք կարող եք օգտագործել ցանկացած տառատեսակ, որը համապատասխանում է ձեր ապրանքանիշին:

Գույներ
Սուշին նաև ապահովում է նախապես սահմանված գույների հավաքածու իր ներկապնակում: Չափազանց եզակի դեպքերի համար ազատ զգացեք օգտագործել ձեր սեփական գույները, սակայն հակառակ դեպքում խորհուրդ ենք տալիս օգտագործել այս գունապնակից ձեր արտադրանքի բոլոր բաղադրիչների գույները:

Կոդի պահոց