Mashhur UI kitlar

Apple HIG, Ant Design, Bootstrap, Figma UI Kit, Material UI

9-sinfUX/UI dizayn5-hafta · 14-dars

Takrorlash

UI Kit va dizayn tizimi qanday bog'langan?

Dizayn tizimi = komponentlar + tokenlar + shablonlar + qoidalar + hujjatlar.

Nega har xil kitlar bor?

funksionallik platformaga moslik komponentlar soni moslashuvchanlik

iOS ilova, korporativ panel va oddiy sayt — har biriga o'z kiti mos.

5 ta mashhur kit

Apple HIG

Human Interface Guidelines

HIG nima?

Apple'ning dizayn qo'llanmasi: iOS, macOS, watchOS, tvOS va visionOS ilovalari uchun eng yaxshi amaliyotlar va tamoyillar.

Apple II uchun boshlangan

platforma

asosiy bo'lim

HIG'ning 6 bo'limi

Platforms

iOS, macOS, watchOS, tvOS, visionOS

Foundations

rang, shrift, layout, accessibility

Patterns

share, multitasking, search, feedback

Components

menyu, tugma, karta, forma

Inputs

touch, keyboard, gestures, eye gaze

Technologies

Apple Pay, iCloud, Maps, HomeKit

Mini-test

Rang, shrift va accessibility HIG'ning qaysi bo'limida?

Foundations — asoslar: rang, shrift, layout, kompozitsiya, kirish imkoniyati.

Ant Design va Bootstrap

Korporativ panel va responsiv veb

Ant Design va Bootstrap

Ant Design

React.js asosida. Korporativ veb-ilovalar: jadval, forma, pagination, datepicker.

Bootstrap

HTML, CSS, JS. Twitter dasturchilari yaratgan. Kuchi — responsiv dizayn.

Komponent guruhlari

Guruh	Ant Design	Bootstrap
Navigatsiya	menu, breadcrumb, tabs	navbar, breadcrumb, tabs, pagination
Forma	input, checkbox, radio, select, datepicker	input, textarea, select, validation
Vizual	button, icon, tooltip, avatar, badge, tag	button, badge, alert, card, modal
Maxsus	table, list, chart, progress, skeleton	container, row, col; carousel, dropdown

Pastga bosing: Bootstrap grid

Bootstrap grid

container → row → col: sahifa 12 ustunli to'rga bo'linadi va ekran kichrayganda ustunlar avtomatik qayta joylashadi.

Figma UI Kit va Material UI

Prototip va React komponentlar

Figma UI Kit

Navigatsiya va forma

menu, tabs, sidebars; input, checkbox, dropdown, slider

Interaktiv

hover, klik, drag & drop effektlari

Shablonlar

ekran tartiblari, wireframe, prototip sahifalari

Jamoa

yagona uslub va birgalikda ishlash

Material UI (MUI)

MUI nimaga asoslangan?

bosing

Google Material Design tamoyillari, React komponentlari.


npm install @mui/material
yarn add @mui/material

react va react-dom ham kerak.

Button props


<Button variant="text">Button</Button>
<Button variant="contained" size="large">Button</Button>
<Button variant="outlined" disabled>Button</Button>

variant: text · contained · outlined size: small · medium · large disabled

sx xususiyati

Oddiy tugma: <Button variant="contained">

sx xususiyati

sx={{ backgroundColor: 'purple', width: 200, color: 'white' }}

sx — qo'shimcha CSS. Ko'p ishlatsangiz kitning yagona uslubi buziladi.

Qaysi kit qachon?

iPhone / Mac ilova → HIG
Jadvalli admin-panel → Ant Design
Tez responsiv sayt → Bootstrap
Klikli prototip → Figma UI Kit
Material uslubidagi React ilova → Material UI

Mini-test

Bank xodimlari uchun jadvalli React admin-panel. Qaysi kit?

Ant Design — korporativ veb-ilovalar uchun: table, pagination, datepicker tayyor.

Figma Community'da kit

1. Community

Qidiruv: «Material 3», «iOS UI Kit».

2. Open in Figma

Nusxa Drafts'ga tushadi.

3. Nusxalash

Button va Input'ni Tahlil frame'iga.

4. Taqqoslash

radius, balandlik, rang, holatlar, shrift.

Amaliy topshiriqlar 30 daqiqa

OsonKitni toping: Apple II, Twitter, npm, korporativ React.

O'rta4 ta buyurtmaga kit tanlang va asoslang.

QiyinFigma Community: 2 kitning Button va Input'ini 5 mezon bo'yicha taqqoslang.

Dars xulosasi

HIG

Apple, 1977, 6 bo'lim.

Ant · Bootstrap

React korporativ · HTML/CSS/JS responsiv.

Figma · MUI

Prototip · Material Design React.

Keyingi dars: UI kit amaliyoti

«E-kutubxona» header va kategoriya paneli

5-hafta · 15-dars