ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: iOS. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΡ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: 20-30. ΠΠ°ΡΠ°Π±ΠΎΡΠΎΠΊ Π½Π΅Ρ, Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ Π½ΡΠ»Ρ.
ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: iOS, Android. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΡΠΈΠ½Π°Π½ΡΡ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: 10-20. ΠΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠΎΡΠ°Π±ΠΎΡΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠ±.ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΡ.ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ°. Π§ΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ: β’ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΡ
ΡΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΈΡΡΠ΅ΠΌΡ (ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°, ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΠΈ Ρ.Π΄.) β’ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² (properties) Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΡΡΠΎΠ±Ρ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΈΡΡΠ΅ΠΌΠ° ΠΈΠΌΠ΅Π»Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π²ΠΈΠ΄ ΠΈ Π½Π΅ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ΅Π½Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ β’ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ autolayout ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π½Π΅ΠΉΠΌΠΈΠ½Π³ ΡΠ»ΠΎΠ΅Π² (Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π½Π΅ΠΉΠΌΠΈΠ½Π³) β’ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
(ΠΠ ΡΡΠΈΠ»ΠΈ) Π΄Π»Ρ ΡΠ²Π΅ΡΠΎΠ², ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, ΠΎΡΡΡΠΏΠΎΠ² ΠΈ Ρ.Π΄. Π΄Π»Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠΊΠ΅Π½ΠΎΠ² β’ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠΊΠ΅Π½ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅ΠΌ (ΡΠ²Π΅ΡΠ»Π°Ρ ΠΈ ΡΠ΅ΠΌΠ½Π°Ρ).
ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Π²Π΅Π±. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΠΌΠ΅Π΄ΠΈΡΠΈΠ½Π°. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: 1-10. ΠΠ°ΡΠ°Π±ΠΎΡΠΎΠΊ Π½Π΅Ρ, Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ Π½ΡΠ»Ρ. ΠΠΎΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ: ΠΠΎΡΠΎΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅: ΠΠ΅Π± ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ Π΄ΡΡ
ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ Π½Π° 5 ΡΠΊΡΠ°Π½ΠΎΠ², ΡΠΈΠΏΠ° Π΄Π°ΡΠ±ΠΎΡΠ΄Π°.
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Π²Π΅Π±, iOS, Android. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΡΠΈΠ½Π°Π½ΡΡ, ΠΏΠΎΠΊΡΠΏΠΊΠΈ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: 30-40.
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Π²Π΅Π±, iOS, Android. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: Π‘ΠΎΡ ΡΠ΅ΡΡ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: ΠΠ½ΠΎΠΏΠΊΠΈ. ΠΡΡΡ ΡΠ΅ΡΠ΅ΡΠ΅Π½Ρ. ΠΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΈΠ»Π΅ Liquid Glass / soap bubble / polished glass. ΠΠ½Π΅ Π½ΡΠΆΠ½Ρ Π½Π΅ ΡΠΊΡΠ°Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Figma-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ 5 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²: 1. Primary CTA button Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 220 ? 60 Π’Π΅ΠΊΡΡ: βΠ‘ΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΡΡβ 2. Small primary button Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 140 ? 44 Π’Π΅ΠΊΡΡ: βΠΡΠΊΡΡΡΡβ 3. Active segmented tab Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 160 ? 52 Π’Π΅ΠΊΡΡ: βΠΠ°ΡΡΠΈβ 4. Active filter chip Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 80 ? 40 Π’Π΅ΠΊΡΡ: βΠΡΠ΅β 5. Inactive glass chip Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 140 ? 44 Π’Π΅ΠΊΡΡ: βΠ‘Π΅Π³ΠΎΠ΄Π½Ρβ Π‘ΡΠΈΠ»Ρ: * liquid glass; * ΡΡΡΠ΅ΠΊΡ ΠΌΡΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ·ΡΡΡ; * ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ Π²ΡΠΏΡΠΊΠ»Π°Ρ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½Π°Ρ Π»ΠΈΠ½Π·Π°; * ΠΌΡΠ³ΠΊΠΈΠΉ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Π»Π°ΠΉΠΌΠΎΠ²ΡΠΉ tint; * ΡΠ΅ΡΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ reflection ΡΠΏΡΠ°Π²Π°/ΡΠ½ΠΈΠ·Ρ; * ΡΡΠΊΠ°Ρ ΡΠΎΠ½ΠΊΠ°Ρ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½Π°Ρ ΠΊΡΠΎΠΌΠΊΠ°; * Π±Π΅Π»ΠΎ-ΡΠ΅ΡΠ΅Π±ΡΡΠ½ΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ glossy highlight; * Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΡΠΉ glare/ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅; * premium, Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ, Π±Π΅Π· ΠΊΠΈΡΠ»ΠΎΡΠ½ΠΎΡΡΠΈ. ΠΡΠΆΠ½Π° ΡΡΡΡΠΊΡΡΡΠ° ΡΠ»ΠΎΡΠ² Π² Figma, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠ³ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΡΡΠΎ Π² React/CSS: * base glass * lime tint * gray-blue reflection * top glossy highlight * diagonal glare * rim/stroke * text ΠΡΠ΅ ΡΠ»ΠΎΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΠΌΠΈ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎ Π½Π°Π·Π²Π°Π½Ρ. ΠΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· Figma Components Ρ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ: CTA / Small / Tab Active / Chip Active / Chip Inactive. Π€ΠΎΡΠΌΠ°Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°: * Figma-ΡΠ°ΠΉΠ»; * ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π½Π° ΡΡΠΌΠ½ΠΎΠΌ ΡΠΎΠ½Π΅; * ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠΎΠ½Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ; * Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ»ΠΎΡΠ² ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²: fill, stroke, opacity, blur, shadows.
ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Android, iOS, Π²Π΅Π±. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ + Π²Π΅Π±. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: ΠΠ½ΠΎΠ³ΠΎ. ΠΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠΎΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ: Figma.
ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ
Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ
Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ½Π°Ρ
ΠΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Π²Π΅Π±. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: ΠΏΠΎΠΊΡΠΏΠΊΠΈ, ΡΠ°ΠΊΡΠΈ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: 1-10. ΠΠ°ΡΠ°Π±ΠΎΡΠΎΠΊ Π½Π΅Ρ, Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ Π½ΡΠ»Ρ.