User Interface design - introduction.

1. ВЪВЕДЕНИЕ И ПРИНЦИПИ
В ДИЗАЙНА НА ПОТРЕБИТЕЛСКИ
ИНТЕРФЕЙС
UI & UX BASICS
Thursday, 18 April 13

2. UX & UI Basics
www.isavkov.net
За какво ще си говорим?
Какво е UI
дизайн?
Типография
в дизайна
Психология
на цветовете
Принципи на
модерния UI
Thursday, 18 April 13

3. UX & UI Basics
www.isavkov.net
Какво е UI
дизайн?
Thursday, 18 April 13

4. UX & UI Basics
www.isavkov.net
UI (user interface) се използва, за да
дефинира как работят елементите, а не
как изглеждат
Интерфейсът е вашият продукт
Основна цел: комуникация
Топ цел: Прост и елегантен, изчистен и
консистентен
UI - User Interface
Thursday, 18 April 13

5. UX & UI Basics
www.isavkov.net
Лейаут и позициониране на елементите
Форма и размер
Избор на цвят
Контраст
Текстура
Основите на UI дизайна
Thursday, 18 April 13

6. UX & UI Basics
www.isavkov.net
Използване на бялото пространство
Заоблените ъгли дефинират границите
Предавайте значението с цветове
Привличайте вниманието
Сенки и тъмни фонове за фокус
Фокус върху ключови call-to-action
Техники за ефективен UI дизайн
Labels в input полетата
Иконки!
Индикатори за действие: loading и т.н.
Елементи свързани със съдържанието
PopUP прозорци за потвърждение
Hover елементи
Thursday, 18 April 13

7. UX & UI Basics
www.isavkov.net
Типография
в дизайна
Thursday, 18 April 13

8. UX & UI Basics
www.isavkov.net
Типографията е мощен инструмент за
ефективна комуникация
Типографията съществува, за да въведе
ред в информацията, като я разделя и
организира
Типографията помага на потребителите да
намерят това, което искат.
Въведение
T
Thursday, 18 April 13

9. UX & UI Basics
www.isavkov.net
Четимост
Цвят и консистентност
Размер на буквата
Разстояние между редовете
Между буквено разстояние
Подредба и поддравняване
Избор на правилния шрифт
Thursday, 18 April 13

10. UX & UI Basics
www.isavkov.net
Избор на правилния шрифт
Използвай
Comic Sans
и ще гориш в Ада!!!
Thursday, 18 April 13

11. UX & UI Basics
www.isavkov.net
Психология
на цветовете
Thursday, 18 April 13

12. UX & UI Basics
www.isavkov.net
Изберете правилната цветова палитра
Тествайте цветовата схема в прототип
Какво мислят другите? (обратна връзка)
3 прости правила
Thursday, 18 April 13

13. UX & UI Basics
www.isavkov.net
Цветовете и тяхното значение
ОПТИМИЗЪМ ПРИЯТЕЛСТВО ДЪРЗОСТ КРЕАТИВНОСТ
ДОВЕРИЕ СПОКОЙСТВИЕ БАЛАНС СВОБОДА ПРАЗНОТА
ЗАБАВЛЕНИЕ
Thursday, 18 April 13

14. UX & UI Basics
www.isavkov.net
От къде да си набавим палитри?
Сайтове:
http://www.colourlovers.com,
https://kuler.adobe.com/,
http://mobile.colorotate.org/
Създаване на собствени на базата на
снимки сред природата
Thursday, 18 April 13

15. UX & UI Basics
www.isavkov.net
Принципи
на модерния UI
Thursday, 18 April 13

16. UX & UI Basics
www.isavkov.net
Ползваемост?
Ползваемост е когато имаш възможност да
използваш нещо по лесен и достъпен
начин.
Ползваемостта е директно свързана с UI
Thursday, 18 April 13

17. UX & UI Basics
www.isavkov.net
Как измерваме ползваемостта?
Интуитувен интерфейс, познат на потребителите
По-малко мислене, по-добре!
Брой направени грешки
Време прекарано в сайта, докато търсят
информация
Тествайте с хора, които нямат опит с UI
Попитайте ги какво запомниха
Thursday, 18 April 13

18. UX & UI Basics
www.isavkov.net
Принципи на добрия UI
Краткотрайната памет на човека, помни от 5 до 9
елемента
Потребителите не чакат повече от 2 секунди - ако се
наложи, предупредете ги.
Достигане на информацията с не повече от 3 клика
Разбираема навигация и easy to follow менюта
Консистентност на бутоните
Създайте чуство у потребителя, че той контролира
интерфейса
Структуриране на грешките
Без излишна информация
Thursday, 18 April 13

19. UX & UI Basics
www.isavkov.net
Благодаря,
за вниманието!
Thursday, 18 April 13