10 świetnych ściągawek UX / UI Design

Ściągawki UX/UI do zapisania

Każdy czasami potrzebuje pomocy, nawet profesjonaliści. Trudno zapamiętać każdy najmniejszy szczegół. Co jakiś czas szukasz podstaw, o których na chwilę zapomniałeś. Co to może być strata czasu. Dlatego wyszukaliśmy i zebraliśmy kilka popularnych ściągawek projektowych, które pomogą Ci przez cały dzień i pomogą Ci w opracowaniu najlepszych strategii UX.

Jeśli te strategie są pomocne, nie zapomnij również zapoznać się z tymi wskazówkami podczas ulepszania projektu UX swojej witryny.

1. Ściągawka z projektu iOS 7

Wydanie iOS 7 przyniosło wiele zmian w interfejsie, a projektanci będą musieli dostosować swój język wizualny, aby pasował do nowej płaskiej konstrukcji iOS. System siatek, wymiary, typografia i ikonografia zostały zaktualizowane przez Apple. Ivo Mynttinen był na tyle łaskawy, że stworzył ściągawkę (zaktualizowaną) dla programistów i projektantów zawierającą wszystkie informacje, które musisz znać na iOS 7, w tym:

• • Rozdzielczości na wszystkich urządzeniach
  • Wyświetlaj informacje na wszystkich urządzeniach
  • Wymiary ikon aplikacji (w tym informacje o zmianach w projekcie zaokrąglonych narożników i skąd wziąć szablon, ponieważ Apple nie wydał jeszcze jednego na iOS7)
  • Szczegóły zmian w interfejsie użytkownika
  • Krótka lista innych zasobów, które okażą się pomocne podczas projektowania aplikacji

Dzięki temu zaoszczędzisz czas i wysiłek teraz, gdy nie będziesz musiał szukać każdego najmniejszego szczegółu. Używając tego nie będziesz musiał kompilować własnej listy. Poza tym jest to jeden z najobszerniejszych arkuszy na ten temat i jest wspaniale zorganizowany.

2. Ściągawka do projektowania Androida

Oczywiście dołączamy również dla Ciebie podobną ściągawkę dotyczącą projektu Androida. To wspaniała infografika zaprojektowana przez Meghan Dever, projektantkę urządzeń mobilnych w Double Encore, Inc. Przewodnik projektowania dla Androida zawiera te informacje, ale o wiele łatwiej je znaleźć i przeczytać w tej słodkiej ściągawce.

Został stworzony do użytku wewnętrznego w firmie, ale uznali, że jest to tak przydatna oszczędność czasu, że chcieli podzielić się nim z całą społecznością. To pochodzi z:

• • Pola tekstowe Androida, paski wyszukiwania, pokrętła, selektory, przełączniki i ich przypadki użycia
  • Zasoby z dziewięcioma poprawkami z dodatkowymi możliwościami układu granic optycznych
  • Rozmiary urządzeń z Androidem i powiązane z nimi rozmiary elementów
  • Właściwe wypełnienie elementów interfejsu użytkownika
  • Specyfika paska akcji, kontekstu i ikony programu uruchamiającego
  • Konwersje Dp na piksele

3. Psychologia kolorowej infografiki

Ok, więc jest więcej niż wystarczająco wykresów, które obejmują psychologię kolorów, ale ten jest moim ulubionym, ponieważ jest znacznie obszerniejszy niż inne. Zamiast opisywać tylko podstawy (czerwony, żółty, niebieski, fioletowy, zielony), zawiera opis 50 różnych kolorów. Obejmuje nie tylko pozytywne emocje i idee, ale także te negatywne, z którymi mogą kojarzyć się różne kolory.

4. Ściągawka HTML5

Aktualizacja 9/9/16: Ten arkusz nie jest już dostępny.

To świetny arkusz referencyjny, jeśli dopiero uczysz się HTML5 lub po prostu zdarzyło Ci się pierdnąć i zapomniałeś tagu. Jest to obszerna lista, która poza tagami zawiera naprawdę sporo przydatnych informacji. Zawiera dodatkowe szczegóły dotyczące tego, gdzie można używać tagów i jakie przeglądarki obsługują co, nawet na urządzeniach. Pochodzi z:

• • Nowe tagi, które pojawiły się w HTML5
  • Istniejące tagi z HTML4, które są nadal dostępne w HTML5
  • Stare tagi, które są przestarzałe w HTML5
  • Atrybuty i to, co jest dla nich stare i nowe
  • Wykres gotowości przeglądarki

5. Ściągawka Ninja UX

Na etapie badań nad procesem UX możesz rzucić okiem na tę fajną ściągawkę stworzoną przez Hilary Little za jej przemówienie CodeFest. To kilka sprawdzonych metod, o których należy pamiętać podczas testowania użytkowników.

To kolejne świetne przypomnienie podstaw dla profesjonalistów i idealne dla każdego, kto jest nowy i potrzebuje dobrych rad i wskazówek. Możesz również zapoznać się z jej prezentacją z przemówienia tutaj. To całkiem dobrze uzupełni ściągawkę i nada pierwszemu projektantowi UX lub przedsiębiorcy świetny kierunek.

6. Projekt formularza internetowego ze ściągawkami

Smashing Magazine przyniósł nam to piękno, abyśmy mogli go używać i dzielić się nim. Jest to opisowa ściągawka do projektowania świetnych form. Projektanci tego prześcieradła do łóżeczka są dobrze zorientowani w projektowaniu i testowaniu formularzy.

Postanowili znaleźć najczęstsze problemy i opisać, jak je naprawić, a następnie umieścić to wszystko w tej wspaniałej ściągawce projektanta. Chcieli stworzyć coś, co ulepszy wszystkie formy. Zawiera szablon Omnigraffle, a także przykłady Photoshop (PSD) i PDF do pobrania. Zawiera doskonałe porady, nakazy i zakazy oraz kilka przykładów układu, których możesz użyć.

7. Ściągawka jQuery

To jest świetnie zorganizowana lista elementów jQuery, których możesz użyć jako odniesienia, gdy czegoś nie pamiętasz. Została stworzona przez Oscara Otero, projektanta stron internetowych i programistę, który wie, jak przydatne mogą być te rzeczy. Pochodzi z:

• Selektory
• Atrybuty/CSS
• Manipulacja
• Przejazd
• Wydarzenia
• Efekty
• Ajaks
• Rdzeń

Ta konkretna ściągawka do projektowania zawiera również niesamowitą funkcję wyszukiwania. Możesz wybrać wersję jQuery, której szukasz i wyszukać określone opcje. Jest to świetne narzędzie, które można mieć pod ręką jako szybki i łatwy punkt odniesienia.

8. Terminologia UX

Jako projektant UX wchodzisz w interakcję z wieloma różnymi osobami w organizacji i nie każdy zna język. Czy nie byłoby wspaniale, gdybyś nie musiał się ciągle tłumaczyć? To jest dla Ciebie, aby rozdać swoim współpracownikom, aby pomóc im zrozumieć, o czym mówisz. Została przyniesiona przez Bride Trozelli i zawiera:

• Praktyka UX
• role UX
• Działania UX
• Warunki dotyczące interfejsu użytkownika
• Produkty UX

9. Ściągawka z ikonami JQuery

To niesamowita, szybka lista ikon, które możesz stworzyć za pomocą jQuery. Wielu z was może już wiele z nich znać, ale chodźcie!

Nie każdy z nas potrafi zapamiętać każdą z nich. Przyda się to tym z nas, którzy mają trudności z przypomnieniem sobie informacji z czubków głowy. Świetnie nadaje się również dla początkujących.

Zostało to przyniesione przez Pete'a Freitaga z Foundeo Inc. Osobiście jest to moja ulubiona ze wszystkich projektantów ściągawek.

10. Ściągawki do WordPressa

Czytelnik Mike Wallagher z Startbloggingonline.com udostępnił opracowane przez siebie ściągawki do WordPressa. Są świetne zarówno dla początkujących, jak i zaawansowanych użytkowników, ponieważ oferuje obie wersje. Sprawdź je! A jeśli potrzebujesz pomocy technicznej, uzyskaj pomoc WordPress od WP Buffs!

Masz jakieś fajne arkusze do ściągania projektów, którymi chcesz się podzielić? Daj nam znać w komentarzach poniżej.