БрСдства для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйса: ΠšΠ»Π°ΡΡΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ срСдств Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ПИ — ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ ΠΈ инструмСнты для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

РСализация ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов Π² прилоТСниях β€” трудная Π·Π°Π΄Π°Ρ‡Π° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Часто каТСтся, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½Π° лишь идСя, Π° Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘ Π½Π΅ составит Ρ‚Ρ€ΡƒΠ΄Π°. Но Π΄Π°ΠΆΠ΅ самым Ρ‚Π΅Ρ…Π½ΠΈΡ‡Π½Ρ‹ΠΌ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ отсутствиС дизайнСрского ΠΎΠΏΡ‹Ρ‚Π°. Из-Π·Π° этого ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ…ΡƒΠΆΠ΅ β€” ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΏΠΎ части интСрфСйса.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ идСю для ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ сСрвиса Π² красивый UI-Π΄ΠΈΠ·Π°ΠΉΠ½ мобильного ΠΈΠ»ΠΈ Π²Π΅Π±-прилоТСния.

Π—Π°Π΄Π°Ρ‡Π° с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

ΠžΡ‚ΠΏΡ€Π°Π²Π½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° β€” это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π°Π΄ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Π½ΠΎ ΠΈ Π΅Ρ‘ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π²Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Главная Π·Π°Π΄Π°Ρ‡Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° β€” Ρ‡Ρ‘Ρ‚ΠΊΠΎ ΡΡ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ идСю ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ людям с подходящими Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ. Π’ΠΎΠ³Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ интСрфСйс Ρ‚ΠΎΡ‡Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Π­Ρ‚ΠΎ каТСтся простым, Π½ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² отсутствии ΠΎΠΏΡ‹Ρ‚Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρƒ программистов. Π§Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ нСцСлСсообразному использованию критичСски Π²Π°ΠΆΠ½Ρ‹Ρ… рСсурсов ΡƒΠΆΠ΅ Π½Π° Ρ€Π°Π½Π½Π΅ΠΉ стадии Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ Π²Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² самыми быстрыми ΠΈ эффСктивными способами.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ собствСнный Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Π‘Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠΉΡ‚Π΅ простой порядок дСйствий для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π° вашСго прилоТСния. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½Ρ‹Π΅ шаги:

  • созданиС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΎΠ²;
  • ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… дизайнСрских шаблонов ΠΈ стилСй;
  • созданиС каркасов;
  • созданиС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΎΠ²

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с вашим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Как ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΈΠΌ Ρ€Π°Π·Π΄Π΅Π»? МоТно Π»ΠΈ Π½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ?

Π’Π°ΠΆΠ½ΠΎ максимально всё ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ, ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΠ² бСспорядок ΠΈ ΡƒΠ΄Π°Π»ΠΈΠ² Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ шаги. Π­Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ этапС Π½Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ваш UI-Π΄ΠΈΠ·Π°ΠΉΠ½.

Для удобства ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ инструмСнтарии, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π±Π»ΠΎΠΊ-схСм Miro, Milanote ΠΈ Whimsical. МоТно Π»Π΅Π³ΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Ρ€Ρ‘Ρ… стандартных Ρ„ΠΈΠ³ΡƒΡ€:

  • ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ β€” для прСдставлСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° экранС;
  • Ρ€ΠΎΠΌΠ± β€” для прСдставлСния доступных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ;
  • стрСлка β€” для отобраТСния связСй ΠΌΠ΅ΠΆΠ΄Ρƒ экранами ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ.

Π—Π΄Π΅ΡΡŒ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° этапС ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π˜ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ распространённыС ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ΠΎΠ² ΠΈΠ· iOS, Android ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° Page Flows.

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ дизайнСрских шаблонов ΠΈ стилСй

ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ, поэтому всСгда Π΄Π΅Π»ΠΈΡ‚Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΠ΅ части.

Π ΡƒΡ‚ΠΈΠ½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΈ ΠΈΡ… повсСднСвныС инструмСнты ΠΌΠΎΠ³ΡƒΡ‚ привСсти ΠΊ Π±Π΅Π·Π΄ΡƒΠΌΠ½ΠΎΠΌΡƒ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ шаблонов, Π±Π΅Π· творчСского ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΈ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π”ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΈ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΡƒΠΉΡ‚Π΅ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ источником ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π±ΡƒΠ΄Π΅Ρ‚ UI Patterns. Π­Ρ‚ΠΎ прСкрасный рСсурс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ шаблонами проСктирования ΠΈ способами ΠΈΡ… примСнСния.

Если Π²Ρ‹ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈΡΡŒ с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²Π°ΠΌ понадобится Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ сайты Π²Ρ€ΠΎΠ΄Π΅ Behance ΠΈ Dribbble. Π’Π°ΠΌ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ являСтся ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Π° Π½Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ.

Π’ΠΎΡ‚ Π΅Ρ‰Ρ‘ нСсколько ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… рСсурсов:

  • UX Screenshots,
  • Laudable Apps,
  • Mobbin Design,
  • Pttrns,
  • Mobile Patterns.

Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ источники Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вдохновСния для Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½ΠΎΠ²Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ каркасов

На этом этапС ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ творчСству. ΠšΠ°Ρ€ΠΊΠ°ΡΡ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, поэтому ΠΈΡ… Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ слСдуСт ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ.

Π₯ΠΎΡ€ΠΎΡˆΠΎ, Ссли Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с инструмСнтом для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Он ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ для прилоТСния. Но Ссли для вас это Π² Π½ΠΎΠ²ΠΈΠ½ΠΊΡƒ, Π²Ρ‹, скорСС всСго, Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ классичСскому Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρƒ: Ρ€ΡƒΡ‡ΠΊΠ° ΠΈ Π±ΡƒΠΌΠ°Π³Π°. ОсвоСния Π½ΠΎΠ²Ρ‹Ρ… инструмСнтов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ вас, поэтому Π½Π΅ Π±ΠΎΠΉΡ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ простыС Π²Π΅Ρ‰ΠΈ Π²Ρ€ΠΎΠ΄Π΅ Ρ€ΡƒΡ‡ΠΊΠΈ ΠΈ Π±ΡƒΠΌΠ°Π³ΠΈ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° SneakPeekIt. Π’ Π½Ρ‘ΠΌ Π΅ΡΡ‚ΡŒ большоС количСство шаблонов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своих эскизах. Π­Ρ‚ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ бСсплатный инструмСнт для вдохновСния.

Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Balsamiq, Whimsical ΠΈ OmniGraffle. Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ сборки ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ со структурой вашСго прилоТСния.

Π’Π°Ρˆ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ UI ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ, объСдинив Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… шаблонов с этих сайтов. Π’Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈΡ… ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ прилоТСния.

Если Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π½Π΅ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ ΠΎΡ‚ создания каркасов. На этой стадии ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹ Π½ΡƒΠΆΠ½ΠΎ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠΎΠΊΠ° ΠΈΡ… Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² прилоТСния

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ иСрархия установлСна ΠΈ структура ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ экрана ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌΡƒ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Figma ΠΈΠ»ΠΈ Sketch, для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ своСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Figma β€” ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΉ инструмСнт для UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ каркасов Π½Π° этом этапС процСсса.

ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ эффСктивно Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ своё Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ внСшний Π²ΠΈΠ΄ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. ΠŸΡ€ΠΈ создании прилоТСния ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡ‚Π°Ρ‚ΡŒ истинным ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². НС Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡ‚Π΅ΡΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° это придётся ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π§Π΅ΠΌ большС ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Ρ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅.

Если Π²Ρ‹ Π½Π΅ Π² силах Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π²ΠΎ всём ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ рискуСтС ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ошибки, Π²Π°ΠΌ стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠΌΡƒ спСциалисту. Он ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π° всСх Π΅Π³ΠΎ этапах, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ вашим ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ΡΡŒ спСциалисту.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«How developers and tech founders can turn their ideas into UI designΒ»

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов | ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ систСмы. Π‘Π£Π‘Π”

Под влияниСм Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, обусловлСнных Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ эпох ΠΎΡ‚ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ПК ΠΊ Web ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ устройствам, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы. Π§Ρ‚ΠΎ происходит сСйчас Π² области Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ ΠΊΠ°ΠΊΠΎΠ²Ρ‹ пСрспСктивы ΠΈΡ… развития?

Всякий Ρ€Π°Π·, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€, Π²Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ Π΄Π΅Π»ΠΎ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом (User Interface, UI), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ каТСтся простым ΠΈ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ,Β Π½ΠΎ,Β Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ стал Ρ‚Π°ΠΊΠΈΠΌ, Π² индустрии Π±Ρ‹Π»ΠΎ Π²Π»ΠΎΠΆΠ΅Π½ΠΎ Π½Π΅ΠΌΠ°Π»ΠΎ Ρ‚Ρ€ΡƒΠ΄Π°. ОглянСмся Π½Π° 1990-Π΅ Π³ΠΎΠ΄Ρ‹, ΠΊΠΎΠ³Π΄Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ стали повсСмСстными, ΠΈ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅ΠΌ Ρ…Ρ€ΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡŽ развития Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ UI. Рассмотрим Ρ‚Π°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ Ρ€Π°Π·Π²ΠΈΠ²Π°Π»ΠΈΡΡŒ срСдства программирования UI ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ собой ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ сСгодня. Π’ Ρ‚Π°Π±Π».Β 1 ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ основных Π·Π°Π΄Π°Ρ‡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI, Π½Π° Π±Π°Π·Π΅ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… проводился Π°Π½Π°Π»ΠΈΠ· Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, распрСдСлСнных ΠΏΠΎ катСгориям. КаТдая ΠΈΠ· этих ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°Π΄Π°Ρ‡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ способами.

Π’Π°Π±Π»ΠΈΡ†Π° 1. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅Β Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов

Β 

Π€ΠΎΡ€ΠΌΡ‹ Π²Π²ΠΎΠ΄Π° с привязкой ΠΊ Π‘Π£Π‘Π”

ΠžΠ΄Π½Ρƒ ΠΈΠ· Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ срСдств Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ инструмСнтарии, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° Ρ„ΠΎΡ€ΠΌΡ‹ Π²Π²ΠΎΠ΄Π° Π΄Π°Π½Π½Ρ‹Ρ… с привязкой ΠΊ рСляционным Π‘Π£Π‘Π”. Π‘ΡƒΡ‚ΡŒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° состоит Π² создании UI для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΡƒΡ‚Π΅ΠΌ построСния Ρ„ΠΎΡ€ΠΌ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΡ… значСния ΠΏΠΎΠ»Π΅ΠΉ Π±Π°Π·Ρ‹ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… элСмСнтах управлСния: тСкстовых полях, списках, ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ…-Ρ„Π»Π°ΠΆΠΊΠ°Ρ…, Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… ΠΈ Ρ‚. ΠΏ. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ позволяСт Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΡΠΌΡƒΡŽ связь ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами управлСния ΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π² Π±Π°Π·Π΅. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ°Ρ…, ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… β€” ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π½ΠΎΠΌΠ΅Ρ€ записи Π² Ρ„ΠΎΡ€ΠΌΠ΅, Π΅Π΅ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ автоматичСски. Аналогично, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ мСняСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅, привязанном ΠΊ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ записи ΠΈΠ· Π±Π°Π·Ρ‹, это ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π² Π½Π΅ΠΉ сохраняСтся. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого, Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ β€” достаточно Π·Π°Π΄Π΅ΠΊΠ»Π°Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ привязку элСмСнта управлСния ΠΈΠ»ΠΈ всСй Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊ источнику Π΄Π°Π½Π½Ρ‹Ρ…. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ Π² инструмСнтах этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ β€” ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠΈΠ»ΡŒΠ½Ρ‹Ρ… сторон Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°. Π—Π°Π΄Π°Ρ‡ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ стилизации UI Π² Ρ‚Π°ΠΊΠΈΡ… срСдах Ρ€Π΅ΡˆΠ°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Ρ„ΠΎΡ€ΠΌ ΠΈ спСциализированных ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… API. Для управлСния ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ UI ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий (ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ собой ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° основном языкС программирования срСды Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ), Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для контроля Π²Π²ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ выраТСния (Π² Ρ‚ΠΎΠΌ числС рСгулярныС). Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹Π΅ прСдставитСли этой многочислСнной ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ инструмСнтариСв β€” Microsoft Access ΠΈ Oracle Forms.

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ шаблонов

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ построСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов Π½Π° Π±Π°Π·Π΅ шаблонов, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° языках Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π½Π°Ρ‡Π°Π»ΠΈ повсСмСстно ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ с сСрСдины 1990-Ρ…. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ прСимущСства шаблонов β€” Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΡˆΠΈΡ€ΠΎΡ‚Π° возмоТностСй создания динамичСских ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π²Π΅Π±-интСрфСйсов, особСнно с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ структуры ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ. Π’Π½Π°Ρ‡Π°Π»Π΅ Π² Ρ‚Π°ΠΊΠΈΡ… инструмСнтариях использовались ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈ структура UI задавались с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π° привязка ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ»Π°ΡΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² Π½Π° языкС высокого уровня (Java, C#, PHP, Python ΠΈ Ρ‚. Π΄.). ПослСдниС ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ с Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ; Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡƒΡ‚Π΅ΠΌ внСдрСния Ρ‚Π΅Π³ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π² Ρ†ΠΈΠΊΠ» Π½Π° Java ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒΡΡ ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ списков. ΠΠ΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ частой смСны синтаксиса Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Π΅Π±-страницы затрудняла Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ†ΠΈΡŽ ΠΊΠΎΠ΄Π° для программистов, поэтому ΠΎΠΊΠΎΠ»ΠΎ дСсяти Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄ начался ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с языков высокого уровня Π½Π° спСциализированныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Ρ‚Π΅Π³ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ языки Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, созданныС для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.

Π’Π΅Π³ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ стали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π° выраТСния β€” для доступа ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΈ Π²Ρ‹Π·ΠΎΠ²Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ…Ρ€Π°Π½ΠΈΠΌΡ‹Ρ… Π² сСрвСрных ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ…. Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚Π΅Π»ΡŒ этой Π³Ρ€ΡƒΠΏΠΏΡ‹ β€” тСхнология JavaServer Pages (JSP), Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ‚Π΅Π³ΠΎΠ² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ JSP Standard Tag Library ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΊΠ°ΠΊ: манипуляция с XML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ, Ρ†ΠΈΠΊΠ»Ρ‹, условия, опрос Π‘Π£Π‘Π” (привязка ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ) ΠΈ интСрнационализация (Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…). Π―Π·Ρ‹ΠΊ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ JSP β€” EL, слуТащий срСдством привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Π½ΠΎΡ‚Π°Ρ†ΠΈΡŽ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈ свойствами прилоТСния.

БущСствуСт Ρ†Π΅Π»Ρ‹ΠΉ ряд ΠΏΠΎΡ…ΠΎΠΆΠΈΡ… Π½Π° JSP инструмСнтариСв Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ: для ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ задания структуры (Π² Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹), для привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ языка Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ UI задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… срСдствами языка ECMAScript ΠΈ интСрфСйса программирования Document Object Model. Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… выполняСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ спСциализированных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Ρ‚Π΅Π³ΠΎΠ², для стилизации внСшнСго Π²ΠΈΠ΄Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ примСняСтся CSS (Cascading Style Sheets). ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ прСдставитСли этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ инструмСнтов: ASP, PHP, Struts, WebWork, Struts2, Spring MVC, Spyce ΠΈ Ruby on Rails.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ событийныС инструмСнты

Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ доля инструмСнтариСв для создания UI базируСтся Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ эти инструмСнтарии ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов UI, ΠΈ ΠΈΡ… Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ прСимущСствами ΡΠ²Π»ΡΡŽΡ‚ΡΡ простота составлСния ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ· простых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный, Π³ΠΈΠ±ΠΊΠΈΠΉ процСсс программирования повСдСния ΠΈ взаимодСйствия, основанный Π½Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°Ρ… событий. Π’ этих инструмСнтариях всС Π·Π°Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI Ρ€Π΅ΡˆΠ°ΡŽΡ‚ΡΡ с использованиСм спСциализированных ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹Ρ… API. К Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ относятся срСды: Visual Basic, MFC, AWT, Swing, SWT, Delphi, Google Web Toolkit, Cocoa Touch UIKit, Vaadin ΠΈ Π΄Ρ€. Бюда ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ отнСсти инструмСнтарий Nokia Qt, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰ΠΈΠΉ ряд ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… инструмСнтариях вся ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ взаимодСйствия ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами структуры UI рСализуСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий, Π° Π² Qt Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π½ΠΈΠΌ Π΅ΡΡ‚ΡŒ «сигналы» ΠΈ «слоты»: сигнал пСрСдаСтся ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ UI всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° происходит ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ событиС. Блот — это ΠΌΠ΅Ρ‚ΠΎΠ΄, Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ сигнал, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ с ΠΊΠ°ΠΊΠΈΠΌ ΡƒΠ³ΠΎΠ΄Π½ΠΎ количСством слотов, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, ΠΎΠ΄ΠΈΠ½ слот ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ сигналов. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‰ΠΈΠΉ сигнал, Β«Π½Π΅ Π·Π½Π°Π΅Ρ‚Β», ΠΊΠ°ΠΊΠΎΠΉ слот Π΅Π³ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса слабо связаны соСдинСниями «сигнал-слот». Π”Π°Π½Π½Ρ‹ΠΉ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ способствуСт использованию ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ° инкапсуляции ΠΈ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ UI.

Π“ΠΈΠ±Ρ€ΠΈΠ΄Ρ‹

Π“ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΎΠ²Ρ‹ Π² ΠΌΠΈΡ€Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния β€” наряду с шаблонами ΠΈ языками Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… инструмСнтариях примСняСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹ΠΉ API. Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚Π΅Π»ΡŒ β€” JavaServer Faces: Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Ρ‚Π΅Π³ΠΎΠ² слуТат для описания структуры ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ для форматирования Π΄Π°Π½Π½Ρ‹Ρ…; язык Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ β€” для привязки элСмСнтов ΠΈ событий ΠΊ сСрвСрным ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ ΠΈ ΠΊΠΎΠ΄Ρƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ; ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹ΠΉ API β€” для отобраТСния элСмСнтов, управлСния ΠΈΡ… состояниСм, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий ΠΈ контроля Π²Π²ΠΎΠ΄Π°. Π”Ρ€ΡƒΠ³ΠΈΠ΅ популярныС инструмСнтарии Π² этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ: ASP.NET MVC, Apache Wicket, Apache Tapestry, Apache Click ΠΈ ZK Framework.

Π‘Ρ€Π΅Π΄Π° Adobe Flex ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ Π±Π»ΠΈΠ·ΠΊΠ° ΠΊ тСхнологиям этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ для структурирования ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ выполняСтся Π½Π° языкС ActionScript. Подобно Qt, срСда Flex прСдоставляСт ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ‡, связанных с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ повСдСния ΠΈ привязкой ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ.

Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ инструмСнтарии

Π’Π°ΠΊΠΈΠ΅ инструмСнты β€” новСйшСС Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² области срСдств Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI. Для указания структуры ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ языки Π½Π° основС XML ΠΈ JSON (JavaScript Object Notation), Π° для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI примСняСтся прСимущСствСнно дСкларативная нотация. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ², Π² основном рассчитанных Π½Π° Π²Π΅Π±-интСрфСйсы, Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π΅Ρ‰Π΅ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ.

API ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Android β€” событийно-зависимый, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π½ΠΎ наряду с основным Π² ОБ Π΅ΡΡ‚ΡŒ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ API, Π±Π°Π·ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉΡΡ Π½Π° XML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π΄Π΅ΠΊΠ»Π°Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ структуру ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ элСмСнты ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… свойствами. Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ описаниС интСрфСйса нагляднСС ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΅Π³ΠΎ структуру ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅; позволяСт Π±Π΅Π· пСрСкомпиляции ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΡƒ; ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌ, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ экрана ΠΈ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΠΌ Π΅Π³ΠΎ сторон. ΠŸΡ€ΠΈ создании Π±ΠΎΠ»Π΅Π΅ динамичСских ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ структуру элСмСнтов ΠΌΠΎΠΆΠ½ΠΎ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ β€” с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹Ρ… API, Π½ΠΎ привязка ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ Π½Π΅ поддСрТиваСтся. БущСствуСт, ΠΏΡ€Π°Π²Π΄Π°, Android-Binding β€” стороннСС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΊ модСлям Π΄Π°Π½Π½Ρ‹Ρ….

Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ UI для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Windows ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Π±ΠΎΠ³Π°Ρ‚Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, основанных, соотвСтствСнно, Π½Π° тСхнологиях Windows Platform Foundation ΠΈ Microsoft Silverlight, ΠΌΠΎΠΆΠ½ΠΎ с использованиСм Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ XML-словаря β€” eXtensible Application Markup Language (XAML). Он позволяСт Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ структуру, ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ UI, Π° ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Android, Π² Π½Π΅ΠΌ поддСрТиваСтся привязка ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий.

Π’ Nokia Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ Qt Quick β€” кросс-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ½Ρ‹ΠΉ инструмСнтарий для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ…, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ встраиваСмых ОБ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ QML (Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ скриптовый язык Π½Π° основС синтаксиса JSON). ОписаниС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ структуру, Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ программируСтся Π½Π° ECMAScript. Π—Π΄Π΅ΡΡŒ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Qt, поддСрТиваСтся ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ «сигнал-слот». Qt Quick ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ привязки свойств элСмСнтов UI ΠΊ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ ΠΌΠ°ΡˆΠΈΠ½Ρ‹ состояний, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΡƒΡŽ графичСски ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ интСрфСйса.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” Enyo, кросс-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ½Ρ‹ΠΉ инструмСнтарий для создания UI Π½Π° ECMAScript, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ структура интСрфСйса задаСтся Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ, Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ рСгулируСтся ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ событий. Бобытия ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ трСмя способами: Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² UI, ΠΏΡƒΡ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΎΡ‚ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ° ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ Π±Π΅Π· прямой привязки, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π° счСт ΡˆΠΈΡ€ΠΎΠ²ΠΎΠΊΠΎΠ²Π΅Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ трансляции ΠΈ подписки Π½Π° Ρ‚Π°ΠΊΠΈΠ΅ сообщСния (Ρ‚ΠΎΠΆΠ΅ Π±Π΅Π· прямой привязки). Благодаря слабой связи элСмСнтов UI Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ возмоТности ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ использования ΠΈ инкапсуляции Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² интСрфСйса. По сути, основноС достоинство Enyo — это модСль инкапсуляции, благодаря ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ UI ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… самодостаточных ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² с Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌΠΈ интСрфСйсами. Данная модСль способствуСт Π°Π±ΡΡ‚Ρ€Π°Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ ΠΈ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всС Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹Π΅ ΡƒΡ€ΠΎΠ²Π½ΠΈ UI. Участники ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Enyo Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Π΄ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ.

Eclipse XML Window Toolkit β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ инструмСнтарий, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ описаниС UI. ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Π·Π°Π΄Π°Ρ‡Π° Π΅Π³ΠΎ создания состояла Π² объСдинСнии Π² Eclipse всСх инструмСнтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ SWT, JFace, Eclipse Forms ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ β€” всС ΠΈΡ… элСмСнты Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ соотвСтствия Π² XWT. Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ° UI Π² XWT Π·Π°Π΄Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ языка Π½Π° основС XML, Π° для привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ (доступа ΠΊ Java-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ прилоТСния) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ язык Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий программируСтся Π½Π° Java, Π° для стилизации элСмСнтов интСрфСйса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ CSS. ΠœΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ исполнСния ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ XWT Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π² Π²ΠΈΠ΄Π΅ Java-Π°ΠΏΠΏΠ»Π΅Ρ‚Π° ΠΈ элСмСнта ActiveX, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ практичСски Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π’ этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ сущСствуСт Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠΈΡ… инструмСнтов: Π² AmpleSDK, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² качСствС языка описания UI ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ XUL, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ECMAScript ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ для программирования динамичСского повСдСния, CSS β€” для стилизации. Π’ Dojo Toolkit интСрфСйс задаСтся Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ ΠΈ прСдусмотрСны ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠ΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ для доступа ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий Π½Π° основС ECMAScript с ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠΌ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ-подписки. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ, Ρ€Π°Π·Π²ΠΈΡ‚Ρ‹ΠΉ API для опроса Π΄Π°Π½Π½Ρ‹Ρ…, ΠΌΠΎΠ΄ΡƒΠ»ΡΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΈ мноТСствСнноС наслСдованиС классов.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π½Π° основС ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ

Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI основана Π½Π° модСлях ΠΈ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… языках. Π’ основном это ΠΌΠΎΠ΄Π΅Π»ΠΈ интСрфСйсов, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Π΄ΠΎΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ. Π’ ΠΎΠ±ΠΎΠΈΡ… случаях модСль Π½ΡƒΠΆΠ½Π° для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π·Π°Ρ€Π°Π½Π΅Π΅ Π»ΠΈΠ±ΠΎ интСрпрСтируСтся Π² ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ исполнСния. Π­Ρ‚ΠΎΡ‚ класс Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π΅Ρ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ абстракции, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹Π΅ систСматичСскиС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ проСктирования ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, Π° Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт инфраструктуру Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π·Π°Π΄Π°Ρ‡. Однако, ΠΏΠΎ мнСнию Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… исслСдоватСлСй [1], модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π½Π΅ Π΄Π°ΡŽΡ‚ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ способа ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ° Π½Π΅Ρ‚ согласия ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π½Π°Π±ΠΎΡ€ ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для описания UI. НС Ρ€Π΅ΡˆΠ΅Π½Π° Π·Π°Π΄Π°Ρ‡Π° привязки Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈ Π½Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ ΠΌΠΎΠ΄Π΅Π»ΠΈ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π°Π΄Π°Ρ‡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI.

Анализируя поколСния модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ UI начиная с 1990-Ρ…, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ ΠΊ Π²Ρ‹Π²ΠΎΠ΄Ρƒ [2], Ρ‡Ρ‚ΠΎ сСгодня имССтся общСпринятоС прСдставлСниС ΠΎΠ± уровнях абстракции ΠΈ Ρ‚ΠΈΠΏΠ°Ρ… ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ, подходящих для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ соврСмСнных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΄ΠΎ сих ΠΏΠΎΡ€ Π½Π΅Ρ‚ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ мнСния (стандартов) ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ (сСмантики), ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ. Π‘Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π·Π°Π΄Π°Ρ‡, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² ΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ: прСзСнтационная модСль Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡ΠΈ структурирования, планирования ΠΈ стилизации; модСль Π·Π°Π΄Π°Ρ‡ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° привязку ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ β€” для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ UI ΠΈ Π»ΠΎΠ³ΠΈΠΊΠΈ, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ прСдстоит Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ; диалоговая модСль ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ повСдСнчСскиС аспСкты. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π·Π°Π΄Π°Ρ‡ β€” Concurrent-TaskTrees (CTT), Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ совмСстно с языком MARIA, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ UI [3]. CTT Π² сочСтании с MARIA прСдставляСт собой ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ инструмСнтарий. Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ большоС сСмСйство срСдств модСлирования UI полагаСтся Ρ‚Π°ΠΊΠΆΠ΅ Π½Π° язык UML, ΠΌΠΎΠ΄Π΅Π»ΠΈ Β«ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ-связь» ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅. ΠŸΡ€ΠΎΡ„ΠΈΠ»ΠΈ UML ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² построСнии ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов бизнСс-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.Β Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ инструмСнтарии β€”Β Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, WebRatio, UMLi, Intellium Virtual Enterprise ΠΈ SOLoist.

ΠžΠ±ΠΎΠ±Ρ‰Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы

НСбольшоС, Π½ΠΎ Π·Π½Π°Ρ‡ΠΈΠΌΠΎΠ΅ подмноТСство Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ формирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ UI, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π΄Π°Π½Π½Ρ‹Ρ…, Π·Π°Π΄Π°Ρ‡ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ прилоТСния. Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ гСнСрируСтся исходя ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈΠ»ΠΈ полуавтоматичСски. МодСли Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ исполнСния Π±Π΅Π· использования Π² качСствС основы для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ интСрфСйса. Π’ любом случаС, благодаря высокому ΡƒΡ€ΠΎΠ²Π½ΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ построСния UI, Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ экономят врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈ ΡΠ½ΠΈΠΆΠ°ΡŽΡ‚ число ошибок, Π° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ интСрфСйсы ΠΈΠΌΠ΅ΡŽΡ‚ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ структуру. Однако ΠΎΠ±ΠΎΠ±Ρ‰Π΅Π½Π½Ρ‹Π΅ UI Π½Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒΡŽ, ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ нСпрСдсказуСмый процСсс Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ прямой связи с Π΄ΠΎΠΌΠ΅Π½Π½ΠΎΠΉ модСлью Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠ±ΠΎΠ±Ρ‰Π΅Π½Π½Ρ‹ΠΌΠΈ UI Π²ΠΏΠΎΠ»Π½Π΅ Ρ€Π΅Π°Π»ΡŒΠ½Π°. Π’ Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ ΠΎΠΊΠΎΠ»ΠΎ дСсятка ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²ΠΎ Π³Π»Π°Π²Π΅ с ΡˆΠΈΡ€ΠΎΠΊΠΎ примСняСмым Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΌ шаблоном Naked Objects. ΠΠ²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ UI ΠΌΠΎΠΆΠ½ΠΎ с успСхом ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π½Ρ‹Ρ… областях β€”Β Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов для ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ управлСния систСмами. Π”Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠ΅Π΅ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ этого класса Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ исслСдоватСли видят Π² ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊ модСлирования ΠΈ поискС Π½ΠΎΠ²Ρ‹Ρ… способов комбинирования ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ Π² цСлях ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ удобства сгСнСрированных UI.

Π’Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ ΠΈ слоТности

На  рисункС прСдставлСна хронология появлСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… инструмСнтариСв Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI, распрСдСлСниС ΠΈΡ… ΠΏΠΎ катСгориям ΠΈ основным областям примСнСния, Π° Π² Ρ‚Π°Π±Π». 2 ΡƒΠΊΠ°Π·Π°Π½Ρ‹ способы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ каТдая ΠΈΠ· Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI.

Рис. 1. Π₯ронология развития Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов; ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ ΠΈΠΌΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… API, привязанных ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ тСхнологиям, стандартам ΠΈ Π΄Π΅ΠΊΠ»Π°Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ

Β 

S β€” Π½Π° основС стандартов, C β€” Π½Π° основС спСциализированных Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, D β€” ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ большСй Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, I β€” ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ большСй Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΈΠΌΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹.
Π’Π°Π±Π»ΠΈΡ†Π° 2. РСшСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ²

Β 

Для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ с Ρ†Π΅Π»ΡŒΡŽ развития ΠΎΠ±Ρ‰Π΅ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ Π΄Π²Π΅ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹Π΅ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ. ПослС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π½Π° основС шаблонов появились инструмСнтарии с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‡Π°Ρ‰Π΅ всСго дополнялись шаблонами (Π² случаС Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ²) Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ замСняли ΠΈΡ… (GWT ΠΈ Vaadin). Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, это Π²ΠΏΠΎΠ»Π½Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ, учитывая ΠΎΠ±Ρ‰Π΅Π΅ прСвосходство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… языков Π½Π°Π΄ ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹ΠΌΠΈ (наслСдованиС, ΠΏΠΎΠ»ΠΈΠΌΠΎΡ€Ρ„ΠΈΠ·ΠΌ, инкапсуляция, парамСтризация, ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ использованиС ΠΈ Ρ‚. Π΄.), ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² Ρ€Π°Π·Π²ΠΈΡ‚Ρ‹Ρ… концСпциях ΠΈ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ°Ρ… для составлСния ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Ρ… структур UI, Π° Ρ‚Π°ΠΊΠΆΠ΅ Β«ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ успСха» ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… API Π² эпоху Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ПК.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΈΠΌΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ способами формирования UI сСгодня стали ΡˆΠΈΡ€Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ β€”Β Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Ρ‰Π΅ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ становятся HTML, XML, XPath, CSS, JSON ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ структуры UI, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, статична, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ с Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ структурирования, ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ привязки ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ. Но повСдСнчСскиС аспСкты UI ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ классичСской событийно-зависимой ΠΏΠ°Ρ€Π°Π΄ΠΈΠ³ΠΌΠ΅, хотя Π΅ΡΡ‚ΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ β€” ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ срСдства.

ЗамСтная тСндСнция Π² Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠΈ UI β€” ориСнтация Π½Π° стандартныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. XML ΠΈ ECMAScript сСгодня популярны ΠΊΠ°ΠΊ Π½ΠΈΠΊΠΎΠ³Π΄Π°, хотя спСциализированныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, особСнно ΠΈΠ· числа модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ…, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ Π±ΠΎΡ€ΡŽΡ‚ΡΡ Π·Π° ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ΅ пространство с большими тСхничСскими стандартами.

МоТно Π½Π°Π·Π²Π°Ρ‚ΡŒ нСсколько Π·Π°Π΄Π°Ρ‡, ΠΆΠ΄ΡƒΡ‰ΠΈΡ… своСго Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ поставщиками инструмСнтариСв Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… для задания ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Ρ… Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹Ρ… бизнСс-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Ρ€Π΅Π΄ΠΊΠΎ состоят ΠΈΠ· сотСн страниц ΠΈΠ»ΠΈ большС, ΠΈ Π² Ρ‚Π°ΠΊΠΈΡ… случаях Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ систСмной Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹. БущСствуСт новая ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊΠ° модСлирования, которая Ρ€Π΅ΡˆΠ°Π΅Ρ‚ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΏΡƒΡ‚Π΅ΠΌ ввСдСния ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ капсулы, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΉ ΡΡ‚Ρ€ΠΎΠ³ΡƒΡŽ ΠΈΠ½ΠΊΠ°ΠΏΡΡƒΠ»ΡΡ†ΠΈΡŽ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² UI ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅ΠΉ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρƒ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ уровнями Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. ΠšΠ°ΠΏΡΡƒΠ»Π° ΡƒΠΆΠ΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ структурой, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ рСкурсивно ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π° всСх Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΡ… уровнях ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² UI. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Enyo ΠΈ WebML.

Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ ΡˆΠΈΡ€ΠΎΡ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… срСдств β€” Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ прСимущСства ΠΎΠ±Ρ‰Π΅ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ ΡΡ‚Ρ€Π°Π΄Π°ΡŽΡ‚ ΠΎΡ‚ довольно Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ уровня абстракции ΠΈ нСдостаточной Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌ стоит ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ наслСдования сСмантики ΠΎΡ‚ Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Ρ… ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ UI, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС абстрактныС ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ слоТными, ΠΊΠ°ΠΊ ΠΈ сама рСализация UI. Π’ΠΌΠ΅ΡΡ‚ΠΎΒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°Π½ΠΈΠΉ ΠΈΠ· ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π½ΠΎΠΉ области UI ΠΈ сСмантики ΠΌΠΎΠ΄Π΅Π»ΠΈ прилоТСния, ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ трСбуСтся нСпосрСдствСнная Ρ€Π°Π±ΠΎΡ‚Π° с Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ: Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, мСню ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ событий.

ВСхнологиям Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI свойствСнна Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, связанная с трСбованиями Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ для ΠΌΠ½ΠΎΠ³ΠΈΡ… Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΌΠΈ для всСх соврСмСнных ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, модСльно-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ сообщСство воврСмя ΠΎΡ‚Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π»ΠΎ β€” Π² 2003 Π³ΠΎΠ΄Ρƒ Π±Ρ‹Π»Π° ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π° ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‰Π°Ρ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Π°Ρ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° для процСссов, ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΏΡ€ΠΈ построСнии ΠΌΠ½ΠΎΠ³ΠΎΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ½Ρ‹Ρ… UI.

***

ΠΡ‹Π½Π΅ΡˆΠ½Π΅Π΅ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Ρ… устройств ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ нСсколько Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ эпоху Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ПК ΠΊΠΎΠ½Ρ†Π° 90-Ρ… с Π΅Π΅ ΠΎΠ±ΠΈΠ»ΠΈΠ΅ΠΌ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Ρ… Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ поставщиками инструмСнтариСв для построСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. На сСгодня HTML5 Π΅Ρ‰Π΅ Π½Π΅ Ρ€Π΅ΡˆΠΈΠ» ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ тСхнологичСской разноголосицы Π²Π²ΠΈΠ΄Ρƒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ интСрфСйсов программирования. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС, ΠΊΠ°ΠΊ ΠΈ Π² случаС со ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΉ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ΠΈΠΈ, сСгодня для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI Π½ΡƒΠΆΠ½Ρ‹ понятныС ΠΈ простыС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΎΡ‚ ΠΈΡ… создатСлСй нСвСроятно ΠΌΠ½ΠΎΠ³ΠΎ усилий ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

Π›ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Π°

  1. P.P. Da Silva. User Interface Declarative Models and Development Environments: A Survey. Proc. Interactive Systems: Design, Specification, and Verification, Springer, 2000, Π . 207-226.Β 
  2. G. Meixner, F. Paterno, J. Vanderdonckt. Past, Present, and Future of Model-Based User Interface Development // i-com.Β Β 2011. vol. 10, N3, Π . 2-11.Β 
  3. G. Mori, F. Paterno, C. Santoro. CTTE: Support for Developing and Analyzing Task Models for Interactive Systems Design // IEEE Trans. Software Eng.Β 2002, vol. 28, N8, P.Β 797-813.Β 

Π–Π°Ρ€ΠΊΠΎ ΠœΠΈΡΠΉΠ»ΠΎΠ²ΠΈΡ‡ ([email protected]) β€” ΡΡ‚Π°Ρ€ΡˆΠΈΠΉ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€, Π”Ρ€Π°Π³Π°Π½ ΠœΠΈΠ»ΠΈΡ‡Π΅Π² ([email protected]) β€” Π΄ΠΎΡ†Π΅Π½Ρ‚, БСлградский унивСрситСт.

Zarko Mijailovic, Dragan Milicev, A Retrospective on User Interface Development Technology, IEEE Software, November/December 2013, IEEE Computer Society. All rights reserved. Reprinted with permission.

9 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π² 2022 Π³ΠΎΠ΄Ρƒ

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса (UI) фокусируСтся Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ восприятии Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя всС Ρ†Π²Π΅Ρ‚Π°, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° экранС, Π° Ρ‚Π°ΠΊΠΆΠ΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ интСрфСйсу, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ дСйствия смахивания.

Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для создания приятного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°. Π˜Ρ‚Π°ΠΊ, Ссли Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π²Π°ΠΌ понадобятся Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ инструмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² вашСм Π½Π°Π±ΠΎΡ€Π΅ инструмСнтов.

Π’ этом руководствС Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ 9 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π² 2022 Π³ΠΎΠ΄Ρƒ . ΠœΡ‹ описали ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ особСнности ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡƒΡ‡ΡˆΠ΅ всСго подходят для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄.

1. Sketch

Sketch β€” Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для рисования, каркасного модСлирования, прототипирования ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β€” практичСски всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ для воплощСния Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π² Тизнь.

Sketch β€” это мощная ΠΈ гибкая ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UX ΠΈ UI, созданная для совмСстного проСктирования. Он ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ считаСтся стандартным инструмСнтом Π² отрасли, идСально подходящим ΠΊΠ°ΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, Ρ‚Π°ΠΊ ΠΈ для ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ². Однако ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Sketch совмСстим Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с macOS.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятныС инструмСнты Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рСдактирования ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ логичСскиС ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ для Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ проСктирования
  • БСсконСчный холст Π΄ΠΈΠ·Π°ΠΉΠ½Π° с Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹ΠΌΠΈ областями, прСдустановками Π΄ΠΈΠ·Π°ΠΉΠ½Π°, настраиваСмыми сСтками ΠΈ простыми инструмСнтами измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΏΠΎΠ΄ любой Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана
  • Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΈ матСматичСскиС ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ для ускорСния процСсса проСктирования
  • Variable ΠΈ OpenType ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ контроля Π½Π°Π΄ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ вашСго интСрфСйса
  • ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹Π΅ инструмСнты для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи, ΠΎΠ±ΠΌΠ΅Π½Π° ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Sketch, воспользовавшись 30-Π΄Π½Π΅Π²Π½ΠΎΠΉ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй. ΠŸΠ»Π°Ρ‚Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½ стоит 9 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² мСсяц ΠΈΠ»ΠΈ 99 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² Π³ΠΎΠ΄, Ссли Π²Ρ‹ ΠΏΠ»Π°Ρ‚ΠΈΡ‚Π΅ авансом.

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Ρ‚Π°Ρ€ΠΈΡ„Π½Ρ‹Ρ… ΠΏΠ»Π°Π½Π°Ρ… Sketch здСсь.

2. Adobe XD

Adobe XD β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²ΡΠ΅ΠΎΠ±ΡŠΠ΅ΠΌΠ»ΡŽΡ‰ΠΈΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ инструмСнт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с функциями для совмСстного проСктирования ΠΈ создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

МногиС ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Adobe XD Π»ΡƒΡ‡ΡˆΠΈΠΌ инструмСнтом для Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ быстро, это ΠΌΠΎΡ‰Π½ΠΎ, ΠΈ Π²Ρ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ с Π½ΠΈΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ! Adobe XD ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Ρ‚ вас Ρ‡Π΅Ρ€Π΅Π· вСсь процСсс проСктирования UX ΠΈ UI β€” ΠΎΡ‚ Ρ€Π°Π½Π½ΠΈΡ… ΠΈΠ΄Π΅ΠΉ ΠΈ низкокачСствСнных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π΄ΠΎ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈ рСалистичных ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

Adobe XD являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΏΠ°ΠΊΠ΅Ρ‚Π° Adobe Creative Cloud ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ с Windows, Ρ‚Π°ΠΊ ΠΈ с Mac, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π΅ΠΌΡƒ нСбольшоС прСимущСство ΠΏΠ΅Ρ€Π΅Π΄ Sketch.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ инструмСнт для рСдактирования ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ пСрСтаскивания с Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ количСством ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Ρ… областСй ΠΈ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΌΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ элСмСнты Π² Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…
  • UI-ΠΊΠΈΡ‚Ρ‹ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹) для Apple Design, Google Material Design, Amazon Alexa ΠΈ Π΄Ρ€.
  • 3D-прСобразования, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈ пСрспСктиву ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ состояния для ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ проСктирования. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ, ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ внося измСнСния Π²ΠΎ всС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, избавляя вас ΠΎΡ‚ нСобходимости Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ измСнСния
  • ΠœΠΎΡ‰Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ возмоТности Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Lottie, ΠΌΠΈΠΊΡ€ΠΎΠ°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ эффСкты двиТСния, Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ якорныС ссылки
  • ГолосовоС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ голосовыС ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ воспроизвСдСниС Ρ€Π΅Ρ‡ΠΈ ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ голосовыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ
  • Ѐункция Design Specs для упрощСния процСсса ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°ΠΌΠΈ, Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΊΠΎΠ΄Π° CSS ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹ΠΌΠΈ рСсурсами с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ β€” ΠΈ всС это ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ссылкС

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Adobe XD с ΠΏΠ»Π°Π½ΠΎΠΌ XD Starter. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ XD, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт (9,99 Π΄ΠΎΠ»Π». БША Π² мСсяц) ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ Creative Cloud (Π±ΠΎΠ»Π΅Π΅ 20 ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Adobe XD) Π·Π° 52,99 Π΄ΠΎΠ»Π». БША Π² мСсяц.

3. UXPin

UXPin β€” популярный инструмСнт UX ΠΈ UI, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ. UXPin β€” это Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° комплСксная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°, способная ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ β€” Π½Π°Π²Ρ‹ΠΊΠΈ программирования Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ.

Если Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ со Sketch ΠΈΠ»ΠΈ Photoshop, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ довольно Π»Π΅Π³ΠΊΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² интСрфСйсС UXPin. Он Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ поставляСтся с тысячами Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊ использованию ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°; ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ оснащСн, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ систСмы проСктирования ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌΠΈ.

UXPin Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Mac ΠΈ Windows ΠΈΠ»ΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • ВстроСнныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для iOS, Google Material Design, Bootstrap ΠΈ User Flows, ΠΏΠΎΠ»Π½Ρ‹Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊ использованию ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов, Ρ†Π²Π΅Ρ‚ΠΎΠ², стилСй тСкста ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ Π² Π΄ΠΈΠ·Π°ΠΉΠ½ для создания высокоточных взаимодСйствий
  • ВстроСнныС возмоТности ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ своСй Ρ€Π°Π±ΠΎΡ‚Ρ‹
  • ВстроСнная ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° контрастности ΠΈ симулятор Π΄Π°Π»ΡŒΡ‚ΠΎΠ½ΠΈΠ·ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ максимально доступными ΠΈ ΠΈΠ½ΠΊΠ»ΡŽΠ·ΠΈΠ²Π½Ρ‹ΠΌΠΈ
  • УпрощСнная ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ с Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹ΠΌΠΈ спСцификациями Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ UXPin Π΄ΠΎ 2 ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². Для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π·Π° 19 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²./Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² мСсяц, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π·Π° 29 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² мСсяц ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π·Π° 69 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² мСсяц.

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ всС Ρ‚Π°Ρ€ΠΈΡ„Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

4. Marvel

Marvel ΠΎΠ±Π΅Ρ‰Π°Π΅Ρ‚ всС основныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для проСктирования ΠΈ создания Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°Ρ каркасноС ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ спСцификации Π΄ΠΈΠ·Π°ΠΉΠ½Π° для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ. А благодаря ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятной ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ это ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° UX/UI для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ….

Marvel β€” это Π²Π΅Π±-инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, поэтому Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ. Он Π±Ρ‹Π» создан для простого ΠΈ быстрого проСктирования с функциями создания каркасов, Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ прототипирования. Marvel Ρ‚Π°ΠΊΠΆΠ΅ интСгрируСтся со ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ популярными инструмСнтами Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ каркасов с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания для быстрого проСктирования Π½Π° Ρ€Π°Π½Π½ΠΈΡ… стадиях
  • ΠžΠ±ΡˆΠΈΡ€Π½Π°Ρ коллСкция Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… рСсурсов, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши ΠΈΠ΄Π΅ΠΈ
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° статичСских Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Sketch)
  • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ, взаимодСйствиями ΠΈ слоями. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Marvel для прототипирования (ΠΈ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтах прототипирования) Π² этом руководствС
  • .

  • ВстроСнная функция ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ тСстирования для получСния ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ² ΠΎ Π²Π°ΡˆΠΈΡ… идСях ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° для ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ³ΠΎ прСвращСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π² ΠΊΠΎΠ΄, спСцификации ΠΈ Π°ΠΊΡ‚ΠΈΠ²Ρ‹ для использования Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ для Jira, Maze, Confluence, Lookback ΠΈ Π΄Ρ€.

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Marvel для создания 1 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Для Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ количСства ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ рассмотритС ΠΏΠ»Π°Π½ Pro Π·Π° 9 Π΅Π²Ρ€ΠΎ Π² мСсяц (1 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ) ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ Team Π·Π° 27 Π΅Π²Ρ€ΠΎ Π² мСсяц (3+ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ).

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Ρ‚Π°Ρ€ΠΈΡ„Π½Ρ‹Ρ… ΠΏΠ»Π°Π½Π°Ρ… Marvel здСсь.

5. Π€ΠΈΠ³ΠΌΠ°

Π’Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ слоТно Π½Π°ΠΉΡ‚ΠΈ список инструмСнтов UX/UI, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½Π΅ упоминаСтся Figma, ΠΈ Π½Π° Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ вСскиС ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹. Figma β€” это Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΉ инструмСнт для проСктирования интСрфСйсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обСспСчиваСт быстроС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ бСспрСпятствСнный совмСстный Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс.

Как ΠΈ Sketch ΠΈ Adobe XD, Figma β€” Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Figma идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Ссли Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт, ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ всС, ΠΎΡ‚ ΠΈΠ΄Π΅ΠΈ Π΄ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ прототипирования, с Π²ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным интСрфСйсом.

И, Ссли Π²Ρ‹ всС ΠΆΠ΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ Figma, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΅Ρ‰Π΅ ΠΈ FigJam β€” ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ доску Figma для совмСстного творчСства, ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠ³ΠΎ ΡˆΡ‚ΡƒΡ€ΠΌΠ° ΠΈ сСминаров.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΏΠ΅Ρ€ΠΎ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π² любом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… сСтСй
  • Auto Layout для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • Π“ΠΈΠ±ΠΊΠΈΠ΅ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΎ всСх ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса
  • ДоступныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ рСсурсами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ Π² свои Ρ„Π°ΠΉΠ»Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π° для CSS, iOS ΠΈ Android, ΠΎΠ±Π»Π΅Π³Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ
  • ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ для Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ вашСй ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹
  • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ прототипирования, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, динамичСскиС налоТСния ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ GIF-Ρ„Π°ΠΉΠ»Ρ‹
  • ВстроСнная функция коммСнтирования для совмСстного процСсса проСктирования

Π¦Π΅Π½Π°:

Figma ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ бСсплатный ΠΏΠ»Π°Π½ с 3 Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Figma, 3 Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ FigJam ΠΈ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ количСством соавторов. Для Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ количСства Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ»Π°Π½ Professional ΠΏΠΎ Ρ†Π΅Π½Π΅ 12 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² мСсяц ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ Organization ΠΏΠΎ Ρ†Π΅Π½Π΅ 45 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² мСсяц.

ВсС Ρ‚Π°Ρ€ΠΈΡ„Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Figma ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ здСсь.

6. InVision Studio

InVision Studio ΠΏΡ€Π΅Ρ‚Π΅Π½Π΄ΡƒΠ΅Ρ‚ Π½Π° Π·Π²Π°Π½ΠΈΠ΅ самого ΠΌΠΎΡ‰Π½ΠΎΠ³ΠΎ инструмСнта для создания экранов Π² ΠΌΠΈΡ€Π΅, прСдоставляя всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для идСального рисования, создания каркасов, создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π§Π°ΡΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚Π° InVision для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ инструмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Studio поставляСтся с ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌ инструмСнтом рисования, бСсконСчным холстом ΠΈ мноТСством Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ быстрого прототипирования ΠΈ встроСнных Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.

БовмСстим ΠΊΠ°ΠΊ с MacOS, Ρ‚Π°ΠΊ ΠΈ с Windows, это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных инструмСнтов UX/UI для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рисования для молниСносного Π΄ΠΈΠ·Π°ΠΉΠ½Π° экрана
  • Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ быстро ΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ любой Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана
  • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ быстрого прототипирования с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ взаимодСйствиСм, Π·Π΅Ρ€ΠΊΠ°Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹ΠΌ воспроизвСдСниСм
  • ВстроСнныС возмоТности Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π² Ρ‚ΠΎΠΌ числС смарт-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡˆΠΊΠ°Π»Ρ‹ ΠΈ автоматичСскоС связываниС слоСв
  • БовмСстно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с глобальной синхронизациСй ΠΈ обновлСниями Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для обСспСчСния согласованности ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Inspect для создания спСцификаций с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ InVision Studio с 1 ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΈ 3 ΠΏΠ»Π°Ρ‚Π°ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ большС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΏΠ»Π°Π½ InVision Starter Π·Π° 13 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц (3 ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΈ 3 ΠΏΠ»Π°Ρ‚Ρ‹) ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ Professional Π·Π° 22 Π΄ΠΎΠ»Π»Π°Ρ€Π° Π² мСсяц (Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ ΠΏΠ»Π°Ρ‚).

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Ρ‚Π°Ρ€ΠΈΡ„Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ InVision ΠΌΠΎΠΆΠ½ΠΎ здСсь.

7. Zeplin

Zeplin β€” это ΠΎΠ±Π»Π°Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ устраняСт Ρ€Π°Π·Ρ€Ρ‹Π² ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ UX/UI ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ интСрфСйсов. Он прСдоставляСт ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ пространство для ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ создания спСцификаций, рСсурсов ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° для бСспрСпятствСнной ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ UX ΠΈ UI Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² тСсном сотрудничСствС с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ β€” людьми, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π² настоящиС, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-сайты ΠΈ прилоТСния. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ тСхничСскиС характСристики, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΈΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΈΡ… сСбС прСдставляСтС.

Zeplin позаботится ΠΎΠ±ΠΎ всСм этом процСссС: Π²Ρ‹ просто ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅Ρ‚Π΅ свои Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅, для ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π΅Π±, iOS ΠΈΠ»ΠΈ Android), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ рСсурсы.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • ΠŸΠΎΡ‚ΠΎΠΊΠΈ для быстрого ΠΈ простого отобраТСния ΠΏΡƒΡ‚ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ докумСнтирования Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²
  • Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ руководства ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ для систСматизации ΠΈ обновлСния Ρ†Π²Π΅Ρ‚ΠΎΠ², стилСй тСкста ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² вашСй систСмы Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌ мСстС
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Figma, Adobe XD, Sketch, Photoshop, Slack ΠΈ Π΄Ρ€.
  • Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для HTML, CSS, Swift, XML, React Native ΠΈ Π΄Ρ€.

Π¦Π΅Π½Π°:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ 1 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с бСсплатным ΠΏΠ»Π°Π½ΠΎΠΌ Zeplin. Для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π΄ΠΎ 12 рассмотритС ΠΏΠ»Π°Π½ Team ΠΏΠΎ Ρ†Π΅Π½Π΅ 6 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ мСсто Π² мСсяц. Для Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Π°ΠΌ понадобится ΠΏΠ»Π°Π½ Β«ΠžΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡΒ» ΠΏΠΎ Ρ†Π΅Π½Π΅ 12 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ мСсто Π² мСсяц.

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ всю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ†Π΅Π½Π°Ρ… Π½Π° Zeplin.

8. Бтудия ΠžΡ€ΠΈΠ³Π°ΠΌΠΈΒ 

Бтудия ΠžΡ€ΠΈΠ³Π°ΠΌΠΈΒ β€“ это бСсплатный инструмСнт для Π΄ΠΈΠ·Π°ΠΉΠ½Π°, созданный Facebook. Π­Ρ‚ΠΎ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ инструмСнт прототипирования, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ интСрфСйсы ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ.

ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ созданная для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Facebook, Origami Studio Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ доступна бСсплатно для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ macOS. Π­Ρ‚ΠΎ слоТный инструмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ ΠΊΡ€ΠΈΠ²ΠΎΠΉ обучСния, поэтому ΠΌΡ‹ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΅Π³ΠΎ Π² качСствС вашСго ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ инструмСнта Π΄ΠΈΠ·Π°ΠΉΠ½Π° UX/UI. Но для ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ рСалистичныС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, это стоит вашСго внимания.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

Π’ Origami Studio Π΅ΡΡ‚ΡŒ 6 основных ΠΏΠ°Π½Π΅Π»Π΅ΠΉ:

  • Π₯олст с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ рисуСтС ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ слои Ρ„ΠΈΠ³ΡƒΡ€, тСкст ΠΈ изобраТСния, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈΠ· Sketch ΠΈΠ»ΠΈ Figma 9.0025
  • Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΏΠ°Ρ‚Ρ‡Π΅ΠΉ: Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ взаимодСйствиС ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² свой ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΠΊΠΎΠ², Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… Β«ΠΏΠ°Ρ‚Ρ‡Π°ΠΌΠΈΒ»
  • Бписок слоСв β€” список слоСв Π² вашСм ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅. На этой ΠΏΠ°Π½Π΅Π»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ слои ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ взаимодСйствия ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ слоям
  • Π˜Π½ΡΠΏΠ΅ΠΊΡ‚ΠΎΡ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ слой ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ свойства
  • ПанСль просмотра, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ свой ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ
  • Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° исправлСний, содСрТащая список всСх доступных исправлСний ΠΈ ΠΈΡ… описания

Π¦Π΅Π½Π°:

Origami Studio ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ бСсплатно.

9. Uizard

Uizard β€” это ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹ΠΌΠΈ знаниями Π² области Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π­Ρ‚ΠΎ комплСксный инструмСнт UX ΠΈ UI, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΠΉ Π² сСбя созданиС ΠΈΠ΄Π΅ΠΉ, созданиС каркасов с Π½ΠΈΠ·ΠΊΠΎΠΉ Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ, быстроС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Uizard отличаСтся Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΊΡ€ΠΈΠ²ΠΎΠΉ обучСния: согласно ΠΈΡ… Π²Π΅Π±-сайту, Ссли Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Google Slides, Keynote ΠΈΠ»ΠΈ Powerpoint, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Uizard!

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ характСристики:

  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания для быстрого мобильного ΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • ΠšΠ°Ρ€ΠΊΠ°ΡΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с Π½ΠΈΠ·ΠΊΠΎΠΉ Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ β€” идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ шаг Π½Π°Π·Π°Π΄ ΠΈ ΡƒΡ‡Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ вашСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΊΠ°ΠΊ нарисованных ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Ρ… каркасов, Ρ‚Π°ΠΊ ΠΈ каркасов, созданных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтов. Uizard ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ ваши ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ каркасы Π² настраиваСмыС Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ экраны

Π¦Π΅Π½Π°:

Π‘ бСсплатным ΠΏΠ»Π°Π½ΠΎΠΌ Uizard Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ 3 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π΄ΠΎ 10 Ρ‚Π΅ΠΌ с Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ количСством ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ большС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΏΠ»Π°Π½ Pro Π·Π° 12Β Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Π°Π²Ρ‚ΠΎΡ€Π° Π² мСсяц (прСдоставляСт доступ ΠΊΠΎ всСм шаблонам ΠΈ Π΄ΠΎ 100Β ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²) ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ Enterprise Π·Π° 39Β Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° Π°Π²Ρ‚ΠΎΡ€Π° Π² мСсяц (Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ доступ ΠΊΠΎ всСм функциям Uizard).

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ†Π΅Π½ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

КакиС Π΅Ρ‰Π΅ инструмСнты Π½ΡƒΠΆΠ½Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π² Π½Π°Π±ΠΎΡ€Π΅ инструмСнтов?

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” это лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· аспСктов процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Π₯отя ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· пСрСчислСнных здСсь инструмСнтов проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса слуТат сквозными ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ проСктирования, сущСствуСт Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС инструмСнтов, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ ΠΈ этапов Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса проСктирования.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ инструмСнтам, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ руководствами:

  • Π’Π°ΡˆΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ΅ руководство ΠΏΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΌ инструмСнтам Π΄ΠΈΠ·Π°ΠΉΠ½Π° UX
  • 9 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов исслСдования UX
  • 10 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для создания каркасов (ΠΈΡ… ΠΏΠ»ΡŽΡΡ‹ ΠΈ минусы)

И, Ссли Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² процСссС создания своСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° UX, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с этим руководством ΠΏΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΌ создатСлям ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π²Π΅Π±-сайтов.

14 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для создания Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰Π΅Π³ΠΎΡΡ интСрфСйса

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π²Π΅Π±-сайты ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ другоС…

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π²Π΅Π±-сайты, ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΊΠ½ΠΈΠ³ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ другоС…

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса (UI) Π±Ρ‹Π» ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² любого Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° с ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° появлСния Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. ΠžΡ‚ простого взаимодСйствия с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ мСню Π΄ΠΎ создания слоТных Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ с использованиСм спСциализированных инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса стал ΠΌΠ½ΠΎΠ³ΠΎΠ³Ρ€Π°Π½Π½Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ, состоящим ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… шагов Π½Π° ΠΏΡƒΡ‚ΠΈ ΠΎΡ‚ эскиза Π΄ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ.

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ ΠΌΠΈΡ€ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ инструмСнтов для Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Благодаря ΠΌΠΎΡ‰Π½Ρ‹ΠΌ функциям совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ эти инструмСнты ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса быстрСС ΠΈ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΎΡ‚ OrangeCrush

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ Π»ΡƒΡ‡ΡˆΠΈΠΌ инструмСнтам Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π΄Π°Π²Π°ΠΉΡ‚Π΅ опрСдСлимся с основами ΠΈ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΠΌ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ вопросы.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса?

β€”

По ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” это Β«Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ процСссов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для создания интСрфСйсов Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ обСспСчСнии ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… устройствах, удСляя особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π½Π΅ΡˆΠ½Π΅ΠΌΡƒ Π²ΠΈΠ΄Ρƒ ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΡŽΒ».

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя большС, Ρ‡Π΅ΠΌ графичСскиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы, ΠΈ Π² настоящСС врСмя Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя интСрфСйсы с голосовым ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ТСсты ΠΈ Π΄Π°ΠΆΠ΅ взаимодСйствиС с AR ΠΈ VR. Из-Π·Π° всСго этого ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ экрана, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ практичСски всС Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ статичСскими ΠΈΠ»ΠΈ динамичСскими.

Основная Ρ†Π΅Π»ΡŒ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Π΅Π΄ΠΈΠ½Ρ‹ΠΌ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ микровзаимодСйствия. НСдостаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ сайт выглядСли Ρ…ΠΎΡ€ΠΎΡˆΠΎ; элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС, двигаясь ΠΊ Ρ†Π΅Π»Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½ΠΎΠΉ ΠΈ Π΅Π΄ΠΈΠ½ΠΎΠΉ Ρ†Π΅Π»ΠΈ. ΠŸΡ€ΠΎΡ‰Π΅ говоря, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ прилоТСния ΠΈΠ»ΠΈ сайта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса прилоТСния ΠΎΡ‚ ozonestyle.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ (UX), Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса являСтся чисто Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π½Π΅ распространяСтся Π½Π° ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ физичСскиС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΌΠΈΡ€Π΅, управляСмом Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ΠΎΠΌ. ВсС, Ρ‡Ρ‚ΠΎ связано с физичСскими ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ, взаимодСйствиями ΠΈΠ»ΠΈ внСшним Π²ΠΈΠ΄ΠΎΠΌ, ΠΏΠΎΠ΄ΠΏΠ°Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ΄ UX-Π΄ΠΈΠ·Π°ΠΉΠ½.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ физичСскиС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ связаны с Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ ΠΌΠΈΡ€ΠΎΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, экраны Π² Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»Π΅, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹ Π² Ρ‚ΠΎΡ€Π³ΠΎΠ²ΠΎΠΌ Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ смартфон), Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса часто дополняСт Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΎΠ±Π΅ Ρ†Π΅Π»ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ физичСский ΠΈΠ»ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ Π±ΠΎΠ»Π΅Π΅ простым ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным Π² использовании.

Π—Π°Ρ‡Π΅ΠΌ Π²Π°ΠΌ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса?

β€”

Π’Ρ‹Π±ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, повлияСт Π½Π° восприятиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ вашСго сайта ΠΈΠ»ΠΈ прилоТСния. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π»ΠΈΠ±ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚, Π»ΠΈΠ±ΠΎ сломаСт ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ повлияСт Π½Π° Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²ΠΎ врСмя ΠΈΡ… посСщСния сайта ΠΈΠ»ΠΈ прилоТСния.

Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ многочислСнныС психологичСскиС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Ρ‹ ΠΈ сообраТСния для создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ цСлям вашСго сайта ΠΈΠ»ΠΈ прилоТСния. Π­Ρ‚ΠΈ психологичСскиС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, ΠΏΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡŽ Ρ†Π²Π΅Ρ‚Π°, ΠΏΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Π½Π°ΡƒΠΊΡƒ ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ.

Π”Π°ΠΆΠ΅ Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° психологичСских аспСктов ΠΏΠ»ΠΎΡ…ΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π·Π°ΠΏΡƒΡ‚Π°Π½Π½ΠΎΠ΅ взаимодСйствиС заставят Π²Π°ΡˆΠΈΡ… посСтитСлСй ΠΊΡ€ΠΈΡ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‡ΡŒ. По этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π² Π²Π°ΡˆΠΈΡ… интСрСсах ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»Π΅Π½, ΡƒΠ΄ΠΎΠ±Π΅Π½ ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ² для Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ сайту ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. Π”Π°ΠΆΠ΅ ΠΏΡ€ΠΈ создании Π²Π΅Π±-сайта с нуля Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Ρ€Π°Π½Π΅Π΅ ΡΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΈΠ»ΠΈ внСсти измСнСния ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ.

И ΠΊΠΎΠ³Π΄Π° это врСмя ΠΏΡ€ΠΈΠ΄Π΅Ρ‚, Π²ΠΎΡ‚ 14 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ интСрфСйс.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ инструмСнты для Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

β€”

  • Π‘ΠΊΠ΅Ρ‚Ρ‡ΠΈ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠΈ
    • ИнвиТн
    • ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ
    • ΠžΠΌΠ½ΠΈΠ“Ρ€Π°Ρ„Ρ„Π» ΠŸΡ€ΠΎ
  • ΠšΠ°Ρ€ΠΊΠ°Ρ
    • Π‘Π°Π»ΡŒΠ·Π°ΠΌΠΈΠΊ
    • ДТастинмайнд
    • UXPin
  • Π”ΠΈΠ·Π°ΠΉΠ½ интСрфСйса ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
    • Π€ΠΈΠ³ΠΌΠ°
    • Эскиз
    • Adobe XD
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ назначСния
    • Π‘Π±ΠΎΡ€Π½ΠΈΠΊ рассказов – ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмами
    • GitHub β€” вСрсия
    • Π›Π°Π±ΠΈΡ€ΠΈΠ½Ρ‚ β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ тСстированиС
    • Zeplin β€” ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ

Наброски ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠΈ

β€”

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ этапом проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса являСтся набросок элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта ΠΈΠ»ΠΈ прилоТСния ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ². Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ ΠΈ Π±ΡƒΠΌΠ°Π³Ρƒ для этого шага, Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ инструмСнты ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ доску с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ эффСктом совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„Π°Π·Ρƒ создания ΠΈΠ΄Π΅ΠΉ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ.

Помимо Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹Ρ… инструмСнтов, Π½Π° этом этапС Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ инструмСнты графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°, тСкстовыС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈ Π΄Π°ΠΆΠ΅ Google Π’Π°Π±Π»ΠΈΡ†Ρ‹. Но использованиС инструмСнта, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ для создания эскизов ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ процСсса, экономит вашС врСмя, Π΄Π΅Π»Π°Π΅Ρ‚ процСсс Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½Ρ‹ΠΌ ΠΈ способствуСт созданию ΠΏΡ€ΠΎΡ‡Π½ΠΎΠΉ основы. Π’ качСствС бонуса ΠΌΠ½ΠΎΠ³ΠΈΠ΅ инструмСнты ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… этапах процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π»ΡƒΡ‡ΡˆΠΈΠ΅ инструмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для создания эскизов ΠΈ ΡŽΠ·Π΅Ρ€Ρ„Π»ΠΎΡƒ.

InVision Freehand

InVision Freehand Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ эскизов ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· InVision.

InVision Freehand β€” это эквивалСнт Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ Π±Π΅Π»ΠΎΠΉ доски с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌΠΈ элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Freehand являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π½Π°Π±ΠΎΡ€Π° инструмСнтов InVision, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠΎΠ΄Π° ΠΈ управлСния систСмой проСктирования. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΈ наброски β€” это Ρ‚ΠΎ, Π³Π΄Π΅ инструмСнт InVision Freehand сияСт большС всСго.

Π‘ Freehand Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΌΠΎΠ·Π³ΠΎΠ²Ρ‹Π΅ ΡˆΡ‚ΡƒΡ€ΠΌΡ‹ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ вмСстС со своСй ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ элСмСнты ΠΈ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΠΈ эффСктивно донСсти ΠΈΠ΄Π΅ΠΈ. Freehand Ρ‚Π°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ интСгрируСтся с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ извСстными инструмСнтами для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Slack, Microsoft Teams, Sketch ΠΈ Photoshop.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : совмСстноС рисованиС ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : доступСн бСсплатный ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ $7.95/мСсяц

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ

ΠŸΡ€ΠΎΡ„ΠΈ :

  • БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ с ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ
  • БСсплатный ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π½
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с инструмСнтами для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ проСктирования

ΠœΠΈΠ½ΡƒΡΡ‹ :

  • НСт Ρ€ΠΎΠ΄Π½ΠΎΠ³ΠΎ прилоТСния
  • ΠœΠΎΠΆΠ΅Ρ‚ быстро ΡΡ‚Π°Ρ‚ΡŒ Π½Π΅ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ

ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ

ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс для рисования ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Whimsical.

Whimsical β€” это инструмСнт для проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для создания спСцификаций ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, ΠΈΠ΄Π΅ΠΉ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ². Он ΠΈΠΌΠ΅Π΅Ρ‚ простыС ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ понятный интСрфСйс, идСально подходящий для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² самом Π½Π°Ρ‡Π°Π»Π΅ процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π΅Π½ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ², Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ваши ΠΊΠΎΠ»Π»Π΅Π³ΠΈ, Π½Π΅ связанныС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π²ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒΡΡ.0003

Π₯отя Π² Whimsical ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ инструмСнты для письма ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ, ΠΎΠ½ компСнсируСт это, позволяя ΠΏΠ»Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ элСмСнты Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, Ρ‡Ρ‚ΠΎ ускоряСт процСсс ΠΈ создаСт ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡƒΡŽ структуру. НС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ каркасы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого инструмСнта Π² качСствС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ шага вашСго процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : элСмСнты Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : доступСн бСсплатный ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 20 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»Ρ‹ :

  • БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
  • ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ

ΠœΠΈΠ½ΡƒΡΡ‹ :

  • Π”ΠΎΡ€ΠΎΠ³ΠΎ обходится с большой ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ
  • НСт элСмСнтов ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ

OmniGraffle Pro

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса OmniGraffle Pro. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· OmniGraffle.

OmniGraffle Pro β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· инструмСнтов проСктирования ΠΏΠΎΠ΄ Ρ‚ΠΎΡ€Π³ΠΎΠ²ΠΎΠΉ ΠΌΠ°Ρ€ΠΊΠΎΠΉ Omni. Он ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для создания простых для понимания Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² ΠΈ создания эскизов с использованиСм Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Π­Ρ‚ΠΎΡ‚ инструмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько прСвосходных соврСмСнных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ„Π°Π·Ρƒ создания ΠΈΠ΄Π΅ΠΉ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΈ Π»Π΅Π³ΠΊΠΎΠΉ для понимания Π΄Π°ΠΆΠ΅ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ инструмСнтами привязки ΠΈ выравнивания для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ², использования Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ пСрСтаскивания ΠΈ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ. ПослСдний ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ инструмСнтами для этапа рисования.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : инструмСнты для Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ позиционирования ΠΈ защСлкивания

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : ΠΎΡ‚ 12,49 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША./мСсяц с 14-Π΄Π½Π΅Π²Π½ΠΎΠΉ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ

ΠŸΡ€ΠΎΡ„ΠΈ :

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ, фиксации ΠΈ выравнивания
  • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСтаскивания
  • Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ приятный ΠΈ чистый

ΠœΠΈΠ½ΡƒΡΡ‹ :

  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Mac ΠΈ iOS
  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ сотрудничСство

Π’Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠΈΠ½Π³

β€”

Π’Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠΈΠ½Π³, ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ, β€” это «Бпособ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сСрвиса Π²Π΅Π±-сайта Π½Π° структурном ΡƒΡ€ΠΎΠ²Π½Π΅. ΠšΠ°Ρ€ΠΊΠ°Ρ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π½Π° страницС, которая ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ потрСбности ΠΈ ΠΏΡƒΡ‚ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉΒ».

Π­Ρ‚ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг послС Ρ„Π°Π·Ρ‹ создания ΠΈΠ΄Π΅ΠΉ, ΠΊΠΎΠ³Π΄Π° Ρƒ вас Π΅ΡΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ эскизы ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠΈ. На этапС каркаса Π²Ρ‹ создадитС основныС страницы ΠΈ экраны для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈ создания ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°. ΠŸΡ€ΠΎΡ‰Π΅ говоря, Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠΈΠ½Π³ создаСт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ эскизы внСшнСго Π²ΠΈΠ΄Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ шага ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° ΠΈ вашСго сайта ΠΈΠ»ΠΈ прилоТСния.

Balsamiq

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ каркасного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Balsamiq. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Balsamiq.

Balsamiq β€” это ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для создания каркасов Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Он ΠΈΠΌΠ΅Π΅Ρ‚ низкокачСствСнноС каркасноС ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° набросок Π½Π° Π±ΡƒΠΌΠ°Π³Π΅. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° этом этапС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ ΡƒΠ²ΡΠ·Π½ΡƒΡ‚ΡŒ Π² дСталях ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° структурС ΠΈ содСрТании.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты, ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Π½Π° эскизы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ впослСдствии ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π­Ρ‚ΠΎ удобная функция, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΊΠ°Π΄Ρ€Ρ‹ Π±Π΅Π· особых Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡŽ чистой ΠΈ Ρ†Π΅Π»ΡŒΠ½ΠΎΠΉ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅.

Balsamiq поставляСтся Π² Ρ‚Ρ€Π΅Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ…; ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Google Диска, ΠΎΠ±Π»Π°Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ собствСнноС Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π³ΠΈΠ±ΠΊΠΎ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ ваши Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ процСссы проСктирования ΠΈ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π­Ρ‚ΠΎΡ‚ инструмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊΠ°ΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, Ρ‚Π°ΠΊ ΠΈ для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ†ΠΈΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ нСсколько Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΉ.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ эскизом ΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ выглядит

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : начиная с 9 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π² мСсяц с 30-Π΄Π½Π΅Π²Π½ΠΎΠΉ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ Π½Π°Π²Ρ‹ΠΊΠΎΠ² : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ

Pros :

  • UNRIMIDED каркасы ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ
  • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСтаскивания
  • Экспорт Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹

ΠœΠΈΠ½ΡƒΡΡ‹ :

  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π½Π° 2 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° с ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΌ ΠΏΠ»Π°Π½ΠΎΠΌ
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с инструмСнтами для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ (Google Диск, Jira, Confluence) оплачиваСтся Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ

Justinmind

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс для создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Justinmind. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Justinmind.

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Justinmind β€” это Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², встроСнная функция каркаса β€” это Ρ‚ΠΎ, Π³Π΄Π΅ этот инструмСнт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса сияСт большС всСго. Он ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… каркасов для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ процСсс Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ Justinmind Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ инструмСнты для прототипирования, Π²Ρ‹ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ТСсты Π½Π° каркасС Π±Π΅Π· нСобходимости ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ этапу процСсса проСктирования. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ основу, ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты ΠΈ быстро ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ свои ΠΈΠ΄Π΅ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠ»Π°Π²Π½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅.

Π’ Justinmind Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ настройки всСх элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π² Ρ‚ΠΎΠΌ числС ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ…. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° для размСщСния элСмСнтов с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля ΠΈ выравнивания ΠΈΡ… с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ частями. Мало Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ с популярными инструмСнтами графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Photoshop ΠΈ Illustrator, для бСсшовного ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ графичСских элСмСнтов.

Π’ качСствС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ бонуса Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Justinmind для простой ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : тСстированиС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ТСстов Π½Π° каркасС

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : доступСн бСсплатный ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 19 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π² мСсяц с 15-Π΄Π½Π΅Π²Π½ΠΎΠΉ бСсплатной ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : ΠΎΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

ΠŸΡ€ΠΎΡ„ΠΈ :

  • НСограничСнноС количСство каркасов ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ
  • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСтаскивания
  • Экспорт Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Photoshop, Illustrator, Sketch ΠΈ Ρ‚. Π΄.

ΠœΠΈΠ½ΡƒΡΡ‹ :

  • ΠœΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ с большой ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ
  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ Ρ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅

UXPin

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса UXPin. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· UXPin.

UXPin ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Justinmind, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ инструмСнт для Π²Π°ΠΉΡ€Ρ„Ρ€Π΅ΠΉΠΌΠΈΠ½Π³Π° ΠΈ прототипирования. Π Π°Π·Π½ΠΈΡ†Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ UXPin Ρ‚Π°ΠΊΠΆΠ΅ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, систСмы Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠΎΠ²ΠΌΠ΅ΡΡ‚Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ инструмСнтом Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ всС части UXPin Π½Π°Π΄Π΅ΠΆΠ½Ρ‹, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ каркаса β€” это Ρ‚ΠΎ, Π³Π΄Π΅ этот инструмСнт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ каркасы с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ элСмСнтами ΠΈ ΡΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‡Π°Ρ‚ΡŒ со своСй ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ каркаса, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ этапу прототипирования. ПослСднСС ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° итСрациях, ΠΊΠΎΠ³Π΄Π° обратная связь происходит ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π² процСссС проСктирования.

Π›ΡƒΡ‡ΡˆΠ°Ρ функция : Π‘Π±ΠΎΡ€ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ Π½Π° шагС каркас

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : Начиная с 19 Π΄ΠΎΠ»Π». БША Π² мСсяц с бСсплатной 7-Π΄Π½Π΅Π²Π½ΠΎΠΉ испытаниСм

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ Π½Π°Π²Ρ‹ΠΊΠΎΠ² : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

Pros :

    : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

    :

      : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

      .

    • БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
    • БыстроС созданиС каркаса
    • Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • Π”ΠΎΡ€ΠΎΠ³ΠΎ

    Π”ΠΈΠ·Π°ΠΉΠ½ интСрфСйса ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

    β€”

    ПослСдним Π²Π°ΠΆΠ½Ρ‹ΠΌ этапом процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса являСтся этап прототипирования. На этом этапС созданныС каркасы ΠΈ статичСскиС слои ΠΎΠΆΠΈΠ²Π°ΡŽΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠ². Π—Π΄Π΅ΡΡŒ Π²Ρ‹ протСстируСтС вСсь ΠΏΠΎΡ‚ΠΎΠΊ вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ отсутствуСт ΠΈΠ»ΠΈ нуТдаСтся Π² Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠ΅.

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ своих Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ спСциализированных инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ касаниС для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ страницу, ТСсты ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для отобраТСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ‚. Π΄. Π­Ρ‚ΠΎΡ‚ этап являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ тСхничСски слоТным ΠΈΠ· всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π³Π»ΡƒΠ±ΠΎΠΊΠΈΡ… Π·Π½Π°Π½ΠΈΠΉ ΠΎ взаимодСйствии с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

    Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для этой Ρ€Π°Π±ΠΎΡ‚Ρ‹.

    Figma

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Figma. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Figma.

    Figma β€” это инструмСнт «всС Π² ΠΎΠ΄Π½ΠΎΠΌΒ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания эскизов, каркасов, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π΄Π°ΠΆΠ΅ для управлСния систСмами Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Как ΠΈ Π² случаС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ†Π΅Π»Π΅Π²Ρ‹ΠΌΠΈ инструмСнтами, Ρƒ Figma Π΅ΡΡ‚ΡŒ ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ стороны Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ прототипирования. НСсмотря Π½Π° это, Π΅ΠΌΡƒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΡ… Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… инструмСнтов, ΠΈ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎ замСдляСт ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ с большим количСством страниц ΠΈ Ρ‚ΠΎΠ½Π½Π°ΠΌΠΈ худоТСствСнных рСсурсов.

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ взаимодСйствиС ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Π΄Ρ€Π°ΠΌΠΈ. КаТдоС взаимодСйствиС Ρ‚Π°ΠΊΠΆΠ΅ настраиваСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ТСстов Ρ‰Π΅Π»Ρ‡ΠΊΠ°, навСдСния, наТатия ΠΈ смахивания. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Π΅ области для создания ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ… элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

    Π‘ Figma Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π½Π° этапС исслСдования ΠΈ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Π·Π° Π½ΠΈΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‹ ΠΎΡ‚ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ этапу тСстирования. Π­Ρ‚ΠΎ создаСт ΡƒΠΌΠ½ΡƒΡŽ ΡΠΈΠ½Π΅Ρ€Π³ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π΄ΠΎ Π½ΠΎΠ²Ρ‹Ρ… высот.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : наблюдСниС Π·Π° испытуСмым Π½Π° этапС исслСдования

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : доступСн бСсплатный ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 45 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π² мСсяц

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

    ΠŸΡ€ΠΎΡ„ΠΈ :

    • Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ бСсплатный ΠΏΠ»Π°Π½
    • ΠžΠ±Π»Π°Ρ‡Π½Π°Ρ совмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
    • Π“ΠΈΠ±ΠΊΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Π΅ области
    • Π₯ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (Chrome, Firefox, Safari, Microsoft Edge)

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ инструмСнты
    • НСт Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния

    Sketch

    Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса прототипирования Sketch. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Sketch.

    Sketch β€” это Π½Π°Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ имя срСди Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π’Ρ‹, вСроятно, Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ достойного Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π» ΠΈΠ»ΠΈ Π½Π΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» Sketch (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ). Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот инструмСнт Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… этапах процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, этап прототипирования β€” это Ρ‚ΠΎ мСсто, Π³Π΄Π΅ ΠΎΠ½ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Ρ†Π΅Π½Π΅Π½.

    Sketch содСрТит простой Π² использовании инструмСнт с Π·Π°Ρ‰Π΅Π»ΠΊΠΎΠΉ ΠΈ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ связанныС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Π·Π° измСнСниями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ вноситС Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ устройствС iOS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Mirror. Sketch Ρ‚Π°ΠΊΠΆΠ΅ содСрТит Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рСдактирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°ΡΡΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

    Π’ качСствС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ бонуса Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌΠΈ Sketch, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, ΠΈΠ·ΠΌΠ΅Ρ€ΡΡ‚ΡŒ слои ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ рСсурсы.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ устройствС iOS

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : ΠΎΡ‚ 9 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц с 30-Π΄Π½Π΅Π²Π½ΠΎΠΉ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

    • БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
    • БобствСнноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° macOS
    • Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ список ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • УмСрСнная кривая обучСния
    • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ iOS ΠΈ macOS

    Adobe XD

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Adobe XD. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Adobe XD.

    Adobe XD являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Adobe Creative Cloud, хотя Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ приобрСсти ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Adobe. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Adobe XD β€” это ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π½Π΅ ΠΎΠΆΠΈΠ΄Π°ΠΉΡ‚Π΅ ΠΎΡ‚ Π½Π΅Π³ΠΎ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ большСго, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π΅ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Creative Cloud.

    Благодаря Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ Π΄Π°ΠΆΠ΅ большС для этой стадии. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ сразу ΠΆΠ΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах. А созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² доступно с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎ ускоряСт процСсс. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ приятныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ 3D-прСобразования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ слои Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ изучСния.

    Adobe XD интСгрируСтся с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями Adobe ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 200 ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ для настройки вашСго ΠΎΠΏΡ‹Ρ‚Π° ΠΈ настройки инструмСнта Π² соотвСтствии с вашими потрСбностями. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС API, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт ΠΊ своим прСдпочтСниям.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : ДСмонстрация Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ слоя

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : бСсплатно для Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ использования; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 9,99 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π² мСсяц

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

    ΠŸΡ€ΠΎΡ„ΠΈ :

    • БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
    • Полная интСграция с прилоТСниями Adobe
    • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° macOS ΠΈ Windows
    • ΠŸΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ бСсплатный ΠΏΠ»Π°Π½

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ для Creative Cloud ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ
    • НСт инструмСнтов рСдактирования графичСских элСмСнтов

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ назначСния

    β€”

    Помимо основных инструмСнтов проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструмСнты, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… частСй процСсса проСктирования. Π˜Ρ… основная Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ шаг ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ, ΠΏΠΎΠ²Ρ‹ΡˆΠ°Ρ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ всСго процСсса проСктирования.

    Помимо основных Ρ‚Ρ€Π΅Ρ… этапов создания эскизов, каркасов ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², сущСствуСт ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ систСмами проСктирования, ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ вСрсиями, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ тСстированиС ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ. Π₯отя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΡƒΠΆΠ΅ рассмотрСли, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· этих шагов Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ второстСпСнныС инструмСнты проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ процСссы проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

    Storybook β€” ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ систСмами проСктирования

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Storybook. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· сборник рассказов.

    Storybook β€” это инструмСнт с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ для управлСния систСмами Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… частСй систСмы проСктирования Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот инструмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ ΠΎΠ΄Π½ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π·Π° Ρ€Π°Π·, Π½Π΅ мСшая ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ.

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Storybook ΠΈΠΌΠ΅Π΅Ρ‚ автоматичСскоС созданиС руководства ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ процСсс докумСнтирования Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½Ρ‹ΠΌ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ автоматичСски Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ошибок. Π‘ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ надстройками Storybook Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π² создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ.

    Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ React, Vue, Angular, Web Components, Ember, HTML, Mithril, Marko, Svelte, Riot, Preact ΠΈ Rax. Π’ качСствС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ бонуса Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования Π² простом JavaScript для доступа Π²ΠΎ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, тСстирования ΠΈ контроля качСства.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : Π˜Π·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ тСстированиС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : бСсплатно

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ мастСрства : Advanced

    Pros :

    • .
    • ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄
    • Широкая интСграция с инфраструктурой

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • ΠšΡ€ΡƒΡ‚Π°Ρ кривая обучСния

    GitHub β€” ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ вСрсиями

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса GitHub. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· GitHub.

    Π’ процСссС проСктирования ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ (ΠΈΠ»ΠΈ вСрсий) ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. НСрСдко приходится ΠΏΠ΅Ρ€Π΅ΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ старый Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π° Π½Π΅ самый послСдний. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ сохранСниС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… вСрсий ΠΈ ΠΈΡ… организация становятся Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ.

    GitHub позволяСт вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ, Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΎΡ‚Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ GitHub с любого устройства, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ вашСго процСсса проСктирования.

    Π­Ρ‚ΠΎΡ‚ инструмСнт ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»ΡΡ‚ΡŒ Ρ‡Π»Π΅Π½ΠΎΠ² вашСй ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈΠ»ΠΈ стороннСго Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΎΠ± измСнСниях, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΡ… Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ многострочныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния бСзопасности Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ограничСния Π½Π° слияниС, ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ людям Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

    GitHub Ρ‚Π°ΠΊΠΆΠ΅ содСрТит инструмСнты Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для дальнСйшСй экономии Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² процСссС проСктирования ΠΈ устранСния Ρ‚Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΈΡ… Π·Π°Π΄Π°Ρ‡. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΊΠΎΠ΄Π°, доставку Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ увСдомлСния для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : мгновСнная публикация ΠΊΠΎΠ΄Π° Π² ΠΎΠ±Π»Π°ΠΊΠ΅

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : доступСн бСсплатный ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 4 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ

    Pros :

    • НСограничСнноС количСство ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΈ частных Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠ΅Π²
    • НСограничСнноС количСство соавторов
    • ΠœΠΎΡ‰Π½Ρ‹Π΅ срСдства Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ для управлСния вСрсиями

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ с бСсплатным ΠΈ самым Π΄Π΅ΡˆΠ΅Π²Ρ‹ΠΌ ΠΏΠ»Π°Π½ΠΎΠΌ
    • Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ограничСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для частных Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠ΅Π² с бСсплатным ΠΏΠ»Π°Π½ΠΎΠΌ

    Π›Π°Π±ΠΈΡ€ΠΈΠ½Ρ‚ β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ тСстированиС

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π›Π°Π±ΠΈΡ€ΠΈΠ½Ρ‚Π°. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Π»Π°Π±ΠΈΡ€ΠΈΠ½Ρ‚.

    Maze позволяСт ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты сайта ΠΈ прилоТСния Π² вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅. Он обСспСчиваСт Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ интСрфСйс Π½Π° основС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ устройства, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

    Π›Π°Π±ΠΈΡ€ΠΈΠ½Ρ‚ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько тСстовых Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ миссии, условия, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ вопросы, сортировка ΠΊΠ°Ρ€Ρ‚ ΠΈ 5-сСкундныС тСсты. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ аспСктом Maze ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ отчСтности послС тСстирования. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΎΡ‚Ρ‡Π΅Ρ‚Π°Ρ… Π±Π΅Π· нСобходимости ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ просмотра всСго сСанса тСстирования. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΎ ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½Ρ‹Ρ… ΠΊΠ»ΠΈΠΊΠ°Ρ…, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π½Π° Π½Π΅ΡƒΠ΄Π°Ρ‡Π½ΠΎΠ΅ взаимодСйствиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с вашим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΈ Ρ‚Π΅ΠΏΠ»ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅, Π½Π° Ρ‡Π΅ΠΌ сосрСдоточСно Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π° сайтС. Оба ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

    Maze Ρ‚Π°ΠΊΠΆΠ΅ интСгрируСтся с Figma, InVision, Adobe XD ΠΈ Sketch. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСспрСпятствСнно Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих инструмСнтов проСктирования, ΠΈ ΡΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‡Π°Ρ‚ΡŒ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… всСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ для получСния ΠΈΠ΄Π΅ΠΉ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π².

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ΅ тСстированиС с участиСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : бСсплатный ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 42 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π² мСсяц

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ

    Pros :

    • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с популярными инструмСнтами проСктирования
    • ДистанционноС тСстированиС конструкции
    • Инклюзивная ΠΎΡ‚Ρ‡Π΅Ρ‚Π½ΠΎΡΡ‚ΡŒ

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • Π”ΠΎΡ€ΠΎΠ³ΠΎ
    • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² бСсплатном ΠΏΠ»Π°Π½Π΅

    Zeplin β€” ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Zeplin. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· Zeplin.

    ΠŸΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° β€” это послСдний этап процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ИмСнно здСсь Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Π΅Ρ€ΡƒΡ‚ Ρ„Π°ΠΉΠ»Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°.

    Zeplin β€” это Π»ΡƒΡ‡ΡˆΠΈΠΉ инструмСнт для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ интСгрируСтся с популярными инструмСнтами Figma, Sketch ΠΈ Adobe XD. Zeplin позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Zeplin выступаСт Π² качСствС эффСктивного посрСдника ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ.

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ прост Π² использовании ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ, создавая Ρ†Π΅Π½Π½ΡƒΡŽ ΡΠΈΠ½Π΅Ρ€Π³ΠΈΡŽ Π² вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС Π²Π΅Π±-ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ процСссы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Ρ‰Π΅ большС ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс ΠΈ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ Π·Π°Π΄Π°Ρ‡ΠΈ.

    Π›ΡƒΡ‡ΡˆΠ°Ρ функция : Π²Π΅Π±-ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‡ΠΈΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ процСссы

    Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ : бСсплатно с ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ; ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹ ΠΎΡ‚ 6 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц

    Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ : Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ

    ΠŸΡ€ΠΎΡ„ΠΈ :

    • ΠŸΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ бСсплатный ΠΏΠ»Π°Π½
    • НСсколько инструмСнтов для Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса
    • ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

    ΠœΠΈΠ½ΡƒΡΡ‹ :

    • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ руководства ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ с бСсплатным ΠΈ самым Π΄Π΅ΡˆΠ΅Π²Ρ‹ΠΌ ΠΏΠ»Π°Π½ΠΎΠΌ
    • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ возмоТности ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ

    Π”ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ инструмСнт ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько инструмСнтов?

    β€”

    ΠŸΡ€ΠΈ рассмотрСнии всСго процСсса проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π½Π΅ сущСствуСт ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ процСсса. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΅ΡΡ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π°Π·Π½Ρ‹Ρ… этапов с высокой ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Figma, Π½ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ инструмСнтам Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ этапС проСктирования.

    Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ инструмСнта Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π΅ΡΡ‚ΡŒ свои ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΈ слабыС стороны. Если ΠΌΠ½ΠΎΠ³ΠΎΡ†Π΅Π»Π΅Π²ΠΎΠΉ инструмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° сияСт Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ области, это Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… шагов. Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ инструмСнты Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ аспСкты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ инструмСнты. Но Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ дСньги Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ инструмСнты ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ.

    Π‘ΡƒΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ использованиС ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… инструмСнтов Π² основном зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ ΠΈ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°. А Ссли Π²Ρ‹ ΡΠΎΠΌΠ½Π΅Π²Π°Π΅Ρ‚Π΅ΡΡŒ, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ инструмСнтами Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ ΠΈΠ»ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΡ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π»ΠΈ ΠΎΠ½ Π²Π°ΠΌ.