Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI introduction

1,361 views

Published on

User Interface design - introduction.

Published in: Design

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

×