DeviceMock ile Tarayıcıda Cihaz Modelleri Oluşturun
PSD'lerden Sketch dosyalarına kadar tonlarca ücretsiz cihaz makbuzu bulabilirsiniz. Ama, ya hızlı bir şekilde yapabilseydin anında cihaz örnekler oluşturun tarayıcınızda?
Şey, rm-labo'daki millet sayesinde, yapabilirsin! Onların ücretsiz jQuery eklentisi, DeviceMock.js, size sağlar bir vektör aygıtını herhangi bir sayfa öğesinin etrafına sarın, Basit JavaScript ve SVG'ler kullanarak.
Peki bu tam olarak nasıl çalışıyor??
İlk önce ihtiyacın olan jQuery'nin bir kopyası ve DeviceHock eklentisinin GitHub’tan bir sürümü. Bu, asıl cihazları oluşturmak için bir JS dosyası, CSS dosyası ve bazı SVG dosyalarıyla birlikte gelir..
Yapabilirsin herhangi bir öğe türünü hedefleme sayfada, basit bir görüntüden tüm div'e, hatta iframe gibi gömülü bir öğeye kadar. Bu bile yapabilirsin havalı bir mini tarayıcı oluşturun Sitenizde başka bir sayfaya bir iframe ekleyin.
Bu eklenti destekliyor beş farklı cihaz tipi:
- internet tarayıcısı
- Akıllı Telefon
- Tablet
- Masaüstü
- Dizüstü
Tüm bu örnekler kullanmak düz tasarım stilleri SVG'lerle inşa edildiklerinden beri. Ve hepsi de Apple cihazlarına oldukça benziyor, örneğin akıllı telefon iPhone'un klonu ve masaüstü monitörü belirgin bir şekilde bir iMac gibi görünüyor.
Bütün bu vektörlerin eklenmesi kolaydır ve içinde çalışırlar. SVG destekli her tarayıcı.
Sen bile özellikleri değiştir mockup boyutu, tema (beyaz / siyah) ve yönlendirme (dikey manzara) gibi.
Eğer tarayıcı mockup kullanıyorsanız, boş bir URL belirtin adres çubuğunda. Bu, daha fazla kişiselleştirme eklemek için eğlenceli bir yoldur.
Bu kütüphane herkes için yararlı olmayacak. Bir niş sorunu çözer prototip yaparken birçok UI / UX geliştiricisinin karşılaştığı.
Daha fazla bilgi edinmek için, GitHub sayfası ya da kontrol et canlı site aktif bir demo için.
