UI introduction

1,235 views

Published on

User Interface design - introduction.

Published in: Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,235
On SlideShare
0
From Embeds
0
Number of Embeds
441
Actions
Shares
0
Downloads
0
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

UI introduction

  1. 1. ВЪВЕДЕНИЕ И ПРИНЦИПИВ ДИЗАЙНА НА ПОТРЕБИТЕЛСКИИНТЕРФЕЙСUI & UX BASICSThursday, 18 April 13
  2. 2. UX & UI Basicswww.isavkov.netЗа какво ще си говорим?Какво е UIдизайн?Типографияв дизайнаПсихологияна цветоветеПринципи намодерния UIThursday, 18 April 13
  3. 3. UX & UI Basicswww.isavkov.netКакво е UIдизайн?Thursday, 18 April 13
  4. 4. UX & UI Basicswww.isavkov.netUI (user interface) се използва, за дадефинира как работят елементите, а некак изглеждатИнтерфейсът е вашият продуктОсновна цел: комуникацияТоп цел: Прост и елегантен, изчистен иконсистентенUI - User InterfaceThursday, 18 April 13
  5. 5. UX & UI Basicswww.isavkov.netЛейаут и позициониране на елементитеФорма и размерИзбор на цвятКонтрастТекстураОсновите на UI дизайнаThursday, 18 April 13
  6. 6. UX & UI Basicswww.isavkov.netИзползване на бялото пространствоЗаоблените ъгли дефинират границитеПредавайте значението с цветовеПривличайте вниманиетоСенки и тъмни фонове за фокусФокус върху ключови call-to-actionТехники за ефективен UI дизайнLabels в input полетатаИконки!Индикатори за действие: loading и т.н.Елементи свързани със съдържаниетоPopUP прозорци за потвърждениеHover елементиThursday, 18 April 13
  7. 7. UX & UI Basicswww.isavkov.netТипографияв дизайнаThursday, 18 April 13
  8. 8. UX & UI Basicswww.isavkov.netТипографията е мощен инструмент заефективна комуникацияТипографията съществува, за да въведеред в информацията, като я разделя иорганизираТипографията помага на потребителите данамерят това, което искат.ВъведениеTThursday, 18 April 13
  9. 9. UX & UI Basicswww.isavkov.netЧетимостЦвят и консистентностРазмер на букватаРазстояние между редоветеМежду буквено разстояниеПодредба и поддравняванеИзбор на правилния шрифтThursday, 18 April 13
  10. 10. UX & UI Basicswww.isavkov.netИзбор на правилния шрифтИзползвайComic Sansи ще гориш в Ада!!!Thursday, 18 April 13
  11. 11. UX & UI Basicswww.isavkov.netПсихологияна цветоветеThursday, 18 April 13
  12. 12. UX & UI Basicswww.isavkov.netИзберете правилната цветова палитраТествайте цветовата схема в прототипКакво мислят другите? (обратна връзка)3 прости правилаThursday, 18 April 13
  13. 13. UX & UI Basicswww.isavkov.netЦветовете и тяхното значениеОПТИМИЗЪМ ПРИЯТЕЛСТВО ДЪРЗОСТ КРЕАТИВНОСТДОВЕРИЕ СПОКОЙСТВИЕ БАЛАНС СВОБОДА ПРАЗНОТАЗАБАВЛЕНИЕThursday, 18 April 13
  14. 14. UX & UI Basicswww.isavkov.netОт къде да си набавим палитри?Сайтове:http://www.colourlovers.com,https://kuler.adobe.com/,http://mobile.colorotate.org/Създаване на собствени на базата наснимки сред природатаThursday, 18 April 13
  15. 15. UX & UI Basicswww.isavkov.netПринципина модерния UIThursday, 18 April 13
  16. 16. UX & UI Basicswww.isavkov.netПолзваемост?Ползваемост е когато имаш възможност даизползваш нещо по лесен и достъпенначин.Ползваемостта е директно свързана с UIThursday, 18 April 13
  17. 17. UX & UI Basicswww.isavkov.netКак измерваме ползваемостта?Интуитувен интерфейс, познат на потребителитеПо-малко мислене, по-добре!Брой направени грешкиВреме прекарано в сайта, докато търсятинформацияТествайте с хора, които нямат опит с UIПопитайте ги какво запомнихаThursday, 18 April 13
  18. 18. UX & UI Basicswww.isavkov.netПринципи на добрия UIКраткотрайната памет на човека, помни от 5 до 9елементаПотребителите не чакат повече от 2 секунди - ако сеналожи, предупредете ги.Достигане на информацията с не повече от 3 кликаРазбираема навигация и easy to follow менютаКонсистентност на бутонитеСъздайте чуство у потребителя, че той контролираинтерфейсаСтруктуриране на грешкитеБез излишна информацияThursday, 18 April 13
  19. 19. UX & UI Basicswww.isavkov.netБлагодаря,за вниманието!Thursday, 18 April 13

×