{"id":3491,"date":"2019-09-12T09:03:01","date_gmt":"2019-09-12T07:03:01","guid":{"rendered":"http:\/\/itcraftapps.com\/pl\/?p=3491"},"modified":"2022-01-03T12:17:32","modified_gmt":"2022-01-03T11:17:32","slug":"mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design","status":"publish","type":"post","link":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/","title":{"rendered":"Mapa ekran\u00f3w aplikacji &#8211; podstawa dobrego UX\/UI design"},"content":{"rendered":"\n<script type=\"application\/ld+json\">\n    {\n      \"@context\": \"http:\/\/schema.org\",\n      \"@type\": \"Blog\",\n      \"name\": \"itCraftapps.com - Mobile App Development Blog\",\n      \"url\": \"https:\/\/itcraftapps.com\/pl\/blog\"\n    }\n  <\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n  \"@type\": \"WebPage\",\n  \"@id\": \"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/\"\n  },\n  \"headline\": \"Mapa ekran\u00f3w aplikacji \u2013 podstawa dobrego UX\/UI design\",\n \n    \"image\": [\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"scooter-sharing-app-user-flow.jpg\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow.jpg\",\n  \"description\": \"Mapa ekran\u00f3w aplikacji \u2013 podstawa dobrego UX\/UI design\",\n  \"name\": \"Mapa ekran\u00f3w aplikacji \u2013 podstawa dobrego UX\/UI design\"\n\n}\n  \n  ],\n  \n  \"datePublished\": \"2019-09-12\",\n  \"dateModified\": \"2020-03-04\",\n  \"author\": {\n  \"@type\": \"Person\",\n  \"name\": \"Piotr Nied\u017awiecki\",\n  \"jobTitle\": \"UX\/UI Designer\",\n  \"description\": \"UX\/UI Designerr at itCraft\"\n\n  },\n  \"publisher\": {\n  \"@type\": \"Organization\",\n  \"name\": \"itCraftapps.com\",\n  \"logo\": {\n  \"@type\": \"ImageObject\",\n  \"url\": \"https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png\"\n  },\n  \"description\": \"itCraftapps.com - Mobile App Development\"\n}}\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Spis tre\u015bci<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#1\">Czym jest mapa ekran\u00f3w?<\/a><\/span><br \/>&#8211; <span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#1a\">Rola mapy ekran\u00f3w<\/a><\/span><br \/>&#8211; <span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#1b\">Jak stworzy\u0107 map\u0119 ekran\u00f3w?<\/a><\/span><br \/>&#8211; <span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#1c\">Przyk\u0142ady map ekran\u00f3w<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#2\">Czym jest User Flow?<\/a><\/span><br \/>&#8211; <span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#2a\">Rola User Flow<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#3\">Czym jest jest \u201clow-fi wireframe\u201d?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#4\">Czym jest \u201chi-fi wireframe\u201d?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#5\">Jaka jest r\u00f3\u017cnica pomi\u0119dzy low-fi a high-fi wireframes?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#6\">Dlaczego warto korzysta\u0107 z UI Kit w procesie UX\/UI design<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#7\">Podsumowanie<\/a><\/span><\/li><\/ol>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"1\">Czym jest mapa ekran\u00f3w?<\/h2>\n\n\n\n<p>Mapa ekran\u00f3w to schemat przedstawiaj\u0105c\u0105 w graficzny spos\u00f3b poszczeg\u00f3lne ekrany aplikacji, ich po\u0142o\u017cenie (hierarchi\u0119) i wzajemne powi\u0105zania.&nbsp;<\/p>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\" id=\"1a\">Rola mapy ekran\u00f3w<\/h3>\n\n\n\n<p>Mapa pozwala na zobrazowanie liczby istotnych w projekcie ekran\u00f3w (o kt\u00f3rych wiadomo na tym etapie) i wzajemnych relacji pomi\u0119dzy nimi. Dzi\u0119ki niej mo\u017cliwie jest oszacowanie pracoch\u0142onno\u015bci projektowania <a href=\"https:\/\/itcraftapps.com\/pl\/zatrudnij-najlepszych-ui-ux-designerow-do-swojego-projektu\/\">UX\/UI<\/a>.<\/p>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\" id=\"1b\">Jak stworzy\u0107 map\u0119 ekran\u00f3w?<\/h3>\n\n\n\n<p>Map\u0119 ekran\u00f3w mo\u017cna wykona\u0107 za pomoc\u0105 dowolnego narz\u0119dzia. Mo\u017ce to by\u0107 program do grafiki komputerowej np. Adobe Illustrator, Photoshop lub do tworzenia diagram\u00f3w np. draw.io, whimsical. Wa\u017cne jest, aby map\u0119 mo\u017cna by\u0142o \u0142atwo i szybko edytowa\u0107. Powinna by\u0107 przejrzysta i czytelna zar\u00f3wno dla ca\u0142ego zespo\u0142u, jak i klienta.<\/p>\n\n\n\n<h4 class=\"has-text-align-left wp-block-heading\">Konwersja user stories do mapy ekran\u00f3w<\/h4>\n\n\n\n<p>Poszczeg\u00f3lne historyjki z \u201cUser stories\u201d s\u0105 grupowane w celu okre\u015blenia konkretnych ekran\u00f3w w aplikacji. Kolejne ekrany nanoszone s\u0105 na map\u0119 z uwzgl\u0119dnieniem hierarchii mi\u0119dzy nimi oraz mo\u017cliwych akcji (przej\u015b\u0107) wykonywanych przez u\u017cytkownika.&nbsp;<\/p>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\" id=\"1c\">Przyk\u0142ady map ekran\u00f3w<\/h3>\n\n\n\n<p>Pierwszym przyk\u0142adem mapy ekran\u00f3w jest mapa ekran\u00f3w dla aplikacji Truckersky, w\u0142asnego rozwi\u0105zania <a href=\"https:\/\/itcraftapps.com\/pl\/o-nas\/\">itCraft<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"407\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-1024x407.jpg\" alt=\"\" class=\"wp-image-3489\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-1024x407.jpg 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-300x119.jpg 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-768x305.jpg 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map.jpg 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Kolejnym przyk\u0142adem jest efekt naszych warsztat\u00f3w UX\/UI dla aplikacji, kt\u00f3ra s\u0142u\u017cy wynajmowaniu hulajn\u00f3g na minuty <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"782\" height=\"1024\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow-782x1024.jpg\" alt=\"\" class=\"wp-image-3487\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow.jpg 782w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow-229x300.jpg 229w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow-768x1006.jpg 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2\">Czym jest User Flow?<\/h2>\n\n\n\n<p>\u201cUser flow\u201d to diagram przedstawiaj\u0105cy \u015bcie\u017cki jakimi mo\u017ce pod\u0105\u017ca\u0107 u\u017cytkownik w aplikacji. Wyszczeg\u00f3lnia momenty decyzyjne, przedstawia mo\u017cliwe scenariusze. \u201cUser flow\u201d jest pomocny podczas analizowania dr\u00f3g\/sposob\u00f3w jakimi u\u017cytkownik mo\u017ce dotrze\u0107 do celu &#8211; rozwi\u0105za\u0107 dany problem.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2a\">Rola User Flow<\/h3>\n\n\n\n<p>Stworzenie User Flow pozwala unikn\u0105\u0107 rozwi\u0105za\u0144 wp\u0142ywaj\u0105cych na: wyd\u0142u\u017cenie czasu dzia\u0142ania aplikacji\/reakcji u\u017cytkownika, \u0142atwo\u015b\u0107 <br \/>z jak\u0105 u\u017cytkownik porusza si\u0119 w aplikacji. Dzi\u0119ki niemu mo\u017cna okre\u015bli\u0107 tzw. \u201cpain points\u201d, i z wyprzedzeniem usprawni\u0107 proces np. poprzez wyeliminowanie ekran\u00f3w nadmiarowych.<br \/><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"700\" height=\"592\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/user-flow-example.png\" alt=\"\" class=\"wp-image-3490\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/user-flow-example.png 700w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/user-flow-example-300x254.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3\">Czym jest jest \u201clow-fi wireframe\u201d? <\/h2>\n\n\n\n<p>\u201cLow fidelity wireframes\u201d przedstawiaj\u0105 w uproszczony spos\u00f3b struktur\u0119\/szkielet ekran\u00f3w aplikacji. Ekrany prezentowane s\u0105 w spos\u00f3b og\u00f3lny, w odcieniach szaro\u015bci.&nbsp;<\/p>\n\n\n\n<p>Nacisk k\u0142adziony jest na odpowiednie roz\u0142o\u017cenie kluczowych element\u00f3w UI, hierarchi\u0119 mi\u0119dzy nimi. Ekrany charakteryzuje \u0142atwo\u015b\u0107 z jak\u0105 mo\u017cna je narysowa\u0107, edytowa\u0107, powieli\u0107. Dzi\u0119ki powy\u017cszym \u201clow-fi wireframes\u201d powstaj\u0105 w bardzo kr\u00f3tkim czasie. Daj\u0105 przez to mo\u017cliwo\u015b\u0107 om\u00f3wienia ekran\u00f3w z zespo\u0142em, klientem i wprowadzanie ewentualnych zmiany, ju\u017c we wst\u0119pnej fazie projektu.<\/p>\n\n\n\n<p>Mog\u0105 by\u0107 przygotowane na kartce papieru, b\u0105d\u017a te\u017c w dedykowanym do tego programie typu: Sketch, Proto.io, UXPin, Axure, Balsamiq. Wyb\u00f3r narz\u0119dzia jest zupe\u0142nie dowolny.<br \/><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"448\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1-1024x448.jpg\" alt=\"\" class=\"wp-image-3486\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1-1024x448.jpg 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1-300x131.jpg 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1-768x336.jpg 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"733\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1024x733.jpg\" alt=\"\" class=\"wp-image-3485\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-1024x733.jpg 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-300x215.jpg 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes-768x550.jpg 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-low-fi-wireframes.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4\">Czym jest \u201chi-fi wireframe\u201d?<\/h2>\n\n\n\n<p>\u201cHigh fidelity wireframe\u201d jest rozwini\u0119ciem, uszczeg\u00f3\u0142owion\u0105 struktur\u0105 \u201clow-fidelity\u201d (powy\u017cej). Zawiera dopracowane elementy UI (odpowiednie dla danej platformy np. <a href=\"https:\/\/itcraftapps.com\/pl\/zatrudnij-najlepszych-programistow-ios-do-swojego-projektu\/\">iOS<\/a>), teksty, grafiki nawi\u0105zuj\u0105ce do przysz\u0142ego wygl\u0105du aplikacji.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"918\" height=\"773\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/Truckerbook-app-hi-fi-wireframes.jpg\" alt=\"\" class=\"wp-image-3488\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/Truckerbook-app-hi-fi-wireframes.jpg 918w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/Truckerbook-app-hi-fi-wireframes-300x253.jpg 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/Truckerbook-app-hi-fi-wireframes-768x647.jpg 768w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"918\" height=\"773\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/pixoo-app-hi-fi-wireframes.jpg\" alt=\"\" class=\"wp-image-3484\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/pixoo-app-hi-fi-wireframes.jpg 918w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/pixoo-app-hi-fi-wireframes-300x253.jpg 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/pixoo-app-hi-fi-wireframes-768x647.jpg 768w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5\">Jaka jest r\u00f3\u017cnica pomi\u0119dzy low-fi a high-fi wireframes?<\/h2>\n\n\n\n<p>G\u0142\u00f3wn\u0105 r\u00f3\u017cnic\u0105 pomi\u0119dzy tymi dwoma podej\u015bciami do \u201cwireframes\u201d jest poziom szczeg\u00f3\u0142owo\u015bci. <br \/>W \u201clow-fidelity wireframes\u201d skupiamy si\u0119 na zaprezentowaniu g\u0142\u00f3wnych funkcjonalno\u015bci, nie przejmuj\u0105c si\u0119 za bardzo wygl\u0105dem element\u00f3w, tre\u015bciami, obrazkami &#8211; zast\u0119pujemy je np. pustymi kontenerami (placeholder\u2019ami).&nbsp;<\/p>\n\n\n\n<p>\u201cLow-fidelity wireframes\u201d nie s\u0105 odzwierciedleniem tego jak aplikacja b\u0119dzie wygl\u0105da\u0142a w przysz\u0142o\u015bci. Przedstawiaj\u0105 og\u00f3lny zamys\u0142, wizj\u0119 aplikacji, powstaj\u0105 szybko. Pomagaj\u0105 w dyskusji z zespo\u0142em oraz klientem w procesie koncepcyjnym, podczas ustalania zakresu.<br \/>W \u201chigh-fidelity wireframes\u201d doprecyzowujemy ustalone ekrany \u201clow-fi\u201d. S\u0105 one bardziej pracoch\u0142onne. Przechodzimy na \u201cwy\u017cszy poziom szczeg\u00f3\u0142owo\u015bci\u201d &#8211; nadajemy odpowiednie (rzeczywiste) kszta\u0142ty, teksty, elementy UI, dbamy o ich rozmieszczenie, ustalamy hierarchi\u0119, w tym tak\u017ce tekst\u00f3w i obrazk\u00f3w. <br \/>\u201cHigh-fidelity wireframes\u201d daj\u0105 lepszy obraz tego jak aplikacja b\u0119dzie wygl\u0105da\u0107 w przysz\u0142o\u015bci.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6\">Dlaczego warto korzysta\u0107 z UI Kit w procesie UX\/UI design<\/h2>\n\n\n\n<p>Przy projektowaniu interfejs\u00f3w aplikacji np. dla urz\u0105dze\u0144 Android, iOS nale\u017cy pami\u0119ta\u0107, \u017ce posiadaj\u0105 one, charakterystyczne dla danej platformy rozwi\u0105zania i wygl\u0105d. Niekt\u00f3re elementy UI iOS, Android mog\u0105 zasadniczo r\u00f3\u017cni\u0107 si\u0119 w wygl\u0105dzie, b\u0105d\u017a dzia\u0142aniu np. buttons, date pickers, input fields, notifications. Producenci mobilnych system\u00f3w <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/\" target=\"_blank\">Apple<\/a> i <a href=\"https:\/\/material.io\/design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Google<\/a> udost\u0119pniaj\u0105 na swoich stronach kompletne wytyczne (design guidelines), a tak\u017ce gotowe do pobrania komponenty.<br \/>Chc\u0105c u\u0142atwi\u0107 sobie proces projektowania i zaoszcz\u0119dzi\u0107 czas (nie musz\u0105 \u201crysowa\u0107 element\u00f3w od zera\u201d), projektanci cz\u0119sto korzystaj\u0105 z gotowych zestaw\u00f3w\/bibliotek UI &#8211; UI Kit. Zawieraj\u0105 one gotowe elementy, kt\u00f3re mo\u017cna importowa\u0107 do projekt\u00f3w i dostosowywa\u0107 do w\u0142asnych potrzeb. W zale\u017cno\u015bci od tego, czy projektujemy wireframe low-fidelity, high fidelity, finalny interfejs na platform\u0119 iOS lub Android, mamy do dyspozycji szereg r\u00f3\u017cnych UI Kit.<br \/><br \/><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7\">Podsumowanie<\/h2>\n\n\n\n<p><strong>Poni\u017cej przedstawiamy szereg benefit\u00f3w przej\u015bcia przez wszystkie te etapy projektowania interfejsu dla aplikacji mobilnej:<\/strong><br \/><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Klient oszcz\u0119dza czas i zasoby (szybka droga weryfikacji koncepcji produktu),<\/li><li>Niewielka liczba specjalist\u00f3w potrzebna do rozpocz\u0119cia procesu, co przek\u0142ada si\u0119 na ni\u017csze koszta,<\/li><li>Klient jest obecny na ka\u017cdym z etap\u00f3w przez co ma realny wp\u0142yw i kontrol\u0119 nad funkcjonalno\u015bci\u0105 i wygl\u0105dem aplikacji,<\/li><li>Klient zyskuje pewno\u015b\u0107, \u017ce aplikacja b\u0119dzie odpowiedzi\u0105 na potrzeby u\u017cytkownik\u00f3w,<\/li><li>Szybszy development aplikacji (zesp\u00f3\u0142 jest od samego pocz\u0105tku obecny w projekcie i posiada podgl\u0105d i wp\u0142yw na to jak aplikacja dzia\u0142a i wygl\u0105da),<\/li><li>Mo\u017cliwo\u015b\u0107 wczesnego przetestowania aplikacji. W kr\u00f3tkim czasie powstaje \u201cklikalny prototyp\u201d, kt\u00f3rego dzia\u0142anie jest zbli\u017cone do finalnej aplikacji,&nbsp;<\/li><li>Du\u017ca elastyczno\u015b\u0107 procesu projektowania. Zmiany mog\u0105 by\u0107 wprowadzane szybko, a ich efekty s\u0105 widoczne natychmiast.<\/li><\/ul>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>&#8222;image&#8221;: [ { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;scooter-sharing-app-user-flow.jpg&#8221;, &#8222;url&#8221;:&#8221;https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/scooter-sharing-app-user-flow.jpg&#8221;, &#8222;description&#8221;: &#8222;Mapa ekran\u00f3w aplikacji \u2013 podstawa dobrego UX\/UI design&#8221;, &#8222;name&#8221;: &#8222;Mapa ekran\u00f3w aplikacji \u2013 podstawa dobrego UX\/UI design&#8221; } ], &#8222;datePublished&#8221;: &#8222;2019-09-12&#8221;, &#8222;dateModified&#8221;: &#8222;2020-03-04&#8221;, &#8222;author&#8221;: { &#8222;@type&#8221;: &#8222;Person&#8221;, &#8222;name&#8221;: &#8222;Piotr Nied\u017awiecki&#8221;, &#8222;jobTitle&#8221;: &#8222;UX\/UI Designer&#8221;, &#8222;description&#8221;: &#8222;UX\/UI Designerr at itCraft&#8221; }, &#8222;publisher&#8221;: { &#8222;@type&#8221;: &#8222;Organization&#8221;, &#8222;name&#8221;: &#8222;itCraftapps.com&#8221;, &#8222;logo&#8221;:&hellip;<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[15,13],"tags":[],"class_list":{"0":"post-3491","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-tworzenie-aplikacji","7":"category-ux-ui-design"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mapa ekran\u00f3w aplikacji - podstawa dobrego UX\/UI design - itCraft blog<\/title>\n<meta name=\"description\" content=\"Zobrazij struktur\u0119 aplikacji, interakcje i oszacuj czas projektowania. #uix #aplikacje #UX\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mapa ekran\u00f3w aplikacji - podstawa dobrego UX\/UI design - itCraft blog\" \/>\n<meta property=\"og:description\" content=\"Zobrazij struktur\u0119 aplikacji, interakcje i oszacuj czas projektowania. #uix #aplikacje #UX\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Aplikacje mobilne i webowe dla firm | itCraft\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-12T07:03:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-03T11:17:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-1024x407.jpg\" \/>\n<meta name=\"author\" content=\"itcseo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mapa ekran\u00f3w aplikacji - podstawa dobrego UX\/UI design - itCraft blog","description":"Zobrazij struktur\u0119 aplikacji, interakcje i oszacuj czas projektowania. #uix #aplikacje #UX","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/","og_locale":"pl_PL","og_type":"article","og_title":"Mapa ekran\u00f3w aplikacji - podstawa dobrego UX\/UI design - itCraft blog","og_description":"Zobrazij struktur\u0119 aplikacji, interakcje i oszacuj czas projektowania. #uix #aplikacje #UX","og_url":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/","og_site_name":"Aplikacje mobilne i webowe dla firm | itCraft","article_published_time":"2019-09-12T07:03:01+00:00","article_modified_time":"2022-01-03T11:17:32+00:00","og_image":[{"url":"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-1024x407.jpg","type":"","width":"","height":""}],"author":"itcseo","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/","url":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/","name":"Mapa ekran\u00f3w aplikacji - podstawa dobrego UX\/UI design - itCraft blog","isPartOf":{"@id":"https:\/\/itcraftapps.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#primaryimage"},"image":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#primaryimage"},"thumbnailUrl":"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map-1024x407.jpg","datePublished":"2019-09-12T07:03:01+00:00","dateModified":"2022-01-03T11:17:32+00:00","author":{"@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7"},"description":"Zobrazij struktur\u0119 aplikacji, interakcje i oszacuj czas projektowania. #uix #aplikacje #UX","breadcrumb":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#primaryimage","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map.jpg","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/09\/truckersky-app-screens-map.jpg","width":1999,"height":794},{"@type":"BreadcrumbList","@id":"https:\/\/itcraftapps.com\/pl\/blog\/mapa-ekranow-aplikacji-podstawa-dobrego-ux-ui-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itcraftapps.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Mapa ekran\u00f3w aplikacji &#8211; podstawa dobrego UX\/UI design"}]},{"@type":"WebSite","@id":"https:\/\/itcraftapps.com\/pl\/#website","url":"https:\/\/itcraftapps.com\/pl\/","name":"Aplikacje mobilne i webowe dla firm | itCraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itcraftapps.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7","name":"itcseo","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1775153629","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1775153629","caption":"itcseo"},"url":"https:\/\/itcraftapps.com\/pl\/blog\/author\/itcseo\/"}]}},"_links":{"self":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/comments?post=3491"}],"version-history":[{"count":0,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3491\/revisions"}],"wp:attachment":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media?parent=3491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/categories?post=3491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/tags?post=3491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}