JavaRush /Blog Java /Random-MS /Apakah yang dilakukan oleh pereka UX dan UI, dan apakah y...

Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?

Diterbitkan dalam kumpulan
Terdapat banyak bidang yang berkaitan dengan reka bentuk dalam industri IT. Yang paling biasa ialah pereka bentuk, tersembunyi di sebalik akronim UX dan UI. Malah, sesetengah orang berjaya memasukkan pembangun bahagian hadapan sebagai pereka. Mari cuba cari tahu siapa pereka dalam dunia IT, apakah perbezaan antara UI dan UX, dan hubungan apa yang perlu direka bentuk oleh jurutera hadapan. Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 1

Pereka bentuk

Membangunkan antara muka aplikasi, laman web atau permainan adalah proses yang agak kompleks dan memerlukan aplikasi pengetahuan dari pelbagai bidang: kejuruteraan, psikologi dan reka bentuk. Pereka bentuk antara muka pengguna (dalam bahasa Inggeris - Antara Muka Pengguna atau UI) menumpukan pada cara kefungsian tapak dipaparkan (carian, tab, menu) dan butiran interaksi antara klien dan antara muka. Matlamat pereka UI ialah reka bentuk produk moden yang boleh diterima secara estetik . UX bermaksud Pengalaman Pengguna, yang bermaksud "pengalaman pengguna". Pereka bentuk UX lebih tertumpu pada kebolehgunaan dan pemahaman antara muka oleh bakal pengguna. Pakar sedemikian selalunya akan menjalankan penyelidikan dan tinjauan yang akan menjadi asas untuk mencipta konsep reka bentuk, dan juga menguji konsep semasa dan selepas pembangunan. Ia biasanya memfokuskan pada struktur, kandungan, navigasi dan cara pengguna berinteraksi dengan elemen ini.
Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 2
Ia menghasilkan peta laman, prototaip, yang merupakan struktur asas semasa mencipta perisian. Matlamat kerja pereka UX adalah untuk pengguna dengan cepat dan tanpa rasa sakit mendapatkan dari tapak tujuan dia datang ke sini . Walau bagaimanapun, hari ini adalah perkara biasa untuk melihat kedua-dua pengkhususan ini ditulis dengan garis miring. Iaitu, tugas kedua-dua arah dilakukan oleh seorang pakar. Pereka bentuk UX/UI mereka bentuk interaksi pengguna dengan antara muka, memutuskan perkara yang perlu dia lakukan dan bertanggungjawab ke atas rupa antara muka ini sebagai hasilnya.

Perkara yang perlu diketahui oleh pereka UX/UI

  • Editor grafik . Alat yang paling popular di pasaran ialah Adobe Photoshop, Adobe Illustrator, serta Sketch, Figma. Pilih editor yang sesuai untuk anda dan mula-mula cuba melukis tangkapan skrin tapak web atau aplikasi, memodenkannya sedikit.

    Panduan Lakaran

  • Alat prototaip (Mockplus, Axure) . Alat prototaip ialah penghubung antara idea dan pelaksanaannya. Tidak kira apa alat yang anda gunakan. Anda boleh mencuba beberapa dan memutuskan yang sesuai dengan gaya dan pilihan anda.

  • Psikologi pengguna. Sudah di peringkat reka bentuk, anda harus memikirkan sama ada mudah untuk anda atau orang lain menggunakan antara muka ini. Letakkan diri anda dalam kedudukan pelanggan, bina hubungan yang kuat dengannya dan prihatin terhadap keperluannya. Lagipun, sesuatu produk akan berjaya jika ada permintaan untuknya.

    Psikologi reka bentuk: 8 prinsip psikologi yang akan berguna semasa mereka bentuk

  • Anda juga memerlukan pengetahuan tentang teori warna . Kami tahu beberapa perkara sejak kecil, terutamanya mereka yang pergi ke sekolah seni. Walau bagaimanapun, terdapat spesifikasi tertentu mengenai kerja pereka. Pengetahuan asas boleh diperolehi daripada buku atau artikel di Internet.

    Teori Warna untuk Pereka Bahagian 1: Maksud Warna

    Cara menggunakan warna dalam reka bentuk UI

  • Adalah dinasihatkan untuk memahami tipografi , satu cara untuk menggabungkan teks dan komponen visual.

    25 Peraturan Tipografi untuk Pereka Pemula

    Tipografi di web

  • Komposisi dan kebolehgunaan tapak.

    Komposisi dalam reka bentuk web, atau tutorial Photoshop yang senyap

  • Bergantung pada spesifik kerja, anda mungkin memerlukan pemahaman tentang HTML dan CSS atau (beberapa) bahasa pengaturcaraan (pautan ke sumber boleh didapati di bawah, dalam bahagian "Apa yang Perlu Tahu Pembangun Front-end").

Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 3

Pemaju bahagian hadapan

Tugas utama pembangun bahagian hadapan adalah untuk membangunkan bahagian klien antara muka. Iaitu, pakar sedemikian "menyegarkan" apa yang direka oleh pereka. Dia bertanggungjawab untuk pengendalian dan pengendalian antara muka dan kurang untuk kandungan visual. Pembangun bahagian hadapan selalunya perlu mencari penyelesaian yang baik untuk antara muka pengguna semasa peringkat pembangunannya, jadi dia sering bekerjasama dengan pereka bentuk UX/UI. Kod yang ditulis oleh pembangun bahagian hadapan berjalan dalam penyemak imbas pengguna (seperti yang mereka katakan, "di sebelah pelanggan"). Selain itu, salah satu tugas yang paling penting ialah memastikan tapak atau aplikasi web kelihatan sama pada semua platform dan pelayar.

Perkara yang Perlu Tahu Pembangun Front-end

Sebagai peraturan, bahagian hadapan adalah berdasarkan tiga tiang: bahasa penanda halaman HTML, helaian gaya CSS dan bahasa pengaturcaraan JavaScript. Di samping itu, pembangun bahagian hadapan mesti memahami prinsip operasi protokol HTTP, pelayan dan penyemak imbas, dan ciri-ciri memaparkan antara muka pada pelbagai peranti yang sedang berada di pasaran. Alat dan kaedah untuk mencipta antara muka web sentiasa berkembang dan berubah, jadi pembangun mesti sentiasa memantau perkara ini.
Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 4

HTML dan CSS (susun atur)

Ini adalah susun atur, batu bata dari mana tapak itu dibina. Bahasa penanda HTML menentukan organisasi tapak, kandungan dan semua interaksi antara mereka. Ia membolehkan anda menetapkan bahagian atas halaman, bahagian bawah, blok sisi dengan kandungan, tajuk, paparan teks dan elemen multimedia. Helaian gaya CSS digunakan untuk menghiasi elemen HTML. Mereka menentukan dengan tepat cara setiap elemen grafik yang terdapat pada halaman dipaparkan. Menggunakan versi terkini HTML5 dan CSS3, anda boleh meletakkan komponen video dan audio pada halaman, mencipta imej dan animasi 2D, dan juga menulis permainan mudah. Tidak perlu cuba mengingati semua tag dan gaya sekali gus. Ia akan membantu untuk mempelajari asas-asas dan melaksanakannya dengan segera. Tapak yang sangat bagus di mana anda boleh mempelajari asas HTML dan CSS ialah W3School. Tetapi hanya jika anda mempunyai sekurang-kurangnya pengetahuan asas bahasa Inggeris. Selain itu, pembangun bahagian hadapan mesti memahami pembangunan merentas penyemak imbas dan merentas platform, reka letak adaptif dan responsif.

Bootstrap

Ia adalah rangka kerja untuk HTML, CSS dan JavaScript. Iaitu, templat tertentu yang daripadanya, seperti daripada pembina, anda boleh memasang tapak dengan lebih pantas berbanding tanpanya. Tetapi, sudah tentu, anda perlu menyesuaikannya mengikut keperluan anda sendiri. Jika anda tahu bahasa Inggeris, kami mengesyorkan tapak web getbootstrap dan w3schools yang sama .

JavaScript

Javascript ialah teras pembangunan bahagian hadapan. Ini adalah bahasa pengaturcaraan antara muka yang pertama dan paling meluas. Ia boleh menambah banyak ciri pada tapak. Pada peringkat asas, bahasa ini membolehkan anda menambah elemen interaktif pada halaman. Ia digunakan untuk mencipta peta yang dikemas kini dalam masa nyata, permainan dalam talian interaktif dan filem. Dalam kursus JavaRush senior kami, kami mempelajari sedikit JavaScript. Anda juga boleh mempelajarinya di W3School yang sama atau membaca tentangnya dalam bahasa Rusia di laman web javascript.ru .
Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 5

jQuery

jQuery ialah perpustakaan Javascript yang mengandungi pemalam dan sambungan yang boleh menjadikan pembangunan lebih mudah dan pantas. Daripada menulis kod dari awal, perpustakaan membenarkan anda menambah komponen siap, yang kemudiannya boleh disesuaikan untuk projek tertentu. Anda boleh menggunakan fungsi mengisi borang carian secara automatik, menyusun semula dan mengubah saiz grid dan menetapkan pemasa undur. Kursus jQuery secara praktikal di w3school

Rangka kerja Javascript

Terdapat pelbagai jenis rangka kerja, tetapi anda boleh memilih satu yang sesuai untuk anda gunakan. Yang paling terkenal ialah Angular, Backbone, Ember, dan React. Mereka mewakili struktur siap sedia untuk kod. Mereka membantu mempercepatkan pembangunan. Dan dalam kombinasi dengan perpustakaan, mereka boleh meminimumkan pembangunan laman web atau aplikasi dari awal. Semakan 5 rangka kerja dan perpustakaan JavaScript paling popular pada tahun 2017

Sistem kawalan versi Git

Sistem kawalan versi boleh menjejaki perubahan yang dibuat pada kod dari semasa ke semasa. Mereka juga membenarkan anda untuk kembali ke versi sebelumnya projek. Git ialah sistem kawalan versi yang paling banyak digunakan. Mengetahui cara bekerja dengan Git ialah kemahiran penting untuk setiap pembangun. Tutorial Git dalam bahasa Rusia
Apakah yang dilakukan oleh pereka UX dan UI, dan apakah yang dilakukan oleh pembangun bahagian hadapan?  - 6

Kesimpulan ringkas

UI adalah singkatan dari User Interface, yang bermaksud "antara muka pengguna". Iaitu, Pereka UI bertanggungjawab terutamanya untuk cara produk dipersembahkan kepada pengguna. Dia membangunkan butang, ikon, memilih fon, dan menyediakan susun atur. UX bermaksud Pengalaman Pengguna. Jadi pereka UX mereka bentuk reka bentuk tapak web, aplikasi - atau apa-apa sahaja - supaya pengguna selesa dan memahami apa itu, dan dia boleh mendapatkan apa yang dia perlukan dari tapak dengan usaha yang minimum. Selalunya, kedua-dua jenis kerja dilakukan oleh orkestra seorang lelaki: pereka UI/UX. Pembangun Front-end memeriahkan kerja pereka dengan memperkenalkan dinamik ke dalamnya: butang mula ditekan, dan gambar mula berubah. Dia mesti tahu bahasa pengaturcaraan, berpengalaman dengan rangka kerja, prapemproses dan perpustakaan.
Komen
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION