{"id":258296,"date":"2023-07-01T09:52:00","date_gmt":"2023-07-01T06:52:00","guid":{"rendered":"https:\/\/inform.click\/przewodnik-po-zasadach-projektowania-mobilnego-dla-handlu-elektronicznego\/"},"modified":"2023-07-01T10:19:00","modified_gmt":"2023-07-01T07:19:00","slug":"przewodnik-po-zasadach-projektowania-mobilnego-dla-handlu-elektronicznego","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/przewodnik-po-zasadach-projektowania-mobilnego-dla-handlu-elektronicznego\/","title":{"rendered":"Przewodnik po zasadach projektowania mobilnego dla handlu elektronicznego"},"content":{"rendered":"<p>\n  \u017byjemy w \u015bwiecie zaawansowanych technologii, w kt\u00f3rym prawie ka\u017cdy cz\u0142owiek ma na co dzie\u0144 dost\u0119p do Internetu za po\u015brednictwem r\u00f3\u017cnych urz\u0105dze\u0144.\n<\/p>\n<p>\n  Jeszcze kilka lat temu wi\u0119kszo\u015b\u0107 z nas u\u017cywa\u0142a do tego tylko komputer\u00f3w stacjonarnych, ale w ostatnich latach sytuacja si\u0119 zmieni\u0142a. Teraz urz\u0105dzenia mobilne przejmuj\u0105 inicjatyw\u0119, poniewa\u017c coraz wi\u0119cej os\u00f3b woli korzysta\u0107 z tablet\u00f3w i telefon\u00f3w kom\u00f3rkowych do surfowania po Internecie.\n<\/p>\n<p>\n  Sfera e-commerce nie jest wyj\u0105tkiem; obserwuje si\u0119 r\u00f3wnie\u017c wzrost wykorzystania urz\u0105dze\u0144 mobilnych. Obecnie bycie przyjaznym dla urz\u0105dze\u0144 mobilnych jest konieczno\u015bci\u0105 dla ka\u017cdej witryny eCommerce. Nawet Google traktuje przyjazno\u015b\u0107 dla urz\u0105dze\u0144 mobilnych jako sygna\u0142 rankingowy. Oto przegl\u0105d typ\u00f3w witryn mobilnych i szczeg\u00f3\u0142owy przewodnik po zasadach projektowania mobilnego w handlu elektronicznym.\n<\/p>\n<p>\n  Rodzaje witryn dostosowanych do urz\u0105dze\u0144 mobilnych\n<\/p>\n<p>\n  Istnieje kilka sposob\u00f3w tworzenia witryn przyjaznych dla urz\u0105dze\u0144 mobilnych, a oto najpopularniejsze: responsywny projekt, aplikacja mobilna i oddzielna mobilna wersja strony. Ka\u017cdy z tych typ\u00f3w ma swoje wady i zalety, kt\u00f3re nale\u017cy dok\u0142adnie rozwa\u017cy\u0107, zanim wybierzesz ten, kt\u00f3ry najbardziej pasuje do Twojej firmy. Oto bardziej szczeg\u00f3\u0142owy przegl\u0105d ka\u017cdego rozwi\u0105zania dla witryny przyjaznej dla urz\u0105dze\u0144 mobilnych.\n<\/p>\n<h5>\n  Elastyczny projekt<br \/>\n<\/h5>\n<p>\n  Jest to podej\u015bcie, gdy masz jedn\u0105 witryn\u0119, kt\u00f3ra jest renderowana r\u00f3wnie dobrze na wszystkich urz\u0105dzeniach: komputerach stacjonarnych, tabletach, r\u00f3\u017cnych telefonach kom\u00f3rkowych. Elementy strony (obrazy, czcionki, bloki itp.) s\u0105 zmieniane w zale\u017cno\u015bci od u\u017cywanej rozdzielczo\u015bci ekranu.\n<\/p>\n<p>\n  Wielk\u0105 zalet\u0105 responsywnego projektowania jest to, \u017ce u\u017cytkownik widzi t\u0119 sam\u0105 witryn\u0119 na wszystkich swoich urz\u0105dzeniach. Ale jednocze\u015bnie istniej\u0105 pewne wady, z kt\u00f3rych g\u0142\u00f3wn\u0105 jest konieczno\u015b\u0107 uwzgl\u0119dnienia wszystkich mo\u017cliwych scenariuszy i powszechnych rozdzielczo\u015bci ekranu. Projektant powinien zdecydowa\u0107, kt\u00f3re elementy b\u0119d\u0105 wy\u015bwietlane na wszystkich urz\u0105dzeniach, a kt\u00f3re s\u0105 mniej wa\u017cne i mo\u017cna je pomin\u0105\u0107 na ma\u0142ych wy\u015bwietlaczach. Co wi\u0119cej, uk\u0142ady adaptacyjne wymagaj\u0105 wi\u0119cej kodowania, co czasami mo\u017ce spowolni\u0107 witryn\u0119.\n<\/p>\n<p>\n  Ten typ strony mobilnej b\u0119dzie dobrym wyborem dla ma\u0142ych i \u015brednich sklep\u00f3w internetowych.\n<\/p>\n<h5>\n  Mobilna aplikacja<br \/>\n<\/h5>\n<p>\n  Aplikacja mobilna to dobry spos\u00f3b na przekazanie klientom wszystkich niezb\u0119dnych informacji w przyjazny dla u\u017cytkownika spos\u00f3b. Ale jednocze\u015bnie to rozwi\u0105zanie wymaga du\u017cych zasob\u00f3w, poniewa\u017c aplikacja mobilna jest rozwijana niezale\u017cnie od strony g\u0142\u00f3wnej. Ponadto aplikacja powinna by\u0107 stworzona na wszystkie platformy: iOS, Android, Windows Phone.\n<\/p>\n<p>\n  Aplikacja mobilna to dobry wyb\u00f3r dla du\u017cych sklep\u00f3w internetowych z wieloma kategoriami i produktami. Je\u015bli klient do\u015b\u0107 cz\u0119sto odwiedza witryn\u0119, aby co\u015b znale\u017a\u0107, kupi\u0107 lub zapyta\u0107, \u0142atwiej jest to zrobi\u0107 za po\u015brednictwem aplikacji ni\u017c witryny.\n<\/p>\n<h5>\n  Wersja mobilna<br \/>\n<\/h5>\n<p>\n  Wersja mobilna strony \u0142\u0105czy w sobie zalety responsywnego projektu i aplikacji mobilnej, dzi\u0119ki czemu jest optymalnym sposobem na przyjazno\u015b\u0107 dla urz\u0105dze\u0144 mobilnych.\n<\/p>\n<p>\n  Z jednej strony wersja mobilna jest rozwijana niezale\u017cnie od strony na komputery i mo\u017ce zawiera\u0107 tylko niezb\u0119dne bloki z mniejsz\u0105 ilo\u015bci\u0105 kodu. Z drugiej strony nie ma potrzeby projektowania i rozwijania wersji mobilnej dla ka\u017cdej platformy osobno, poniewa\u017c wersja mobilna strony b\u0119dzie dobrze wygl\u0105da\u0107 na wszystkich urz\u0105dzeniach i ekranach.\n<\/p>\n<p>\n  Niekt\u00f3re du\u017ce sklepy \u0142\u0105cz\u0105 powy\u017csze typy i oferuj\u0105 jednocze\u015bnie 2 warianty: wersj\u0119 mobiln\u0105 i aplikacj\u0119. Klient musi tylko zdecydowa\u0107, co b\u0119dzie dla niego najlepsze.\n<\/p>\n<p>\n  Bez wzgl\u0119du na to, jakiego wariantu potrzebuje sprzedawca, projektant powinien kierowa\u0107 si\u0119 okre\u015blonymi zasadami podczas projektowania witryny mobilnej. Poni\u017cej wymieni\u0119 najwa\u017cniejsze z nich. B\u0119d\u0119 m\u00f3wi\u0107 g\u0142\u00f3wnie o wersjach mobilnych, poniewa\u017c \u0142\u0105cz\u0105 one idee responsywnego projektowania i aplikacji.\n<\/p>\n<h3>\n  G\u0142\u00f3wne zasady projektowania mobilnego eCommerce<br \/>\n<\/h3>\n<p>\n  Je\u015bli masz do\u015bwiadczenie w projektowaniu witryn tylko na komputery, projektowanie dla urz\u0105dze\u0144 mobilnych mo\u017ce by\u0107 trudne. Tw\u00f3j projekt powinien by\u0107 nie tylko atrakcyjny, ale tak\u017ce przyjazny dla u\u017cytkownik\u00f3w mobilnych.\n<\/p>\n<p>\n  Je\u015bli chodzi o projektowanie na urz\u0105dzenia mobilne, g\u0142\u00f3wnym problemem jest rozmiar ekranu. Tablety i telefony kom\u00f3rkowe maj\u0105 znacznie mniejsze ekrany ni\u017c komputer stacjonarny. Ale nadal powiniene\u015b zapewni\u0107 u\u017cytkownikom mobilnym wygodn\u0105 nawigacj\u0119 i zapewni\u0107 bezproblemow\u0105 obs\u0142ug\u0119.\n<\/p>\n<h5>\n  Zasada 1: U\u017cyteczno\u015b\u0107<br \/>\n<\/h5>\n<p>\n  W dzisiejszych czasach projektant powinien tworzy\u0107 pi\u0119kne interfejsy z my\u015bl\u0105 o u\u017cyteczno\u015bci. Aby osi\u0105gn\u0105\u0107 maksymaln\u0105 efektywno\u015b\u0107 sklepu internetowego, dla kt\u00f3rego projektujesz, powiniene\u015b go lepiej pozna\u0107. Zacznij od bada\u0144 i odpowiedz na nast\u0119puj\u0105ce pytania:\n<\/p>\n<ul>\n<li>Jakie produkty s\u0105 tutaj sprzedawane?\n  <\/li>\n<li>Kim jest przeci\u0119tny klient tego sklepu?\n  <\/li>\n<li>Jakie opcje powinny by\u0107 dost\u0119pne? Kt\u00f3ra z tych opcji jest wa\u017cniejsza?\n  <\/li>\n<\/ul>\n<p>\n  Mo\u017cesz pomy\u015ble\u0107: jak to wszystko ma si\u0119 do projektowania mobilnego? Ciesz\u0119 si\u0119, \u017ce zapyta\u0142e\u015b! Powodem s\u0105 ma\u0142e rozmiary ekranu, kt\u00f3re powinny zawiera\u0107 tylko te bloki i opcje, kt\u00f3re s\u0105 naprawd\u0119 potrzebne.\n<\/p>\n<p>\n  U\u017cyteczno\u015b\u0107 to nie to, co widzi klient, to co\u015b, co czuje, przegl\u0105daj\u0105c mobilny sklep. Niech poczuje si\u0119 jak w domu.\n<\/p>\n<h5>\n  Zasada 2: Prototypowanie<br \/>\n<\/h5>\n<p>\n  Po zebraniu wszystkich niezb\u0119dnych informacji o firmie mo\u017cna przyst\u0105pi\u0107 do projektowania jej strony mobilnej. Lepiej zacz\u0105\u0107 od prototypu, co znacznie upraszcza proces. Prototyp powinien zawiera\u0107 wszystkie elementy strukturalne strony: bloki tekstowe, obrazy, linki, przyciski, nag\u0142\u00f3wki i tytu\u0142y, dane wej\u015bciowe itp. Prototypy mo\u017cna tworzy\u0107 w r\u00f3\u017cnych programach typu Photoshop czy Axure, a nawet na papierze.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Po pierwsze, prototyp pomo\u017ce Ci lepiej zrozumie\u0107 projekt. Tworz\u0105c go, dok\u0142adnie przemy\u015blisz wszystkie elementy i ich rozmieszczenie, dzi\u0119ki czemu kolejny etap \u2013 rysowanie projektu \u2013 b\u0119dzie znacznie prostszy.\n<\/p>\n<p>\n  Po drugie, tworz\u0105c prototyp oszcz\u0119dzasz du\u017co czasu na przysz\u0142e poprawki: lepiej robi\u0107 je na tym etapie ni\u017c na kolejnych.\n<\/p>\n<p>\n  Przed stworzeniem prototypu powiniene\u015b zdecydowa\u0107, na jakie urz\u0105dzenie go stworzysz: telefon kom\u00f3rkowy czy tablet. Ponadto we\u017a pod uwag\u0119, \u017ce ka\u017cde z tych urz\u0105dze\u0144 ma tryby pionowe i poziome. Zapisz wszystkie elementy konstrukcyjne, kt\u00f3re powinny znale\u017a\u0107 si\u0119 na Twoim prototypie, aby o niczym nie zapomnie\u0107.\n<\/p>\n<p>\n  Dla przyk\u0142adu na stron\u0119 g\u0142\u00f3wn\u0105 sklepu internetowego b\u0119dziemy potrzebowa\u0107: logo, kasy, paska wyszukiwania, nawigacji, blok\u00f3w produkt\u00f3w ze zdj\u0119ciami, tytu\u0142ami, kr\u00f3tkimi opisami i cen\u0105 oraz og\u00f3lnego tekstu o sklepie. Po wyliczeniu wszystkich tych element\u00f3w mo\u017cna przyst\u0105pi\u0107 do tworzenia 4 prototyp\u00f3w: dla telefonu kom\u00f3rkowego z trybem pionowym i poziomym oraz dla tabletu z trybem pionowym i poziomym.\n<\/p>\n<p>\n  Gdy prototypy b\u0119d\u0105 gotowe i zatwierdzone, mo\u017cesz przyst\u0105pi\u0107 do projektowania interfejsu.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cf9b544.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cf9b544.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Zasada 3: Interfejs<br \/>\n<\/h5>\n<p>\n  Interfejs jest pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 widzi odwiedzaj\u0105cy, gdy trafia do sklepu internetowego. Interfejs nadaje ton sklepu, kt\u00f3ry jest bardzo wa\u017cny, wi\u0119c Twoj\u0105 misj\u0105 jako projektanta jest nadanie temu tonowi pozytywnego charakteru i budowanie pozytywnego nastawienia.\n<\/p>\n<p>\n  Pom\u00f3\u017c odwiedzaj\u0105cym szybko zrozumie\u0107, gdzie si\u0119 znajduj\u0105, co mog\u0105 uzyska\u0107, z jakich funkcji i funkcji mog\u0105 korzysta\u0107. Mo\u017cna to osi\u0105gn\u0105\u0107 poprzez u\u017cycie okre\u015blonych kolor\u00f3w, wci\u0119\u0107, ikon, czcionek. Je\u015bli chcesz pokaza\u0107 kas\u0119 \u2013 dodaj ikon\u0119 kasy; je\u015bli chcesz wstawi\u0107 link \u2013 zaznacz go kolorem.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d205006.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d205006.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Zasada 4: Rozmiary<br \/>\n<\/h5>\n<p>\n  Istniej\u0105 2 podstawowe cechy charakterystyczne urz\u0105dze\u0144 mobilnych: ich rozmiar i spos\u00f3b, w jaki u\u017cytkownik wchodzi w interakcj\u0119 z witryn\u0105 za po\u015brednictwem tych urz\u0105dze\u0144: u\u017cywa palc\u00f3w, kt\u00f3re s\u0105 znacznie wi\u0119ksze ni\u017c kursor na pulpicie. Projektuj\u0105c dla urz\u0105dze\u0144 mobilnych, nale\u017cy pami\u0119ta\u0107 o tych cechach.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d3b318d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d3b318d.webp\" alt=\"\" \/><\/a><\/p>\n<ul>\n<li>\n<p>\n      <strong>Klikalny rozmiar obszaru:<\/strong>\n    <\/p>\n<p>\n      Ze wzgl\u0119du na powy\u017csze cechy urz\u0105dze\u0144 mobilnych optymalny rozmiar obszaru klikalnego powinien by\u0107 wi\u0119kszy ni\u017c 44x44px. Je\u015bli nie chcesz frustrowa\u0107 odwiedzaj\u0105cych b\u0142\u0119dnymi klikni\u0119ciami, postaraj si\u0119, aby wszystkie klikalne elementy (linki, przyciski, pasek wyszukiwania itp.) mia\u0142y rozmiar 44 x 44 pikseli lub wi\u0119kszy dla rozdzielczo\u015bci mdpi dla urz\u0105dze\u0144 z Androidem i wy\u015bwietlaczy innych ni\u017c Retina dla urz\u0105dze\u0144 z systemem iOS. W przypadku innych rozdzielczo\u015bci nale\u017cy zwi\u0119kszy\u0107 skal\u0119.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Rozmiar czcionki:<\/strong>\n    <\/p>\n<p>\n      Powiniene\u015b zapewni\u0107 odwiedzaj\u0105cym mo\u017cliwo\u015b\u0107 szybkiego skanowania i jednocze\u015bnie nie zapomina\u0107 o ich wzroku. Dlatego rozmiar czcionki nie powinien by\u0107 mniejszy ni\u017c 11 pkt. Rozmiar ten zapewnia dobr\u0105 czytelno\u015b\u0107 pod warunkiem, \u017ce jest u\u017cywany z kontrastowym t\u0142em. Jednak 11 pkt jest bardziej odpowiedni dla symboli zast\u0119pczych, wskaz\u00f3wek i mniej istotnych informacji. W przypadku opis\u00f3w produkt\u00f3w i wa\u017cnych blok\u00f3w tekstu bardziej odpowiedni jest rozmiar 13 pkt.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Rozmiar obraz\u00f3w produktu:<\/strong>\n    <\/p>\n<p>\n      Nie b\u0119dzie przesad\u0105, je\u015bli powiem, \u017ce zdj\u0119cia produkt\u00f3w s\u0105 odpowiedzialne za sprzeda\u017c produkt\u00f3w (w wi\u0119kszo\u015bci przypadk\u00f3w). Wiele os\u00f3b pomija czytanie szczeg\u00f3\u0142\u00f3w, potrzebuj\u0105 tylko zdj\u0119\u0107, kt\u00f3re pokazuj\u0105 produkt ze wszystkich mo\u017cliwych k\u0105t\u00f3w. Oznacza to, \u017ce obrazy produkt\u00f3w powinny by\u0107 zauwa\u017calne i wystarczaj\u0105co du\u017ce, aby umo\u017cliwi\u0107 klientom szczeg\u00f3\u0142owe zbadanie produktu. Mo\u017cesz nawet doda\u0107 do tego opcj\u0119 powi\u0119kszenia.\n    <\/p>\n<p>\n      Zdj\u0119cie produktu powinno zajmowa\u0107 nie mniej ni\u017c 45% szeroko\u015bci ekranu telefonu kom\u00f3rkowego w orientacji pionowej; i ponad 30% w orientacji poziomej. Pomo\u017ce to klientowi zapozna\u0107 si\u0119 z og\u00f3lnymi szczeg\u00f3\u0142ami produktu, a tak\u017ce zauwa\u017cy\u0107 jego specyfik\u0119. Je\u015bli chodzi o tablety, mo\u017cesz sam okre\u015bli\u0107 najlepszy rozmiar obraz\u00f3w.\n    <\/p>\n<p>\n      Opr\u00f3cz rozmiaru zdj\u0119\u0107, nale\u017cy r\u00f3wnie\u017c zwr\u00f3ci\u0107 uwag\u0119 na ich jako\u015b\u0107. Rzecz w tym, \u017ce wi\u0119kszo\u015b\u0107 nowoczesnych urz\u0105dze\u0144 mobilnych korzysta z wy\u015bwietlacza Retina, wi\u0119c obrazy w rozdzielczo\u015bci wy\u015bwietlacza 360x640px nie b\u0119d\u0105 dobrze wygl\u0105da\u0107 na ekranach o rozdzielczo\u015bci 720x1280px lub 1080x1920px. Nale\u017cy zawsze pami\u0119ta\u0107, \u017ce jako\u015b\u0107 zdj\u0119\u0107 jest jedn\u0105 z najwa\u017cniejszych rzeczy w sklepie internetowym.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Rozmiar ikon:<\/strong>\n    <\/p>\n<p>\n      Ikony s\u0105 postrzegane znacznie \u0142atwiej ni\u017c tekst, dlatego ikony s\u0105 zwykle u\u017cywane jako wskaz\u00f3wki zamiast tekstu. Z jednej strony ikony powinny by\u0107 zauwa\u017calne; ale z drugiej strony nie powinny by\u0107 zbyt wyeksponowane, poniewa\u017c pe\u0142ni\u0105 drugorz\u0119dn\u0105 rol\u0119. Na przyk\u0142ad, je\u015bli dodasz pasek wyszukiwania o wysoko\u015bci 44px, dodaj szk\u0142o powi\u0119kszaj\u0105ce o rozmiarze 24x24px. To wystarczy, aby u\u017cytkownik zrozumia\u0142 cel tego paska i b\u0119dzie \u0142adnie wygl\u0105da\u0142.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Rozmiar formularzy:<\/strong>\n    <\/p>\n<p>\n      Poni\u017cej om\u00f3wi\u0142em rozmiary poszczeg\u00f3lnych element\u00f3w, teraz czas na rozmiar wa\u017cnego bloku \u2013 formy.\n    <\/p>\n<p>\n      Rozmiar wy\u015bwietlacza telefonu kom\u00f3rkowego jest ograniczony, a gdy klient musi wype\u0142ni\u0107 formularz, pojawia si\u0119 klawiatura, kt\u00f3ra zajmuje mniej wi\u0119cej po\u0142ow\u0119 ekranu. Ta specyfika wymaga zachowania jak najbardziej minimalistycznych form mobilnych. Powinny zawiera\u0107 tylko te pola, kt\u00f3re s\u0105 naprawd\u0119 niezb\u0119dne: np. imi\u0119 i nazwisko, adres, e-mail. Nawiasem m\u00f3wi\u0105c, t\u0119 regu\u0142\u0119 mo\u017cna r\u00f3wnie\u017c zastosowa\u0107 do witryn na komputery, je\u015bli chcesz zwi\u0119kszy\u0107 liczb\u0119 potencjalnych klient\u00f3w: im mniej p\u00f3l ma formularz, tym wi\u0119cej os\u00f3b prawdopodobnie go prze\u015ble.\n    <\/p>\n<p>\n      D\u0142uga i nudna droga od jednego wej\u015bcia do drugiego mo\u017ce sfrustrowa\u0107 klienta i sk\u0142oni\u0107 go do opuszczenia sklepu.\n    <\/p>\n<\/li>\n<\/ul>\n<h5>\n  Zasada 5: Kolor<br \/>\n<\/h5>\n<p>\n  Styl marki nale\u017cy zachowa\u0107 nie tylko w logo, wizyt\u00f3wkach i ulotkach, ale tak\u017ce w witrynie mobilnej. To przede wszystkim kolor pomaga pokaza\u0107 styl marki oraz podkre\u015bli\u0107 kluczowy element ka\u017cdej strony.\n<\/p>\n<p>\n  Przed zaprojektowaniem interfejsu nale\u017cy przemy\u015ble\u0107, jakie kolory zostan\u0105 u\u017cyte i stworzy\u0107 palet\u0119. Je\u015bli u\u017cyjesz kilku kolor\u00f3w, interfejs b\u0119dzie wygl\u0105da\u0142 nudno; je\u015bli u\u017cyjesz zbyt wielu kolor\u00f3w, interfejs b\u0119dzie wygl\u0105da\u0142 zbyt ba\u0142aganiarsko i rozpraszaj\u0105co. Lepiej wi\u0119c zachowa\u0107 r\u00f3wnowag\u0119 i u\u017cy\u0107 6-10 kolor\u00f3w. Jest to optymalna liczba, ale oczywi\u015bcie mog\u0105 istnie\u0107 pewne wyj\u0105tki.\n<\/p>\n<p>\n  Oto przewodnik krok po kroku dotycz\u0105cy wybierania kolor\u00f3w dla witryny eCommerce:\n<\/p>\n<p>\n  Tworzone kombinacje kolor\u00f3w powinny by\u0107 harmonijne. Pami\u0119taj o kontra\u015bcie, kt\u00f3ry pomaga zwr\u00f3ci\u0107 uwag\u0119 odwiedzaj\u0105cych na najwa\u017cniejsze elementy, np. przycisk \u201eDodaj do koszyka&#8221;.\n<\/p>\n<ol>\n<li>Wybierz g\u0142\u00f3wny kolor witryny. B\u0119dzie odpowiada\u0107 za komunikowanie nastroju.\n  <\/li>\n<li>Wybierz kolor drugorz\u0119dny. Pomo\u017ce to g\u0142\u00f3wnemu kolorowi podkre\u015bli\u0107 r\u00f3\u017cne elementy.\n  <\/li>\n<li>Wybierz g\u0142\u00f3wny kolor dla opis\u00f3w produkt\u00f3w.\n  <\/li>\n<li>Wybierz kolor tytu\u0142\u00f3w. Tytu\u0142y powinny by\u0107 zauwa\u017calne.\n  <\/li>\n<li>Pami\u0119taj, \u017ce r\u00f3\u017cne podpowiedzi lub podpowiedzi nie powinny si\u0119 wyr\u00f3\u017cnia\u0107, ale nadal powinny by\u0107 widoczne.\n  <\/li>\n<li>Wa\u017cnym elementem jest cena produktu, podkre\u015bl j\u0105 kolorem.\n  <\/li>\n<li>Linki, przyciski i elementy nawigacyjne powinny by\u0107 postrzegane jako elementy klikalne, mo\u017cna to r\u00f3wnie\u017c osi\u0105gn\u0105\u0107 za pomoc\u0105 koloru.\n  <\/li>\n<li>W razie potrzeby mo\u017cesz wybra\u0107 wi\u0119cej odcieni wybranych kolor\u00f3w.\n  <\/li>\n<\/ol>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d592881.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d592881.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Zasada 6: Czcionki<br \/>\n<\/h5>\n<p>\n  Podobnie jak w przypadku kolor\u00f3w, mo\u017cesz utworzy\u0107 \u201epalet\u0119&#8221; czcionek, kt\u00f3rych zamierzasz u\u017cywa\u0107: sporz\u0105d\u017a list\u0119 nazw, rozmiar\u00f3w i styl\u00f3w czcionek.\n<\/p>\n<p>\n  Czcionki powinny charakteryzowa\u0107 si\u0119 du\u017c\u0105 czytelno\u015bci\u0105 i \u0142atwo przekazywa\u0107 informacje potencjalnym klientom. Dlatego unikaj zbyt skomplikowanych czcionek, kt\u00f3re s\u0105 trudne do odczytania: klienci nie b\u0119d\u0105 traci\u0107 czasu, pr\u00f3buj\u0105c zrozumie\u0107, co pr\u00f3bujesz zaoferowa\u0107.\n<\/p>\n<p>\n  Twoja \u201epaleta&#8221; czcionek mo\u017ce wygl\u0105da\u0107 jak zwyk\u0142y plik txt, w kt\u00f3rym zapisujesz nast\u0119puj\u0105ce informacje:\n<\/p>\n<p>\n  Nag\u0142\u00f3wek 1 \u2013 RobotoLight 36 pkt\n<\/p>\n<p>\n  Do Ciebie nale\u017cy decyzja, kt\u00f3rej czcionki u\u017cy\u0107 dla tego lub innego elementu. Ka\u017cda czcionka ma swoje w\u0142asne znaczenie i charakter, kt\u00f3ry zostanie przekazany do serwisu, dlatego nale\u017cy zachowa\u0107 ostro\u017cno\u015b\u0107 przy wyborze odpowiednich czcionek.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d79dd6d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d79dd6d.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Zasada 7: Adaptacja<br \/>\n<\/h5>\n<p>\n  Po przemy\u015bleniu rozwi\u0105za\u0144 UX dla mobilnego sklepu eCommerce, stworzeniu prototypu, stworzeniu palet kolor\u00f3w i czcionek oraz narysowaniu ostatecznego interfejsu, praca si\u0119 nie ko\u0144czy: czas na adaptacj\u0119.\n<\/p>\n<p>\n  Tworzysz sklep internetowy, kt\u00f3ry odwiedzaj\u0105cy zobacz\u0105 na swoich urz\u0105dzeniach mobilnych. Obecnie istnieje ogromna r\u00f3\u017cnorodno\u015b\u0107 urz\u0105dze\u0144 mobilnych o r\u00f3\u017cnych rozmiarach i rozdzielczo\u015bciach. Tworzenie prototypu dla ka\u017cdego z nich by\u0142oby bezproduktywne. Oznacza to, \u017ce podczas tworzenia g\u0142\u00f3wnego prototypu nale\u017cy zastanowi\u0107 si\u0119, kt\u00f3re elementy zostan\u0105 zmienione, rozci\u0105gni\u0119te lub nawet pomini\u0119te w zale\u017cno\u015bci od u\u017cywanego urz\u0105dzenia.\n<\/p>\n<p>\n  Adaptacja jest bardzo wa\u017cna w przypadku projektowania mobilnego. Spr\u00f3buj przetestowa\u0107 sw\u00f3j prototyp przynajmniej na najpopularniejszych rozdzielczo\u015bciach.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d99f749.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d99f749.webp\" alt=\"\" \/><\/a><\/p>\n<h3>\n  Ko\u0144cowe przemy\u015blenia<br \/>\n<\/h3>\n<p>\n  Chocia\u017c ten artyku\u0142 jest po\u015bwi\u0119cony zasadom projektowania mobilnych witryn eCommerce, niekt\u00f3re punkty mo\u017cna wykorzysta\u0107 r\u00f3wnie\u017c w przypadku witryn na komputery: interfejs, kolory, u\u017cyteczno\u015b\u0107, czcionki.\n<\/p>\n<p>\n  Pami\u0119taj, \u017ce zasady nie s\u0105 \u015bcis\u0142ymi prawami; mo\u017cesz nie pod\u0105\u017ca\u0107 za nimi przez ca\u0142y czas. Najwa\u017cniejsze jest, aby projektowa\u0107 z my\u015bl\u0105 o u\u017cyteczno\u015bci i z my\u015bl\u0105 o docelowych odbiorcach.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  \u0179r\u00f3d\u0142o nagrywania: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/11\/26\/ecommerce-mobile-design-principles\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u017byjemy w \u015bwiecie zaawansowanych technologii, w kt\u00f3rym prawie ka\u017cdy cz\u0142owiek ma na co dzie\u0144 dost\u0119p do Internetu za po\u015brednictwem r\u00f3\u017cnych urz\u0105dze\u0144. Jeszcze kilka lat temu wi\u0119kszo\u015b\u0107 z nas u\u017cywa\u0142a do tego tylko komputer\u00f3w stacjonarnych, ale w ostatnich latach sytuacja si\u0119 zmieni\u0142a. Teraz urz\u0105dzenia mobilne przejmuj\u0105 inicjatyw\u0119, poniewa\u017c coraz wi\u0119cej os\u00f3b woli korzysta\u0107 z tablet\u00f3w i telefon\u00f3w kom\u00f3rkowych do surfowania po Internecie. Sfera e-commerce nie jest wyj\u0105tkiem; obserwuje si\u0119 r\u00f3wnie\u017c wzrost wykorzystania urz\u0105dze\u0144 mobilnych. Obecnie bycie przyjaznym dla urz\u0105dze\u0144 mobilnych jest konieczno\u015bci\u0105 dla ka\u017cdej witryny eCommerce. Nawet Google traktuje przyjazno\u015b\u0107 dla urz\u0105dze\u0144 mobilnych jako sygna\u0142 rankingowy. Wi\u0119c tu \u2026<\/p>\n","protected":false},"author":1,"featured_media":149017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[123,201,526,604,695,58],"tags":[],"class_list":["post-258296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-narzedzia-internetowe","category-projektowanie-stron","category-roznorodny","category-technologia-i-nie-tylko","category-telefon-komorkowy-i-gadzety","category-web-i-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/comments?post=258296"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258296\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media\/149017"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media?parent=258296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/categories?post=258296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/tags?post=258296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}