Ui Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ – ΠŸΠ°ΠΌΡΡ‚ΠΊΠ° UX / UI Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ. 19 ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² построСния интСрфСйсов / SECL Group corporate blog / Habr

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

ΠžΠΏΡ‹Ρ‚ взаимодСйствия β€” ВикипСдия

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΈΠ· Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ β€” свободной энциклопСдии

ΠžΠΏΡ‹Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΎΠΏΡ‹Ρ‚ взаимодСйствия (Π°Π½Π³Π». User eXperience, UX) β€” это восприятиС ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π½Ρ‹Π΅ дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ использования ΠΈ/ΠΈΠ»ΠΈ прСдстоящСго использования ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ, систСмы ΠΈΠ»ΠΈ услуги (ISO 9241-210)[1]:2.

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

ΠžΠΏΡ‹Ρ‚ взаимодСйствия Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… тСхнологиях[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

Π”Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ ΡˆΠΈΡ€ΠΎΠΊΠΎ примСняСтся Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… тСхнологиях (ИВ) для описания ΡΡƒΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‰Π΅Π³ΠΎ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² процСссС использования ΠΊΠ°ΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы Π² Ρ†Π΅Π»ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π΅Ρ‘ части (Π²Π΅Π±-сайта, прилоТСния ΠΈ ΠΏΡ€.). ΠžΠΏΡ‹Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π² Ρ‚ΠΎΠΌ числС, связан с Ρ‚Π°ΠΊΠΈΠΌ понятиСм ΠΊΠ°ΠΊ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, примСняСмым ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ Π°Π½Π°Π»ΠΈΠ·Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ для проСктирования ΠΎΠΏΡ‹Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

ΠŸΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ β€” это ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ модСль, прСдлоТСнная ДТСссом Π“Π°Ρ€Ρ€Π΅Ρ‚Ρ‚ΠΎΠΌ (Π°Π½Π³Π». Jesse James Garrett) для проСктирования ΠΎΠΏΡ‹Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

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

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

  1. Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ стратСгии β€” это самый высокий ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ абстрактный ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ прСдставлСнной ΠΌΠΎΠ΄Π΅Π»ΠΈ. На этом ΡƒΡ€ΠΎΠ²Π½Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° вопросы, ΠΊΠ°ΡΠ°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠΉ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠΉ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, ΠΊΠ°ΠΊ со стороны ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ‚Π°ΠΊ ΠΈ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°. ΠžΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° эти вопросы Π±ΡƒΠ΄ΡƒΡ‚ сформированы ΠΈ прСдставлСны Π² Π²ΠΈΠ΄Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ списка Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π½Π°Π±ΠΎΡ€Π° возмоТностСй.
  2. Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ возмоТностСй прСдставляСт ΠΈΠ· сСбя простоС пСрСчислСниС Π½Π°Π±ΠΎΡ€Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ доступны для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Бпособ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ Π²Π·Π°ΠΈΠΌΠ½ΠΎΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ этих возмоТностСй Π±ΡƒΠ΄Π΅Ρ‚ описан Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Π΅Π΅ ΡƒΠΆΠ΅ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ структуры.
  3. На ΡƒΡ€ΠΎΠ²Π½Π΅ структуры описываСтся Π²Π·Π°ΠΈΠΌΠ½ΠΎΠ΅ располоТСниС страниц Π²Π΅Π±-сайта, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ, ΠΎΠΊΠΎΠ½ ΠΈ Π΄Ρ€. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π½Π° вопросы Β«ΠΎΡ‚ΠΊΡƒΠ΄Π°Β», Β«ΠΊΡƒΠ΄Π°Β» ΠΈ Β«ΠΊΠ°ΠΊΒ» смоТСт ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. ЭффСктивная структура ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Ρ‘ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятной для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.
  4. Под ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒΡŽ находится ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ абстрактной структуры ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. На этом ΡƒΡ€ΠΎΠ²Π½Π΅ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ΡΡ вопросы Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивного располоТСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов UI.
  5. Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ повСрхности прСдставляСт собой внСшний Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ тСкста, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ссылок, Ρ„ΠΎΡ€ΠΌ, Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ.
  • Π“Π°Ρ€Ρ€Π΅Ρ‚Ρ‚ Π”. Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½: ΠΊΠ½ΠΈΠ³Π° ДТСсса Π“Π°Ρ€Ρ€Π΅Ρ‚Ρ‚Π°. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΎΠΏΡ‹Ρ‚Π° взаимодСйствия = The Elements of User Experience: User-Centered Design for the Web. β€” Π‘ΠΈΠΌΠ²ΠΎΠ»-Плюс, 2008. β€” Π‘. 192. β€” ISBN 5-93286-108-8.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UX/UI Π΄ΠΈΠ·Π°ΠΉΠ½ β€” 1C-UMI

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Π½Π° Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΏΡ€ΠΈ посСщСнии любого сайта β€” Π΅Π³ΠΎ внСшнСС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅. РасполоТСниС ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΈ β€” это ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. Удобство сайта ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для продвиТСния. Если страница выглядит Π±Π΅Π·ΠΎΠ±Ρ€Π°Π·Π½ΠΎ, Π΅Π΅ ΠΏΠΎΠΏΡ€ΠΎΡΡ‚Ρƒ Π·Π°ΠΊΡ€ΠΎΡŽΡ‚ ΠΈ ΠΏΠΎΠΉΠ΄ΡƒΡ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ дальшС. НСудобноС взаимодСйствиС с ΡΠ°ΠΉΡ‚ΠΎΠΌ β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅. По ΡΡ‚ΠΈΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Π² ΡΡ„Π΅Ρ€Π΅ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ появилось понятиС UX/UI Π΄ΠΈΠ·Π°ΠΉΠ½Π°. БпСциалисты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΡŽ, ΠΎΡ‡Π΅Π½ΡŒ цСнятся Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ рассмотрим ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅, Ρ‡Ρ‚ΠΎ скрываСтся Π² ΡΡ‚ΠΈΡ… Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π°Ρ….

UX/UI Π΄ΠΈΠ·Π°ΠΉΠ½ - UMI

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UX-Π΄ΠΈΠ·Π°ΠΉΠ½?

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

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

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ UX-Π΄ΠΈΠ·Π°ΠΉΠ½:

  • ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ;
  • Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ;
  • графичСский ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½;
  • информационная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π°;
  • ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅;
  • ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° происходит Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ этапов:

  1. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ ΠΈ Ρ†Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сайта (ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΎΡ…Π²Π°Ρ‚Π°, рост Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°, ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄Π°ΠΆ ΠΈ ΠΏΡ€.).
  2. ΠŸΠΎΠ΄Π±ΠΎΡ€ инструмСнтов, идСально ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π·Π°Π΄Π°Ρ‡Π°ΠΌ.
  3. НСпосрСдствСнная рСализация ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° β€” Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
  4. Анализ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°: Π΄ΠΎΠ²ΠΎΠ»Π΅Π½ Π»ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚, ΠΊΠ°ΠΊΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅ сформируСтся Ρƒ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»Π΅ΠΉ ΠΈ Ρ‚.Π΄.

Π’Π°ΠΆΠ½ΠΎ: ΠΈΠΌΠ΅Π½Π½ΠΎ UX-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ взаимодСйствия с ΡΠ°ΠΉΡ‚ΠΎΠΌ Π½Π° ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅. Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ приходится Π΄ΠΎΠ»Π³ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ»ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ мСню, вряд Π»ΠΈ ΠΎΠ½ ΡΡ‚Π°Π½Π΅Ρ‚ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΌ.

Π’ ΠΏΡ€ΠΎΡ†Π΅ΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ вовлСкаСтся цСлая ΠΊΠΎΠΌΠ°Π½Π΄Π°. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π΅Π΅ Ρ‡Π»Π΅Π½Ρ‹:

  • НСпосрСдствСнныС спСциалисты, занятыС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ поставлСнных Ρ†Π΅Π»Π΅ΠΉ. Они Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Π΄ созданиСм ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.
  • Ѐасилитатор (ΠΈΠ½ΠΎΠ³Π΄Π° Π΅Π³ΠΎ замСняСт ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²) β€” Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚Ρ€ΡƒΠ΄ΠΎΠ²Ρ‹Π΅ процСссы Π² ΠΊΠΎΠΌΠ°Π½Π΄Π΅, способствуСт ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ атмосфСрС, Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Π½Ρ‹Π΅ ситуации, Ссли Ρ‚Π°ΠΊΠΎΠ²Ρ‹Π΅ происходят.
  • Ѐокус-Π³Ρ€ΡƒΠΏΠΏΠ° β€” это ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚. ΠšΠΎΠ»Π»Π΅ΠΊΡ‚ΠΈΠ² ΠΏΠΎΠ΄Π±ΠΈΡ€Π°ΡŽΡ‚ Π² ΡΠ°ΠΌΠΎΠΌ Π½Π°Ρ‡Π°Π»Π΅. Π‘ Π»ΡŽΠ΄ΡŒΠΌΠΈ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ структуры ΠΈ Π·Π°Π΄Π°Ρ‡, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹. МнСниС фокус-Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° прСдставляСт Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»Π΅ΠΉ.
  • ΠšΠ»ΠΈΠ΅Π½Ρ‚ β€” это Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ разрабатываСтся ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚.
Π’ΠΈΠ΄Π΅ΠΎ HTML5 - UMI

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ называСтся совмСстной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ. Π‘Ρ‚Ρ€ΠΎΠ³ΠΎΠ΅ слСдованиС ΠΏΠ»Π°Π½Π°ΠΌ, тСсноС сотрудничСство всСх Ρ‡Π»Π΅Π½ΠΎΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, ΠΎΠ±Ρ‰ΠΈΠ΅ Ρ†Π΅Π»ΠΈ ΠΈ ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ β€” гарантия получСния Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π’ Ρ†Π΅Π»ΠΎΠΌ качСствСнный ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π³Π»Π°Π²Π½Ρ‹Ρ… Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°:

  • Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ врСмя, Π·Π°Ρ‚Ρ€Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π½Π° ΡΠ°ΠΉΡ‚Π΅: поиск Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами ΠΈ ΠΏΡ€. Π§Π΅ΠΌ быстрСС справился ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅.
  • Анализ. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ сбор ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ с ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π΅Π΅ Π°Π½Π°Π»ΠΈΠ·ΠΎΠΌ для ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ понимания потрСбностСй Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… посСтитСлСй ΠΈ ΡΠΎΠΎΡ‚вСтствия ΠΈΡ… Π·Π°ΠΏΡ€ΠΎΡΠ°ΠΌ.
  • Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ. ΠŸΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ взаимодСйствия с ΡΠ°ΠΉΡ‚ΠΎΠΌ всСх ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Π»ΠΈΡ† Π±Π΅Π· ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, Π² Ρ‚ΠΎΠΌ числС с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ со Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅ΠΌ. Π―Ρ€ΠΊΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ вСрсии для слабовидящих: ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² Π½Π° Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ доступ ΠΊΠΎ Π²ΡΠ΅ΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ Π½Π° ΡΡ‚Ρ€Π°Π½ΠΈΡ†Π°Ρ…, Π½ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ прСдставлСн Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ для Π½Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅.
  • Π›Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΡΠ°ΠΉΡ‚ΠΎΠΌ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UI-Π΄ΠΈΠ·Π°ΠΉΠ½?

Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π² ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ с Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ³ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Β«ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс». Π’Π°ΠΊΠΎΠ΅ понятиС Π±ΠΎΠ»Π΅Π΅ ΡƒΠ·ΠΊΠΎΠ΅. Если ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅, Ρ‚ΠΎ Π·ΠΎΠ½Π° отвСтствСнности UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° β€” внСшний Π²ΠΈΠ΄ ΠΏΠΎΠ»Π΅ΠΉ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π²ΡΠ΅Π³ΠΎ сайта Π² Ρ†Π΅Π»ΠΎΠΌ. Он ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ сочСтаниС Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρ€Π΅ΡˆΠ°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π±ΡƒΠΊΠ²Ρ‹, Π½ΡƒΠΆΠ½Π° Π»ΠΈ анимация ΠΈ ΠΏΡ€. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΡΠ°ΠΉΡ‚ΠΎΠΌ, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. Если Ρ€Π°Π±ΠΎΡ‚Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° нСкачСствСнно (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, тСкст написан Π½Π΅Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ), Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚ страницу.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ успСха Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ пяти ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ» Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² интСрфСйса:

  • Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ. Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС элСмСнты Π±Ρ‹Π»ΠΈ логичСски ΠΌΠ΅ΠΆΠ΄Ρƒ собой связаны.
  • Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΏΠΎ ΡΠΌΡ‹ΡΠ»Ρƒ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ слСдуСт ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π² Ρ€Π°Π·Π΄Π΅Π»Ρ‹.
  • Единство стиля. НС ΡΡ‚ΠΎΠΈΡ‚ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° ΡΠ°ΠΉΡ‚Π΅ эклСктику, рСкомСндуСтся Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ поТСланиям Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° ΠΈ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΠΌ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.
  • Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅. Никто Π½Π΅ ΠΎΡ†Π΅Π½ΠΈΡ‚ Β«ΠΏΡ€Ρ‹Π³Π°ΡŽΡ‰ΠΈΠ΅Β» строки, ΠΊΠ½ΠΎΠΏΠΊΠΈ, располоТСнныС Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π΅.
  • НаличиС пространства Π±Π΅Π· ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’ΠΎΠ½ΠΊΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ, Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ пустого мСста Ρƒ ΠΊΡ€Π°Ρ экрана Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ восприятиС содСрТимого.
UI-Π΄ΠΈΠ·Π°ΠΉΠ½ - UMI

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов:

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

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

  • Π―Π²Π½Ρ‹Π΅. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ β€” ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒΒ», «НаТмитС сюда» ΠΈ ΠΏΡ€.
  • ΠŸΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹. ΠŸΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ элСмСнт, Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Π½. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли слово подсвСчиваСтся синим ΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎ, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ догадаСтся, Ρ‡Ρ‚ΠΎ это β€” гипСрссылка.
  • Π‘ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅. Для понимания дСйствия ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с Π½ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, навСсти курсор ΠΌΡ‹ΡˆΠΈ.
  • ΠœΠ΅Ρ‚Π°Ρ„ΠΎΡ€ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅. Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΈΡ… ΡΠΌΡ‹ΡΠ» понятСн ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ β€” Π·Π½Π°Ρ‡ΠΎΠΊ Π»ΡƒΠΏΡ‹ (ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅), ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ (ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹).
  • Π›ΠΎΠΆΠ½Ρ‹Π΅. Они Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ся ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, хотя Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд каТутся ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌΠΈ.
  • НСгативныС. ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π΅Π½, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚. РаспространСнный ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ β€” Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ сСрым Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

ВмСсто Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ

На ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Ρ€Π°Π·Π΄Π΅Π»ΡΡ‚ΡŒ понятия UX ΠΈ UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅ ΡΡ‚ΠΎΠΈΡ‚. Π­Ρ‚ΠΈ Π΄Π²Π° Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° тСсно взаимосвязаны Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, поэтому Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ внСшнСго Π²ΠΈΠ΄Π° сайта Π² Ρ†Π΅Π»ΠΎΠΌ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ занимаСтся ΠΎΠ΄ΠΈΠ½ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ. Π­Ρ‚ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

UI kit β€” Ρ‡Ρ‚ΠΎ это ΠΈ Π·Π°Ρ‡Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ β€” ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π° Skillbox

UI kit β€” это Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ графичСских элСмСнтов Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ исходного Ρ„Π°ΠΉΠ»Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, PSD ΠΈΠ»ΠΈ Sketch). Один Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ создаСт Π½Π°Π±ΠΎΡ€ ΠΈ Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚ Π² ΠΎΠ±Ρ‰ΠΈΠΉ доступ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄Π°Π΅Ρ‚, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ скачиваСт ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ для своСго интСрфСйса.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ UI kit ΠΎΡ‚ Mike | Creative Mints

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

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ UI kit для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, новостных сайтов ΠΈ Π»ΡŽΠ±Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² для Π²Π΅Π±Π° ΠΈ ΠΌΠΎΠ±Π°ΠΉΠ»Π°.

Набор элСмСнтов стоит Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’ΠΎΡ‚ основныС Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ Ρ€Π΅ΡˆΠ°Π΅Ρ‚:

Унификация для слоТного ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽΡ‚ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒ, нуТдаСтся Π² ΡΠΈΡΡ‚Смности β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ страницы Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ с ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ. UI kit ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠΉ стилистики ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… интСрфСйсных Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ β€” это ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ врСмя frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·Ρ‹ Π·Π½Π°Π½ΠΈΠΉ

Когда Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ сразу нСсколько Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Π° Π² ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ постоянно приходят Π½ΠΎΠ²Ρ‹Π΅ люди, становится Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ знания. Один Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π·Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ элСмСнт, Π½ΠΎΠ²ΠΈΡ‡ΠΊΡƒ Π½ΡƒΠΆΠ½Ρ‹ подсказки. Π§Ρ‚ΠΎΠ±Ρ‹ всякий Ρ€Π°Π· Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя «староТилов» ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Ρ‚ΠΎΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π² kit.

УскорСниС Ρ€Π°Π±ΠΎΡ‚Ρ‹

Π’ UI kit содСрТатся исходныС Ρ„Π°ΠΉΠ»Ρ‹ элСмСнтов β€” Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅ΠΆΠ΅ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ с Π½ΡƒΠ»Ρ ΠΈΠ»ΠΈ ΠΈΡΠΊΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎ Π²ΡΠ΅ΠΌ слоям ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Он ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ся ΠΊΠΈΡ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊ β€” ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ, выбирая Π½ΡƒΠΆΠ½Ρ‹Π΅ элСмСнты с ΠΎΠ΄Π½ΠΎΠΉ страницы.

Π˜Ρ‚Π°ΠΊ, Ссли Ρƒ Π²Π°Ρ постоянно Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ слоТный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ большая ΠΊΠΎΠΌΠ°Π½Π΄Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½), β€” Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ UI kit. Если Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ нСбольшой ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΌΠ°Π»ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ Π»Π΅Π½Π΄ΠΈΠ½Π³), β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· ΠΊΠΈΡ‚Π°.

Набор элСмСнтов ΠΊΠΈΡ‚Π° зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, для Ρ‡Π΅Π³ΠΎ Π΅Π³ΠΎ создавал Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€. UI kit Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π½Ρ‹ΠΌ для e-commerce ΠΈ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта, Π±Π»ΠΎΠ³Π° ΠΈ ΠΌΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π΅Π΅Ρ€Π°. Π‘Π°ΠΌΡ‹Π΅ распространСнныС элСмСнты:

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ панСль, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ тСкста с ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ, ΠΈΠΊΠΎΠ½ΠΊΠ°-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€.

Навигация Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ.

ВсС, Ρ‡Ρ‚ΠΎ придСтся Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ: Ρ„ΠΎΡ€ΠΌΠ° рСгистрации, ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи, оформлСния Π·Π°ΠΊΠ°Π·Π°.

Π€ΠΎΡ€ΠΌΡ‹ Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Они ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹, Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π»Π΅Π½Π΄ΠΈΠ½Π³, ΠΈΠ»ΠΈ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ мСню, Ссли ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½.

ΠŸΠΎΠ΄Π²Π°Π»Ρ‹ Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ВсС ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ Π½Π° Π΄Π°ΡˆΠ±ΠΎΡ€Π΄Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹ для сайта: количСство подписчиков, послСдниС Ρ„ΠΎΡ‚ΠΎ Π² Instagram, ΠΏΠΎΠ³ΠΎΠ΄Π°, курс Π²Π°Π»ΡŽΡ‚ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Кнопки, поля Π²Π²ΠΎΠ΄Π° ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ элСмСнты.

БостояниС ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ 

Π’ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ новости ΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π±Π»ΠΎΠ³Π° Π² UI kit. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π€ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° Ρ‚ΠΎΠ²Π°Ρ€Π°, Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ отобраТСния, ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΈ Β«Π²Ρ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ смотрСли»-Ρ‚ΠΎΠ²Π°Ρ€Ρ‹.

Как Π²Ρ‹ ΡƒΠΆΠ΅ поняли, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡŽΡ‚ UI kit Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ. Π’ Π½Π΅ΠΉ ΠΎΠ½ΠΈ часто ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… страниц, собранных ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… элСмСнтов. По ΡΡƒΡ‚ΠΈ, UI kit β€” это самодостаточный ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π°Ρ‚ΡŒ ΠΈ ΠΊΡƒΠΏΠΈΡ‚ΡŒ. Для ΡΡ‚ΠΎΠ³ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ€Π³ΠΎΠ²Ρ‹Π΅ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Designmodo Market, UI8, Creative Market ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

МоТно Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ UI kit ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…? ВСорСтичСски Π΄Π°, Π½ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΊΠΈΡ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ β€” ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ Π΅Π³ΠΎ бизнСс-Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ.

На ΠΌΠ½ΠΎΠ³ΠΈΡ… сСрвисах ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΈ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ UI kit β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Freebiesbug ΠΈ Graphic Burger. Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²: ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΈΡ… интСрфСйсах.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ UI kit ΠΌΠΎΠ³ΡƒΡ‚ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ собствСнных ΠΈ ΠΏΠΎΠ²Ρ‹ΡΡΡ‚ ΠΎΠ±Ρ‰ΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ насмотрСнности. Когда ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ‚ΠΎ ΡƒΡ‡ΠΈΠΌΡΡ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΠ΅ Π² ΠΌΠ΅Π»ΠΎΡ‡Π°Ρ… ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅ΠΌ собствСнноС Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° вмСстС с Ρ‚Π΅ΠΎΡ€ΠΈΠ΅ΠΉ β€” ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт Π² Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π£Π±Π΅Π΄ΠΈΡ‚ΡŒΡΡ Π² ΡΡ‚ΠΎΠΌ ΠΈ ΡΡ‚Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ спСциалистом ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΠΊΡƒΡ€ΡΠ΅ Β«UX-Π΄ΠΈΠ·Π°ΠΉΠ½Β».

ΠšΡƒΡ€Ρ Β«UX-Π΄ΠΈΠ·Π°ΠΉΠ½Β»

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

  • Живая обратная связь с ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Слями
  • НСограничСнный доступ ΠΊ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ курса
  • Π‘Ρ‚Π°ΠΆΠΈΡ€ΠΎΠ²ΠΊΠ° Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡΡ…-ΠΏΠ°Ρ€Ρ‚Π½Ρ‘Ρ€Π°Ρ…
  • Π”ΠΈΠΏΠ»ΠΎΠΌΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΎΡ‚ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°
  • Гарантия трудоустройства Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ-ΠΏΠ°Ρ€Ρ‚Π½Ρ‘Ρ€Ρ‹ для выпускников, Π·Π°Ρ‰ΠΈΡ‚ΠΈΠ²ΡˆΠΈΡ… Π΄ΠΈΠΏΠ»ΠΎΠΌΠ½Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UX ΠΈ UI? ОписаниС ΠΈ ΠΎΠ±Π·ΠΎΡ€ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΉ / itProger

НСвСрноС ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² UI ΠΈ UX Π²Ρ‹Π΄Π°Π΅Ρ‚ ΡΠ»Π°Π±ΡƒΡŽ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΡ€Π΅Ρ‚Π΅Π½Π΄Π΅Π½Ρ‚Π° Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ мСсто, Π²Π²ΠΎΠ΄ΠΈΡ‚ Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ собСсСдника ΠΏΡ€ΠΈ ΠΎΠ±Ρ‰Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹.

Π’ срСдС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² часто ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹ UI ΠΈ UX. Π’Π°ΠΊΠΆΠ΅ ΠΎΡ‚ ΠΈΡ… обилия ΠΏΠ΅ΡΡ‚Ρ€Π΅ΡŽΡ‚ объявлСния ΠΎ поискС сотрудников Π² области Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Однако Π΄Π°ΠΆΠ΅ срСди ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ люди, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ»ΠΈ ΠΏΡƒΡ‚Π°ΡŽΡ‚ эти понятия, ΠΈΠ»ΠΈ Π½Π΅ Π²ΠΏΠΎΠ»Π½Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, воспринимая ΠΈΡ… ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ Ρ†Π΅Π»ΠΎΠ΅. Но это ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎΠ΅ прСдставлСниС.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρƒ Π² понятиях, Π½ΠΈΠΆΠ΅ рассмотрим, Ρ‡Ρ‚ΠΎ ΠΆΠ΅ Ρ‚Π°ΠΊΠΎΠ΅ Π½Π° самом Π΄Π΅Π»Π΅ UI ΠΈ UX, для Ρ‡Π΅Π³ΠΎ эти Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈ какая ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ взаимосвязь.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UX?

UX – это Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° словосочСтания Π½Π° английском языкС User Experience, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ пСрСводится ΠΊΠ°ΠΊ Β«ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚Β». Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния повСдСнчСского ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ – это ΡΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠΉ потрСбитСля ΠΎΡ‚ пользования ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ, ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π½Π΅ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ, сСрвисом ΠΈΠ»ΠΈ услугой.

Π—Π°Π΄Π°Ρ‡Π° UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π° – ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, сСрвис ΠΈΠ»ΠΈ услугу Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эта ΡΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠΉ Π±Ρ‹Π»Π° благоприятной ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»Π° Π»ΠΎΡΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌΡƒ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ Ρ‡Π΅Ρ€Ρ‚Π°ΠΌΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π΄ΠΎΡΡ‚ΠΈΠΆΠ΅Π½ΠΈΡŽ этой Ρ†Π΅Π»ΠΈ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡ‚ΡŒ, простота ΠΈ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π² использовании.

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

Π’ области IT-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π·Π°Π΄Π°Ρ‡Π° UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Π² сайт, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, смог быстро ΠΈ Π±Π΅Π· Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π½ΠΈΠΉ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ взаимодСйствия с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ.

UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько инструмСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.

  • ΠŸΡ€ΠΎΡ„ΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ (User Profiling) β€” это ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈ ΠΈΡ… сСгмСнтация ΠΏΠΎ ΠΏΡ€ΠΈΠ·Π½Π°ΠΊΠ°ΠΌ ΠΏΠΎΠ»Π°, возраста, Ρ€Π΅Π³ΠΈΠΎΠ½Π° ΠΈΠ»ΠΈ страны проТивания, языка ΠΈ Ρ‚.ΠΏ.
  • ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΠ΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ структуры ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.
  • ИсслСдованиС повСдСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ Π½Π° страницу? Бколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΎΠ½ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ Π½Π° сайтС? ΠšΠ°ΠΊΠΎΠ²Ρ‹ страницы Π²Ρ‹Ρ…ΠΎΠ΄Π°? Бколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ достиТСния Ρ†Π΅Π»ΠΈ (Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠΊΡƒΠΏΠΈΡ‚ΡŒΒ», ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ„ΠΎΡ€ΠΌΡƒ Π·Π°ΠΊΠ°Π·Π° ΠΈ Ρ‚.Π΄.).
  • Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ удобства использования ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Π£Π΄ΠΎΠ±Π½ΠΎ Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с сайтом ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΈ слабом ΡƒΡ€ΠΎΠ²Π½Π΅ сигнала сСти Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚? Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ увСдомлСния ΠΈΠ»ΠΈ рассылки?
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π˜Π½Ρ„ормация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΈ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ запросам. ИзлоТСниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для восприятия.

Подводя ΠΈΡ‚ΠΎΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ†Π΅Π»ΡŒ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π° – ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ использованиС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UI

АббрСвиатура UI Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ User Inerface, Ρ‡Ρ‚ΠΎ Π² ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ с английского ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Β«ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс». Π­Ρ‚ΠΎ понятиС ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ систСму ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ. Если UX-Π΄ΠΈΠ·Π°ΠΉΠ½ опрСдСляСт систСму ΠΈ ΠΏΡƒΡ‚ΠΈ взаимодСйствия ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΎ Π·Π°Π΄Π°Ρ‡Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° UI – Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π° понятным Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ способом.

Π­Ρ‚Π° Π·Π°Π΄Π°Ρ‡Π° ΠΏΡ€ΠΈ создании сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΏΡƒΡ‚Π΅ΠΌ создания эстСтичного Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйса ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ нСсколько ΠΏΡƒΡ‚Π΅ΠΉ.

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

Если дСйствия UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ тСхнологичСскими возмоТностями, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ прСдпочтСниями, Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈΠΌΠ΅Π΅Ρ‚ больший простор для творчСства. БправСдливости Ρ€Π°Π΄ΠΈ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ UI-Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ свои ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ ограничСния.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ UI ΠΈ UX

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

ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ UX ΠΈ UI взаимосвязаны, ΠΎΠ΄Π½Π°ΠΊΠΎ находятся Π² иСрархичСски выстроСнной структурС. UI являСтся Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ UΠ₯.

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

Π”ΠΎ эпохи Π±ΡƒΡ€Π½ΠΎΠ³ΠΎ развития Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ этих Π΄Π²ΡƒΡ… взаимосвязанных Π·Π°Π΄Π°Ρ‡ возлагалось, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°. Π‘ услоТнСниСм ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ появилась ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² Π±ΠΎΠ»Π΅Π΅ ΡƒΠ·ΠΊΠΈΡ… спСциалистах. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² создании соврСмСнных ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ участиС Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ UX- ΠΈ UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, Π½ΠΎ ΠΈ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚Π΅Ρ€Ρ‹, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ‚ΠΎΡ€Ρ‹, графичСскиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈ ΠΈ Ρ‚.Π΄.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

НСсмотря Π½Π° всС Π²Ρ‹ΡˆΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅, часто встрСчаСтся совмСстноС использованиС ΠΎΠ±ΠΎΠΈΡ… Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² ΠΈ Π² тСкстах объявлСний ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ поискС UI/UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ происходит, Ссли сущСствуСт Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ понятиями ΠΈ профСссиями.

ΠžΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ всС довольно просто. МногиС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ попросту Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ возмоТности ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… спСциалистов, поэтому ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚ΠΎΠ΄Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΡˆΡ‚Π°Ρ‚Π΅ Β«ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… солдат».

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

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, осваивая Π½ΠΎΠ²ΡƒΡŽ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ сначала Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ – ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π½ΠΈΠΈ ΠΈΠΌ приятного внСшнСго Π²ΠΈΠ΄Π°. Π‘ΡƒΠ΄ΡƒΡ‡ΠΈ спСциалистом Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· областСй Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»Π΅Π³Ρ‡Π΅ ΠΎΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ спСцифику Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ взаимосвязь ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ профСссия UX- ΠΈ UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° вострСбована Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅ Ρ‚Ρ€ΡƒΠ΄Π°, ΠΊΠ°ΠΊ Π² ΡˆΡ‚Π°Ρ‚Π΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, Ρ‚Π°ΠΊ ΠΈ Π² сфСрС фриланса.

ΠŸΠ°ΠΌΡΡ‚ΠΊΠ° UX / UI Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ. 19 ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² построСния интСрфСйсов / SECL Group corporate blog / Habr

ΠœΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ сайтов ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ интСрфСйсов. На этот Ρ€Π°Π· Π²Ρ‹Π΄Π΅Π»ΠΈΠ»ΠΈ сразу 19 ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² построСния интСрфСйсов. Π­Ρ‚ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ ΠΌΡ‹ ΠΏΠΎ ΠΊΡ€ΡƒΠΏΠΈΡ†Π°ΠΌ собирали Π½Π° протяТСнии послСдних 3Ρ… Π»Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠ½ΠΈΠ³, статСй, исслСдований ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, собствСнного ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйсов.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ интСрфСйсов Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… сайтов – это самый ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΉ ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… этапов. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΡˆΠΈΠ» Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ ΠΈ Π·Π°ΠΊΠΎΠ½Ρ‹ проСктирования интСрфСйсов.

  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ KISS. ΠžΡ‚ Π°Π½Π³Π». Β«keep it short and simpleΒ». Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ простой ΠΈ понятный, Π·Π°Π΄Π°Ρ‡ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ числом дСйствий, всС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ понятно ΠΈ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ.
  • НС заставляйтС Π΄ΡƒΠΌΠ°Ρ‚ΡŒ. НуТно ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ слоТных дСйствий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ.
  • Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎΠ΅. НС стоит ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Π΅ элСмСнты интСрфСйса, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Π²Π΅Ρ‰Π°Ρ….
  • Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сигнал / ΡˆΡƒΠΌ. Π’ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ интСрфСйсС Π΅ΡΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты (сигналы) ΠΈ ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½Ρ‹Π΅ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ бСссмыслСнныС для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ части систСмы (ΡˆΡƒΠΌ), СстСствСнно, Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° сигналах ΠΈ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ ΡˆΡƒΠΌΠ°.
  • ΠŸΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½ΠΎΠ΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΌΠΎΠ΄Π½ΠΎΠ³ΠΎ. НС стоит Ρ†Π΅ΠΏΠ»ΡΡ‚ΡŒΡΡ Π·Π° ΠΌΠΎΠ΄Ρƒ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ Π΄Π΅Π»Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ элСмСнтам интСрфСйса.
  • ΠŸΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ элСмСнты управлСния. Π’ любом соврСмСнном интСрфСйсС Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ элСмСнтов управлСния, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ элСмСнты ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π·Ρ‹.
  • Π›ΡŽΠ΄ΠΈ Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚, люди ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π»ΡŽΠ±ΡΡ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ большиС массивы тСкстов, Π½Π΅ заставляйтС ΠΈΡ… это Π΄Π΅Π»Π°Ρ‚ΡŒ.
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ ΡƒΠΌΠ½ΠΎΠ³ΠΎ заимствования. НС стоит ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ вСлосипСд для стандартных Π²Π΅Ρ‰Π΅ΠΉ.
  • КошСлСк ΠœΠΈΠ»Π»Π΅Ρ€Π°. Π’ ΠΎΠ΄Π½ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ большС 5-7 элСмСнтов, ΠΈΠ½Π°Ρ‡Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ смоТСт ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ памяти.
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° страницС ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ Π½Π° логичСскиС Π±Π»ΠΎΠΊΠΈ (Π³Ρ€ΡƒΠΏΠΏΡ‹), Ρ‚Π°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π»Π΅Π³Ρ‡Π΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.
  • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Π°Ρ ΠΏΠΎΠ½ΡΡ‚Π½ΠΎΡΡ‚ΡŒ. ПониманиС Π»ΡƒΡ‡ΡˆΠ΅ запоминания.
  • ВсС ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ Π½Π° Π²ΠΈΠ΄Ρƒ. ВсС Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты интСрфСйса Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π½Π° Π²ΠΈΠ΄Ρƒ ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹.
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ 3Ρ… ΠΊΠ»ΠΈΠΊΠΎΠ². Π”ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 3Ρ… ΠΊΠ»ΠΈΠΊΠΎΠ² для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Π­Ρ‚ΠΎ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ Π³Π»Π°Π²Π½ΠΎΠΉ страницС: любая ваТная информация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ доступна Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ Π² 3 ΠΊΠ»ΠΈΠΊΠ°.
  • ΠžΠ΄Π½ΠΎΡ€ΠΎΠ΄Π½ΠΎΡΡ‚ΡŒ. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… часто встрСчаСтся ΠΎΠ΄Π½ΠΎΡ€ΠΎΠ΄Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» Π² Ρ€Π°Π·Π½Ρ‹Ρ… частях сайта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ), ΠΎΠ½ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ. Π­Ρ‚ΠΎ ΠΆΠ΅ касаСтся ΠΈ стиля.
  • Бпособы Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ‡ΠΈ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ способы Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΈΡ… Π·Π°Π΄Π°Ρ‡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ интСрфСйса, ΠΈ эти способы Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹.
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ мостовых ΠΏΠ΅Ρ€ΠΈΠ». Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Π΅Ρ‰Π΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Β«Π·Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ Π΄ΡƒΡ€Π°ΠΊΠ°Β», ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Ρ‰ΠΈΡ‰Π°Ρ‚ΡŒ ΠΎΡ‚ случайных дСйствий.
  • ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚ΠΈΠ½Π³. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ интСрфСйса – это Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚ΠΈΠ½Π³, Π²Π°ΠΆΠ½Π° каТдая Π±ΡƒΠΊΠ²Π°, особСнно Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ.
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Сдинства. Настройки ΠΈ элСмСнты управлСния Π½ΡƒΠΆΠ½ΠΎ ΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ Π½Π΅ ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Π° Π΄Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ мСста, Ссли это умСстно.
  • Π’Ρ€Π΅Π½Π΄Ρ‹. Π‘Ρ‚ΠΎΠΈΡ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ соврСмСнныС Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ интСрфСйс Π½Π΅ устарСл Π΅Ρ‰Π΅ Π΄ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ этому Π²Π΄ΡƒΠΌΡ‡ΠΈΠ²ΠΎ.

P.S. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ наши Π½ΠΎΠ²Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈΠ»ΠΈ просто Π½Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ β€” ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° нас Π² Facebook, VK, Twitter

P.P.S. БовсСм скоро Π² нашСй бизнСс-школС Digitov стартуСт курс: ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹Ρ… сайтов. ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° курс сСйчас ΠΈ смоТСтС ΠΊΡƒΠΏΠΈΡ‚ΡŒ Π΅Π³ΠΎ со скидкой.

ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π» ΡΡ‚Π°Ρ‚ΡŒΠΈ Ρ‚ΡƒΡ‚: http://seclgroup.ru/article-user-interface-architecture-principles.html

Автор:
Никита Π‘Π΅ΠΌΠ΅Π½ΠΎΠ² (Facebook, VK, LinkedIn)
CEO
Компания «SECL GROUP» / «Internet Sales Technologies»

Π’ Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ UI ΠΈ UX

Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ UI (user interface β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс) ΠΈ UX  (user experience β€” ΠΎΠΏΡ‹Ρ‚ взаимодСйствия) β€” это Ρ€Π°Π·Π½Ρ‹Π΅ понятия? ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΎΠ½ΠΈ тСсно связаны, ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°ΡŽΡ‚ΡΡ ΠΈ Ρ€Π΅Π΄ΠΊΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π±Π΅Π· Π΄Ρ€ΡƒΠ³Π°. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ различия ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ UI ΠΈ UX Π² дСталях? Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Ρ‚Π°ΠΊΡƒΡŽ β€‹β€‹Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ.

Авторы ΡΡ‚Π°Ρ‚ΡŒΠΈ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚Π°Ρ‚ΡŒ экспСртом Π² области Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±Π΅Π· ясного понимания ΠΎΠ±ΠΎΠΈΡ… Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ². Π’ этом ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ самыС Ρ€Π°Π·Π½Ρ‹Π΅ опрСдСлСния ΠΈ объяснСния: вСсСлыС, ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΌΠΈ ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠ΅. ΠŸΡ€ΠΈΡΡ‚Π½ΠΎΠ³ΠΎ Ρ‡Ρ‚Сния. 

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡ

НачнСм с опрСдСлСния. Нам Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈΠ΄Ρ‚ΠΈ дальшС, Ρ‡Π΅Ρ‚ΠΊΠΎ понимая ΠΎ Ρ‡Π΅ΠΌ ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ.

UI

Богласно Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ, UI это Ρ€Π°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ ΠΈΠ½Ρ‚СрфСйсов, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ΄Π½Π° сторона прСдставлСна Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ (ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ), другая β€” машиной/устройством. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ собой ΡΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ срСдств ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ, Ρ‡Π°Ρ‰Π΅ всСго слоТными, машинами, устройствами ΠΈ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚ΡƒΡ€ΠΎΠΉ.

Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс являСтся систСмой, посрСдством ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ люди (ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ) Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с машиной. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π΄Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°: ΠΎΠ±ΠΎΡ€ΡƒΠ΄ΠΎΠ²Π°Π½ΠΈΠ΅ (физичСский ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚) ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС (логичСский ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚). Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ интСрфСйсы для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… систСм. UI ΡΠ²Π»ΡΡŽΡ‚ΡΡ срСдством для выполнСния Π΄Π²ΡƒΡ… Ρ‚ΠΈΠΏΠΎΠ² Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚вия:
β€” Π²Π²ΠΎΠ΄ (Input), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΡΠΈΡΡ‚Π΅ΠΌΠΎΠΉ;
β€” Π²Ρ‹Π²ΠΎΠ΄ (Output), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ систСмС Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эффСкт ΠΎΡ‚ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΡΡ†ΠΈΠΉ.

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

Π’ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΡƒΡŽ эру Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Β«ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс» ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ графичСский интСрфСйс ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ панСлях управлСния Π² ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½Ρ‹Ρ… ΠΎΡ‚раслях.

β€’ Π’ΠΈΠΏΡ‹  UI

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

  1. ГрафичСский интСрфСйс ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (GUI). ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ осущСствляСт ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ Π²Π²ΠΎΠ΄Π° Ρ‡Π΅Ρ€Π΅Π· устройства, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° ΠΈ ΠΌΡ‹ΡˆΡŒ, Π° машина ΠΈ обСспСчиваСт графичСский Π²Ρ‹Π²ΠΎΠ΄ Π½Π° ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°.
  2. Π’Π΅Π±-интСрфСйс (WUI). Π­Ρ‚ΠΎ ΡΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ срСдств, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт с Π²Π΅Π±-сайтом ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. НовыС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Java, JavaScript, AJAX, Adobe Flex, Microsoft. NET , ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎ ΠΈΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ обновлСния, ΡΠΎΡΡ‚ΠΎΡΡ‰ΡƒΡŽ Π² основС HTML-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².
  3. АдминистративныС Π²Π΅Π±-интСрфСйсы. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с сСрвСрами ΠΈ ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°ΠΌΠΈ. Часто Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ панСлью ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ.
  4. БСнсорныС экраны. Π­Ρ‚ΠΎ дисплСи, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΠ΅ Π²Π²ΠΎΠ΄ ΠΏΡ€ΠΈ касании ΠΏΠ°Π»ΡŒΡ†Π°ΠΌΠΈ ΠΈΠ»ΠΈ стилусом . Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ΡƒΠ»ΠΈΡ‡Π½Ρ‹Ρ… Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚Π°Ρ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² ΠΈ Ρ‚. Π΄.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° UI β€” это созданиС интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обСспСчиваСт самый Π»ΡƒΡ‡ΡˆΠΈΠΉ, простой, приятный ΠΈ Π½Π΅ ΠΎΠ±Ρ€Π΅ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΉ способ взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ. Π‘ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π²ΠΎ врСмя создания интСрфСйса составляСт наблюдСниС Π·Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‡Ρ‚ΠΎ позволяСт ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, основанныС Π½Π° собранных Π΄Π°Π½Π½Ρ‹Ρ…. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ UI ΠΏΠΎ сути рСмСсло, вСдь Π²Ρ‹ создаСтС Π½Π΅Ρ‡Ρ‚ΠΎ красивоС ΠΈ Π²ΠΏΠΎΠ»Π½Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π½Π°Π²Ρ‹ΠΊΠΈ, знания ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΎΠΏΡ‹Ρ‚Π°. Π’ своСй Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠ΅ инструмСнты ΠΊΠ°ΠΊ Photoshop, Illustrator, Fireworks, Cinema 4D, ZBrush, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€ΡƒΡ‡ΠΊΡƒ ΠΈ Π±ΡƒΠΌΠ°Π³Ρƒ. Однако Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ UI Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ UX.

UX

 

UX, ΠΈΠ»ΠΈ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, Π΅Π³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅, ΠΈ эмоции Π²Ρ‹Π·Π²Π°Π½Π½Ρ‹Π΅ ΠΈ связанныС с использованиСм ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, систСмы ΠΈΠ»ΠΈ услуги. ΠžΠΏΡ‹Ρ‚ взаимодСйствия Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя практичСскиС, основанныС Π½Π° ΠΎΠΏΡ‹Ρ‚Π΅, эффСктивныС, Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ ΠΈ Ρ†Π΅Π½Π½Ρ‹Π΅ аспСкты взаимодСйствия Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, UX Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя восприятиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ характСристик систСмы, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡ‚ΡŒ, простота использования ΠΈ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. ΠžΠΏΡ‹Ρ‚ взаимодСйствия носит ΡΡƒΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€, вСдь Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ восприятии ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ систСмы. UX β€” понятиС нСпостоянноС, вСдь Π΅Π³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ постоянно ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ вмСстС с систСмами, ΠΎΠ±ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°ΠΌΠΈ, тСхнологиями ΠΈ Ρ‚. Π΄. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° UX начинаСтся с опрСдСлСния вашСй Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚ΠΈΠ½Π³Π΅Π½Ρ‚Π° ΠΈ создания Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ Β«ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΒ» ΠΈ Π΅Π³ΠΎ характСристик. ΠžΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° этих знаниях Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ вывСсти ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ трСбования ΠΊ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ. РазрабатываСтся информационная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΈ проСктируСтся иСрархия содСрТимого, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π° этапС прототипирования. Π”Π°Π»Π΅Π΅ выбираСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ прототипирования. Он Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ достаточно экономичным, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈ эффСктивным Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ сбора ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи Π² быстрой ΠΈ Π»Π΅Π³ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅. ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π² Π΄Π°Π½Π½ΠΎΠΉ области Π±Ρ‹Π²Π°ΡŽΡ‚:

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

ПослС Π²Ρ‹Π±ΠΎΡ€Π° Ρ‚ΠΈΠΏΠ° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° начинаСтся процСсс ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ. Он сильно Ρ€Π°Π·Π½ΠΈΡ†Π° Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ разрабатываСтся β€” ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, услуга ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Как Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, UI ΠΈ UX вСсьма ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. И ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ большС Ρ‡Π΅ΠΌ Π“Ρ€Π°Π½Π΄-Каньон.

Π”ΠΈΠ·Π°ΠΉΠ½ UI ΠΈ UX. Π’ Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°?

На самом Π΄Π΅Π»Π΅ довольно Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ эти Π΄Π²Π° понятия, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΎΡ‡Π΅Π½ΡŒ тСсно связаны. UI часто являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ UX. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, UX ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ оказались Π² Β«Π—Π°Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ΅Β» Π›ΡŒΡŽΠΈΡΠ° ΠšΡΡ€Ρ€ΠΎΠ»Π»Π° ΠΈ Π²ΡΠ΅ это ΠΈΠ³Ρ€Π° слов, Π·Π°Π³Π°Π΄ΠΊΠΈ ΠΈ ΠΈΠ³Ρ€Ρ‹ Ρ€Π°Π·ΡƒΠΌΠ°, ΠΎΠ΄Π½Π°ΠΊΠΎ всС ΠΏΡ€ΠΎΡ‰Π΅ Ρ‡Π΅ΠΌ каТСтся. НиТС Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ список Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ UI ΠΈ UX, составлСнный со слов ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ отличия, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½Π΅ΠΌ сходство ΠΌΠ΅ΠΆΠ΄Ρƒ Β«Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ UIΒ» ΠΈ Β«Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ UXΒ»

  1. Оба ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ (ΠΏΠΎΡ‡Ρ‚ΠΈ) Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ.
  2. Оба Ρ€Π΅ΡˆΠ°ΡŽΡ‚ Π·Π°Π΄Π°Ρ‡ΠΈ, связанныС с дизайнСрским аспСктом ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.
  3. Оба ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π½Π° ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Сля.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±Π΅Ρ‰Π°Π½Π½Ρ‹ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΡΠΌ.
UI это… (Π—Π²ΡƒΡ‡ΠΈΡ‚ ΠΊΠ°ΠΊ тСкст ΠΈΠ· Π²ΠΊΠ»Π°Π΄Ρ‹ΡˆΠ΅ΠΉ Π² ΠΆΠ²Π°Ρ‡ΠΊΡƒ β€œLove is…”):

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


Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΏΡ€Π°Π²ΡƒΡŽ Π΄ΠΎΡ€ΠΎΠΆΠΊΡƒ ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ Ρ‡Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒΡΡ ΠΎ UX!

  • UX ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр областСй: ΠΎΡ‚ ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄ΠΎ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹
  • Π”ΠΈΠ·Π°ΠΉΠ½ UX Π΄Π°Π΅Ρ‚ ΠΌΠ°Π»ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ UI
  • Π”ΠΈΠ·Π°ΠΉΠ½ UX ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ насколько ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Сля
  • UX Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ с ΠΎΠ±Ρ‰ΠΈΠΌ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ΠΌ, связанным с использованиСм ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ ΡƒΡΠ»ΡƒΠ³ΠΈ
  • UX являСтся Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ комбинирования прямых ΠΈ косвСнных взаимодСйствий с Π±Ρ€Π΅Π½Π΄ΠΎΠΌ
  • UX ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²Π΅Π±-сайта
  • UX ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π° Π·Π° счСт ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΈΠ½Ρ‚СрфСйса
  • UX Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ с ΠΎΠ±Ρ‰ΠΈΠΌ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ΠΌ, связанным с использованиСм ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ услуги, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΈΠ½Ρ‚СрфСйс
  • Π”ΠΈΠ·Π°ΠΉΠ½ UX β€” это ΡΠΌΠΎΡ†ΠΈΠΈ
  • UX β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚Π΅
  • UX Π΄ΠΈΠ·Π°ΠΉΠ½ это созданиС ΠΎΠΏΡ‹Ρ‚Π° использования с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, с Ρ†Π΅Π»ΡŒΡŽ произвСсти влияниС ΠΈΠ»ΠΈ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эмоции. UX опрСдСляСт ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚ΠΎ, с Ρ‡Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΈΠ½Ρ‚СрфСйса
  • UX Π΄ΠΈΠ·Π°ΠΉΠ½ это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ люди Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с Π½Π΅ΠΉ, с Π΅Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€ΠΎΠΉ, ΠΊΠ°ΠΊΠΎΠ²Π° Π΅Π΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ ΠΈ Ρ‚.Π΄. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса создаСт Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΡΡ…одя ΠΎΡ‚ конструкции UX
  • UX β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ чувствуСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠΎΠ³Π΄Π° Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° Π²Π΅Π±-сайт
  • UX являСтся слСдствиСм использования ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°
  • UX Π΄ΠΈΠ·Π°ΠΉΠ½ это Β«Ρ‚Π΅Ρ€ΠΌΠΈΠ½-Π·ΠΎΠ½Ρ‚ΠΈΠΊΒ». Он ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр процСссов ΠΈ Π½Π°Π²Ρ‹ΠΊΠΎΠ² , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ. К Π½ΠΈΠΌ относятся: исслСдования, ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, информационная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π°, Π΄ΠΈΠ·Π°ΠΉΠ½ взаимодСйствия, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅
  • UX являСтся слСдствиСм манипуляций ΠΈ взаимодСйствия с вашим UI
  • UX β€” это эмоции, чувства ΠΈ ΠΎΠΏΡ‹Ρ‚
  • UX это большая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π°, ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‰Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ ΠΈ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρƒ
  • UX β€” это ΠΎΠΏΡ‹Ρ‚, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ использования ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. На UX ΠΌΠΎΠ³ΡƒΡ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ UI, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠ΅ Π² самый Π½ΠΈΠ· страницы для добавлСния вопроса β€” это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈΠ· области UI, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΡ…ΡƒΠ΄ΡˆΠ°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ UX
  • UX прСдставляСт собой сочСтаниС всСх элСмСнтов Π²Π΅Π±-сайта, Π² Ρ‚ΠΎΠΌ числС Ρ‚Π΅ΠΎΡ€ΠΈΠΈ Ρ†Π²Π΅Ρ‚Π° ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π₯отя ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ UX ΡƒΠΌΠ΅ΡŽΡ‚ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ с ΠΊΠΎΠ΄ΠΎΠΌ, Ρ‡Π°Ρ‰Π΅ всСго ΠΎΠ½ΠΈ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  • UX это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΊΠ°ΠΊ простота Π² использовании, ΡƒΠ΄ΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡, Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³ ΠΈ Ρ‚.Π΄. 
  • ΠžΠΏΡ‹Ρ‚ взаимодСйствия это Π»ΡŽΠ±ΠΎΠ²ΡŒ
  • ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠΏΡ‹Ρ‚Π° взаимодСйствия Π²Π°ΠΆΠ½ΠΎ ΡƒΡ‡Π΅ΡΡ‚ΡŒ психологичСскоС состояниС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ
  • UX Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ достаточно большой, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄Π΅Π» это Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π·Π³Π»ΡΠ΄
  • UX β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ чувствуСт сСбя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠΎΠ³Π΄Π° смотрит Π½Π° ΡΠ°ΠΉΡ‚
  • UX это взаимодСйствиС само ΠΏΠΎ ΡΠ΅Π±Π΅
  • Π”ΠΈΠ·Π°ΠΉΠ½ UX β€” это Π»ΡŽΠ±ΠΎΠΉ аспСкт ΠΎΠΏΡ‹Ρ‚Π° взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с систСмой, Π² Ρ‚ΠΎΠΌ числС интСрфСйс, Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, физичСскоС взаимодСйствиС ΠΈ Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΠΎ
  • UX β€” это Π½ΠΎΠ²Ρ‹ΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ для понятия ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ людям ΠΏΠΎΡ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя ΡƒΠΌΠ½Π΅Π΅.
  • Π’ UX ΠΌΠ½ΠΎΠ³ΠΎ ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΠΈ
  • UX ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², Ρ‡Π΅ΠΌ UI. Часто Π²Π°ΠΌ приходится ΠΈΠΌΠ΅Ρ‚ΡŒ Π² Π²ΠΈΠ΄Ρƒ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Π½Ρ‹Π΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹, ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈ Ρ‚.Π΄. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ вСсь ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ β€” Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс. ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ Π² слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ письма с ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈ Ρ‚.Π΄. 
  • UX = Π²Π²ΠΎΠ΄ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ
  • UX β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ заставляСт вас Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΅Π±Ρ
  • UX β€” это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ элСмСнты, ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π°Ρ…
  • UX ΠΌΠΎΠΆΠ΅Ρ‚ выраТаСтся ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ аспСктом Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ
  • UX это ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго ΠΎΠΏΡ‹Ρ‚
  • UX прСдставляСт собой ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… интСрфСйсов, ΠΈ UI β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ…

ΠœΡ‹ ΠΎΡ‡Π΅Π½ΡŒ надССмся, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π²Ρ‹ΡˆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ Π²Π°ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² сути вопроса. НСкоторыС ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² оказались ΡˆΡƒΡ‚Π»ΠΈΠ²Ρ‹ΠΌΠΈ, Π½ΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΎΡ‚Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΡΡƒΡ‚ΡŒ UI ΠΈ UX. НадССмся, Π²Ρ‹ большС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒΡΡ Π² этих Π΄Π²ΡƒΡ… Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ….

Π’Ρ‹Π²ΠΎΠ΄

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

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, справСдливости Ρ€Π°Π΄ΠΈ, ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅. Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ‚Ρ€Π΅Π½Π΄Ρ‹, Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π² области Π΄ΠΈΠ·Π°ΠΉΠ½Π° UI Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π½Π° ΠΎΠ΄Π½Ρƒ Ρ†Π΅Π»ΡŒ: ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ UX Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ понятнСС. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π½Π°Ρ‡Π°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ для людСй, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ с ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сСгодняшниС UI Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π½Π° ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ UX. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ ΠΈ UI ΠΈ UX.

Автор ΡΡ‚Π°Ρ‚ΡŒΠΈ Helga Moreno

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ Π”Π΅ΠΆΡƒΡ€ΠΊΠ°

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

опрСдСлСния Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… слоТных Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π˜Π³ΠΎΡ€ΡŒ Π”ΠΆΠ°Π·ΠΎΠ², ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ интСрфСйсов ΠΈ ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»ΡŒ, написал ΡΡ‚Π°Ρ‚ΡŒΡŽ с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… слоТных Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.


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

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ нСбольшой ΠΎΠ±Π·ΠΎΡ€ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… основных Ρ„ΠΎΡ€ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ux-blog

UX Π΄ΠΈΠ·Π°ΠΉΠ½ (Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠΏΡ‹Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ)

UX, UI, IA, IxD: опрСдСлСния Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… слоТных Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° (UXD, XD ΠΈΠ»ΠΈ UED) β€” это процСсс ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ удовлСтворСнности ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ‡Π΅Ρ€Π΅Π· ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ доступности, удобства ΠΈ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΡ ΠΏΡ€ΠΈ взаимодСйствии ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ.

Π”ΠΈΠ·Π°ΠΉΠ½ UX ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎ-ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠ΅ взаимодСйствиС ΠΈ сущСствСнно Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ Π΅Π³ΠΎ, учитывая всС аспСкты услуги ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Π² Π²ΠΈΠ΄Π΅, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΈΡ… Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ.

UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ посрСдством ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния Π²Ρ€ΠΎΠ΄Π΅ Axure.

ΠšΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΡ β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… Π½Π°Π²Ρ‹ΠΊΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² UX. Π’Π°ΠΊΠΆΠ΅ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ исслСдования, ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Π½Ρ‹ΠΉ Π°Π½Π°Π»ΠΈΠ· Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ стадии, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ удобства использования ΠΈ A/B тСстированиС послС запуска ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

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

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹: ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, раскадровки, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠ°Ρ€Ρ‚Π° сайта ΠΈ ΠΏΠΈΡΡŒΠΌΠ΅Π½Π½Ρ‹Π΅ спСцификации.

НСобходимыС инструмСнты: Axure, Mockplus, Sketch, UXPin ΠΈ Ρ‚Π°ΠΊ далСС…

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

UX, UI, IA, IxD: опрСдСлСния Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… слоТных Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Автор самой ΠΈΠ΄Π΅ΠΈ ΠΈ ΠΎΡΠ½ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Β«Adaptive PathΒ», ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π² сфСрС ΠΎΠΏΡ‹Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ДТСсс Π“Π°Ρ€Ρ€Π΅Ρ‚Ρ‚, опрСдСляСт UI-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ°ΠΊ сфСру, которая связана с Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ интСрфСйсных элСмСнтов, β€” ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ², тСкста, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ β€” ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ подходят для выполнСния Π·Π°Π΄Π°Ρ‡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с располоТСниСм Π΄Π°Π½Π½Ρ‹Ρ… элСмСнтов Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ Π±Ρ‹Π» простым ΠΈ понятным Π² использовании.

Главная Ρ†Π΅Π»ΡŒ β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ взаимодСйствиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ максимально простым ΠΈ эффСктивным.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½Ρ‹Π΅ элСмСнты Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ (ΠΏΡ€Π°Π²Π΄Π° этим Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ):

● Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния Π²Π²ΠΎΠ΄ΠΎΠΌ: Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки, ΠΊΠ½ΠΎΠΏΠΊΠΈ, тСкстовыС поля, ΠΊΠ½ΠΎΠΏΠΊΠΈ нСзависимой ΠΈ зависимой фиксации, ΠΎΠΊΠ½Π° списков, поля Π΄Π°Ρ‚Ρ‹, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ.
● Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ: слайдСр, ΠΏΠΎΠ»Π΅ поиска, навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°, нумСрация страничСк, Ρ‚Π΅Π³ΠΈ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ элСмСнты: ΠΈΠΊΠΎΠ½ΠΊΠΈ, полоса Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, увСдомлСния, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΠΎΠΊΠ½Π° сообщСния.

● ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹: Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½.
● НСобходимыС инструмСнты: Sketch, Illustrator, Photoshop, Fireworks ΠΈ InVision.

IA (информационная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π°)

UX, UI, IA, IxD: опрСдСлСния Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… слоТных Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΈΠ»ΠΈ IA Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎ, ΠΊΠ°ΠΊ структурировано ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ сайт, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Главная Ρ†Π΅Π»ΡŒ β€” ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π°ΠΉΡ‚ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ.

Π˜Π½Ρ‹ΠΌΠΈ словами, информационная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° β€” созданиС структуры Π²Π΅Π±-сайта, прилоТСния ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, которая позволяСт ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Π³Π΄Π΅ ΠΌΡ‹ находимся, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ находится ТСлаСмая информация ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ нашСго полоТСния. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ созданию ΠΊΠ°Ρ€Ρ‚ Π²Π΅Π±-сайта, ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΉ, Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, классификаций, ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ….

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

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ трСбования ΠΊ соврСмСнному спСциалисту ΠΏΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅:

● ΠžΠΏΡ‹Ρ‚ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ комплСксных Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² (сайты, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния, систСмныС слуТбы ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹).
● ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π°Ρ докумСнтация, ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Π½Π°ΠΉΡ‚ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ нСсоотвСтствия, «кряки» Π² комплСксной Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайта.
● Π’Π»Π°Π΄Π΅Π½ΠΈΠ΅ Omnigraffle, Keynote, Axure, Π° Ρ‚Π°ΠΊΠΆΠ΅ Visio ΠΈ Π»ΡŽΠ±Ρ‹ΠΌΠΈ ΠΈΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСпосрСдствСнно связаны с IA.
● Анализ доступной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ рСсурсов для Π²Ρ‹Π±ΠΎΡ€Π° Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ IA.
● Π£Π²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ (устной ΠΈ письмСнной) ΠΈ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎ ΡΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‡Π°Ρ‚ΡŒ с ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ организациями.
● Π‘ΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ ΠΊ Π°Π½Π°Π»ΠΈΠ·Ρƒ, ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Ρ‚Ρ€ΡƒΠ΄ΠΎΠ»ΡŽΠ±ΠΈΠ΅, Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚ΡΡ‚Π²ΠΎ ΠΈ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ Π² идСях ΠΈ Π»ΡŽΠ΄ΡΡ….
● ΠΠ°Π΄Π΅ΠΆΠ½ΠΎΡΡ‚ΡŒ, ΠΈΠ½ΠΈΡ†ΠΈΠ°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, ΠΌΠΎΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ.

IxD (ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ взаимодСйствия)

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ IxD. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ взаимодСйствия опрСдСляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ структуру ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… систСм. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ взаимодСйствия ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ людьми, услугами ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ, ΠΎΡ‚ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² Π΄ΠΎ элСктроприборов.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ IxD ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ двиТущиСся элСмСнты, Π° Ρ‚Π°ΠΊΠΆΠ΅ взаимодСйствиС Π½Π° Π²Π΅Π±-сайтах/Π² прилоТСниях. Π’ случаС Ссли Π²Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ ΠΊΡ€ΡƒΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π° сайтС ΠΈ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π»ΠΈ: Β«Π’Π°Ρƒ! Как ΠΆΠ΅ классно!Β», β€” Π·Π½Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ это сдСлали ΠΌΠΎΡƒΡˆΠ΅Π½-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹.

ОписаниС Ρ€Π°Π±ΠΎΡ‚Ρ‹ IxD-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Google:

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

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

Π˜Ρ‚Π°ΠΊ, говоря Π±ΠΎΠ»Π΅Π΅ простыми словами, Π΄ΠΈΠ·Π°ΠΉΠ½ UX β€” Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ относится ΠΊ прилоТСниям. Π”ΠΈΠ·Π°ΠΉΠ½ UI β€” это Ρ‚ΠΎ, ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ… элСмСнтов состоит ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΈ Π³Π΄Π΅ ΠΎΠ½ΠΈ располоТСны. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ взаимодСйствия β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ.

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

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: blog.jazov.com

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *