Π”ΠΈΠ·Π°ΠΉΠ½

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° мобильного прилоТСния – Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

07.10.2020

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

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с нуля Π΄ΠΎ PRO

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

ΠŸΠΎΠ»Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ мобильного прилоТСния β€” ΠΎΡ‚ создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π΄ΠΎ ΠΈΡ… ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

ВСстированиС Π³ΠΈΠΏΠΎΡ‚Π΅Π·

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ: быстроС ΠΊΠΎΡ€ΠΈΠ΄ΠΎΡ€Π½ΠΎΠ΅ тСстированиС, сСтСвоС ΠΈ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ….

ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

Грамотная ΠΈ увСрСнная ΠΏΠΎΠ΄Π°Ρ‡Π° ΠΈΠ΄Π΅ΠΈ ΠΈΠ»ΠΈ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° β€” Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ условиС успСха.

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

ВрСбования ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ различия Π² ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ интСрфСйсов для iOS ΠΈ Android.

UX-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π΄Π°Ρ‘Ρ‚ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Π½Ρ‹Π΅ прСимущСства ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² PlayMarket ΠΈ AppStore.

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ софт

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹, Π±Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ β€” Sketch, Figma, Zeplin.

skillbox.ru

9 бСсплатных инструмСнтов для Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйсов

1. Pixate

1-Dk7owAlIbAMHQMJHf98-lw

Pixate β€” ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для прототипирования ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, которая ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ большим Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слои, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ² ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ, Ρ‡Ρ‚ΠΎ самоС Π³Π»Π°Π²Π½ΠΎΠ΅, β€” ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΠΆΠΈΠ·Π½ΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π΅Π΅Ρ€Π° Pixate Π²Ρ‹ смоТСтС ΠΏΠΎΠ»ΠΈΡΡ‚Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΈ ΠΏΠΎΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΌΡƒ Π½Π° смартфонС (ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Android ΠΈ iOS). Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ плюс ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ β€” Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π½Π΅ΠΉ довольно просто. Π’ ΠΈΡ‚ΠΎΠ³Π΅ Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ прилоТСния, Π½Π΅ написав Π½ΠΈ строчки ΠΊΠΎΠ΄Π°.

Pixate β†’

2. Marvel

border

МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ прилоТСния сразу Π² Marvel ΠΈΠ»ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈΠ· Photoshop ΠΈΠ»ΠΈ Sketch. Π‘ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ (Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π²Π΅Π±-страница Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Marvel β†’

3. iPhone Mockup

1-GXevZ_dfAr2udjZnha0l4w

ΠŸΠΎΠΌΠΎΠΆΠ΅Ρ‚ быстро ΠΈ просто ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ скСтч ΠΌΠΎΠΊΠ°ΠΏΠ° iPhone. Всё, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, β€” ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ drag-and-drop ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты интСрфСйса. БСрвис Π½Π΅ годится для ΡΠ΅Ρ€ΡŒΡ‘Π·Π½ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π½ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ быстро Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою идСю ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с ΠΊΠ΅ΠΌ-Ρ‚ΠΎ набросками, iPhone Mockup для этого Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚.

iPhone Mockup β†’

4. Pencil Project

Page-Properties

Pencil Project β€” бСсплатный инструмСнт для прототипирования с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-страниц ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π•ΡΡ‚ΡŒ встроСнныС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ с популярными Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ, Π±Π»ΠΎΠΊ-схСмами ΠΈ элСмСнтами интСрфСйсов.

Pencil Project β†’

5. Form

imageview

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ ΠΈΡ… просмотра Π½Π° iPhone ΠΈΠ»ΠΈ iPad Ρ‡Π΅Ρ€Π΅Π· Wi-Fi ΠΈΠ»ΠΈ USB.

Form β†’

6. Use Your Iinterface

2016-05-24_17-32-43

ΠžΠ³Ρ€ΠΎΠΌΠ½Π°Ρ коллСкция Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… интСрфСйсов. Π—Π°Ρ…ΠΎΠ΄ΠΈΠΌ, вдохновляСмся интСрСсными Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ примСняСм ΠΈΠ΄Π΅ΠΈ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

Use Your Iinterface β†’

7. UX Myths

2016-05-24_17-37-26

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

UX Myths β†’

8. Mobile Patterns

2016-05-24_17-40-42

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… интСрфСйсов. ΠŸΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с творчСским кризисом. Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ плюс β€” всё Ρ€Π°Π·Π±ΠΈΡ‚ΠΎ ΠΏΠΎ катСгориям: ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€ΠΈ, списки, ΠΊΠ°Ρ€Ρ‚Ρ‹, настройки ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Mobile Patterns β†’

9. Good UI

2016-05-24_17-42-07

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ рСсурс с Ρ‚Π΅ΠΎΡ€ΠΈΠ΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйсов (ΠΎΠ΄Π½ΠΎ Β«Π½ΠΎΒ» β€” всС ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° английском). Π—Π΄Π΅ΡΡŒ собрано 75 ΠΈΠ΄Π΅ΠΉ ΠΏΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ Π²Π΅Π±-страниц. ВсС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Ρ‹ A/B-тСстированиСм.

Good UI β†’

lifehacker.ru

Π›ΡƒΡ‡ΡˆΠΈΠ΅ инструмСнты для создания Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

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

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

Sketch

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: macOS
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: Apple, Facebook, Google, Stripe, Nintendo
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Jira Cloud, Zeplin, Avocode, WeTransfer ΠΈ Ρ‚.Π΄.
  • Π¦Π΅Π½Π°: ΠžΡ‚ $99 Π² Π³ΠΎΠ΄

InVision

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: macOS
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: Airbnb, Amazon, HBO, Lyft
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Jira, Trello, Slack ΠΈ Ρ‚.Π΄.
  • Π¦Π΅Π½Π°: БСсплатно

Adobe XD

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: Windows, macOS, iOS ΠΈ Android
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Jira, Slack, Zeplin, Avocode ΠΈ Ρ‚.Π΄.
  • Π¦Π΅Π½Π°: платная вСрсия начинаСтся ΠΎΡ‚ $9.99 Π² мСсяц

UXPin

Marvel

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: Web
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: Buzzfeed, IBM, Stripe, Deliveroo ΠΈ Ρ‚.Π΄.
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Jira, Dropbox, Slack, Sketch ΠΈ Ρ‚.Π΄.
  • Π¦Π΅Π½Π°: ΠžΡ‚ $12 Π² мСсяц

Proto.io

Origami Studio

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: macOS
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Sketch, Photoshop ΠΈ Illustrator
  • Π¦Π΅Π½Π°: БСсплатно

Axure

Framer

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: macOS
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: Dropbox, Pinterest, Twitter, Disney ΠΈ Ρ‚.Π΄..
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Fiber
  • Π¦Π΅Π½Π°: ΠžΡ‚ $12 Π² мСсяц

Justinmind

Fluid UI

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: Windows, Linux, macOS, Web
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: Xerox, Oracle, Samsung, Siemens ΠΈ Ρ‚.Π΄.
  • Π¦Π΅Π½Π°: ΠžΡ‚ $8.25 Π² мСсяц

OmniGraffle

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: macOS, iOS
  • Π¦Π΅Π½Π°: ЛицСнзия ΠΎΡ‚ $99

Mockplus

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹: Windows, macOS, Android
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ: IBM, Microsoft, Oracle, Huawei ΠΈ Ρ‚.Π΄.
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ: Sketch
  • Π¦Π΅Π½Π°: ΠžΡ‚ $139.3 Π² Π³ΠΎΠ΄

Balsamiq

Если Π²Ρ‹ нашли ΠΎΠΏΠ΅Ρ‡Π°Ρ‚ΠΊΡƒ β€” Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl + Enter! Для связи с Π½Π°ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ info@apptractor.ru.

apptractor.ru

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с нуля Π΄ΠΎ PRO

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

ΠŸΠΎΠ»Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ мобильного прилоТСния β€” ΠΎΡ‚ создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π΄ΠΎ ΠΈΡ… ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

ВСстированиС Π³ΠΈΠΏΠΎΡ‚Π΅Π·

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ: быстроС ΠΊΠΎΡ€ΠΈΠ΄ΠΎΡ€Π½ΠΎΠ΅ тСстированиС, сСтСвоС ΠΈ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ….

ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

Грамотная ΠΈ увСрСнная ΠΏΠΎΠ΄Π°Ρ‡Π° ΠΈΠ΄Π΅ΠΈ ΠΈΠ»ΠΈ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° β€” Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ условиС успСха.

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

ВрСбования ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ различия Π² ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ интСрфСйсов для iOS ΠΈ Android.

UX-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π΄Π°Ρ‘Ρ‚ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Π½Ρ‹Π΅ прСимущСства ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² PlayMarket ΠΈ AppStore.

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ софт

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹, Π±Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ β€” Sketch, Figma, Zeplin.

skillbox.ru

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ быстрый ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ мобильного прилоТСния / Habr

На Ρ…Π°Π±Ρ€Π΅ ΡƒΠΆΠ΅ присутствуСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ количСство статСй, посвящСнных процСссу прототипирования Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния. Π•ΡΡ‚ΡŒ достаточно Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ с ΠΎΠ±Π·ΠΎΡ€Π°ΠΌΠΈ стандартов ΠΈ расчСтами, Π΅ΡΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ устройств, Π΅ΡΡ‚ΡŒ Ρ†ΠΈΠΊΠ» ΠΈΠ· Π΄Π²ΡƒΡ… статСй ΠΏΡ€ΠΎ процСсс Π²Ρ‹Π±ΠΎΡ€Π° инструмСнта для прототипирования. К соТалСнию, процСсс создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ освСщСн ΠΎΡ‡Π΅Π½ΡŒ скудно – Π² Π²ΠΈΠ΄Π΅ СдинствСнной ΡΡ‚Π°Ρ‚ΡŒΠΈ Π² 2010 Π³ΠΎΠ΄Ρƒ, ΠΈ ΠΏΠ°Ρ€Π° слов Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ: с Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ.

Π₯ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ эту ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π²Π°ΡˆΠ΅ΠΌΡƒ вниманию большой ΠΎΠ±Π·ΠΎΡ€ доступных инструмСнтов для прототипирования ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

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

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

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

Π‘Π°ΠΌΡ‹ΠΉ популярный инструмСнт создания быстрых ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

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

МоТно Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π½Π° доскС, стСнС, Π±ΡƒΠΌΠ°Π³Π΅. Однако этот способ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈ ряд нСдостатков:

  • ΠΏΠΎΡ‡Π΅Ρ€ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»Π° вся рабочая Π³Ρ€ΡƒΠΏΠΏΠ°, ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ самому ΠΏΠΎΡ‚ΠΎΠΌ Π½Π΅ Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ собствСнныС записи
  • ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΡ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Π±ΡƒΠΌΠ°ΠΆΠΊΠΈ ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎ ΠΏΠΎΡ‡Ρ‚Π΅ ΠΈΠ»ΠΈ скайпу, Π½ΠΎ Π±Π΅Π· пояснСний всС Ρ€Π°Π²Π½ΠΎ вряд Π»ΠΈ удастся ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ.
Как ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ ΠΈ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Β«Π±ΡƒΠΌΠ°ΠΆΠ½ΠΎΠ΅Β» ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π‘ΠΊΠ΅Ρ‚Ρ‡ΠΏΠ°Π΄ (SketchPad, Π‘ΠΊΠ΅Ρ‚Ρ‡Π±ΡƒΠΊ, sketchbook)

это Π±Π»ΠΎΠΊΠ½ΠΎΡ‚ Ρ€Π°Π·Π»ΠΈΠ½ΠΎΠ²Π°Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ. Π˜ΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΡƒΡŽ сСтку Π½Π° «экранС».
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ скСтчпада ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎ шаблонам: habrahabr.ru/post/152075

UI – Π±Π»ΠΎΠΊΠ½ΠΎΡ‚

это Ρ‚ΠΎΡ‚ ΠΆΠ΅ самый скСтчпад, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π΅Π· привязки ΠΊ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅. На Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π»ΡŽΠ±Ρ‹Π΅ прилоТСния

Π›Π΅ΠΊΠ°Π»Π°.

Удобная, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ, Π²Π΅Ρ‰ΡŒ, Π½ΠΎ Π² России Π² ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ΅ ΠΈΡ… Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Π¨Ρ‚Π°ΠΌΠΏΡ‹

Π’ российских ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ… Ρ‚ΠΎΠΆΠ΅ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ Ρƒ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎ ΠΈΠ·Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ΠΈΡŽ ΠΏΠ΅Ρ‡Π°Ρ‚Π΅ΠΉ, ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ самому ΠΈΠ· куска Ρ€Π΅Π·ΠΈΠ½Ρ‹, Ссли Ρ€ΡƒΠΊΠΈ достаточно прямыС. К соТалСнию, Ρ‡Π΅Ρ€Π½ΠΈΠ»Π° – Π²Π΅Ρ‰ΡŒ довольно маркая, поэтому Π»ΡƒΡ‡ΡˆΠ΅ всС-Ρ‚Π°ΠΊΠΈ Π½Π΅ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΈ ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ скСтчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с ΠΎΠ±Π·ΠΎΡ€ΠΎΠΌ Β«Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Ρ…Β» инструмСнтов Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠΌ, ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ самому интСрСсному:

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для создания быстрых ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²

Keynotopia
keynotopia.com
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π°Π·Ρ‹ шаблонов, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ссылки Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ для тСстирования Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² прототипирования. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Ρ‚Π½ΠΎΠ΅, ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… запросов.

POP
popapp.in
Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для Π»ΡŽΠ±ΠΈΡ‚Π΅Π»Π΅ΠΉ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ€ΡƒΠΊΠ°ΠΌΠΈ. РисуСтС, ΠΊΠ°Ρ‡Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° iPhone, Ρ„ΠΎΡ‚ΠΊΠ°Π΅Ρ‚Π΅, создаСтС раскадровку, тСстируСтС ΠΈ Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ. ВсС ΠΎΡ‡Π΅Π½ΡŒ просто.

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819
БоздаСтся ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, максимально ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½Ρ‹ΠΉ ΠΊ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. ΠœΠΎΠΆΠ΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈΠ»ΠΈ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½, Π½ΠΎ Π±Π΅Π· Π½Π°Π²Ρ‹ΠΊΠΎΠ² HTML, CSS ΠΈ JS Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ.

Proto.io
proto.io
SaaS Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для прототипирования. БСрвис Π½Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ понравился, Π½ΠΎ Π² бСсплатный ΠΏΠ°ΠΊΠ΅Ρ‚ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΡ‡Π΅Π½ΡŒ скудный Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, поэтому ΠΎΠ½ фактичСски бСсполСзСн. Π—Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ инструмСнт придСтся Π·Π°ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 24$.

Codiqa
codiqa.com
Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΎΠ±Π»Π°Ρ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π’Π° ΠΆΠ΅ модСль ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈ Π² proto.io. ΠšΠΎΠΌΡƒ-Ρ‚ΠΎ этот сСрвис ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅.

Mockingbird
gomockingbird.com
Битуация ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Π° Invision: имССтся конструктор, Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Π”Π° ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠ»ΠΎΡ…ΠΎ.

Lumzy
www.lumzy.com
ΠŸΡ€ΠΎΡˆΠ»Ρ‹ΠΉ Π²Π΅ΠΊ. Под смартфоны Ρ‚ΠΎΠΆΠ΅ Π½Π΅ удастся Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ.

iPhone Mockup Web App
iphonemockup.lkmc.ch
ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ являСтся имитация рисунка прилоТСния ΠΈ самого Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ, Π½ΠΎ это Π½Π΅ ΠΎΠΏΡ€Π°Π²Π΄Ρ‹Π²Π°Π΅Ρ‚ отсутствия возмоТности ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ связи ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ.

Axure RP
www.axure.com
habrahabr.ru/post/101938
ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° достаточно Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ, считаСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΠΈΠ΄Π΅Ρ€ΠΎΠ² Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ΄ iPhone ΠΈ iPad.

AppGyver
www.appgyver.com
На Π²Ρ‹Π±ΠΎΡ€ Π΄Π°ΡŽΡ‚ΡΡ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Android, iPhone ΠΈ iPad. ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ здСсь Π²Ρ‹ смоТСтС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»ΠΎΠ³ΠΈΠΊΡƒ прилоТСния Π±Π΅Π· Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€Π°Π±ΠΎΡ‚Π° вСдСтся с ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ набросками ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’ бСсплатном статусС Π²Ρ‹ смоТСтС ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сСрвис с 3 ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°ΠΌΠΈ. На мобильноС устройство ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Fluid Ui
www.fluidui.com
Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π½ΠΎ этот сСрвис ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ всСми Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ функциями. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, ΠΎΠ½ Π½Π΅ Ρ‚Π°ΠΊ изящСн, ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π·Π°Ρ‚ΠΎ позволяСт ΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² конструкторС, ΠΈ Π·Π°Π»ΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΏΡ€ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ связи ΠΌΠ΅ΠΆΠ΄Ρƒ страницами прилоТСния, ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚ для просмотра Π΄Ρ€ΡƒΠ·ΡŒΡΠΌ ΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ ΠΈ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅. БСрвис Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Windows Phone!

MockFlow
www.mockflow.com
Π˜ΠΌΠ΅Π΅Ρ‚ дСсктопноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвис, Ρ‡Ρ‚ΠΎ, нСсомнСнно, являСтся прСимущСством, Π½ΠΎ простой Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ скучно.

Mockingbot
www.mockingbot.com
Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎΠΉ инструмСнт, содСрТащий всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½ΠΎ, ΠΊ соТалСнию, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ iPhone.

Prototypr
prototypr.com
Π‘ΠΎΡ„Ρ‚ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² яблочных дСвайсов. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ β€” просто пСрСтаскиваСм Π½ΡƒΠΆΠ½Ρ‹Π΅ элСмСнты Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ ΠΎΠ΄Π½ΠΈΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ клавиши смотрим Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.

Balsamiq Mockups for Desktop
www.balsamiq.com
МоТно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ простой схСматичный ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля. Рисованая стилистика Π΄Π΅Π»Π°Π΅Ρ‚ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ инструмСнт вСсСлой ΠΈΠ³Ρ€ΡƒΡˆΠΊΠΎΠΉ.

iMockups for iPad
www.endloop.ca/imockups
Π ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ прямо Π½Π° iPad? Π›Π΅Π³ΠΊΠΎ! Для Π½Π΅Π³ΠΎ самого ΠΈ iPhone, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ. ΠšΠ°Ρ‡Π°Π΅ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ ΠΎΡ‚ простоты ΠΈ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

Interface 2
interface2.lesscode.co.nz
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ динамичСских ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² для iPhone ΠΈ iPad нСпосрСдствСнно Π½Π° самих устройствах всСго Π·Π° 10 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠ΅.
ДСмонстрация Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° устройствС Π±Π΅Π· программирования

Justinmind Prototyper
www.justinmind.com
Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для iPhone, Android ΠΈ iPad. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ мноТСство возмоТностСй, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π±ΠΎΡ‚Ρƒ с ТСстами ( Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°Ρ… ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Drag&Drop ΠΈ Ρ‚.Π΄.). К соТалСнию, бСсплатная вСрсия ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ шаблонами ΠΈ 10 ΠœΠ‘ мСста Π² ΠΎΠ±Π»Π°ΠΊΠ΅. Но Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈΠ°Π» Π½Π° 30 Π΄Π½Π΅ΠΉ

Π—Π° подсказку спасибо Glebcha

Mockko
www.mockko.com
БСсплатный on-line инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ экранами, просмотр ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π½Π° iPhone. БобствСнно, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для iPhone, сайт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Chrome ΠΈΠ»ΠΈ Safari. ΠžΠ±Π΅Ρ‰Π°ΡŽΡ‚ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚Π°ΠΊΠΆΠ΅ iPad.

Π—Π° подсказку спасибо n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Blend + SketchFlow, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ΄ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅:
ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Expression Blend + SketchFlow. Π§Π°ΡΡ‚ΡŒ 1. НСмного истории
ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Expression Blend + SketchFlow. Π§Π°ΡΡ‚ΡŒ 2. ΠžΡΠ½ΠΎΠ²Ρ‹

Π—Π° подсказку спасибо Ivnika

App Cooker
www.appcooker.com
ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ, ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΈΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ прилоТСния ΠΈ, ΠΊΠ°ΠΊ ΠΊΠΈΠ»Π»Π΅Ρ€-Ρ„ΠΈΡ‡Π°, прСдлагаСтся встроСнный инструмСнт ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΏΡ€ΠΈ Ρ†Π΅Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ.

Π—Π° подсказку спасибо Glebcha

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ нСбольшого ΠΎΠ±Π·ΠΎΡ€Π° Π·Π°ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‚ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π·Π°Ρ‚ΠΎ Π΄Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нарисованный Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ устройствС.

Mockabilly
www.mockabilly.com
Π£ΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π·Π°Π»ΠΈΠ²Π°Π΅Ρ‚Π΅ Π½Π° iPhone (поддСрТиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ эта ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°) ΠΈ тСстируСтС нСпосрСдствСнно Π½Π° самом устройствС.

Invision
www.invisionapp.com
БСсплатно доступСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π½ΠΎ Ссли Π½Π΅Ρ‚ нСобходимости ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π°ΠΌ понравится, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π΅Ρ‚. ΠŸΠ»Π°Ρ‚Π° взимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π° ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ количСства ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

LiveView
zambetti.com/projects/liveview
ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ просмотра Π½Π° экранС iPhone ΠΈ iPad ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ ΠΈ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π° Mac.

Π’Ρ‹Π²ΠΎΠ΄

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² для создания прототипирования ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство, здСсь описаны лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ…. Для сСбя ΠΌΡ‹ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡŒ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Π½Π°Π±ΠΎΡ€Π΅: скСтчпад для ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ прототипирования, ΠΈ Proto.IO/Fluid UI для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

А Ρ‡Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ Π²Ρ‹?

Π‘ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΠΈ написал ΠΌΠΎΠΉ ΠΊΠΎΠ»Π»Π΅Π³Π° АлСксандр ΠšΠΎΡ‡Π΅Π²Π°Π½ΠΎΠ² (aimh), Π·Π° Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ спасибо

habr.com

Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π§Π°ΡΡ‚ΡŒ 1: Android / Habr

Π­Ρ‚ΠΎΡ‚ Π΄ΠΎΠΊΠ»Π°Π΄ я ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π» Π½Π° Dribbble Meetup 2013, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΎΡˆΠ΅Π» Π² МосквС Π² Π”Π΅Π½ΡŒ космонавтики. Π’ Π½Ρ‘ΠΌ описан ΠΌΠΎΠΉ процСсс ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β€” Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² ΠΊΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹Π±ΠΎΡ€ интсрумСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π² Ρ€Π°Π±ΠΎΡ‚Π΅, ΠΈ сам процСсс ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌ ΠΏΡƒΡ‚Ρ‘ΠΌ, ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ ΠΏΡ€ΠΎΠ± ΠΈ ошибок. НадСюсь, ΠΎΠ½ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Π°ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ хотя Π±Ρ‹ ΠΎΡ‚ части Ρ€ΡƒΡ‚ΠΈΠ½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π’Π°ΠΊ ΠΊΠ°ΠΊ прСзСнтация содСрТит достаточно большоС количСство слайдов, я Ρ€Π΅ΡˆΠΈΠ» Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π½Π° Π΄Π²Π΅ части. ΠŸΠ΅Ρ€Π²Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ β€” интСграция Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ΄ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ Android. Вторая β€” ΠΏΠΎΠ΄ iOS ΠΈ Windows Phone, Π° Ρ‚Π°ΠΊΠΆΠ΅ упомяну ΠΏΡ€ΠΎ Samsung Bada. Π”Π°Π»ΡŒΡˆΠ΅ β€” ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ°


А Π½Π°Ρ‡Π½Ρƒ я свой рассказ с ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΡƒΠΆΠ΅ нарисовали ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ нашСго прилоТСния. Всё выглядит идСально, всё Π²Ρ‹Π²Π΅Ρ€Π΅Π½ΠΎ Π΄ΠΎ пиксСля.

ΠœΡ‹ ΠΎΡ‚Π΄Π°Π΅ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, Π° Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ЭВО.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ?! ΠžΡ‚Π²Π΅Ρ‚ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π΅Π½. Π’ΠΈΠ½ΠΎΠ²Π°Ρ‚Ρ‹ программисты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΡ€ΠΈΠ²ΠΎ всё запрогали… На самом Π΄Π΅Π»Π΅, НЕВ! Π•Ρ‰Π΅ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ программистов, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΠΌ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π° (Π’Π—), ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ спустя Ρ€ΡƒΠΊΠ°Π²Π°, ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Ρ…ΡƒΠΆΠ΅, Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ программист ΠΈ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½ Π΄Π΅Π»Π°Ρ‚ΡŒ всё Π½Π° своё усмотрСниС, Ρ€Π°Π· Π½Π΅Ρ‚Ρƒ Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ инструкции.

БпСцифкация Π΄ΠΈΠ·Π°ΠΉΠ½Π° (Π’Π—)


Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠ΄ спСцификациСй Π΄ΠΈΠ·Π°ΠΉΠ½Π° я понимаю Π½Π°Π±ΠΎΡ€ Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ программистам. По сути, ΠΈΡ… созданиС ΠΈ Π΅ΡΡ‚ΡŒ процСсс ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π£ Microsoft ΠΈ Google это называСтся blue, red, green lines. Π£ мСня это Ρ‚Ρ€ΠΈ ΠΏΠ°ΠΏΠΊΠΈ: Metrics, Fonts, Res.

Π‘ΠΎΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡŽ Π’Π— Π½Π°Π΄ΠΎ ΡƒΠ΄Π΅Π»ΠΈΡ‚ΡŒ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‚.ΠΊ. ΠΈΠΌΠ΅Π½Π½ΠΎ это Π²ΠΈΠ΄ΠΈΡ‚ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ вашСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, Π° Π½Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°.

Android


Рассмотрим ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 4-Ρ… основных Π² России ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ. И Π½Π°Ρ‡Π½Ρƒ я с самого тяТСлого для понимания… Android

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ тСорСтичСская Ρ‡Π°ΡΡ‚ΡŒ

НСмного Ρ‚Π΅ΠΎΡ€ΠΈΠΈ для понимания дальнСйшСго процСсса. Ни для ΠΊΠΎΠ³ΠΎ Π½Π΅ сСкрСт, Ρ‡Ρ‚ΠΎ экраны Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΈ Ρ€Π°Π·Π½Ρ‹Π΅ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ экраны Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ΠΈΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π°Π·Π½ΠΎΠΉ ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ. Она измСряСтся Π² Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… Π½Π° дюйм. Π’Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ 4 основных ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ плотности экрана для Android-устройств: LDPI, MDPI, HDPI, XHDPI, XXHDPI (ΠΏΠΎΠΊΠ° Π½Π΅ Π±Π΅Ρ€Ρ‘ΠΌ Π² расчёт). ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнты интСрфСйса ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ физичСский Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… устройств, компания Google Π²Π²Π΅Π»Π° Π°Π±ΡΡ‚Ρ€Π°ΠΊΡ‚Π½ΡƒΡŽ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ измСрСния β€” DP.

НС Π±ΡƒΠ΄Π΅ΠΌ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности ΠΎΡ‚ΠΊΡƒΠ΄Π° ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ эти Ρ†ΠΈΡ„Ρ€Ρ‹, Π° для сСбя Π·Π°ΠΏΠΎΠΌΠ½ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ dp Ρ€Π°Π²Π΅Π½ ΠΎΠ΄Π½ΠΎΠΌΡƒ физичСскому пиксСлю для экранов с ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ MDPI. БоотвСтствСнно, для XHDPI-экранов, 1 dp Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π΅Π½ 2 px (такая ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρƒ Google Nexus 4).

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠ°Ρ рСализация

Π’Π΅ΠΏΠ΅Ρ€ΡŒ приступаСм ΠΊ практичСской Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Π”Π°Π»ΡŒΡˆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ описан ΠΌΠΎΠΉ процСсс Ρ€Π°Π±ΠΎΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сформировался ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌ ΠΏΡƒΡ‚Π΅ΠΌ. НадСюсь, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π΅Π½.
Metrics

Π˜Ρ‚Π°ΠΊ, ΠΏΠ°ΠΏΠΊΠ° Metrics Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ элСмСнтов, отступами ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ ΠΈ ΠΎΡ‚ края экрана, Ρ†Π²Π΅Ρ‚Π° ΠΎΠ΄Π½ΠΎΡ‚ΠΎΠ½Π½Ρ‹Ρ… элСмСнтов β€” Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ дСлаСтся ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ).

ВсС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² DP.

Π― дСлаю ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для XHDPI-экранов (768Γ—1280, Nexus 4). А ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΏΠΎΠΌΠ½ΠΈΠΌ, для XHDPI 1 dp = 2 px. Но Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Photoshop, СстСствСнно, Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ dp, Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с пиксСлями, Ρ‚ΠΎ сначала я дСлаю Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ 1 dp ровнялся 1 px. Π—Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π² Image, ΠΆΠΌΡ‘ΠΌ Image Size, ΠΈ выставляСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 50%. Π“ΠΎΡ‚ΠΎΠ²ΠΎ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ 1 dp = 1 px.

МоТно ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ, Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊ Β«ΠΎΠ±Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΈΠ²Π°Π½ΠΈΡŽΒ» ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π”Π΅Π»Π°Ρ‚ΡŒ это Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π±Ρ‹Π»ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΌΠ½Π΅ попалось Π½Π° Π³Π»Π°Π·Π° ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ Ρ€Π°cΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Photoshop.

PNG EXPRESS β€” ΠΏΠ»Π°Ρ‚Π½ΠΎΠ΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, стоит 29 баксов. Но ΠΎΠ½ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ стоит. Для Photoshop, начиная с вСрсии CS5. Оно позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, Π½ΠΎ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π΅Π³ΠΎ, ΠΈΠΌΠ΅Π½Π½ΠΎ, для «образмСривания».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€
Π¨Π°Π³ 1. Допустим, Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ X (ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ) ΠΈ тСкстом Discard.
Π¨Π°Π³ 2. ΠŸΡ€ΠΎΡΡ‚ΠΎ выдСляСм эти Π΄Π²Π° слоя Π² Photoshop ΠΈ Π² PNG EXPRESS ΠΆΠΌΠ΅ΠΌ Margins.
Π¨Π°Π³ 3. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ само нарисуСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Если Ρ€Π°Π·ΠΌΠ΅Ρ€ получился Π½Π΅Π²Π΅Ρ€Π½Ρ‹ΠΌ, наш дизайнСрский косяк, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ тСкстовый слой Photoshop.

Π₯ΠΎΡ‚ΡŒ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ процСсс, всё ΠΆΠ΅ это Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ экономит ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Fonts

Папка Fonts Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ со всСм, Ρ‡Ρ‚ΠΎ касаСтся ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚, Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅, Photoshop-стили ΠΈ Ρ‚.Π΄. Π― вынСс Π΅Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ программистам Π±Ρ‹Π»ΠΎ Π»Π΅Π³Ρ‡Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Ρ‚Π°ΠΊΠΎΠΌ большом ΠΎΠ±ΠΈΠ»ΠΈΠΈ выносок, Ρ‚Π΅ΠΌ самым сократив количСство ошибок.

ВсС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² SP

1 SP = 1 DP, Ссли Π² настройках Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы установлСн ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Если Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° со Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π² настройках систСмы ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚. Если Π²Ρ‹ Π·Π°Π΄Π°Π»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² SP, Ρ‚ΠΎ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ подстроится ΠΏΠΎΠ΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚. Если Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ…, Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ останСтся Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€
Π¨Π°Π³ 1. Если Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Done, Ρ‚ΠΎ
Π¨Π°Π³ 2. ВыдСляСм этот слой Π² Photoshop ΠΈ Π² PNG EXPRESS ΠΆΠΌΠ΅ΠΌ Spec Font Features.
Π¨Π°Π³ 3. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΠ΅ описаниС ΡˆΡ€ΠΈΡ„Ρ‚Π°.

ΠžΠΏΡΡ‚ΡŒ сэкономили ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Resources

Папка Res Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ рСсурсы Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ для вашСго прилоТСния. Π­Ρ‚ΠΎ 4 ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ плотности экрана.

Для этого я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅.
Cut & Slice me β€” бСсплатноС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Photoshop. Волько для CS6. Оно позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ всю эту Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ.

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ наш PSD-ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ для XHDPI.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€
Π¨Π°Π³ 1. Нам Π½Π°Π΄ΠΎ Π½Π°Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ для нашСго прилоТСния.
Π¨Π°Π³ 2. ΠšΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π² ΠΏΠ°ΠΏΠΊΡƒ, Π² ΠΊΠΎΠ½Π΅Ρ† названия ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ добавляСм @. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, скрипт опрСдСляСт, Ρ‡Ρ‚ΠΎ эту ΠΏΠ°ΠΏΠΊΡƒ Π½Π°Π΄ΠΎ Π½Π°Ρ€Π΅Π·Π°Ρ‚ΡŒ.
Π¨Π°Π³ 3. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Android, ΠΆΠΌΠ΅ΠΌ Cut all assets.
Π¨Π°Π³ 4. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΎΠΌ Π½Π°Ρ€Π΅Π·Π°Π΅Ρ‚ наши ΠΈΠΊΠΎΠ½ΠΊΠΈ для 4-Ρ… Π½ΡƒΠΆΠ½Ρ‹Ρ… плотностСй экрана ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΈΡ… Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°ΠΏΠΊΠΈ.

ΠžΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Cut & Slice me для Π½Π°Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ· Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΠΈ ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ слоя.

Иногда Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Β«ΠΌΡ‹Π»ΡŒΠ½Ρ‹Ρ…Β» пиксСлСй, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ³Π΄Π° ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½ΡƒΡŽ сСтку ΠΏΡ€ΠΈ рСсайзС. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½Π°Π΄ΠΎ ΠΏΡ€ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ, ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ качСство Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΉ скриптом Ρ€Π°Π±ΠΎΡ‚Ρ‹. Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, ΠΏΠΎΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. ΠžΠΏΡΡ‚ΡŒ сэкономили ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

9.PNG

И Π΅Ρ‰Π΅ ΠΏΡ€ΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ. ВсС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ плашки для Android Π½Π°Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ Π½Π΅ фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π° Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ Β«Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌΠΈΒ».

Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ 9.png. Π”Π΅Π»Π°ΡŽΡΡ Ρ‚Π°ΠΊΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ· ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… png Π² NinePatchEditor. По сути, ΠΊ исходной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ добавляСтся с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ пиксСль, Π·Π°Π»ΠΈΡ‚Ρ‹ΠΉ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ. Π§Π΅Ρ€Π½Ρ‹ΠΉ пиксСль слСва ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Β«Ρ‚ΡΠ½ΡƒΡ‚ΡŒΡΡΒ» ваша ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, свСрху β€” Π·Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒ. ПиксСль справа ΠΈ снизу β€” Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Ρ‚Π½Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Всё!

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅: Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π§Π°ΡΡ‚ΡŒ 2: iOS, Windows Phone

habr.com

Как ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ интСрфСйса мобильного прилоТСния ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ?

Или Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вашСго Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° счастливым, Π° Ρ„ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΡ‡Π½ΠΎ свСрстанным ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ΡƒΒ».

АлСксандр ΠœΠΎΠΌΠΎΡ‚ΠΎΠ²

ΠšΠ°ΠΆΠ΄ΠΎΠΌΡƒ, ΠΊΡ‚ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ связан с мобильной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ, Π·Π½Π°ΠΊΠΎΠΌΡ‹ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΈ разногласия, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Π½Π° стыкС интСрСсов программиста ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° мобильного прилоТСния, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

ΠŸΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π² свой ΠΌΠ½ΠΎΠ³ΠΎΠ»Π΅Ρ‚Π½ΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹, я с ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠ³Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ:

Π”ΠΈΠ·Π°ΠΉΠ½ мобильного прилоТСния считаСтся Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для Π΅Π³ΠΎ вСрстки ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹, Π° это Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚.

ОсновноС, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚ вас Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ:

  1. Π”ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ прилоТСния, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ Π² Sketch, Figma, XD, Photoshop, Illustrator, Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ ссылки.
  2. Π”ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ прилоТСния, Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ Π² Zeplin, Sympli ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ инструмСнт для «просмотра ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³Π»Π°Π·Π°ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°Β», Π² Π²ΠΈΠ΄Π΅ ссылки.
  3. ΠšΠ°Ρ€Ρ‚Ρƒ экранов прилоТСния, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΡƒΡŽ Π² XMind, MS Visio ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΌ ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ инструмСнтС, Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ ссылки.
  4. ΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ Π² Marvel, InVision ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΌ ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ инструмСнтС (Sketch, XD, Figma, Framer, UXPin, ΠΈ ΠΏΡ€.) Π² Π²ΠΈΠ΄Π΅ сслыки.
  5. Иконки ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π² Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ для всСх плотностСй экранов Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»ΠΎΠ²: mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi β€” для Android ΠΈ @1x, @2x, @3xβ€” для iOS.
  6. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π² Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»ΠΎΠ².
  7. Π’ΠΈΠ΄Π΅ΠΎ-Ρ„Π°ΠΉΠ»Ρ‹ со всСми нСстандартными анимациями ΠΈΠ»ΠΈ ссылки Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

НСмного расскаТу ΠΏΠΎΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅ΠΉ ΠΏΡ€ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

НСпосрСдствСнно сам ΠΌΠ°ΠΊΠ΅Ρ‚

Π”ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ прилоТСния ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ Π² любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ Π²Π°ΠΌ ΠΈ вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅ инструмСнтС. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, это Sketch, XD, Figma, Photoshop ΠΈΠ»ΠΈ Illustrator. Π”Ρ€ΡƒΠ³ΠΈΠ΅ инструмСнты are fine as well, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ популярноС.

Π’ Ρ‡Ρ‘ΠΌ Π±Ρ‹ Π²Ρ‹ Π½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ, Π΅Ρ‰Ρ‘ Ρ€Π°Π· ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, всё Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² порядкС, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ:

  1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ pt Π² качСствС Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния.
  2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сСтка 8Γ—8 pt для Android ΠΈ 10Γ—10 pt для iOS ΠΈ ΠΊ Π½Π΅ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° привязка (Π° Π½Π΅ ΠΊ пиксСлю).
  3. ВсС Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Ρ‹ созданы для Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ppi (Π² @1x ΠΈΠ»ΠΈ mdpi).
  4. ВсС Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Ρ‹, Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ, ΠΏΠΎ возмоТности, всС слои Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎ ΠΏΡ€ΠΎΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Ρ‹ (Β«Rectangle copy 59Β» ΠΈΠ»ΠΈ Β«Group 12Β» Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ).
  5. ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ ΠΊΠ°ΠΊ Β«exportableΒ» ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ понятныС ΠΈΠΌΠ΅Π½Π°.
  6. НСт пустых ΠΈΠ»ΠΈ Π½Π΅Π΄ΠΎΠ΄Π΅Π»Π°Π½Π½Ρ‹Ρ… экранов, элСмСнтов.

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? Π­Ρ‚ΠΎ просто ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ качСства. Если ΠΌΠ°ΠΊΠ΅Ρ‚ сдСлан Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ, Ρ‚ΠΎ это Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Ρƒ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΊΠ°ΠΌ. Π›ΡƒΡ‡ΡˆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сразу.

ΠœΠ°ΠΊΠ΅Ρ‚ для «просмотра Π³Π»Π°Π·Π°ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°Β»

ΠœΠ°ΠΊΠ΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π² Zeplin ΠΈΠ»ΠΈ Sympli. Ну ΠΈΠ»ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылку для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² Figma ΠΈΠ»ΠΈ Sketch.

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? Π­Ρ‚ΠΎ дСлаСтся для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠ³ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС спСцификации (отступы, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ†Π²Π΅Ρ‚Π°, названия ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€.) ΠΈ ΠΏΡ€ΠΈ этом Π½Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ, ΠΊ слову, Ρƒ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π½Π΅ Π±Ρ‹Ρ‚ΡŒ.

ΠšΠ°Ρ€Ρ‚Π° экранов

ΠšΠ°Ρ€Ρ‚Π° экранов β€” это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π² сСбС всС экраны прилоТСния ΠΈ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.

НС самый наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½ΠΎ ΠΏΡ€ΠΈ блиТайшСм рассмотрСнии всё понятно

Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ дСйствиС, ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ Π΅Π³ΠΎ (ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ТСст ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· экранов Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½ΠΎΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅).

ΠšΠ°Ρ€Ρ‚Ρƒ экраном Π»ΡƒΡ‡ΡˆΠ΅ всСго Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π² инструмСнтах для составлСния mindmap’ов. Мои Π»ΡŽΠ±ΠΈΠΌΡ‹Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, XMind ΠΈ MS Visio.

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? ΠšΠ°Ρ€Ρ‚Π° экранов ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ прилоТСния. Из Π½Π΅Π΅ ΠΎΠ½ сразу ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π² стилС Β«Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, Ссли Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° это?Β».

ΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ

ΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ β€” это ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ†Π΅Π»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, согласно вашСй Π·Π°Π΄ΡƒΠΌΠΊΠ΅.

ΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Marvel

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? По Ρ‚Π΅ΠΌ ΠΆΠ΅ сообраТСниям, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊΠ°Ρ€Ρ‚Π° экранов. Одно ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌ. Но, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π±ΠΎΠ»Π΅Π΅ наглядСн для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈ для ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°.

Экспорт ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ

НуТно ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΏΠ°ΠΏΠΊΠ°ΠΌ всС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG для всСх 6-Ρ‚ΠΈ плотностСй экранов (mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi) для Android ΠΈ 3-Ρ… (@1x, @2x, @3x) для iOS. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG, Ρ‚ΠΎΠ³Π΄Π° достаточно ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ.

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ всС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎ ΠΏΡ€ΠΎΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Ρ‹ Π² соотвСтствии с ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ:

  1. Волько Π»Π°Ρ‚ΠΈΠ½ΠΈΡ†Π°.
  2. ВмСсто ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
  3. Волько Π½ΠΈΠΆΠ½ΠΈΠΉ рСгистр.
  4. Для ΠΈΠΊΠΎΠ½ΠΎΠΊ прСфикс Β«ic_Β», для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Β«ill_Β», для Ρ„ΠΎΡ‚ΠΎ Β«pic_Β».

Π˜Ρ‚ΠΎΠ³ΠΎ, Ρƒ вас Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ структура:

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? Если Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ сам ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ, Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Π½Π΅ Ρ‚Π°ΠΊ. ΠŸΠΎΠ΅Π΄Π΅Ρ‚ Ρ†Π²Π΅Ρ‚, ΠΈΠΊΠΎΠ½ΠΊΠΈ станут ΠΌΡ‹Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΡ… ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ Π½Π°Π·Π²Π°Ρ‚ΡŒ, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ΄ΠΈΡ‚ΡŒ. Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этого ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ всё самому. Π’ΠΎΠ³Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ просто скопируСт всё Π² Android Studio ΠΈΠ»ΠΈ XCode ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ счастлив.

Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹

НуТно ΡΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ всС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Если это ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ‚ΠΎ ссылку Π½Π° мСсто, Π³Π΄Π΅ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡƒΠΏΠΈΡ‚ΡŒ. Но Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹.

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? Если Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π²Π°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ сам, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π°ΠΉΠ΄Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ»ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π›ΡƒΡ‡ΡˆΠ΅ всСго Π±ΡƒΠ΄Π΅Ρ‚ просто ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ 2 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

Π’ΠΈΠ΄Π΅ΠΎ с анимациями

Если Π²Ρ‹ сдСлали ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠ»Π΅Π²ΡƒΡŽ Π½Π΅ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ интСрфСйса Π² After Effects ΠΈΠ»ΠΈ Principle ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΅Ρ‘ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎ Π΅Ρ‘ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ. МоТно ΠΊΠ°ΠΊ Π² Π²ΠΈΠ΄Π΅ΠΎ-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Ρ‚Π°ΠΊ ΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ GIF.

Если ΠΆΠ΅ Π²Ρ‹ просто Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Β«ΠΊΠ°ΠΊ Π²ΠΎΡ‚ Π² этом ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈΒ», Ρ‚ΠΎ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ссылки Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.

πŸ‘‰ Π—Π°Ρ‡Π΅ΠΌ это? Если Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ вашСй Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΎΠ½ просто Π΅Ρ‘ Π½Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ ΠΈ ваша Π·Π°Π΄ΡƒΠΌΠΊΠ° окаТСтся лишь Π·Π°Π΄ΡƒΠΌΠΊΠΎΠΉ.

Π˜Ρ‚ΠΎΠ³ΠΎ

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ„ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ZIP-Π°Ρ€Ρ…ΠΈΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отдаСтся счастливому Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΡƒΡŽ структуру:

ΠšΡ€ΠΎΠΌΠ΅ этого Π² Ρ„Π°ΠΉΠ»Π΅ ReadMe.TXT ΠΈΠ»ΠΈ Π² ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ письмС Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ссылки Π½Π°:

  1. ΠšΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ Π² Marvel, InVision (ΠΈΠ»ΠΈ Π² Sketch, XD, Figma, Framer, UXPin, ΠΈ ΠΏΡ€.).
  2. Π”ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ прилоТСния, Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ Π² Zeplin, Sympli (ΠΈΠ»ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ инструмСнт для «просмотра ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³Π»Π°Π·Π°ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°Β»).

designpub.ru

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

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