Utwórz makiety urządzeń w przeglądarce za pomocą DeviceMock

Możesz znaleźć mnóstwo darmowych makiet urządzeń online, począwszy od plików PSD po pliki szkiców. Ale co, jeśli możesz szybko budować makiety urządzeń w locie w przeglądarce?

Cóż, dzięki ludziom z rm-labo możesz! Ich darmowy plugin jQuery, DeviceMock.js, pozwala owinąć urządzenie wektorowe wokół dowolnego elementu strony, używając prostego JavaScript i SVG.

Jak to dokładnie działa??

Najpierw potrzebujesz kopia jQuery i wersja wtyczki DeviceMock z GitHub. Zawiera plik JS, plik CSS i niektóre pliki SVG do tworzenia rzeczywistych urządzeń.

Możesz cel dowolnego typu elementu na stronie, od prostego obrazu do całego div lub nawet osadzonego elementu, takiego jak iframe. Oznacza to, że możesz nawet zbuduj fajną mini-przeglądarkę w Twojej witrynie z ramką iframe na inną stronę.

Ta wtyczka obsługuje pięć różnych typów urządzeń:

1. przeglądarka internetowa
2. Smartphone
3. Tablet
4. Pulpit
5. Laptop

Wszystkie te makiety używają płaskie style ponieważ są zbudowane z SVG. I wszystkie wyglądają podobnie do urządzeń Apple, na przykład smartfon będący klonem iPhone'a i monitora stacjonarnego wyglądającego jak iMac.

Wszystkie te wektory są łatwe do dodania i działają każda przeglądarka z obsługą SVG.

Możesz nawet zmienić właściwości takie jak rozmiar makiety, motyw (biały / czarny) i orientacja (krajobraz portret).

Jeśli używasz makiety przeglądarki, możesz nawet określ fałszywy adres URL w pasku adresu. To świetny sposób na jeszcze większe dostosowanie.

Przyznana ta biblioteka nie będzie przydatna dla wszystkich oprócz niej rozwiązuje problem niszowy że wielu programistów UI / UX staje przed prototypowaniem.

Aby dowiedzieć się więcej, odwiedź Strona GitHub lub sprawdź strona na żywo dla aktywnej wersji demonstracyjnej.