Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

UX dan Kit UI Terbaik untuk Sketsa, Photoshop, Illustrator, XD, dan Figma

by
Length:MediumLanguages:

Malay (Melayu) translation by Muhammad Viqqri (you can also view the original English article)

UX dan UI Kit membantu pereka dalam pelbagai cara, dan pada tahap yang berbeza dalam proses reka bentuk. Dalam pusingan ini, saya akan menunjukkan kepada anda beberapa UX dan kit UI terlaris yang boleh didapati dari Envato, untuk membolehkan anda memulakan penyahmampatan, prototaip, dan mereka bentuk laman web atau aplikasi seterusnya.

Apakah UX dan Kit UI?

Kit berikut adalah cara yang baik untuk mendapatkan proses reka bentuk anda. Mereka boleh menjadi inspirasi, cara untuk membentangkan idea kepada klien dengan cepat, atau memberi anda tulang-tulang terdedah untuk reka bentuk penuh. Kit berikut adalah cara yang baik untuk mendapatkan proses reka bentuk anda. Mereka boleh menjadi inspirasi, cara untuk membentangkan idea kepada klien dengan cepat, atau memberi anda tulang-tulang terdedah untuk reka bentuk penuh.

Sesetengah adalah pelbagai guna dan menyediakan sejumlah besar elemen, ada yang khusus untuk wireframing, yang lain adalah lebih khusus dan memenuhi sesuatu seperti eCommerce, media sosial, peta dan navigasi, hartanah, UI mudah alih, apa sahaja yang anda pilih.

Aplikasi Reka Bentuk yang Disokong

Setiap kit yang disenaraikan di sini adalah serasi dengan sekurang-kurangnya satu daripada yang berikut, dan biasanya lebih banyak:

  • Sketch
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe XD
  • Figma
  • InVision

Kini anda boleh membuka fail lakaran dalam lakaran (jelas), Adobe XD, Figma, dan InVision tanpa apa-apa masalah.

InVision supports Sketch and Photoshop files perfectly
InVision secara asal menyokong fail lakaran dan Photoshop

Adobe XD juga akan mengendalikan fail Photoshop, menyimpan papan iklan, lapisan, dan aset sebagai benar kepada asal yang mungkin.

Adobe XD warns you about Photoshop imports
Adobe XD memberi amaran kepada anda tentang membuka PSD, tetapi ia sangat bagus

Axure sedikit kurang mematuhi format fail lain, tetapi tidak peduli apa aplikasi kit dibuat kerana ada peluang yang baik anda akan mendapati ia serasi dengan alat pilihan desain anda.

Adakah UX dan UI sama?

Istilah UX dan UI sering digunakan secara bergantian. Walaupun terdapat beberapa crossover, dan kedua-duanya bekerja bersama, mereka tidak bermaksud perkara yang sama.

Jika kita merujuk kepada kit UI, kita bercakap mengenai aset yang boleh digunakan untuk merancang antara muka pengguna. Ini bermakna merancang persembahan, estetika, bagaimana UI kelihatan visual. Aset dari kit UX, sebaliknya, akan digunakan untuk merancang pengalaman laman web atau aplikasinya. Fikirkan wireframe dan prototaip. Kegunaan, aliran, interaksi antara pengguna dan produk.

Kit UX dan UI boleh digunakan untuk kedua-dua tujuan, itulah sebabnya mereka sering dipanggil 'UX dan UI Kit'.

UX dan UI Kit pada Envato

Kami mempunyai beratus-ratus kit UX dan UI di Envato Market dan Envato Elements (di mana anda boleh memuat turun seberapa banyak yang anda inginkan untuk satu harga yang rendah). Mari lihat beberapa yang paling popular!

1. Wireland (Sketch)

Nama itu mengatakan semuanya; Wireland adalah tentang wireframing. Ia datang dengan lebih daripada 200 susun atur yang telah ditetapkan, dan terdapat sejumlah terperinci, memberikan anda lebih dari kesetiaan, tetapi estetika biru yang tenang dan rapi sesuai untuk wireframe.

Wireland - Wireframe Library for Web Design Projects - Sketch Template
Wireland: Perpustakaan Wireframe untuk Projek Reka Bentuk Web

Ia termasuk perpustakaan peranti, elemen penanda untuk menunjukkan aliran, menggunakan simbol, dan berdasarkan grid biasa Bootstrap. Akhir sekali, ada juga sampel percuma yang boleh anda muat turun dan cuba sebelum membeli versi berlesen penuh.

Wirelands markup elements
Unsur markah Wireland, untuk pelabelan, komen, dan aliran menunjukkan

2. Userflow * Sitemap (Photoshop dan Illustrator)

Meletakkan aliran pengguna adalah bahagian penting dalam proses reka bentuk. Ia berlaku pada awal, dan ia berlaku dengan cepat. Website Userflow * Sitemap UX Kit mempunyai semua elemen yang anda perlukan untuk melakukan ini: koleksi skrin dan grafik untuk anda memfailkan bagaimana pengguna akan bergerak dari satu bahagian laman web ke yang lain.

Website Userflow Sitemap UX Kit
Website Userflow & Sitemap UX Kit

Ia mempunyai versi gelap dan terang, bergantung pada keutamaan anda, tetapi itu sama rumit seperti keputusan visual yang diperoleh. Dapatkan beberapa skrin, buang mereka, hubungkan mereka bersama-sama!

Website Userflow Sitemap UX Kit dark version
Website Userflow * Sitemap UX Kit, versi gelap

3. UI Bergerak Bolder (Sketsa)

Bolder adalah kit UI yang menawarkan 65 susun atur mudah alih super berkualiti tinggi, yang meliputi pelbagai jenis seperti media sosial, eCommerce, dan blogging. Bolder mempunyai getaran dalam swathes, dan dianjurkan secara praktikal dengan seni, lapisan, simbol, dan gaya tipografi, menjadikannya mudah untuk pereka UI mudah alih untuk bekerja dengan.

Bolder - Multipurpose Mobile UI KIT for Sketch
Bolder - KIT UI Mudah Alih Serbaguna untuk Lakaran

4. Kama IOS UI Kit (Sketsa)

Kama direka khusus untuk iOS. Ia termasuk lebih daripada 120 skrin, memberikan reka bentuk carta reka bentuk apl, walkthrough, eCommerce, multimedia, profil pengguna, navigasi, dan pilihan media sosial untuk bermain-main dengan, serta 60 ikon tersuai.

Kama iOS UI Kit
Kama iOS UI Kit

5. Farah (Sketch, XD, Figma)

Farah serius. Ia mempunyai 15 susun atur mudah alih hi-kesetiaan, semua cutomisable sepenuhnya, dan semua dengan rasa yang sangat kontemporari. Ia merupakan tambahan baru kepada Pasaran Envato, mencerminkan permintaan semasa bagi pelbagai aplikasi reka bentuk dengan katering khusus kepada pengguna Sketch, XD, dan Figma.

Jika anda sedang mencari berani dan yakin, ini adalah wajah yang hebat untuk memohon kepada reka bentuk anda.

Farah - Profile UI Kit for Sketch App
Farah - Kit UI Profil untuk Aplikasi Sketch

6. Kit Formula MIGO UI (Sketch, XD, Figma)

MIGO adalah satu lagi reka bentuk berani dan energik dengan hoangpts. Ini adalah untuk aplikasi temu janji, dan akan memberikan reka bentuk warna liar, kecerunan, dan mengundang kehangatan bulat seluruhnya. Ia mengandungi 22 skrin IOS berkualiti tinggi (siap untuk iPhone), dan bersesuaian dengan Sketch, XD, dan Figma,

MIGO Dating UI Kit
MIGO Dating UI Kit

7. Stamp (Sketch)

Setem adalah satu lagi pilihan hi-kesetiaan, menawarkan pereka lebih daripada 75 'kad' susun atur, dibina dengan lebih daripada seratus komponen yang berbeza.

Customize with Stamp
Customize with Stamp

Sesuaikan dengan Setem, daripada membina dari awal, dan anda dengan cepat akan mempunyai reka bentuk web lengkap dan moden.

Stamp 100 Beautiful Web Components
Stamp – 100 Beautiful Web Components

8. Ultramarine UI Kit (Sketch)

Saya suka yang ini. Tidak kurang kerana ultramarine itu benar-benar membungkus pukulan ditambah dengan hijau limau. Sekali lagi, ini adalah perkara hi-kesetiaan, jadi ia tidak begitu banyak untuk tahap reka bentuk UX produk, lebih banyak mengenai menambah venir yang bergaya. Dengan itu, ia adalah venir yang kuat (dan sangat lengkap), menawarkan 120 komponen untuk digunakan dalam reka bentuk anda.

Ultramarine UI Kit
Ultramarine UI Kit

9. E-commerce Seterusnya (Sketch, Photoshop)

Jika anda menikmati membina reka bentuk anda di Photoshop, E-commerce Seterusnya memberikan anda pilihan itu. Dengan 35 Skrip Fail JPA, terdapat banyak elemen UI mudah alih untuk dimainkan.

Next Ecommerce - UI Kit
E-Commerce Seterusnya - Kit UI

10. Doom (Photoshop)

Satu lagi pilihan Photoshop, Doom adalah kit UI yang terus terang. Ia memberikan anda hampir 100 susun atur PSD, termasuk halaman utama, halaman dalaman, dengan semua jenis ceruk dilindungi, dan merupakan contoh pertama kami untuk memasukkan pilihan papan pemuka admin.

Doom - Massive All in One PSD Pack
Doom - Massive All in One Pack JPA

Doom juga termasuk sejumlah besar reka bentuk tapak cryptocurrency (jika itu perkara anda) jadi jika anda merancang halaman pendaratan untuk duit syiling besar berikutnya ini adalah tempat yang bagus untuk bermula!

Doom - Massive All in One PSD Pack
Doom - cryptocurrency landing page designs

11. Blok Wireframe Kit (Photoshop)

Blokk adalah satu lagi kit Photoshop, menyediakan UI mudah untuk tujuan wireframing. Tanpa butiran yang tidak perlu, Blokk akan membantu anda membuat keputusan teras dalam proses reka bentuk.

Blokk Wireframe Kit
Blok Wireframe Kit 170+ Screens

Ini adalah koleksi yang sangat besar, memberikan anda 170 kad UI, dan menunjukkan pelbagai elemen dengan enam halaman sampel. Ia menawarkan komponen berikut (dan lebih):

  1. Media gallery
  2. ciri-ciri
  3. Panggil untuk Tindakan
  4. Blog
  5. E-Commerce
  6. Testimoni
  7. Jadual Harga
  8. Analitis
Blokk Wireframe Kit 6 page demos
Blokk Wireframe Kit: enam susun atur demo

Dapatkan UX / UI Kit Hari Ini!

Sama ada anda berada di peringkat awal reka bentuk dan memerlukan beberapa grafik wireframe, meletakkan estetika terakhir melalui prototaip, atau mencari inspirasi untuk projek anda yang seterusnya, UX dan kit UI boleh sangat membantu (dan menyeronokkan!) Untuk mana-mana pereka web atau aplikasi.

Item yang disenaraikan di sini boleh didapati di Pasar Envato, tetapi jangan lupa untuk memeriksa penawaran besar-besaran di Elvora Envato!

Kami akan Mengemas kini Senarai ini secara kerap

Beri tahu kami dalam komen yang kegemaran anda, cadangkan kit anda sendiri, dan kongsi petua anda. Kami akan mengemas kini senarai ini kerana masa berlanjutan untuk memastikannya sebagai terkini dan relevan.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.